Implemented 2D visualization for notes using Vue Flow

2024-03-08 11:23:47 +05:30
parent 4e1e2054a6
commit f16d7e4788
488 changed files with 123675 additions and 20 deletions
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -779,6 +779,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
    "node_modules/@typescript-eslint/eslint-plugin": {
      "version": "6.21.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
@@ -1029,6 +1035,42 @@
        "path-browserify": "^1.0.1"
      }
    },
+    "node_modules/@vue-flow/background": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@vue-flow/background/-/background-1.3.2.tgz",
+      "integrity": "sha512-eJPhDcLj1wEo45bBoqTXw1uhl0yK2RaQGnEINqvvBsAFKh/camHJd5NPmOdS1w+M9lggc9igUewxaEd3iCQX2w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@vue-flow/core": "^1.23.0",
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/@vue-flow/controls": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@vue-flow/controls/-/controls-1.1.3.tgz",
+      "integrity": "sha512-XCf+G+jCvaWURdFlZmOjifZGw3XMhN5hHlfMGkWh9xot+9nH9gdTZtn+ldIJKtarg3B21iyHU8JjKDhYcB6JMw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@vue-flow/core": "^1.23.0",
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/@vue-flow/core": {
+      "version": "1.46.0",
+      "resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.46.0.tgz",
+      "integrity": "sha512-vNIeFcbHuDgl1PSjABL/p+PHlTZYwt1NfZ+htjYlZtqzPfCSkP9URk/TY9ahORBWd/UvgxaNY+AQQoV2O49rtA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vueuse/core": "^10.5.0",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.0"
+      }
+    },
    "node_modules/@vue/compiler-core": {
      "version": "3.5.20",
      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.20.tgz",
@@ -1193,6 +1235,42 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
    "node_modules/acorn": {
      "version": "8.15.0",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -1599,6 +1677,111 @@
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
      "license": "MIT"
    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/de-indent": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
--- a/node_modules/.vite/deps/@vue-flow_background.js
+++ b/node_modules/.vite/deps/@vue-flow_background.js
@@ -0,0 +1,144 @@
+import {
+  useVueFlow
+} from "./chunk-OUZUAOAF.js";
+import {
+  computed,
+  createBaseVNode,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  defineComponent,
+  h,
+  normalizeStyle,
+  openBlock,
+  renderSlot,
+  toRef,
+  unref
+} from "./chunk-QT7TTBG7.js";
+
+// node_modules/@vue-flow/background/dist/vue-flow-background.mjs
+var BackgroundVariant = ((BackgroundVariant2) => {
+  BackgroundVariant2["Lines"] = "lines";
+  BackgroundVariant2["Dots"] = "dots";
+  return BackgroundVariant2;
+})(BackgroundVariant || {});
+var LinePattern = function({ dimensions, size, color }) {
+  return h("path", {
+    "stroke": color,
+    "stroke-width": size,
+    "d": `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`
+  });
+};
+var DotPattern = function({ radius, color }) {
+  return h("circle", { cx: radius, cy: radius, r: radius, fill: color });
+};
+({
+  [BackgroundVariant.Lines]: LinePattern,
+  [BackgroundVariant.Dots]: DotPattern
+});
+var DefaultBgColors = {
+  [BackgroundVariant.Dots]: "#81818a",
+  [BackgroundVariant.Lines]: "#eee"
+};
+var _hoisted_1 = ["id", "x", "y", "width", "height", "patternTransform"];
+var _hoisted_2 = {
+  key: 2,
+  height: "100",
+  width: "100"
+};
+var _hoisted_3 = ["fill"];
+var _hoisted_4 = ["x", "y", "fill"];
+var __default__ = {
+  name: "Background",
+  compatConfig: { MODE: 3 }
+};
+var _sfc_main = defineComponent({
+  ...__default__,
+  props: {
+    id: {},
+    variant: { default: () => BackgroundVariant.Dots },
+    gap: { default: 20 },
+    size: { default: 1 },
+    lineWidth: { default: 1 },
+    patternColor: {},
+    color: {},
+    bgColor: {},
+    height: { default: 100 },
+    width: { default: 100 },
+    x: { default: 0 },
+    y: { default: 0 },
+    offset: { default: 0 }
+  },
+  setup(__props) {
+    const { id: vueFlowId, viewport } = useVueFlow();
+    const background = computed(() => {
+      const zoom = viewport.value.zoom;
+      const [gapX, gapY] = Array.isArray(__props.gap) ? __props.gap : [__props.gap, __props.gap];
+      const scaledGap = [gapX * zoom || 1, gapY * zoom || 1];
+      const scaledSize = __props.size * zoom;
+      const [offsetX, offsetY] = Array.isArray(__props.offset) ? __props.offset : [__props.offset, __props.offset];
+      const scaledOffset = [offsetX * zoom || 1 + scaledGap[0] / 2, offsetY * zoom || 1 + scaledGap[1] / 2];
+      return {
+        scaledGap,
+        offset: scaledOffset,
+        size: scaledSize
+      };
+    });
+    const patternId = toRef(() => `pattern-${vueFlowId}${__props.id ? `-${__props.id}` : ""}`);
+    const patternColor = toRef(() => __props.color || __props.patternColor || DefaultBgColors[__props.variant || BackgroundVariant.Dots]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        class: "vue-flow__background vue-flow__container",
+        style: normalizeStyle({
+          height: `${_ctx.height > 100 ? 100 : _ctx.height}%`,
+          width: `${_ctx.width > 100 ? 100 : _ctx.width}%`
+        })
+      }, [
+        renderSlot(_ctx.$slots, "pattern-container", { id: patternId.value }, () => [
+          createBaseVNode("pattern", {
+            id: patternId.value,
+            x: unref(viewport).x % background.value.scaledGap[0],
+            y: unref(viewport).y % background.value.scaledGap[1],
+            width: background.value.scaledGap[0],
+            height: background.value.scaledGap[1],
+            patternTransform: `translate(-${background.value.offset[0]},-${background.value.offset[1]})`,
+            patternUnits: "userSpaceOnUse"
+          }, [
+            renderSlot(_ctx.$slots, "pattern", {}, () => [
+              _ctx.variant === unref(BackgroundVariant).Lines ? (openBlock(), createBlock(unref(LinePattern), {
+                key: 0,
+                size: _ctx.lineWidth,
+                color: patternColor.value,
+                dimensions: background.value.scaledGap
+              }, null, 8, ["size", "color", "dimensions"])) : _ctx.variant === unref(BackgroundVariant).Dots ? (openBlock(), createBlock(unref(DotPattern), {
+                key: 1,
+                color: patternColor.value,
+                radius: background.value.size / 2
+              }, null, 8, ["color", "radius"])) : createCommentVNode("", true),
+              _ctx.bgColor ? (openBlock(), createElementBlock("svg", _hoisted_2, [
+                createBaseVNode("rect", {
+                  width: "100%",
+                  height: "100%",
+                  fill: _ctx.bgColor
+                }, null, 8, _hoisted_3)
+              ])) : createCommentVNode("", true)
+            ])
+          ], 8, _hoisted_1)
+        ]),
+        createBaseVNode("rect", {
+          x: _ctx.x,
+          y: _ctx.y,
+          width: "100%",
+          height: "100%",
+          fill: `url(#${patternId.value})`
+        }, null, 8, _hoisted_4),
+        renderSlot(_ctx.$slots, "default", { id: patternId.value })
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as Background,
+  BackgroundVariant
+};
+//# sourceMappingURL=@vue-flow_background.js.map
--- a/node_modules/.vite/deps/@vue-flow_background.js.map
+++ b/node_modules/.vite/deps/@vue-flow_background.js.map
--- a/node_modules/.vite/deps/@vue-flow_controls.js
+++ b/node_modules/.vite/deps/@vue-flow_controls.js
@@ -0,0 +1,228 @@
+import {
+  PanelPosition,
+  _sfc_main,
+  useVueFlow
+} from "./chunk-OUZUAOAF.js";
+import {
+  Fragment,
+  createBaseVNode,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createVNode,
+  defineComponent,
+  openBlock,
+  renderSlot,
+  resolveDynamicComponent,
+  toRef,
+  unref,
+  withCtx
+} from "./chunk-QT7TTBG7.js";
+
+// node_modules/@vue-flow/controls/dist/vue-flow-controls.mjs
+var _sfc_main$1 = {
+  name: "ControlButton",
+  compatConfig: { MODE: 3 }
+};
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+var _hoisted_1$5 = {
+  type: "button",
+  class: "vue-flow__controls-button"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("button", _hoisted_1$5, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var ControlButton = _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
+var _hoisted_1$4 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+};
+var _hoisted_2$4 = createBaseVNode("path", { d: "M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" }, null, -1);
+var _hoisted_3$4 = [
+  _hoisted_2$4
+];
+function render$4(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_3$4);
+}
+var PlusIcon = { render: render$4 };
+var _hoisted_1$3 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 5"
+};
+var _hoisted_2$3 = createBaseVNode("path", { d: "M0 0h32v4.2H0z" }, null, -1);
+var _hoisted_3$3 = [
+  _hoisted_2$3
+];
+function render$3(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
+}
+var MinusIcon = { render: render$3 };
+var _hoisted_1$2 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 30"
+};
+var _hoisted_2$2 = createBaseVNode("path", { d: "M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0 0 27.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94a.919.919 0 0 1-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" }, null, -1);
+var _hoisted_3$2 = [
+  _hoisted_2$2
+];
+function render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
+}
+var FitView = { render: render$2 };
+var _hoisted_1$1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 25 32"
+};
+var _hoisted_2$1 = createBaseVNode("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" }, null, -1);
+var _hoisted_3$1 = [
+  _hoisted_2$1
+];
+function render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_3$1);
+}
+var Lock = { render: render$1 };
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 25 32"
+};
+var _hoisted_2 = createBaseVNode("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047z" }, null, -1);
+var _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+var Unlock = { render };
+var __default__ = {
+  name: "Controls",
+  compatConfig: { MODE: 3 }
+};
+var _sfc_main2 = defineComponent({
+  ...__default__,
+  props: {
+    showZoom: { type: Boolean, default: true },
+    showFitView: { type: Boolean, default: true },
+    showInteractive: { type: Boolean, default: true },
+    fitViewParams: {},
+    position: { default: () => PanelPosition.BottomLeft }
+  },
+  emits: ["zoomIn", "zoomOut", "fitView", "interactionChange"],
+  setup(__props, { emit }) {
+    const {
+      nodesDraggable,
+      nodesConnectable,
+      elementsSelectable,
+      setInteractive,
+      zoomIn,
+      zoomOut,
+      fitView,
+      viewport,
+      minZoom,
+      maxZoom
+    } = useVueFlow();
+    const isInteractive = toRef(() => nodesDraggable.value || nodesConnectable.value || elementsSelectable.value);
+    const minZoomReached = toRef(() => viewport.value.zoom <= minZoom.value);
+    const maxZoomReached = toRef(() => viewport.value.zoom >= maxZoom.value);
+    function onZoomInHandler() {
+      zoomIn();
+      emit("zoomIn");
+    }
+    function onZoomOutHandler() {
+      zoomOut();
+      emit("zoomOut");
+    }
+    function onFitViewHandler() {
+      fitView(__props.fitViewParams);
+      emit("fitView");
+    }
+    function onInteractiveChangeHandler() {
+      setInteractive(!isInteractive.value);
+      emit("interactionChange", !isInteractive.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main), {
+        class: "vue-flow__controls",
+        position: _ctx.position
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "top"),
+          _ctx.showZoom ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            renderSlot(_ctx.$slots, "control-zoom-in", {}, () => [
+              createVNode(ControlButton, {
+                class: "vue-flow__controls-zoomin",
+                disabled: maxZoomReached.value,
+                onClick: onZoomInHandler
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "icon-zoom-in", {}, () => [
+                    (openBlock(), createBlock(resolveDynamicComponent(unref(PlusIcon))))
+                  ])
+                ]),
+                _: 3
+              }, 8, ["disabled"])
+            ]),
+            renderSlot(_ctx.$slots, "control-zoom-out", {}, () => [
+              createVNode(ControlButton, {
+                class: "vue-flow__controls-zoomout",
+                disabled: minZoomReached.value,
+                onClick: onZoomOutHandler
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "icon-zoom-out", {}, () => [
+                    (openBlock(), createBlock(resolveDynamicComponent(unref(MinusIcon))))
+                  ])
+                ]),
+                _: 3
+              }, 8, ["disabled"])
+            ])
+          ], 64)) : createCommentVNode("", true),
+          _ctx.showFitView ? renderSlot(_ctx.$slots, "control-fit-view", { key: 1 }, () => [
+            createVNode(ControlButton, {
+              class: "vue-flow__controls-fitview",
+              onClick: onFitViewHandler
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "icon-fit-view", {}, () => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(FitView))))
+                ])
+              ]),
+              _: 3
+            })
+          ]) : createCommentVNode("", true),
+          _ctx.showInteractive ? renderSlot(_ctx.$slots, "control-interactive", { key: 2 }, () => [
+            _ctx.showInteractive ? (openBlock(), createBlock(ControlButton, {
+              key: 0,
+              class: "vue-flow__controls-interactive",
+              onClick: onInteractiveChangeHandler
+            }, {
+              default: withCtx(() => [
+                isInteractive.value ? renderSlot(_ctx.$slots, "icon-unlock", { key: 0 }, () => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(Unlock))))
+                ]) : createCommentVNode("", true),
+                !isInteractive.value ? renderSlot(_ctx.$slots, "icon-lock", { key: 1 }, () => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(Lock))))
+                ]) : createCommentVNode("", true)
+              ]),
+              _: 3
+            })) : createCommentVNode("", true)
+          ]) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["position"]);
+    };
+  }
+});
+export {
+  ControlButton,
+  _sfc_main2 as Controls
+};
+//# sourceMappingURL=@vue-flow_controls.js.map
--- a/node_modules/.vite/deps/@vue-flow_controls.js.map
+++ b/node_modules/.vite/deps/@vue-flow_controls.js.map
--- a/node_modules/.vite/deps/@vue-flow_core.js
+++ b/node_modules/.vite/deps/@vue-flow_core.js
@@ -0,0 +1,143 @@
+import {
+  BezierEdge$1,
+  ConnectionLineType,
+  ConnectionMode,
+  ErrorCode,
+  MarkerType,
+  NodeId,
+  PanOnScrollMode,
+  PanelPosition,
+  Position,
+  SelectionMode,
+  SimpleBezierEdge$1,
+  SmoothStepEdge$1,
+  StepEdge$1,
+  StraightEdge$1,
+  VueFlow,
+  VueFlowError,
+  _sfc_main,
+  _sfc_main$1,
+  _sfc_main$3,
+  _sfc_main$d,
+  _sfc_main$e,
+  _sfc_main$f,
+  addEdge,
+  applyChanges,
+  applyEdgeChanges,
+  applyNodeChanges,
+  clamp,
+  connectionExists,
+  defaultEdgeTypes,
+  defaultNodeTypes,
+  getBezierEdgeCenter,
+  getBezierPath,
+  getBoundsofRects,
+  getConnectedEdges,
+  getIncomers,
+  getMarkerId,
+  getNodesInside,
+  getOutgoers,
+  getRectOfNodes,
+  getSimpleBezierPath,
+  getSimpleEdgeCenter,
+  getSmoothStepPath,
+  getStraightPath,
+  getTransformForBounds,
+  isEdge,
+  isErrorOfType,
+  isGraphEdge,
+  isGraphNode,
+  isMacOs,
+  isNode,
+  pointToRendererPoint,
+  rendererPointToPoint,
+  updateEdge,
+  useConnection,
+  useEdge,
+  useEdgesData,
+  useGetPointerPosition,
+  useHandle,
+  useHandleConnections,
+  useKeyPress,
+  useNode,
+  useNodeConnections,
+  useNodeId,
+  useNodesData,
+  useNodesInitialized,
+  useVueFlow,
+  useZoomPanHelper,
+  wheelDelta
+} from "./chunk-OUZUAOAF.js";
+import "./chunk-QT7TTBG7.js";
+export {
+  _sfc_main$d as BaseEdge,
+  BezierEdge$1 as BezierEdge,
+  ConnectionLineType,
+  ConnectionMode,
+  _sfc_main$3 as EdgeLabelRenderer,
+  _sfc_main$e as EdgeText,
+  ErrorCode,
+  _sfc_main$f as Handle,
+  MarkerType,
+  NodeId as NodeIdInjection,
+  PanOnScrollMode,
+  _sfc_main as Panel,
+  PanelPosition,
+  Position,
+  SelectionMode,
+  SimpleBezierEdge$1 as SimpleBezierEdge,
+  SmoothStepEdge$1 as SmoothStepEdge,
+  StepEdge$1 as StepEdge,
+  StraightEdge$1 as StraightEdge,
+  _sfc_main$1 as VueFlow,
+  VueFlowError,
+  VueFlow as VueFlowInjection,
+  addEdge,
+  applyChanges,
+  applyEdgeChanges,
+  applyNodeChanges,
+  clamp,
+  connectionExists,
+  defaultEdgeTypes,
+  defaultNodeTypes,
+  getBezierEdgeCenter,
+  getBezierPath,
+  getBoundsofRects,
+  getConnectedEdges,
+  getIncomers,
+  getMarkerId,
+  getNodesInside,
+  getOutgoers,
+  getRectOfNodes,
+  getSimpleBezierPath,
+  getSimpleEdgeCenter,
+  getSmoothStepPath,
+  getStraightPath,
+  getTransformForBounds,
+  rendererPointToPoint as graphPosToZoomedPos,
+  isEdge,
+  isErrorOfType,
+  isGraphEdge,
+  isGraphNode,
+  isMacOs,
+  isNode,
+  pointToRendererPoint,
+  rendererPointToPoint,
+  updateEdge,
+  useConnection,
+  useEdge,
+  useEdgesData,
+  useGetPointerPosition,
+  useHandle,
+  useHandleConnections,
+  useKeyPress,
+  useNode,
+  useNodeConnections,
+  useNodeId,
+  useNodesData,
+  useNodesInitialized,
+  useVueFlow,
+  useZoomPanHelper,
+  wheelDelta
+};
+//# sourceMappingURL=@vue-flow_core.js.map
--- a/node_modules/.vite/deps/@vue-flow_core.js.map
+++ b/node_modules/.vite/deps/@vue-flow_core.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}
--- a/node_modules/.vite/deps/_metadata.json
+++ b/node_modules/.vite/deps/_metadata.json
@@ -1,23 +1,41 @@
 {
-  "hash": "891f6d0d",
-  "browserHash": "ace4061b",
+  "hash": "5686f588",
+  "browserHash": "504d91e1",
  "optimized": {
    "pinia": {
      "src": "../../pinia/dist/pinia.mjs",
      "file": "pinia.js",
-      "fileHash": "743100d8",
+      "fileHash": "4984e75a",
      "needsInterop": false
    },
    "vue": {
      "src": "../../vue/dist/vue.runtime.esm-bundler.js",
      "file": "vue.js",
-      "fileHash": "2793dc8b",
+      "fileHash": "91b27941",
      "needsInterop": false
    },
    "vue-router": {
      "src": "../../vue-router/dist/vue-router.mjs",
      "file": "vue-router.js",
-      "fileHash": "868d5267",
+      "fileHash": "1d5cd9f7",
+      "needsInterop": false
+    },
+    "@vue-flow/core": {
+      "src": "../../@vue-flow/core/dist/vue-flow-core.mjs",
+      "file": "@vue-flow_core.js",
+      "fileHash": "d8a4d018",
+      "needsInterop": false
+    },
+    "@vue-flow/controls": {
+      "src": "../../@vue-flow/controls/dist/vue-flow-controls.mjs",
+      "file": "@vue-flow_controls.js",
+      "fileHash": "47d61b01",
+      "needsInterop": false
+    },
+    "@vue-flow/background": {
+      "src": "../../@vue-flow/background/dist/vue-flow-background.mjs",
+      "file": "@vue-flow_background.js",
+      "fileHash": "aed5145d",
      "needsInterop": false
    }
  },
@@ -25,6 +43,9 @@
    "chunk-YFT6OQ5R": {
      "file": "chunk-YFT6OQ5R.js"
    },
+    "chunk-OUZUAOAF": {
+      "file": "chunk-OUZUAOAF.js"
+    },
    "chunk-QT7TTBG7": {
      "file": "chunk-QT7TTBG7.js"
    }
--- a/node_modules/.vite/deps/chunk-OUZUAOAF.js
+++ b/node_modules/.vite/deps/chunk-OUZUAOAF.js
--- a/node_modules/.vite/deps/chunk-OUZUAOAF.js.map
+++ b/node_modules/.vite/deps/chunk-OUZUAOAF.js.map
--- a/node_modules/@types/web-bluetooth/LICENSE
+++ b/node_modules/@types/web-bluetooth/LICENSE
@@ -0,0 +1,21 @@
+    MIT License
+
+    Copyright (c) Microsoft Corporation.
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE
--- a/node_modules/@types/web-bluetooth/README.md
+++ b/node_modules/@types/web-bluetooth/README.md
@@ -0,0 +1,15 @@
+# Installation
+> `npm install --save @types/web-bluetooth`
+
+# Summary
+This package contains type definitions for web-bluetooth (https://webbluetoothcg.github.io/web-bluetooth/).
+
+# Details
+Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/web-bluetooth.
+
+### Additional Details
+ * Last updated: Tue, 07 Nov 2023 15:11:36 GMT
+ * Dependencies: none
+
+# Credits
+These definitions were written by [Uri Shaked](https://github.com/urish), [Xavier Lozinguez](https://github.com/xlozinguez), [Rob Moran](https://github.com/thegecko), and [David Bjerremose](https://github.com/DaBs).
--- a/node_modules/@types/web-bluetooth/index.d.ts
+++ b/node_modules/@types/web-bluetooth/index.d.ts
@@ -0,0 +1,193 @@
+type BluetoothServiceUUID = number | string;
+type BluetoothCharacteristicUUID = number | string;
+type BluetoothDescriptorUUID = number | string;
+
+type BluetoothManufacturerData = Map<number, DataView>;
+type BluetoothServiceData = Map<BluetoothServiceUUID, DataView>;
+
+interface BluetoothDataFilter {
+    readonly dataPrefix?: BufferSource | undefined;
+    readonly mask?: BufferSource | undefined;
+}
+
+interface BluetoothManufacturerDataFilter extends BluetoothDataFilter {
+    companyIdentifier: number;
+}
+
+interface BluetoothServiceDataFilter extends BluetoothDataFilter {
+    service: BluetoothServiceUUID;
+}
+
+interface BluetoothLEScanFilter {
+    readonly name?: string | undefined;
+    readonly namePrefix?: string | undefined;
+    readonly services?: BluetoothServiceUUID[] | undefined;
+    readonly manufacturerData?: BluetoothManufacturerDataFilter[] | undefined;
+    readonly serviceData?: BluetoothServiceDataFilter[] | undefined;
+}
+
+interface BluetoothLEScanOptions {
+    readonly filters?: BluetoothLEScanFilter[] | undefined;
+    readonly keepRepeatedDevices?: boolean | undefined;
+    readonly acceptAllAdvertisements?: boolean | undefined;
+}
+
+interface BluetoothLEScan extends BluetoothLEScanOptions {
+    active: boolean;
+    stop: () => void;
+}
+
+type RequestDeviceOptions = {
+    filters: BluetoothLEScanFilter[];
+    optionalServices?: BluetoothServiceUUID[] | undefined;
+    optionalManufacturerData?: number[] | undefined;
+} | {
+    acceptAllDevices: boolean;
+    optionalServices?: BluetoothServiceUUID[] | undefined;
+    optionalManufacturerData?: number[] | undefined;
+};
+
+interface BluetoothAdvertisingEvent extends Event {
+    readonly device: BluetoothDevice;
+    readonly uuids: BluetoothServiceUUID[];
+    readonly manufacturerData: BluetoothManufacturerData;
+    readonly serviceData: BluetoothServiceData;
+    readonly name?: string | undefined;
+    readonly appearance?: number | undefined;
+    readonly rssi?: number | undefined;
+    readonly txPower?: number | undefined;
+}
+
+interface BluetoothRemoteGATTDescriptor {
+    readonly characteristic: BluetoothRemoteGATTCharacteristic;
+    readonly uuid: string;
+    readonly value?: DataView | undefined;
+    readValue(): Promise<DataView>;
+    writeValue(value: BufferSource): Promise<void>;
+}
+
+interface BluetoothCharacteristicProperties {
+    readonly broadcast: boolean;
+    readonly read: boolean;
+    readonly writeWithoutResponse: boolean;
+    readonly write: boolean;
+    readonly notify: boolean;
+    readonly indicate: boolean;
+    readonly authenticatedSignedWrites: boolean;
+    readonly reliableWrite: boolean;
+    readonly writableAuxiliaries: boolean;
+}
+
+interface CharacteristicEventHandlers {
+    oncharacteristicvaluechanged: (this: this, ev: Event) => any;
+}
+
+interface BluetoothRemoteGATTCharacteristic extends EventTarget, CharacteristicEventHandlers {
+    readonly service: BluetoothRemoteGATTService;
+    readonly uuid: string;
+    readonly properties: BluetoothCharacteristicProperties;
+    readonly value?: DataView | undefined;
+    getDescriptor(descriptor: BluetoothDescriptorUUID): Promise<BluetoothRemoteGATTDescriptor>;
+    getDescriptors(descriptor?: BluetoothDescriptorUUID): Promise<BluetoothRemoteGATTDescriptor[]>;
+    readValue(): Promise<DataView>;
+    writeValue(value: BufferSource): Promise<void>;
+    writeValueWithResponse(value: BufferSource): Promise<void>;
+    writeValueWithoutResponse(value: BufferSource): Promise<void>;
+    startNotifications(): Promise<BluetoothRemoteGATTCharacteristic>;
+    stopNotifications(): Promise<BluetoothRemoteGATTCharacteristic>;
+    addEventListener(
+        type: "characteristicvaluechanged",
+        listener: (this: this, ev: Event) => any,
+        useCapture?: boolean,
+    ): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
+}
+
+interface ServiceEventHandlers {
+    onserviceadded: (this: this, ev: Event) => any;
+    onservicechanged: (this: this, ev: Event) => any;
+    onserviceremoved: (this: this, ev: Event) => any;
+}
+
+interface BluetoothRemoteGATTService extends EventTarget, CharacteristicEventHandlers, ServiceEventHandlers {
+    readonly device: BluetoothDevice;
+    readonly uuid: string;
+    readonly isPrimary: boolean;
+    getCharacteristic(characteristic: BluetoothCharacteristicUUID): Promise<BluetoothRemoteGATTCharacteristic>;
+    getCharacteristics(characteristic?: BluetoothCharacteristicUUID): Promise<BluetoothRemoteGATTCharacteristic[]>;
+    getIncludedService(service: BluetoothServiceUUID): Promise<BluetoothRemoteGATTService>;
+    getIncludedServices(service?: BluetoothServiceUUID): Promise<BluetoothRemoteGATTService[]>;
+    addEventListener(type: "serviceadded", listener: (this: this, ev: Event) => any, useCapture?: boolean): void;
+    addEventListener(type: "servicechanged", listener: (this: this, ev: Event) => any, useCapture?: boolean): void;
+    addEventListener(type: "serviceremoved", listener: (this: this, ev: Event) => any, useCapture?: boolean): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
+}
+
+interface BluetoothRemoteGATTServer {
+    readonly device: BluetoothDevice;
+    readonly connected: boolean;
+    connect(): Promise<BluetoothRemoteGATTServer>;
+    disconnect(): void;
+    getPrimaryService(service: BluetoothServiceUUID): Promise<BluetoothRemoteGATTService>;
+    getPrimaryServices(service?: BluetoothServiceUUID): Promise<BluetoothRemoteGATTService[]>;
+}
+
+interface BluetoothDeviceEventHandlers {
+    onadvertisementreceived: (this: this, ev: BluetoothAdvertisingEvent) => any;
+    ongattserverdisconnected: (this: this, ev: Event) => any;
+}
+
+interface WatchAdvertisementsOptions {
+    signal?: AbortSignal;
+}
+
+interface BluetoothDevice
+    extends EventTarget, BluetoothDeviceEventHandlers, CharacteristicEventHandlers, ServiceEventHandlers
+{
+    readonly id: string;
+    readonly name?: string | undefined;
+    readonly gatt?: BluetoothRemoteGATTServer | undefined;
+    forget(): Promise<void>;
+    watchAdvertisements(options?: WatchAdvertisementsOptions): Promise<void>;
+    readonly watchingAdvertisements: boolean;
+    addEventListener(
+        type: "gattserverdisconnected",
+        listener: (this: this, ev: Event) => any,
+        useCapture?: boolean,
+    ): void;
+    addEventListener(
+        type: "advertisementreceived",
+        listener: (this: this, ev: BluetoothAdvertisingEvent) => any,
+        useCapture?: boolean,
+    ): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
+}
+
+interface Bluetooth
+    extends EventTarget, BluetoothDeviceEventHandlers, CharacteristicEventHandlers, ServiceEventHandlers
+{
+    getDevices(): Promise<BluetoothDevice[]>;
+    getAvailability(): Promise<boolean>;
+    onavailabilitychanged: (this: this, ev: Event) => any;
+    readonly referringDevice?: BluetoothDevice | undefined;
+    requestDevice(options?: RequestDeviceOptions): Promise<BluetoothDevice>;
+    requestLEScan(options?: BluetoothLEScanOptions): Promise<BluetoothLEScan>;
+    addEventListener(type: "availabilitychanged", listener: (this: this, ev: Event) => any, useCapture?: boolean): void;
+    addEventListener(
+        type: "advertisementreceived",
+        listener: (this: this, ev: BluetoothAdvertisingEvent) => any,
+        useCapture?: boolean,
+    ): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
+}
+
+declare namespace BluetoothUUID {
+    function getService(name: string | number): string;
+    function getCharacteristic(name: string | number): string;
+    function getDescriptor(name: string | number): string;
+    function canonicalUUID(alias: string | number): string;
+}
+
+interface Navigator {
+    bluetooth: Bluetooth;
+}
--- a/node_modules/@types/web-bluetooth/package.json
+++ b/node_modules/@types/web-bluetooth/package.json
@@ -0,0 +1,40 @@
+{
+    "name": "@types/web-bluetooth",
+    "version": "0.0.20",
+    "description": "TypeScript definitions for web-bluetooth",
+    "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/web-bluetooth",
+    "license": "MIT",
+    "contributors": [
+        {
+            "name": "Uri Shaked",
+            "githubUsername": "urish",
+            "url": "https://github.com/urish"
+        },
+        {
+            "name": "Xavier Lozinguez",
+            "githubUsername": "xlozinguez",
+            "url": "https://github.com/xlozinguez"
+        },
+        {
+            "name": "Rob Moran",
+            "githubUsername": "thegecko",
+            "url": "https://github.com/thegecko"
+        },
+        {
+            "name": "David Bjerremose",
+            "githubUsername": "DaBs",
+            "url": "https://github.com/DaBs"
+        }
+    ],
+    "main": "",
+    "types": "index.d.ts",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git",
+        "directory": "types/web-bluetooth"
+    },
+    "scripts": {},
+    "dependencies": {},
+    "typesPublisherContentHash": "6a130e3db86a1d977ddff03e84f9f150c142902343c9fa383d3e8d4f19180d98",
+    "typeScriptVersion": "4.5"
+}
--- a/node_modules/@vue-flow/background/LICENSE
+++ b/node_modules/@vue-flow/background/LICENSE
@@ -0,0 +1,20 @@
+Copyright (c) 2019-2024 webkid GmbH
+Copyright (c) 2021-2024 Burak Cakmakoglu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/node_modules/@vue-flow/background/README.md
+++ b/node_modules/@vue-flow/background/README.md
@@ -0,0 +1,33 @@
+# Vue Flow: Background Component
+
+This is a background component for Vue Flow.
+It can be used to create a background in your canvas.
+
+## 🛠 Setup
+
+```bash
+# install
+$ yarn add @vue-flow/background
+
+# or
+$ npm i --save @vue-flow/background
+```
+
+## 🎮 Quickstart
+
+```vue
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import initialElements from './initial-elements'
+
+// some nodes and edges
+const elements = ref(initialElements)
+</script>
+
+<template>
+  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+    <Background />
+  </VueFlow>
+</template>
+```
--- a/node_modules/@vue-flow/background/dist/Background.vue.d.ts
+++ b/node_modules/@vue-flow/background/dist/Background.vue.d.ts
@@ -0,0 +1,112 @@
+import type { BackgroundVariant } from './types'
+
+declare const _default: __VLS_WithTemplateSlots<
+  import('vue').DefineComponent<
+    {
+      id: {
+        type: import('vue').PropType<string>
+      }
+      variant: {
+        type: import('vue').PropType<'lines' | 'dots' | BackgroundVariant>
+      }
+      gap: {
+        type: import('vue').PropType<number | number[]>
+      }
+      size: {
+        type: import('vue').PropType<number>
+      }
+      lineWidth: {
+        type: import('vue').PropType<number>
+      }
+      patternColor: {
+        type: import('vue').PropType<string>
+      }
+      color: {
+        type: import('vue').PropType<string>
+      }
+      bgColor: {
+        type: import('vue').PropType<string>
+      }
+      height: {
+        type: import('vue').PropType<number>
+      }
+      width: {
+        type: import('vue').PropType<number>
+      }
+      x: {
+        type: import('vue').PropType<number>
+      }
+      y: {
+        type: import('vue').PropType<number>
+      }
+      offset: {
+        type: import('vue').PropType<number | [number, number]>
+      }
+    },
+    {},
+    unknown,
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {},
+    string,
+    import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+    Readonly<
+      import('vue').ExtractPropTypes<{
+        id: {
+          type: import('vue').PropType<string>
+        }
+        variant: {
+          type: import('vue').PropType<'lines' | 'dots' | BackgroundVariant>
+        }
+        gap: {
+          type: import('vue').PropType<number | number[]>
+        }
+        size: {
+          type: import('vue').PropType<number>
+        }
+        lineWidth: {
+          type: import('vue').PropType<number>
+        }
+        patternColor: {
+          type: import('vue').PropType<string>
+        }
+        color: {
+          type: import('vue').PropType<string>
+        }
+        bgColor: {
+          type: import('vue').PropType<string>
+        }
+        height: {
+          type: import('vue').PropType<number>
+        }
+        width: {
+          type: import('vue').PropType<number>
+        }
+        x: {
+          type: import('vue').PropType<number>
+        }
+        y: {
+          type: import('vue').PropType<number>
+        }
+        offset: {
+          type: import('vue').PropType<number | [number, number]>
+        }
+      }>
+    >,
+    {},
+    {}
+  >,
+  {
+    'pattern-container'?(_: { id: string }): any
+    pattern?(_: {}): any
+    default?(_: { id: string }): any
+  }
+>
+export default _default
+type __VLS_WithTemplateSlots<T, S> = T & {
+  new (): {
+    $slots: S
+  }
+}
--- a/node_modules/@vue-flow/background/dist/index.d.ts
+++ b/node_modules/@vue-flow/background/dist/index.d.ts
@@ -0,0 +1,2 @@
+export { default as Background } from './Background.vue'
+export * from './types'
--- a/node_modules/@vue-flow/background/dist/patterns.d.ts
+++ b/node_modules/@vue-flow/background/dist/patterns.d.ts
@@ -0,0 +1,20 @@
+import type { FunctionalComponent } from 'vue'
+import type { BackgroundVariant } from './types'
+
+interface LinePatternProps {
+  dimensions: [number, number]
+  size?: number
+  color: string
+}
+export declare const LinePattern: FunctionalComponent<LinePatternProps>
+interface DotPatternProps {
+  radius: number
+  color: string
+}
+export declare const DotPattern: FunctionalComponent<DotPatternProps>
+export declare const Patterns: {
+  lines: FunctionalComponent<LinePatternProps, {}, any>
+  dots: FunctionalComponent<DotPatternProps, {}, any>
+}
+export declare const DefaultBgColors: Record<BackgroundVariant, string>
+export {}
--- a/node_modules/@vue-flow/background/dist/types.d.ts
+++ b/node_modules/@vue-flow/background/dist/types.d.ts
@@ -0,0 +1,40 @@
+/**
+ * @deprecated - will be removed in the next major version. You can use simple string values for `variant` prop instead, i.e. `lines` or `dots`
+ */
+export declare enum BackgroundVariant {
+  Lines = 'lines',
+  Dots = 'dots',
+}
+export type BackgroundVariantType = Lowercase<keyof typeof BackgroundVariant>
+export interface BackgroundProps {
+  id?: string
+  /** The background pattern variant */
+  variant?: BackgroundVariant | BackgroundVariantType
+  /** Background pattern gap */
+  gap?: number | number[]
+  /** Background pattern size */
+  size?: number
+  lineWidth?: number
+  /**
+   * @deprecated - will be removed in the next major version. Use `color` instead
+   * Background pattern color
+   */
+  patternColor?: string
+  /** Background pattern color */
+  color?: string
+  /**
+   * @deprecated - will be removed in the next major version. You can assign a bg color to `<VueFlow />` directly instead.
+   * Background color
+   */
+  bgColor?: string
+  /** @deprecated Background height */
+  height?: number
+  /** @deprecated Background width */
+  width?: number
+  /** Background x-coordinate (offset x) */
+  x?: number
+  /** Background y-coordinate (offset y) */
+  y?: number
+  /** Background offset */
+  offset?: number | [number, number]
+}
--- a/node_modules/@vue-flow/background/dist/vue-flow-background.iife.js
+++ b/node_modules/@vue-flow/background/dist/vue-flow-background.iife.js
@@ -0,0 +1,127 @@
+var VueFlowBackground = function(exports, vue, core) {
+  "use strict";
+  var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
+    BackgroundVariant2["Lines"] = "lines";
+    BackgroundVariant2["Dots"] = "dots";
+    return BackgroundVariant2;
+  })(BackgroundVariant || {});
+  const LinePattern = function({ dimensions, size, color }) {
+    return vue.h("path", {
+      "stroke": color,
+      "stroke-width": size,
+      "d": `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`
+    });
+  };
+  const DotPattern = function({ radius, color }) {
+    return vue.h("circle", { cx: radius, cy: radius, r: radius, fill: color });
+  };
+  ({
+    [BackgroundVariant.Lines]: LinePattern,
+    [BackgroundVariant.Dots]: DotPattern
+  });
+  const DefaultBgColors = {
+    [BackgroundVariant.Dots]: "#81818a",
+    [BackgroundVariant.Lines]: "#eee"
+  };
+  const _hoisted_1 = ["id", "x", "y", "width", "height", "patternTransform"];
+  const _hoisted_2 = {
+    key: 2,
+    height: "100",
+    width: "100"
+  };
+  const _hoisted_3 = ["fill"];
+  const _hoisted_4 = ["x", "y", "fill"];
+  const __default__ = {
+    name: "Background",
+    compatConfig: { MODE: 3 }
+  };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...__default__,
+    props: {
+      id: {},
+      variant: { default: () => BackgroundVariant.Dots },
+      gap: { default: 20 },
+      size: { default: 1 },
+      lineWidth: { default: 1 },
+      patternColor: {},
+      color: {},
+      bgColor: {},
+      height: { default: 100 },
+      width: { default: 100 },
+      x: { default: 0 },
+      y: { default: 0 },
+      offset: { default: 0 }
+    },
+    setup(__props) {
+      const { id: vueFlowId, viewport } = core.useVueFlow();
+      const background = vue.computed(() => {
+        const zoom = viewport.value.zoom;
+        const [gapX, gapY] = Array.isArray(__props.gap) ? __props.gap : [__props.gap, __props.gap];
+        const scaledGap = [gapX * zoom || 1, gapY * zoom || 1];
+        const scaledSize = __props.size * zoom;
+        const [offsetX, offsetY] = Array.isArray(__props.offset) ? __props.offset : [__props.offset, __props.offset];
+        const scaledOffset = [offsetX * zoom || 1 + scaledGap[0] / 2, offsetY * zoom || 1 + scaledGap[1] / 2];
+        return {
+          scaledGap,
+          offset: scaledOffset,
+          size: scaledSize
+        };
+      });
+      const patternId = vue.toRef(() => `pattern-${vueFlowId}${__props.id ? `-${__props.id}` : ""}`);
+      const patternColor = vue.toRef(() => __props.color || __props.patternColor || DefaultBgColors[__props.variant || BackgroundVariant.Dots]);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("svg", {
+          class: "vue-flow__background vue-flow__container",
+          style: vue.normalizeStyle({
+            height: `${_ctx.height > 100 ? 100 : _ctx.height}%`,
+            width: `${_ctx.width > 100 ? 100 : _ctx.width}%`
+          })
+        }, [
+          vue.renderSlot(_ctx.$slots, "pattern-container", { id: patternId.value }, () => [
+            vue.createElementVNode("pattern", {
+              id: patternId.value,
+              x: vue.unref(viewport).x % background.value.scaledGap[0],
+              y: vue.unref(viewport).y % background.value.scaledGap[1],
+              width: background.value.scaledGap[0],
+              height: background.value.scaledGap[1],
+              patternTransform: `translate(-${background.value.offset[0]},-${background.value.offset[1]})`,
+              patternUnits: "userSpaceOnUse"
+            }, [
+              vue.renderSlot(_ctx.$slots, "pattern", {}, () => [
+                _ctx.variant === vue.unref(BackgroundVariant).Lines ? (vue.openBlock(), vue.createBlock(vue.unref(LinePattern), {
+                  key: 0,
+                  size: _ctx.lineWidth,
+                  color: patternColor.value,
+                  dimensions: background.value.scaledGap
+                }, null, 8, ["size", "color", "dimensions"])) : _ctx.variant === vue.unref(BackgroundVariant).Dots ? (vue.openBlock(), vue.createBlock(vue.unref(DotPattern), {
+                  key: 1,
+                  color: patternColor.value,
+                  radius: background.value.size / 2
+                }, null, 8, ["color", "radius"])) : vue.createCommentVNode("", true),
+                _ctx.bgColor ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2, [
+                  vue.createElementVNode("rect", {
+                    width: "100%",
+                    height: "100%",
+                    fill: _ctx.bgColor
+                  }, null, 8, _hoisted_3)
+                ])) : vue.createCommentVNode("", true)
+              ])
+            ], 8, _hoisted_1)
+          ]),
+          vue.createElementVNode("rect", {
+            x: _ctx.x,
+            y: _ctx.y,
+            width: "100%",
+            height: "100%",
+            fill: `url(#${patternId.value})`
+          }, null, 8, _hoisted_4),
+          vue.renderSlot(_ctx.$slots, "default", { id: patternId.value })
+        ], 4);
+      };
+    }
+  });
+  exports.Background = _sfc_main;
+  exports.BackgroundVariant = BackgroundVariant;
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+  return exports;
+}({}, Vue, VueFlowCore);
--- a/node_modules/@vue-flow/background/dist/vue-flow-background.js
+++ b/node_modules/@vue-flow/background/dist/vue-flow-background.js
@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const core = require("@vue-flow/core");
+var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
+  BackgroundVariant2["Lines"] = "lines";
+  BackgroundVariant2["Dots"] = "dots";
+  return BackgroundVariant2;
+})(BackgroundVariant || {});
+const LinePattern = function({ dimensions, size, color }) {
+  return vue.h("path", {
+    "stroke": color,
+    "stroke-width": size,
+    "d": `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`
+  });
+};
+const DotPattern = function({ radius, color }) {
+  return vue.h("circle", { cx: radius, cy: radius, r: radius, fill: color });
+};
+({
+  [BackgroundVariant.Lines]: LinePattern,
+  [BackgroundVariant.Dots]: DotPattern
+});
+const DefaultBgColors = {
+  [BackgroundVariant.Dots]: "#81818a",
+  [BackgroundVariant.Lines]: "#eee"
+};
+const _hoisted_1 = ["id", "x", "y", "width", "height", "patternTransform"];
+const _hoisted_2 = {
+  key: 2,
+  height: "100",
+  width: "100"
+};
+const _hoisted_3 = ["fill"];
+const _hoisted_4 = ["x", "y", "fill"];
+const __default__ = {
+  name: "Background",
+  compatConfig: { MODE: 3 }
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    id: {},
+    variant: { default: () => BackgroundVariant.Dots },
+    gap: { default: 20 },
+    size: { default: 1 },
+    lineWidth: { default: 1 },
+    patternColor: {},
+    color: {},
+    bgColor: {},
+    height: { default: 100 },
+    width: { default: 100 },
+    x: { default: 0 },
+    y: { default: 0 },
+    offset: { default: 0 }
+  },
+  setup(__props) {
+    const { id: vueFlowId, viewport } = core.useVueFlow();
+    const background = vue.computed(() => {
+      const zoom = viewport.value.zoom;
+      const [gapX, gapY] = Array.isArray(__props.gap) ? __props.gap : [__props.gap, __props.gap];
+      const scaledGap = [gapX * zoom || 1, gapY * zoom || 1];
+      const scaledSize = __props.size * zoom;
+      const [offsetX, offsetY] = Array.isArray(__props.offset) ? __props.offset : [__props.offset, __props.offset];
+      const scaledOffset = [offsetX * zoom || 1 + scaledGap[0] / 2, offsetY * zoom || 1 + scaledGap[1] / 2];
+      return {
+        scaledGap,
+        offset: scaledOffset,
+        size: scaledSize
+      };
+    });
+    const patternId = vue.toRef(() => `pattern-${vueFlowId}${__props.id ? `-${__props.id}` : ""}`);
+    const patternColor = vue.toRef(() => __props.color || __props.patternColor || DefaultBgColors[__props.variant || BackgroundVariant.Dots]);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("svg", {
+        class: "vue-flow__background vue-flow__container",
+        style: vue.normalizeStyle({
+          height: `${_ctx.height > 100 ? 100 : _ctx.height}%`,
+          width: `${_ctx.width > 100 ? 100 : _ctx.width}%`
+        })
+      }, [
+        vue.renderSlot(_ctx.$slots, "pattern-container", { id: patternId.value }, () => [
+          vue.createElementVNode("pattern", {
+            id: patternId.value,
+            x: vue.unref(viewport).x % background.value.scaledGap[0],
+            y: vue.unref(viewport).y % background.value.scaledGap[1],
+            width: background.value.scaledGap[0],
+            height: background.value.scaledGap[1],
+            patternTransform: `translate(-${background.value.offset[0]},-${background.value.offset[1]})`,
+            patternUnits: "userSpaceOnUse"
+          }, [
+            vue.renderSlot(_ctx.$slots, "pattern", {}, () => [
+              _ctx.variant === vue.unref(BackgroundVariant).Lines ? (vue.openBlock(), vue.createBlock(vue.unref(LinePattern), {
+                key: 0,
+                size: _ctx.lineWidth,
+                color: patternColor.value,
+                dimensions: background.value.scaledGap
+              }, null, 8, ["size", "color", "dimensions"])) : _ctx.variant === vue.unref(BackgroundVariant).Dots ? (vue.openBlock(), vue.createBlock(vue.unref(DotPattern), {
+                key: 1,
+                color: patternColor.value,
+                radius: background.value.size / 2
+              }, null, 8, ["color", "radius"])) : vue.createCommentVNode("", true),
+              _ctx.bgColor ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2, [
+                vue.createElementVNode("rect", {
+                  width: "100%",
+                  height: "100%",
+                  fill: _ctx.bgColor
+                }, null, 8, _hoisted_3)
+              ])) : vue.createCommentVNode("", true)
+            ])
+          ], 8, _hoisted_1)
+        ]),
+        vue.createElementVNode("rect", {
+          x: _ctx.x,
+          y: _ctx.y,
+          width: "100%",
+          height: "100%",
+          fill: `url(#${patternId.value})`
+        }, null, 8, _hoisted_4),
+        vue.renderSlot(_ctx.$slots, "default", { id: patternId.value })
+      ], 4);
+    };
+  }
+});
+exports.Background = _sfc_main;
+exports.BackgroundVariant = BackgroundVariant;
--- a/node_modules/@vue-flow/background/dist/vue-flow-background.mjs
+++ b/node_modules/@vue-flow/background/dist/vue-flow-background.mjs
@@ -0,0 +1,126 @@
+import { h, defineComponent, computed, toRef, openBlock, createElementBlock, normalizeStyle, renderSlot, createElementVNode, unref, createBlock, createCommentVNode } from "vue";
+import { useVueFlow } from "@vue-flow/core";
+var BackgroundVariant = /* @__PURE__ */ ((BackgroundVariant2) => {
+  BackgroundVariant2["Lines"] = "lines";
+  BackgroundVariant2["Dots"] = "dots";
+  return BackgroundVariant2;
+})(BackgroundVariant || {});
+const LinePattern = function({ dimensions, size, color }) {
+  return h("path", {
+    "stroke": color,
+    "stroke-width": size,
+    "d": `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`
+  });
+};
+const DotPattern = function({ radius, color }) {
+  return h("circle", { cx: radius, cy: radius, r: radius, fill: color });
+};
+({
+  [BackgroundVariant.Lines]: LinePattern,
+  [BackgroundVariant.Dots]: DotPattern
+});
+const DefaultBgColors = {
+  [BackgroundVariant.Dots]: "#81818a",
+  [BackgroundVariant.Lines]: "#eee"
+};
+const _hoisted_1 = ["id", "x", "y", "width", "height", "patternTransform"];
+const _hoisted_2 = {
+  key: 2,
+  height: "100",
+  width: "100"
+};
+const _hoisted_3 = ["fill"];
+const _hoisted_4 = ["x", "y", "fill"];
+const __default__ = {
+  name: "Background",
+  compatConfig: { MODE: 3 }
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: {
+    id: {},
+    variant: { default: () => BackgroundVariant.Dots },
+    gap: { default: 20 },
+    size: { default: 1 },
+    lineWidth: { default: 1 },
+    patternColor: {},
+    color: {},
+    bgColor: {},
+    height: { default: 100 },
+    width: { default: 100 },
+    x: { default: 0 },
+    y: { default: 0 },
+    offset: { default: 0 }
+  },
+  setup(__props) {
+    const { id: vueFlowId, viewport } = useVueFlow();
+    const background = computed(() => {
+      const zoom = viewport.value.zoom;
+      const [gapX, gapY] = Array.isArray(__props.gap) ? __props.gap : [__props.gap, __props.gap];
+      const scaledGap = [gapX * zoom || 1, gapY * zoom || 1];
+      const scaledSize = __props.size * zoom;
+      const [offsetX, offsetY] = Array.isArray(__props.offset) ? __props.offset : [__props.offset, __props.offset];
+      const scaledOffset = [offsetX * zoom || 1 + scaledGap[0] / 2, offsetY * zoom || 1 + scaledGap[1] / 2];
+      return {
+        scaledGap,
+        offset: scaledOffset,
+        size: scaledSize
+      };
+    });
+    const patternId = toRef(() => `pattern-${vueFlowId}${__props.id ? `-${__props.id}` : ""}`);
+    const patternColor = toRef(() => __props.color || __props.patternColor || DefaultBgColors[__props.variant || BackgroundVariant.Dots]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        class: "vue-flow__background vue-flow__container",
+        style: normalizeStyle({
+          height: `${_ctx.height > 100 ? 100 : _ctx.height}%`,
+          width: `${_ctx.width > 100 ? 100 : _ctx.width}%`
+        })
+      }, [
+        renderSlot(_ctx.$slots, "pattern-container", { id: patternId.value }, () => [
+          createElementVNode("pattern", {
+            id: patternId.value,
+            x: unref(viewport).x % background.value.scaledGap[0],
+            y: unref(viewport).y % background.value.scaledGap[1],
+            width: background.value.scaledGap[0],
+            height: background.value.scaledGap[1],
+            patternTransform: `translate(-${background.value.offset[0]},-${background.value.offset[1]})`,
+            patternUnits: "userSpaceOnUse"
+          }, [
+            renderSlot(_ctx.$slots, "pattern", {}, () => [
+              _ctx.variant === unref(BackgroundVariant).Lines ? (openBlock(), createBlock(unref(LinePattern), {
+                key: 0,
+                size: _ctx.lineWidth,
+                color: patternColor.value,
+                dimensions: background.value.scaledGap
+              }, null, 8, ["size", "color", "dimensions"])) : _ctx.variant === unref(BackgroundVariant).Dots ? (openBlock(), createBlock(unref(DotPattern), {
+                key: 1,
+                color: patternColor.value,
+                radius: background.value.size / 2
+              }, null, 8, ["color", "radius"])) : createCommentVNode("", true),
+              _ctx.bgColor ? (openBlock(), createElementBlock("svg", _hoisted_2, [
+                createElementVNode("rect", {
+                  width: "100%",
+                  height: "100%",
+                  fill: _ctx.bgColor
+                }, null, 8, _hoisted_3)
+              ])) : createCommentVNode("", true)
+            ])
+          ], 8, _hoisted_1)
+        ]),
+        createElementVNode("rect", {
+          x: _ctx.x,
+          y: _ctx.y,
+          width: "100%",
+          height: "100%",
+          fill: `url(#${patternId.value})`
+        }, null, 8, _hoisted_4),
+        renderSlot(_ctx.$slots, "default", { id: patternId.value })
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as Background,
+  BackgroundVariant
+};
--- a/node_modules/@vue-flow/background/package.json
+++ b/node_modules/@vue-flow/background/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "@vue-flow/background",
+  "version": "1.3.2",
+  "private": false,
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bcakmakoglu/vue-flow/packages/plugins/background"
+  },
+  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
+  "bugs": {
+    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
+  },
+  "keywords": [
+    "vue",
+    "flow",
+    "diagram",
+    "editor",
+    "graph",
+    "node",
+    "link",
+    "port",
+    "slot",
+    "vue3",
+    "composition-api",
+    "vue-flow",
+    "vueflow",
+    "typescript"
+  ],
+  "main": "./dist/vue-flow-background.js",
+  "module": "./dist/vue-flow-background.mjs",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/vue-flow-background.iife.js",
+  "jsdelivr": "./dist/vue-flow-background.iife.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-flow-background.mjs",
+      "require": "./dist/vue-flow-background.js"
+    }
+  },
+  "files": [
+    "dist",
+    "*.d.ts"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "@vue-flow/core": "^1.23.0",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "vue-tsc": "^1.8.16",
+    "@tooling/eslint-config": "0.0.0",
+    "@tooling/tsconfig": "0.0.0",
+    "@tooling/vite-config": "0.0.0",
+    "@vue-flow/core": "1.41.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "pnpm types:watch & pnpm build:watch",
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
+    "types:watch": "vue-tsc --declaration --emitDeclarationOnly --watch",
+    "lint": "eslint --ext .js,.ts,.vue ./",
+    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist",
+    "test": "exit 0"
+  }
+}
--- a/node_modules/@vue-flow/controls/LICENSE
+++ b/node_modules/@vue-flow/controls/LICENSE
@@ -0,0 +1,20 @@
+Copyright (c) 2019-2025 webkid GmbH
+Copyright (c) 2021-2025 Burak Cakmakoglu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/node_modules/@vue-flow/controls/README.md
+++ b/node_modules/@vue-flow/controls/README.md
@@ -0,0 +1,38 @@
+# Vue Flow: Controls Component
+
+This is a control component for Vue Flow.
+It can be used to control the canvas interactions, like zooming in, zooming out, fitting the view and locking interactions.
+
+## 🛠 Setup
+
+```bash
+# install
+$ yarn add @vue-flow/controls
+
+# or
+$ npm i --save @vue-flow/controls
+```
+
+## 🎮 Quickstart
+
+```vue
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { Controls } from '@vue-flow/controls'
+
+// import default controls styles
+import '@vue-flow/controls/dist/style.css'
+
+import initialElements from './initial-elements'
+
+
+// some nodes and edges
+const elements = ref(initialElements)
+</script>
+
+<template>
+  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+    <Controls />
+  </VueFlow>
+</template>
+```
--- a/node_modules/@vue-flow/controls/dist/ControlButton.vue.d.ts
+++ b/node_modules/@vue-flow/controls/dist/ControlButton.vue.d.ts
@@ -0,0 +1,16 @@
+declare const _default: import('vue').DefineComponent<
+  {},
+  {},
+  {},
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<import('vue').ExtractPropTypes<{}>>,
+  {},
+  {}
+>
+export default _default
--- a/node_modules/@vue-flow/controls/dist/Controls.vue.d.ts
+++ b/node_modules/@vue-flow/controls/dist/Controls.vue.d.ts
@@ -0,0 +1,82 @@
+import type { PanelPosition } from '@vue-flow/core'
+
+declare const _default: __VLS_WithTemplateSlots<
+  import('vue').DefineComponent<
+    {
+      showZoom: {
+        type: import('vue').PropType<boolean>
+      }
+      showFitView: {
+        type: import('vue').PropType<boolean>
+      }
+      showInteractive: {
+        type: import('vue').PropType<boolean>
+      }
+      fitViewParams: {
+        type: import('vue').PropType<import('@vue-flow/core').FitViewParams>
+      }
+      position: {
+        type: import('vue').PropType<import('@vue-flow/core').PanelPositionType | PanelPosition>
+      }
+    },
+    {},
+    unknown,
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {
+      zoomIn: () => void
+      zoomOut: () => void
+      fitView: () => void
+      interactionChange: (active: boolean) => void
+    },
+    string,
+    import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+    Readonly<
+      import('vue').ExtractPropTypes<{
+        showZoom: {
+          type: import('vue').PropType<boolean>
+        }
+        showFitView: {
+          type: import('vue').PropType<boolean>
+        }
+        showInteractive: {
+          type: import('vue').PropType<boolean>
+        }
+        fitViewParams: {
+          type: import('vue').PropType<import('@vue-flow/core').FitViewParams>
+        }
+        position: {
+          type: import('vue').PropType<import('@vue-flow/core').PanelPositionType | PanelPosition>
+        }
+      }>
+    > & {
+      onZoomIn?: (() => any) | undefined
+      onZoomOut?: (() => any) | undefined
+      onFitView?: (() => any) | undefined
+      onInteractionChange?: ((active: boolean) => any) | undefined
+    },
+    {},
+    {}
+  >,
+  {
+    top?(_: {}): any
+    'control-zoom-in'?(_: {}): any
+    'icon-zoom-in'?(_: {}): any
+    'control-zoom-out'?(_: {}): any
+    'icon-zoom-out'?(_: {}): any
+    'control-fit-view'?(_: {}): any
+    'icon-fit-view'?(_: {}): any
+    'control-interactive'?(_: {}): any
+    'icon-unlock'?(_: {}): any
+    'icon-lock'?(_: {}): any
+    default?(_: {}): any
+  }
+>
+export default _default
+type __VLS_WithTemplateSlots<T, S> = T & {
+  new (): {
+    $slots: S
+  }
+}
--- a/node_modules/@vue-flow/controls/dist/index.d.ts
+++ b/node_modules/@vue-flow/controls/dist/index.d.ts
@@ -0,0 +1,5 @@
+import './style.css'
+
+export { default as Controls } from './Controls.vue'
+export { default as ControlButton } from './ControlButton.vue'
+export * from './types'
--- a/node_modules/@vue-flow/controls/dist/style.css
+++ b/node_modules/@vue-flow/controls/dist/style.css
@@ -0,0 +1,37 @@
+.vue-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+
+.vue-flow__controls-button {
+  background: #fefefe;
+  border: none;
+  border-bottom: 1px solid #eee;
+  box-sizing: content-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  user-select: none;
+  padding: 5px;
+}
+
+.vue-flow__controls-button svg {
+  width: 100%;
+  max-width: 12px;
+  max-height: 12px;
+}
+
+.vue-flow__controls-button:hover {
+  background: #f4f4f4;
+}
+
+
+.vue-flow__controls-button:disabled {
+  pointer-events: none;
+}
+
+.vue-flow__controls-button:disabled svg {
+  fill-opacity: 0.4;
+}
--- a/node_modules/@vue-flow/controls/dist/types.d.ts
+++ b/node_modules/@vue-flow/controls/dist/types.d.ts
@@ -0,0 +1,14 @@
+import type { FitViewParams, PanelPosition, PanelPositionType } from '@vue-flow/core'
+
+export interface ControlProps {
+  /** Show the zoom icon */
+  showZoom?: boolean
+  /** Show the fit-view icon */
+  showFitView?: boolean
+  /** Show the interactive icon */
+  showInteractive?: boolean
+  /** Params to use on fitView */
+  fitViewParams?: FitViewParams
+  /** Position of the controls {@link PanelPosition} */
+  position?: PanelPositionType | PanelPosition
+}
--- a/node_modules/@vue-flow/controls/dist/vue-flow-controls.iife.js
+++ b/node_modules/@vue-flow/controls/dist/vue-flow-controls.iife.js
@@ -0,0 +1,208 @@
+var VueFlowControls = function(exports, vue, core) {
+  "use strict";
+  const _sfc_main$1 = {
+    name: "ControlButton",
+    compatConfig: { MODE: 3 }
+  };
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+  const _hoisted_1$5 = {
+    type: "button",
+    class: "vue-flow__controls-button"
+  };
+  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("button", _hoisted_1$5, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ]);
+  }
+  const ControlButton = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
+  const _hoisted_1$4 = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 32"
+  };
+  const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" }, null, -1);
+  const _hoisted_3$4 = [
+    _hoisted_2$4
+  ];
+  function render$4(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$4, _hoisted_3$4);
+  }
+  const PlusIcon = { render: render$4 };
+  const _hoisted_1$3 = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 5"
+  };
+  const _hoisted_2$3 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M0 0h32v4.2H0z" }, null, -1);
+  const _hoisted_3$3 = [
+    _hoisted_2$3
+  ];
+  function render$3(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
+  }
+  const MinusIcon = { render: render$3 };
+  const _hoisted_1$2 = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 30"
+  };
+  const _hoisted_2$2 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0 0 27.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94a.919.919 0 0 1-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" }, null, -1);
+  const _hoisted_3$2 = [
+    _hoisted_2$2
+  ];
+  function render$2(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
+  }
+  const FitView = { render: render$2 };
+  const _hoisted_1$1 = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 25 32"
+  };
+  const _hoisted_2$1 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" }, null, -1);
+  const _hoisted_3$1 = [
+    _hoisted_2$1
+  ];
+  function render$1(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1, _hoisted_3$1);
+  }
+  const Lock = { render: render$1 };
+  const _hoisted_1 = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 25 32"
+  };
+  const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047z" }, null, -1);
+  const _hoisted_3 = [
+    _hoisted_2
+  ];
+  function render(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1, _hoisted_3);
+  }
+  const Unlock = { render };
+  const __default__ = {
+    name: "Controls",
+    compatConfig: { MODE: 3 }
+  };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...__default__,
+    props: {
+      showZoom: { type: Boolean, default: true },
+      showFitView: { type: Boolean, default: true },
+      showInteractive: { type: Boolean, default: true },
+      fitViewParams: {},
+      position: { default: () => core.PanelPosition.BottomLeft }
+    },
+    emits: ["zoomIn", "zoomOut", "fitView", "interactionChange"],
+    setup(__props, { emit }) {
+      const {
+        nodesDraggable,
+        nodesConnectable,
+        elementsSelectable,
+        setInteractive,
+        zoomIn,
+        zoomOut,
+        fitView,
+        viewport,
+        minZoom,
+        maxZoom
+      } = core.useVueFlow();
+      const isInteractive = vue.toRef(() => nodesDraggable.value || nodesConnectable.value || elementsSelectable.value);
+      const minZoomReached = vue.toRef(() => viewport.value.zoom <= minZoom.value);
+      const maxZoomReached = vue.toRef(() => viewport.value.zoom >= maxZoom.value);
+      function onZoomInHandler() {
+        zoomIn();
+        emit("zoomIn");
+      }
+      function onZoomOutHandler() {
+        zoomOut();
+        emit("zoomOut");
+      }
+      function onFitViewHandler() {
+        fitView(__props.fitViewParams);
+        emit("fitView");
+      }
+      function onInteractiveChangeHandler() {
+        setInteractive(!isInteractive.value);
+        emit("interactionChange", !isInteractive.value);
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(core.Panel), {
+          class: "vue-flow__controls",
+          position: _ctx.position
+        }, {
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "top"),
+            _ctx.showZoom ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              vue.renderSlot(_ctx.$slots, "control-zoom-in", {}, () => [
+                vue.createVNode(ControlButton, {
+                  class: "vue-flow__controls-zoomin",
+                  disabled: maxZoomReached.value,
+                  onClick: onZoomInHandler
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "icon-zoom-in", {}, () => [
+                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(PlusIcon))))
+                    ])
+                  ]),
+                  _: 3
+                }, 8, ["disabled"])
+              ]),
+              vue.renderSlot(_ctx.$slots, "control-zoom-out", {}, () => [
+                vue.createVNode(ControlButton, {
+                  class: "vue-flow__controls-zoomout",
+                  disabled: minZoomReached.value,
+                  onClick: onZoomOutHandler
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "icon-zoom-out", {}, () => [
+                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(MinusIcon))))
+                    ])
+                  ]),
+                  _: 3
+                }, 8, ["disabled"])
+              ])
+            ], 64)) : vue.createCommentVNode("", true),
+            _ctx.showFitView ? vue.renderSlot(_ctx.$slots, "control-fit-view", { key: 1 }, () => [
+              vue.createVNode(ControlButton, {
+                class: "vue-flow__controls-fitview",
+                onClick: onFitViewHandler
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "icon-fit-view", {}, () => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(FitView))))
+                  ])
+                ]),
+                _: 3
+              })
+            ]) : vue.createCommentVNode("", true),
+            _ctx.showInteractive ? vue.renderSlot(_ctx.$slots, "control-interactive", { key: 2 }, () => [
+              _ctx.showInteractive ? (vue.openBlock(), vue.createBlock(ControlButton, {
+                key: 0,
+                class: "vue-flow__controls-interactive",
+                onClick: onInteractiveChangeHandler
+              }, {
+                default: vue.withCtx(() => [
+                  isInteractive.value ? vue.renderSlot(_ctx.$slots, "icon-unlock", { key: 0 }, () => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(Unlock))))
+                  ]) : vue.createCommentVNode("", true),
+                  !isInteractive.value ? vue.renderSlot(_ctx.$slots, "icon-lock", { key: 1 }, () => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(Lock))))
+                  ]) : vue.createCommentVNode("", true)
+                ]),
+                _: 3
+              })) : vue.createCommentVNode("", true)
+            ]) : vue.createCommentVNode("", true),
+            vue.renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["position"]);
+      };
+    }
+  });
+  exports.ControlButton = ControlButton;
+  exports.Controls = _sfc_main;
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+  return exports;
+}({}, Vue, VueFlowCore);
--- a/node_modules/@vue-flow/controls/dist/vue-flow-controls.js
+++ b/node_modules/@vue-flow/controls/dist/vue-flow-controls.js
@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const core = require("@vue-flow/core");
+const _sfc_main$1 = {
+  name: "ControlButton",
+  compatConfig: { MODE: 3 }
+};
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1$5 = {
+  type: "button",
+  class: "vue-flow__controls-button"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("button", _hoisted_1$5, [
+    vue.renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const ControlButton = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
+const _hoisted_1$4 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+};
+const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" }, null, -1);
+const _hoisted_3$4 = [
+  _hoisted_2$4
+];
+function render$4(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$4, _hoisted_3$4);
+}
+const PlusIcon = { render: render$4 };
+const _hoisted_1$3 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 5"
+};
+const _hoisted_2$3 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M0 0h32v4.2H0z" }, null, -1);
+const _hoisted_3$3 = [
+  _hoisted_2$3
+];
+function render$3(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
+}
+const MinusIcon = { render: render$3 };
+const _hoisted_1$2 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 30"
+};
+const _hoisted_2$2 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0 0 27.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94a.919.919 0 0 1-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" }, null, -1);
+const _hoisted_3$2 = [
+  _hoisted_2$2
+];
+function render$2(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
+}
+const FitView = { render: render$2 };
+const _hoisted_1$1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 25 32"
+};
+const _hoisted_2$1 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" }, null, -1);
+const _hoisted_3$1 = [
+  _hoisted_2$1
+];
+function render$1(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1, _hoisted_3$1);
+}
+const Lock = { render: render$1 };
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 25 32"
+};
+const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047z" }, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const Unlock = { render };
+const __default__ = {
+  name: "Controls",
+  compatConfig: { MODE: 3 }
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    showZoom: { type: Boolean, default: true },
+    showFitView: { type: Boolean, default: true },
+    showInteractive: { type: Boolean, default: true },
+    fitViewParams: {},
+    position: { default: () => core.PanelPosition.BottomLeft }
+  },
+  emits: ["zoomIn", "zoomOut", "fitView", "interactionChange"],
+  setup(__props, { emit }) {
+    const {
+      nodesDraggable,
+      nodesConnectable,
+      elementsSelectable,
+      setInteractive,
+      zoomIn,
+      zoomOut,
+      fitView,
+      viewport,
+      minZoom,
+      maxZoom
+    } = core.useVueFlow();
+    const isInteractive = vue.toRef(() => nodesDraggable.value || nodesConnectable.value || elementsSelectable.value);
+    const minZoomReached = vue.toRef(() => viewport.value.zoom <= minZoom.value);
+    const maxZoomReached = vue.toRef(() => viewport.value.zoom >= maxZoom.value);
+    function onZoomInHandler() {
+      zoomIn();
+      emit("zoomIn");
+    }
+    function onZoomOutHandler() {
+      zoomOut();
+      emit("zoomOut");
+    }
+    function onFitViewHandler() {
+      fitView(__props.fitViewParams);
+      emit("fitView");
+    }
+    function onInteractiveChangeHandler() {
+      setInteractive(!isInteractive.value);
+      emit("interactionChange", !isInteractive.value);
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(core.Panel), {
+        class: "vue-flow__controls",
+        position: _ctx.position
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "top"),
+          _ctx.showZoom ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            vue.renderSlot(_ctx.$slots, "control-zoom-in", {}, () => [
+              vue.createVNode(ControlButton, {
+                class: "vue-flow__controls-zoomin",
+                disabled: maxZoomReached.value,
+                onClick: onZoomInHandler
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "icon-zoom-in", {}, () => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(PlusIcon))))
+                  ])
+                ]),
+                _: 3
+              }, 8, ["disabled"])
+            ]),
+            vue.renderSlot(_ctx.$slots, "control-zoom-out", {}, () => [
+              vue.createVNode(ControlButton, {
+                class: "vue-flow__controls-zoomout",
+                disabled: minZoomReached.value,
+                onClick: onZoomOutHandler
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "icon-zoom-out", {}, () => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(MinusIcon))))
+                  ])
+                ]),
+                _: 3
+              }, 8, ["disabled"])
+            ])
+          ], 64)) : vue.createCommentVNode("", true),
+          _ctx.showFitView ? vue.renderSlot(_ctx.$slots, "control-fit-view", { key: 1 }, () => [
+            vue.createVNode(ControlButton, {
+              class: "vue-flow__controls-fitview",
+              onClick: onFitViewHandler
+            }, {
+              default: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "icon-fit-view", {}, () => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(FitView))))
+                ])
+              ]),
+              _: 3
+            })
+          ]) : vue.createCommentVNode("", true),
+          _ctx.showInteractive ? vue.renderSlot(_ctx.$slots, "control-interactive", { key: 2 }, () => [
+            _ctx.showInteractive ? (vue.openBlock(), vue.createBlock(ControlButton, {
+              key: 0,
+              class: "vue-flow__controls-interactive",
+              onClick: onInteractiveChangeHandler
+            }, {
+              default: vue.withCtx(() => [
+                isInteractive.value ? vue.renderSlot(_ctx.$slots, "icon-unlock", { key: 0 }, () => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(Unlock))))
+                ]) : vue.createCommentVNode("", true),
+                !isInteractive.value ? vue.renderSlot(_ctx.$slots, "icon-lock", { key: 1 }, () => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(Lock))))
+                ]) : vue.createCommentVNode("", true)
+              ]),
+              _: 3
+            })) : vue.createCommentVNode("", true)
+          ]) : vue.createCommentVNode("", true),
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["position"]);
+    };
+  }
+});
+exports.ControlButton = ControlButton;
+exports.Controls = _sfc_main;
--- a/node_modules/@vue-flow/controls/dist/vue-flow-controls.mjs
+++ b/node_modules/@vue-flow/controls/dist/vue-flow-controls.mjs
@@ -0,0 +1,207 @@
+import { openBlock, createElementBlock, renderSlot, createElementVNode, defineComponent, toRef, createBlock, unref, withCtx, Fragment, createVNode, resolveDynamicComponent, createCommentVNode } from "vue";
+import { PanelPosition, useVueFlow, Panel } from "@vue-flow/core";
+const _sfc_main$1 = {
+  name: "ControlButton",
+  compatConfig: { MODE: 3 }
+};
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1$5 = {
+  type: "button",
+  class: "vue-flow__controls-button"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("button", _hoisted_1$5, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const ControlButton = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
+const _hoisted_1$4 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+};
+const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("path", { d: "M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" }, null, -1);
+const _hoisted_3$4 = [
+  _hoisted_2$4
+];
+function render$4(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_3$4);
+}
+const PlusIcon = { render: render$4 };
+const _hoisted_1$3 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 5"
+};
+const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("path", { d: "M0 0h32v4.2H0z" }, null, -1);
+const _hoisted_3$3 = [
+  _hoisted_2$3
+];
+function render$3(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
+}
+const MinusIcon = { render: render$3 };
+const _hoisted_1$2 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 30"
+};
+const _hoisted_2$2 = /* @__PURE__ */ createElementVNode("path", { d: "M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0 0 27.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94a.919.919 0 0 1-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" }, null, -1);
+const _hoisted_3$2 = [
+  _hoisted_2$2
+];
+function render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
+}
+const FitView = { render: render$2 };
+const _hoisted_1$1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 25 32"
+};
+const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" }, null, -1);
+const _hoisted_3$1 = [
+  _hoisted_2$1
+];
+function render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_3$1);
+}
+const Lock = { render: render$1 };
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 25 32"
+};
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 0 0 0 13.714v15.238A3.056 3.056 0 0 0 3.048 32h18.285a3.056 3.056 0 0 0 3.048-3.048V13.714a3.056 3.056 0 0 0-3.048-3.047zM12.19 24.533a3.056 3.056 0 0 1-3.047-3.047 3.056 3.056 0 0 1 3.047-3.048 3.056 3.056 0 0 1 3.048 3.048 3.056 3.056 0 0 1-3.048 3.047z" }, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const Unlock = { render };
+const __default__ = {
+  name: "Controls",
+  compatConfig: { MODE: 3 }
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: {
+    showZoom: { type: Boolean, default: true },
+    showFitView: { type: Boolean, default: true },
+    showInteractive: { type: Boolean, default: true },
+    fitViewParams: {},
+    position: { default: () => PanelPosition.BottomLeft }
+  },
+  emits: ["zoomIn", "zoomOut", "fitView", "interactionChange"],
+  setup(__props, { emit }) {
+    const {
+      nodesDraggable,
+      nodesConnectable,
+      elementsSelectable,
+      setInteractive,
+      zoomIn,
+      zoomOut,
+      fitView,
+      viewport,
+      minZoom,
+      maxZoom
+    } = useVueFlow();
+    const isInteractive = toRef(() => nodesDraggable.value || nodesConnectable.value || elementsSelectable.value);
+    const minZoomReached = toRef(() => viewport.value.zoom <= minZoom.value);
+    const maxZoomReached = toRef(() => viewport.value.zoom >= maxZoom.value);
+    function onZoomInHandler() {
+      zoomIn();
+      emit("zoomIn");
+    }
+    function onZoomOutHandler() {
+      zoomOut();
+      emit("zoomOut");
+    }
+    function onFitViewHandler() {
+      fitView(__props.fitViewParams);
+      emit("fitView");
+    }
+    function onInteractiveChangeHandler() {
+      setInteractive(!isInteractive.value);
+      emit("interactionChange", !isInteractive.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Panel), {
+        class: "vue-flow__controls",
+        position: _ctx.position
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "top"),
+          _ctx.showZoom ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            renderSlot(_ctx.$slots, "control-zoom-in", {}, () => [
+              createVNode(ControlButton, {
+                class: "vue-flow__controls-zoomin",
+                disabled: maxZoomReached.value,
+                onClick: onZoomInHandler
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "icon-zoom-in", {}, () => [
+                    (openBlock(), createBlock(resolveDynamicComponent(unref(PlusIcon))))
+                  ])
+                ]),
+                _: 3
+              }, 8, ["disabled"])
+            ]),
+            renderSlot(_ctx.$slots, "control-zoom-out", {}, () => [
+              createVNode(ControlButton, {
+                class: "vue-flow__controls-zoomout",
+                disabled: minZoomReached.value,
+                onClick: onZoomOutHandler
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "icon-zoom-out", {}, () => [
+                    (openBlock(), createBlock(resolveDynamicComponent(unref(MinusIcon))))
+                  ])
+                ]),
+                _: 3
+              }, 8, ["disabled"])
+            ])
+          ], 64)) : createCommentVNode("", true),
+          _ctx.showFitView ? renderSlot(_ctx.$slots, "control-fit-view", { key: 1 }, () => [
+            createVNode(ControlButton, {
+              class: "vue-flow__controls-fitview",
+              onClick: onFitViewHandler
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "icon-fit-view", {}, () => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(FitView))))
+                ])
+              ]),
+              _: 3
+            })
+          ]) : createCommentVNode("", true),
+          _ctx.showInteractive ? renderSlot(_ctx.$slots, "control-interactive", { key: 2 }, () => [
+            _ctx.showInteractive ? (openBlock(), createBlock(ControlButton, {
+              key: 0,
+              class: "vue-flow__controls-interactive",
+              onClick: onInteractiveChangeHandler
+            }, {
+              default: withCtx(() => [
+                isInteractive.value ? renderSlot(_ctx.$slots, "icon-unlock", { key: 0 }, () => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(Unlock))))
+                ]) : createCommentVNode("", true),
+                !isInteractive.value ? renderSlot(_ctx.$slots, "icon-lock", { key: 1 }, () => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(Lock))))
+                ]) : createCommentVNode("", true)
+              ]),
+              _: 3
+            })) : createCommentVNode("", true)
+          ]) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["position"]);
+    };
+  }
+});
+export {
+  ControlButton,
+  _sfc_main as Controls
+};
--- a/node_modules/@vue-flow/controls/package.json
+++ b/node_modules/@vue-flow/controls/package.json
@@ -0,0 +1,77 @@
+{
+  "name": "@vue-flow/controls",
+  "version": "1.1.3",
+  "private": false,
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bcakmakoglu/vue-flow/packages/plugins/controls"
+  },
+  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
+  "bugs": {
+    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
+  },
+  "keywords": [
+    "vue",
+    "flow",
+    "diagram",
+    "editor",
+    "graph",
+    "node",
+    "link",
+    "port",
+    "slot",
+    "vue3",
+    "composition-api",
+    "vue-flow",
+    "vueflow",
+    "typescript"
+  ],
+  "main": "./dist/vue-flow-controls.js",
+  "module": "./dist/vue-flow-controls.mjs",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/vue-flow-controls.iife.js",
+  "jsdelivr": "./dist/vue-flow-controls.iife.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-flow-controls.mjs",
+      "require": "./dist/vue-flow-controls.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "*.d.ts"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "@vue-flow/core": "^1.23.0",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "vite-svg-loader": "^4.0.0",
+    "vue-tsc": "^1.8.16",
+    "@tooling/eslint-config": "0.0.0",
+    "@tooling/tsconfig": "0.0.0",
+    "@tooling/vite-config": "0.0.0",
+    "@vue-flow/core": "1.45.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "pnpm types:watch & pnpm build:watch",
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
+    "types:watch": "vue-tsc --declaration --emitDeclarationOnly --watch",
+    "lint": "eslint --ext .js,.ts,.vue ./",
+    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist",
+    "test": "exit 0"
+  }
+}
--- a/node_modules/@vue-flow/core/LICENSE
+++ b/node_modules/@vue-flow/core/LICENSE
@@ -0,0 +1,20 @@
+Copyright (c) 2019-2025 webkid GmbH
+Copyright (c) 2021-2025 Burak Cakmakoglu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/node_modules/@vue-flow/core/README.md
+++ b/node_modules/@vue-flow/core/README.md
@@ -0,0 +1,174 @@
+# Vue Flow 🌊
+
+[![Vue flow](vue-flow.gif)](https://vueflow.dev/)
+![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow)
+![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/vue-flow)
+![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/vue-flow)
+
+__Vue Flow: A highly customizable Vue 3 Flowchart component.__
+
+You can find a detailed explanation on how to get started [here](https://vueflow.dev/guide/) 
+or jump right into the [examples](https://vueflow.dev/examples/).
+
+## Table of contents
+
+* [⭐️ Features](#-features)
+
+* [🛠 Setup](#-setup)
+
+* [🎮 Quickstart](#-quickstart)
+
+  + [🪴 Vue 2](#-vue-2)
+
+* [🧪 Development](#-development)
+
+  + [🐳 Dev Container](#-dev-container)
+
+* [![discord logo](https://api.iconify.design/logos:discord-icon.svg) Discord](#-discord)
+
+* [💝 Special Thanks](#-special-thanks)
+
+* [⭐ Stargazers](#-stargazers)
+
+## ⭐️ Features
+
+- 👶 __Easy setup__: Get started hassle-free - Built-in zoom- & pan features, element dragging, selection and much more
+
+- 🎨 __Customizable__: Use your custom nodes, edges and connection lines and expand on Vue Flows' functionality
+
+- 🚀 __Fast__: Tracks changes reactively and only re-renders the appropriate elements
+
+- 🧲 __Utils & Composition__: Comes with graph helper and state composable functions for advanced uses
+
+- 📦 __Additional Components__:
+
+  - 🖼 Background: With two built-in patterns and some configuration options like height, width or color.
+
+  - 🧭 Minimap: Shows current nodes in a small map shape in the bottom right corner
+
+  - 🕹 Controls: Control zoom behavior from a panel on the bottom left
+
+  - 🤖 And (many) more to come...
+
+- 🦾 __Reliable__: Fully written in TypeScript
+
+## 🛠 Setup
+
+```bash
+$ npm i @vue-flow/core
+
+# or
+$ pnpm i @vue-flow/core
+
+# or
+$ yarn add @vue-flow/core
+```
+
+## 🎮 Quickstart
+
+In Vue Flow, an application structure consists of __nodes__ and __edges__, all of which are categorised as __elements__.
+
+__Each element requires a unique id.__
+
+Nodes additionally need an __XY-position__, while edges require a __source__ and a __target__, both represented by node ids.
+
+```vue
+<!-- Flowchart.vue -->
+<script setup>
+import { ref } from 'vue'  
+import { VueFlow } from '@vue-flow/core'
+
+const nodes = ref([
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
+])
+  
+const edges = ref([
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+])
+</script>
+
+<template>
+  <VueFlow v-model:nodes="nodes" v-model:edges="edges"></VueFlow>
+</template>
+```
+
+⚠️ __Make sure to import the necessary styles:__
+
+```css
+/* import the required styles */
+@import "@vue-flow/core/dist/style.css";
+
+/* import the default theme (optional) */
+@import "@vue-flow/core/dist/theme-default.css";
+```
+
+Do __not__ scope these styles with `scoped` in your component.
+
+### 🪴 Vue 2
+
+**_This library doesn't work with Vue 2._**
+
+Vue Flow uses features that are exclusive to Vue 3, therefore
+there is no support for Vue 2, nor will there be any support in the future, sorry.
+
+## 🧪 Development
+
+### Prerequisites
+
+- [Node.js v20+](https://nodejs.org/)
+- [pnpm v9+](https://pnpm.io/)
+
+```bash
+# install pnpm if you haven't already
+$ npm i -g pnpm
+
+# start examples
+$ pnpm dev
+
+# build all packages
+$ pnpm build
+```
+
+### 🐳 Dev Container
+
+To start using development containers, install the `Docker` extension
+for VSCode.
+After installing the extension, open the connection menu either
+on the bottom left or open it via the commands tab.
+Select the `Open Folder in Container` option to mount the project.
+
+The development container will spin up all packages example apps and forward
+the ports to your machine.
+
+## ![discord logo](https://api.iconify.design/logos:discord-icon.svg) Discord
+
+[Join the Vue Flow Discord server!](https://discord.gg/rwt6CBk4b5)
+
+Here you can ask questions to the community, propose ideas for new features
+or share your work that you have built with Vue Flow.
+
+## 💝 Special Thanks
+
+This project is built with
+
+- [React Flow](https://reactflow.dev/)
+  - Vue flow is heavily based on [webkids'](https://webkid.io/) [ReactFlow](https://reactflow.dev/). I wholeheartedly
+    thank them for their amazing work! Without them VueFlow would not exist.
+    Please consider [donating](https://github.com/sponsors/wbkd) or subscribing to [ReactFlow Pro](https://reactflow.dev/pro).
+
+- [D3.js](https://d3js.org/)
+  - D3 makes all the zoom and pan actions in Vue Flow possible.
+
+- [VueUse](https://vueuse.org/)
+  - VueUse is a collection of essential vue composition utilities
+
+## ⭐ Stargazers
+
+Many thanks to the kind individuals who leave a star.
+Your support is much appreciated!
+
+[![Stargazers for @vue-flow/core](https://reporoster.com/stars/bcakmakoglu/vue-flow)](https://github.com/bcakmakoglu/vue-flow/stargazers)
--- a/node_modules/@vue-flow/core/dist/addons/Background/Background.vue.d.ts
+++ b/node_modules/@vue-flow/core/dist/addons/Background/Background.vue.d.ts
@@ -0,0 +1,108 @@
+declare const _default: __VLS_WithTemplateSlots<
+  import('vue').DefineComponent<
+    {
+      color: {
+        type: import('vue').PropType<string>
+      }
+      id: {
+        type: import('vue').PropType<string>
+      }
+      x: {
+        type: import('vue').PropType<number>
+        default: number
+      }
+      y: {
+        type: import('vue').PropType<number>
+        default: number
+      }
+      size: {
+        type: import('vue').PropType<number>
+        default: number
+      }
+      gap: {
+        type: import('vue').PropType<number | number[]>
+        default: number
+      }
+      offset: {
+        type: import('vue').PropType<number>
+        default: number
+      }
+      variant: {
+        type: import('vue').PropType<import('./types').BackgroundVariant>
+        default: string
+      }
+      lineWidth: {
+        type: import('vue').PropType<number>
+        default: number
+      }
+    },
+    {},
+    unknown,
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {},
+    string,
+    import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+    Readonly<
+      import('vue').ExtractPropTypes<{
+        color: {
+          type: import('vue').PropType<string>
+        }
+        id: {
+          type: import('vue').PropType<string>
+        }
+        x: {
+          type: import('vue').PropType<number>
+          default: number
+        }
+        y: {
+          type: import('vue').PropType<number>
+          default: number
+        }
+        size: {
+          type: import('vue').PropType<number>
+          default: number
+        }
+        gap: {
+          type: import('vue').PropType<number | number[]>
+          default: number
+        }
+        offset: {
+          type: import('vue').PropType<number>
+          default: number
+        }
+        variant: {
+          type: import('vue').PropType<import('./types').BackgroundVariant>
+          default: string
+        }
+        lineWidth: {
+          type: import('vue').PropType<number>
+          default: number
+        }
+      }>
+    >,
+    {
+      x: number
+      y: number
+      size: number
+      gap: number | number[]
+      offset: number
+      variant: import('./types').BackgroundVariant
+      lineWidth: number
+    },
+    {}
+  >,
+  {
+    'pattern-container'?(_: { id: string }): any
+    pattern?(_: {}): any
+    default?(_: { id: string }): any
+  }
+>
+export default _default
+type __VLS_WithTemplateSlots<T, S> = T & {
+  new (): {
+    $slots: S
+  }
+}
--- a/node_modules/@vue-flow/core/dist/addons/Background/index.d.ts
+++ b/node_modules/@vue-flow/core/dist/addons/Background/index.d.ts
@@ -0,0 +1,2 @@
+export { default as Background } from './Background.vue'
+export * from './types'
--- a/node_modules/@vue-flow/core/dist/addons/Background/patterns.d.ts
+++ b/node_modules/@vue-flow/core/dist/addons/Background/patterns.d.ts
@@ -0,0 +1,20 @@
+import type { FunctionalComponent } from 'vue'
+import type { BackgroundVariant } from './types'
+
+interface LinePatternProps {
+  dimensions: [number, number]
+  size?: number
+  color: string
+}
+export declare const LinePattern: FunctionalComponent<LinePatternProps>
+interface DotPatternProps {
+  radius: number
+  color: string
+}
+export declare const DotPattern: FunctionalComponent<DotPatternProps>
+export declare const Patterns: {
+  lines: FunctionalComponent<LinePatternProps, {}, any>
+  dots: FunctionalComponent<DotPatternProps, {}, any>
+}
+export declare const DefaultBgColors: Record<BackgroundVariant, string>
+export {}
--- a/node_modules/@vue-flow/core/dist/addons/Background/types.d.ts
+++ b/node_modules/@vue-flow/core/dist/addons/Background/types.d.ts
@@ -0,0 +1,66 @@
+/**
+ * The Background can be either a dotted one or a lined one
+ *
+ * @default 'dots'
+ */
+export type BackgroundVariant = 'dots' | 'lines'
+export interface BackgroundProps {
+  /**
+   * `<Background>` component id
+   *
+   * This is necessary when you have multiple flows with backgrounds visible at the same time.
+   * If no id is explicitly assigned, an auto-generated one is used.
+   *
+   * @default `pattern-${vueFlowId}${id ? `-${id}` : ''}`
+   */
+  id?: string
+  /**
+   * The background pattern variant {@link BackgroundVariant}
+   *
+   * @default 'dots'
+   */
+  variant?: BackgroundVariant
+  /**
+   * The background pattern gap
+   *
+   * Can be either a number or [xGap: number, yGap: number], defining the gap on the X and Y axis respectively
+   *
+   * @default 20
+   */
+  gap?: number | number[]
+  /**
+   * Background pattern size
+   *
+   * @default 1
+   */
+  size?: number
+  /**
+   * @default 1
+   */
+  lineWidth?: number
+  /**
+   * The background pattern color
+   *
+   * This only changes the color of the *pattern*, not the background color itself.
+   *
+   * If you want to change the background color itself, you can apply a bg-color to the `<VueFlow>` element instead
+   */
+  color?: string
+  /**
+   * Background x-coordinate (offset x)
+   *
+   * @default 0
+   */
+  x?: number
+  /**
+   * Background y-coordinate (offset y)
+   * @default 0
+   */
+  y?: number
+  /**
+   * Background pattern offset
+   *
+   * @default 2
+   */
+  offset?: number
+}
--- a/node_modules/@vue-flow/core/dist/components/A11y/A11yDescriptions.vue.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/A11y/A11yDescriptions.vue.d.ts
@@ -0,0 +1,16 @@
+declare const _default: import('vue').DefineComponent<
+  {},
+  {},
+  {},
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<import('vue').ExtractPropTypes<{}>>,
+  {},
+  {}
+>
+export default _default
--- a/node_modules/@vue-flow/core/dist/components/Background/Background.vue.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Background/Background.vue.d.ts
@@ -0,0 +1,108 @@
+declare const _default: __VLS_WithTemplateSlots<
+  import('vue').DefineComponent<
+    {
+      size: {
+        type: import('vue').PropType<number>
+        default: number
+      }
+      color: {
+        type: import('vue').PropType<string>
+      }
+      id: {
+        type: import('vue').PropType<string>
+      }
+      variant: {
+        type: import('vue').PropType<import('./types').BackgroundVariant>
+        default: string
+      }
+      gap: {
+        type: import('vue').PropType<number | number[]>
+        default: number
+      }
+      lineWidth: {
+        type: import('vue').PropType<number>
+        default: number
+      }
+      x: {
+        type: import('vue').PropType<number>
+        default: number
+      }
+      y: {
+        type: import('vue').PropType<number>
+        default: number
+      }
+      offset: {
+        type: import('vue').PropType<number>
+        default: number
+      }
+    },
+    {},
+    unknown,
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {},
+    string,
+    import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+    Readonly<
+      import('vue').ExtractPropTypes<{
+        size: {
+          type: import('vue').PropType<number>
+          default: number
+        }
+        color: {
+          type: import('vue').PropType<string>
+        }
+        id: {
+          type: import('vue').PropType<string>
+        }
+        variant: {
+          type: import('vue').PropType<import('./types').BackgroundVariant>
+          default: string
+        }
+        gap: {
+          type: import('vue').PropType<number | number[]>
+          default: number
+        }
+        lineWidth: {
+          type: import('vue').PropType<number>
+          default: number
+        }
+        x: {
+          type: import('vue').PropType<number>
+          default: number
+        }
+        y: {
+          type: import('vue').PropType<number>
+          default: number
+        }
+        offset: {
+          type: import('vue').PropType<number>
+          default: number
+        }
+      }>
+    >,
+    {
+      size: number
+      variant: import('./types').BackgroundVariant
+      gap: number | number[]
+      lineWidth: number
+      x: number
+      y: number
+      offset: number
+    },
+    {}
+  >,
+  {
+    'pattern-container'?(_: { id: string }): any
+    pattern?(_: {}): any
+    default?(_: { id: string }): any
+  }
+>
+export default _default
+type __VLS_WithTemplateSlots<T, S> = T & {
+  new (): {
+    $slots: S
+  }
+}
--- a/node_modules/@vue-flow/core/dist/components/Background/index.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Background/index.d.ts
@@ -0,0 +1,2 @@
+export { default as Background } from './Background.vue'
+export * from './types'
--- a/node_modules/@vue-flow/core/dist/components/Background/patterns.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Background/patterns.d.ts
@@ -0,0 +1,20 @@
+import type { FunctionalComponent } from 'vue'
+import type { BackgroundVariant } from './types'
+
+interface LinePatternProps {
+  dimensions: [number, number]
+  size?: number
+  color: string
+}
+export declare const LinePattern: FunctionalComponent<LinePatternProps>
+interface DotPatternProps {
+  radius: number
+  color: string
+}
+export declare const DotPattern: FunctionalComponent<DotPatternProps>
+export declare const Patterns: {
+  lines: FunctionalComponent<LinePatternProps, {}, any>
+  dots: FunctionalComponent<DotPatternProps, {}, any>
+}
+export declare const DefaultBgColors: Record<BackgroundVariant, string>
+export {}
--- a/node_modules/@vue-flow/core/dist/components/Background/types.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Background/types.d.ts
@@ -0,0 +1,66 @@
+/**
+ * The Background can be either a dotted one or a lined one
+ *
+ * @default 'dots'
+ */
+export type BackgroundVariant = 'dots' | 'lines'
+export interface BackgroundProps {
+  /**
+   * `<Background>` component id
+   *
+   * This is necessary when you have multiple flows with backgrounds visible at the same time.
+   * If no id is explicitly assigned, an auto-generated one is used.
+   *
+   * @default `pattern-${vueFlowId}${id ? `-${id}` : ''}`
+   */
+  id?: string
+  /**
+   * The background pattern variant {@link BackgroundVariant}
+   *
+   * @default 'dots'
+   */
+  variant?: BackgroundVariant
+  /**
+   * The background pattern gap
+   *
+   * Can be either a number or [xGap: number, yGap: number], defining the gap on the X and Y axis respectively
+   *
+   * @default 20
+   */
+  gap?: number | number[]
+  /**
+   * Background pattern size
+   *
+   * @default 1
+   */
+  size?: number
+  /**
+   * @default 1
+   */
+  lineWidth?: number
+  /**
+   * The background pattern color
+   *
+   * This only changes the color of the *pattern*, not the background color itself.
+   *
+   * If you want to change the background color itself, you can apply a bg-color to the `<VueFlow>` element instead
+   */
+  color?: string
+  /**
+   * Background x-coordinate (offset x)
+   *
+   * @default 0
+   */
+  x?: number
+  /**
+   * Background y-coordinate (offset y)
+   * @default 0
+   */
+  y?: number
+  /**
+   * Background pattern offset
+   *
+   * @default 2
+   */
+  offset?: number
+}
--- a/node_modules/@vue-flow/core/dist/components/ConnectionLine/ConnectionLine.vue.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/ConnectionLine/ConnectionLine.vue.d.ts
@@ -0,0 +1,36 @@
+import type { GraphNode } from '../../types'
+
+declare const _default: import('vue').DefineComponent<
+  __VLS_TypePropsToRuntimeProps<{
+    sourceNode: GraphNode
+  }>,
+  {},
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<
+    import('vue').ExtractPropTypes<
+      __VLS_TypePropsToRuntimeProps<{
+        sourceNode: GraphNode
+      }>
+    >
+  >,
+  {}
+>
+export default _default
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T
+type __VLS_TypePropsToRuntimeProps<T> = {
+  [K in keyof T]-?: {} extends Pick<T, K>
+    ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>
+      }
+    : {
+        type: import('vue').PropType<T[K]>
+        required: true
+      }
+}
--- a/node_modules/@vue-flow/core/dist/components/ConnectionLine/index.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/ConnectionLine/index.d.ts
@@ -0,0 +1,24 @@
+declare const ConnectionLine: import('vue').DefineComponent<
+  {},
+  () =>
+    | import('vue').VNode<
+        import('vue').RendererNode,
+        import('vue').RendererElement,
+        {
+          [key: string]: any
+        }
+      >
+    | null,
+  {},
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<import('vue').ExtractPropTypes<{}>>,
+  {},
+  {}
+>
+export default ConnectionLine
--- a/node_modules/@vue-flow/core/dist/components/Edges/BaseEdge.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/BaseEdge.d.ts
@@ -0,0 +1,9 @@
+import type { FunctionalComponent } from 'vue'
+import type { BaseEdgeProps } from '../../types'
+
+/**
+ * The base edge is a simple wrapper for svg path
+ * You can use the base edge in your custom edges and just pass down the necessary props
+ */
+declare const BaseEdge: FunctionalComponent<BaseEdgeProps>
+export default BaseEdge
--- a/node_modules/@vue-flow/core/dist/components/Edges/BaseEdge.vue.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/BaseEdge.vue.d.ts
@@ -0,0 +1,108 @@
+declare const _default: import('vue').DefineComponent<
+  {
+    id: {
+      type: import('vue').PropType<string>
+    }
+    label: {
+      type: import('vue').PropType<any>
+    }
+    markerStart: {
+      type: import('vue').PropType<string>
+    }
+    markerEnd: {
+      type: import('vue').PropType<string>
+    }
+    interactionWidth: {
+      type: import('vue').PropType<number>
+      default: number
+    }
+    labelStyle: {
+      type: import('vue').PropType<import('vue').CSSProperties>
+    }
+    labelShowBg: {
+      type: import('vue').PropType<boolean>
+    }
+    labelBgStyle: {
+      type: import('vue').PropType<import('vue').CSSProperties>
+    }
+    labelBgPadding: {
+      type: import('vue').PropType<[number, number]>
+    }
+    labelBgBorderRadius: {
+      type: import('vue').PropType<number>
+    }
+    path: {
+      type: import('vue').PropType<string>
+      required: true
+    }
+    labelX: {
+      type: import('vue').PropType<number>
+    }
+    labelY: {
+      type: import('vue').PropType<number>
+    }
+  },
+  {
+    pathEl: import('vue').Ref<SVGPathElement | null>
+    interactionEl: import('vue').Ref<SVGPathElement | null>
+    labelEl: import('vue').Ref<SVGGElement | null>
+  },
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<
+    import('vue').ExtractPropTypes<{
+      id: {
+        type: import('vue').PropType<string>
+      }
+      label: {
+        type: import('vue').PropType<any>
+      }
+      markerStart: {
+        type: import('vue').PropType<string>
+      }
+      markerEnd: {
+        type: import('vue').PropType<string>
+      }
+      interactionWidth: {
+        type: import('vue').PropType<number>
+        default: number
+      }
+      labelStyle: {
+        type: import('vue').PropType<import('vue').CSSProperties>
+      }
+      labelShowBg: {
+        type: import('vue').PropType<boolean>
+      }
+      labelBgStyle: {
+        type: import('vue').PropType<import('vue').CSSProperties>
+      }
+      labelBgPadding: {
+        type: import('vue').PropType<[number, number]>
+      }
+      labelBgBorderRadius: {
+        type: import('vue').PropType<number>
+      }
+      path: {
+        type: import('vue').PropType<string>
+        required: true
+      }
+      labelX: {
+        type: import('vue').PropType<number>
+      }
+      labelY: {
+        type: import('vue').PropType<number>
+      }
+    }>
+  >,
+  {
+    interactionWidth: number
+  },
+  {}
+>
+export default _default
--- a/node_modules/@vue-flow/core/dist/components/Edges/BezierEdge.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/BezierEdge.d.ts
@@ -0,0 +1,20 @@
+import type { BezierEdgeProps } from '../../types'
+
+declare const BezierEdge: import('vue').DefineComponent<
+  BezierEdgeProps,
+  {},
+  {},
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<BezierEdgeProps>,
+  {
+    label?: any
+  },
+  {}
+>
+export default BezierEdge
--- a/node_modules/@vue-flow/core/dist/components/Edges/EdgeAnchor.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/EdgeAnchor.d.ts
@@ -0,0 +1,12 @@
+import type { FunctionalComponent, HTMLAttributes } from 'vue'
+import type { Position } from '../../types'
+
+interface Props extends HTMLAttributes {
+  position: Position
+  centerX: number
+  centerY: number
+  radius?: number
+  type: string
+}
+declare const EdgeAnchor: FunctionalComponent<Props>
+export default EdgeAnchor
--- a/node_modules/@vue-flow/core/dist/components/Edges/EdgeLabelRenderer.vue.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/EdgeLabelRenderer.vue.d.ts
@@ -0,0 +1,26 @@
+declare const _default: __VLS_WithTemplateSlots<
+  import('vue').DefineComponent<
+    {},
+    {},
+    {},
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {},
+    string,
+    import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+    Readonly<import('vue').ExtractPropTypes<{}>>,
+    {},
+    {}
+  >,
+  {
+    default?(_: {}): any
+  }
+>
+export default _default
+type __VLS_WithTemplateSlots<T, S> = T & {
+  new (): {
+    $slots: S
+  }
+}
--- a/node_modules/@vue-flow/core/dist/components/Edges/EdgeText.vue.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/EdgeText.vue.d.ts
@@ -0,0 +1,102 @@
+declare const _default: __VLS_WithTemplateSlots<
+  import('vue').DefineComponent<
+    {
+      x: {
+        type: import('vue').PropType<number>
+        required: true
+      }
+      y: {
+        type: import('vue').PropType<number>
+        required: true
+      }
+      label: {
+        type: import('vue').PropType<
+          | string
+          | object
+          | import('vue').VNode<
+              import('vue').RendererNode,
+              import('vue').RendererElement,
+              {
+                [key: string]: any
+              }
+            >
+        >
+      }
+      labelStyle: {
+        type: import('vue').PropType<import('vue').CSSProperties>
+      }
+      labelShowBg: {
+        type: import('vue').PropType<boolean>
+      }
+      labelBgStyle: {
+        type: import('vue').PropType<import('vue').CSSProperties>
+      }
+      labelBgPadding: {
+        type: import('vue').PropType<[number, number]>
+      }
+      labelBgBorderRadius: {
+        type: import('vue').PropType<number>
+      }
+    },
+    {},
+    unknown,
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {},
+    string,
+    import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+    Readonly<
+      import('vue').ExtractPropTypes<{
+        x: {
+          type: import('vue').PropType<number>
+          required: true
+        }
+        y: {
+          type: import('vue').PropType<number>
+          required: true
+        }
+        label: {
+          type: import('vue').PropType<
+            | string
+            | object
+            | import('vue').VNode<
+                import('vue').RendererNode,
+                import('vue').RendererElement,
+                {
+                  [key: string]: any
+                }
+              >
+          >
+        }
+        labelStyle: {
+          type: import('vue').PropType<import('vue').CSSProperties>
+        }
+        labelShowBg: {
+          type: import('vue').PropType<boolean>
+        }
+        labelBgStyle: {
+          type: import('vue').PropType<import('vue').CSSProperties>
+        }
+        labelBgPadding: {
+          type: import('vue').PropType<[number, number]>
+        }
+        labelBgBorderRadius: {
+          type: import('vue').PropType<number>
+        }
+      }>
+    >,
+    {},
+    {}
+  >,
+  {
+    default?(_: {}): any
+  }
+>
+export default _default
+type __VLS_WithTemplateSlots<T, S> = T & {
+  new (): {
+    $slots: S
+  }
+}
--- a/node_modules/@vue-flow/core/dist/components/Edges/EdgeWrapper.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/EdgeWrapper.d.ts
@@ -0,0 +1,34 @@
+declare const EdgeWrapper: import('vue').DefineComponent<
+  Readonly<{
+    id?: any
+  }>,
+  () =>
+    | import('vue').VNode<
+        import('vue').RendererNode,
+        import('vue').RendererElement,
+        {
+          [key: string]: any
+        }
+      >
+    | null,
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<
+    import('vue').ExtractPropTypes<
+      Readonly<{
+        id?: any
+      }>
+    >
+  >,
+  {
+    readonly id?: any
+  },
+  {}
+>
+export default EdgeWrapper
--- a/node_modules/@vue-flow/core/dist/components/Edges/SimpleBezierEdge.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/SimpleBezierEdge.d.ts
@@ -0,0 +1,20 @@
+import type { SimpleBezierEdgeProps } from '../../types'
+
+declare const SimpleBezierEdge: import('vue').DefineComponent<
+  SimpleBezierEdgeProps,
+  {},
+  {},
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<SimpleBezierEdgeProps>,
+  {
+    label?: any
+  },
+  {}
+>
+export default SimpleBezierEdge
--- a/node_modules/@vue-flow/core/dist/components/Edges/SmoothStepEdge.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/SmoothStepEdge.d.ts
@@ -0,0 +1,20 @@
+import type { SmoothStepEdgeProps } from '../../types'
+
+declare const SmoothStepEdge: import('vue').DefineComponent<
+  SmoothStepEdgeProps,
+  {},
+  {},
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<SmoothStepEdgeProps>,
+  {
+    label?: any
+  },
+  {}
+>
+export default SmoothStepEdge
--- a/node_modules/@vue-flow/core/dist/components/Edges/StepEdge.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/StepEdge.d.ts
@@ -0,0 +1,20 @@
+import type { StepEdgeProps } from '../../types'
+
+declare const StepEdge: import('vue').DefineComponent<
+  StepEdgeProps,
+  {},
+  {},
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<StepEdgeProps>,
+  {
+    label?: any
+  },
+  {}
+>
+export default StepEdge
--- a/node_modules/@vue-flow/core/dist/components/Edges/StraightEdge.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/StraightEdge.d.ts
@@ -0,0 +1,20 @@
+import type { StraightEdgeProps } from '../../types'
+
+declare const StraightEdge: import('vue').DefineComponent<
+  StraightEdgeProps,
+  {},
+  {},
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<StraightEdgeProps>,
+  {
+    label?: any
+  },
+  {}
+>
+export default StraightEdge
--- a/node_modules/@vue-flow/core/dist/components/Edges/index.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/index.d.ts
@@ -0,0 +1,10 @@
+export { default as BaseEdge } from './BaseEdge.vue'
+export { default as BezierEdge } from './BezierEdge'
+export { default as SimpleBezierEdge } from './SimpleBezierEdge'
+export { default as StepEdge } from './StepEdge'
+export { default as SmoothStepEdge } from './SmoothStepEdge'
+export { default as StraightEdge } from './StraightEdge'
+export { default as EdgeAnchor } from './EdgeAnchor'
+export { default as EdgeText } from './EdgeText.vue'
+export { default as EdgeWrapper } from './EdgeWrapper'
+export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.vue'
--- a/node_modules/@vue-flow/core/dist/components/Edges/simple-bezier.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/simple-bezier.d.ts
@@ -0,0 +1,31 @@
+import type { Position } from '../../types'
+
+export interface GetSimpleBezierPathParams {
+  sourceX: number
+  sourceY: number
+  sourcePosition?: Position
+  targetX: number
+  targetY: number
+  targetPosition?: Position
+}
+/**
+ * Get a simple bezier path from source to target handle (no curvature)
+ * @public
+ *
+ * @param simpleBezierPathParams
+ * @param simpleBezierPathParams.sourceX - The x position of the source handle
+ * @param simpleBezierPathParams.sourceY - The y position of the source handle
+ * @param simpleBezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
+ * @param simpleBezierPathParams.targetX - The x position of the target handle
+ * @param simpleBezierPathParams.targetY - The y position of the target handle
+ * @param simpleBezierPathParams.targetPosition - The position of the target handle (default: Position.Top)
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ */
+export declare function getSimpleBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition,
+  targetX,
+  targetY,
+  targetPosition,
+}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]
--- a/node_modules/@vue-flow/core/dist/components/Edges/utils/bezier.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/utils/bezier.d.ts
@@ -0,0 +1,27 @@
+import type { Position } from '../../../types'
+import type { EdgePathParams } from './general'
+
+export interface GetBezierPathParams {
+  sourceX: number
+  sourceY: number
+  sourcePosition?: Position
+  targetX: number
+  targetY: number
+  targetPosition?: Position
+  curvature?: number
+}
+/**
+ * Get a bezier path from source to target handle
+ * @public
+ *
+ * @param bezierPathParams
+ * @param bezierPathParams.sourceX - The x position of the source handle
+ * @param bezierPathParams.sourceY - The y position of the source handle
+ * @param bezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
+ * @param bezierPathParams.targetX - The x position of the target handle
+ * @param bezierPathParams.targetY - The y position of the target handle
+ * @param bezierPathParams.targetPosition - The position of the target handle (default: Position.Top)
+ * @param bezierPathParams.curvature - The curvature of the edge (default: 0.25)
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ */
+export declare function getBezierPath(bezierPathParams: GetBezierPathParams): EdgePathParams
--- a/node_modules/@vue-flow/core/dist/components/Edges/utils/general.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/utils/general.d.ts
@@ -0,0 +1,31 @@
+export type EdgePathParams = [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]
+export declare function getSimpleEdgeCenter({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+}: {
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+}): [number, number, number, number]
+export declare function getBezierEdgeCenter({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourceControlX,
+  sourceControlY,
+  targetControlX,
+  targetControlY,
+}: {
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourceControlX: number
+  sourceControlY: number
+  targetControlX: number
+  targetControlY: number
+}): [number, number, number, number]
--- a/node_modules/@vue-flow/core/dist/components/Edges/utils/index.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/utils/index.d.ts
@@ -0,0 +1,5 @@
+export * from './bezier'
+export * from './general'
+export * from './simple-bezier'
+export * from './smoothstep'
+export * from './straight'
--- a/node_modules/@vue-flow/core/dist/components/Edges/utils/simple-bezier.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/utils/simple-bezier.d.ts
@@ -0,0 +1,25 @@
+import type { Position } from '../../../types'
+import type { EdgePathParams } from './general'
+
+export interface GetSimpleBezierPathParams {
+  sourceX: number
+  sourceY: number
+  sourcePosition?: Position
+  targetX: number
+  targetY: number
+  targetPosition?: Position
+}
+/**
+ * Get a simple bezier path from source to target handle (no curvature)
+ * @public
+ *
+ * @param simpleBezierPathParams
+ * @param simpleBezierPathParams.sourceX - The x position of the source handle
+ * @param simpleBezierPathParams.sourceY - The y position of the source handle
+ * @param simpleBezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
+ * @param simpleBezierPathParams.targetX - The x position of the target handle
+ * @param simpleBezierPathParams.targetY - The y position of the target handle
+ * @param simpleBezierPathParams.targetPosition - The position of the target handle (default: Position.Top)
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ */
+export declare function getSimpleBezierPath(simpleBezierPathParams: GetSimpleBezierPathParams): EdgePathParams
--- a/node_modules/@vue-flow/core/dist/components/Edges/utils/smoothstep.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/utils/smoothstep.d.ts
@@ -0,0 +1,30 @@
+import type { Position } from '../../../types'
+import type { EdgePathParams } from './general'
+
+export interface GetSmoothStepPathParams {
+  sourceX: number
+  sourceY: number
+  sourcePosition?: Position
+  targetX: number
+  targetY: number
+  targetPosition?: Position
+  borderRadius?: number
+  centerX?: number
+  centerY?: number
+  offset?: number
+}
+/**
+ * Get a smooth step path from source to target handle
+ * @public
+ *
+ * @param smoothStepPathParams
+ * @param smoothStepPathParams.sourceX - The x position of the source handle
+ * @param smoothStepPathParams.sourceY - The y position of the source handle
+ * @param smoothStepPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
+ * @param smoothStepPathParams.targetX - The x position of the target handle
+ * @param smoothStepPathParams.targetY - The y position of the target handle
+ * @param smoothStepPathParams.targetPosition - The position of the target handle (default: Position.Top)
+ * @param smoothStepPathParams.borderRadius - The border radius of the edge (default: 5)
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ */
+export declare function getSmoothStepPath(smoothStepPathParams: GetSmoothStepPathParams): EdgePathParams
--- a/node_modules/@vue-flow/core/dist/components/Edges/utils/straight.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Edges/utils/straight.d.ts
@@ -0,0 +1,20 @@
+import type { EdgePathParams } from './general'
+
+export interface GetStraightPathParams {
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+}
+/**
+ * Get a straight path from source to target handle
+ * @public
+ *
+ * @param straightEdgeParams
+ * @param straightEdgeParams.sourceX - The x position of the source handle
+ * @param straightEdgeParams.sourceY - The y position of the source handle
+ * @param straightEdgeParams.targetX - The x position of the target handle
+ * @param straightEdgeParams.targetY - The y position of the target handle
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ */
+export declare function getStraightPath(straightEdgeParams: GetStraightPathParams): EdgePathParams
--- a/node_modules/@vue-flow/core/dist/components/Handle/Handle.vue.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Handle/Handle.vue.d.ts
@@ -0,0 +1,79 @@
+import type { Position } from '../../types'
+
+declare const _default: __VLS_WithTemplateSlots<
+  import('vue').DefineComponent<
+    {
+      id: {
+        type: import('vue').PropType<string>
+      }
+      type: {
+        type: import('vue').PropType<import('../../types').HandleType>
+      }
+      position: {
+        type: import('vue').PropType<Position>
+      }
+      isValidConnection: {
+        type: import('vue').PropType<import('../../types').ValidConnectionFunc>
+      }
+      connectable: {
+        type: import('vue').PropType<import('../../types').HandleConnectable>
+      }
+      connectableStart: {
+        type: import('vue').PropType<boolean>
+      }
+      connectableEnd: {
+        type: import('vue').PropType<boolean>
+      }
+    },
+    {
+      handleClick: (event: MouseEvent) => void
+      handlePointerDown: (event: import('../../types').MouseTouchEvent) => void
+      onClick: (event: MouseEvent) => void
+      onPointerDown: (event: MouseEvent | TouchEvent) => void
+    },
+    unknown,
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {},
+    string,
+    import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+    Readonly<
+      import('vue').ExtractPropTypes<{
+        id: {
+          type: import('vue').PropType<string>
+        }
+        type: {
+          type: import('vue').PropType<import('../../types').HandleType>
+        }
+        position: {
+          type: import('vue').PropType<Position>
+        }
+        isValidConnection: {
+          type: import('vue').PropType<import('../../types').ValidConnectionFunc>
+        }
+        connectable: {
+          type: import('vue').PropType<import('../../types').HandleConnectable>
+        }
+        connectableStart: {
+          type: import('vue').PropType<boolean>
+        }
+        connectableEnd: {
+          type: import('vue').PropType<boolean>
+        }
+      }>
+    >,
+    {},
+    {}
+  >,
+  {
+    default?(_: { id: string | undefined }): any
+  }
+>
+export default _default
+type __VLS_WithTemplateSlots<T, S> = T & {
+  new (): {
+    $slots: S
+  }
+}
--- a/node_modules/@vue-flow/core/dist/components/Nodes/DefaultNode.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Nodes/DefaultNode.d.ts
@@ -0,0 +1,9 @@
+import type { FunctionalComponent } from 'vue'
+import type { NodeProps } from '../../types'
+
+declare const DefaultNode: FunctionalComponent<
+  NodeProps<{
+    label: any
+  }>
+>
+export default DefaultNode
--- a/node_modules/@vue-flow/core/dist/components/Nodes/InputNode.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Nodes/InputNode.d.ts
@@ -0,0 +1,9 @@
+import type { FunctionalComponent } from 'vue'
+import type { NodeProps } from '../../types'
+
+declare const InputNode: FunctionalComponent<
+  NodeProps<{
+    label: any
+  }>
+>
+export default InputNode
--- a/node_modules/@vue-flow/core/dist/components/Nodes/NodeWrapper.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Nodes/NodeWrapper.d.ts
@@ -0,0 +1,37 @@
+declare const NodeWrapper: import('vue').DefineComponent<
+  Readonly<{
+    id?: any
+    resizeObserver?: any
+  }>,
+  () =>
+    | import('vue').VNode<
+        import('vue').RendererNode,
+        import('vue').RendererElement,
+        {
+          [key: string]: any
+        }
+      >
+    | null,
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<
+    import('vue').ExtractPropTypes<
+      Readonly<{
+        id?: any
+        resizeObserver?: any
+      }>
+    >
+  >,
+  {
+    readonly id?: any
+    readonly resizeObserver?: any
+  },
+  {}
+>
+export default NodeWrapper
--- a/node_modules/@vue-flow/core/dist/components/Nodes/OutputNode.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Nodes/OutputNode.d.ts
@@ -0,0 +1,9 @@
+import type { FunctionalComponent } from 'vue'
+import type { NodeProps } from '../../types'
+
+declare const OutputNode: FunctionalComponent<
+  NodeProps<{
+    label: any
+  }>
+>
+export default OutputNode
--- a/node_modules/@vue-flow/core/dist/components/Nodes/index.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Nodes/index.d.ts
@@ -0,0 +1,4 @@
+export { default as DefaultNode } from './DefaultNode'
+export { default as InputNode } from './InputNode'
+export { default as OutputNode } from './OutputNode'
+export { default as NodeWrapper } from './NodeWrapper'
--- a/node_modules/@vue-flow/core/dist/components/NodesSelection/NodesSelection.vue.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/NodesSelection/NodesSelection.vue.d.ts
@@ -0,0 +1,16 @@
+declare const _default: import('vue').DefineComponent<
+  {},
+  {},
+  {},
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<import('vue').ExtractPropTypes<{}>>,
+  {},
+  {}
+>
+export default _default
--- a/node_modules/@vue-flow/core/dist/components/Panel/Panel.vue.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/Panel/Panel.vue.d.ts
@@ -0,0 +1,38 @@
+declare const _default: __VLS_WithTemplateSlots<
+  import('vue').DefineComponent<
+    {
+      position: {
+        type: import('vue').PropType<import('../../types/panel').PanelPositionType | import('../../types/panel').PanelPosition>
+        required: true
+      }
+    },
+    {},
+    unknown,
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {},
+    string,
+    import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+    Readonly<
+      import('vue').ExtractPropTypes<{
+        position: {
+          type: import('vue').PropType<import('../../types/panel').PanelPositionType | import('../../types/panel').PanelPosition>
+          required: true
+        }
+      }>
+    >,
+    {},
+    {}
+  >,
+  {
+    default?(_: {}): any
+  }
+>
+export default _default
+type __VLS_WithTemplateSlots<T, S> = T & {
+  new (): {
+    $slots: S
+  }
+}
--- a/node_modules/@vue-flow/core/dist/components/UserSelection/UserSelection.vue.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/UserSelection/UserSelection.vue.d.ts
@@ -0,0 +1,30 @@
+import type { SelectionRect } from '../../types'
+
+declare const _default: import('vue').DefineComponent<
+  {
+    userSelectionRect: {
+      type: import('vue').PropType<SelectionRect>
+      required: true
+    }
+  },
+  {},
+  unknown,
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+  Readonly<
+    import('vue').ExtractPropTypes<{
+      userSelectionRect: {
+        type: import('vue').PropType<SelectionRect>
+        required: true
+      }
+    }>
+  >,
+  {},
+  {}
+>
+export default _default
--- a/node_modules/@vue-flow/core/dist/components/VueFlowProvider/VueFlowProvider.vue.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/VueFlowProvider/VueFlowProvider.vue.d.ts
@@ -0,0 +1,48 @@
+declare const _default: __VLS_WithTemplateSlots<
+  import('vue').DefineComponent<
+    {
+      initialNodes: {
+        type: import('vue').PropType<import('../../types').Node<any, any, string>[]>
+      }
+      initialEdges: {
+        type: import('vue').PropType<import('../../types').Edge[]>
+      }
+      fitViewOnInit: {
+        type: import('vue').PropType<boolean>
+      }
+    },
+    {},
+    unknown,
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {},
+    string,
+    import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
+    Readonly<
+      import('vue').ExtractPropTypes<{
+        initialNodes: {
+          type: import('vue').PropType<import('../../types').Node<any, any, string>[]>
+        }
+        initialEdges: {
+          type: import('vue').PropType<import('../../types').Edge[]>
+        }
+        fitViewOnInit: {
+          type: import('vue').PropType<boolean>
+        }
+      }>
+    >,
+    {},
+    {}
+  >,
+  {
+    default?(_: {}): any
+  }
+>
+export default _default
+type __VLS_WithTemplateSlots<T, S> = T & {
+  new (): {
+    $slots: S
+  }
+}
--- a/node_modules/@vue-flow/core/dist/components/index.d.ts
+++ b/node_modules/@vue-flow/core/dist/components/index.d.ts
@@ -0,0 +1,6 @@
+export * from './Nodes'
+export * from './Edges'
+export { default as ConnectionLine } from './ConnectionLine'
+export { default as Handle } from './Handle/Handle.vue'
+export { default as NodesSelection } from './NodesSelection/NodesSelection.vue'
+export { default as UserSelection } from './UserSelection/UserSelection.vue'
--- a/node_modules/@vue-flow/core/dist/composables/index.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/index.d.ts
@@ -0,0 +1,13 @@
+export * from './useDrag'
+export * from './useEdge'
+export * from './useEdgeHooks'
+export * from './useGetPointerPosition'
+export * from './useHandle'
+export * from './useKeyPress'
+export * from './useNode'
+export * from './useNodeHooks'
+export * from './useUpdateNodePositions'
+export * from './useViewportHelper'
+export * from './useVueFlow'
+export * from './useWatchProps'
+export * from './useZoomPanHelper'
--- a/node_modules/@vue-flow/core/dist/composables/useConnection.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useConnection.d.ts
@@ -0,0 +1,12 @@
+/**
+ * Composable for accessing the currently ongoing connection.
+ *
+ * @public
+ * @returns current connection: startHandle, endHandle, status, position
+ */
+export declare function useConnection(): {
+  startHandle: import('vue').Ref<import('..').ConnectingHandle | null>
+  endHandle: import('vue').Ref<import('..').ConnectingHandle | null>
+  status: import('vue').Ref<import('..').ConnectionStatus | null>
+  position: import('vue').Ref<import('..').XYPosition>
+}
--- a/node_modules/@vue-flow/core/dist/composables/useDrag.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useDrag.d.ts
@@ -0,0 +1,24 @@
+import type { D3DragEvent, SubjectPosition } from 'd3-drag'
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import type { MouseTouchEvent, NodeDragEvent } from '../types'
+
+export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>
+interface UseDragParams {
+  onStart: (event: NodeDragEvent) => void
+  onDrag: (event: NodeDragEvent) => void
+  onStop: (event: NodeDragEvent) => void
+  onClick?: (event: MouseTouchEvent) => void
+  el: Ref<Element | null>
+  disabled?: MaybeRefOrGetter<boolean>
+  selectable?: MaybeRefOrGetter<boolean>
+  dragHandle?: MaybeRefOrGetter<string | undefined>
+  id?: string
+}
+/**
+ * Composable that provides drag behavior for nodes
+ *
+ * @internal
+ * @param params
+ */
+export declare function useDrag(params: UseDragParams): import('vue').ShallowRef<boolean>
+export {}
--- a/node_modules/@vue-flow/core/dist/composables/useEdge.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useEdge.d.ts
@@ -0,0 +1,20 @@
+import type { CustomEvent, ElementData } from '../types'
+
+/**
+ * Composable that provides access to an edge object and it's dom element
+ *
+ * If no edge id is provided, the edge id is injected from context
+ *
+ * If you do not provide an id, this composable has to be called in a child of your custom edge component, or it will throw
+ *
+ * @public
+ * @param id - The id of the edge to access
+ * @returns the edge id, the edge and the edge dom element
+ */
+export declare function useEdge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
+  id?: string,
+): {
+  id: string
+  edge: import('../types').GraphEdge<Data, CustomEvents>
+  edgeEl: import('vue').Ref<SVGElement | null>
+}
--- a/node_modules/@vue-flow/core/dist/composables/useEdgeHooks.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useEdgeHooks.d.ts
@@ -0,0 +1,14 @@
+import type { EdgeEventsEmit, EdgeEventsOn, GraphEdge, VueFlowStore } from '../types'
+
+/**
+ * Composable for handling edge events
+ *
+ * @internal
+ */
+export declare function useEdgeHooks(
+  edge: GraphEdge,
+  emits: VueFlowStore['emits'],
+): {
+  emit: EdgeEventsEmit
+  on: EdgeEventsOn
+}
--- a/node_modules/@vue-flow/core/dist/composables/useEdgesData.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useEdgesData.d.ts
@@ -0,0 +1,27 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+import type { Edge, GraphEdge } from '../types'
+
+interface EdgeData<EdgeType extends Edge = GraphEdge> {
+  id: string
+  type: EdgeType['type']
+  data: NonNullable<EdgeType['data']> | null
+}
+/**
+ * Composable for receiving data of one or multiple nodes
+ *
+ * @public
+ * @param edgeId - The id (or ids) of the node to get the data from
+ * @param guard - Optional guard function to narrow down the node type
+ * @returns An array of data objects
+ */
+export declare function useEdgesData<EdgeType extends Edge = GraphEdge>(
+  edgeId: MaybeRefOrGetter<string>,
+): ComputedRef<EdgeData<EdgeType> | null>
+export declare function useEdgesData<EdgeType extends Edge = GraphEdge>(
+  edgeIds: MaybeRefOrGetter<string[]>,
+): ComputedRef<EdgeData<EdgeType>[]>
+export declare function useEdgesData<EdgeType extends Edge = GraphEdge>(
+  edgeIds: MaybeRefOrGetter<string[]>,
+  guard: (node: Edge) => node is EdgeType,
+): ComputedRef<EdgeData<EdgeType>[]>
+export {}
--- a/node_modules/@vue-flow/core/dist/composables/useGetPointerPosition.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useGetPointerPosition.d.ts
@@ -0,0 +1,14 @@
+import type { MouseTouchEvent } from '../types'
+import type { UseDragEvent } from './useDrag'
+
+/**
+ * Composable that returns a function to get the pointer position
+ *
+ * @internal
+ */
+export declare function useGetPointerPosition(): (event: UseDragEvent | MouseTouchEvent) => {
+  x: number
+  y: number
+  xSnapped: number
+  ySnapped: number
+}
--- a/node_modules/@vue-flow/core/dist/composables/useHandle.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useHandle.d.ts
@@ -0,0 +1,31 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type { Connection, HandleType, MouseTouchEvent, ValidConnectionFunc } from '../types'
+
+export interface UseHandleProps {
+  handleId: MaybeRefOrGetter<string | null>
+  nodeId: MaybeRefOrGetter<string>
+  type: MaybeRefOrGetter<HandleType>
+  isValidConnection?: MaybeRefOrGetter<ValidConnectionFunc | null>
+  edgeUpdaterType?: MaybeRefOrGetter<HandleType>
+  onEdgeUpdate?: (event: MouseTouchEvent, connection: Connection) => void
+  onEdgeUpdateEnd?: (event: MouseTouchEvent) => void
+}
+/**
+ * This composable provides listeners for handle events
+ *
+ * Generally it's recommended to use the `<Handle />` component instead of this composable.
+ *
+ * @public
+ */
+export declare function useHandle({
+  handleId,
+  nodeId,
+  type,
+  isValidConnection,
+  edgeUpdaterType,
+  onEdgeUpdate,
+  onEdgeUpdateEnd,
+}: UseHandleProps): {
+  handlePointerDown: (event: MouseTouchEvent) => void
+  handleClick: (event: MouseEvent) => void
+}
--- a/node_modules/@vue-flow/core/dist/composables/useHandleConnections.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useHandleConnections.d.ts
@@ -0,0 +1,25 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+import type { HandleConnection, HandleType } from '../types'
+
+export interface UseHandleConnectionsParams {
+  type: MaybeRefOrGetter<HandleType>
+  id?: MaybeRefOrGetter<string | null>
+  nodeId?: MaybeRefOrGetter<string | null>
+  onConnect?: (connections: HandleConnection[]) => void
+  onDisconnect?: (connections: HandleConnection[]) => void
+}
+/**
+ * Composable that returns existing connections of a `<Handle />`.
+ *
+ * @deprecated use `useNodeConnections` instead
+ * @public
+ * @param params
+ * @param params.type - handle type `source` or `target`
+ * @param params.nodeId - node id - if not provided, the node id from the `useNodeId` (meaning, the context-based injection) is used
+ * @param params.id - the handle id (this is required if the node has multiple handles of the same type)
+ * @param params.onConnect - gets called when a connection is created
+ * @param params.onDisconnect - gets called when a connection is removed
+ *
+ * @returns An array of connections
+ */
+export declare function useHandleConnections(params: UseHandleConnectionsParams): ComputedRef<HandleConnection[]>
--- a/node_modules/@vue-flow/core/dist/composables/useKeyPress.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useKeyPress.d.ts
@@ -0,0 +1,20 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type { KeyFilter } from '@vueuse/core'
+
+export interface UseKeyPressOptions {
+  target?: MaybeRefOrGetter<EventTarget | null | undefined>
+  actInsideInputWithModifier?: MaybeRefOrGetter<boolean>
+  preventDefault?: MaybeRefOrGetter<boolean>
+}
+export declare function isInputDOMNode(event: KeyboardEvent): boolean
+/**
+ * Composable that returns a boolean value if a key is pressed
+ *
+ * @public
+ * @param keyFilter - Can be a boolean, a string, an array of strings or a function that returns a boolean. If it's a boolean, it will act as if the key is always pressed. If it's a string, it will return true if a key matching that string is pressed. If it's an array of strings, it will return true if any of the strings match a key being pressed, or a combination (e.g. ['ctrl+a', 'ctrl+b'])
+ * @param options - Options object
+ */
+export declare function useKeyPress(
+  keyFilter: MaybeRefOrGetter<KeyFilter | boolean | null>,
+  options?: UseKeyPressOptions,
+): import('vue').ShallowRef<boolean>
--- a/node_modules/@vue-flow/core/dist/composables/useNode.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useNode.d.ts
@@ -0,0 +1,22 @@
+import type { CustomEvent, ElementData } from '../types'
+
+/**
+ * Composable that provides access to a node object, parent node object, connected edges and it's dom element
+ *
+ * If no node id is provided, the node id is injected from context
+ *
+ * If you do not provide an id, this composable has to be called in a child of your custom node component, or it will throw
+ *
+ * @public
+ * @param id - The id of the node to access
+ * @returns the node id, the node, the node dom element, it's parent and connected edges
+ */
+export declare function useNode<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
+  id?: string,
+): {
+  id: string
+  nodeEl: import('vue').Ref<HTMLDivElement | null>
+  node: import('../types').GraphNode<Data, CustomEvents, string>
+  parentNode: import('vue').ComputedRef<import('../types').GraphNode<any, any, string> | undefined>
+  connectedEdges: import('vue').ComputedRef<import('../types').GraphEdge[]>
+}
--- a/node_modules/@vue-flow/core/dist/composables/useNodeConnections.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useNodeConnections.d.ts
@@ -0,0 +1,24 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type { HandleType, NodeConnection } from '../types'
+
+export interface UseNodeConnectionsParams {
+  handleType?: MaybeRefOrGetter<HandleType | null | undefined>
+  handleId?: MaybeRefOrGetter<string | null | undefined>
+  nodeId?: MaybeRefOrGetter<string | null | undefined>
+  onConnect?: (connections: NodeConnection[]) => void
+  onDisconnect?: (connections: NodeConnection[]) => void
+}
+/**
+ * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
+ *
+ * @public
+ * @param params
+ * @param params.handleType - handle type `source` or `target`
+ * @param params.nodeId - node id - if not provided, the node id from the `useNodeId` (meaning, the context-based injection) is used
+ * @param params.handleId - the handle id (this is required if the node has multiple handles of the same type)
+ * @param params.onConnect - gets called when a connection is created
+ * @param params.onDisconnect - gets called when a connection is removed
+ *
+ * @returns An array of connections
+ */
+export declare function useNodeConnections(params?: UseNodeConnectionsParams): import('vue').ComputedRef<NodeConnection[]>
--- a/node_modules/@vue-flow/core/dist/composables/useNodeHooks.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useNodeHooks.d.ts
@@ -0,0 +1,14 @@
+import type { GraphNode, NodeEventsEmit, NodeEventsOn, VueFlowStore } from '../types'
+
+/**
+ * Composable for handling node events
+ *
+ * @internal
+ */
+export declare function useNodeHooks(
+  node: GraphNode,
+  emits: VueFlowStore['emits'],
+): {
+  emit: NodeEventsEmit
+  on: NodeEventsOn
+}
--- a/node_modules/@vue-flow/core/dist/composables/useNodeId.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useNodeId.d.ts
@@ -0,0 +1,9 @@
+/**
+ * This composable returns the current node id from the ctx.
+ *
+ * It should be used inside a (custom-)node components ctx as the id is provided by the internal `NodeWrapper` component.
+ *
+ * @public
+ * @returns the current node id
+ */
+export declare function useNodeId(): string
--- a/node_modules/@vue-flow/core/dist/composables/useNodesData.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useNodesData.d.ts
@@ -0,0 +1,27 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+import type { GraphNode, Node } from '../types'
+
+interface NodeData<NodeType extends Node = GraphNode> {
+  id: string
+  type: NodeType['type']
+  data: NonNullable<NodeType['data']>
+}
+/**
+ * Composable for receiving data of one or multiple nodes
+ *
+ * @public
+ * @param nodeId - The id (or ids) of the node to get the data from
+ * @param guard - Optional guard function to narrow down the node type
+ * @returns An array of data objects
+ */
+export declare function useNodesData<NodeType extends Node = GraphNode>(
+  nodeId: MaybeRefOrGetter<string>,
+): ComputedRef<NodeData<NodeType> | null>
+export declare function useNodesData<NodeType extends Node = GraphNode>(
+  nodeIds: MaybeRefOrGetter<string[]>,
+): ComputedRef<NodeData<NodeType>[]>
+export declare function useNodesData<NodeType extends Node = GraphNode>(
+  nodeIds: MaybeRefOrGetter<string[]>,
+  guard: (node: Node) => node is NodeType,
+): ComputedRef<NodeData<NodeType>[]>
+export {}
--- a/node_modules/@vue-flow/core/dist/composables/useNodesInitialized.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useNodesInitialized.d.ts
@@ -0,0 +1,15 @@
+export interface UseNodesInitializedOptions {
+  includeHiddenNodes?: boolean
+}
+/**
+ * Composable for getting the initialized state of all nodes.
+ *
+ * When a new node is added to the graph, it is not immediately initialized.
+ * That's because the node's bounds are not yet known.
+ * This composable will return false and then true when all nodes are initialized, i.e. when their bounds are known.
+ *
+ * @public
+ * @param options - Options
+ * @returns boolean indicating whether all nodes are initialized
+ */
+export declare function useNodesInitialized(options?: UseNodesInitializedOptions): import('vue').ComputedRef<boolean>
--- a/node_modules/@vue-flow/core/dist/composables/useOnInitHandler.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useOnInitHandler.d.ts
@@ -0,0 +1,6 @@
+/**
+ * Composable that handles the initialization of the viewport.
+ *
+ * @internal
+ */
+export declare function useOnInitHandler(): void
--- a/node_modules/@vue-flow/core/dist/composables/useResizeHandler.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useResizeHandler.d.ts
@@ -0,0 +1,9 @@
+import type { Ref } from 'vue'
+
+/**
+ * Composable that handles the resize of the viewport.
+ *
+ * @internal
+ * @param viewportEl
+ */
+export declare function useResizeHandler(viewportEl: Ref<HTMLDivElement | null>): void
--- a/node_modules/@vue-flow/core/dist/composables/useStylesLoadedWarning.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useStylesLoadedWarning.d.ts
@@ -0,0 +1 @@
+export declare function useStylesLoadedWarning(): void
--- a/node_modules/@vue-flow/core/dist/composables/useUpdateNodePositions.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useUpdateNodePositions.d.ts
@@ -0,0 +1,8 @@
+import type { XYPosition } from '../types'
+
+/**
+ * Composable for updating the position of nodes.
+ *
+ * @internal
+ */
+export declare function useUpdateNodePositions(): (positionDiff: XYPosition, isShiftPressed?: boolean) => void
--- a/node_modules/@vue-flow/core/dist/composables/useViewport.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useViewport.d.ts
@@ -0,0 +1,8 @@
+import type { ComputedGetters, Project, State, ViewportFunctions } from '../types'
+
+export interface ViewportHelper extends ViewportFunctions {
+  viewportInitialized: boolean
+  screenToFlowCoordinate: Project
+  flowToScreenCoordinate: Project
+}
+export declare function useViewport(state: State, getters: ComputedGetters): import('vue').ComputedRef<ViewportHelper>
--- a/node_modules/@vue-flow/core/dist/composables/useViewportHelper.d.ts
+++ b/node_modules/@vue-flow/core/dist/composables/useViewportHelper.d.ts
@@ -0,0 +1,20 @@
+import type { D3Selection, Project, State, ViewportFunctions } from '../types'
+
+export interface ViewportHelper extends ViewportFunctions {
+  viewportInitialized: boolean
+  screenToFlowCoordinate: Project
+  flowToScreenCoordinate: Project
+}
+/**
+ * Composable that provides viewport helper functions.
+ *
+ * @internal
+ * @param state
+ */
+export declare function useViewportHelper(state: State): import('vue').ComputedRef<ViewportHelper>
+export declare function getD3Transition(
+  selection: D3Selection,
+  duration?: number,
+  ease?: (t: number) => number,
+  onEnd?: () => void,
+): D3Selection | import('d3-transition').Transition<HTMLDivElement, unknown, null, undefined>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export declare function useStylesLoadedWarning(): void`