From 000dd5c9ba635232ad6cacd3943394436868b25b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 13 Dec 2022 15:21:10 +0100
Subject: [PATCH] refactor: replace `additional-components` package occurrences

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 docs/components/DocsRepl.vue                  |  6 +-
 docs/components/examples/basic/App.vue        |  6 +-
 docs/components/examples/custom-node/App.vue  |  2 +-
 docs/components/examples/edges/App.vue        |  2 +-
 docs/components/examples/empty/App.vue        |  5 +-
 docs/components/examples/hidden/App.vue       |  4 +-
 docs/components/examples/horizontal/App.vue   |  4 +-
 docs/components/examples/multi/Flow.vue       |  4 +-
 docs/components/examples/nested/App.vue       |  4 +-
 .../examples/save-restore/Controls.vue        |  3 +-
 docs/components/examples/stress/App.vue       |  5 +-
 docs/components/examples/update-edge/App.vue  |  2 +-
 docs/components/home/flows/Additional.vue     |  4 +-
 docs/components/home/flows/Basic.vue          |  4 +-
 docs/components/home/flows/Intro.vue          |  2 +-
 docs/components/home/flows/Nested.vue         |  3 +-
 docs/components/home/flows/RGB.vue            |  7 +-
 docs/package.json                             |  3 +
 docs/src/.vitepress/plugins/copy.ts           | 12 ++-
 docs/src/.vitepress/theme/index.ts            |  2 +
 docs/typedoc.json                             |  4 +-
 docs/typedoc.md.json                          |  4 +-
 .../background/App.vue                        |  2 +-
 .../3-additional-components/controls/App.vue  |  2 +-
 .../3-additional-components/minimap/App.vue   |  2 +-
 e2e/package.json                              |  6 +-
 examples/nuxt3/components/BasicFlow.vue       |  5 --
 examples/nuxt3/package.json                   |  6 +-
 examples/quasar/package.json                  |  4 +-
 examples/quasar/src/components/BasicFlow.vue  |  5 --
 .../quasar/src/components/CustomizedFlow.vue  |  4 -
 examples/vite/index.css                       |  3 +
 examples/vite/package.json                    |  4 +-
 examples/vite/src/Basic/Basic.vue             |  7 +-
 examples/vite/src/Basic/BasicOptionsAPI.vue   |  5 +-
 .../CustomConnectionLine.vue                  |  2 +-
 examples/vite/src/CustomNode/CustomNode.vue   |  5 +-
 examples/vite/src/DragNDrop/DnD.vue           |  2 +-
 .../vite/src/EdgeTypes/EdgeTypesExample.vue   | 14 ++-
 examples/vite/src/Edges/EdgesExample.vue      |  5 +-
 examples/vite/src/Empty/EmptyExample.vue      |  7 +-
 .../vite/src/FloatingEdges/FloatingEdges.vue  |  5 +-
 examples/vite/src/Hidden/HiddenExample.vue    |  4 +-
 .../src/Interaction/InteractionExample.vue    |  3 +-
 .../vite/src/Layouting/LayoutingExample.vue   |  5 +-
 examples/vite/src/MultiFlows/Flow.vue         |  2 +-
 examples/vite/src/Nesting/Nesting.vue         |  4 +-
 examples/vite/src/Overview/Overview.vue       |  4 +-
 .../vite/src/Provider/ProviderExample.vue     |  5 +-
 examples/vite/src/Stress/StressExample.vue    |  6 +-
 .../UpdatableEdge/UpdatableEdgeExample.vue    |  4 +-
 packages/vue-flow/package.json                |  6 +-
 packages/vue-flow/src/index.ts                |  7 +-
 pnpm-lock.yaml                                | 89 ++++++++++++++-----
 54 files changed, 218 insertions(+), 108 deletions(-)

diff --git a/docs/components/DocsRepl.vue b/docs/components/DocsRepl.vue
index 65051d64..91c5da48 100644
--- a/docs/components/DocsRepl.vue
+++ b/docs/components/DocsRepl.vue
@@ -12,6 +12,8 @@ const { vueFlowVersion } = useVueFlow()
 
 let css = `@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/style.css';
 @import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/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';
 
 html,
 body,
@@ -72,7 +74,9 @@ onMounted(async () => {
   // pre-set import map
   await store.setImportMap({
     imports: {
-      '@vue-flow/additional-components': `${location.origin}/vue-flow-additional-components.mjs`,
+      '@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-toolbar': `${location.origin}/vue-flow-node-toolbar.mjs`,
       ...additionalImports,
diff --git a/docs/components/examples/basic/App.vue b/docs/components/examples/basic/App.vue
index 52485f07..faf9ea38 100644
--- a/docs/components/examples/basic/App.vue
+++ b/docs/components/examples/basic/App.vue
@@ -1,6 +1,8 @@
 <script setup>
-import { Background, Controls, MiniMap, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, 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 { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 
diff --git a/docs/components/examples/custom-node/App.vue b/docs/components/examples/custom-node/App.vue
index 6a267ce6..c22e08dc 100644
--- a/docs/components/examples/custom-node/App.vue
+++ b/docs/components/examples/custom-node/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { MiniMap } from '@vue-flow/additional-components'
+import { MiniMap } from '@vue-flow/minimap'
 import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { h, onMounted, ref } from 'vue'
 import ColorSelectorNode from './CustomNode.vue'
diff --git a/docs/components/examples/edges/App.vue b/docs/components/examples/edges/App.vue
index dc9d0a55..153df012 100644
--- a/docs/components/examples/edges/App.vue
+++ b/docs/components/examples/edges/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
 import { MarkerType, VueFlow } from '@vue-flow/core'
 import { h, ref } from 'vue'
 import CustomEdge from './CustomEdge.vue'
diff --git a/docs/components/examples/empty/App.vue b/docs/components/examples/empty/App.vue
index ef79108e..7d40abd3 100644
--- a/docs/components/examples/empty/App.vue
+++ b/docs/components/examples/empty/App.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { Background, BackgroundVariant, MiniMap, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant } from '@vue-flow/background'
+import { MiniMap } from '@vue-flow/minimap'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
diff --git a/docs/components/examples/hidden/App.vue b/docs/components/examples/hidden/App.vue
index a0f8efa3..f144f250 100644
--- a/docs/components/examples/hidden/App.vue
+++ b/docs/components/examples/hidden/App.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { Background, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Panel, PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref, watch } from 'vue'
 
 const isHidden = ref(false)
diff --git a/docs/components/examples/horizontal/App.vue b/docs/components/examples/horizontal/App.vue
index 14e2d538..5cb9e32c 100644
--- a/docs/components/examples/horizontal/App.vue
+++ b/docs/components/examples/horizontal/App.vue
@@ -1,6 +1,8 @@
 <script setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { 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 { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 
diff --git a/docs/components/examples/multi/Flow.vue b/docs/components/examples/multi/Flow.vue
index 2f1d89be..1d4e6f80 100644
--- a/docs/components/examples/multi/Flow.vue
+++ b/docs/components/examples/multi/Flow.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { Background, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, isNode } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Panel, PanelPosition, VueFlow, isNode } from '@vue-flow/core'
 import { ref } from 'vue'
 
 const elements = ref([
diff --git a/docs/components/examples/nested/App.vue b/docs/components/examples/nested/App.vue
index db76b501..9f644207 100644
--- a/docs/components/examples/nested/App.vue
+++ b/docs/components/examples/nested/App.vue
@@ -1,6 +1,8 @@
 <script setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { 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 { onMounted } from 'vue'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
diff --git a/docs/components/examples/save-restore/Controls.vue b/docs/components/examples/save-restore/Controls.vue
index 92e161cd..ac3fa915 100644
--- a/docs/components/examples/save-restore/Controls.vue
+++ b/docs/components/examples/save-restore/Controls.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { Panel, PanelPosition } from '@vue-flow/additional-components'
-import { useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, useVueFlow } from '@vue-flow/core'
 
 const flowKey = 'example-flow'
 
diff --git a/docs/components/examples/stress/App.vue b/docs/components/examples/stress/App.vue
index dbf23198..7e839422 100644
--- a/docs/components/examples/stress/App.vue
+++ b/docs/components/examples/stress/App.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { Background, MiniMap, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { MiniMap } from '@vue-flow/minimap'
 import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'
 
diff --git a/docs/components/examples/update-edge/App.vue b/docs/components/examples/update-edge/App.vue
index 46a9fd97..f41ab20c 100644
--- a/docs/components/examples/update-edge/App.vue
+++ b/docs/components/examples/update-edge/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 
diff --git a/docs/components/home/flows/Additional.vue b/docs/components/home/flows/Additional.vue
index 7fdd6463..85617655 100644
--- a/docs/components/home/flows/Additional.vue
+++ b/docs/components/home/flows/Additional.vue
@@ -2,7 +2,9 @@
 import { ref } from 'vue'
 import type { Elements } from '@vue-flow/core'
 import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 
 const emit = defineEmits(['pane'])
 
diff --git a/docs/components/home/flows/Basic.vue b/docs/components/home/flows/Basic.vue
index afe6c6f2..8c7838cf 100644
--- a/docs/components/home/flows/Basic.vue
+++ b/docs/components/home/flows/Basic.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { ClassFunc, GraphEdge, GraphNode, StyleFunc } from '@vue-flow/core'
 import { ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, Controls } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+
 import Cross from '~icons/mdi/window-close'
 
 const emit = defineEmits(['pane'])
diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index 8a4c6724..4a61d61f 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -3,7 +3,7 @@ import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import confetti from 'canvas-confetti'
 import colors from 'windicss/colors'
-import { Background } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
 import { cheer, fireworks } from './confetti'
 import Heart from '~icons/mdi/heart'
 
diff --git a/docs/components/home/flows/Nested.vue b/docs/components/home/flows/Nested.vue
index 5f2a96cb..93237cfc 100644
--- a/docs/components/home/flows/Nested.vue
+++ b/docs/components/home/flows/Nested.vue
@@ -1,7 +1,8 @@
 <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 { breakpointsTailwind } from '@vueuse/core'
-import { Background, Controls } from '@vue-flow/additional-components'
 
 const emit = defineEmits(['pane'])
 
diff --git a/docs/components/home/flows/RGB.vue b/docs/components/home/flows/RGB.vue
index 36219c8e..c862a906 100644
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -1,8 +1,11 @@
 <script lang="ts" setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
-import type { MiniMapNodeFunc } from '@vue-flow/additional-components'
-import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import { 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'
 import RGBOutputNode from '../nodes/Output.vue'
diff --git a/docs/package.json b/docs/package.json
index 33e3cffb..28697c69 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -16,7 +16,10 @@
     "@animxyz/vue3": "^0.6.7",
     "@stackblitz/sdk": "^1.8.0",
     "@vercel/analytics": "^0.1.5",
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
+    "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*",
     "@vue/repl": "1.1.2",
     "blobity": "^0.2.1",
diff --git a/docs/src/.vitepress/plugins/copy.ts b/docs/src/.vitepress/plugins/copy.ts
index 4c64c0b1..7dd8f925 100644
--- a/docs/src/.vitepress/plugins/copy.ts
+++ b/docs/src/.vitepress/plugins/copy.ts
@@ -9,8 +9,16 @@ export function copyVueFlowPlugin(): Plugin {
       ;[
         { path: '../../../node_modules/@vue-flow/core/dist/', pkgName: 'vue-flow-core.mjs' },
         {
-          path: '../../../node_modules/@vue-flow/additional-components/dist/',
-          pkgName: 'vue-flow-additional-components.mjs',
+          path: '../../../node_modules/@vue-flow/background/dist/',
+          pkgName: 'vue-flow-background.mjs',
+        },
+        {
+          path: '../../../node_modules/@vue-flow/controls/dist/',
+          pkgName: 'vue-flow-controls.mjs',
+        },
+        {
+          path: '../../../node_modules/@vue-flow/minimap/dist/',
+          pkgName: 'vue-flow-minimap.mjs',
         },
         {
           path: '../../../node_modules/@vue-flow/node-toolbar/dist/',
diff --git a/docs/src/.vitepress/theme/index.ts b/docs/src/.vitepress/theme/index.ts
index 42d2ecbf..1aadb4a1 100644
--- a/docs/src/.vitepress/theme/index.ts
+++ b/docs/src/.vitepress/theme/index.ts
@@ -7,6 +7,8 @@ import 'virtual:windi.css'
 import '@animxyz/core'
 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 './../../assets/index.css'
 
 const CustomTheme = {
diff --git a/docs/typedoc.json b/docs/typedoc.json
index eb938b16..3b5b4b80 100644
--- a/docs/typedoc.json
+++ b/docs/typedoc.json
@@ -6,7 +6,9 @@
   ],
   "entryPoints": [
     "../packages/core/src/index.ts",
-    "../packages/additional-components/src/index.ts",
+    "../packages/background/src/index.ts",
+    "../packages/controls/src/index.ts",
+    "../packages/minimap/src/index.ts",
     "../packages/node-toolbar/src/index.ts"
   ],
   "categorizeByGroup": true,
diff --git a/docs/typedoc.md.json b/docs/typedoc.md.json
index 83d1d1f5..1c37340e 100644
--- a/docs/typedoc.md.json
+++ b/docs/typedoc.md.json
@@ -7,7 +7,9 @@
   ],
   "entryPoints": [
     "../packages/core/src/index.ts",
-    "../packages/additional-components/src/index.ts",
+    "../packages/background/src/index.ts",
+    "../packages/controls/src/index.ts",
+    "../packages/minimap/src/index.ts",
     "../packages/node-toolbar/src/index.ts"
   ],
   "allReflectionsHaveOwnDocument": true,
diff --git a/e2e/cypress/component/3-additional-components/background/App.vue b/e2e/cypress/component/3-additional-components/background/App.vue
index a23135ac..d539c1ea 100644
--- a/e2e/cypress/component/3-additional-components/background/App.vue
+++ b/e2e/cypress/component/3-additional-components/background/App.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
 </script>
 
 <template>
diff --git a/e2e/cypress/component/3-additional-components/controls/App.vue b/e2e/cypress/component/3-additional-components/controls/App.vue
index 057159bd..2daa6466 100644
--- a/e2e/cypress/component/3-additional-components/controls/App.vue
+++ b/e2e/cypress/component/3-additional-components/controls/App.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { VueFlow } from '@vue-flow/core'
-import { Controls } from '@vue-flow/additional-components'
+import { Controls } from '@vue-flow/controls'
 </script>
 
 <template>
diff --git a/e2e/cypress/component/3-additional-components/minimap/App.vue b/e2e/cypress/component/3-additional-components/minimap/App.vue
index 8a037f26..0436c6d4 100644
--- a/e2e/cypress/component/3-additional-components/minimap/App.vue
+++ b/e2e/cypress/component/3-additional-components/minimap/App.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { VueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/additional-components'
+import { MiniMap } from '@vue-flow/minimap'
 
 defineProps({
   nodes: {
diff --git a/e2e/package.json b/e2e/package.json
index 97864fc8..be964fa6 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -7,8 +7,10 @@
     "open": "cypress open"
   },
   "dependencies": {
-    "@vue-flow/additional-components": "workspace:*",
-    "@vue-flow/core": "workspace:*"
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
+    "@vue-flow/core": "workspace:*",
+    "@vue-flow/minimap": "workspace:*"
   },
   "devDependencies": {
     "cypress": "^10.9.0",
diff --git a/examples/nuxt3/components/BasicFlow.vue b/examples/nuxt3/components/BasicFlow.vue
index 6b36b34c..f9cfb1b5 100644
--- a/examples/nuxt3/components/BasicFlow.vue
+++ b/examples/nuxt3/components/BasicFlow.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
@@ -67,10 +66,6 @@ const toggleClass = () => {
 
 <template>
   <VueFlow v-model="elements" class="basicflow" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
-    <Background pattern-color="#aaa" gap="8" />
-    <MiniMap />
-    <Controls />
-
     <div class="controls">
       <button style="background-color: #113285; color: white" @click="resetTransform">reset transform</button>
       <button style="background-color: #6f3381; color: white" @click="updatePos">update positions</button>
diff --git a/examples/nuxt3/package.json b/examples/nuxt3/package.json
index d0b7fc8a..f2bd294f 100644
--- a/examples/nuxt3/package.json
+++ b/examples/nuxt3/package.json
@@ -9,8 +9,10 @@
     "dev": "nuxt dev"
   },
   "dependencies": {
-    "@vue-flow/additional-components": "workspace:*",
-    "@vue-flow/core": "workspace:*"
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
+    "@vue-flow/core": "workspace:*",
+    "@vue-flow/minimap": "workspace:*"
   },
   "devDependencies": {
     "nuxt": "3.0.0-rc.11"
diff --git a/examples/quasar/package.json b/examples/quasar/package.json
index d019b5e3..61a7e1a1 100644
--- a/examples/quasar/package.json
+++ b/examples/quasar/package.json
@@ -10,8 +10,10 @@
     "lint": "eslint --ext .js,.ts,.vue ./"
   },
   "dependencies": {
-    "@vue-flow/additional-components": "workspace:*",
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
+    "@vue-flow/minimap": "workspace:*",
     "@quasar/extras": "^1.15.4",
     "quasar": "^2.9.2",
     "vue": "^3.2.37",
diff --git a/examples/quasar/src/components/BasicFlow.vue b/examples/quasar/src/components/BasicFlow.vue
index e8d62c78..c9baf22b 100644
--- a/examples/quasar/src/components/BasicFlow.vue
+++ b/examples/quasar/src/components/BasicFlow.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
@@ -67,10 +66,6 @@ const toggleClass = () => {
 
 <template>
   <VueFlow v-model="elements" class="basicflow" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
-    <Background pattern-color="#aaa" gap="8" />
-    <MiniMap />
-    <Controls />
-
     <div class="controls">
       <button style="background-color: #113285; color: white" @click="resetTransform">reset transform</button>
       <button style="background-color: #6f3381; color: white" @click="updatePos">update positions</button>
diff --git a/examples/quasar/src/components/CustomizedFlow.vue b/examples/quasar/src/components/CustomizedFlow.vue
index c7926c8c..0c134722 100644
--- a/examples/quasar/src/components/CustomizedFlow.vue
+++ b/examples/quasar/src/components/CustomizedFlow.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './customized-elements.js'
@@ -78,9 +77,6 @@ const toggleClass = () => {
         </q-card-section>
       </q-card>
     </template>
-    <Background pattern-color="#aaa" gap="8" />
-    <MiniMap />
-    <Controls />
 
     <div class="controls">
       <button style="background-color: #113285; color: white" @click="resetTransform">reset transform</button>
diff --git a/examples/vite/index.css b/examples/vite/index.css
index 7d29fe65..69e2a619 100644
--- a/examples/vite/index.css
+++ b/examples/vite/index.css
@@ -4,6 +4,9 @@
 /* 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;
   padding: 5px;
diff --git a/examples/vite/package.json b/examples/vite/package.json
index 255ae5a0..8c1477d1 100644
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@@ -8,8 +8,10 @@
   },
   "dependencies": {
     "vueflow": "workspace:*",
-    "@vue-flow/additional-components": "workspace:*",
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
     "@vue-flow/core": "workspace:*",
+    "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*"
   },
   "devDependencies": {
diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
index 32503317..c05bdb24 100644
--- a/examples/vite/src/Basic/Basic.vue
+++ b/examples/vite/src/Basic/Basic.vue
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
-import type { Elements } from '@vue-flow/core'
 import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import type { Elements } from '@vue-flow/core'
+
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
diff --git a/examples/vite/src/Basic/BasicOptionsAPI.vue b/examples/vite/src/Basic/BasicOptionsAPI.vue
index b262ff2c..d19c8e5a 100644
--- a/examples/vite/src/Basic/BasicOptionsAPI.vue
+++ b/examples/vite/src/Basic/BasicOptionsAPI.vue
@@ -1,7 +1,10 @@
 <script lang="ts">
 import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
 import { VueFlow, addEdge, isNode } from '@vue-flow/core'
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',
diff --git a/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue b/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
index 8d31b907..16ba3027 100644
--- a/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
+++ b/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
 import { VueFlow } from '@vue-flow/core'
-import { Background, BackgroundVariant } from '@vue-flow/additional-components'
+import { Background, BackgroundVariant } from '@vue-flow/background'
 import ConnectionLine from './ConnectionLine.vue'
 
 const elements = ref<Elements>([
diff --git a/examples/vite/src/CustomNode/CustomNode.vue b/examples/vite/src/CustomNode/CustomNode.vue
index 19097c94..727de9a7 100644
--- a/examples/vite/src/CustomNode/CustomNode.vue
+++ b/examples/vite/src/CustomNode/CustomNode.vue
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
 import type { Elements, Node, SnapGrid } from '@vue-flow/core'
 import { ConnectionMode, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
-import { Controls, MiniMap } from '@vue-flow/additional-components'
+
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
+
 import ColorSelectorNode from './ColorSelectorNode.vue'
 
 const elements = ref<Elements>([])
diff --git a/examples/vite/src/DragNDrop/DnD.vue b/examples/vite/src/DragNDrop/DnD.vue
index 5c96a54e..94e6d20c 100644
--- a/examples/vite/src/DragNDrop/DnD.vue
+++ b/examples/vite/src/DragNDrop/DnD.vue
@@ -6,7 +6,7 @@ import Sidebar from './Sidebar.vue'
 let id = 0
 const getId = () => `dndnode_${id++}`
 
-const { onConnect, nodes, edges, addEdges, addNodes, project } = useVueFlow({
+const { onConnect, addEdges, addNodes, project } = useVueFlow({
   nodes: [
     {
       id: '1',
diff --git a/examples/vite/src/EdgeTypes/EdgeTypesExample.vue b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
index 597e2985..fd1a222f 100644
--- a/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
+++ b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
@@ -1,19 +1,15 @@
 <script lang="ts" setup>
-import type { VueFlowStore } from '@vue-flow/core'
 import { VueFlow } from '@vue-flow/core'
-import { Controls, MiniMap } from '@vue-flow/additional-components'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
+
 import { getElements } from './utils'
 
-const onLoad = (flowInstance: VueFlowStore) => {
-  flowInstance.fitView()
-  console.log(flowInstance.getElements.value)
-}
-
-const elements = getElements()
+const elements = ref(getElements())
 </script>
 
 <template>
-  <VueFlow v-model="elements" :min-zoom="0.2" @pane-ready="onLoad">
+  <VueFlow v-model="elements" :min-zoom="0.2" fit-view-on-init>
     <MiniMap />
     <Controls />
   </VueFlow>
diff --git a/examples/vite/src/Edges/EdgesExample.vue b/examples/vite/src/Edges/EdgesExample.vue
index e0f4ef07..6a7bcd6a 100644
--- a/examples/vite/src/Edges/EdgesExample.vue
+++ b/examples/vite/src/Edges/EdgesExample.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { VueFlow } from '@vue-flow/core'
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
+
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import { initialEdges, initialNodes } from './initial-elements'
diff --git a/examples/vite/src/Empty/EmptyExample.vue b/examples/vite/src/Empty/EmptyExample.vue
index 36f93365..d5dffc1f 100644
--- a/examples/vite/src/Empty/EmptyExample.vue
+++ b/examples/vite/src/Empty/EmptyExample.vue
@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import type { Node } from '@vue-flow/core'
 import { VueFlow, useVueFlow } from '@vue-flow/core/src/index'
-import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
 
-const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
+import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
+
+const { nodes, addNodes, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
 onConnect((params) => addEdges([params]))
 onPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
diff --git a/examples/vite/src/FloatingEdges/FloatingEdges.vue b/examples/vite/src/FloatingEdges/FloatingEdges.vue
index 38cbca11..8a1a8f4b 100644
--- a/examples/vite/src/FloatingEdges/FloatingEdges.vue
+++ b/examples/vite/src/FloatingEdges/FloatingEdges.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
+
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'
diff --git a/examples/vite/src/Hidden/HiddenExample.vue b/examples/vite/src/Hidden/HiddenExample.vue
index 7ffb44c2..4510e9b7 100644
--- a/examples/vite/src/Hidden/HiddenExample.vue
+++ b/examples/vite/src/Hidden/HiddenExample.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Controls, MiniMap } from '@vue-flow/additional-components'
+
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 
 const isHidden = ref(false)
 
diff --git a/examples/vite/src/Interaction/InteractionExample.vue b/examples/vite/src/Interaction/InteractionExample.vue
index 6f1f0c57..7d0199b1 100644
--- a/examples/vite/src/Interaction/InteractionExample.vue
+++ b/examples/vite/src/Interaction/InteractionExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { Controls, MiniMap } from '@vue-flow/additional-components'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 
 const {
   nodesDraggable,
diff --git a/examples/vite/src/Layouting/LayoutingExample.vue b/examples/vite/src/Layouting/LayoutingExample.vue
index 0046efec..c187acd3 100644
--- a/examples/vite/src/Layouting/LayoutingExample.vue
+++ b/examples/vite/src/Layouting/LayoutingExample.vue
@@ -2,7 +2,10 @@
 import dagre from 'dagre'
 import type { CoordinateExtent, Elements } from '@vue-flow/core'
 import { ConnectionMode, Position, VueFlow, isNode } from '@vue-flow/core'
-import { Controls } from '@vue-flow/additional-components'
+import { Controls } from '@vue-flow/controls'
+
+import '@vue-flow/controls/dist/style.css'
+
 import initialElements from './initial-elements'
 
 const dagreGraph = new dagre.graphlib.Graph()
diff --git a/examples/vite/src/MultiFlows/Flow.vue b/examples/vite/src/MultiFlows/Flow.vue
index a90f077d..cbb63b58 100644
--- a/examples/vite/src/MultiFlows/Flow.vue
+++ b/examples/vite/src/MultiFlows/Flow.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Elements } from '@vue-flow/core'
 import { VueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
 
 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 dbe3f78f..1fd0b669 100644
--- a/examples/vite/src/Nesting/Nesting.vue
+++ b/examples/vite/src/Nesting/Nesting.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 
 const { onConnect, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,
diff --git a/examples/vite/src/Overview/Overview.vue b/examples/vite/src/Overview/Overview.vue
index dfebd211..9fc5a2a0 100644
--- a/examples/vite/src/Overview/Overview.vue
+++ b/examples/vite/src/Overview/Overview.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { Connection, Edge, Elements, FlowEvents, Node, SnapGrid, Styles, VueFlowStore } from '@vue-flow/core'
 import { MarkerType, VueFlow, addEdge } from '@vue-flow/core'
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)
diff --git a/examples/vite/src/Provider/ProviderExample.vue b/examples/vite/src/Provider/ProviderExample.vue
index b6e70a85..eb152181 100644
--- a/examples/vite/src/Provider/ProviderExample.vue
+++ b/examples/vite/src/Provider/ProviderExample.vue
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
 import type { Elements, VueFlowStore } from '@vue-flow/core'
 import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Controls } from '@vue-flow/additional-components'
+import { Controls } from '@vue-flow/controls'
+
+import '@vue-flow/controls/dist/style.css'
+
 import Sidebar from './Sidebar.vue'
 
 const onLoad = (flowInstance: VueFlowStore) => console.log('flow loaded:', flowInstance)
diff --git a/examples/vite/src/Stress/StressExample.vue b/examples/vite/src/Stress/StressExample.vue
index 190bb89b..60eecfef 100644
--- a/examples/vite/src/Stress/StressExample.vue
+++ b/examples/vite/src/Stress/StressExample.vue
@@ -1,13 +1,13 @@
 <script setup>
-import { Background, MiniMap, Panel, PanelPosition } from '@vue-flow/additional-components'
-import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, PanelPosition, 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)
 const elements = ref([...nodes, ...edges])
 
-const { onPaneReady, dimensions, onNodeClick, getEdges, fitView } = useVueFlow()
+const { onPaneReady, dimensions, fitView } = useVueFlow()
 
 onPaneReady((i) => {
   i.fitView({
diff --git a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
index 3d8a9998..766c4228 100644
--- a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
 import { ConnectionMode, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
-import { Controls } from '@vue-flow/additional-components'
+import { Controls } from '@vue-flow/controls'
+
+import '@vue-flow/controls/dist/style.css'
 
 const initialElements: Elements = [
   {
diff --git a/packages/vue-flow/package.json b/packages/vue-flow/package.json
index a1b5b241..c5fd8c02 100644
--- a/packages/vue-flow/package.json
+++ b/packages/vue-flow/package.json
@@ -35,8 +35,10 @@
     "vue": "^3.2.25"
   },
   "dependencies": {
-    "@vue-flow/additional-components": "workspace:*",
-    "@vue-flow/core": "workspace:*"
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
+    "@vue-flow/core": "workspace:*",
+    "@vue-flow/minimap": "workspace:*"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.13",
diff --git a/packages/vue-flow/src/index.ts b/packages/vue-flow/src/index.ts
index 82578650..5b0d106b 100644
--- a/packages/vue-flow/src/index.ts
+++ b/packages/vue-flow/src/index.ts
@@ -1,4 +1,9 @@
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
-export * from '@vue-flow/additional-components'
+import '@vue-flow/controls/dist/style.css'
+import '@vue-flow/minimap/dist/style.css'
+
+export * from '@vue-flow/background'
+export * from '@vue-flow/controls'
+export * from '@vue-flow/minimap'
 export * from '@vue-flow/core'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 78c47ea5..e8d1d9b8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,8 +38,10 @@ importers:
       '@types/canvas-confetti': ^1.4.3
       '@types/node': ^18.7.8
       '@vercel/analytics': ^0.1.5
-      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/background': workspace:*
+      '@vue-flow/controls': workspace:*
       '@vue-flow/core': workspace:*
+      '@vue-flow/minimap': workspace:*
       '@vue-flow/node-toolbar': workspace:*
       '@vue/repl': 1.1.2
       '@windicss/plugin-scrollbar': ^1.2.3
@@ -65,8 +67,10 @@ importers:
       '@animxyz/vue3': 0.6.7_vue@3.2.37
       '@stackblitz/sdk': 1.8.0
       '@vercel/analytics': 0.1.5_react@18.2.0
-      '@vue-flow/additional-components': link:../packages/additional-components
+      '@vue-flow/background': link:../packages/background
+      '@vue-flow/controls': link:../packages/controls
       '@vue-flow/core': link:../packages/core
+      '@vue-flow/minimap': link:../packages/minimap
       '@vue-flow/node-toolbar': link:../packages/node-toolbar
       '@vue/repl': 1.1.2_vue@3.2.37
       blobity: 0.2.1_react@18.2.0+vue@3.2.37
@@ -94,24 +98,32 @@ importers:
   e2e:
     specifiers:
       '@vitejs/plugin-vue': ^3.2.0
-      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/background': workspace:*
+      '@vue-flow/controls': workspace:*
       '@vue-flow/core': workspace:*
+      '@vue-flow/minimap': workspace:*
       cypress: ^10.9.0
     dependencies:
-      '@vue-flow/additional-components': link:../packages/additional-components
+      '@vue-flow/background': link:../packages/background
+      '@vue-flow/controls': link:../packages/controls
       '@vue-flow/core': link:../packages/core
+      '@vue-flow/minimap': link:../packages/minimap
     devDependencies:
       '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.40
       cypress: 10.9.0
 
   examples/nuxt3:
     specifiers:
-      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/background': workspace:*
+      '@vue-flow/controls': workspace:*
       '@vue-flow/core': workspace:*
+      '@vue-flow/minimap': workspace:*
       nuxt: 3.0.0-rc.11
     dependencies:
-      '@vue-flow/additional-components': link:../../packages/additional-components
+      '@vue-flow/background': link:../../packages/background
+      '@vue-flow/controls': link:../../packages/controls
       '@vue-flow/core': link:../../packages/core
+      '@vue-flow/minimap': link:../../packages/minimap
     devDependencies:
       nuxt: 3.0.0-rc.11_rollup@2.79.1+vite@3.1.6
 
@@ -121,16 +133,20 @@ importers:
       '@quasar/extras': ^1.15.4
       '@types/node': ^18.8.3
       '@vitejs/plugin-vue': ^2.3.4
-      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/background': workspace:*
+      '@vue-flow/controls': workspace:*
       '@vue-flow/core': workspace:*
+      '@vue-flow/minimap': workspace:*
       autoprefixer: ^10.4.12
       quasar: ^2.9.2
       vue: ^3.2.37
       vue-router: ^4.1.5
     dependencies:
       '@quasar/extras': 1.15.4
-      '@vue-flow/additional-components': link:../../packages/additional-components
+      '@vue-flow/background': link:../../packages/background
+      '@vue-flow/controls': link:../../packages/controls
       '@vue-flow/core': link:../../packages/core
+      '@vue-flow/minimap': link:../../packages/minimap
       quasar: 2.9.2
       vue: 3.2.37
       vue-router: 4.1.5_vue@3.2.37
@@ -144,8 +160,10 @@ importers:
     specifiers:
       '@types/dagre': ^0.7.48
       '@vitejs/plugin-vue': ^3.2.0
-      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/background': workspace:*
+      '@vue-flow/controls': workspace:*
       '@vue-flow/core': workspace:*
+      '@vue-flow/minimap': workspace:*
       '@vue-flow/node-toolbar': workspace:*
       dagre: ^0.8.5
       unplugin-auto-import: ^0.12.0
@@ -156,8 +174,10 @@ importers:
       vue-router: ^4.1.6
       vueflow: workspace:*
     dependencies:
-      '@vue-flow/additional-components': link:../../packages/additional-components
+      '@vue-flow/background': link:../../packages/background
+      '@vue-flow/controls': link:../../packages/controls
       '@vue-flow/core': link:../../packages/core
+      '@vue-flow/minimap': link:../../packages/minimap
       '@vue-flow/node-toolbar': link:../../packages/node-toolbar
       vueflow: link:../../packages/vue-flow
     devDependencies:
@@ -171,33 +191,23 @@ importers:
       vue: 3.2.37
       vue-router: 4.1.6_vue@3.2.37
 
-  packages/additional-components:
+  packages/background:
     specifiers:
-      '@types/d3-selection': ^3.0.3
-      '@types/d3-zoom': ^3.0.1
       '@vitejs/plugin-vue': ^3.2.0
       '@vue-flow/core': workspace:*
-      d3-selection: ^3.0.0
-      d3-zoom: ^3.0.0
       unplugin-auto-import: ^0.12.0
       vite: ^3.2.5
       vite-plugin-vue-type-imports: 0.2.0
-      vite-svg-loader: ^3.6.0
-      vue: ^3.2.25
+      vue: ^3.2.37
       vue-tsc: ^1.0.11
     dependencies:
-      d3-selection: 3.0.0
-      d3-zoom: 3.0.0
       vue: 3.2.40
     devDependencies:
-      '@types/d3-selection': 3.0.3
-      '@types/d3-zoom': 3.0.1
       '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.40
       '@vue-flow/core': link:../core
       unplugin-auto-import: 0.12.0
       vite: 3.2.5
       vite-plugin-vue-type-imports: 0.2.0_ek75d3noihdfv6qzog663yntom
-      vite-svg-loader: 3.6.0
       vue-tsc: 1.0.11_typescript@4.8.4
 
   packages/controls:
@@ -264,6 +274,33 @@ importers:
       vite-plugin-vue-type-imports: 0.2.0_ek75d3noihdfv6qzog663yntom
       vue-tsc: 1.0.11_typescript@4.8.4
 
+  packages/minimap:
+    specifiers:
+      '@types/d3-selection': ^3.0.3
+      '@types/d3-zoom': ^3.0.1
+      '@vitejs/plugin-vue': ^3.2.0
+      '@vue-flow/core': workspace:*
+      d3-selection: ^3.0.0
+      d3-zoom: ^3.0.0
+      unplugin-auto-import: ^0.12.0
+      vite: ^3.2.5
+      vite-plugin-vue-type-imports: 0.2.0
+      vue: ^3.2.37
+      vue-tsc: ^1.0.11
+    dependencies:
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.2.40
+    devDependencies:
+      '@types/d3-selection': 3.0.3
+      '@types/d3-zoom': 3.0.1
+      '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.40
+      '@vue-flow/core': link:../core
+      unplugin-auto-import: 0.12.0
+      vite: 3.2.5
+      vite-plugin-vue-type-imports: 0.2.0_ek75d3noihdfv6qzog663yntom
+      vue-tsc: 1.0.11_typescript@4.8.4
+
   packages/node-toolbar:
     specifiers:
       '@vitejs/plugin-vue': ^3.2.0
@@ -314,8 +351,10 @@ importers:
 
   packages/vue-flow:
     specifiers:
-      '@vue-flow/additional-components': workspace:*
+      '@vue-flow/background': workspace:*
+      '@vue-flow/controls': workspace:*
       '@vue-flow/core': workspace:*
+      '@vue-flow/minimap': workspace:*
       autoprefixer: ^10.4.13
       postcss: ^8.4.19
       postcss-cli: ^10.1.0
@@ -323,8 +362,10 @@ importers:
       vite: ^3.2.5
       vue: ^3.2.25
     dependencies:
-      '@vue-flow/additional-components': link:../additional-components
+      '@vue-flow/background': link:../background
+      '@vue-flow/controls': link:../controls
       '@vue-flow/core': link:../core
+      '@vue-flow/minimap': link:../minimap
       vue: 3.2.37
     devDependencies:
       autoprefixer: 10.4.13_postcss@8.4.19