From c1bcc0279733d1611ffb9eab402d05418bcc6661 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 8 Oct 2022 20:43:46 +0200
Subject: [PATCH] refactor(additional-components): move additional components
 into separate pkg

---
 docs/components/Repl.vue                      |   1 +
 docs/components/examples/basic/App.vue        |   3 +-
 .../examples/connectionline/App.vue           |   3 +-
 docs/components/examples/custom-node/App.vue  |   3 +-
 docs/components/examples/edges/App.vue        |   3 +-
 docs/components/examples/empty/App.vue        |   3 +-
 docs/components/examples/hidden/App.vue       |   3 +-
 docs/components/examples/horizontal/App.vue   |   3 +-
 docs/components/examples/nested/App.vue       |   3 +-
 docs/components/examples/update-edge/App.vue  |   3 +-
 docs/components/home/flows/Additional.vue     |   3 +-
 docs/components/home/flows/Basic.vue          |   3 +-
 docs/components/home/flows/Intro.vue          |   3 +-
 docs/components/home/flows/Nested.vue         |   3 +-
 docs/components/home/flows/RGB.vue            |   5 +-
 docs/package.json                             |   1 +
 docs/src/.vitepress/copy-plugin.ts            |  27 +-
 .../background/App.vue                        |   3 +-
 .../3-additional-components/controls/App.vue  |   3 +-
 .../3-additional-components/minimap/App.vue   |   3 +-
 e2e/package.json                              |   1 +
 examples/nuxt3/components/BasicFlow.vue       |   3 +-
 examples/nuxt3/package.json                   |   1 +
 examples/quasar/package.json                  |   1 +
 examples/quasar/src/components/BasicFlow.vue  |   3 +-
 examples/vite/.eslintrc.js                    |   1 +
 examples/vite/package.json                    |   1 +
 examples/vite/src/Basic/Basic.vue             |   3 +-
 examples/vite/src/Basic/BasicOptionsAPI.vue   |   3 +-
 .../CustomConnectionLine.vue                  |   3 +-
 examples/vite/src/CustomNode/CustomNode.vue   |   3 +-
 .../vite/src/EdgeTypes/EdgeTypesExample.vue   |   3 +-
 examples/vite/src/Edges/CustomEdge.vue        |   2 +-
 examples/vite/src/Edges/EdgesExample.vue      |   3 +-
 examples/vite/src/Empty/EmptyExample.vue      |   3 +-
 .../vite/src/FloatingEdges/FloatingEdges.vue  |   3 +-
 examples/vite/src/Hidden/HiddenExample.vue    |   3 +-
 .../src/Interaction/InteractionExample.vue    |   3 +-
 .../vite/src/Layouting/LayoutingExample.vue   |   3 +-
 examples/vite/src/MultiFlows/Flow.vue         |   4 +-
 examples/vite/src/Nesting/GroupNode.vue       |   6 +-
 examples/vite/src/Nesting/Nesting.vue         |   5 +-
 examples/vite/src/Overview/Overview.vue       |  15 +-
 .../vite/src/Provider/ProviderExample.vue     |   3 +-
 .../UpdatableEdge/UpdatableEdgeExample.vue    |   3 +-
 .../vite/src/Validation/ValidationExample.vue |   2 +-
 packages/additional-components/.eslintrc.js   |   8 +
 packages/additional-components/.gitignore     |  99 +++++++
 packages/additional-components/.prettierrc    |   8 +
 packages/additional-components/README.md      |  84 ++++++
 packages/additional-components/package.json   |  52 ++++
 .../src/auto-imports.d.ts                     | 255 ++++++++++++++++++
 .../src/background}/Background.vue            |  16 +-
 .../src/background/index.ts                   |   2 +
 .../src/background/types.ts                   |  25 ++
 .../src/controls}/ControlButton.vue           |   0
 .../src/controls}/Controls.vue                |  14 +-
 .../src/controls}/icons/fitview.svg           |   0
 .../src/controls}/icons/lock.svg              |   0
 .../src/controls}/icons/minus.svg             |   0
 .../src/controls}/icons/plus.svg              |   0
 .../src/controls}/icons/unlock.svg            |   0
 .../src/controls/index.ts                     |   4 +
 .../src/controls/types.ts                     |  12 +
 packages/additional-components/src/index.ts   |   3 +
 .../src/minimap}/MiniMap.vue                  |  35 ++-
 .../src/minimap}/MiniMapNode.ts               |   2 +-
 .../src/minimap/index.ts                      |   4 +
 .../src/minimap/types.ts                      |  43 +++
 .../src/window-shims.d.ts                     |   3 +
 packages/additional-components/tsconfig.json  |  26 ++
 .../additional-components/tsconfig.node.json  |  11 +
 packages/additional-components/vite.config.ts |  48 ++++
 packages/vue-flow/package.json                |   1 -
 .../src/additional-components/index.ts        |   5 -
 packages/vue-flow/src/custom.d.ts             |   3 -
 packages/vue-flow/src/env.d.ts                |   1 -
 packages/vue-flow/src/index.ts                |   3 +-
 packages/vue-flow/src/types/components.ts     |  77 +-----
 packages/vue-flow/src/types/flow.ts           |   5 -
 packages/vue-flow/vite.config.ts              |   2 -
 pnpm-lock.yaml                                | 139 +++++++---
 82 files changed, 934 insertions(+), 222 deletions(-)
 create mode 100644 packages/additional-components/.eslintrc.js
 create mode 100644 packages/additional-components/.gitignore
 create mode 100644 packages/additional-components/.prettierrc
 create mode 100644 packages/additional-components/README.md
 create mode 100644 packages/additional-components/package.json
 create mode 100644 packages/additional-components/src/auto-imports.d.ts
 rename packages/{vue-flow/src/additional-components/Background => additional-components/src/background}/Background.vue (84%)
 create mode 100644 packages/additional-components/src/background/index.ts
 create mode 100644 packages/additional-components/src/background/types.ts
 rename packages/{vue-flow/src/additional-components/Controls => additional-components/src/controls}/ControlButton.vue (100%)
 rename packages/{vue-flow/src/additional-components/Controls => additional-components/src/controls}/Controls.vue (87%)
 rename packages/{vue-flow/src/assets => additional-components/src/controls}/icons/fitview.svg (100%)
 rename packages/{vue-flow/src/assets => additional-components/src/controls}/icons/lock.svg (100%)
 rename packages/{vue-flow/src/assets => additional-components/src/controls}/icons/minus.svg (100%)
 rename packages/{vue-flow/src/assets => additional-components/src/controls}/icons/plus.svg (100%)
 rename packages/{vue-flow/src/assets => additional-components/src/controls}/icons/unlock.svg (100%)
 create mode 100644 packages/additional-components/src/controls/index.ts
 create mode 100644 packages/additional-components/src/controls/types.ts
 create mode 100644 packages/additional-components/src/index.ts
 rename packages/{vue-flow/src/additional-components/MiniMap => additional-components/src/minimap}/MiniMap.vue (86%)
 rename packages/{vue-flow/src/additional-components/MiniMap => additional-components/src/minimap}/MiniMapNode.ts (96%)
 create mode 100644 packages/additional-components/src/minimap/index.ts
 create mode 100644 packages/additional-components/src/minimap/types.ts
 create mode 100644 packages/additional-components/src/window-shims.d.ts
 create mode 100644 packages/additional-components/tsconfig.json
 create mode 100644 packages/additional-components/tsconfig.node.json
 create mode 100644 packages/additional-components/vite.config.ts
 delete mode 100644 packages/vue-flow/src/additional-components/index.ts

diff --git a/docs/components/Repl.vue b/docs/components/Repl.vue
index d19e002c..d6af5c78 100644
--- a/docs/components/Repl.vue
+++ b/docs/components/Repl.vue
@@ -71,6 +71,7 @@ onMounted(async () => {
   // pre-set import map
   store.setImportMap({
     imports: {
+      '@vue-flow/additional-components': `${location.origin}/additional-components.es.js`,
       '@vue-flow/core': `${location.origin}/vue-flow.es.js`,
       ...additionalImports,
     },
diff --git a/docs/components/examples/basic/App.vue b/docs/components/examples/basic/App.vue
index c1ebdef3..3f4182e5 100644
--- a/docs/components/examples/basic/App.vue
+++ b/docs/components/examples/basic/App.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 
diff --git a/docs/components/examples/connectionline/App.vue b/docs/components/examples/connectionline/App.vue
index e66d5965..ea937db0 100644
--- a/docs/components/examples/connectionline/App.vue
+++ b/docs/components/examples/connectionline/App.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { Background, BackgroundVariant, VueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import CustomConnectionLine from './CustomConnectionLine.vue'
 
diff --git a/docs/components/examples/custom-node/App.vue b/docs/components/examples/custom-node/App.vue
index 0617bb45..9c8ac4d0 100644
--- a/docs/components/examples/custom-node/App.vue
+++ b/docs/components/examples/custom-node/App.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { ConnectionMode, MiniMap, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { MiniMap } from '@vue-flow/additional-components'
+import { ConnectionMode, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { computed, h, onMounted, ref } from 'vue'
 import ColorSelectorNode from './CustomNode.vue'
 import { presets } from './presets.js'
diff --git a/docs/components/examples/edges/App.vue b/docs/components/examples/edges/App.vue
index edc2f3b6..58a8e602 100644
--- a/docs/components/examples/edges/App.vue
+++ b/docs/components/examples/edges/App.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { Background, Controls, MarkerType, MiniMap, VueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { MarkerType, VueFlow } from '@vue-flow/core'
 import { h, ref } from 'vue'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
diff --git a/docs/components/examples/empty/App.vue b/docs/components/examples/empty/App.vue
index e4fd7d12..8531d4f3 100644
--- a/docs/components/examples/empty/App.vue
+++ b/docs/components/examples/empty/App.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
diff --git a/docs/components/examples/hidden/App.vue b/docs/components/examples/hidden/App.vue
index 5c69754a..d631393a 100644
--- a/docs/components/examples/hidden/App.vue
+++ b/docs/components/examples/hidden/App.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref, watchEffect } from 'vue'
 
 const isHidden = ref(false)
diff --git a/docs/components/examples/horizontal/App.vue b/docs/components/examples/horizontal/App.vue
index 35e7646a..8add1df2 100644
--- a/docs/components/examples/horizontal/App.vue
+++ b/docs/components/examples/horizontal/App.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 
diff --git a/docs/components/examples/nested/App.vue b/docs/components/examples/nested/App.vue
index 4531ffdf..720d73a1 100644
--- a/docs/components/examples/nested/App.vue
+++ b/docs/components/examples/nested/App.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
 import { onMounted } from 'vue'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
diff --git a/docs/components/examples/update-edge/App.vue b/docs/components/examples/update-edge/App.vue
index 4992c7be..fa487a4d 100644
--- a/docs/components/examples/update-edge/App.vue
+++ b/docs/components/examples/update-edge/App.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
+import { ConnectionMode, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
 import { ref } from 'vue'
 
 const elements = ref([
diff --git a/docs/components/home/flows/Additional.vue b/docs/components/home/flows/Additional.vue
index 18dca741..7fdd6463 100644
--- a/docs/components/home/flows/Additional.vue
+++ b/docs/components/home/flows/Additional.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { Elements } from '@vue-flow/core'
-import { Background, Controls, MiniMap, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
 const emit = defineEmits(['pane'])
 
diff --git a/docs/components/home/flows/Basic.vue b/docs/components/home/flows/Basic.vue
index e81e2872..56253210 100644
--- a/docs/components/home/flows/Basic.vue
+++ b/docs/components/home/flows/Basic.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { ClassFunc, GraphEdge, GraphNode, StyleFunc } from '@vue-flow/core'
-import { Background, ConnectionLineType, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
+import { ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls } from '@vue-flow/additional-components'
 import Cross from '~icons/mdi/window-close'
 
 const emit = defineEmits(['pane'])
diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index 53021582..24c28db0 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { Background, Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import confetti from 'canvas-confetti'
 import colors from 'windicss/colors'
+import { Background } from '@vue-flow/additional-components'
 import { cheer, fireworks } from './confetti'
 import Heart from '~icons/mdi/heart'
 
diff --git a/docs/components/home/flows/Nested.vue b/docs/components/home/flows/Nested.vue
index f1d6085e..0099328a 100644
--- a/docs/components/home/flows/Nested.vue
+++ b/docs/components/home/flows/Nested.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
+import { Background, Controls } from '@vue-flow/additional-components'
 
 const emit = defineEmits(['pane'])
 
diff --git a/docs/components/home/flows/RGB.vue b/docs/components/home/flows/RGB.vue
index 7e76e7f5..31ea15d3 100644
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import type { MiniMapNodeFunc } from '@vue-flow/core'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
+import type { MiniMapNodeFunc } from '@vue-flow/additional-components'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
 import CustomEdge from '../edges/Custom.vue'
 import RGBNode from '../nodes/Input.vue'
 import RGBOutputNode from '../nodes/Output.vue'
diff --git a/docs/package.json b/docs/package.json
index c10fa7aa..02692637 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,6 +14,7 @@
     "@algolia/client-search": "^4.14.2",
     "@animxyz/core": "^0.6.6",
     "@animxyz/vue3": "^0.6.7",
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@stackblitz/sdk": "^1.8.0",
     "@vue/repl": "1.1.2",
diff --git a/docs/src/.vitepress/copy-plugin.ts b/docs/src/.vitepress/copy-plugin.ts
index 6441c0e5..bc1fb7ec 100644
--- a/docs/src/.vitepress/copy-plugin.ts
+++ b/docs/src/.vitepress/copy-plugin.ts
@@ -2,19 +2,28 @@ import { existsSync, readFileSync } from 'fs'
 import { resolve } from 'path'
 import type { Plugin } from 'vite'
 
+const copyFile = (path: string, pkgName: string) => {
+  const filePath = resolve(__dirname, `${path}/${pkgName}`)
+  if (!existsSync(filePath)) {
+    throw new Error(`${pkgName} not built. ` + `Run "pnpm -w build" first.`)
+  }
+
+  ;(this as any).emitFile({
+    type: 'asset',
+    fileName: pkgName,
+    source: readFileSync(filePath, 'utf-8'),
+  })
+}
+
 export function copyVueFlowPlugin(): Plugin {
   return {
     name: 'copy-vue-flow',
     generateBundle() {
-      const filePath = resolve(__dirname, '../../node_modules/@vue-flow/core/dist/vue-flow.es.js')
-      if (!existsSync(filePath)) {
-        throw new Error(`@vue-flow/core/dist/vue-flow.es.js not built. ` + `Run "pnpm -w build" first.`)
-      }
-
-      this.emitFile({
-        type: 'asset',
-        fileName: 'vue-flow.es.js',
-        source: readFileSync(filePath, 'utf-8'),
+      ;[
+        { path: '../../node_modules/@vue-flow/core/dist/', pkgName: 'vue-flow.es.js' },
+        { path: '../../node_modules/@vue-flow/additional-components/dist/', pkgName: 'additional-components.es.js' },
+      ].forEach((pkg) => {
+        copyFile.call(this, pkg.path, pkg.pkgName)
       })
     },
   }
diff --git a/e2e/cypress/component/3-additional-components/background/App.vue b/e2e/cypress/component/3-additional-components/background/App.vue
index ef599e5c..a23135ac 100644
--- a/e2e/cypress/component/3-additional-components/background/App.vue
+++ b/e2e/cypress/component/3-additional-components/background/App.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { Background, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/additional-components'
 </script>
 
 <template>
diff --git a/e2e/cypress/component/3-additional-components/controls/App.vue b/e2e/cypress/component/3-additional-components/controls/App.vue
index b7a95961..057159bd 100644
--- a/e2e/cypress/component/3-additional-components/controls/App.vue
+++ b/e2e/cypress/component/3-additional-components/controls/App.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { Controls, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
 </script>
 
 <template>
diff --git a/e2e/cypress/component/3-additional-components/minimap/App.vue b/e2e/cypress/component/3-additional-components/minimap/App.vue
index 29dfe783..8a037f26 100644
--- a/e2e/cypress/component/3-additional-components/minimap/App.vue
+++ b/e2e/cypress/component/3-additional-components/minimap/App.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { MiniMap, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { MiniMap } from '@vue-flow/additional-components'
 
 defineProps({
   nodes: {
diff --git a/e2e/package.json b/e2e/package.json
index 596ae2bf..6d9abc1f 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -7,6 +7,7 @@
     "open": "cypress open"
   },
   "dependencies": {
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {
diff --git a/examples/nuxt3/components/BasicFlow.vue b/examples/nuxt3/components/BasicFlow.vue
index 8a125eee..d8c620cd 100644
--- a/examples/nuxt3/components/BasicFlow.vue
+++ b/examples/nuxt3/components/BasicFlow.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { initialElements } from './initial-elements.js'
 
 /**
diff --git a/examples/nuxt3/package.json b/examples/nuxt3/package.json
index d20df497..d0b7fc8a 100644
--- a/examples/nuxt3/package.json
+++ b/examples/nuxt3/package.json
@@ -9,6 +9,7 @@
     "dev": "nuxt dev"
   },
   "dependencies": {
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {
diff --git a/examples/quasar/package.json b/examples/quasar/package.json
index 3366036f..d019b5e3 100644
--- a/examples/quasar/package.json
+++ b/examples/quasar/package.json
@@ -10,6 +10,7 @@
     "lint": "eslint --ext .js,.ts,.vue ./"
   },
   "dependencies": {
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@quasar/extras": "^1.15.4",
     "quasar": "^2.9.2",
diff --git a/examples/quasar/src/components/BasicFlow.vue b/examples/quasar/src/components/BasicFlow.vue
index 5e84f4d9..bf1c3b53 100644
--- a/examples/quasar/src/components/BasicFlow.vue
+++ b/examples/quasar/src/components/BasicFlow.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { initialElements } from './initial-elements.js'
 
 /**
diff --git a/examples/vite/.eslintrc.js b/examples/vite/.eslintrc.js
index 3592be4d..65ad846b 100644
--- a/examples/vite/.eslintrc.js
+++ b/examples/vite/.eslintrc.js
@@ -2,6 +2,7 @@ module.exports = {
   rules: {
     'no-use-before-define': 0,
     'no-console': 0,
+    'no-unused-vars': 1,
   },
   extends: ['../../.eslintrc.js'],
 }
diff --git a/examples/vite/package.json b/examples/vite/package.json
index 14ea71c3..1f02b86c 100644
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@@ -7,6 +7,7 @@
     "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore ."
   },
   "dependencies": {
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {
diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
index ffabf25d..fffe8ffc 100644
--- a/examples/vite/src/Basic/Basic.vue
+++ b/examples/vite/src/Basic/Basic.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
diff --git a/examples/vite/src/Basic/BasicOptionsAPI.vue b/examples/vite/src/Basic/BasicOptionsAPI.vue
index d4aa61dd..b262ff2c 100644
--- a/examples/vite/src/Basic/BasicOptionsAPI.vue
+++ b/examples/vite/src/Basic/BasicOptionsAPI.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
-import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@vue-flow/core'
+import { VueFlow, addEdge, isNode } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',
diff --git a/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue b/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
index 261ad586..8d31b907 100644
--- a/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
+++ b/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { Background, BackgroundVariant, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant } from '@vue-flow/additional-components'
 import ConnectionLine from './ConnectionLine.vue'
 
 const elements = ref<Elements>([
diff --git a/examples/vite/src/CustomNode/CustomNode.vue b/examples/vite/src/CustomNode/CustomNode.vue
index df70735a..19097c94 100644
--- a/examples/vite/src/CustomNode/CustomNode.vue
+++ b/examples/vite/src/CustomNode/CustomNode.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Elements, Node, SnapGrid } from '@vue-flow/core'
-import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
+import { ConnectionMode, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
 import ColorSelectorNode from './ColorSelectorNode.vue'
 
 const elements = ref<Elements>([])
diff --git a/examples/vite/src/EdgeTypes/EdgeTypesExample.vue b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
index 34aa64bf..597e2985 100644
--- a/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
+++ b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { VueFlowStore } from '@vue-flow/core'
-import { Controls, MiniMap, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
 import { getElements } from './utils'
 
 const onLoad = (flowInstance: VueFlowStore) => {
diff --git a/examples/vite/src/Edges/CustomEdge.vue b/examples/vite/src/Edges/CustomEdge.vue
index 89c730d8..75929a45 100644
--- a/examples/vite/src/Edges/CustomEdge.vue
+++ b/examples/vite/src/Edges/CustomEdge.vue
@@ -15,7 +15,7 @@ interface CustomEdgeProps<T = any> extends EdgeProps<T> {
 }
 
 const props = defineProps<CustomEdgeProps>()
-const { id: storeId, applyEdgeChanges, getEdges } = useVueFlow()
+const { applyEdgeChanges, getEdges } = useVueFlow()
 
 const onClick = (evt: Event, id: string) => {
   applyEdgeChanges([{ type: 'remove', id }])
diff --git a/examples/vite/src/Edges/EdgesExample.vue b/examples/vite/src/Edges/EdgesExample.vue
index ec9bf530..73b2a004 100644
--- a/examples/vite/src/Edges/EdgesExample.vue
+++ b/examples/vite/src/Edges/EdgesExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Edge, Node } from '@vue-flow/core'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
diff --git a/examples/vite/src/Empty/EmptyExample.vue b/examples/vite/src/Empty/EmptyExample.vue
index b5b517ae..36f93365 100644
--- a/examples/vite/src/Empty/EmptyExample.vue
+++ b/examples/vite/src/Empty/EmptyExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Node } from '@vue-flow/core'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core/src/index'
+import { VueFlow, useVueFlow } from '@vue-flow/core/src/index'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
diff --git a/examples/vite/src/FloatingEdges/FloatingEdges.vue b/examples/vite/src/FloatingEdges/FloatingEdges.vue
index c84bbc61..38cbca11 100644
--- a/examples/vite/src/FloatingEdges/FloatingEdges.vue
+++ b/examples/vite/src/FloatingEdges/FloatingEdges.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Background, BackgroundVariant, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'
diff --git a/examples/vite/src/Hidden/HiddenExample.vue b/examples/vite/src/Hidden/HiddenExample.vue
index 1b8c1a2d..7ffb44c2 100644
--- a/examples/vite/src/Hidden/HiddenExample.vue
+++ b/examples/vite/src/Hidden/HiddenExample.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
 
 const isHidden = ref(false)
 
diff --git a/examples/vite/src/Interaction/InteractionExample.vue b/examples/vite/src/Interaction/InteractionExample.vue
index 825bb2b7..6f1f0c57 100644
--- a/examples/vite/src/Interaction/InteractionExample.vue
+++ b/examples/vite/src/Interaction/InteractionExample.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
 
 const {
   nodesDraggable,
diff --git a/examples/vite/src/Layouting/LayoutingExample.vue b/examples/vite/src/Layouting/LayoutingExample.vue
index 4eb2a34b..0046efec 100644
--- a/examples/vite/src/Layouting/LayoutingExample.vue
+++ b/examples/vite/src/Layouting/LayoutingExample.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
 import type { CoordinateExtent, Elements } from '@vue-flow/core'
-import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@vue-flow/core'
+import { ConnectionMode, Position, VueFlow, isNode } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
 import initialElements from './initial-elements'
 
 const dagreGraph = new dagre.graphlib.Graph()
diff --git a/examples/vite/src/MultiFlows/Flow.vue b/examples/vite/src/MultiFlows/Flow.vue
index 6b79c300..a90f077d 100644
--- a/examples/vite/src/MultiFlows/Flow.vue
+++ b/examples/vite/src/MultiFlows/Flow.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { Background, VueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/additional-components'
+
 const initialElements: Elements = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
diff --git a/examples/vite/src/Nesting/GroupNode.vue b/examples/vite/src/Nesting/GroupNode.vue
index 33c58d7c..4d656852 100644
--- a/examples/vite/src/Nesting/GroupNode.vue
+++ b/examples/vite/src/Nesting/GroupNode.vue
@@ -3,14 +3,16 @@ import { Handle, Position, getNodesInside, useVueFlow } from '@vue-flow/core'
 import type { NodeProps } from '@vue-flow/core'
 
 const props = defineProps<NodeProps>()
+
 const { onNodeDragStop, getNodes, viewport } = useVueFlow()
+
 onNodeDragStop(({ node }) => {
   const nodes = getNodesInside(
     getNodes.value,
     {
       ...props.dimensions,
-      x: props.computedPosition.x,
-      y: props.computedPosition.y,
+      x: props.position.x,
+      y: props.position.y,
     },
     viewport.value,
   )
diff --git a/examples/vite/src/Nesting/Nesting.vue b/examples/vite/src/Nesting/Nesting.vue
index 4c8366a6..dbe3f78f 100644
--- a/examples/vite/src/Nesting/Nesting.vue
+++ b/examples/vite/src/Nesting/Nesting.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
-const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
+const { onConnect, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,
   connectionMode: ConnectionMode.Loose,
   nodes: [
diff --git a/examples/vite/src/Overview/Overview.vue b/examples/vite/src/Overview/Overview.vue
index 656efa42..dfebd211 100644
--- a/examples/vite/src/Overview/Overview.vue
+++ b/examples/vite/src/Overview/Overview.vue
@@ -1,16 +1,7 @@
 <script lang="ts" setup>
-import type {
-  Connection,
-  Edge,
-  Elements,
-  FlowEvents,
-  Node,
-  SnapGrid,
-  Styles,
-  ViewpaneTransform,
-  VueFlowStore,
-} from '@vue-flow/core'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@vue-flow/core'
+import type { Connection, Edge, Elements, FlowEvents, Node, SnapGrid, Styles, VueFlowStore } from '@vue-flow/core'
+import { MarkerType, VueFlow, addEdge } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)
diff --git a/examples/vite/src/Provider/ProviderExample.vue b/examples/vite/src/Provider/ProviderExample.vue
index 87cdcd4c..b6e70a85 100644
--- a/examples/vite/src/Provider/ProviderExample.vue
+++ b/examples/vite/src/Provider/ProviderExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Elements, VueFlowStore } from '@vue-flow/core'
-import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
 import Sidebar from './Sidebar.vue'
 
 const onLoad = (flowInstance: VueFlowStore) => console.log('flow loaded:', flowInstance)
diff --git a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
index 8a5e084b..3d8a9998 100644
--- a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
 
 const initialElements: Elements = [
   {
diff --git a/examples/vite/src/Validation/ValidationExample.vue b/examples/vite/src/Validation/ValidationExample.vue
index 99a6c521..e2f254d5 100644
--- a/examples/vite/src/Validation/ValidationExample.vue
+++ b/examples/vite/src/Validation/ValidationExample.vue
@@ -4,7 +4,7 @@ import { VueFlow, useVueFlow } from '@vue-flow/core'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
 
-const { nodes, edges, addEdges } = useVueFlow({
+const { addEdges } = useVueFlow({
   nodes: [
     { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
     {
diff --git a/packages/additional-components/.eslintrc.js b/packages/additional-components/.eslintrc.js
new file mode 100644
index 00000000..98c0e4cb
--- /dev/null
+++ b/packages/additional-components/.eslintrc.js
@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    'no-use-before-define': 0,
+    'vue/no-setup-props-destructure': 0,
+  },
+  extends: ['../../.eslintrc.js'],
+  ignorePatterns: ['!**/*'],
+}
diff --git a/packages/additional-components/.gitignore b/packages/additional-components/.gitignore
new file mode 100644
index 00000000..d718f84d
--- /dev/null
+++ b/packages/additional-components/.gitignore
@@ -0,0 +1,99 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+.webpack
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+
+# Db-Data
+hasura/db_data/
+
+# Codegen types
+types/types.ts
+
+build
diff --git a/packages/additional-components/.prettierrc b/packages/additional-components/.prettierrc
new file mode 100644
index 00000000..02018a37
--- /dev/null
+++ b/packages/additional-components/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": false,
+  "quoteProps": "consistent",
+  "bracketSpacing": true,
+  "printWidth": 130
+}
diff --git a/packages/additional-components/README.md b/packages/additional-components/README.md
new file mode 100644
index 00000000..bad9049a
--- /dev/null
+++ b/packages/additional-components/README.md
@@ -0,0 +1,84 @@
+# Vue Flow Resizable Rotatable Node
+
+### Custom Node that can be resized and rotated
+
+## 🛠 Setup
+
+```bash
+# install
+$ yarn add @vue-flow/core-resize-rotate-node
+
+# or
+$ npm i --save @vue-flow/core-resize-rotate-node
+```
+
+## 🎮 Quickstart
+
+```vue
+
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { ResizeRotateNode } from '@vue-flow/core-resize-rotate-node'
+import initialElements from './initial-elements'
+
+const elements = ref(initialElements)
+</script>
+<template>
+  <div style="height: 300px">
+    <VueFlow v-model="elements">
+      <template #node-resize-rotate="props">
+        <ResizeRotateNode v-bind="props" />
+      </template>
+    </VueFlow>
+  </div>
+</template>
+```
+
+```js
+// initial-elements.js
+export default [
+  {
+    id: '1',
+    label: 'Node 1',
+    type: 'resize-rotate',
+    targetPosition: 'left',
+    sourcePosition: 'right',
+    position: {
+      x: 0,
+      y: 0,
+    },
+    data: {
+      // additional styles for the node
+      // cannot use the regular style tag as those apply to the node wrapper
+      style: {
+        background: 'rgb(255, 0, 114) none repeat scroll 0% 0%',
+        padding: '20px',
+        borderRadius: '20px',
+      },
+    },
+  },
+  {
+    id: '2',
+    label: 'Node 2',
+    type: 'resize-rotate',
+    targetPosition: 'left',
+    position: {
+      x: 330,
+      y: 50,
+    },
+    data: {
+      style: {
+        background: 'rgb(50, 188, 188) none repeat scroll 0% 0%',
+        padding: '20px',
+        borderRadius: '20px',
+      },
+    },
+  },
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    type: 'smoothstep',
+  },
+]
+```
diff --git a/packages/additional-components/package.json b/packages/additional-components/package.json
new file mode 100644
index 00000000..e5eff2c6
--- /dev/null
+++ b/packages/additional-components/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@vue-flow/additional-components",
+  "version": "0.0.1",
+  "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/background"
+  },
+  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
+  "bugs": {
+    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
+  },
+  "main": "./dist/vue-flow-additional-components.cjs.js",
+  "module": "./dist/vue-flow-additional-components.es.js",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/vue-flow-additional-components.iife.js",
+  "jsdelivr": "./dist/vue-flow-additional-components.iife.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build",
+    "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
+    "typedoc": "typedoc --options ./typedoc.json",
+    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path ../../.gitignore .",
+    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix ./dist",
+    "test": "exit 0"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.37",
+    "@vue-flow/core": "^0.4.41"
+  },
+  "dependencies": {
+    "@vueuse/core": "^9.3.0"
+  },
+  "devDependencies": {
+    "@vue-flow/core": "workspace:*",
+    "@vitejs/plugin-vue": "^2.3.4",
+    "unplugin-auto-import": "^0.11.2",
+    "vite": "^2.9.15",
+    "vite-svg-loader": "^3.6.0",
+    "vite-plugin-vue-type-imports": "0.2.0",
+    "vue-tsc": "^0.40.13"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}
diff --git a/packages/additional-components/src/auto-imports.d.ts b/packages/additional-components/src/auto-imports.d.ts
new file mode 100644
index 00000000..295c6681
--- /dev/null
+++ b/packages/additional-components/src/auto-imports.d.ts
@@ -0,0 +1,255 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const $$: typeof import('vue/macros')['$$']
+  const $: typeof import('vue/macros')['$']
+  const $computed: typeof import('vue/macros')['$computed']
+  const $customRef: typeof import('vue/macros')['$customRef']
+  const $ref: typeof import('vue/macros')['$ref']
+  const $shallowRef: typeof import('vue/macros')['$shallowRef']
+  const $toRef: typeof import('vue/macros')['$toRef']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const logicAnd: typeof import('@vueuse/core')['logicAnd']
+  const logicNot: typeof import('@vueuse/core')['logicNot']
+  const logicOr: typeof import('@vueuse/core')['logicOr']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClamp: typeof import('@vueuse/core')['useClamp']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}
diff --git a/packages/vue-flow/src/additional-components/Background/Background.vue b/packages/additional-components/src/background/Background.vue
similarity index 84%
rename from packages/vue-flow/src/additional-components/Background/Background.vue
rename to packages/additional-components/src/background/Background.vue
index bc2f81d1..3f28b315 100644
--- a/packages/vue-flow/src/additional-components/Background/Background.vue
+++ b/packages/additional-components/src/background/Background.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { BackgroundVariant } from '../../types'
-import { useVueFlow } from '../../composables'
-import type { BackgroundProps } from '../../types/components'
+import { useVueFlow } from '@vue-flow/core'
+import { BackgroundVariant } from './types'
+import type { BackgroundProps } from './types'
 
 const {
   variant = 'dots' as BackgroundVariant,
@@ -20,13 +20,13 @@ const defaultColors: Record<BackgroundVariant, string> = {
   [BackgroundVariant.Lines]: '#eee',
 }
 
-const { viewport } = $(useVueFlow())
+const { viewport } = useVueFlow()
 
 const background = $computed(() => {
-  const scaledGap = gap && gap * viewport.zoom
-  const xOffset = scaledGap && viewport.x % scaledGap
-  const yOffset = scaledGap && viewport.y % scaledGap
-  const bgSize = size * viewport.zoom
+  const scaledGap = gap && gap * viewport.value.zoom
+  const xOffset = scaledGap && viewport.value.x % scaledGap
+  const yOffset = scaledGap && viewport.value.y % scaledGap
+  const bgSize = size * viewport.value.zoom
 
   return {
     scaledGap,
diff --git a/packages/additional-components/src/background/index.ts b/packages/additional-components/src/background/index.ts
new file mode 100644
index 00000000..e7aaa4b7
--- /dev/null
+++ b/packages/additional-components/src/background/index.ts
@@ -0,0 +1,2 @@
+export { default as Background } from './Background.vue'
+export * from './types'
diff --git a/packages/additional-components/src/background/types.ts b/packages/additional-components/src/background/types.ts
new file mode 100644
index 00000000..487583ca
--- /dev/null
+++ b/packages/additional-components/src/background/types.ts
@@ -0,0 +1,25 @@
+export enum BackgroundVariant {
+  Lines = 'lines',
+  Dots = 'dots',
+}
+
+export interface BackgroundProps {
+  /** The background pattern variant, {@link BackgroundVariant} */
+  variant?: BackgroundVariant
+  /** Background pattern gap */
+  gap?: number
+  /** Background pattern size */
+  size?: number
+  /** Background pattern color */
+  patternColor?: string
+  /** Background color */
+  bgColor?: string
+  /** Background height */
+  height?: number
+  /** Background width */
+  width?: number
+  /** Background x-coordinate (offset x) */
+  x?: number
+  /** Background y-coordinate (offset y) */
+  y?: number
+}
diff --git a/packages/vue-flow/src/additional-components/Controls/ControlButton.vue b/packages/additional-components/src/controls/ControlButton.vue
similarity index 100%
rename from packages/vue-flow/src/additional-components/Controls/ControlButton.vue
rename to packages/additional-components/src/controls/ControlButton.vue
diff --git a/packages/vue-flow/src/additional-components/Controls/Controls.vue b/packages/additional-components/src/controls/Controls.vue
similarity index 87%
rename from packages/vue-flow/src/additional-components/Controls/Controls.vue
rename to packages/additional-components/src/controls/Controls.vue
index 8da261f0..61dd9664 100644
--- a/packages/vue-flow/src/additional-components/Controls/Controls.vue
+++ b/packages/additional-components/src/controls/Controls.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { useVueFlow } from '../../composables'
-import type { ControlProps } from '../../types/components'
+import { useVueFlow } from '@vue-flow/core'
+import type { ControlProps } from './types'
 import ControlButton from './ControlButton.vue'
-import PlusIcon from '~/assets/icons/plus.svg'
-import MinusIcon from '~/assets/icons/minus.svg'
-import FitView from '~/assets/icons/fitview.svg'
-import Lock from '~/assets/icons/lock.svg'
-import Unlock from '~/assets/icons/unlock.svg'
+import PlusIcon from './icons/plus.svg'
+import MinusIcon from './icons/minus.svg'
+import FitView from './icons/fitview.svg'
+import Lock from './icons/lock.svg'
+import Unlock from './icons/unlock.svg'
 
 const { showZoom = true, showFitView = true, showInteractive = true, fitViewParams } = defineProps<ControlProps>()
 
diff --git a/packages/vue-flow/src/assets/icons/fitview.svg b/packages/additional-components/src/controls/icons/fitview.svg
similarity index 100%
rename from packages/vue-flow/src/assets/icons/fitview.svg
rename to packages/additional-components/src/controls/icons/fitview.svg
diff --git a/packages/vue-flow/src/assets/icons/lock.svg b/packages/additional-components/src/controls/icons/lock.svg
similarity index 100%
rename from packages/vue-flow/src/assets/icons/lock.svg
rename to packages/additional-components/src/controls/icons/lock.svg
diff --git a/packages/vue-flow/src/assets/icons/minus.svg b/packages/additional-components/src/controls/icons/minus.svg
similarity index 100%
rename from packages/vue-flow/src/assets/icons/minus.svg
rename to packages/additional-components/src/controls/icons/minus.svg
diff --git a/packages/vue-flow/src/assets/icons/plus.svg b/packages/additional-components/src/controls/icons/plus.svg
similarity index 100%
rename from packages/vue-flow/src/assets/icons/plus.svg
rename to packages/additional-components/src/controls/icons/plus.svg
diff --git a/packages/vue-flow/src/assets/icons/unlock.svg b/packages/additional-components/src/controls/icons/unlock.svg
similarity index 100%
rename from packages/vue-flow/src/assets/icons/unlock.svg
rename to packages/additional-components/src/controls/icons/unlock.svg
diff --git a/packages/additional-components/src/controls/index.ts b/packages/additional-components/src/controls/index.ts
new file mode 100644
index 00000000..aece01fb
--- /dev/null
+++ b/packages/additional-components/src/controls/index.ts
@@ -0,0 +1,4 @@
+export { default as Controls } from './Controls.vue'
+export { default as ControlButton } from './ControlButton.vue'
+
+export * from './types'
diff --git a/packages/additional-components/src/controls/types.ts b/packages/additional-components/src/controls/types.ts
new file mode 100644
index 00000000..4b692321
--- /dev/null
+++ b/packages/additional-components/src/controls/types.ts
@@ -0,0 +1,12 @@
+import type { FitViewParams } 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
+}
diff --git a/packages/additional-components/src/index.ts b/packages/additional-components/src/index.ts
new file mode 100644
index 00000000..54ffd2a6
--- /dev/null
+++ b/packages/additional-components/src/index.ts
@@ -0,0 +1,3 @@
+export * from './background'
+export * from './controls'
+export * from './minimap'
diff --git a/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue b/packages/additional-components/src/minimap/MiniMap.vue
similarity index 86%
rename from packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue
rename to packages/additional-components/src/minimap/MiniMap.vue
index 9d0dd7be..4e517ba0 100644
--- a/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue
+++ b/packages/additional-components/src/minimap/MiniMap.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import type { GraphNode, MiniMapNodeFunc, ShapeRendering } from '../../types'
-import { useVueFlow, useWindow } from '../../composables'
-import { getBoundsofRects, getConnectedEdges, getRectOfNodes } from '../../utils'
-import type { MiniMapProps } from '../../types/components'
+import type { GraphNode } from '@vue-flow/core'
+import { getBoundsofRects, getConnectedEdges, getRectOfNodes, useVueFlow } from '@vue-flow/core'
+import type { MiniMapNodeFunc, MiniMapProps, ShapeRendering } from './types'
 import MiniMapNode from './MiniMapNode'
 
 const {
@@ -20,12 +19,10 @@ const emit = defineEmits(['nodeClick', 'nodeDblclick', 'nodeMouseenter', 'nodeMo
 
 const attrs: Record<string, any> = useAttrs()
 
-const window = useWindow()
-
 const defaultWidth = 200
 const defaultHeight = 150
 
-const { edges, viewport, dimensions, emits, getNodes } = $(useVueFlow())
+const { edges, viewport, dimensions, emits, getNodes } = useVueFlow()
 
 const elementWidth = $computed(() => width ?? attrs.style?.width ?? defaultWidth)
 
@@ -40,20 +37,18 @@ const nodeClassNameFunc = nodeClassName instanceof Function ? nodeClassName : ((
 
 const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
-const bb = $computed(() => {
-  return getRectOfNodes(getNodes)
-})
+const bb = $computed(() => getRectOfNodes(getNodes.value))
 
 const viewBB = $computed(() => ({
-  x: -viewport.x / viewport.zoom,
-  y: -viewport.y / viewport.zoom,
-  width: dimensions.width / viewport.zoom,
-  height: dimensions.height / viewport.zoom,
+  x: -viewport.value.x / viewport.value.zoom,
+  y: -viewport.value.y / viewport.value.zoom,
+  width: dimensions.value.width / viewport.value.zoom,
+  height: dimensions.value.height / viewport.value.zoom,
 }))
 
 const viewBox = $(
   controlledComputed($$(viewBB), () => {
-    const boundingRect = getNodes && getNodes.length ? getBoundsofRects(bb, viewBB) : viewBB
+    const boundingRect = getNodes && getNodes.value.length ? getBoundsofRects(bb, viewBB) : viewBB
     const scaledWidth = boundingRect.width / elementWidth
     const scaledHeight = boundingRect.height / elementHeight
     const viewScale = Math.max(scaledWidth, scaledHeight)
@@ -87,31 +82,31 @@ const d = controlledComputed($$(viewBox), () => {
 })
 
 const onNodeClick = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeClick(param)
   emit('nodeClick', param)
 }
 
 const onNodeDblClick = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeDoubleClick(param)
   emit('nodeDblclick', param)
 }
 
 const onNodeMouseEnter = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeMouseEnter(param)
   emit('nodeMouseenter', param)
 }
 
 const onNodeMouseMove = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeMouseMove(param)
   emit('nodeMousemove', param)
 }
 
 const onNodeMouseLeave = (event: MouseEvent, node: GraphNode) => {
-  const param = { event, node, connectedEdges: getConnectedEdges([node], edges) }
+  const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
   emits.miniMapNodeMouseLeave(param)
   emit('nodeMouseleave', param)
 }
diff --git a/packages/vue-flow/src/additional-components/MiniMap/MiniMapNode.ts b/packages/additional-components/src/minimap/MiniMapNode.ts
similarity index 96%
rename from packages/vue-flow/src/additional-components/MiniMap/MiniMapNode.ts
rename to packages/additional-components/src/minimap/MiniMapNode.ts
index b41dba29..3578028e 100644
--- a/packages/vue-flow/src/additional-components/MiniMap/MiniMapNode.ts
+++ b/packages/additional-components/src/minimap/MiniMapNode.ts
@@ -1,5 +1,5 @@
 import type { CSSProperties, FunctionalComponent } from 'vue'
-import type { MiniMapNodeProps } from '~/types'
+import type { MiniMapNodeProps } from './types'
 
 const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
   {
diff --git a/packages/additional-components/src/minimap/index.ts b/packages/additional-components/src/minimap/index.ts
new file mode 100644
index 00000000..54efbf34
--- /dev/null
+++ b/packages/additional-components/src/minimap/index.ts
@@ -0,0 +1,4 @@
+export { default as MiniMap } from './MiniMap.vue'
+export { default as MiniMapNode } from './MiniMapNode'
+
+export * from './types'
diff --git a/packages/additional-components/src/minimap/types.ts b/packages/additional-components/src/minimap/types.ts
new file mode 100644
index 00000000..702ccd03
--- /dev/null
+++ b/packages/additional-components/src/minimap/types.ts
@@ -0,0 +1,43 @@
+import type { Dimensions, GraphNode, XYPosition } from '@vue-flow/core'
+import type { CSSProperties } from 'vue'
+
+/** expects a node and returns a color value */
+export type MiniMapNodeFunc = (node: GraphNode) => string
+// hack for vue-type imports
+type MiniMapNodeFunc2 = (node: GraphNode) => string
+type MiniMapNodeFunc3 = (node: GraphNode) => string
+
+export type ShapeRendering = CSSProperties['shapeRendering']
+
+export interface MiniMapProps {
+  /** Node color, can be either a string or a string func that receives the current node */
+  nodeColor?: string | MiniMapNodeFunc
+  /** Node stroke color, can be either a string or a string func that receives the current node */
+  nodeStrokeColor?: string | MiniMapNodeFunc2
+  /** Additional node class name, can be either a string or a string func that receives the current node */
+  nodeClassName?: string | MiniMapNodeFunc3
+  /** Node border radius */
+  nodeBorderRadius?: number
+  /** Node stroke width */
+  nodeStrokeWidth?: number
+  /** Background color of minimap */
+  maskColor?: string
+
+  width?: number
+  height?: number
+}
+
+/** these props are passed to mini map node slots */
+export interface MiniMapNodeProps {
+  id: string
+  parentNode?: string
+  selected?: boolean
+  dragging?: boolean
+  position: XYPosition
+  dimensions: Dimensions
+  borderRadius?: number
+  color?: string
+  shapeRendering?: ShapeRendering
+  strokeColor?: string
+  strokeWidth?: number
+}
diff --git a/packages/additional-components/src/window-shims.d.ts b/packages/additional-components/src/window-shims.d.ts
new file mode 100644
index 00000000..bf00fe03
--- /dev/null
+++ b/packages/additional-components/src/window-shims.d.ts
@@ -0,0 +1,3 @@
+declare interface Window {
+  chrome: any
+}
diff --git a/packages/additional-components/tsconfig.json b/packages/additional-components/tsconfig.json
new file mode 100644
index 00000000..7a147657
--- /dev/null
+++ b/packages/additional-components/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "es2017",
+    "lib": ["DOM", "ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": false,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "types": ["vite/client", "vue/macros"],
+    "paths": {
+      "~/*": ["src/*"]
+    },
+  },
+  "include": ["./src"],
+  "exclude": ["node_modules", "dist"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/additional-components/tsconfig.node.json b/packages/additional-components/tsconfig.node.json
new file mode 100644
index 00000000..6dacac71
--- /dev/null
+++ b/packages/additional-components/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"],
+  "files": ["package.json"]
+}
diff --git a/packages/additional-components/vite.config.ts b/packages/additional-components/vite.config.ts
new file mode 100644
index 00000000..bc7dcef5
--- /dev/null
+++ b/packages/additional-components/vite.config.ts
@@ -0,0 +1,48 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import vueTypes from 'vite-plugin-vue-type-imports'
+import svgLoader from 'vite-svg-loader'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    dedupe: ['vue'],
+    extensions: ['.ts', '.vue'],
+  },
+  build: {
+    minify: 'esbuild',
+    emptyOutDir: false,
+    lib: {
+      formats: ['es', 'cjs', 'iife'],
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'vueFlowBackground',
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue', '@vue-flow/core'],
+      output: {
+        dir: './dist',
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          'vue': 'Vue',
+          '@vue-flow/core': 'VueFlow',
+        },
+      },
+    },
+  },
+  plugins: [
+    vue({
+      reactivityTransform: true,
+    }),
+    vueTypes(),
+    AutoImport({
+      imports: ['vue', '@vueuse/core', 'vue/macros'],
+      dts: 'src/auto-imports.d.ts',
+    }),
+    svgLoader(),
+  ],
+})
diff --git a/packages/vue-flow/package.json b/packages/vue-flow/package.json
index 060922c5..00f425c3 100644
--- a/packages/vue-flow/package.json
+++ b/packages/vue-flow/package.json
@@ -58,7 +58,6 @@
     "unplugin-auto-import": "^0.11.2",
     "vite": "^2.9.15",
     "vite-plugin-vue-type-imports": "0.2.0",
-    "vite-svg-loader": "^3.6.0",
     "vue-tsc": "^0.40.13"
   },
   "publishConfig": {
diff --git a/packages/vue-flow/src/additional-components/index.ts b/packages/vue-flow/src/additional-components/index.ts
deleted file mode 100644
index 244f62ba..00000000
--- a/packages/vue-flow/src/additional-components/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as MiniMap } from './MiniMap/MiniMap.vue'
-export { default as MiniMapNode } from './MiniMap/MiniMapNode'
-export { default as Controls } from './Controls/Controls.vue'
-export { default as ControlButton } from './Controls/ControlButton.vue'
-export { default as Background } from './Background/Background.vue'
diff --git a/packages/vue-flow/src/custom.d.ts b/packages/vue-flow/src/custom.d.ts
index 6222a348..95053934 100644
--- a/packages/vue-flow/src/custom.d.ts
+++ b/packages/vue-flow/src/custom.d.ts
@@ -1,5 +1,2 @@
 declare const __VUE_FLOW_VERSION__: string
 declare const __ENV__: string
-declare interface Window {
-  chrome?: any
-}
diff --git a/packages/vue-flow/src/env.d.ts b/packages/vue-flow/src/env.d.ts
index 3f271324..6cd694c5 100644
--- a/packages/vue-flow/src/env.d.ts
+++ b/packages/vue-flow/src/env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="vite/client" />
-/// <reference types="vite-svg-loader" />
 /// <reference types="vue/macros-global" />
 
 declare module '*.vue' {
diff --git a/packages/vue-flow/src/index.ts b/packages/vue-flow/src/index.ts
index bea16f81..73a9b608 100644
--- a/packages/vue-flow/src/index.ts
+++ b/packages/vue-flow/src/index.ts
@@ -26,6 +26,7 @@ export {
   graphPosToZoomedPos,
   getNodesInside,
   getMarkerId,
+  getBoundsofRects,
 } from './utils/graph'
 
 /**
@@ -48,6 +49,4 @@ export { default as useNode } from './composables/useNode'
 
 export { default as useEdge } from './composables/useEdge'
 
-export * from './additional-components'
-
 export * from './types'
diff --git a/packages/vue-flow/src/types/components.ts b/packages/vue-flow/src/types/components.ts
index af9a8189..36fc6483 100644
--- a/packages/vue-flow/src/types/components.ts
+++ b/packages/vue-flow/src/types/components.ts
@@ -1,8 +1,6 @@
 import type { CSSProperties, Component, DefineComponent, SVGAttributes, VNode } from 'vue'
-import type { BackgroundVariant, Dimensions, XYPosition } from './flow'
-import type { GraphNode, NodeProps } from './node'
+import type { NodeProps } from './node'
 import type { EdgeProps } from './edge'
-import type { FitViewParams } from './zoom'
 
 /** Global component names are components registered to the vue instance and are "autoloaded" by their string name */
 type GlobalComponentName = string
@@ -20,79 +18,6 @@ export type EdgeComponent = Component<EdgeProps> | DefineComponent<EdgeProps, an
 export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step' | 'simplebezier']: EdgeComponent }
 export type DefaultNodeTypes = { [key in 'input' | 'output' | 'default']: NodeComponent }
 
-export interface BackgroundProps {
-  /** The background pattern variant, {@link BackgroundVariant} */
-  variant?: BackgroundVariant
-  /** Background pattern gap */
-  gap?: number
-  /** Background pattern size */
-  size?: number
-  /** Background pattern color */
-  patternColor?: string
-  /** Background color */
-  bgColor?: string
-  /** Background height */
-  height?: number
-  /** Background width */
-  width?: number
-  /** Background x-coordinate (offset x) */
-  x?: number
-  /** Background y-coordinate (offset y) */
-  y?: number
-}
-
-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
-}
-
-/** expects a node and returns a color value */
-export type MiniMapNodeFunc = (node: GraphNode) => string
-// hack for vue-type imports
-type MiniMapNodeFunc2 = (node: GraphNode) => string
-type MiniMapNodeFunc3 = (node: GraphNode) => string
-
-export type ShapeRendering = CSSProperties['shapeRendering']
-
-export interface MiniMapProps {
-  /** Node color, can be either a string or a string func that receives the current node */
-  nodeColor?: string | MiniMapNodeFunc
-  /** Node stroke color, can be either a string or a string func that receives the current node */
-  nodeStrokeColor?: string | MiniMapNodeFunc2
-  /** Additional node class name, can be either a string or a string func that receives the current node */
-  nodeClassName?: string | MiniMapNodeFunc3
-  /** Node border radius */
-  nodeBorderRadius?: number
-  /** Node stroke width */
-  nodeStrokeWidth?: number
-  /** Background color of minimap */
-  maskColor?: string
-
-  width?: number
-  height?: number
-}
-
-/** these props are passed to mini map node slots */
-export interface MiniMapNodeProps {
-  id: string
-  parentNode?: string
-  selected?: boolean
-  dragging?: boolean
-  position: XYPosition
-  dimensions: Dimensions
-  borderRadius?: number
-  color?: string
-  shapeRendering?: ShapeRendering
-  strokeColor?: string
-  strokeWidth?: number
-}
-
 /** these props are passed to edge texts */
 export interface EdgeTextProps extends SVGAttributes {
   x: number
diff --git a/packages/vue-flow/src/types/flow.ts b/packages/vue-flow/src/types/flow.ts
index 28bdb4ae..7b91e650 100644
--- a/packages/vue-flow/src/types/flow.ts
+++ b/packages/vue-flow/src/types/flow.ts
@@ -58,11 +58,6 @@ export interface Rect extends Dimensions, XYPosition {}
 
 export type SnapGrid = [number, number]
 
-export enum BackgroundVariant {
-  Lines = 'lines',
-  Dots = 'dots',
-}
-
 export interface SelectionRect extends Rect {
   startX: number
   startY: number
diff --git a/packages/vue-flow/vite.config.ts b/packages/vue-flow/vite.config.ts
index 8e12a9cf..285f4436 100644
--- a/packages/vue-flow/vite.config.ts
+++ b/packages/vue-flow/vite.config.ts
@@ -2,7 +2,6 @@ import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueTypes from 'vite-plugin-vue-type-imports'
-import svgLoader from 'vite-svg-loader'
 import AutoImport from 'unplugin-auto-import/vite'
 import replace from '@rollup/plugin-replace'
 import pkg from './package.json'
@@ -43,7 +42,6 @@ export default defineConfig({
       reactivityTransform: true,
     }),
     vueTypes(),
-    svgLoader(),
     AutoImport({
       imports: ['vue', '@vueuse/core', 'vue/macros'],
       dts: 'src/auto-imports.d.ts',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4074dc7e..50ca3d69 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,11 +31,12 @@ importers:
       '@algolia/client-search': ^4.14.2
       '@animxyz/core': ^0.6.6
       '@animxyz/vue3': ^0.6.7
-      '@vue-flow/core': workspace:*
       '@iconify/json': ^2.1.95
       '@stackblitz/sdk': ^1.8.0
       '@types/canvas-confetti': ^1.4.3
       '@types/node': ^18.7.8
+      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/core': workspace:*
       '@vue/repl': 1.1.2
       '@windicss/plugin-scrollbar': ^1.2.3
       blobity: ^0.2.1
@@ -55,8 +56,9 @@ importers:
       '@algolia/client-search': 4.14.2
       '@animxyz/core': 0.6.6
       '@animxyz/vue3': 0.6.7_vue@3.2.37
-      '@vue-flow/core': link:../packages/vue-flow
       '@stackblitz/sdk': 1.8.0
+      '@vue-flow/additional-components': link:../packages/additional-components
+      '@vue-flow/core': link:../packages/vue-flow
       '@vue/repl': 1.1.2_vue@3.2.37
       blobity: 0.2.1_react@18.2.0+vue@3.2.37
       canvas-confetti: 1.5.1
@@ -79,10 +81,12 @@ importers:
 
   e2e:
     specifiers:
-      '@vue-flow/core': workspace:*
       '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/core': workspace:*
       cypress: ^10.9.0
     dependencies:
+      '@vue-flow/additional-components': link:../packages/additional-components
       '@vue-flow/core': link:../packages/vue-flow
     devDependencies:
       '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.40
@@ -90,27 +94,31 @@ importers:
 
   examples/nuxt3:
     specifiers:
+      '@vue-flow/additional-components': workspace:*
       '@vue-flow/core': workspace:*
       nuxt: 3.0.0-rc.11
     dependencies:
+      '@vue-flow/additional-components': link:../../packages/additional-components
       '@vue-flow/core': link:../../packages/vue-flow
     devDependencies:
       nuxt: 3.0.0-rc.11_rollup@2.79.1+vite@3.1.6
 
   examples/quasar:
     specifiers:
-      '@vue-flow/core': workspace:*
       '@quasar/app-vite': ^1.0.5
       '@quasar/extras': ^1.15.4
       '@types/node': ^18.8.3
       '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/core': workspace:*
       autoprefixer: ^10.4.12
       quasar: ^2.9.2
       vue: ^3.2.37
       vue-router: ^4.1.5
     dependencies:
-      '@vue-flow/core': link:../../packages/vue-flow
       '@quasar/extras': 1.15.4
+      '@vue-flow/additional-components': link:../../packages/additional-components
+      '@vue-flow/core': link:../../packages/vue-flow
       quasar: 2.9.2
       vue: 3.2.37
       vue-router: 4.1.5_vue@3.2.37
@@ -122,9 +130,10 @@ importers:
 
   examples/vite:
     specifiers:
-      '@vue-flow/core': workspace:*
       '@types/dagre': ^0.7.47
       '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/core': workspace:*
       dagre: ^0.8.5
       unplugin-auto-import: ^0.6.9
       vite: 2.9.15
@@ -133,6 +142,7 @@ importers:
       vue: ^3.2.37
       vue-router: ^4.1.5
     dependencies:
+      '@vue-flow/additional-components': link:../../packages/additional-components
       '@vue-flow/core': link:../../packages/vue-flow
     devDependencies:
       '@types/dagre': 0.7.47
@@ -145,11 +155,53 @@ importers:
       vue: 3.2.37
       vue-router: 4.1.5_vue@3.2.37
 
+  packages/additional-components:
+    specifiers:
+      '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/core': workspace:*
+      '@vueuse/core': ^9.3.0
+      unplugin-auto-import: ^0.11.2
+      vite: ^2.9.15
+      vite-plugin-vue-type-imports: 0.2.0
+      vite-svg-loader: ^3.6.0
+      vue: ^3.2.37
+      vue-tsc: ^0.40.13
+    dependencies:
+      '@vueuse/core': 9.3.0_vue@3.2.40
+      vue: 3.2.40
+    devDependencies:
+      '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.40
+      '@vue-flow/core': link:../vue-flow
+      unplugin-auto-import: 0.11.2_xpj53exthnjz7scid2fe37xep4
+      vite: 2.9.15
+      vite-plugin-vue-type-imports: 0.2.0_s5ljmfbyjcorxzsah2scwznsai
+      vite-svg-loader: 3.6.0
+      vue-tsc: 0.40.13_typescript@4.8.4
+
+  packages/example-pkg:
+    specifiers:
+      '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/core': workspace:*
+      unplugin-auto-import: ^0.11.2
+      vite: ^2.9.15
+      vite-plugin-vue-type-imports: 0.2.0
+      vue: ^3.2.37
+      vue-tsc: ^0.40.13
+    dependencies:
+      vue: 3.2.40
+    devDependencies:
+      '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.40
+      '@vue-flow/core': link:../vue-flow
+      unplugin-auto-import: 0.11.2_vite@2.9.15
+      vite: 2.9.15
+      vite-plugin-vue-type-imports: 0.2.0_s5ljmfbyjcorxzsah2scwznsai
+      vue-tsc: 0.40.13_typescript@4.8.4
+
   packages/pathfinding-edge:
     specifiers:
-      '@vue-flow/core': workspace:*
       '@types/pathfinding': ^0.0.5
       '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/core': workspace:*
       pathfinding: ^0.4.18
       perfect-arrows: ^0.3.7
       ts-patch: ^2.0.1
@@ -164,9 +216,9 @@ importers:
       perfect-arrows: 0.3.7
       vue: 3.2.37
     devDependencies:
-      '@vue-flow/core': link:../vue-flow
       '@types/pathfinding': 0.0.5
       '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.37
+      '@vue-flow/core': link:../vue-flow
       ts-patch: 2.0.1_typescript@4.8.4
       typescript-transform-paths: 3.3.1_typescript@4.8.4
       unplugin-auto-import: 0.11.2_vite@2.9.15
@@ -176,8 +228,8 @@ importers:
 
   packages/resize-rotate-node:
     specifiers:
-      '@vue-flow/core': workspace:*
       '@vitejs/plugin-vue': ^2.3.4
+      '@vue-flow/core': workspace:*
       '@vueuse/core': ^8.9.4
       ts-patch: ^2.0.1
       typescript-transform-paths: ^3.3.1
@@ -192,8 +244,8 @@ importers:
       vue: 3.2.37
       vue3-moveable: 0.4.9_@types+react@16.9.56
     devDependencies:
-      '@vue-flow/core': link:../vue-flow
       '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.37
+      '@vue-flow/core': link:../vue-flow
       ts-patch: 2.0.1_typescript@4.8.4
       typescript-transform-paths: 3.3.1_typescript@4.8.4
       unplugin-auto-import: 0.11.2_tz26lugnys4zsg624icbm2tdye
@@ -221,7 +273,6 @@ importers:
       unplugin-auto-import: ^0.11.2
       vite: ^2.9.15
       vite-plugin-vue-type-imports: 0.2.0
-      vite-svg-loader: ^3.6.0
       vue: ^3.2.25
       vue-tsc: ^0.40.13
     dependencies:
@@ -245,7 +296,6 @@ importers:
       unplugin-auto-import: 0.11.2_c3fy6twyvcjpks2csaqlppkdyi
       vite: 2.9.15
       vite-plugin-vue-type-imports: 0.2.0_ak2iftdnrkoetwl5f6az77kdzy
-      vite-svg-loader: 3.6.0
       vue-tsc: 0.40.13_typescript@4.7.4
 
 packages:
@@ -730,7 +780,6 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.19.3
-    dev: true
 
   /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.19.3:
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
@@ -2467,11 +2516,10 @@ packages:
   /@vue/compiler-core/3.2.40:
     resolution: {integrity: sha512-2Dc3Stk0J/VyQ4OUr2yEC53kU28614lZS+bnrCbFSAIftBJ40g/2yQzf4mPBiFuqguMB7hyHaujdgZAQ67kZYA==}
     dependencies:
-      '@babel/parser': 7.18.9
+      '@babel/parser': 7.19.3
       '@vue/shared': 3.2.40
       estree-walker: 2.0.2
       source-map: 0.6.1
-    dev: true
 
   /@vue/compiler-dom/3.2.37:
     resolution: {integrity: sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==}
@@ -2484,7 +2532,6 @@ packages:
     dependencies:
       '@vue/compiler-core': 3.2.40
       '@vue/shared': 3.2.40
-    dev: true
 
   /@vue/compiler-sfc/3.2.37:
     resolution: {integrity: sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==}
@@ -2503,7 +2550,7 @@ packages:
   /@vue/compiler-sfc/3.2.40:
     resolution: {integrity: sha512-tzqwniIN1fu1PDHC3CpqY/dPCfN/RN1thpBC+g69kJcrl7mbGiHKNwbA6kJ3XKKy8R6JLKqcpVugqN4HkeBFFg==}
     dependencies:
-      '@babel/parser': 7.18.9
+      '@babel/parser': 7.19.3
       '@vue/compiler-core': 3.2.40
       '@vue/compiler-dom': 3.2.40
       '@vue/compiler-ssr': 3.2.40
@@ -2513,7 +2560,6 @@ packages:
       magic-string: 0.25.9
       postcss: 8.4.16
       source-map: 0.6.1
-    dev: true
 
   /@vue/compiler-ssr/3.2.37:
     resolution: {integrity: sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==}
@@ -2526,7 +2572,6 @@ packages:
     dependencies:
       '@vue/compiler-dom': 3.2.40
       '@vue/shared': 3.2.40
-    dev: true
 
   /@vue/devtools-api/6.2.1:
     resolution: {integrity: sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==}
@@ -2543,12 +2588,11 @@ packages:
   /@vue/reactivity-transform/3.2.40:
     resolution: {integrity: sha512-HQUCVwEaacq6fGEsg2NUuGKIhUveMCjOk8jGHqLXPI2w6zFoPrlQhwWEaINTv5kkZDXKEnCijAp+4gNEHG03yw==}
     dependencies:
-      '@babel/parser': 7.18.9
+      '@babel/parser': 7.19.3
       '@vue/compiler-core': 3.2.40
       '@vue/shared': 3.2.40
       estree-walker: 2.0.2
       magic-string: 0.25.9
-    dev: true
 
   /@vue/reactivity/3.2.37:
     resolution: {integrity: sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==}
@@ -2565,7 +2609,6 @@ packages:
     resolution: {integrity: sha512-N9qgGLlZmtUBMHF9xDT4EkD9RdXde1Xbveb+niWMXuHVWQP5BzgRmE3SFyUBBcyayG4y1lhoz+lphGRRxxK4RA==}
     dependencies:
       '@vue/shared': 3.2.40
-    dev: true
 
   /@vue/repl/1.1.2_vue@3.2.37:
     resolution: {integrity: sha512-IYcoKZgwdn6spiVwGuWeXAbqAv3Nhjc/0dKEJ3BT5U6kV7KLLCwnuizjOvV8P+yFmtsfNkWbmWv9/56Pv5rH/w==}
@@ -2586,7 +2629,6 @@ packages:
     dependencies:
       '@vue/reactivity': 3.2.40
       '@vue/shared': 3.2.40
-    dev: true
 
   /@vue/runtime-dom/3.2.37:
     resolution: {integrity: sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==}
@@ -2601,7 +2643,6 @@ packages:
       '@vue/runtime-core': 3.2.40
       '@vue/shared': 3.2.40
       csstype: 2.6.20
-    dev: true
 
   /@vue/server-renderer/3.2.37_vue@3.2.37:
     resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==}
@@ -2620,7 +2661,6 @@ packages:
       '@vue/compiler-ssr': 3.2.40
       '@vue/shared': 3.2.40
       vue: 3.2.40
-    dev: true
 
   /@vue/shared/3.2.37:
     resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
@@ -2631,7 +2671,6 @@ packages:
 
   /@vue/shared/3.2.40:
     resolution: {integrity: sha512-0PLQ6RUtZM0vO3teRfzGi4ltLUO5aO+kLgwh4Um3THSR03rpQWLTuRCkuO5A41ITzwdWeKdPHtSARuPkoo5pCQ==}
-    dev: true
 
   /@vueuse/core/8.9.4_vue@3.2.37:
     resolution: {integrity: sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==}
@@ -2661,6 +2700,17 @@ packages:
       - '@vue/composition-api'
       - vue
 
+  /@vueuse/core/9.3.0_vue@3.2.40:
+    resolution: {integrity: sha512-64Rna8IQDWpdrJxgitDg7yv1yTp41ZmvV8zlLEylK4QQLWAhz1OFGZDPZ8bU4lwcGgbEJ2sGi2jrdNh4LttUSQ==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.15
+      '@vueuse/metadata': 9.3.0
+      '@vueuse/shared': 9.3.0_vue@3.2.40
+      vue-demi: 0.13.6_vue@3.2.40
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   /@vueuse/head/0.7.13_vue@3.2.40:
     resolution: {integrity: sha512-VHSla/0uOAUii/mz+NWLFKMrMbz/lQoYxEcpS/ri7drepYjdB5QdbTnD2KdOX8EmQM/b07qpjKanr7erGrd3XA==}
     peerDependencies:
@@ -2707,7 +2757,6 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: true
 
   /@windicss/config/1.8.7:
     resolution: {integrity: sha512-8n+/Y36j5L3rw2tgMdLjeGRuNV7VYfKoHoraLK6Bk9OJ1MTPd5vv7pekof/uOPWVV7WWjVeZ6CTO8SDbDDW3iw==}
@@ -9198,7 +9247,6 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /preact/10.10.0:
     resolution: {integrity: sha512-fszkg1iJJjq68I4lI8ZsmBiaoQiQHbxf1lNq+72EmC/mZOsFF5zn3k1yv9QGoFgIXzgsdSKtYymLJsrJPoamjQ==}
@@ -11084,6 +11132,29 @@ packages:
       - webpack
     dev: true
 
+  /unplugin-auto-import/0.11.2_xpj53exthnjz7scid2fe37xep4:
+    resolution: {integrity: sha512-1+VwBfn9dtiYv9SQLKP1AvZolUbK9xTVeAT+iOcEk4EHSFUlmIqBVLEKI76cifSQTLOJ3rZyPrEgptf3SZNLlQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@vueuse/core':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.5.2
+      '@rollup/pluginutils': 4.2.1
+      '@vueuse/core': 9.3.0_vue@3.2.40
+      local-pkg: 0.4.2
+      magic-string: 0.26.2
+      unimport: 0.6.7_vite@2.9.15
+      unplugin: 0.9.3_vite@2.9.15
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+    dev: true
+
   /unplugin-auto-import/0.6.9_vite@2.9.15:
     resolution: {integrity: sha512-IqgT7AoRrNQwNhiF/wDH3sMEDX8SqCYBEgJzwdg5441b5aiC5VwZz0J0wYqkaKu89YkZE9DG6rQ2JpFfZv1iiQ==}
     engines: {node: '>=14'}
@@ -11554,6 +11625,16 @@ packages:
       vue: 3.2.37
     dev: true
 
+  /vite-plugin-vue-type-imports/0.2.0_s5ljmfbyjcorxzsah2scwznsai:
+    resolution: {integrity: sha512-6rukBj1MP27WfsY5gqMZJg/Z8whK7f9oLbpICBDwzwOK2Oj7KkbP7IgFc2p3qInuB51SvUuxIIcJQVoUPaW6Nw==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.2.24
+      vue: ^3.2.24
+    dependencies:
+      '@vue/compiler-sfc': 3.2.40
+      vue: 3.2.40
+    dev: true
+
   /vite-plugin-windicss/1.8.7_vite@2.9.15:
     resolution: {integrity: sha512-/zwQ8+RV+MSkbG0IGqsEma6r2R01NzN/aNpNjJD7VVAkxAptNznqDXOObFTskkWfZ+9m6KJZCOuCPgAFtQIzEA==}
     peerDependencies:
@@ -11781,7 +11862,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.2.40
-    dev: true
 
   /vue-devtools-stub/0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
@@ -11861,7 +11941,6 @@ packages:
       '@vue/runtime-dom': 3.2.40
       '@vue/server-renderer': 3.2.40_vue@3.2.40
       '@vue/shared': 3.2.40
-    dev: true
 
   /vue3-moveable/0.4.9_@types+react@16.9.56:
     resolution: {integrity: sha512-B5hLiVBcvqvflOydKOPYKrQhRZRMqbgfbpD2ZEalFKVqxJm2YRcE5al48Bq6K8w5Fg1ce3YvndfuYYgpQ0Vcfw==}