Implemented 2D visualization for notes using Vue Flow

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.

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>
+```

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
+  }
+}

node_modules/@vue-flow/background/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Background } from './Background.vue'
+export * from './types'

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 {}

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]
+}

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);

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;

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
+};

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"
+  }
+}