diff --git a/.changeset/config.json b/.changeset/config.json
index 64ae8b92e..4fc867ef5 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -6,7 +6,7 @@
       "repo": "bcakmakoglu/vue-flow"
     }
   ],
-  "fixed": [],
+  "fixed": [["@vue-flow/*"]],
   "updateInternalDependencies": "patch",
   "snapshot": {
     "useCalculatedVersion": true
diff --git a/.changeset/cyan-melons-unite.md b/.changeset/cyan-melons-unite.md
new file mode 100644
index 000000000..b967de82a
--- /dev/null
+++ b/.changeset/cyan-melons-unite.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": major
+---
+
+Remove experimental features flag
diff --git a/.changeset/dry-guests-battle.md b/.changeset/dry-guests-battle.md
new file mode 100644
index 000000000..66bbe5efb
--- /dev/null
+++ b/.changeset/dry-guests-battle.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Move `MiniMap` component into core pkg.
diff --git a/.changeset/fresh-cars-live.md b/.changeset/fresh-cars-live.md
new file mode 100644
index 000000000..c4806f781
--- /dev/null
+++ b/.changeset/fresh-cars-live.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Move `Controls` component into core pkg.
diff --git a/.changeset/hip-melons-peel.md b/.changeset/hip-melons-peel.md
new file mode 100644
index 000000000..80e55c5b8
--- /dev/null
+++ b/.changeset/hip-melons-peel.md
@@ -0,0 +1,5 @@
+---
+'@vue-flow/core': major
+---
+
+Update handle styles and avoid using fixed pixel positions to offset handle position and instead use transform to align handles
diff --git a/.changeset/late-toys-play.md b/.changeset/late-toys-play.md
new file mode 100644
index 000000000..b612af306
--- /dev/null
+++ b/.changeset/late-toys-play.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Move `<Background>` component to core package
diff --git a/.changeset/nine-fishes-lick.md b/.changeset/nine-fishes-lick.md
new file mode 100644
index 000000000..d8df07e5d
--- /dev/null
+++ b/.changeset/nine-fishes-lick.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": major
+---
+
+Remove deprecated exports `addEdge`, `updateEdge` & `useZoomPanHelper`
diff --git a/.changeset/pink-toes-happen.md b/.changeset/pink-toes-happen.md
new file mode 100644
index 000000000..2c4a5490e
--- /dev/null
+++ b/.changeset/pink-toes-happen.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Move `<Controls>` component to core pkg
diff --git a/.changeset/pre.json b/.changeset/pre.json
new file mode 100644
index 000000000..ff925f80f
--- /dev/null
+++ b/.changeset/pre.json
@@ -0,0 +1,18 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@vue-flow/docs": "1.0.0",
+    "@vue-flow/examples-nuxt3": "0.0.0",
+    "@vue-flow/examples-quasar": "0.0.0",
+    "@vue-flow/examples-vite": "0.0.0",
+    "@vue-flow/core": "1.48.0",
+    "@vue-flow/node-resizer": "1.5.0",
+    "@vue-flow/node-toolbar": "1.1.1",
+    "@vue-flow/tests": "0.0.0",
+    "@tooling/eslint-config": "0.0.0",
+    "@tooling/tsconfig": "0.0.0",
+    "@tooling/vite-config": "0.0.0"
+  },
+  "changesets": []
+}
diff --git a/docs/components/DocsRepl.vue b/docs/components/DocsRepl.vue
index 8b042ed6a..777828a4a 100644
--- a/docs/components/DocsRepl.vue
+++ b/docs/components/DocsRepl.vue
@@ -11,8 +11,6 @@ const { vueFlowVersion } = useVueFlow()
 
 let css = `@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion}/dist/style.css';
 @import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion}/dist/theme-default.css';
-@import 'https://cdn.jsdelivr.net/npm/@vue-flow/controls@latest/dist/style.css';
-@import 'https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css';
 @import 'https://cdn.jsdelivr.net/npm/@vue-flow/node-resizer@latest/dist/style.css';
 
 html,
@@ -67,9 +65,6 @@ await store.setFiles(
 // pre-set import map
 store.setImportMap({
   imports: {
-    '@vue-flow/background': `${location.origin}/vue-flow-background.mjs`,
-    '@vue-flow/controls': `${location.origin}/vue-flow-controls.mjs`,
-    '@vue-flow/minimap': `${location.origin}/vue-flow-minimap.mjs`,
     '@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
     '@vue-flow/node-resizer': `${location.origin}/vue-flow-node-resizer.mjs`,
     '@vue-flow/node-toolbar': `${location.origin}/vue-flow-node-toolbar.mjs`,
diff --git a/docs/components/home/flows/Additional.vue b/docs/components/home/flows/Additional.vue
index b0a1334b6..1f0ab7ec0 100644
--- a/docs/components/home/flows/Additional.vue
+++ b/docs/components/home/flows/Additional.vue
@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { Elements } from '@vue-flow/core'
-import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, Controls, MiniMap, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const emit = defineEmits(['pane'])
 
@@ -98,7 +95,7 @@ onPaneReady((i) => emit('pane', i))
     <VueFlow>
       <Controls :show-interactive="false" />
       <MiniMap mask-color="rgba(16, 185, 129, 0.5)" class="transform scale-60 origin-bottom-right opacity-75" />
-      <Background variant="lines" pattern-color="#aaa" :gap="46" />
+      <Background variant="lines" color="#aaa" :gap="46" />
     </VueFlow>
   </div>
 
diff --git a/docs/components/home/flows/Basic.vue b/docs/components/home/flows/Basic.vue
index 84551d2bb..f929cd2bf 100644
--- a/docs/components/home/flows/Basic.vue
+++ b/docs/components/home/flows/Basic.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { ClassFunc, GraphEdge, GraphNode, StyleFunc } from '@vue-flow/core'
-import { ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
+import { Background, ConnectionLineType, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
 
 import Cross from '~icons/mdi/window-close'
 
diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index 538af3bb0..c10b05e61 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import { Background } from '@vue-flow/background'
 import Heart from '~icons/mdi/heart'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -190,8 +189,8 @@ function scrollTo() {
 
 <template>
   <VueFlow ref="el" :style="{ opacity: !!currentBreakpoint ? 1 : 0 }">
-    <Background id="dots" pattern-color="#aaa" :size="0.75" :gap="25" />
-    <Background id="lines" variant="lines" :pattern-color="isDark ? '#fff' : '#000'" :size="1" :gap="100" />
+    <Background id="dots" color="#aaa" :size="0.75" :gap="25" />
+    <Background id="lines" variant="lines" :color="isDark ? '#fff' : '#000'" :size="1" :gap="100" />
 
     <template #node-box="props">
       <template v-if="props.id === 'intro'">
diff --git a/docs/components/home/flows/Nested.vue b/docs/components/home/flows/Nested.vue
index 7d614ee03..596831de0 100644
--- a/docs/components/home/flows/Nested.vue
+++ b/docs/components/home/flows/Nested.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
+import { Background, ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
 
 const emit = defineEmits(['pane'])
@@ -76,7 +74,7 @@ onPaneReady((i) => emit('pane', i))
   >
     <VueFlow class="nested">
       <Controls class="md:(!left-auto !right-[10px])" />
-      <Background pattern-color="#aaa" class="!bg-gray-800" :gap="18" />
+      <Background color="#aaa" class="!bg-gray-800" :gap="18" />
     </VueFlow>
   </div>
 </template>
diff --git a/docs/components/home/flows/RGB.vue b/docs/components/home/flows/RGB.vue
index d411c851b..7642e093c 100644
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -1,10 +1,7 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import type { MiniMapNodeFunc } from '@vue-flow/core'
+import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
-import { Background, BackgroundVariant } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
-import type { MiniMapNodeFunc } from '@vue-flow/minimap'
 
 import CustomEdge from '../edges/Custom.vue'
 import RGBNode from '../nodes/Input.vue'
@@ -96,12 +93,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
       </template>
       <Controls class="hidden md:block" />
 
-      <Background
-        :variant="BackgroundVariant.Lines"
-        :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
-        :gap="48"
-        :size="1"
-      />
+      <Background variant="lines" :color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="48" :size="1" />
 
       <MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
     </VueFlow>
diff --git a/docs/examples/basic/App.vue b/docs/examples/basic/App.vue
index afb5322e4..1e87f2f2e 100644
--- a/docs/examples/basic/App.vue
+++ b/docs/examples/basic/App.vue
@@ -1,9 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import { ControlButton, Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, ControlButton, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 import { initialEdges, initialNodes } from './initial-elements.js'
 import Icon from './Icon.vue'
 
@@ -102,7 +99,7 @@ function toggleDarkMode() {
     :min-zoom="0.2"
     :max-zoom="4"
   >
-    <Background pattern-color="#aaa" :gap="16" />
+    <Background color="#aaa" :gap="16" />
 
     <MiniMap />
 
diff --git a/docs/examples/confirm-delete/App.vue b/docs/examples/confirm-delete/App.vue
index 376c98550..3a52856ee 100644
--- a/docs/examples/confirm-delete/App.vue
+++ b/docs/examples/confirm-delete/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { h, ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 import { useDialog } from './useDialog'
 import Dialog from './Dialog.vue'
 
diff --git a/docs/examples/custom-node/App.vue b/docs/examples/custom-node/App.vue
index 94ed8e637..00a95f73d 100644
--- a/docs/examples/custom-node/App.vue
+++ b/docs/examples/custom-node/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref, toRef } from 'vue'
-import { MiniMap } from '@vue-flow/minimap'
-import { Position, VueFlow } from '@vue-flow/core'
+import { MiniMap, Position, VueFlow } from '@vue-flow/core'
 import ColorSelectorNode from './ColorSelectorNode.vue'
 import OutputNode from './OutputNode.vue'
 import { presets } from './presets.js'
diff --git a/docs/examples/dnd/DropzoneBackground.vue b/docs/examples/dnd/DropzoneBackground.vue
index b78be6a4c..8065176e2 100644
--- a/docs/examples/dnd/DropzoneBackground.vue
+++ b/docs/examples/dnd/DropzoneBackground.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { Background } from '@vue-flow/background'
+import { Background } from '@vue-flow/core'
 </script>
 
 <template>
   <div class="dropzone-background">
-    <Background :size="2" :gap="20" pattern-color="#BDBDBD" />
+    <Background :size="2" :gap="20" color="#BDBDBD" />
 
     <div class="overlay">
       <slot />
diff --git a/docs/examples/edge-markers/App.vue b/docs/examples/edge-markers/App.vue
index d825eae44..c2874c87d 100644
--- a/docs/examples/edge-markers/App.vue
+++ b/docs/examples/edge-markers/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { MarkerType, VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, MarkerType, VueFlow } from '@vue-flow/core'
 import CustomEdge from './CustomEdge.vue'
 
 const nodes = ref([
diff --git a/docs/examples/edges/App.vue b/docs/examples/edges/App.vue
index 85bbe39ba..0ed4bd222 100644
--- a/docs/examples/edges/App.vue
+++ b/docs/examples/edges/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { h, ref } from 'vue'
-import { Background } from '@vue-flow/background'
-import { MarkerType, VueFlow } from '@vue-flow/core'
+import { Background, MarkerType, VueFlow } from '@vue-flow/core'
 import EdgeWithButton from './EdgeWithButton.vue'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdgeLabel from './CustomEdgeLabel.vue'
diff --git a/docs/examples/hidden/App.vue b/docs/examples/hidden/App.vue
index 64cded441..cc4b66e54 100644
--- a/docs/examples/hidden/App.vue
+++ b/docs/examples/hidden/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref, watch } from 'vue'
-import { Background } from '@vue-flow/background'
-import { Panel, VueFlow } from '@vue-flow/core'
+import { Background, Panel, VueFlow } from '@vue-flow/core'
 
 const nodes = ref([
   {
diff --git a/docs/examples/layout-simple/App.vue b/docs/examples/layout-simple/App.vue
index 2e2ed4f4a..810960b31 100644
--- a/docs/examples/layout-simple/App.vue
+++ b/docs/examples/layout-simple/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { nextTick, ref } from 'vue'
-import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import Icon from './Icon.vue'
 
 import { initialEdges, initialNodes } from './initial-elements.js'
diff --git a/docs/examples/layout/App.vue b/docs/examples/layout/App.vue
index 147dd1861..53d1b84e3 100644
--- a/docs/examples/layout/App.vue
+++ b/docs/examples/layout/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { nextTick, ref } from 'vue'
-import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import Icon from './Icon.vue'
 import ProcessNode from './ProcessNode.vue'
 import AnimationEdge from './AnimationEdge.vue'
diff --git a/docs/examples/loopback/App.vue b/docs/examples/loopback/App.vue
index 782b11772..fbe1d17a1 100644
--- a/docs/examples/loopback/App.vue
+++ b/docs/examples/loopback/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Background } from '@vue-flow/background'
-import { Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import LoopbackEdge from './LoopbackEdge.vue'
 
 const { updateEdgeData, updateNode } = useVueFlow()
diff --git a/docs/examples/math/App.vue b/docs/examples/math/App.vue
index a8567738b..cf37954a2 100644
--- a/docs/examples/math/App.vue
+++ b/docs/examples/math/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 import { initialEdges, initialNodes } from './initial-elements.js'
 import ValueNode from './ValueNode.vue'
 import OperatorNode from './OperatorNode.vue'
diff --git a/docs/examples/multi/Flow.vue b/docs/examples/multi/Flow.vue
index 7ffa82578..db9965804 100644
--- a/docs/examples/multi/Flow.vue
+++ b/docs/examples/multi/Flow.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Background } from '@vue-flow/background'
-import { Panel, VueFlow } from '@vue-flow/core'
+import { Background, Panel, VueFlow } from '@vue-flow/core'
 
 const nodes = ref([
   {
diff --git a/docs/examples/nested/App.vue b/docs/examples/nested/App.vue
index a10794297..99360aea3 100644
--- a/docs/examples/nested/App.vue
+++ b/docs/examples/nested/App.vue
@@ -1,9 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, Controls, MiniMap, VueFlow } from '@vue-flow/core'
 
 const nodes = ref([
   {
diff --git a/docs/examples/save-restore/App.vue b/docs/examples/save-restore/App.vue
index c1b3524f1..8bc6f9649 100644
--- a/docs/examples/save-restore/App.vue
+++ b/docs/examples/save-restore/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 import SaveRestoreControls from './Controls.vue'
 
 const nodes = ref([{ id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } }])
diff --git a/docs/examples/stress/App.vue b/docs/examples/stress/App.vue
index 727bb684d..bb1c00404 100644
--- a/docs/examples/stress/App.vue
+++ b/docs/examples/stress/App.vue
@@ -1,7 +1,5 @@
 <script setup>
-import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, MiniMap, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'
 
diff --git a/docs/examples/transition/App.vue b/docs/examples/transition/App.vue
index e37d8e47d..29950212b 100644
--- a/docs/examples/transition/App.vue
+++ b/docs/examples/transition/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import TransitionEdge from './TransitionEdge.vue'
 
 const { onInit } = useVueFlow()
diff --git a/docs/examples/update-edge/App.vue b/docs/examples/update-edge/App.vue
index 4d236af80..ed2819df5 100644
--- a/docs/examples/update-edge/App.vue
+++ b/docs/examples/update-edge/App.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Background } from '@vue-flow/background'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { updateEdge, addEdges } = useVueFlow()
 
diff --git a/docs/package.json b/docs/package.json
index d03c41df6..ccaf8176c 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,10 +15,7 @@
     "@stackblitz/sdk": "^1.11.0",
     "@vercel/analytics": "^1.3.2",
     "@vercel/speed-insights": "^1.0.14",
-    "@vue-flow/background": "workspace:*",
-    "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
-    "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-resizer": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*",
     "@vue/repl": "3.4.0",
diff --git a/docs/src/.vitepress/plugins/copy.ts b/docs/src/.vitepress/plugins/copy.ts
index b0f308ff6..56c17e926 100644
--- a/docs/src/.vitepress/plugins/copy.ts
+++ b/docs/src/.vitepress/plugins/copy.ts
@@ -13,7 +13,7 @@ function getPublicPath(fileName: string) {
 }
 
 function copyFiles(emit: Emit) {
-  ;['core', 'background', 'controls', 'minimap', 'node-resizer', 'node-toolbar'].forEach((name) => {
+  ;['core', 'node-resizer', 'node-toolbar'].forEach((name) => {
     const fileName = `vue-flow-${name}.mjs`
 
     const filePath = resolve(__dirname, getPkgPath(name, fileName))
diff --git a/docs/src/.vitepress/theme/index.ts b/docs/src/.vitepress/theme/index.ts
index 6f04f981c..9831000c4 100644
--- a/docs/src/.vitepress/theme/index.ts
+++ b/docs/src/.vitepress/theme/index.ts
@@ -2,8 +2,6 @@ import { inject } from '@vercel/analytics'
 import 'virtual:windi.css'
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
-import '@vue-flow/controls/dist/style.css'
-import '@vue-flow/minimap/dist/style.css'
 
 import Theme from 'vitepress/theme'
 import Layout from './layouts/default.vue'
diff --git a/docs/src/guide/components/background.md b/docs/src/guide/components/background.md
index b928281c5..5e0705f96 100644
--- a/docs/src/guide/components/background.md
+++ b/docs/src/guide/components/background.md
@@ -2,23 +2,13 @@
 
 Vue Flow comes with two background pattern variants: dots and lines. 
 
-## Installation
-
-```bash
-yarn add @vue-flow/background
-
-# or
-npm install @vue-flow/background
-```
-
 ## Usage
 
 To use the background simply pass the `Background` component as a child to the `VueFlow` component.
 
 ```vue
 <script setup>
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 </script>
 
 <template>
@@ -32,7 +22,7 @@ import { Background } from '@vue-flow/background'
 
 | Name         | Definition                            | Type                                                          | Optional | Default |
 |--------------|---------------------------------------|---------------------------------------------------------------|----------|---------|
-| variant      | Pattern variant                       | [BackgroundVariant](/typedocs/enumerations/BackgroundVariant) | true     | dots    |
+| variant      | Pattern variant                       | [BackgroundVariant](/typedocs/type-aliases/BackgroundVariant) | true     | dots    |
 | gap          | Pattern gap                           | number                                                        | true     | 10      |
 | size         | Pattern size                          | number                                                        | true     | 0.4     |
 | patternColor | Pattern color                         | string                                                        | true     | #81818a |
diff --git a/docs/src/guide/components/controls.md b/docs/src/guide/components/controls.md
index ac3871142..82fd1678a 100644
--- a/docs/src/guide/components/controls.md
+++ b/docs/src/guide/components/controls.md
@@ -2,15 +2,6 @@
 
 The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button.
 
-## Installation
-
-```bash
-yarn add @vue-flow/controls
-
-# or
-npm install @vue-flow/controls
-```
-
 ## Usage
 
 To use the controls simply pass the `Controls` component as a child to the `VueFlow` component.
@@ -21,11 +12,7 @@ Make sure you also import the styles as these are *not* part of the default them
 
 ```vue
 <script setup>
-import { VueFlow } from '@vue-flow/core'
-import { Controls } from '@vue-flow/controls'
-
-// import default controls styles
-import '@vue-flow/controls/dist/style.css'
+import { Controls, VueFlow } from '@vue-flow/core'
 </script>
 
 <template>
diff --git a/docs/src/guide/components/minimap.md b/docs/src/guide/components/minimap.md
index 927ed54ed..9336048d4 100644
--- a/docs/src/guide/components/minimap.md
+++ b/docs/src/guide/components/minimap.md
@@ -1,14 +1,5 @@
 # MiniMap
 
-## Installation
-
-```bash
-yarn add @vue-flow/minimap
-  
-# or
-npm install @vue-flow/minimap
-```
-
 ## Usage
 
 To use the minimap simply pass the `MiniMap` component as a child to the `VueFlow` component.
@@ -19,11 +10,7 @@ Make sure you also import the styles as these are *not* part of the default them
 
 ```vue
 <script setup>
-import { VueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
-
-// import default minimap styles
-import '@vue-flow/minimap/dist/style.css'
+import { MiniMap, VueFlow } from '@vue-flow/core'
 </script>
 
 <template>
diff --git a/docs/src/guide/edge.md b/docs/src/guide/edge.md
index 7cf4c446c..d717b9f9b 100644
--- a/docs/src/guide/edge.md
+++ b/docs/src/guide/edge.md
@@ -5,8 +5,7 @@ title: Edges
 <script setup>
 import LogosJavascript from '~icons/logos/javascript';
 import LogosTypescript from '~icons/logos/typescript-icon';
-import { VueFlow, Panel } from '@vue-flow/core';
-import { Background } from '@vue-flow/background';
+import { Background, Panel, VueFlow } from '@vue-flow/core';
 import Check from '~icons/mdi/check';
 import Close from '~icons/mdi/close';
 import { ref } from 'vue';
diff --git a/docs/src/guide/node.md b/docs/src/guide/node.md
index 05e43a2f7..d81bc7402 100644
--- a/docs/src/guide/node.md
+++ b/docs/src/guide/node.md
@@ -5,8 +5,7 @@ title: Nodes
 <script setup>
 import LogosJavascript from '~icons/logos/javascript';
 import LogosTypescript from '~icons/logos/typescript-icon';
-import { VueFlow, Panel } from '@vue-flow/core';
-import { Background } from '@vue-flow/background';
+import { Background, Panel, VueFlow } from '@vue-flow/core';
 import Check from '~icons/mdi/check';
 import Close from '~icons/mdi/close';
 import { ref, h } from 'vue';
diff --git a/docs/src/guide/theming.md b/docs/src/guide/theming.md
index 61a789c51..8ca56cdfd 100644
--- a/docs/src/guide/theming.md
+++ b/docs/src/guide/theming.md
@@ -5,8 +5,7 @@ title: Theming
 <script setup>
 import LogosJavascript from '~icons/logos/javascript';
 import { ref, h } from 'vue';
-import { Handle, Position, VueFlow } from '@vue-flow/core';
-import { Background } from '@vue-flow/background';
+import { Background, Handle, Position, VueFlow } from '@vue-flow/core';
 
 const CustomNode = (props) => h('div', [
   h(Handle, { connectable: false, type: 'target', position: Position.Top }),
diff --git a/docs/src/guide/utils/graph.md b/docs/src/guide/utils/graph.md
index 7bad19d4a..36aa7e8bf 100644
--- a/docs/src/guide/utils/graph.md
+++ b/docs/src/guide/utils/graph.md
@@ -70,71 +70,6 @@ const toggleClass = () => {
 </template>
 ```
 
-## [addEdge](/typedocs/functions/isEdge) (deprecated)
-
-::: warning
-In the composition API you should use [`addEdges`](/typedocs/type-aliases/AddEdges) of [`useVueFlow`](/guide/composables#usevueflow/)
-:::
-
-- Details:
-
-  Adds an edge to the elements array.
-
-- Example:
-
-```vue{12}
-<script setup>
-import { ref } from 'vue'
-import { VueFlow, addEdge } from '@vue-flow/core'
-
-const elements = ref([
-  { id: '1', position: { x: 250, y: 5 } },
-  { id: '2', position: { x: 100, y: 100 } },
-
-  { id: 'e1-2', source: '1', target: '2' },
-])
-
-const onConnect = (params) => {
-  addEdge(params, elements.value)
-}
-</script>
-<template>
-  <VueFlow v-model="elements" @connect="onConnect" />
-</template>
-```
-
-## [updateEdge](/typedocs/functions/updateEdge) (deprecated)
-
-::: warning
-In the composition API you should use [`updateEdge`](/typedocs/type-aliases/UpdateEdge) of [`useVueFlow`](/guide/composables#usevueflow/)
-:::
-
-- Details:
-
-  Updates an edge to a new source or target node.
-
-- Example:
-
-```vue{12}
-<script setup>
-import { VueFlow, updateEdge } from '@vue-flow/core'
-
-const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
-
-  { id: 'e1-2', source: '1', target: '2' },
-])
-
-const onEdgeUpdate = ({ edge, connection }) => {
-  elements.value = updateEdge(edge, connection, elements.value)
-}
-</script>
-<template>
-  <VueFlow v-model="elements" @edge-update="onEdgeUpdate" />
-</template>
-```
-
 ## [getOutgoers](/typedocs/functions/getOutgoers)
 
 - Details:
diff --git a/examples/nuxt3/app.vue b/examples/nuxt3/app.vue
index 38bf92c6b..86c7c2679 100644
--- a/examples/nuxt3/app.vue
+++ b/examples/nuxt3/app.vue
@@ -6,7 +6,6 @@
 @import './style.css';
 @import '@vue-flow/core/dist/style.css';
 @import '@vue-flow/core/dist/theme-default.css';
-@import '@vue-flow/controls/dist/style.css';
 
 html,
 body,
diff --git a/examples/nuxt3/components/Flow.vue b/examples/nuxt3/components/Flow.vue
index 320229360..06559d8a2 100644
--- a/examples/nuxt3/components/Flow.vue
+++ b/examples/nuxt3/components/Flow.vue
@@ -1,9 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import { ControlButton, Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, ControlButton, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 import { initialEdges, initialNodes } from './initial-elements.js'
 import Icon from './Icon.vue'
 
@@ -99,7 +96,7 @@ function toggleDarkMode() {
     :min-zoom="0.2"
     :max-zoom="4"
   >
-    <Background pattern-color="#aaa" :gap="16" />
+    <Background :gap="16" />
 
     <MiniMap />
 
diff --git a/examples/nuxt3/package.json b/examples/nuxt3/package.json
index 1d07c367f..f4b0ee079 100644
--- a/examples/nuxt3/package.json
+++ b/examples/nuxt3/package.json
@@ -7,10 +7,7 @@
     "lint": "eslint --ext .js,.ts,.vue ./"
   },
   "dependencies": {
-    "@vue-flow/background": "workspace:*",
-    "@vue-flow/controls": "workspace:*",
-    "@vue-flow/core": "workspace:*",
-    "@vue-flow/minimap": "workspace:*"
+    "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",
diff --git a/examples/quasar/package.json b/examples/quasar/package.json
index 4bfd51041..5f658dd48 100644
--- a/examples/quasar/package.json
+++ b/examples/quasar/package.json
@@ -8,10 +8,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.16.12",
-    "@vue-flow/background": "workspace:*",
-    "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
-    "@vue-flow/minimap": "workspace:*",
     "quasar": "^2.17.0",
     "vue": "^3.5.11",
     "vue-router": "^4.4.5"
diff --git a/examples/vite/index-cdn.html b/examples/vite/index-cdn.html
index c406a7c25..acb323590 100644
--- a/examples/vite/index-cdn.html
+++ b/examples/vite/index-cdn.html
@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@vue-flow/core@1.20.2/dist/vue-flow-core.iife.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@vue-flow/background@1.0.4/dist/vue-flow-background.iife.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/@vue-flow/core@1.20.2/dist/style.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/@vue-flow/core@1.20.2/dist/theme-default.min.css" rel="stylesheet">
 </head>
diff --git a/examples/vite/index.css b/examples/vite/index.css
index 1c22f076e..0f03b14f1 100644
--- a/examples/vite/index.css
+++ b/examples/vite/index.css
@@ -4,9 +4,6 @@
 /* import the default theme (optional) */
 @import 'node_modules/@vue-flow/core/dist/theme-default.css';
 
-@import '@vue-flow/controls/dist/style.css';
-@import '@vue-flow/minimap/dist/style.css';
-
 body {
   color: #111;
 }
diff --git a/examples/vite/package.json b/examples/vite/package.json
index e9c5b5914..25c6bc5df 100644
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@@ -8,10 +8,7 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@vue-flow/background": "workspace:*",
-    "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
-    "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-resizer": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*",
     "html-to-image": "^1.11.11",
diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
index 04f7684a4..5da15f6be 100644
--- a/examples/vite/src/Basic/Basic.vue
+++ b/examples/vite/src/Basic/Basic.vue
@@ -1,10 +1,6 @@
 <script lang="ts" setup>
-import type { Edge, Node, ValidConnectionFunc } from '@vue-flow/core'
-import { ConnectionMode, Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
-
-import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import type { Edge, Node } from '@vue-flow/core'
+import { Background, MiniMap, Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 
 const nodes = ref<Node[]>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
@@ -45,22 +41,10 @@ function resetViewport() {
 function toggleclass() {
   return nodes.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 }
-
-const isValidConnection: ValidConnectionFunc = (...args) => {
-  console.log(args)
-  return true
-}
 </script>
 
 <template>
-  <VueFlow
-    :nodes="nodes"
-    :edges="edges"
-    :connection-mode="ConnectionMode.Strict"
-    :is-valid-connection="isValidConnection"
-    fit-view-on-init
-    class="vue-flow-basic-example"
-  >
+  <VueFlow :nodes="nodes" :edges="edges" class="vue-flow-basic-example" fit-view-on-init>
     <Background />
     <MiniMap />
     <Controls />
diff --git a/examples/vite/src/Basic/BasicOptionsAPI.vue b/examples/vite/src/Basic/BasicOptionsAPI.vue
index 535084f98..dcbfd5d6c 100644
--- a/examples/vite/src/Basic/BasicOptionsAPI.vue
+++ b/examples/vite/src/Basic/BasicOptionsAPI.vue
@@ -1,10 +1,7 @@
 <script lang="ts">
 import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
-import { VueFlow, isNode } from '@vue-flow/core'
+import { Background, Controls, MiniMap, VueFlow, isNode } from '@vue-flow/core'
 
-import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
 import type { UnwrapNestedRefs } from 'vue'
 
 export default defineComponent({
diff --git a/examples/vite/src/ConfirmDelete/ConfirmDeleteExample.vue b/examples/vite/src/ConfirmDelete/ConfirmDeleteExample.vue
index 86c382454..e1b8286ef 100644
--- a/examples/vite/src/ConfirmDelete/ConfirmDeleteExample.vue
+++ b/examples/vite/src/ConfirmDelete/ConfirmDeleteExample.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { Edge, EdgeChange, Node, NodeChange } from '@vue-flow/core'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow, useVueFlow } from '@vue-flow/core'
 import { useDialog } from './useDialog'
 import Dialog from './Dialog.vue'
 
diff --git a/examples/vite/src/CustomNode/CustomNode.vue b/examples/vite/src/CustomNode/CustomNode.vue
index b5579ba81..df06b0619 100644
--- a/examples/vite/src/CustomNode/CustomNode.vue
+++ b/examples/vite/src/CustomNode/CustomNode.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import type { Elements, Node, SnapGrid } from '@vue-flow/core'
-import { Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
-
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
 
 import ColorSelectorNode from './ColorSelectorNode.vue'
 
diff --git a/examples/vite/src/EasyConnect/EasyConnect.vue b/examples/vite/src/EasyConnect/EasyConnect.vue
index 406af19a6..ac947ddd9 100644
--- a/examples/vite/src/EasyConnect/EasyConnect.vue
+++ b/examples/vite/src/EasyConnect/EasyConnect.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { Background } from '@vue-flow/background'
 import type { Node } from '@vue-flow/core'
-import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
 import CustomNode from './CustomNode.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import FloatingEdge from './FloatingEdge.vue'
@@ -54,7 +53,7 @@ onConnect(addEdges)
     :default-edge-options="defaultEdgeOptions"
     fit-view-on-init
   >
-    <Background pattern-color="#aaa" :gap="8" />
+    <Background :gap="8" />
 
     <template #node-custom="props">
       <CustomNode :id="props.id" />
diff --git a/examples/vite/src/EdgeTypes/EdgeTypesExample.vue b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
index fd1a222fc..64e28bcd1 100644
--- a/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
+++ b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow } from '@vue-flow/core'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Controls, MiniMap, VueFlow } from '@vue-flow/core'
 
 import { getElements } from './utils'
 
diff --git a/examples/vite/src/Edges/EdgesExample.vue b/examples/vite/src/Edges/EdgesExample.vue
index 6a7bcd6af..0805eeba5 100644
--- a/examples/vite/src/Edges/EdgesExample.vue
+++ b/examples/vite/src/Edges/EdgesExample.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, Controls, MiniMap, VueFlow } from '@vue-flow/core'
 
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
diff --git a/examples/vite/src/Empty/EmptyExample.vue b/examples/vite/src/Empty/EmptyExample.vue
index 31d9f1b20..ac3a17105 100644
--- a/examples/vite/src/Empty/EmptyExample.vue
+++ b/examples/vite/src/Empty/EmptyExample.vue
@@ -1,9 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-
-import { Background, BackgroundVariant } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { nodes, addNodes, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
@@ -28,7 +24,7 @@ function addRandomNode() {
   <VueFlow>
     <MiniMap />
     <Controls />
-    <Background :variant="BackgroundVariant.Lines" />
+    <Background variant="lines" />
 
     <button type="button" :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }" @click="addRandomNode">
       add node
diff --git a/examples/vite/src/FloatingEdges/FloatingEdges.vue b/examples/vite/src/FloatingEdges/FloatingEdges.vue
index c84100628..f2dd065d1 100644
--- a/examples/vite/src/FloatingEdges/FloatingEdges.vue
+++ b/examples/vite/src/FloatingEdges/FloatingEdges.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, BackgroundVariant } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
@@ -18,7 +15,7 @@ onConnect((params) => addEdges({ ...params, type: 'floating', markerEnd: MarkerT
 <template>
   <div class="floatingedges">
     <VueFlow fit-view-on-init>
-      <Background :variant="BackgroundVariant.Lines" :gap="24" />
+      <Background variant="lines" :gap="24" />
 
       <MiniMap />
 
diff --git a/examples/vite/src/Hidden/HiddenExample.vue b/examples/vite/src/Hidden/HiddenExample.vue
index 07fa6cf4f..1f3b8bdda 100644
--- a/examples/vite/src/Hidden/HiddenExample.vue
+++ b/examples/vite/src/Hidden/HiddenExample.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const isHidden = ref(false)
 
diff --git a/examples/vite/src/Interaction/InteractionExample.vue b/examples/vite/src/Interaction/InteractionExample.vue
index ca847bbe7..21e74c7a2 100644
--- a/examples/vite/src/Interaction/InteractionExample.vue
+++ b/examples/vite/src/Interaction/InteractionExample.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Controls, MiniMap, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const {
   nodesDraggable,
diff --git a/examples/vite/src/Layouting/LayoutingExample.vue b/examples/vite/src/Layouting/LayoutingExample.vue
index e2fede510..74469ce4f 100644
--- a/examples/vite/src/Layouting/LayoutingExample.vue
+++ b/examples/vite/src/Layouting/LayoutingExample.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { nextTick, ref } from 'vue'
-import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import Icon from './components/Icon.vue'
 import ProcessNode from './nodes/ProcessNode.vue'
 import ProcessEdge from './edges/ProcessEdge.vue'
diff --git a/examples/vite/src/Math/MathExample.vue b/examples/vite/src/Math/MathExample.vue
index 354a65c86..71bd8f162 100644
--- a/examples/vite/src/Math/MathExample.vue
+++ b/examples/vite/src/Math/MathExample.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 import { initialEdges, initialNodes } from './initialElements'
 import ValueNode from './ValueNode.vue'
 import OperatorNode from './OperatorNode.vue'
diff --git a/examples/vite/src/MultiFlows/Flow.vue b/examples/vite/src/MultiFlows/Flow.vue
index 57f85dd3f..c35b13ac8 100644
--- a/examples/vite/src/MultiFlows/Flow.vue
+++ b/examples/vite/src/MultiFlows/Flow.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 
 const initialElements: Elements = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
diff --git a/examples/vite/src/Nesting/Nesting.vue b/examples/vite/src/Nesting/Nesting.vue
index 688e99dd2..9335b4189 100644
--- a/examples/vite/src/Nesting/Nesting.vue
+++ b/examples/vite/src/Nesting/Nesting.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { onConnect, addEdges, addNodes, findNode } = useVueFlow({
   fitViewOnInit: true,
diff --git a/examples/vite/src/Overview/Overview.vue b/examples/vite/src/Overview/Overview.vue
index 46ad71276..45198b708 100644
--- a/examples/vite/src/Overview/Overview.vue
+++ b/examples/vite/src/Overview/Overview.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import type { Elements, FlowEvents, Node, SnapGrid, Styles, VueFlowStore } from '@vue-flow/core'
-import { MarkerType, VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background, Controls, MarkerType, MiniMap, VueFlow } from '@vue-flow/core'
 
 function onNodeDragStart(e: FlowEvents['nodeDragStart']) {
   return console.log('drag start', e)
@@ -174,6 +171,6 @@ const elements = ref<Elements>(initialElements)
   >
     <MiniMap :node-stroke-color="nodeStrokeColor" :node-color="nodeColor" :node-border-radius="2" />
     <Controls />
-    <Background color="#aaa" :gap="20" />
+    <Background variant="lines" />
   </VueFlow>
 </template>
diff --git a/examples/vite/src/Provider/ProviderExample.vue b/examples/vite/src/Provider/ProviderExample.vue
index 5021964e7..2d6a1cad3 100644
--- a/examples/vite/src/Provider/ProviderExample.vue
+++ b/examples/vite/src/Provider/ProviderExample.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Controls } from '@vue-flow/controls'
+import { Controls, VueFlow, useVueFlow } from '@vue-flow/core'
 
 import Sidebar from './Sidebar.vue'
 
diff --git a/examples/vite/src/Stress/StressExample.vue b/examples/vite/src/Stress/StressExample.vue
index 9d35fbdae..fc4ba9cca 100644
--- a/examples/vite/src/Stress/StressExample.vue
+++ b/examples/vite/src/Stress/StressExample.vue
@@ -1,7 +1,6 @@
 <script setup>
-import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Background, Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { nextTick, ref } from 'vue'
-import { Background } from '@vue-flow/background'
 import { getElements } from './utils'
 
 const { nodes, edges } = getElements(15, 15)
diff --git a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
index 47f6e325c..712ad19dc 100644
--- a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
-import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Controls } from '@vue-flow/controls'
-
-import '@vue-flow/controls/dist/style.css'
+import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const initialElements: Elements = [
   {
diff --git a/examples/vite/vite.config.ts b/examples/vite/vite.config.ts
index c5eb9043a..d2d45bec5 100644
--- a/examples/vite/vite.config.ts
+++ b/examples/vite/vite.config.ts
@@ -20,6 +20,6 @@ export default defineConfig({
     },
   },
   optimizeDeps: {
-    exclude: ['@vue-flow/core', '@vue-flow/minimap', '@vue-flow/controls', '@vue-flow/background'],
+    exclude: ['@vue-flow/core'],
   },
 })
diff --git a/packages/background/.eslintrc.js b/packages/background/.eslintrc.js
deleted file mode 100644
index e4b0b38cc..000000000
--- a/packages/background/.eslintrc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@tooling/eslint-config'],
-}
diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md
deleted file mode 100644
index ad06050b1..000000000
--- a/packages/background/CHANGELOG.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# @vue-flow/background
-
-## 1.3.2
-
-### Patch Changes
-
-- [#1692](https://github.com/bcakmakoglu/vue-flow/pull/1692) [`f08c15d`](https://github.com/bcakmakoglu/vue-flow/commit/f08c15da511ab3e6e6960e2e80c32d2870d6e755) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Set default offset value to `0`
-
-## 1.3.1
-
-### Patch Changes
-
-- [#1666](https://github.com/bcakmakoglu/vue-flow/pull/1666) [`a48659a`](https://github.com/bcakmakoglu/vue-flow/commit/a48659a9215ca037221e09fccab85ea04b1a50d6) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Start patterns at 0,0
-
-## 1.3.0
-
-### Minor Changes
-
-- [#1301](https://github.com/bcakmakoglu/vue-flow/pull/1301) [`b03608d`](https://github.com/bcakmakoglu/vue-flow/commit/b03608dc33ec5999c095ec8d3f80dbab7ec931ef) Thanks [@github-actions](https://github.com/apps/github-actions)! - Deprecate `bgColor` prop
-
-## 1.2.0
-
-### Minor Changes
-
-- [#861](https://github.com/bcakmakoglu/vue-flow/pull/861) [`6c243d8f`](https://github.com/bcakmakoglu/vue-flow/commit/6c243d8fc533cbe2030c6085f5673388769324e6) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Change default bg gap to 20 from 10
-
-### Patch Changes
-
-- [#865](https://github.com/bcakmakoglu/vue-flow/pull/865) [`9ce7bdc4`](https://github.com/bcakmakoglu/vue-flow/commit/9ce7bdc4908dda4dea299e5f469b252ac20a12ab) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `exports` field to package.json
-
-## 1.1.0
-
-### Minor Changes
-
-- [#782](https://github.com/bcakmakoglu/vue-flow/pull/782) [`59430fe3`](https://github.com/bcakmakoglu/vue-flow/commit/59430fe343f5e229864bef8cc857c4c7cc025491) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `lineWidth` prop to background component. Allows changing line bg stroke width
-
-- [#782](https://github.com/bcakmakoglu/vue-flow/pull/782) [`59430fe3`](https://github.com/bcakmakoglu/vue-flow/commit/59430fe343f5e229864bef8cc857c4c7cc025491) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Allow setting gap as number or number array (x,y)
-
-- [#782](https://github.com/bcakmakoglu/vue-flow/pull/782) [`59430fe3`](https://github.com/bcakmakoglu/vue-flow/commit/59430fe343f5e229864bef8cc857c4c7cc025491) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `offset` prop to background component. Allows for offsetting individual backgrounds to create a "multi" bg.
-
-## 1.0.5
-
-### Patch Changes
-
-- [#716](https://github.com/bcakmakoglu/vue-flow/pull/716) [`1685827d`](https://github.com/bcakmakoglu/vue-flow/commit/1685827d0ea1dc9864f95a1b3a54fbc43a296e5d) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fix umd pkg names and use the correct vue flow core umd pkg name in plugins
-
-## 1.0.4
-
-### Patch Changes
-
-- [#682](https://github.com/bcakmakoglu/vue-flow/pull/682) [`b08cb4d4`](https://github.com/bcakmakoglu/vue-flow/commit/b08cb4d45904c229d9ecda5e3cb477cbb7a6acaf) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add compat mode to components to avoid breaking when used with @vue/compat
-
-## 1.0.3
-
-### Patch Changes
-
-- [#616](https://github.com/bcakmakoglu/vue-flow/pull/616) [`b16e3564`](https://github.com/bcakmakoglu/vue-flow/commit/b16e3564708c5429ad594156341fa3e95f84d3b2) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Upgrade to vite 4 & update deps
-
-## 1.0.2
-
-### Patch Changes
-
-- [#588](https://github.com/bcakmakoglu/vue-flow/pull/588) [`4083ae0`](https://github.com/bcakmakoglu/vue-flow/commit/4083ae05d24dc68df7c77bfe2273a17237834cbf) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Correct pkg main field
-
-## 1.0.1
-
-### Patch Changes
-
-- [#569](https://github.com/bcakmakoglu/vue-flow/pull/569) [`5373c4d`](https://github.com/bcakmakoglu/vue-flow/commit/5373c4d2e15fc8c50755eb96701e27e173690476) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add container styles to background element to avoid pushing other elements behind background
-
-## 1.0.0
-
-### Major Changes
-
-- [#519](https://github.com/bcakmakoglu/vue-flow/pull/519) [`cbdd8cc9`](https://github.com/bcakmakoglu/vue-flow/commit/cbdd8cc99867a10ed7f6d82dd83c7f6f8574d865) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Move Background component into separate package (`@vue-flow/background`)
diff --git a/packages/background/README.md b/packages/background/README.md
deleted file mode 100644
index 177b637ce..000000000
--- a/packages/background/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Vue Flow: Background Component
-
-This is a background component for Vue Flow.
-It can be used to create a background in your canvas.
-
-## 🛠 Setup
-
-```bash
-# install
-$ yarn add @vue-flow/background
-
-# or
-$ npm i --save @vue-flow/background
-```
-
-## 🎮 Quickstart
-
-```vue
-<script setup>
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import initialElements from './initial-elements'
-
-// some nodes and edges
-const elements = ref(initialElements)
-</script>
-
-<template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
-    <Background />
-  </VueFlow>
-</template>
-```
diff --git a/packages/background/package.json b/packages/background/package.json
deleted file mode 100644
index b185f436a..000000000
--- a/packages/background/package.json
+++ /dev/null
@@ -1,73 +0,0 @@
-{
-  "name": "@vue-flow/background",
-  "version": "1.3.2",
-  "private": false,
-  "license": "MIT",
-  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bcakmakoglu/vue-flow/packages/plugins/background"
-  },
-  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
-  "bugs": {
-    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
-  },
-  "keywords": [
-    "vue",
-    "flow",
-    "diagram",
-    "editor",
-    "graph",
-    "node",
-    "link",
-    "port",
-    "slot",
-    "vue3",
-    "composition-api",
-    "vue-flow",
-    "vueflow",
-    "typescript"
-  ],
-  "main": "./dist/vue-flow-background.js",
-  "module": "./dist/vue-flow-background.mjs",
-  "types": "./dist/index.d.ts",
-  "unpkg": "./dist/vue-flow-background.iife.js",
-  "jsdelivr": "./dist/vue-flow-background.iife.js",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/vue-flow-background.mjs",
-      "require": "./dist/vue-flow-background.js"
-    }
-  },
-  "files": [
-    "dist",
-    "*.d.ts"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "dev": "pnpm types:watch & pnpm build:watch",
-    "build": "vite build",
-    "build:watch": "vite build --watch",
-    "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
-    "types:watch": "vue-tsc --declaration --emitDeclarationOnly --watch",
-    "lint": "eslint --ext .js,.ts,.vue ./",
-    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist",
-    "test": "exit 0"
-  },
-  "peerDependencies": {
-    "@vue-flow/core": "^1.23.0",
-    "vue": "^3.3.0"
-  },
-  "devDependencies": {
-    "@tooling/eslint-config": "workspace:*",
-    "@tooling/tsconfig": "workspace:*",
-    "@tooling/vite-config": "workspace:*",
-    "@vue-flow/core": "workspace:*",
-    "vue-tsc": "^1.8.16"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
-}
diff --git a/packages/background/src/types.ts b/packages/background/src/types.ts
deleted file mode 100644
index 637d396ab..000000000
--- a/packages/background/src/types.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * @deprecated - will be removed in the next major version. You can use simple string values for `variant` prop instead, i.e. `lines` or `dots`
- */
-export enum BackgroundVariant {
-  Lines = 'lines',
-  Dots = 'dots',
-}
-
-export type BackgroundVariantType = Lowercase<keyof typeof BackgroundVariant>
-
-export interface BackgroundProps {
-  id?: string
-  /** The background pattern variant */
-  variant?: BackgroundVariant | BackgroundVariantType
-  /** Background pattern gap */
-  gap?: number | number[]
-  /** Background pattern size */
-  size?: number
-  lineWidth?: number
-  /**
-   * @deprecated - will be removed in the next major version. Use `color` instead
-   * Background pattern color
-   */
-  patternColor?: string
-  /** Background pattern color */
-  color?: string
-  /**
-   * @deprecated - will be removed in the next major version. You can assign a bg color to `<VueFlow />` directly instead.
-   * Background color
-   */
-  bgColor?: string
-  /** @deprecated Background height */
-  height?: number
-  /** @deprecated Background width */
-  width?: number
-  /** Background x-coordinate (offset x) */
-  x?: number
-  /** Background y-coordinate (offset y) */
-  y?: number
-  /** Background offset */
-  offset?: number | [number, number]
-}
diff --git a/packages/background/tsconfig.json b/packages/background/tsconfig.json
deleted file mode 100644
index f02b0a03e..000000000
--- a/packages/background/tsconfig.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "@tooling/tsconfig/base",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "declarationDir": "./dist",
-    "types": [
-      "vite/client",
-      "vue/macros"
-    ]
-  },
-  "include": [
-    "./src"
-  ]
-}
diff --git a/packages/background/vite.config.ts b/packages/background/vite.config.ts
deleted file mode 100644
index 23fc90383..000000000
--- a/packages/background/vite.config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { resolve } from 'node:path'
-import { withConfig } from '@tooling/vite-config'
-
-export default withConfig({
-  build: {
-    lib: {
-      formats: ['es', 'cjs', 'iife'],
-      entry: resolve(__dirname, 'src/index.ts'),
-      fileName: 'vue-flow-background',
-      name: 'VueFlowBackground',
-    },
-  },
-})
diff --git a/packages/controls/.eslintrc.js b/packages/controls/.eslintrc.js
deleted file mode 100644
index e4b0b38cc..000000000
--- a/packages/controls/.eslintrc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@tooling/eslint-config'],
-}
diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md
deleted file mode 100644
index 5d1fe919b..000000000
--- a/packages/controls/CHANGELOG.md
+++ /dev/null
@@ -1,71 +0,0 @@
-# @vue-flow/controls
-
-## 1.1.3
-
-### Patch Changes
-
-- [#1912](https://github.com/bcakmakoglu/vue-flow/pull/1912) [`19d1d9d`](https://github.com/bcakmakoglu/vue-flow/commit/19d1d9d010d30c8fbaf7dafd112db583945a09ba) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `type="button"` to control buttons to avoid form submission if controls are nested in a form element.
-
-## 1.1.2
-
-### Patch Changes
-
-- [#1421](https://github.com/bcakmakoglu/vue-flow/pull/1421) [`69631f0`](https://github.com/bcakmakoglu/vue-flow/commit/69631f07dc6b367c6932b8642eb385b8dcc176ff) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Allow `PanelPositionType` as value for position
-
-## 1.1.1
-
-### Patch Changes
-
-- [#1261](https://github.com/bcakmakoglu/vue-flow/pull/1261) [`cff86ee`](https://github.com/bcakmakoglu/vue-flow/commit/cff86ee378c83e2ed656b03a66266feae49dd033) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Set full width on control button svgs
-
-## 1.1.0
-
-### Minor Changes
-
-- [#957](https://github.com/bcakmakoglu/vue-flow/pull/957) [`ee1ab495`](https://github.com/bcakmakoglu/vue-flow/commit/ee1ab495f9c33dcee71d6912c02bff1a41b44e6a) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Disable zoom-in / zoom-out btns when max or min zoom is reached
-
-### Patch Changes
-
-- [#952](https://github.com/bcakmakoglu/vue-flow/pull/952) [`095ab6af`](https://github.com/bcakmakoglu/vue-flow/commit/095ab6aff4c4c24f03d1d73987a19894a8d580b1) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - use OR operator to determine `isInteractive` state in controls component
-
-## 1.0.6
-
-### Patch Changes
-
-- [#894](https://github.com/bcakmakoglu/vue-flow/pull/894) [`c0a03c4`](https://github.com/bcakmakoglu/vue-flow/commit/c0a03c4339f05e3ae56299aaecd499838ba77838) Thanks [@github-actions](https://github.com/apps/github-actions)! - Remove border from controls
-
-## 1.0.5
-
-### Patch Changes
-
-- [#865](https://github.com/bcakmakoglu/vue-flow/pull/865) [`9ce7bdc4`](https://github.com/bcakmakoglu/vue-flow/commit/9ce7bdc4908dda4dea299e5f469b252ac20a12ab) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `exports` field to package.json
-
-## 1.0.4
-
-### Patch Changes
-
-- [#716](https://github.com/bcakmakoglu/vue-flow/pull/716) [`1685827d`](https://github.com/bcakmakoglu/vue-flow/commit/1685827d0ea1dc9864f95a1b3a54fbc43a296e5d) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fix umd pkg names and use the correct vue flow core umd pkg name in plugins
-
-## 1.0.3
-
-### Patch Changes
-
-- [#682](https://github.com/bcakmakoglu/vue-flow/pull/682) [`b08cb4d4`](https://github.com/bcakmakoglu/vue-flow/commit/b08cb4d45904c229d9ecda5e3cb477cbb7a6acaf) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add compat mode to components to avoid breaking when used with @vue/compat
-
-## 1.0.2
-
-### Patch Changes
-
-- [#616](https://github.com/bcakmakoglu/vue-flow/pull/616) [`b16e3564`](https://github.com/bcakmakoglu/vue-flow/commit/b16e3564708c5429ad594156341fa3e95f84d3b2) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Upgrade to vite 4 & update deps
-
-## 1.0.1
-
-### Patch Changes
-
-- [`c9d37fc`](https://github.com/bcakmakoglu/vue-flow/commit/c9d37fcad85e6f7643d3905d34a2d2c6566b3977) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Correct pkg main field
-
-## 1.0.0
-
-### Major Changes
-
-- [#521](https://github.com/bcakmakoglu/vue-flow/pull/521) [`f50644ff`](https://github.com/bcakmakoglu/vue-flow/commit/f50644ffd2237b50bd519c6eb5f0c86dbdaf010a) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Move Controls component into separate package (`@vue-flow/controls`)
diff --git a/packages/controls/README.md b/packages/controls/README.md
deleted file mode 100644
index 4cac4d97d..000000000
--- a/packages/controls/README.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# Vue Flow: Controls Component
-
-This is a control component for Vue Flow.
-It can be used to control the canvas interactions, like zooming in, zooming out, fitting the view and locking interactions.
-
-## 🛠 Setup
-
-```bash
-# install
-$ yarn add @vue-flow/controls
-
-# or
-$ npm i --save @vue-flow/controls
-```
-
-## 🎮 Quickstart
-
-```vue
-<script setup>
-import { VueFlow } from '@vue-flow/core'
-import { Controls } from '@vue-flow/controls'
-
-// import default controls styles
-import '@vue-flow/controls/dist/style.css'
-
-import initialElements from './initial-elements'
-
-
-// some nodes and edges
-const elements = ref(initialElements)
-</script>
-
-<template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
-    <Controls />
-  </VueFlow>
-</template>
-```
diff --git a/packages/controls/package.json b/packages/controls/package.json
deleted file mode 100644
index cc008dac0..000000000
--- a/packages/controls/package.json
+++ /dev/null
@@ -1,77 +0,0 @@
-{
-  "name": "@vue-flow/controls",
-  "version": "1.1.3",
-  "private": false,
-  "license": "MIT",
-  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bcakmakoglu/vue-flow/packages/plugins/controls"
-  },
-  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
-  "bugs": {
-    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
-  },
-  "keywords": [
-    "vue",
-    "flow",
-    "diagram",
-    "editor",
-    "graph",
-    "node",
-    "link",
-    "port",
-    "slot",
-    "vue3",
-    "composition-api",
-    "vue-flow",
-    "vueflow",
-    "typescript"
-  ],
-  "main": "./dist/vue-flow-controls.js",
-  "module": "./dist/vue-flow-controls.mjs",
-  "types": "./dist/index.d.ts",
-  "unpkg": "./dist/vue-flow-controls.iife.js",
-  "jsdelivr": "./dist/vue-flow-controls.iife.js",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/vue-flow-controls.mjs",
-      "require": "./dist/vue-flow-controls.js"
-    },
-    "./dist/style.css": "./dist/style.css"
-  },
-  "files": [
-    "dist",
-    "*.d.ts"
-  ],
-  "sideEffects": [
-    "*.css"
-  ],
-  "scripts": {
-    "dev": "pnpm types:watch & pnpm build:watch",
-    "build": "vite build",
-    "build:watch": "vite build --watch",
-    "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
-    "types:watch": "vue-tsc --declaration --emitDeclarationOnly --watch",
-    "lint": "eslint --ext .js,.ts,.vue ./",
-    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist",
-    "test": "exit 0"
-  },
-  "peerDependencies": {
-    "@vue-flow/core": "^1.23.0",
-    "vue": "^3.3.0"
-  },
-  "devDependencies": {
-    "@tooling/eslint-config": "workspace:*",
-    "@tooling/tsconfig": "workspace:*",
-    "@tooling/vite-config": "workspace:*",
-    "@vue-flow/core": "workspace:*",
-    "vite-svg-loader": "^4.0.0",
-    "vue-tsc": "^1.8.16"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
-}
diff --git a/packages/controls/src/style.css b/packages/controls/src/style.css
deleted file mode 100644
index 2845c781b..000000000
--- a/packages/controls/src/style.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.vue-flow__controls {
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-}
-
-.vue-flow__controls-button {
-  background: #fefefe;
-  border: none;
-  border-bottom: 1px solid #eee;
-  box-sizing: content-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  user-select: none;
-  padding: 5px;
-}
-
-.vue-flow__controls-button svg {
-  width: 100%;
-  max-width: 12px;
-  max-height: 12px;
-}
-
-.vue-flow__controls-button:hover {
-  background: #f4f4f4;
-}
-
-
-.vue-flow__controls-button:disabled {
-  pointer-events: none;
-}
-
-.vue-flow__controls-button:disabled svg {
-  fill-opacity: 0.4;
-}
diff --git a/packages/controls/src/types.ts b/packages/controls/src/types.ts
deleted file mode 100644
index 048ca62e3..000000000
--- a/packages/controls/src/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { FitViewParams, PanelPosition, PanelPositionType } from '@vue-flow/core'
-
-export interface ControlProps {
-  /** Show the zoom icon */
-  showZoom?: boolean
-  /** Show the fit-view icon */
-  showFitView?: boolean
-  /** Show the interactive icon */
-  showInteractive?: boolean
-  /** Params to use on fitView */
-  fitViewParams?: FitViewParams
-  /** Position of the controls {@link PanelPosition} */
-  position?: PanelPositionType | PanelPosition
-}
diff --git a/packages/controls/tsconfig.json b/packages/controls/tsconfig.json
deleted file mode 100644
index f02b0a03e..000000000
--- a/packages/controls/tsconfig.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "@tooling/tsconfig/base",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "declarationDir": "./dist",
-    "types": [
-      "vite/client",
-      "vue/macros"
-    ]
-  },
-  "include": [
-    "./src"
-  ]
-}
diff --git a/packages/controls/vite.config.ts b/packages/controls/vite.config.ts
deleted file mode 100644
index 48ff69d29..000000000
--- a/packages/controls/vite.config.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { resolve } from 'node:path'
-import { withConfig } from '@tooling/vite-config'
-import svgLoader from 'vite-svg-loader'
-
-export default withConfig({
-  build: {
-    lib: {
-      formats: ['es', 'cjs', 'iife'],
-      entry: resolve(__dirname, 'src/index.ts'),
-      fileName: 'vue-flow-controls',
-      name: 'VueFlowControls',
-    },
-  },
-  plugins: [svgLoader() as any],
-})
diff --git a/packages/core/package.json b/packages/core/package.json
index 311965cb8..457ac7b87 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -92,6 +92,7 @@
     "postcss-cli": "^10.1.0",
     "postcss-nested": "^6.0.1",
     "vite": "^4.4.11",
+    "vite-svg-loader": "^5.1.0",
     "vue-tsc": "^1.8.16"
   }
 }
diff --git a/packages/background/src/Background.vue b/packages/core/src/components/Background/Background.vue
similarity index 63%
rename from packages/background/src/Background.vue
rename to packages/core/src/components/Background/Background.vue
index ab7d0ca09..1657ab1ef 100644
--- a/packages/background/src/Background.vue
+++ b/packages/core/src/components/Background/Background.vue
@@ -1,29 +1,24 @@
 <script lang="ts" setup>
-import { useVueFlow } from '@vue-flow/core'
-import { computed, toRef } from 'vue'
-import { BackgroundVariant } from './types'
+import { computed } from 'vue'
+import { useVueFlow } from '../../composables/useVueFlow'
 import type { BackgroundProps } from './types'
 import { DefaultBgColors, DotPattern, LinePattern } from './patterns'
 
-const {
-  id,
-  variant = BackgroundVariant.Dots,
-  gap = 20,
-  size = 1,
-  lineWidth = 1,
-  height = 100,
-  width = 100,
-  x = 0,
-  y = 0,
-  bgColor,
-  patternColor: initialPatternColor,
-  color: _patternColor,
-  offset = 0,
-} = defineProps<BackgroundProps>()
+const props = withDefaults(defineProps<BackgroundProps>(), {
+  variant: 'dots',
+  gap: 20,
+  size: 1,
+  lineWidth: 1,
+  x: 0,
+  y: 0,
+  offset: 0,
+})
 
 const { id: vueFlowId, viewport } = useVueFlow()
 
 const background = computed(() => {
+  const { gap, offset, size } = props
+
   const zoom = viewport.value.zoom
   const [gapX, gapY] = Array.isArray(gap) ? gap : [gap, gap]
   const scaledGap: [number, number] = [gapX * zoom || 1, gapY * zoom || 1]
@@ -40,9 +35,9 @@ const background = computed(() => {
 })
 
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
-const patternId = toRef(() => `pattern-${vueFlowId}${id ? `-${id}` : ''}`)
+const patternId = computed(() => `pattern-${vueFlowId}${props.id ? `-${props.id}` : ''}`)
 
-const patternColor = toRef(() => _patternColor || initialPatternColor || DefaultBgColors[variant || BackgroundVariant.Dots])
+const patternColor = computed(() => props.color || DefaultBgColors[props.variant || 'dots'])
 </script>
 
 <script lang="ts">
@@ -53,13 +48,7 @@ export default {
 </script>
 
 <template>
-  <svg
-    class="vue-flow__background vue-flow__container"
-    :style="{
-      height: `${height > 100 ? 100 : height}%`,
-      width: `${width > 100 ? 100 : width}%`,
-    }"
-  >
+  <svg class="vue-flow__background vue-flow__container">
     <slot :id="patternId" name="pattern-container">
       <pattern
         :id="patternId"
@@ -71,17 +60,13 @@ export default {
         patternUnits="userSpaceOnUse"
       >
         <slot name="pattern">
-          <template v-if="variant === BackgroundVariant.Lines">
+          <template v-if="variant === 'lines'">
             <LinePattern :size="lineWidth" :color="patternColor" :dimensions="background.scaledGap" />
           </template>
 
-          <template v-else-if="variant === BackgroundVariant.Dots">
+          <template v-else-if="variant === 'dots'">
             <DotPattern :color="patternColor" :radius="background.size / 2" />
           </template>
-
-          <svg v-if="bgColor" height="100" width="100">
-            <rect width="100%" height="100%" :fill="bgColor" />
-          </svg>
         </slot>
       </pattern>
     </slot>
diff --git a/packages/background/src/index.ts b/packages/core/src/components/Background/index.ts
similarity index 100%
rename from packages/background/src/index.ts
rename to packages/core/src/components/Background/index.ts
diff --git a/packages/background/src/patterns.ts b/packages/core/src/components/Background/patterns.ts
similarity index 79%
rename from packages/background/src/patterns.ts
rename to packages/core/src/components/Background/patterns.ts
index 228175700..ffabf2c23 100644
--- a/packages/background/src/patterns.ts
+++ b/packages/core/src/components/Background/patterns.ts
@@ -1,6 +1,6 @@
 import type { FunctionalComponent } from 'vue'
 import { h } from 'vue'
-import { BackgroundVariant } from './types'
+import type { BackgroundVariant } from './types'
 
 interface LinePatternProps {
   dimensions: [number, number]
@@ -26,11 +26,11 @@ export const DotPattern: FunctionalComponent<DotPatternProps> = function ({ radi
 }
 
 export const Patterns = {
-  [BackgroundVariant.Lines]: LinePattern,
-  [BackgroundVariant.Dots]: DotPattern,
+  lines: LinePattern,
+  dots: DotPattern,
 }
 
 export const DefaultBgColors: Record<BackgroundVariant, string> = {
-  [BackgroundVariant.Dots]: '#81818a',
-  [BackgroundVariant.Lines]: '#eee',
+  lines: '#eee',
+  dots: '#91919a',
 }
diff --git a/packages/core/src/components/Background/types.ts b/packages/core/src/components/Background/types.ts
new file mode 100644
index 000000000..bdb869f99
--- /dev/null
+++ b/packages/core/src/components/Background/types.ts
@@ -0,0 +1,67 @@
+/**
+ * The Background can be either a dotted one or a lined one
+ *
+ * @default 'dots'
+ */
+export type BackgroundVariant = 'dots' | 'lines'
+
+export interface BackgroundProps {
+  /**
+   * `<Background>` component id
+   *
+   * This is necessary when you have multiple flows with backgrounds visible at the same time.
+   * If no id is explicitly assigned, an auto-generated one is used.
+   *
+   * @default `pattern-${vueFlowId}${id ? `-${id}` : ''}`
+   */
+  id?: string
+  /**
+   * The background pattern variant {@link BackgroundVariant}
+   *
+   * @default 'dots'
+   */
+  variant?: BackgroundVariant
+  /**
+   * The background pattern gap
+   *
+   * Can be either a number or [xGap: number, yGap: number], defining the gap on the X and Y axis respectively
+   *
+   * @default 20
+   */
+  gap?: number | number[]
+  /**
+   * Background pattern size
+   *
+   * @default 1
+   */
+  size?: number
+  /**
+   * @default 1
+   */
+  lineWidth?: number
+  /**
+   * The background pattern color
+   *
+   * This only changes the color of the *pattern*, not the background color itself.
+   *
+   * If you want to change the background color itself, you can apply a bg-color to the `<VueFlow>` element instead
+   */
+  color?: string
+  /**
+   * Background x-coordinate (offset x)
+   *
+   * @default 0
+   */
+  x?: number
+  /**
+   * Background y-coordinate (offset y)
+   * @default 0
+   */
+  y?: number
+  /**
+   * Background pattern offset
+   *
+   * @default 0
+   */
+  offset?: number | [number, number]
+}
diff --git a/packages/controls/src/ControlButton.vue b/packages/core/src/components/Controls/ControlButton.vue
similarity index 100%
rename from packages/controls/src/ControlButton.vue
rename to packages/core/src/components/Controls/ControlButton.vue
diff --git a/packages/controls/src/Controls.vue b/packages/core/src/components/Controls/Controls.vue
similarity index 85%
rename from packages/controls/src/Controls.vue
rename to packages/core/src/components/Controls/Controls.vue
index 15c3b97f2..ecc26be87 100644
--- a/packages/controls/src/Controls.vue
+++ b/packages/core/src/components/Controls/Controls.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { Panel, PanelPosition, useVueFlow } from '@vue-flow/core'
 import { toRef } from 'vue'
-import type { ControlProps } from './types'
+import { useVueFlow } from '../../composables'
+import Panel from '../Panel/Panel.vue'
+import type { ControlEmits, ControlProps } from './types'
 import ControlButton from './ControlButton.vue'
 import PlusIcon from './icons/plus.svg'
 import MinusIcon from './icons/minus.svg'
@@ -9,20 +10,14 @@ 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,
-  position = PanelPosition.BottomLeft,
-} = defineProps<ControlProps>()
-
-const emit = defineEmits<{
-  (event: 'zoomIn'): void
-  (event: 'zoomOut'): void
-  (event: 'fitView'): void
-  (event: 'interactionChange', active: boolean): void
-}>()
+const props = withDefaults(defineProps<ControlProps>(), {
+  showZoom: true,
+  showFitView: true,
+  showInteractive: true,
+  position: 'bottom-left',
+})
+
+const emit = defineEmits<ControlEmits>()
 
 const {
   nodesDraggable,
@@ -56,7 +51,7 @@ function onZoomOutHandler() {
 }
 
 function onFitViewHandler() {
-  fitView(fitViewParams)
+  fitView(props.fitViewParams)
 
   emit('fitView')
 }
diff --git a/packages/controls/src/icons/fitview.svg b/packages/core/src/components/Controls/icons/fitview.svg
similarity index 100%
rename from packages/controls/src/icons/fitview.svg
rename to packages/core/src/components/Controls/icons/fitview.svg
diff --git a/packages/controls/src/icons/lock.svg b/packages/core/src/components/Controls/icons/lock.svg
similarity index 100%
rename from packages/controls/src/icons/lock.svg
rename to packages/core/src/components/Controls/icons/lock.svg
diff --git a/packages/controls/src/icons/minus.svg b/packages/core/src/components/Controls/icons/minus.svg
similarity index 100%
rename from packages/controls/src/icons/minus.svg
rename to packages/core/src/components/Controls/icons/minus.svg
diff --git a/packages/controls/src/icons/plus.svg b/packages/core/src/components/Controls/icons/plus.svg
similarity index 100%
rename from packages/controls/src/icons/plus.svg
rename to packages/core/src/components/Controls/icons/plus.svg
diff --git a/packages/controls/src/icons/unlock.svg b/packages/core/src/components/Controls/icons/unlock.svg
similarity index 100%
rename from packages/controls/src/icons/unlock.svg
rename to packages/core/src/components/Controls/icons/unlock.svg
diff --git a/packages/controls/src/index.ts b/packages/core/src/components/Controls/index.ts
similarity index 86%
rename from packages/controls/src/index.ts
rename to packages/core/src/components/Controls/index.ts
index cd6cf13e9..aece01fb4 100644
--- a/packages/controls/src/index.ts
+++ b/packages/core/src/components/Controls/index.ts
@@ -1,5 +1,3 @@
-import './style.css'
-
 export { default as Controls } from './Controls.vue'
 export { default as ControlButton } from './ControlButton.vue'
 
diff --git a/packages/core/src/components/Controls/types.ts b/packages/core/src/components/Controls/types.ts
new file mode 100644
index 000000000..ef61972fc
--- /dev/null
+++ b/packages/core/src/components/Controls/types.ts
@@ -0,0 +1,41 @@
+import type { FitViewParams, PanelPositionType } from '../../types'
+
+export interface ControlProps {
+  /**
+   * Show the zoom control buttons (zoom-in and zoom-out)
+   *
+   * @default true
+   */
+  showZoom?: boolean
+  /**
+   * Show the fit view control button
+   *
+   * @default true
+   */
+  showFitView?: boolean
+  /**
+   * Show the interactivity toggle control button
+   *
+   * @default true
+   */
+  showInteractive?: boolean
+  /**
+   * {@link FitViewParams Parameters} to use when the fit view control button is pressed
+   *
+   * @default undefined
+   */
+  fitViewParams?: FitViewParams
+  /**
+   * The {@link PanelPositionType position} of the `<Controls>` panel
+   *
+   * @default 'bottom-left'
+   */
+  position?: PanelPositionType
+}
+
+export interface ControlEmits {
+  (event: 'zoomIn'): void
+  (event: 'zoomOut'): void
+  (event: 'fitView'): void
+  (event: 'interactionChange', isInteractive: boolean): void
+}
diff --git a/packages/minimap/src/MiniMap.vue b/packages/core/src/components/MiniMap/MiniMap.vue
similarity index 96%
rename from packages/minimap/src/MiniMap.vue
rename to packages/core/src/components/MiniMap/MiniMap.vue
index d21587a6c..b02af45ef 100644
--- a/packages/minimap/src/MiniMap.vue
+++ b/packages/core/src/components/MiniMap/MiniMap.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-import type { CoordinateExtent, GraphNode, PanelPosition } from '@vue-flow/core'
-import { Panel, getBoundsofRects, getConnectedEdges, getRectOfNodes, isMacOs, useVueFlow, wheelDelta } from '@vue-flow/core'
 import { zoom, zoomIdentity } from 'd3-zoom'
 import type { D3ZoomEvent } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
 import { computed, provide, ref, toRef, useAttrs, watchEffect } from 'vue'
+import type { CoordinateExtent, GraphNode } from '../../types'
+import { useVueFlow } from '../../composables'
+import { getBoundsofRects, getConnectedEdges, getRectOfNodes, isMacOs, wheelDelta } from '../../utils'
+import Panel from '../Panel/Panel.vue'
 import type { MiniMapEmits, MiniMapNodeFunc, MiniMapProps, MiniMapSlots, ShapeRendering } from './types'
 import MiniMapNode from './MiniMapNode.vue'
 import { Slots } from './types'
@@ -18,7 +20,7 @@ const {
   nodeBorderRadius = 5,
   nodeStrokeWidth = 2,
   maskColor = 'rgb(240, 240, 240, 0.6)',
-  position = 'bottom-right' as PanelPosition,
+  position = 'bottom-right',
   maskStrokeColor = 'none',
   maskStrokeWidth = 1,
   maskBorderRadius = 0,
@@ -218,14 +220,14 @@ export default {
 </script>
 
 <template>
-  <Panel :position="position" class="vue-flow__minimap" :class="{ pannable, zoomable }">
+  <Panel :class="{ pannable, zoomable }" :position="position" class="vue-flow__minimap">
     <svg
       ref="el"
       :width="elementWidth"
       :height="elementHeight"
       :viewBox="[viewBox.x, viewBox.y, viewBox.width, viewBox.height].join(' ')"
-      role="img"
       :aria-labelledby="`vue-flow__minimap-${id}`"
+      role="img"
       @click="onSvgClick"
     >
       <title v-if="ariaLabel" :id="`vue-flow__minimap-${id}`">{{ ariaLabel }}</title>
@@ -234,7 +236,6 @@ export default {
         v-for="node of getNodesInitialized"
         :id="node.id"
         :key="node.id"
-        f
         :position="node.computedPosition"
         :dimensions="node.dimensions"
         :selected="node.selected"
@@ -256,11 +257,11 @@ export default {
       />
 
       <path
-        class="vue-flow__minimap-mask"
         :d="d"
         :fill="maskColor"
         :stroke="maskStrokeColor"
         :stroke-width="maskStrokeWidth"
+        class="vue-flow__minimap-mask"
         fill-rule="evenodd"
       />
     </svg>
diff --git a/packages/minimap/src/MiniMapNode.vue b/packages/core/src/components/MiniMap/MiniMapNode.vue
similarity index 55%
rename from packages/minimap/src/MiniMapNode.vue
rename to packages/core/src/components/MiniMap/MiniMapNode.vue
index d6c01d61e..903e22ce8 100644
--- a/packages/minimap/src/MiniMapNode.vue
+++ b/packages/core/src/components/MiniMap/MiniMapNode.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue'
-import { inject, toRef, useAttrs } from 'vue'
+import { inject, useAttrs } from 'vue'
 import type { MiniMapNodeEmits, MiniMapNodeProps } from './types'
 import { Slots } from './types'
 
@@ -10,29 +9,7 @@ const emits = defineEmits<MiniMapNodeEmits>()
 
 const miniMapSlots = inject(Slots)!
 
-const attrs = useAttrs()
-
-const style = toRef(() => (attrs.style ?? {}) as CSSProperties)
-
-function onClick(event: MouseEvent) {
-  emits('click', event)
-}
-
-function onDblclick(event: MouseEvent) {
-  emits('dblclick', event)
-}
-
-function onMouseEnter(event: MouseEvent) {
-  emits('mouseenter', event)
-}
-
-function onMouseMove(event: MouseEvent) {
-  emits('mousemove', event)
-}
-
-function onMouseLeave(event: MouseEvent) {
-  emits('mouseleave', event)
-}
+const attrs = useAttrs() as Record<string, any>
 </script>
 
 <script lang="ts">
@@ -48,13 +25,13 @@ export default {
     <component
       :is="miniMapSlots[`node-${props.type}`]"
       v-if="miniMapSlots[`node-${props.type}`]"
-      v-bind="{ ...props, ...$attrs }"
+      v-bind="{ ...props, ...attrs }"
     />
 
     <rect
       v-else
       :id="id"
-      v-bind="$attrs"
+      v-bind="attrs"
       class="vue-flow__minimap-node"
       :class="{ selected, dragging }"
       :x="position.x"
@@ -63,15 +40,15 @@ export default {
       :ry="borderRadius"
       :width="dimensions.width"
       :height="dimensions.height"
-      :fill="color || (style.background as string) || style.backgroundColor"
+      :fill="color || (attrs.style?.background as string) || attrs.style?.backgroundColor"
       :stroke="strokeColor"
       :stroke-width="strokeWidth"
       :shape-rendering="shapeRendering"
-      @click="onClick"
-      @dblclick="onDblclick"
-      @mouseenter="onMouseEnter"
-      @mousemove="onMouseMove"
-      @mouseleave="onMouseLeave"
+      @click="emits('click', $event)"
+      @dblclick="emits('dblclick', $event)"
+      @mouseenter="emits('mouseenter', $event)"
+      @mousemove="emits('mousemove', $event)"
+      @mouseleave="emits('mouseleave', $event)"
     />
   </template>
 </template>
diff --git a/packages/minimap/src/index.ts b/packages/core/src/components/MiniMap/index.ts
similarity index 85%
rename from packages/minimap/src/index.ts
rename to packages/core/src/components/MiniMap/index.ts
index cc8f007ed..58fd02ece 100644
--- a/packages/minimap/src/index.ts
+++ b/packages/core/src/components/MiniMap/index.ts
@@ -1,5 +1,3 @@
-import './style.css'
-
 export { default as MiniMap } from './MiniMap.vue'
 export { default as MiniMapNode } from './MiniMapNode.vue'
 
diff --git a/packages/minimap/src/types.ts b/packages/core/src/components/MiniMap/types.ts
similarity index 92%
rename from packages/minimap/src/types.ts
rename to packages/core/src/components/MiniMap/types.ts
index 7d401287f..37b8fe4da 100644
--- a/packages/minimap/src/types.ts
+++ b/packages/core/src/components/MiniMap/types.ts
@@ -1,5 +1,5 @@
-import type { Dimensions, GraphNode, NodeMouseEvent, PanelPosition, PanelPositionType, XYPosition } from '@vue-flow/core'
 import type { CSSProperties, InjectionKey } from 'vue'
+import type { Dimensions, GraphNode, NodeMouseEvent, PanelPositionType, XYPosition } from '../../types'
 
 /** expects a node and returns a color value */
 export type MiniMapNodeFunc = (node: GraphNode) => string
@@ -24,7 +24,7 @@ export interface MiniMapProps {
   /** Border width of minimap mask */
   maskStrokeWidth?: number
   /** Position of the minimap {@link PanelPosition} */
-  position?: PanelPositionType | PanelPosition
+  position?: PanelPositionType
   /** Enable drag minimap to drag viewport */
   pannable?: boolean
   /** Enable zoom minimap to zoom viewport */
@@ -62,13 +62,7 @@ export interface MiniMapNodeProps {
 }
 
 export interface MiniMapEmits {
-  (
-    event: 'click',
-    params: {
-      event: MouseEvent
-      position: { x: number; y: number }
-    },
-  ): void
+  (event: 'click', params: { event: MouseEvent; position: { x: number; y: number } }): void
   (event: 'nodeClick', params: NodeMouseEvent): void
   (event: 'nodeDblclick', params: NodeMouseEvent): void
   (event: 'nodeMouseenter', params: NodeMouseEvent): void
diff --git a/packages/minimap/src/window-shims.d.ts b/packages/core/src/components/MiniMap/window-shims.d.ts
similarity index 100%
rename from packages/minimap/src/window-shims.d.ts
rename to packages/core/src/components/MiniMap/window-shims.d.ts
diff --git a/packages/core/src/composables/index.ts b/packages/core/src/composables/index.ts
index 5f6ba8c33..e7f6c2eff 100644
--- a/packages/core/src/composables/index.ts
+++ b/packages/core/src/composables/index.ts
@@ -10,4 +10,3 @@ export * from './useUpdateNodePositions'
 export * from './useViewportHelper'
 export * from './useVueFlow'
 export * from './useWatchProps'
-export * from './useZoomPanHelper'
diff --git a/packages/core/src/composables/useZoomPanHelper.ts b/packages/core/src/composables/useZoomPanHelper.ts
deleted file mode 100644
index 17d10aa05..000000000
--- a/packages/core/src/composables/useZoomPanHelper.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { toReactive } from '@vueuse/core'
-import type { ViewportFunctions } from '../types'
-import { useVueFlow } from './useVueFlow'
-import { useViewportHelper } from './useViewportHelper'
-
-/**
- * @deprecated use {@link useVueFlow} instead (all viewport functions are also available in {@link useVueFlow})
- */
-export function useZoomPanHelper(vueFlowId?: string): ViewportFunctions {
-  const state = useVueFlow({ id: vueFlowId })
-
-  const viewportHelper = useViewportHelper(toReactive(state))
-
-  return {
-    fitView: (params) => viewportHelper.value.fitView(params),
-    zoomIn: (transitionOpts) => viewportHelper.value.zoomIn(transitionOpts),
-    zoomOut: (transitionOpts) => viewportHelper.value.zoomOut(transitionOpts),
-    zoomTo: (zoomLevel, transitionOpts) => viewportHelper.value.zoomTo(zoomLevel, transitionOpts),
-    setViewport: (params, transitionOpts) => viewportHelper.value.setViewport(params, transitionOpts),
-    setTransform: (params, transitionOpts) => viewportHelper.value.setTransform(params, transitionOpts),
-    getViewport: () => viewportHelper.value.getViewport(),
-    getTransform: () => viewportHelper.value.getTransform(),
-    setCenter: (x, y, opts) => viewportHelper.value.setCenter(x, y, opts),
-    fitBounds: (params, opts) => viewportHelper.value.fitBounds(params, opts),
-    project: (params) => viewportHelper.value.project(params),
-  }
-}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index cc2ecf14d..06c117794 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -18,6 +18,10 @@ export { default as BaseEdge } from './components/Edges/BaseEdge.vue'
 export { default as EdgeText } from './components/Edges/EdgeText.vue'
 export { default as EdgeLabelRenderer } from './components/Edges/EdgeLabelRenderer.vue'
 
+export * from './components/Background'
+export * from './components/Controls'
+export * from './components/MiniMap'
+
 export {
   getBezierPath,
   getSimpleBezierPath,
@@ -32,8 +36,6 @@ export {
   isEdge,
   isGraphNode,
   isGraphEdge,
-  addEdge,
-  updateEdge,
   getOutgoers,
   getIncomers,
   getConnectedEdges,
@@ -41,8 +43,6 @@ export {
   getRectOfNodes,
   pointToRendererPoint,
   rendererPointToPoint,
-  /** @deprecated - will be removed in the next major version, use `rendererPointToPoint` instead */
-  rendererPointToPoint as graphPosToZoomedPos,
   getNodesInside,
   getMarkerId,
   getBoundsofRects,
@@ -64,7 +64,6 @@ export { defaultEdgeTypes, defaultNodeTypes } from './utils/defaultNodesEdges'
 
 export { VueFlow as VueFlowInjection, NodeId as NodeIdInjection } from './context'
 
-export { useZoomPanHelper } from './composables/useZoomPanHelper'
 export { useVueFlow } from './composables/useVueFlow'
 export { useHandle } from './composables/useHandle'
 export { useNode } from './composables/useNode'
diff --git a/packages/core/src/style.css b/packages/core/src/style.css
index 2cc7351cd..6ace2f0d3 100644
--- a/packages/core/src/style.css
+++ b/packages/core/src/style.css
@@ -240,3 +240,57 @@
     stroke-dashoffset: 10;
   }
 }
+
+.vue-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+
+.vue-flow__controls-button {
+  background: #fefefe;
+  border: none;
+  border-bottom: 1px solid #eee;
+  box-sizing: content-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  user-select: none;
+  padding: 5px;
+}
+
+.vue-flow__controls-button svg {
+  width: 100%;
+  max-width: 12px;
+  max-height: 12px;
+}
+
+.vue-flow__controls-button:hover {
+  background: #f4f4f4;
+}
+
+
+.vue-flow__controls-button:disabled {
+  pointer-events: none;
+}
+
+.vue-flow__controls-button:disabled svg {
+  fill-opacity: 0.4;
+}
+
+.vue-flow__minimap {
+  background-color: #fff;
+}
+
+.vue-flow__minimap.pannable {
+  cursor: grab;
+}
+
+.vue-flow__minimap.dragging {
+  cursor: grabbing;
+}
+
+.vue-flow__minimap-mask.pannable {
+  cursor: grab;
+}
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 78ef9bf09..f355f9368 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -19,6 +19,7 @@ import type {
   Padding,
   PaddingWithUnit,
   Rect,
+  SnapGrid,
   ViewportTransform,
   XYPosition,
   XYZPosition,
@@ -224,73 +225,6 @@ export function connectionExists(edge: Edge | Connection, elements: Elements) {
   )
 }
 
-/**
- * @deprecated Use store instance and call `addEdges` with template-ref or the one received by `onPaneReady` instead
- *
- * Intended for options API
- * In composition API you can access utilities from `useVueFlow`
- */
-export function addEdge(edgeParams: Edge | Connection, elements: Elements, defaults?: DefaultEdgeOptions) {
-  if (!edgeParams.source || !edgeParams.target) {
-    warn("Can't create edge. An edge needs a source and a target.")
-    return elements
-  }
-
-  let edge
-
-  if (isEdge(edgeParams)) {
-    edge = { ...edgeParams }
-  } else {
-    edge = {
-      ...edgeParams,
-      id: getEdgeId(edgeParams),
-    } as Edge
-  }
-
-  edge = parseEdge(edge, undefined, defaults)
-
-  if (connectionExists(edge, elements)) {
-    return elements
-  }
-
-  elements.push(edge)
-
-  return elements
-}
-
-/**
- * @deprecated Use store instance and call `updateEdge` with template-ref or the one received by `onPaneReady` instead
- *
- * Intended for options API
- * In composition API you can access utilities from `useVueFlow`
- */
-export function updateEdge(oldEdge: Edge, newConnection: Connection, elements: Elements) {
-  if (!newConnection.source || !newConnection.target) {
-    warn("Can't create new edge. An edge needs a source and a target.")
-    return elements
-  }
-
-  const foundEdge = elements.find((e) => isEdge(e) && e.id === oldEdge.id)
-
-  if (!foundEdge) {
-    warn(`The old edge with id=${oldEdge.id} does not exist.`)
-    return elements
-  }
-
-  // Remove old edge and create the new edge with parameters of old edge.
-  const edge: Edge = {
-    ...oldEdge,
-    id: getEdgeId(newConnection),
-    source: newConnection.source,
-    target: newConnection.target,
-    sourceHandle: newConnection.sourceHandle,
-    targetHandle: newConnection.targetHandle,
-  }
-  elements.splice(elements.indexOf(foundEdge), 1, edge)
-
-  return elements.filter((e) => e.id !== oldEdge.id)
-}
-
 export function rendererPointToPoint({ x, y }: XYPosition, { x: tx, y: ty, zoom: tScale }: ViewportTransform): XYPosition {
   return {
     x: x * tScale + tx,
@@ -301,7 +235,7 @@ export function pointToRendererPoint(
   { x, y }: XYPosition,
   { x: tx, y: ty, zoom: tScale }: ViewportTransform,
   snapToGrid: boolean = false,
-  snapGrid: [snapX: number, snapY: number] = [1, 1],
+  snapGrid: SnapGrid = [1, 1],
 ): XYPosition {
   const position: XYPosition = {
     x: (x - tx) / tScale,
diff --git a/packages/core/vite.config.iife.ts b/packages/core/vite.config.iife.ts
index b4e40e884..768ef5f61 100644
--- a/packages/core/vite.config.iife.ts
+++ b/packages/core/vite.config.iife.ts
@@ -2,6 +2,7 @@ import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import replace from '@rollup/plugin-replace'
+import svgLoader from 'vite-svg-loader'
 import pkg from './package.json'
 
 export default defineConfig({
@@ -36,6 +37,7 @@ export default defineConfig({
     vue({
       reactivityTransform: true,
     }),
+    svgLoader(),
     replace({
       __ENV__: 'production',
       __VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
diff --git a/packages/core/vite.config.ts b/packages/core/vite.config.ts
index 6255ece2f..4fe4c0002 100644
--- a/packages/core/vite.config.ts
+++ b/packages/core/vite.config.ts
@@ -2,6 +2,7 @@ import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import replace from '@rollup/plugin-replace'
+import svgLoader from 'vite-svg-loader'
 import pkg from './package.json'
 
 export default defineConfig({
@@ -36,6 +37,7 @@ export default defineConfig({
     vue({
       reactivityTransform: true,
     }),
+    svgLoader(),
     replace({
       __ENV__: 'process.env.NODE_ENV',
       __VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
diff --git a/packages/minimap/.eslintrc.js b/packages/minimap/.eslintrc.js
deleted file mode 100644
index e4b0b38cc..000000000
--- a/packages/minimap/.eslintrc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@tooling/eslint-config'],
-}
diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md
deleted file mode 100644
index 030f4af95..000000000
--- a/packages/minimap/CHANGELOG.md
+++ /dev/null
@@ -1,105 +0,0 @@
-# @vue-flow/minimap
-
-## 1.5.4
-
-### Patch Changes
-
-- [#1918](https://github.com/bcakmakoglu/vue-flow/pull/1918) [`0568ab7`](https://github.com/bcakmakoglu/vue-flow/commit/0568ab7e97ffc67030bd915963c84c2e2f7c42cb) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Apply wheelDelta to zoom
-
-- [#1923](https://github.com/bcakmakoglu/vue-flow/pull/1923) [`18d103d`](https://github.com/bcakmakoglu/vue-flow/commit/18d103d7177257ae470949a277cab02d6551d697) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Set zoomstep to 1 and apply factor based on macOs (zoomstep \* factor - 10 if macOs)
-
-## 1.5.3
-
-### Patch Changes
-
-- [#1809](https://github.com/bcakmakoglu/vue-flow/pull/1809) [`b60c526`](https://github.com/bcakmakoglu/vue-flow/commit/b60c526c7f577663329e1d40e461b599dfaf0bd8) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Filter hidden nodes from minimap bounds
-
-## 1.5.2
-
-### Patch Changes
-
-- [#1754](https://github.com/bcakmakoglu/vue-flow/pull/1754) [`a3870b8`](https://github.com/bcakmakoglu/vue-flow/commit/a3870b85e0c61512f4f5f9ac287536dbe9c720dd) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Bind attributes to minimap node elements.
-
-## 1.5.1
-
-### Patch Changes
-
-- [#1739](https://github.com/bcakmakoglu/vue-flow/pull/1739) [`6f37cfd`](https://github.com/bcakmakoglu/vue-flow/commit/6f37cfde46c9f8725aa7e74d87c7b2a919f96613) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Hide minimap node when graph node is hidden.
-
-## 1.5.0
-
-### Minor Changes
-
-- [#1430](https://github.com/bcakmakoglu/vue-flow/pull/1430) [`40ae855`](https://github.com/bcakmakoglu/vue-flow/commit/40ae855f364eeff36dc1ff38df2807ddd70999f0) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `maskBorderRadius` prop
-
-## 1.4.1
-
-### Patch Changes
-
-- [#1421](https://github.com/bcakmakoglu/vue-flow/pull/1421) [`69631f0`](https://github.com/bcakmakoglu/vue-flow/commit/69631f07dc6b367c6932b8642eb385b8dcc176ff) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Allow `PanelPositionType` as value for position
-
-## 1.4.0
-
-### Minor Changes
-
-- [#1249](https://github.com/bcakmakoglu/vue-flow/pull/1249) [`a8bdb93`](https://github.com/bcakmakoglu/vue-flow/commit/a8bdb931771c47ecf985e3d0340a5c456efd1a31) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Inherit attrs in minimap
-
-## 1.3.0
-
-### Minor Changes
-
-- [#1216](https://github.com/bcakmakoglu/vue-flow/pull/1216) [`80924fa`](https://github.com/bcakmakoglu/vue-flow/commit/80924faa357dd61a261f352de434229527f81e4d) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add minimap slot types
-
-- [#1216](https://github.com/bcakmakoglu/vue-flow/pull/1216) [`2aad7c5`](https://github.com/bcakmakoglu/vue-flow/commit/2aad7c5eaa2e90f473d09c56e7e399bdd902d3ec) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `MiniMapNodeEmits` interface
-
-## 1.2.0
-
-### Minor Changes
-
-- [#1066](https://github.com/bcakmakoglu/vue-flow/pull/1066) [`f1421f43`](https://github.com/bcakmakoglu/vue-flow/commit/f1421f437dfea55bdeeaf9b5471f2ac466ce64be) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `offsetScale` prop
-
-### Patch Changes
-
-- [#1066](https://github.com/bcakmakoglu/vue-flow/pull/1066) [`eac7308b`](https://github.com/bcakmakoglu/vue-flow/commit/eac7308bebeb5663ff2b17f82e5e3339618bb292) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Pass missing minimap node props
-
-## 1.1.1
-
-### Patch Changes
-
-- [#865](https://github.com/bcakmakoglu/vue-flow/pull/865) [`9ce7bdc4`](https://github.com/bcakmakoglu/vue-flow/commit/9ce7bdc4908dda4dea299e5f469b252ac20a12ab) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `exports` field to package.json
-
-## 1.1.0
-
-### Minor Changes
-
-- [#801](https://github.com/bcakmakoglu/vue-flow/pull/801) [`38270cf5`](https://github.com/bcakmakoglu/vue-flow/commit/38270cf5c33d16ba5d832a2d80499642c1d1a6b0) Thanks [@github-actions](https://github.com/apps/github-actions)! - Add `inversePan` and `zoomStep` props
-
-## 1.0.4
-
-### Patch Changes
-
-- [#716](https://github.com/bcakmakoglu/vue-flow/pull/716) [`1685827d`](https://github.com/bcakmakoglu/vue-flow/commit/1685827d0ea1dc9864f95a1b3a54fbc43a296e5d) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fix umd pkg names and use the correct vue flow core umd pkg name in plugins
-
-## 1.0.3
-
-### Patch Changes
-
-- [#682](https://github.com/bcakmakoglu/vue-flow/pull/682) [`b08cb4d4`](https://github.com/bcakmakoglu/vue-flow/commit/b08cb4d45904c229d9ecda5e3cb477cbb7a6acaf) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add compat mode to components to avoid breaking when used with @vue/compat
-
-## 1.0.2
-
-### Patch Changes
-
-- [#616](https://github.com/bcakmakoglu/vue-flow/pull/616) [`b16e3564`](https://github.com/bcakmakoglu/vue-flow/commit/b16e3564708c5429ad594156341fa3e95f84d3b2) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Upgrade to vite 4 & update deps
-
-## 1.0.1
-
-### Patch Changes
-
-- [#588](https://github.com/bcakmakoglu/vue-flow/pull/588) [`4083ae0`](https://github.com/bcakmakoglu/vue-flow/commit/4083ae05d24dc68df7c77bfe2273a17237834cbf) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Correct pkg main field
-
-## 1.0.0
-
-### Major Changes
-
-- [#519](https://github.com/bcakmakoglu/vue-flow/pull/519) [`e5829e8d`](https://github.com/bcakmakoglu/vue-flow/commit/e5829e8d7327ab2a36655b56389a882b839c95c5) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Move minimap to separate package (`@vue-flow/minimap`)
diff --git a/packages/minimap/README.md b/packages/minimap/README.md
deleted file mode 100644
index 48c993e4f..000000000
--- a/packages/minimap/README.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# Vue Flow: MiniMap Component
-
-This is a minimap component for Vue Flow.
-It can be used to add a minimap to the canvas, which will show a smaller version of the canvas with your nodes.
-The minimap can also be used to pan and zoom the main canvas.
-
-## 🛠 Setup
-
-```bash
-# install
-$ yarn add @vue-flow/minimap
-
-# or
-$ npm i --save @vue-flow/minimap
-```
-
-## 🎮 Quickstart
-
-```vue
-<script setup>
-import { VueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
-
-// import default minimap styles
-import '@vue-flow/minimap/dist/style.css'
-
-import initialElements from './initial-elements'
-
-// some nodes and edges
-const elements = ref(initialElements)
-</script>
-
-<template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
-    <MiniMap />
-  </VueFlow>
-</template>
-```
diff --git a/packages/minimap/package.json b/packages/minimap/package.json
deleted file mode 100644
index 23c919eee..000000000
--- a/packages/minimap/package.json
+++ /dev/null
@@ -1,80 +0,0 @@
-{
-  "name": "@vue-flow/minimap",
-  "version": "1.5.4",
-  "private": false,
-  "license": "MIT",
-  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bcakmakoglu/vue-flow/packages/plugins/minimap"
-  },
-  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
-  "bugs": {
-    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
-  },
-  "keywords": [
-    "vue",
-    "flow",
-    "diagram",
-    "editor",
-    "graph",
-    "node",
-    "link",
-    "port",
-    "slot",
-    "vue3",
-    "composition-api",
-    "vue-flow",
-    "vueflow",
-    "typescript"
-  ],
-  "main": "./dist/vue-flow-minimap.js",
-  "module": "./dist/vue-flow-minimap.mjs",
-  "types": "./dist/index.d.ts",
-  "unpkg": "./dist/vue-flow-minimap.iife.js",
-  "jsdelivr": "./dist/vue-flow-minimap.iife.js",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/vue-flow-minimap.mjs",
-      "require": "./dist/vue-flow-minimap.js"
-    },
-    "./dist/style.css": "./dist/style.css"
-  },
-  "files": [
-    "dist",
-    "*.d.ts"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "dev": "pnpm types:watch & pnpm build:watch",
-    "build": "vite build",
-    "build:watch": "vite build --watch",
-    "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
-    "types:watch": "vue-tsc --declaration --emitDeclarationOnly --watch",
-    "lint": "eslint --ext .js,.ts,.vue ./",
-    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist",
-    "test": "exit 0"
-  },
-  "peerDependencies": {
-    "@vue-flow/core": "^1.23.0",
-    "vue": "^3.3.0"
-  },
-  "dependencies": {
-    "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0"
-  },
-  "devDependencies": {
-    "@tooling/eslint-config": "workspace:*",
-    "@tooling/tsconfig": "workspace:*",
-    "@tooling/vite-config": "workspace:*",
-    "@types/d3-selection": "^3.0.7",
-    "@types/d3-zoom": "^3.0.5",
-    "@vue-flow/core": "workspace:*",
-    "vue-tsc": "^1.8.16"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
-}
diff --git a/packages/minimap/src/style.css b/packages/minimap/src/style.css
deleted file mode 100644
index 9f227bd98..000000000
--- a/packages/minimap/src/style.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.vue-flow__minimap {
-  background-color: #fff;
-}
-
-.vue-flow__minimap.pannable {
-  cursor: grab;
-}
-
-.vue-flow__minimap.dragging {
-  cursor: grabbing;
-}
-
-.vue-flow__minimap-mask.pannable {
-  cursor: grab;
-}
diff --git a/packages/minimap/tsconfig.json b/packages/minimap/tsconfig.json
deleted file mode 100644
index f02b0a03e..000000000
--- a/packages/minimap/tsconfig.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "@tooling/tsconfig/base",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "declarationDir": "./dist",
-    "types": [
-      "vite/client",
-      "vue/macros"
-    ]
-  },
-  "include": [
-    "./src"
-  ]
-}
diff --git a/packages/minimap/vite.config.ts b/packages/minimap/vite.config.ts
deleted file mode 100644
index 2e0953e4e..000000000
--- a/packages/minimap/vite.config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { resolve } from 'node:path'
-import { withConfig } from '@tooling/vite-config'
-
-export default withConfig({
-  build: {
-    lib: {
-      formats: ['es', 'cjs', 'iife'],
-      entry: resolve(__dirname, 'src/index.ts'),
-      fileName: 'vue-flow-minimap',
-      name: 'VueFlowMiniMap',
-    },
-  },
-})
diff --git a/packages/pathfinding-edge/.eslintrc.js b/packages/pathfinding-edge/.eslintrc.js
deleted file mode 100644
index e4b0b38cc..000000000
--- a/packages/pathfinding-edge/.eslintrc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@tooling/eslint-config'],
-}
diff --git a/packages/pathfinding-edge/CHANGELOG.md b/packages/pathfinding-edge/CHANGELOG.md
deleted file mode 100644
index 73d24a0aa..000000000
--- a/packages/pathfinding-edge/CHANGELOG.md
+++ /dev/null
@@ -1,123 +0,0 @@
-# @vue-flow/pathfinding-edge
-
-## 1.0.6
-
-### Patch Changes
-
-- [#865](https://github.com/bcakmakoglu/vue-flow/pull/865) [`9ce7bdc4`](https://github.com/bcakmakoglu/vue-flow/commit/9ce7bdc4908dda4dea299e5f469b252ac20a12ab) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `exports` field to package.json
-
-## 1.0.5
-
-### Patch Changes
-
-- [#770](https://github.com/bcakmakoglu/vue-flow/pull/770) [`baaabbe8`](https://github.com/bcakmakoglu/vue-flow/commit/baaabbe8e5cd88c9976033bca33119b1bc7a4d57) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fix wrong package entries in `package.json` for pathfinding edge
-
-## 1.0.4
-
-### Patch Changes
-
-- [#716](https://github.com/bcakmakoglu/vue-flow/pull/716) [`1685827d`](https://github.com/bcakmakoglu/vue-flow/commit/1685827d0ea1dc9864f95a1b3a54fbc43a296e5d) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fix umd pkg names and use the correct vue flow core umd pkg name in plugins
-
-## 1.0.3
-
-### Patch Changes
-
-- [#682](https://github.com/bcakmakoglu/vue-flow/pull/682) [`b08cb4d4`](https://github.com/bcakmakoglu/vue-flow/commit/b08cb4d45904c229d9ecda5e3cb477cbb7a6acaf) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add compat mode to components to avoid breaking when used with @vue/compat
-
-## 1.0.2
-
-### Patch Changes
-
-- [#616](https://github.com/bcakmakoglu/vue-flow/pull/616) [`b16e3564`](https://github.com/bcakmakoglu/vue-flow/commit/b16e3564708c5429ad594156341fa3e95f84d3b2) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Upgrade to vite 4 & update deps
-
-## 1.0.1
-
-### Patch Changes
-
-- [#365](https://github.com/bcakmakoglu/vue-flow/pull/365) [`009bbdb`](https://github.com/bcakmakoglu/vue-flow/commit/009bbdba6d7e896bcfcaf8f07e7fdc8a83cc52fc) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fix output file names for resize-rotate-node and pathfinding-edge pkgs
-
-## 1.0.0
-
-### Major Changes
-
-- [#305](https://github.com/bcakmakoglu/vue-flow/pull/305) [`939bff50`](https://github.com/bcakmakoglu/vue-flow/commit/939bff503039af3b790160640548ddde984cf2bc) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - # What's changed?
-
-  - Simplify edge path calculations
-    - remove `getEdgeCenter` and `getSimpleEdgeCenter`
-
-  # Breaking Changes
-
-  - `getEdgeCenter` has been removed
-    - Edge center positions can now be accessed from `getBezierPath` or `getSmoothStepPath` functions
-
-  Before:
-
-  ```js
-  import { getBezierPath, getEdgeCenter } from "@braks/vue-flow";
-
-  // used to return the path string only
-  const edgePath = computed(() => getBezierPath(pathParams));
-
-  // was necessary to get the centerX, centerY of an edge
-  const centered = computed(() => getEdgeCenter(centerParams));
-  ```
-
-  After:
-
-  ```js
-  import { getBezierPath } from "@vue-flow/core";
-
-  // returns the path string and the center positions
-  const [path, centerX, centerY] = computed(() => getBezierPath(pathParams));
-  ```
-
-- [#305](https://github.com/bcakmakoglu/vue-flow/pull/305) [`47d837aa`](https://github.com/bcakmakoglu/vue-flow/commit/47d837aac096e59e7f55213990dff2cc7eba0c01) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - # What's changed?
-
-  - Change pkg scope from 'braks' to 'vue-flow'
-    - Add `@vue-flow/core` package
-    - Add `@vue-flow/additional-components` package
-    - Add `@vue-flow/pathfinding-edge` package
-    - Add `@vue-flow/resize-rotate-node` package
-
-  # Features
-
-  - `useNode` and `useEdge` composables
-    - can be used to access current node/edge (or by id) and their respective element refs (if used inside the elements' context, i.e. a custom node/edge)
-  - `selectionKeyCode` as `true`
-    - allows for figma style selection (i.e. create a selection rect without holding shift or any other key)
-  - Handles to trigger handle bounds calculation on mount
-    - if no handle bounds are found, a Handle will try to calculate its bounds on mount
-    - should remove the need for `updateNodeInternals` on dynamic handles
-  - Testing for various features using Cypress 10
-
-  # Bugfixes
-
-  - Fix `removeSelectedEdges` and `removeSelectedNodes` actions not properly removing elements from store
-
-  # Breaking Changes
-
-  - `@vue-flow/core` package is now required to use vue-flow
-  - `@vue-flow/additional-components` package contains `Background`, `MiniMap` and `Controls` components and related types
-    - When switching to the new pkg scope, you need to change the import path.
-
-  Before:
-
-  ```js
-  import { VueFlow, Background, MiniMap, Controls } from "@braks/vue-flow";
-  ```
-
-  After
-
-  ```js
-  import { VueFlow } from "@vue-flow/core";
-  import {
-    Background,
-    MiniMap,
-    Controls,
-  } from "@vue-flow/additional-components";
-  ```
-
-### Patch Changes
-
-- Updated dependencies [[`939bff50`](https://github.com/bcakmakoglu/vue-flow/commit/939bff503039af3b790160640548ddde984cf2bc), [`47d837aa`](https://github.com/bcakmakoglu/vue-flow/commit/47d837aac096e59e7f55213990dff2cc7eba0c01)]:
-  - @vue-flow/core@1.0.0
diff --git a/packages/pathfinding-edge/README.md b/packages/pathfinding-edge/README.md
deleted file mode 100644
index b88c5132d..000000000
--- a/packages/pathfinding-edge/README.md
+++ /dev/null
@@ -1,70 +0,0 @@
-# Vue Flow Pathfinding Edge 🧲
-
-⚠️ DEPRECATED - WILL BE REMOVED WITH NEXT MAJOR RELEASE ⚠️
-
-__Custom edge that avoids crossing nodes__
-
-## 🛠 Setup
-
-```bash
-# install
-$ yarn add @vue-flow/pathfinding-edge
-
-# or
-$ npm i --save @vue-flow/pathfinding-edge
-```
-
-## 🎮 Quickstart
-
-```vue
-<script setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { PathFindingEdge } from '@vue-flow/pathfinding-edge'
-import initialElements from './initial-elements'
-
-const elements = ref(initialElements)
-
-// create a new context so we can fetch nodes
-const { getNodes } = useVueFlow()
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow v-model="elements">
-      <template #edge-pathfinding="props">
-        <PathFindingEdge v-bind="props" :nodes="getNodes" />
-      </template>
-    </VueFlow>
-  </div>
-</template>
-```
-
-```js
-// initial-elements.js
-export default [
-  {
-    id: 'e12',
-    source: '1',
-    target: '2',
-    label: 'Smart Edge',
-    style: { stroke: 'red' },
-    // assign pathfinding edge type
-    type: 'pathfinding'
-  },
-  {
-    id: '1',
-    label: 'Node 1',
-    position: {
-      x: 430,
-      y: 0,
-    },
-  },
-  {
-    id: '2',
-    label: 'Node 2',
-    position: {
-      x: 230,
-      y: 90,
-    },
-  },
-]
-```
diff --git a/packages/pathfinding-edge/example/App.vue b/packages/pathfinding-edge/example/App.vue
deleted file mode 100644
index c41a97ead..000000000
--- a/packages/pathfinding-edge/example/App.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts" setup>
-import type { Elements } from '@vue-flow/core'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { ref } from 'vue'
-import initialElements from './elements'
-import { PathFindingEdge, PerfectArrow } from '~/index'
-
-const elements = ref<Elements>(initialElements)
-
-const { addEdges, onConnect } = useVueFlow()
-
-onConnect((params) => addEdges([params]))
-</script>
-
-<template>
-  <div style="height: 100%">
-    <VueFlow
-      v-model="elements"
-      :default-edge-options="{ type: 'perfectArrow' }"
-      :fit-view-on-init="true"
-      class="vue-flow-basic-example"
-    >
-      <template #edge-pathFinding="props">
-        <PathFindingEdge v-bind="props" />
-      </template>
-      <template #edge-perfectArrow="props">
-        <PerfectArrow v-bind="props" />
-      </template>
-    </VueFlow>
-  </div>
-</template>
-
-<style>
-@import '@vue-flow/core/dist/style.css';
-@import '@vue-flow/core/dist/theme-default.css';
-
-html,
-body,
-#root {
-  height: 100%;
-  width: 100%;
-  font-family: 'JetBrains Mono', monospace;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-transform: uppercase;
-}
-</style>
diff --git a/packages/pathfinding-edge/example/elements.ts b/packages/pathfinding-edge/example/elements.ts
deleted file mode 100644
index 3cb36864d..000000000
--- a/packages/pathfinding-edge/example/elements.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import type { EdgeMarkerType, Elements } from '@vue-flow/core'
-import { MarkerType } from '@vue-flow/core'
-
-const markerEnd: EdgeMarkerType = MarkerType.Arrow
-
-export default [
-  {
-    id: '1',
-    label: 'Node 1',
-    position: {
-      x: 430,
-      y: 0,
-    },
-  },
-  {
-    id: '2',
-    label: 'Node 2',
-    position: {
-      x: 230,
-      y: 90,
-    },
-  },
-  {
-    id: '2a',
-    label: 'Node 2a',
-    position: {
-      x: 0,
-      y: 180,
-    },
-  },
-  {
-    id: '2b',
-    label: 'Node 2b',
-    position: {
-      x: 230,
-      y: 180,
-    },
-  },
-  {
-    id: '2c',
-    label: 'Node 2c',
-    position: {
-      x: 430,
-      y: 180,
-    },
-  },
-  {
-    id: '2d',
-    label: 'Node 2d',
-    position: {
-      x: 475,
-      y: 270,
-    },
-  },
-  {
-    id: '3',
-    label: 'Node 3',
-    position: {
-      x: 430,
-      y: 90,
-    },
-  },
-  {
-    id: 'e12',
-    source: '1',
-    target: '2',
-    label: 'Foobar',
-    style: { stroke: 'red' },
-    type: 'pathFinding',
-    markerEnd,
-  },
-  {
-    id: 'e13',
-    source: '1',
-    target: '3',
-    type: 'pathFinding',
-    markerEnd,
-  },
-  {
-    id: 'e22a',
-    source: '2',
-    target: '2a',
-    type: 'pathFinding',
-    markerEnd,
-  },
-  {
-    id: 'e22b',
-    source: '2',
-    target: '2b',
-    type: 'pathFinding',
-    markerEnd,
-  },
-  {
-    id: 'e22c',
-    source: '2',
-    target: '2c',
-    type: 'pathFinding',
-    markerEnd,
-  },
-  {
-    id: 'e2c2d',
-    source: '2c',
-    target: '2d',
-    type: 'perfectArrow',
-    label: 'perfect arrow',
-    markerEnd,
-  },
-  {
-    id: 'e2d2c',
-    source: '2d',
-    target: '2c',
-    type: 'pathFinding',
-    markerEnd,
-  },
-  {
-    id: 'e2d1',
-    source: '2d',
-    target: '1',
-    type: 'pathFinding',
-    markerEnd,
-  },
-  {
-    id: 'e2a2b',
-    source: '2a',
-    target: '2b',
-    type: 'perfectArrow',
-    markerEnd,
-  },
-] as Elements
diff --git a/packages/pathfinding-edge/example/main.ts b/packages/pathfinding-edge/example/main.ts
deleted file mode 100644
index c707599b8..000000000
--- a/packages/pathfinding-edge/example/main.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-
-const app = createApp(App)
-
-app.config.performance = true
-app.mount('#root')
diff --git a/packages/pathfinding-edge/index.html b/packages/pathfinding-edge/index.html
deleted file mode 100644
index 7328d10f5..000000000
--- a/packages/pathfinding-edge/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>🌊 Vue Flow</title>
-</head>
-<body>
-<div id="root"></div>
-<script type="module" src="/example/main.ts"></script>
-</body>
-</html>
diff --git a/packages/pathfinding-edge/package.json b/packages/pathfinding-edge/package.json
deleted file mode 100644
index 20e133fed..000000000
--- a/packages/pathfinding-edge/package.json
+++ /dev/null
@@ -1,78 +0,0 @@
-{
-  "name": "@vue-flow/pathfinding-edge",
-  "version": "1.0.6",
-  "private": false,
-  "license": "MIT",
-  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bcakmakoglu/vue-flow"
-  },
-  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
-  "bugs": {
-    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
-  },
-  "keywords": [
-    "vue",
-    "flow",
-    "diagram",
-    "editor",
-    "graph",
-    "node",
-    "link",
-    "port",
-    "slot",
-    "vue3",
-    "composition-api",
-    "vue-flow",
-    "vueflow",
-    "typescript"
-  ],
-  "main": "./dist/vue-flow-pathfinding-edge.js",
-  "types": "./dist/index.d.ts",
-  "module": "./dist/vue-flow-pathfinding-edge.mjs",
-  "unpkg": "./dist/vue-flow-pathfinding-edge.iife.js",
-  "jsdelivr": "./dist/vue-flow-pathfinding-edge.iife.js",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/vue-flow-pathfinding-edge.mjs",
-      "require": "./dist/vue-flow-pathfinding-edge.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "dev": "pnpm types:watch & pnpm build:watch",
-    "build": "vite build",
-    "build:watch": "vite build --watch",
-    "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
-    "types:watch": "vue-tsc --declaration --emitDeclarationOnly --watch",
-    "examples": "vite",
-    "test": "exit 0",
-    "lint": "eslint --ext .js,.ts,.vue ./",
-    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist"
-  },
-  "peerDependencies": {
-    "@vue-flow/core": "^1.23.0",
-    "vue": "^3.3.0"
-  },
-  "dependencies": {
-    "pathfinding": "^0.4.18",
-    "perfect-arrows": "^0.3.7"
-  },
-  "devDependencies": {
-    "@tooling/eslint-config": "workspace:*",
-    "@tooling/tsconfig": "workspace:*",
-    "@tooling/vite-config": "workspace:*",
-    "@types/pathfinding": "^0.0.6",
-    "@vue-flow/core": "workspace:*",
-    "vue-tsc": "^1.8.16"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
-}
diff --git a/packages/pathfinding-edge/src/arrow/PerfectArrow.vue b/packages/pathfinding-edge/src/arrow/PerfectArrow.vue
deleted file mode 100644
index 7ac241c66..000000000
--- a/packages/pathfinding-edge/src/arrow/PerfectArrow.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts" setup>
-import { EdgeText, getSimpleBezierPath } from '@vue-flow/core'
-import type { CSSProperties } from 'vue'
-import { getArrow } from 'perfect-arrows'
-import { computed, useAttrs } from 'vue'
-import type { PerfectArrowProps } from '../types'
-
-const props = withDefaults(defineProps<PerfectArrowProps>(), {
-  options: () => ({
-    padStart: 3,
-    padEnd: 3,
-    stretch: 0.2,
-  }),
-})
-
-const centered = computed(() =>
-  getSimpleBezierPath({
-    ...props,
-  }),
-)
-
-const arrow = computed(() => {
-  return getArrow(props.sourceX, props.sourceY, props.targetX, props.targetY, {
-    ...props.options,
-  })
-})
-
-const attrs = useAttrs() as { style: CSSProperties }
-</script>
-
-<script lang="ts">
-export default {
-  name: 'PerfectArrow',
-  compatConfig: { MODE: 3 },
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <path
-    :style="{ ...style, ...attrs.style }"
-    class="vue-flow__edge-path vue-flow__perfect-arrow"
-    :d="`M${arrow[0]},${arrow[1]} Q${arrow[2]},${arrow[3]} ${arrow[4]},${arrow[5]}`"
-    :marker-end="markerEnd"
-    :marker-start="markerStart"
-  />
-  <EdgeText
-    v-if="label"
-    :x="centered[1]"
-    :y="centered[2]"
-    :label="label"
-    :label-style="labelStyle"
-    :label-show-bg="labelShowBg"
-    :label-bg-style="labelBgStyle"
-    :label-bg-padding="labelBgPadding"
-    :label-bg-border-radius="labelBgBorderRadius"
-  />
-</template>
diff --git a/packages/pathfinding-edge/src/edge/PathFindingEdge.vue b/packages/pathfinding-edge/src/edge/PathFindingEdge.vue
deleted file mode 100644
index 89bd03949..000000000
--- a/packages/pathfinding-edge/src/edge/PathFindingEdge.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script lang="ts" setup>
-import { BezierEdge, EdgeText, Position, getSimpleBezierPath, useVueFlow } from '@vue-flow/core'
-import { computed, useAttrs } from 'vue'
-import type { PathFindingEdgeProps } from '../types'
-import { createGrid, gridRatio } from './createGrid'
-import { drawSmoothLinePath } from './drawSvgPath'
-import { generatePath } from './generatePath'
-import { getBoundingBoxes } from './getBoundingBoxes'
-import { gridToGraphPoint } from './pointConversion'
-
-const props = withDefaults(defineProps<PathFindingEdgeProps>(), {
-  selected: false,
-  sourcePosition: Position.Bottom,
-  targetPosition: Position.Top,
-  labelStyle: () => ({}),
-  labelShowBg: true,
-  labelBgStyle: () => ({}),
-})
-
-const nodePadding = 10
-const graphPadding = 20
-const roundCoordinatesTo = gridRatio
-
-const { getNodes } = useVueFlow()
-
-const centered = computed(() =>
-  getSimpleBezierPath({
-    ...props,
-  }),
-)
-const source = computed(() => ({
-  x: props.sourceX,
-  y: props.sourceY,
-  position: props.sourcePosition,
-}))
-
-const target = computed(() => ({
-  x: props.targetX,
-  y: props.targetY,
-  position: props.targetPosition,
-}))
-
-// We use the nodes' information to generate bounding boxes for them
-// and the graph
-const bb = computed(() => getBoundingBoxes(getNodes.value, nodePadding, graphPadding, roundCoordinatesTo))
-
-const gridPath = computed(() => {
-  let path: number[][] = []
-
-  if (target.value.x && source.value.x && getNodes.value.length) {
-    // We then can use the grid representation to do pathfinding
-    // With this information, we can create a 2D grid representation of
-    // our graph, that tells us where in the graph there is a "free" space or not
-    const { grid, start, end } = createGrid(bb.value.graph, bb.value.nodes, source.value, target.value)
-    path = generatePath(grid, start, end)
-  }
-
-  return path
-})
-
-const path = computed(() => {
-  let svgPath = ''
-  if (gridPath.value?.length) {
-    // Here we convert the grid path to a sequence of graph coordinates.
-    const graphPath = gridPath.value.map((gridPoint) => {
-      const [x, y] = gridPoint
-      const graphPoint = gridToGraphPoint({ x, y }, bb.value.graph.xMin, bb.value.graph.yMin)
-      return [graphPoint.x, graphPoint.y]
-    })
-
-    // Finally, we can use the graph path to draw the edge
-    svgPath = drawSmoothLinePath(source.value, target.value, graphPath)
-  }
-
-  return svgPath
-})
-const attrs: Record<string, any> = useAttrs()
-</script>
-
-<script lang="ts">
-export default {
-  name: 'PathFindingEdge',
-  compatConfig: { MODE: 3 },
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <BezierEdge v-if="gridPath && gridPath.length <= 2" v-bind="{ ...props, ...attrs }" />
-  <template v-else>
-    <path
-      :style="{ ...style, ...attrs.style }"
-      class="vue-flow__edge-path"
-      :d="path"
-      :marker-end="markerEnd"
-      :marker-start="markerStart"
-    />
-    <EdgeText
-      v-if="label"
-      :x="centered[1]"
-      :y="centered[2]"
-      :label="label as any"
-      :label-style="labelStyle"
-      :label-show-bg="labelShowBg"
-      :label-bg-style="labelBgStyle"
-      :label-bg-padding="labelBgPadding"
-      :label-bg-border-radius="labelBgBorderRadius"
-    />
-  </template>
-</template>
diff --git a/packages/pathfinding-edge/src/edge/createGrid.ts b/packages/pathfinding-edge/src/edge/createGrid.ts
deleted file mode 100644
index 5cf857031..000000000
--- a/packages/pathfinding-edge/src/edge/createGrid.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Grid } from 'pathfinding'
-import type { Position } from '@vue-flow/core'
-import { getNextPointFromPosition, guaranteeWalkablePath } from './guaranteeWalkablePath'
-import { graphToGridPoint } from './pointConversion'
-import { round } from './utils'
-import type { GraphBoundingBox, NodeBoundingBox } from './getBoundingBoxes'
-
-export const gridRatio = 10
-
-export interface PointInfo {
-  x: number
-  y: number
-  position: Position
-}
-
-export function createGrid(graph: GraphBoundingBox, nodes: NodeBoundingBox[], source: PointInfo, target: PointInfo) {
-  const { xMin, yMin, width, height } = graph
-
-  // Create a grid representation of the graph box, where each cell is
-  // equivalent to 10x10 pixels on the graph. We'll use this  simplified grid
-  // to do pathfinding.
-  const mapColumns = width / gridRatio
-  const mapRows = height / gridRatio
-  const grid = new Grid(mapColumns, mapRows)
-
-  // Update the grid representation with the space the nodes take up
-  nodes.forEach((node) => {
-    const nodeStart = graphToGridPoint(node.topLeft, xMin, yMin)
-    const nodeEnd = graphToGridPoint(node.bottomRight, xMin, yMin)
-
-    for (let x = nodeStart.x; x < nodeEnd.x; x++) {
-      for (let y = nodeStart.y; y < nodeEnd.y; y++) {
-        grid.setWalkableAt(x, y, false)
-      }
-    }
-  })
-
-  // Convert the starting and ending graph points to grid points
-  const startGrid = graphToGridPoint(
-    {
-      x: round(source.x, gridRatio),
-      y: round(source.y, gridRatio),
-    },
-    xMin,
-    yMin,
-  )
-
-  const endGrid = graphToGridPoint(
-    {
-      x: round(target.x, gridRatio),
-      y: round(target.y, gridRatio),
-    },
-    xMin,
-    yMin,
-  )
-
-  // Guarantee a walkable path between the start and end points, even if the
-  // source or target where covered by another node or by padding
-  const startingNode = grid.getNodeAt(startGrid.x, startGrid.y)
-  guaranteeWalkablePath(grid, startingNode, source.position)
-  const endingNode = grid.getNodeAt(endGrid.x, endGrid.y)
-  guaranteeWalkablePath(grid, endingNode, target.position)
-
-  // Use the next closest points as the start and end points, so
-  // pathfinding does not start too close to the nodes
-  const start = getNextPointFromPosition(startingNode, source.position)
-  const end = getNextPointFromPosition(endingNode, target.position)
-
-  return { grid, start, end }
-}
diff --git a/packages/pathfinding-edge/src/edge/drawSvgPath.ts b/packages/pathfinding-edge/src/edge/drawSvgPath.ts
deleted file mode 100644
index 8ee973f48..000000000
--- a/packages/pathfinding-edge/src/edge/drawSvgPath.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { XYPosition } from '@vue-flow/core'
-
-/**
- * Draws an SVG path from a list of points, using straight lines.
- */
-
-function getMidPoint(Ax: number, Ay: number, Bx: number, By: number) {
-  const Zx = (Ax - Bx) / 2 + Bx
-  const Zy = (Ay - By) / 2 + By
-  return [Zx, Zy]
-}
-
-export function drawStraightLinePath(source: XYPosition, target: XYPosition, path: number[][]) {
-  let svgPathString = `M ${source.x}, ${source.y} `
-
-  path.forEach((point) => {
-    const [x, y] = point
-    svgPathString += `L ${x}, ${y} `
-  })
-
-  svgPathString += `L ${target.x}, ${target.y} `
-
-  return svgPathString
-}
-
-function quadraticBezierCurve(points: number[][]) {
-  const X = 0
-  const Y = 1
-  let point = points[0]
-
-  const first = points[0]
-  let svgPath = `M${first[X]},${first[Y]}M`
-
-  for (let i = 0; i < points.length; i++) {
-    const next = points[i]
-    const midPoint = getMidPoint(point[X], point[Y], next[X], next[Y])
-
-    svgPath += ` ${midPoint[X]},${midPoint[Y]}`
-    svgPath += `Q${next[X]},${next[Y]}`
-    point = next
-  }
-
-  const last = points[points.length - 1]
-  svgPath += ` ${last[0]},${last[1]}`
-
-  return svgPath
-}
-
-/**
- * Draws a SVG path from a list of points, using rounded lines.
- */
-export function drawSmoothLinePath(source: XYPosition, target: XYPosition, path: number[][]) {
-  const points = [[source.x, source.y], ...path, [target.x, target.y]]
-  return quadraticBezierCurve(points)
-}
diff --git a/packages/pathfinding-edge/src/edge/generatePath.ts b/packages/pathfinding-edge/src/edge/generatePath.ts
deleted file mode 100644
index 447cd712f..000000000
--- a/packages/pathfinding-edge/src/edge/generatePath.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { AStarFinder, DiagonalMovement, Util } from 'pathfinding'
-import type { Grid, Heuristic } from 'pathfinding'
-import type { XYPosition } from '@vue-flow/core'
-
-// https://www.npmjs.com/package/pathfinding#advanced-usage
-declare module 'pathfinding' {
-  interface FinderOptions extends Heuristic {
-    diagonalMovement?: DiagonalMovement
-    weight?: number
-    allowDiagonal?: boolean
-    dontCrossCorners?: boolean
-  }
-}
-
-export function generatePath(grid: Grid, start: XYPosition, end: XYPosition): number[][] {
-  const finder = new AStarFinder({
-    diagonalMovement: DiagonalMovement.Always,
-    allowDiagonal: true,
-    dontCrossCorners: true,
-  })
-
-  let path: number[][] = []
-
-  try {
-    path = finder.findPath(start.x, start.y, end.x, end.y, grid)
-    path = Util.smoothenPath(grid, path)
-  } catch {
-    // No path was found. This can happen if the end point is "surrounded"
-    // by other nodes, or if the starting and ending nodes are on top of
-    // each other.
-  }
-
-  return path
-}
diff --git a/packages/pathfinding-edge/src/edge/getBoundingBoxes.ts b/packages/pathfinding-edge/src/edge/getBoundingBoxes.ts
deleted file mode 100644
index 1f16b3de1..000000000
--- a/packages/pathfinding-edge/src/edge/getBoundingBoxes.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import type { GraphNode, XYPosition } from '@vue-flow/core'
-import { roundDown, roundUp } from './utils'
-
-export interface NodeBoundingBox {
-  id: string
-  width: number
-  height: number
-  topLeft: XYPosition
-  bottomLeft: XYPosition
-  topRight: XYPosition
-  bottomRight: XYPosition
-}
-
-export interface GraphBoundingBox {
-  width: number
-  height: number
-  topLeft: XYPosition
-  bottomLeft: XYPosition
-  topRight: XYPosition
-  bottomRight: XYPosition
-  xMax: number
-  yMax: number
-  xMin: number
-  yMin: number
-}
-
-/**
- * Get the bounding box of all nodes and the graph itself, as X/Y coordinates
- * of all corner points.
- *
- * @param storeNodes The node list
- * @param nodePadding Optional padding to add to the node's bounding boxes
- * @param graphPadding Optional padding to add to the graph's bounding box
- * @param roundTo If the coordinates should be rounded to this nearest integer
- * @returns Graph and nodes bounding boxes.
- */
-export function getBoundingBoxes(storeNodes: GraphNode[], nodePadding = 0, graphPadding = 0, roundTo = 0) {
-  // Guarantee that the given parameters are positive integers
-  nodePadding = Math.max(Math.round(nodePadding), 0)
-  graphPadding = Math.max(Math.round(graphPadding), 0)
-  roundTo = Math.max(Math.round(roundTo), 0)
-
-  nodePadding = Number.isInteger(nodePadding) ? nodePadding : 0
-  graphPadding = Number.isInteger(graphPadding) ? graphPadding : 0
-  roundTo = Number.isInteger(roundTo) ? roundTo : 0
-
-  let xMax = Number.MIN_SAFE_INTEGER
-  let yMax = Number.MIN_SAFE_INTEGER
-  let xMin = Number.MAX_SAFE_INTEGER
-  let yMin = Number.MAX_SAFE_INTEGER
-
-  const nodes: NodeBoundingBox[] = storeNodes.map((node) => {
-    const {
-      computedPosition: { x, y },
-      dimensions,
-    } = node
-    const width = Math.max(dimensions.width || 0, 1)
-    const height = Math.max(dimensions.height || 0, 1)
-
-    const position: XYPosition = {
-      x: x || 0,
-      y: y || 0,
-    }
-    const topLeft: XYPosition = {
-      x: position.x - nodePadding,
-      y: position.y - nodePadding,
-    }
-    const bottomLeft: XYPosition = {
-      x: position.x - nodePadding,
-      y: position.y + height + nodePadding,
-    }
-    const topRight: XYPosition = {
-      x: position.x + width + nodePadding,
-      y: position.y - nodePadding,
-    }
-    const bottomRight: XYPosition = {
-      x: position.x + width + nodePadding,
-      y: position.y + height + nodePadding,
-    }
-
-    if (roundTo > 0) {
-      topLeft.x = roundDown(topLeft.x, roundTo)
-      topLeft.y = roundDown(topLeft.y, roundTo)
-      bottomLeft.x = roundDown(bottomLeft.x, roundTo)
-      bottomLeft.y = roundUp(bottomLeft.y, roundTo)
-      topRight.x = roundUp(topRight.x, roundTo)
-      topRight.y = roundDown(topRight.y, roundTo)
-      bottomRight.x = roundUp(bottomRight.x, roundTo)
-      bottomRight.y = roundUp(bottomRight.y, roundTo)
-    }
-
-    if (topLeft.y < yMin) {
-      yMin = topLeft.y
-    }
-    if (topLeft.x < xMin) {
-      xMin = topLeft.x
-    }
-    if (bottomRight.y > yMax) {
-      yMax = bottomRight.y
-    }
-    if (bottomRight.x > xMax) {
-      xMax = bottomRight.x
-    }
-
-    return {
-      id: node.id,
-      width,
-      height,
-      topLeft,
-      bottomLeft,
-      topRight,
-      bottomRight,
-    }
-  })
-
-  xMax = xMax + graphPadding
-  yMax = yMax + graphPadding
-  xMin = xMin - graphPadding
-  yMin = yMin - graphPadding
-
-  const topLeft: XYPosition = {
-    x: xMin,
-    y: yMin,
-  }
-
-  const bottomLeft: XYPosition = {
-    x: xMin,
-    y: yMax,
-  }
-
-  const topRight: XYPosition = {
-    x: xMax,
-    y: yMin,
-  }
-
-  const bottomRight: XYPosition = {
-    x: xMax,
-    y: yMax,
-  }
-
-  const width = Math.abs(topLeft.x - topRight.x)
-  const height = Math.abs(topLeft.y - bottomLeft.y)
-
-  const graph: GraphBoundingBox = {
-    topLeft,
-    bottomLeft,
-    topRight,
-    bottomRight,
-    width,
-    height,
-    xMax,
-    yMax,
-    xMin,
-    yMin,
-  }
-
-  return { nodes, graph }
-}
diff --git a/packages/pathfinding-edge/src/edge/guaranteeWalkablePath.ts b/packages/pathfinding-edge/src/edge/guaranteeWalkablePath.ts
deleted file mode 100644
index e163536fa..000000000
--- a/packages/pathfinding-edge/src/edge/guaranteeWalkablePath.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { Grid } from 'pathfinding'
-import type { Position, XYPosition } from '@vue-flow/core'
-
-type Direction = 'top' | 'bottom' | 'left' | 'right'
-
-export function getNextPointFromPosition(point: XYPosition, position: Direction): XYPosition {
-  switch (position) {
-    case 'top':
-      return { x: point.x, y: point.y - 1 }
-    case 'bottom':
-      return { x: point.x, y: point.y + 1 }
-    case 'left':
-      return { x: point.x - 1, y: point.y }
-    case 'right':
-      return { x: point.x + 1, y: point.y }
-  }
-}
-
-/**
- * Guarantee that the path is walkable, even if the point is inside a non
- * walkable area, by adding a walkable path in the direction of the point's
- * Position.
- */
-export function guaranteeWalkablePath(grid: Grid, point: XYPosition, position: Position) {
-  let node = grid.getNodeAt(point.x, point.y)
-  while (!node.walkable) {
-    grid.setWalkableAt(node.x, node.y, true)
-    const next = getNextPointFromPosition(node, position)
-    node = grid.getNodeAt(next.x, next.y)
-  }
-}
diff --git a/packages/pathfinding-edge/src/edge/pointConversion.ts b/packages/pathfinding-edge/src/edge/pointConversion.ts
deleted file mode 100644
index c1b4b29c3..000000000
--- a/packages/pathfinding-edge/src/edge/pointConversion.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import type { XYPosition } from '@vue-flow/core'
-
-const gridRatio = 10
-
-/**
- * Each bounding box is a collection of X/Y points in a graph, and we
- * need to convert them to "occupied" cells in a 2D grid representation.
- *
- * The top most position of the grid (grid[0][0]) needs to be equivalent
- * to the top most point in the graph (the graph.topLeft point).
- *
- * Since the top most point can have X/Y values different than zero,
- * and each cell in a grid represents a 10x10 pixel area in the grid,
- * there's need to be a conversion between a point in a graph to a point
- * in the grid.
- *
- * We do this conversion by dividing a graph point X/Y values by 10, and
- * "shifting" their values up or down, depending on the values of the top most
- * point in the graph. The top most point in the graph will have the smallest
- * values for X and Y.
- *
- * We avoid setting nodes in the border of the grid (x=0 or y=0), so there's
- * always a "walkable" area around the grid.
- */
-export function graphToGridPoint(graphPoint: XYPosition, smallestX: number, smallestY: number): XYPosition {
-  let x = graphPoint.x / gridRatio
-  let y = graphPoint.y / gridRatio
-
-  let referenceX = smallestX / gridRatio
-  let referenceY = smallestY / gridRatio
-
-  if (referenceX < 1) {
-    while (referenceX !== 1) {
-      referenceX++
-      x++
-    }
-  } else if (referenceX > 1) {
-    while (referenceX !== 1) {
-      referenceX--
-      x--
-    }
-  }
-
-  if (referenceY < 1) {
-    while (referenceY !== 1) {
-      referenceY++
-      y++
-    }
-  } else if (referenceY > 1) {
-    while (referenceY !== 1) {
-      referenceY--
-      y--
-    }
-  }
-
-  return { x, y }
-}
-
-/**
- * Converts a grid point back to a graph point, using the reverse logic of
- * graphToGridPoint.
- */
-export function gridToGraphPoint(gridPoint: XYPosition, smallestX: number, smallestY: number): XYPosition {
-  let x = gridPoint.x * gridRatio
-  let y = gridPoint.y * gridRatio
-
-  let referenceX = smallestX
-  let referenceY = smallestY
-
-  if (referenceX < gridRatio) {
-    while (referenceX !== gridRatio) {
-      referenceX = referenceX + gridRatio
-      x = x - gridRatio
-    }
-  } else if (referenceX > gridRatio) {
-    while (referenceX !== gridRatio) {
-      referenceX = referenceX - gridRatio
-      x = x + gridRatio
-    }
-  }
-
-  if (referenceY < gridRatio) {
-    while (referenceY !== gridRatio) {
-      referenceY = referenceY + gridRatio
-      y = y - gridRatio
-    }
-  } else if (referenceY > gridRatio) {
-    while (referenceY !== gridRatio) {
-      referenceY = referenceY - gridRatio
-      y = y + gridRatio
-    }
-  }
-
-  return { x, y }
-}
diff --git a/packages/pathfinding-edge/src/edge/utils.ts b/packages/pathfinding-edge/src/edge/utils.ts
deleted file mode 100644
index fad261db5..000000000
--- a/packages/pathfinding-edge/src/edge/utils.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export function round(x: number, multiple = 10) {
-  return Math.round(x / multiple) * multiple
-}
-
-export function roundDown(x: number, multiple = 10) {
-  return Math.floor(x / multiple) * multiple
-}
-
-export function roundUp(x: number, multiple = 10) {
-  return Math.ceil(x / multiple) * multiple
-}
diff --git a/packages/pathfinding-edge/src/index.ts b/packages/pathfinding-edge/src/index.ts
deleted file mode 100644
index a1fc5a0ee..000000000
--- a/packages/pathfinding-edge/src/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as PathFindingEdge } from './edge/PathFindingEdge.vue'
-export { default as PerfectArrow } from './arrow/PerfectArrow.vue'
-export * from './types'
diff --git a/packages/pathfinding-edge/src/types.ts b/packages/pathfinding-edge/src/types.ts
deleted file mode 100644
index 62cd61f7f..000000000
--- a/packages/pathfinding-edge/src/types.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { EdgeProps, Position } from '@vue-flow/core'
-import type { CSSProperties } from 'vue'
-import type { ArrowOptions } from 'perfect-arrows'
-
-export interface PathFindingEdgeProps extends EdgeProps<never> {
-  id: string
-  source: string
-  target: string
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  selected?: boolean
-  animated?: boolean
-  sourcePosition: Position
-  targetPosition: Position
-  label?: EdgeProps['label']
-  labelStyle?: any
-  labelShowBg?: boolean
-  labelBgStyle?: any
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-  style?: CSSProperties
-  markerEnd: string
-  markerStart: string
-  sourceHandleId?: string
-  targetHandleId?: string
-}
-
-export interface PerfectArrowProps {
-  id: string
-  source: string
-  target: string
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  selected?: boolean
-  animated?: boolean
-  sourcePosition: Position
-  targetPosition: Position
-  label?: EdgeProps['label']
-  labelStyle?: any
-  labelShowBg?: boolean
-  labelBgStyle?: any
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-  style?: CSSProperties
-  markerEnd: string
-  markerStart: string
-  sourceHandleId?: string
-  targetHandleId?: string
-  options?: ArrowOptions
-}
diff --git a/packages/pathfinding-edge/tsconfig.json b/packages/pathfinding-edge/tsconfig.json
deleted file mode 100644
index f02b0a03e..000000000
--- a/packages/pathfinding-edge/tsconfig.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "@tooling/tsconfig/base",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "declarationDir": "./dist",
-    "types": [
-      "vite/client",
-      "vue/macros"
-    ]
-  },
-  "include": [
-    "./src"
-  ]
-}
diff --git a/packages/pathfinding-edge/vite.config.ts b/packages/pathfinding-edge/vite.config.ts
deleted file mode 100644
index 2b4c61720..000000000
--- a/packages/pathfinding-edge/vite.config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { resolve } from 'node:path'
-import { withConfig } from '@tooling/vite-config'
-
-export default withConfig({
-  build: {
-    lib: {
-      formats: ['es', 'cjs', 'iife'],
-      entry: resolve(__dirname, 'src/index.ts'),
-      fileName: 'vue-flow-pathfinding-edge',
-      name: 'VueFlowPathfindingEdge',
-    },
-  },
-})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a793ac53..16ba4a3b2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,18 +35,9 @@ importers:
       '@vercel/speed-insights':
         specifier: ^1.0.14
         version: 1.0.14(react@18.2.0)(vue-router@4.4.5(vue@3.5.12(typescript@5.4.5)))(vue@3.5.12(typescript@5.4.5))
-      '@vue-flow/background':
-        specifier: workspace:*
-        version: link:../packages/background
-      '@vue-flow/controls':
-        specifier: workspace:*
-        version: link:../packages/controls
       '@vue-flow/core':
         specifier: workspace:*
         version: link:../packages/core
-      '@vue-flow/minimap':
-        specifier: workspace:*
-        version: link:../packages/minimap
       '@vue-flow/node-resizer':
         specifier: workspace:*
         version: link:../packages/node-resizer
@@ -117,18 +108,9 @@ importers:
 
   examples/nuxt3:
     dependencies:
-      '@vue-flow/background':
-        specifier: workspace:*
-        version: link:../../packages/background
-      '@vue-flow/controls':
-        specifier: workspace:*
-        version: link:../../packages/controls
       '@vue-flow/core':
         specifier: workspace:*
         version: link:../../packages/core
-      '@vue-flow/minimap':
-        specifier: workspace:*
-        version: link:../../packages/minimap
     devDependencies:
       '@tooling/eslint-config':
         specifier: workspace:*
@@ -142,18 +124,9 @@ importers:
       '@quasar/extras':
         specifier: ^1.16.12
         version: 1.16.12
-      '@vue-flow/background':
-        specifier: workspace:*
-        version: link:../../packages/background
-      '@vue-flow/controls':
-        specifier: workspace:*
-        version: link:../../packages/controls
       '@vue-flow/core':
         specifier: workspace:*
         version: link:../../packages/core
-      '@vue-flow/minimap':
-        specifier: workspace:*
-        version: link:../../packages/minimap
       quasar:
         specifier: ^2.17.0
         version: 2.17.0
@@ -188,18 +161,9 @@ importers:
       '@dagrejs/dagre':
         specifier: ^1.1.4
         version: 1.1.4
-      '@vue-flow/background':
-        specifier: workspace:*
-        version: link:../../packages/background
-      '@vue-flow/controls':
-        specifier: workspace:*
-        version: link:../../packages/controls
       '@vue-flow/core':
         specifier: workspace:*
         version: link:../../packages/core
-      '@vue-flow/minimap':
-        specifier: workspace:*
-        version: link:../../packages/minimap
       '@vue-flow/node-resizer':
         specifier: workspace:*
         version: link:../../packages/node-resizer
@@ -241,53 +205,6 @@ importers:
         specifier: ^2.1.6
         version: 2.1.6(typescript@5.4.5)
 
-  packages/background:
-    dependencies:
-      vue:
-        specifier: ^3.3.0
-        version: 3.3.4
-    devDependencies:
-      '@tooling/eslint-config':
-        specifier: workspace:*
-        version: link:../../tooling/eslint-config
-      '@tooling/tsconfig':
-        specifier: workspace:*
-        version: link:../../tooling/tsconfig
-      '@tooling/vite-config':
-        specifier: workspace:*
-        version: link:../../tooling/vite-config
-      '@vue-flow/core':
-        specifier: workspace:*
-        version: link:../core
-      vue-tsc:
-        specifier: ^1.8.16
-        version: 1.8.16(typescript@5.4.5)
-
-  packages/controls:
-    dependencies:
-      vue:
-        specifier: ^3.3.0
-        version: 3.3.4
-    devDependencies:
-      '@tooling/eslint-config':
-        specifier: workspace:*
-        version: link:../../tooling/eslint-config
-      '@tooling/tsconfig':
-        specifier: workspace:*
-        version: link:../../tooling/tsconfig
-      '@tooling/vite-config':
-        specifier: workspace:*
-        version: link:../../tooling/vite-config
-      '@vue-flow/core':
-        specifier: workspace:*
-        version: link:../core
-      vite-svg-loader:
-        specifier: ^4.0.0
-        version: 4.0.0
-      vue-tsc:
-        specifier: ^1.8.16
-        version: 1.8.16(typescript@5.4.5)
-
   packages/core:
     dependencies:
       '@vueuse/core':
@@ -351,40 +268,9 @@ importers:
       vite:
         specifier: ^4.4.11
         version: 4.4.11(@types/node@20.14.2)(sass@1.79.4)(terser@5.21.0)
-      vue-tsc:
-        specifier: ^1.8.16
-        version: 1.8.16(typescript@5.4.5)
-
-  packages/minimap:
-    dependencies:
-      d3-selection:
-        specifier: ^3.0.0
-        version: 3.0.0
-      d3-zoom:
-        specifier: ^3.0.0
-        version: 3.0.0
-      vue:
-        specifier: ^3.3.0
-        version: 3.3.4
-    devDependencies:
-      '@tooling/eslint-config':
-        specifier: workspace:*
-        version: link:../../tooling/eslint-config
-      '@tooling/tsconfig':
-        specifier: workspace:*
-        version: link:../../tooling/tsconfig
-      '@tooling/vite-config':
-        specifier: workspace:*
-        version: link:../../tooling/vite-config
-      '@types/d3-selection':
-        specifier: ^3.0.7
-        version: 3.0.7
-      '@types/d3-zoom':
-        specifier: ^3.0.5
-        version: 3.0.5
-      '@vue-flow/core':
-        specifier: workspace:*
-        version: link:../core
+      vite-svg-loader:
+        specifier: ^5.1.0
+        version: 5.1.0(vue@3.3.4)
       vue-tsc:
         specifier: ^1.8.16
         version: 1.8.16(typescript@5.4.5)
@@ -445,51 +331,11 @@ importers:
         specifier: ^1.8.16
         version: 1.8.16(typescript@5.4.5)
 
-  packages/pathfinding-edge:
-    dependencies:
-      pathfinding:
-        specifier: ^0.4.18
-        version: 0.4.18
-      perfect-arrows:
-        specifier: ^0.3.7
-        version: 0.3.7
-      vue:
-        specifier: ^3.3.0
-        version: 3.3.4
-    devDependencies:
-      '@tooling/eslint-config':
-        specifier: workspace:*
-        version: link:../../tooling/eslint-config
-      '@tooling/tsconfig':
-        specifier: workspace:*
-        version: link:../../tooling/tsconfig
-      '@tooling/vite-config':
-        specifier: workspace:*
-        version: link:../../tooling/vite-config
-      '@types/pathfinding':
-        specifier: ^0.0.6
-        version: 0.0.6
-      '@vue-flow/core':
-        specifier: workspace:*
-        version: link:../core
-      vue-tsc:
-        specifier: ^1.8.16
-        version: 1.8.16(typescript@5.4.5)
-
   tests:
     dependencies:
-      '@vue-flow/background':
-        specifier: workspace:*
-        version: link:../packages/background
-      '@vue-flow/controls':
-        specifier: workspace:*
-        version: link:../packages/controls
       '@vue-flow/core':
         specifier: workspace:*
         version: link:../packages/core
-      '@vue-flow/minimap':
-        specifier: workspace:*
-        version: link:../packages/minimap
     devDependencies:
       '@tooling/eslint-config':
         specifier: workspace:*
@@ -2227,9 +2073,6 @@ packages:
   '@types/d3-transition@3.0.9':
     resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
 
-  '@types/d3-zoom@3.0.5':
-    resolution: {integrity: sha512-mIefdTLtxuWUWTbBupCUXPAXVPmi8/Uwrq41gQpRh0rD25GMU1ku+oTELqNY2NuuiI0F3wXC5e1liBQi7YS7XQ==}
-
   '@types/d3-zoom@3.0.8':
     resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
 
@@ -2308,9 +2151,6 @@ packages:
   '@types/normalize-package-data@2.4.2':
     resolution: {integrity: sha512-lqa4UEhhv/2sjjIQgjX8B+RBjj47eo0mzGasklVJ78UKGQY1r0VpB9XHDaZZO9qzEFDdy4MrXLuEaSmPrPSe/A==}
 
-  '@types/pathfinding@0.0.6':
-    resolution: {integrity: sha512-yk2LRAKAOW6m1g/4le8tk8go6wjNmCq2EA1l6Rw3tkBautda3FkBzgCLdSNUPiTZPkjxI/OYBwHmJWoYUSk7RQ==}
-
   '@types/qs@6.9.8':
     resolution: {integrity: sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg==}
 
@@ -4704,9 +4544,6 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
-  heap@0.2.5:
-    resolution: {integrity: sha512-G7HLD+WKcrOyJP5VQwYZNC3Z6FcQ7YYjEFiFoIj8PfEr73mu421o8B1N5DKUcc8K37EsJ2XXWA8DtrDz/2dReg==}
-
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -5936,16 +5773,9 @@ packages:
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
-  pathfinding@0.4.18:
-    resolution: {integrity: sha512-R0TGEQ9GRcFCDvAWlJAWC+KGJ9SLbW4c0nuZRcioVlXVTlw+F5RvXQ8SQgSqI9KXWC1ew95vgmIiyaWTlCe9Ag==}
-
   pend@1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
 
-  perfect-arrows@0.3.7:
-    resolution: {integrity: sha512-wEN2gerTPVWl3yqoFEF8OeGbg3aRe2sxNUi9rnyYrCsL4JcI6K2tBDezRtqVrYG0BNtsWLdYiiTrYm+X//8yLQ==}
-    engines: {node: '>=10'}
-
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
@@ -6865,11 +6695,6 @@ packages:
   svg-tags@1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
 
-  svgo@3.0.2:
-    resolution: {integrity: sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   svgo@3.2.0:
     resolution: {integrity: sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==}
     engines: {node: '>=14.0.0'}
@@ -7446,9 +7271,6 @@ packages:
     peerDependencies:
       vite: ^2.0.1 || ^3.0.0 || ^4.0.0 || ^5.0.0
 
-  vite-svg-loader@4.0.0:
-    resolution: {integrity: sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA==}
-
   vite-svg-loader@5.1.0:
     resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==}
     peerDependencies:
@@ -9750,11 +9572,6 @@ snapshots:
     dependencies:
       '@types/d3-selection': 3.0.11
 
-  '@types/d3-zoom@3.0.5':
-    dependencies:
-      '@types/d3-interpolate': 3.0.4
-      '@types/d3-selection': 3.0.11
-
   '@types/d3-zoom@3.0.8':
     dependencies:
       '@types/d3-interpolate': 3.0.4
@@ -9837,8 +9654,6 @@ snapshots:
 
   '@types/normalize-package-data@2.4.2': {}
 
-  '@types/pathfinding@0.0.6': {}
-
   '@types/qs@6.9.8': {}
 
   '@types/range-parser@1.2.5': {}
@@ -10922,7 +10737,7 @@ snapshots:
 
   builtins@5.0.1:
     dependencies:
-      semver: 7.6.0
+      semver: 7.6.3
 
   bundle-name@4.1.0:
     dependencies:
@@ -12757,8 +12572,6 @@ snapshots:
 
   he@1.2.0: {}
 
-  heap@0.2.5: {}
-
   hookable@5.5.3: {}
 
   hosted-git-info@2.8.9: {}
@@ -14224,14 +14037,8 @@ snapshots:
 
   pathe@1.1.2: {}
 
-  pathfinding@0.4.18:
-    dependencies:
-      heap: 0.2.5
-
   pend@1.2.0: {}
 
-  perfect-arrows@0.3.7: {}
-
   perfect-debounce@1.0.0: {}
 
   performance-now@2.1.0: {}
@@ -15189,15 +14996,6 @@ snapshots:
 
   svg-tags@1.0.0: {}
 
-  svgo@3.0.2:
-    dependencies:
-      '@trysound/sax': 0.2.0
-      commander: 7.2.0
-      css-select: 5.1.0
-      css-tree: 2.3.1
-      csso: 5.0.5
-      picocolors: 1.0.0
-
   svgo@3.2.0:
     dependencies:
       '@trysound/sax': 0.2.0
@@ -15864,10 +15662,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-svg-loader@4.0.0:
+  vite-svg-loader@5.1.0(vue@3.3.4):
     dependencies:
-      '@vue/compiler-sfc': 3.3.4
-      svgo: 3.0.2
+      svgo: 3.2.0
+      vue: 3.3.4
 
   vite-svg-loader@5.1.0(vue@3.5.11(typescript@5.4.5)):
     dependencies:
diff --git a/tests/cypress/component/3-additional-components/background/App.vue b/tests/cypress/component/3-additional-components/background/App.vue
index d539c1eab..ef599e5cc 100644
--- a/tests/cypress/component/3-additional-components/background/App.vue
+++ b/tests/cypress/component/3-additional-components/background/App.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+import { Background, VueFlow } from '@vue-flow/core'
 </script>
 
 <template>
diff --git a/tests/cypress/component/3-additional-components/controls/App.vue b/tests/cypress/component/3-additional-components/controls/App.vue
index 2daa64668..b7a959616 100644
--- a/tests/cypress/component/3-additional-components/controls/App.vue
+++ b/tests/cypress/component/3-additional-components/controls/App.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { VueFlow } from '@vue-flow/core'
-import { Controls } from '@vue-flow/controls'
+import { Controls, VueFlow } from '@vue-flow/core'
 </script>
 
 <template>
diff --git a/tests/cypress/component/3-additional-components/minimap/App.vue b/tests/cypress/component/3-additional-components/minimap/App.vue
index 0436c6d44..29dfe783f 100644
--- a/tests/cypress/component/3-additional-components/minimap/App.vue
+++ b/tests/cypress/component/3-additional-components/minimap/App.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { VueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
+import { MiniMap, VueFlow } from '@vue-flow/core'
 
 defineProps({
   nodes: {
diff --git a/tests/cypress/env.d.ts b/tests/cypress/env.d.ts
new file mode 100644
index 000000000..6cd694c58
--- /dev/null
+++ b/tests/cypress/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+/// <reference types="vue/macros-global" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/tests/package.json b/tests/package.json
index c9024d4c0..f87171434 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -8,10 +8,7 @@
     "lint": "eslint --ext .js,.ts ./"
   },
   "dependencies": {
-    "@vue-flow/background": "workspace:*",
-    "@vue-flow/controls": "workspace:*",
-    "@vue-flow/core": "workspace:*",
-    "@vue-flow/minimap": "workspace:*"
+    "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",