diff --git a/README.md b/README.md
index edb82f5c..c046cb2b 100644
--- a/README.md
+++ b/README.md
@@ -59,10 +59,10 @@ the [examples](https://vueflow.dev/examples/).
 ## 🛠 Setup
 
 ```bash
-$ npm i @braks/vue-flow
+$ npm i @vue-flow/core
 
 # or
-$ yarn add @braks/vue-flow
+$ yarn add @vue-flow/core
 ```
 
 ## 🎮 Quickstart
@@ -80,7 +80,7 @@ A basic setup looks like this:
 ```vue
 <!-- Flowchart.vue -->
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 
 const elements = ref([
   {
@@ -111,10 +111,10 @@ const elements = ref([
 
 ```css
 /* import the required styles */
-@import "@braks/vue-flow/dist/style.css";
+@import "@vue-flow/core/dist/style.css";
 
 /* import the default theme (optional) */
-@import "@braks/vue-flow/dist/theme-default.css";
+@import "@vue-flow/core/dist/theme-default.css";
 ```
 
 ### 🪴 Vue 2
@@ -181,4 +181,4 @@ This project is built with
 Many thanks to the kind individuals who leave a star.
 Your support is much appreciated!
 
-[![Stargazers for @braks/vue-flow](https://reporoster.com/stars/bcakmakoglu/vue-flow)](https://github.com/bcakmakoglu/vue-flow/stargazers)
+[![Stargazers for @vue-flow/core](https://reporoster.com/stars/bcakmakoglu/vue-flow)](https://github.com/bcakmakoglu/vue-flow/stargazers)
diff --git a/docs/components/Repl.vue b/docs/components/Repl.vue
index 78fb1d9b..d19e002c 100644
--- a/docs/components/Repl.vue
+++ b/docs/components/Repl.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { Repl, ReplStore } from '@vue/repl'
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import '@vue/repl/style.css'
 import { exampleImports } from './examples'
 
 const props = defineProps<{ example: keyof typeof exampleImports; mainFile?: string; dependencies?: Record<string, string> }>()
 const { vueFlowVersion } = useVueFlow()
-let css = `@import 'https://cdn.jsdelivr.net/npm/@braks/vue-flow@${vueFlowVersion.value}/dist/style.css';
-@import 'https://cdn.jsdelivr.net/npm/@braks/vue-flow@${vueFlowVersion.value}/dist/theme-default.css';
+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';
 
 html,
 body,
@@ -71,7 +71,7 @@ onMounted(async () => {
   // pre-set import map
   store.setImportMap({
     imports: {
-      '@braks/vue-flow': `${location.origin}/vue-flow.es.js`,
+      '@vue-flow/core': `${location.origin}/vue-flow.es.js`,
       ...additionalImports,
     },
   })
diff --git a/docs/components/examples/basic/App.vue b/docs/components/examples/basic/App.vue
index 31c05328..c1ebdef3 100644
--- a/docs/components/examples/basic/App.vue
+++ b/docs/components/examples/basic/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 
diff --git a/docs/components/examples/basic/initial-elements.js b/docs/components/examples/basic/initial-elements.js
index 68f5e14d..7f558de0 100644
--- a/docs/components/examples/basic/initial-elements.js
+++ b/docs/components/examples/basic/initial-elements.js
@@ -1,4 +1,4 @@
-import { MarkerType } from '@braks/vue-flow'
+import { MarkerType } from '@vue-flow/core'
 
 /**
  * You can pass elements together as a v-model value
diff --git a/docs/components/examples/connectionline/App.vue b/docs/components/examples/connectionline/App.vue
index 4bda5dff..e66d5965 100644
--- a/docs/components/examples/connectionline/App.vue
+++ b/docs/components/examples/connectionline/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
+import { Background, BackgroundVariant, VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import CustomConnectionLine from './CustomConnectionLine.vue'
 
diff --git a/docs/components/examples/custom-node/App.vue b/docs/components/examples/custom-node/App.vue
index 5008404b..0617bb45 100644
--- a/docs/components/examples/custom-node/App.vue
+++ b/docs/components/examples/custom-node/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ConnectionMode, MiniMap, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { ConnectionMode, MiniMap, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { computed, h, onMounted, ref } from 'vue'
 import ColorSelectorNode from './CustomNode.vue'
 import { presets } from './presets.js'
diff --git a/docs/components/examples/custom-node/CustomNode.vue b/docs/components/examples/custom-node/CustomNode.vue
index ecfff975..e5f916a3 100644
--- a/docs/components/examples/custom-node/CustomNode.vue
+++ b/docs/components/examples/custom-node/CustomNode.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '@vue-flow/core'
 import { computed } from 'vue'
 import { presets } from './presets.js'
 
diff --git a/docs/components/examples/dnd/App.vue b/docs/components/examples/dnd/App.vue
index aa93fa9b..50a5d29d 100644
--- a/docs/components/examples/dnd/App.vue
+++ b/docs/components/examples/dnd/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import Sidebar from './Sidebar.vue'
 
 let id = 0
diff --git a/docs/components/examples/edges/App.vue b/docs/components/examples/edges/App.vue
index 9829eeb5..edc2f3b6 100644
--- a/docs/components/examples/edges/App.vue
+++ b/docs/components/examples/edges/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background, Controls, MarkerType, MiniMap, VueFlow } from '@braks/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow } from '@vue-flow/core'
 import { h, ref } from 'vue'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
diff --git a/docs/components/examples/edges/CustomEdge.vue b/docs/components/examples/edges/CustomEdge.vue
index 65934731..d1b6d6ec 100644
--- a/docs/components/examples/edges/CustomEdge.vue
+++ b/docs/components/examples/edges/CustomEdge.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
+import { getBezierPath, getEdgeCenter, useVueFlow } from '@vue-flow/core'
 import { computed } from 'vue'
 
 const props = defineProps({
diff --git a/docs/components/examples/edges/CustomEdge2.vue b/docs/components/examples/edges/CustomEdge2.vue
index b4fff2ba..b90679de 100644
--- a/docs/components/examples/edges/CustomEdge2.vue
+++ b/docs/components/examples/edges/CustomEdge2.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { EdgeText, getBezierPath, getEdgeCenter } from '@braks/vue-flow'
+import { EdgeText, getBezierPath, getEdgeCenter } from '@vue-flow/core'
 import { computed } from 'vue'
 
 const props = defineProps({
diff --git a/docs/components/examples/empty/App.vue b/docs/components/examples/empty/App.vue
index bf823312..e4fd7d12 100644
--- a/docs/components/examples/empty/App.vue
+++ b/docs/components/examples/empty/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
diff --git a/docs/components/examples/hidden/App.vue b/docs/components/examples/hidden/App.vue
index 87811329..5c69754a 100644
--- a/docs/components/examples/hidden/App.vue
+++ b/docs/components/examples/hidden/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref, watchEffect } from 'vue'
 
 const isHidden = ref(false)
diff --git a/docs/components/examples/horizontal/App.vue b/docs/components/examples/horizontal/App.vue
index 8eebf67f..35e7646a 100644
--- a/docs/components/examples/horizontal/App.vue
+++ b/docs/components/examples/horizontal/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 
diff --git a/docs/components/examples/horizontal/initial-elements.js b/docs/components/examples/horizontal/initial-elements.js
index 174e97b4..6474cc35 100644
--- a/docs/components/examples/horizontal/initial-elements.js
+++ b/docs/components/examples/horizontal/initial-elements.js
@@ -1,4 +1,4 @@
-import { MarkerType, Position } from '@braks/vue-flow'
+import { MarkerType, Position } from '@vue-flow/core'
 
 export const initialElements = [
   {
diff --git a/docs/components/examples/interaction/App.vue b/docs/components/examples/interaction/App.vue
index c8fca777..f557a211 100644
--- a/docs/components/examples/interaction/App.vue
+++ b/docs/components/examples/interaction/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import InteractionControls from './InteractionControls.vue'
 
@@ -14,7 +14,7 @@ const elements = ref([
 </script>
 
 <template>
-  <VueFlow class="interactionflow" v-model="elements" :fit-view-on-init="true">
+  <VueFlow v-model="elements" class="interactionflow" :fit-view-on-init="true">
     <InteractionControls />
   </VueFlow>
 </template>
diff --git a/docs/components/examples/interaction/InteractionControls.vue b/docs/components/examples/interaction/InteractionControls.vue
index 942f4d00..ce68e1e3 100644
--- a/docs/components/examples/interaction/InteractionControls.vue
+++ b/docs/components/examples/interaction/InteractionControls.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 
 const {
diff --git a/docs/components/examples/multi/Flow.vue b/docs/components/examples/multi/Flow.vue
index 18058d87..82ec927a 100644
--- a/docs/components/examples/multi/Flow.vue
+++ b/docs/components/examples/multi/Flow.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background, VueFlow, isNode } from '@braks/vue-flow'
+import { Background, 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 f328341e..4531ffdf 100644
--- a/docs/components/examples/nested/App.vue
+++ b/docs/components/examples/nested/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 import { onMounted } from 'vue'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
diff --git a/docs/components/examples/save-restore/App.vue b/docs/components/examples/save-restore/App.vue
index 55d9d552..43fbb54e 100644
--- a/docs/components/examples/save-restore/App.vue
+++ b/docs/components/examples/save-restore/App.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import Controls from './Controls.vue'
 
diff --git a/docs/components/examples/save-restore/Controls.vue b/docs/components/examples/save-restore/Controls.vue
index dc6d84b2..70ab4f53 100644
--- a/docs/components/examples/save-restore/Controls.vue
+++ b/docs/components/examples/save-restore/Controls.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useVueFlow } from '@braks/vue-flow'
+import { 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 931fea0d..91b71d49 100644
--- a/docs/components/examples/stress/App.vue
+++ b/docs/components/examples/stress/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'
 
diff --git a/docs/components/examples/teleport/App.vue b/docs/components/examples/teleport/App.vue
index 9ef3e18c..eb9fa859 100644
--- a/docs/components/examples/teleport/App.vue
+++ b/docs/components/examples/teleport/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import Sidebar from './Sidebar.vue'
 import TeleportableNode from './TeleportableNode.vue'
diff --git a/docs/components/examples/teleport/TeleportableNode.vue b/docs/components/examples/teleport/TeleportableNode.vue
index 3be6a9c1..2c94d929 100644
--- a/docs/components/examples/teleport/TeleportableNode.vue
+++ b/docs/components/examples/teleport/TeleportableNode.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '@vue-flow/core'
 import { useTeleport } from './useTransition.js'
 
 const props = defineProps({
diff --git a/docs/components/examples/teleport/useTeleport.js b/docs/components/examples/teleport/useTeleport.js
index c536e6c5..b89e0574 100644
--- a/docs/components/examples/teleport/useTeleport.js
+++ b/docs/components/examples/teleport/useTeleport.js
@@ -1,4 +1,4 @@
-import { getConnectedEdges, useVueFlow } from '@braks/vue-flow'
+import { getConnectedEdges, useVueFlow } from '@vue-flow/core'
 import { nextTick, ref } from 'vue'
 
 /**
diff --git a/docs/components/examples/transition/App.vue b/docs/components/examples/transition/App.vue
index a5283ed2..2f574941 100644
--- a/docs/components/examples/transition/App.vue
+++ b/docs/components/examples/transition/App.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { ConnectionMode, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { ConnectionMode, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import TransitionEdge from './TransitionEdge.vue'
 
 const elements = ref([
diff --git a/docs/components/examples/transition/TransitionEdge.vue b/docs/components/examples/transition/TransitionEdge.vue
index 83986400..bec2bb6c 100644
--- a/docs/components/examples/transition/TransitionEdge.vue
+++ b/docs/components/examples/transition/TransitionEdge.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { TransitionPresets, useDebounceFn, useTransition, watchDebounced } from '@vueuse/core'
-import { getBezierPath, useVueFlow } from '@braks/vue-flow'
+import { getBezierPath, useVueFlow } from '@vue-flow/core'
 import { computed, ref } from 'vue'
 
 const props = defineProps({
diff --git a/docs/components/examples/update-edge/App.vue b/docs/components/examples/update-edge/App.vue
index bb224f7a..4992c7be 100644
--- a/docs/components/examples/update-edge/App.vue
+++ b/docs/components/examples/update-edge/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
+import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
 import { ref } from 'vue'
 
 const elements = ref([
diff --git a/docs/components/examples/update-node/App.vue b/docs/components/examples/update-node/App.vue
index 1e9bc50c..5f775054 100644
--- a/docs/components/examples/update-node/App.vue
+++ b/docs/components/examples/update-node/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { reactive } from 'vue'
 
 const defaultLabel = '-'
diff --git a/docs/components/examples/validation/App.vue b/docs/components/examples/validation/App.vue
index 3c13d818..d2c5ada4 100644
--- a/docs/components/examples/validation/App.vue
+++ b/docs/components/examples/validation/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { VueFlow, addEdge } from '@braks/vue-flow'
+import { VueFlow, addEdge } from '@vue-flow/core'
 import { ref } from 'vue'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
@@ -28,8 +28,8 @@ const onConnect = (params) => {
 
 <template>
   <VueFlow
-    class="validationflow"
     v-model="elements"
+    class="validationflow"
     @connect="onConnect"
     @pane-ready="onLoad"
     @connect-start="onConnectStart"
diff --git a/docs/components/examples/validation/CustomInput.vue b/docs/components/examples/validation/CustomInput.vue
index f6501416..4dc0bb80 100644
--- a/docs/components/examples/validation/CustomInput.vue
+++ b/docs/components/examples/validation/CustomInput.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '@vue-flow/core'
 
 const props = defineProps({
   isValidTargetPos: {
diff --git a/docs/components/examples/validation/CustomNode.vue b/docs/components/examples/validation/CustomNode.vue
index 9d28c452..99db6e32 100644
--- a/docs/components/examples/validation/CustomNode.vue
+++ b/docs/components/examples/validation/CustomNode.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '@vue-flow/core'
 
 const props = defineProps({
   id: {
diff --git a/docs/components/home/Banner.vue b/docs/components/home/Banner.vue
index dd8a87dc..40969981 100644
--- a/docs/components/home/Banner.vue
+++ b/docs/components/home/Banner.vue
@@ -4,7 +4,7 @@ import Star from '~icons/carbon/star'
 import Download from '~icons/carbon/download'
 
 const githubData = await $fetch('https://api.github.com/repos/bcakmakoglu/vue-flow?page=$i&per_page=100')
-const npmData = await $fetch('https://api.npmjs.org/downloads/point/last-month/@braks/vue-flow')
+const npmData = await $fetch('https://api.npmjs.org/downloads/point/last-month/@vue-flow/core')
 </script>
 
 <template>
diff --git a/docs/components/home/Features.vue b/docs/components/home/Features.vue
index e9503cf3..859778b0 100644
--- a/docs/components/home/Features.vue
+++ b/docs/components/home/Features.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { VueFlowStore } from '@braks/vue-flow'
+import type { VueFlowStore } from '@vue-flow/core'
 import Basic from './flows/Basic.vue'
 import RGB from './flows/RGB.vue'
 import Nested from './flows/Nested.vue'
diff --git a/docs/components/home/edges/Custom.vue b/docs/components/home/edges/Custom.vue
index cfd55976..4a3b8780 100644
--- a/docs/components/home/edges/Custom.vue
+++ b/docs/components/home/edges/Custom.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import type { EdgeProps, MarkerType, Position } from '@braks/vue-flow'
-import { getBezierPath } from '@braks/vue-flow'
+import type { EdgeProps, MarkerType, Position } from '@vue-flow/core'
+import { getBezierPath } from '@vue-flow/core'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string
diff --git a/docs/components/home/flows/Additional.vue b/docs/components/home/flows/Additional.vue
index 35afb21f..18dca741 100644
--- a/docs/components/home/flows/Additional.vue
+++ b/docs/components/home/flows/Additional.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import type { Elements } from '@braks/vue-flow'
-import { Background, Controls, MiniMap, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Elements } from '@vue-flow/core'
+import { Background, Controls, MiniMap, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const emit = defineEmits(['pane'])
 
diff --git a/docs/components/home/flows/Basic.vue b/docs/components/home/flows/Basic.vue
index c207bc02..e81e2872 100644
--- a/docs/components/home/flows/Basic.vue
+++ b/docs/components/home/flows/Basic.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { ClassFunc, GraphEdge, GraphNode, StyleFunc } from '@braks/vue-flow'
-import { Background, ConnectionLineType, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { ClassFunc, GraphEdge, GraphNode, StyleFunc } from '@vue-flow/core'
+import { Background, ConnectionLineType, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
 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 8808bcf0..53021582 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, Handle, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import confetti from 'canvas-confetti'
 import colors from 'windicss/colors'
diff --git a/docs/components/home/flows/Nested.vue b/docs/components/home/flows/Nested.vue
index d9dbc655..f1d6085e 100644
--- a/docs/components/home/flows/Nested.vue
+++ b/docs/components/home/flows/Nested.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
 
 const emit = defineEmits(['pane'])
diff --git a/docs/components/home/flows/RGB.vue b/docs/components/home/flows/RGB.vue
index 39dc7967..7e76e7f5 100644
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { MiniMapNodeFunc } from '@braks/vue-flow'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { MiniMapNodeFunc } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
 import CustomEdge from '../edges/Custom.vue'
 import RGBNode from '../nodes/Input.vue'
diff --git a/docs/components/home/nodes/Input.vue b/docs/components/home/nodes/Input.vue
index 683377d9..6d734cf3 100644
--- a/docs/components/home/nodes/Input.vue
+++ b/docs/components/home/nodes/Input.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { NodeProps } from '@vue-flow/core'
+import { Handle, Position } from '@vue-flow/core'
 
 interface RGBNodeProps extends NodeProps {
   data: {
diff --git a/docs/components/home/nodes/Output.vue b/docs/components/home/nodes/Output.vue
index 50cdce16..353c10f4 100644
--- a/docs/components/home/nodes/Output.vue
+++ b/docs/components/home/nodes/Output.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { NodeProps } from '@vue-flow/core'
+import { Handle, Position } from '@vue-flow/core'
 
 interface RBGOutputNodeProps extends NodeProps {
   rgb: string
diff --git a/docs/package.json b/docs/package.json
index 9883ffdf..c10fa7aa 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "docs2",
+  "name": "@vue-flow/docs",
   "version": "1.0.0",
   "private": true,
   "scripts": {
@@ -14,7 +14,7 @@
     "@algolia/client-search": "^4.14.2",
     "@animxyz/core": "^0.6.6",
     "@animxyz/vue3": "^0.6.7",
-    "@braks/vue-flow": "workspace:*",
+    "@vue-flow/core": "workspace:*",
     "@stackblitz/sdk": "^1.8.0",
     "@vue/repl": "1.1.2",
     "blobity": "^0.2.1",
diff --git a/docs/src/.vitepress/config.ts b/docs/src/.vitepress/config.ts
index 81aaa3a2..d4578d3a 100644
--- a/docs/src/.vitepress/config.ts
+++ b/docs/src/.vitepress/config.ts
@@ -7,7 +7,7 @@ import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { copyVueFlowPlugin } from './copy-plugin'
 import head from './head'
 
diff --git a/docs/src/.vitepress/copy-plugin.ts b/docs/src/.vitepress/copy-plugin.ts
index 7bcfa0a8..6441c0e5 100644
--- a/docs/src/.vitepress/copy-plugin.ts
+++ b/docs/src/.vitepress/copy-plugin.ts
@@ -6,9 +6,9 @@ export function copyVueFlowPlugin(): Plugin {
   return {
     name: 'copy-vue-flow',
     generateBundle() {
-      const filePath = resolve(__dirname, '../../node_modules/@braks/vue-flow/dist/vue-flow.es.js')
+      const filePath = resolve(__dirname, '../../node_modules/@vue-flow/core/dist/vue-flow.es.js')
       if (!existsSync(filePath)) {
-        throw new Error(`@braks/vue-flow/dist/vue-flow.es.js not built. ` + `Run "pnpm -w build" first.`)
+        throw new Error(`@vue-flow/core/dist/vue-flow.es.js not built. ` + `Run "pnpm -w build" first.`)
       }
 
       this.emitFile({
diff --git a/docs/src/.vitepress/theme/index.ts b/docs/src/.vitepress/theme/index.ts
index 6f7da1fb..1d1bcad6 100644
--- a/docs/src/.vitepress/theme/index.ts
+++ b/docs/src/.vitepress/theme/index.ts
@@ -4,8 +4,8 @@ import DefaultTheme from 'vitepress/theme'
 import Layout from './layouts/default.vue'
 import 'virtual:windi.css'
 import '@animxyz/core'
-import '@braks/vue-flow/dist/style.css'
-import '@braks/vue-flow/dist/theme-default.css'
+import '@vue-flow/core/dist/style.css'
+import '@vue-flow/core/dist/theme-default.css'
 import './../../assets/index.css'
 
 const CustomTheme = {
diff --git a/docs/src/guide/composables.md b/docs/src/guide/composables.md
index b304969b..5bdb2dac 100644
--- a/docs/src/guide/composables.md
+++ b/docs/src/guide/composables.md
@@ -12,7 +12,7 @@ Thus accessing the internal state of Vue Flow becomes super easy when using comp
 
 ```vue
 <script setup>
-import { useVueFlow, VueFlow } from '@braks/vue-flow'
+import { useVueFlow, VueFlow } from '@vue-flow/core'
 
 const { nodes, edges } = useVueFlow({
   nodes: [
@@ -51,7 +51,7 @@ It requires a valid Vue Flow store in its context.
 
 ```vue
 <script setup>
-import { useZoomPanHelper } from '@braks/vue-flow'
+import { useZoomPanHelper } from '@vue-flow/core'
 
 const { fitView } = useZoomPanHelper()
 </script>
@@ -71,8 +71,8 @@ This is how the default handle component is built:
 ```vue
 
 <script lang="ts" setup>
-import { NodeId, useHandle, useVueFlow } from '@braks/vue-flow'
-import type { HandleProps, Position } from '@braks/vue-flow'
+import { NodeId, useHandle, useVueFlow } from '@vue-flow/core'
+import type { HandleProps, Position } from '@vue-flow/core'
 
 const props = withDefaults(defineProps<HandleProps>(), {
   type: 'source',
diff --git a/docs/src/guide/edge.md b/docs/src/guide/edge.md
index 50d4046a..748c1e67 100644
--- a/docs/src/guide/edge.md
+++ b/docs/src/guide/edge.md
@@ -15,7 +15,7 @@ Generally you create edges by adding them to the model-value or the edges prop o
 
 ```vue
 <script>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 
 export default defineComponent({
   components: { VueFlow },
@@ -61,7 +61,7 @@ directly to the state.
 
 ```vue
 <script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 
 const initialNodes = ref([
   {
@@ -197,7 +197,7 @@ will expect a slot to have the name `edge-custom`.
 
 ```vue{18,26}
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 import CustomEdge from './CustomEdge.vue'
 
 const elements = ref([
@@ -360,7 +360,7 @@ to your edge components.
 
 ```vue{19-26}
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 
 const elements = ref([
   {
@@ -397,7 +397,7 @@ triggered when the edge is clicked.
 
 ```vue
 <script lang="ts" setup>
-import type { EdgeProps, EdgeEventsOn } from '@braks/vue-flow'
+import type { EdgeProps, EdgeEventsOn } from '@vue-flow/core'
 
 // define your events
 interface CustomEdgeEvents {
diff --git a/docs/src/guide/getting-started.md b/docs/src/guide/getting-started.md
index 052128e7..89e85ee0 100644
--- a/docs/src/guide/getting-started.md
+++ b/docs/src/guide/getting-started.md
@@ -8,11 +8,11 @@
 ## Installation
 
 ```bash
-npm i --save @braks/vue-flow
+npm i --save @vue-flow/core
 
-yarn add @braks/vue-flow
+yarn add @vue-flow/core
 
-pnpm i @braks/vue-flow
+pnpm i @vue-flow/core
 ```
 
 ## Usage
@@ -28,7 +28,7 @@ source (node id) and a target (node id).
 
 ```vue
 <script setup>
-import { VueFlow  } from '@braks/vue-flow'
+import { VueFlow  } from '@vue-flow/core'
 
 const elements = ref([
   // Nodes
diff --git a/docs/src/guide/node.md b/docs/src/guide/node.md
index a6da3c0b..4f8791fd 100644
--- a/docs/src/guide/node.md
+++ b/docs/src/guide/node.md
@@ -16,7 +16,7 @@ Generally you create nodes by adding them to the model-value or the nodes prop o
 
 ```vue
 <script>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 
 export default defineComponent({
   components: { VueFlow },
@@ -57,7 +57,7 @@ directly to the state.
 
 ```vue
 <script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 
 const initialNodes = ref([
   {
@@ -94,7 +94,7 @@ which expects an array of [changes](/typedocs/types/NodeChange) to be applied to
 
 ```vue{11,17-22}
 <script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 
 const initialNodes = ref([
   {
@@ -200,7 +200,7 @@ will expect a slot to have the name `node-custom`.
 
 ```vue{9,16}
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 import CustomNode from './CustomNode.vue'
 
 const elements = ref([
@@ -341,7 +341,7 @@ to your node components.
 
 ```vue{9-13}
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 
 const elements = ref([
   {
@@ -370,7 +370,7 @@ triggered when the node is clicked.
 
 ```vue
 <script lang="ts" setup>
-import type { NodeProps, NodeEventsOn } from '@braks/vue-flow'
+import type { NodeProps, NodeEventsOn } from '@vue-flow/core'
 
 // define your events
 interface CustomNodeEvents {
@@ -440,7 +440,7 @@ or you can emit the `updateNodeInternals` event from your custom node component
 
 ```vue
 <script setup>
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 
 const { updateNodeInternals } = useVueFlow()
 
diff --git a/docs/src/guide/theming.md b/docs/src/guide/theming.md
index 5078ec35..8d1df006 100644
--- a/docs/src/guide/theming.md
+++ b/docs/src/guide/theming.md
@@ -6,10 +6,10 @@ the default theme) can be skipped.
 
 ```css
 /* these are necessary styles for vue flow */
-@import '@braks/vue-flow/dist/style.css';
+@import '@vue-flow/core/dist/style.css';
 
 /* this contains the default theme, these are optional styles */
-@import '@braks/vue-flow/dist/theme-default.css';
+@import '@vue-flow/core/dist/theme-default.css';
 ```
 
 ## Customizing default theme
diff --git a/docs/src/guide/utils/edge.md b/docs/src/guide/utils/edge.md
index 61559b36..db10fc42 100644
--- a/docs/src/guide/utils/edge.md
+++ b/docs/src/guide/utils/edge.md
@@ -5,7 +5,7 @@ All default edge components are exported and can be used or extended if necessar
 ```vue
 <script setup>
 // CustomEdge.vue
-import { EdgeProps, BezierEdge } from '@braks/vue-flow'
+import { EdgeProps, BezierEdge } from '@vue-flow/core'
 
 const props = defineProps<EdgeProps>()
 
diff --git a/docs/src/guide/utils/graph.md b/docs/src/guide/utils/graph.md
index d39c07b2..7b3ae3c3 100644
--- a/docs/src/guide/utils/graph.md
+++ b/docs/src/guide/utils/graph.md
@@ -10,7 +10,7 @@
 
 ```vue{13}
 <script setup>
-import { VueFlow, isEdge } from '@braks/vue-flow'
+import { VueFlow, isEdge } from '@vue-flow/core'
 
 const elements = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 }, },
@@ -44,7 +44,7 @@ const toggleClass = () => {
 
 ```vue{13}
 <script setup>
-import { VueFlow, isNode } from '@braks/vue-flow'
+import { VueFlow, isNode } from '@vue-flow/core'
 
 const elements = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
@@ -83,7 +83,7 @@ of [`useVueFlow`](/guide/composables#usevueflow/)
 
 ```vue{12}
 <script setup>
-import { VueFlow, addEdge } from '@braks/vue-flow'
+import { VueFlow, addEdge } from '@vue-flow/core'
 
 const elements = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
@@ -116,7 +116,7 @@ of [`useVueFlow`](/guide/composables#usevueflow/)
 
 ```vue{12}
 <script setup>
-import { VueFlow, updateEdge } from '@braks/vue-flow'
+import { VueFlow, updateEdge } from '@vue-flow/core'
 
 const elements = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
diff --git a/docs/src/guide/utils/instance.md b/docs/src/guide/utils/instance.md
index ad63b773..a39f0ccd 100644
--- a/docs/src/guide/utils/instance.md
+++ b/docs/src/guide/utils/instance.md
@@ -12,7 +12,7 @@ instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents#paneready).
 
 ```vue
 <script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { onPaneReady } = useVueFlow()
 
@@ -25,7 +25,7 @@ onPaneReady((instance) => instance.fitView())
 
 ```vue
 <script>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 
 export default defineComponent({
   components: { VueFlow },
diff --git a/docs/src/guide/vue-flow/config.md b/docs/src/guide/vue-flow/config.md
index 002e6b3e..10feda16 100644
--- a/docs/src/guide/vue-flow/config.md
+++ b/docs/src/guide/vue-flow/config.md
@@ -19,7 +19,7 @@ as options to the [`useVueFlow`](/guide/composables#usevueflow) composable.
 
 ```vue
 <script setup>
-import { useVueFlow  } from '@braks/vue-flow'
+import { useVueFlow  } from '@vue-flow/core'
 
 useVueFlow({
   defaultZoom: 0.5,
@@ -91,7 +91,7 @@ onMounted(() => {
 
 ```vue
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 
 const elements = ref([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -123,7 +123,7 @@ const elements = ref([
 
 ```vue
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 
 const nodes = ref([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -153,7 +153,7 @@ const nodes = ref([
 
 ```vue
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 
 const nodes = ref([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -188,7 +188,7 @@ const edges = ref([
 
 ```vue
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 import CustomNode from './CustomNode.vue'
 
 const nodeTypes = {
@@ -225,7 +225,7 @@ const edges = ref([
 
 ```vue
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 import CustomEdge from './CustomEdge.vue'
 
 const edgeTypes = {
@@ -265,7 +265,7 @@ const edges = ref([
 
 ```vue
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 
 const nodes = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
diff --git a/docs/src/guide/vue-flow/state.md b/docs/src/guide/vue-flow/state.md
index a9607fce..b6bafc4d 100644
--- a/docs/src/guide/vue-flow/state.md
+++ b/docs/src/guide/vue-flow/state.md
@@ -14,7 +14,7 @@ state is reactive and changes will be reflected on the graph.
 
 ```vue{4-6}
 <script setup>
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 
 const { getNodes, onPaneReady } = useVueFlow({
   ... // you can pass any VueFlowProp to the composable as a static option
@@ -59,7 +59,7 @@ available as an injection in the component tree.
 ```vue{5-6}
 <script>
 // Container.vue
-import { useVueFlow  } from '@braks/vue-flow'
+import { useVueFlow  } from '@vue-flow/core'
 
 // initialize a store instance in this context, so it is available when calling inject(VueFlow)
 useVueFlow()
@@ -70,7 +70,7 @@ Now we can easily access our current state instance from our Sidebar without pas
 
 ```vue
 <script setup>
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 
 const { nodesSelectionActive, addSelectedNodes, getNodes } = useVueFlow()
 
@@ -124,7 +124,7 @@ when mounted.
 
 ```vue{4,32}
 <script>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { addEdges, onConnect } = useVueFlow({ id: 'options-api' })
 export default defineComponent({
diff --git a/e2e/cypress/component/1-store/edges/addEdges.cy.ts b/e2e/cypress/component/1-store/edges/addEdges.cy.ts
index e86b8028..3248ff23 100644
--- a/e2e/cypress/component/1-store/edges/addEdges.cy.ts
+++ b/e2e/cypress/component/1-store/edges/addEdges.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/edges/addSelectedEdges.cy.ts b/e2e/cypress/component/1-store/edges/addSelectedEdges.cy.ts
index 463fa49e..5f3d41cd 100644
--- a/e2e/cypress/component/1-store/edges/addSelectedEdges.cy.ts
+++ b/e2e/cypress/component/1-store/edges/addSelectedEdges.cy.ts
@@ -1,4 +1,4 @@
-import { isEdge, useVueFlow } from '@braks/vue-flow'
+import { isEdge, useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/edges/connection.cy.ts b/e2e/cypress/component/1-store/edges/connection.cy.ts
index dd728b1f..02793a75 100644
--- a/e2e/cypress/component/1-store/edges/connection.cy.ts
+++ b/e2e/cypress/component/1-store/edges/connection.cy.ts
@@ -1,5 +1,5 @@
-import type { StartHandle } from '@braks/vue-flow'
-import { useVueFlow } from '@braks/vue-flow'
+import type { StartHandle } from '@vue-flow/core'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements(2, 2)
diff --git a/e2e/cypress/component/1-store/edges/findEdge.cy.ts b/e2e/cypress/component/1-store/edges/findEdge.cy.ts
index 0776f998..c3ace78b 100644
--- a/e2e/cypress/component/1-store/edges/findEdge.cy.ts
+++ b/e2e/cypress/component/1-store/edges/findEdge.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/edges/removeEdges.cy.ts b/e2e/cypress/component/1-store/edges/removeEdges.cy.ts
index b25545ff..37ad169b 100644
--- a/e2e/cypress/component/1-store/edges/removeEdges.cy.ts
+++ b/e2e/cypress/component/1-store/edges/removeEdges.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/edges/removeSelectedEdges.cy.ts b/e2e/cypress/component/1-store/edges/removeSelectedEdges.cy.ts
index 79f25a60..e43cd583 100644
--- a/e2e/cypress/component/1-store/edges/removeSelectedEdges.cy.ts
+++ b/e2e/cypress/component/1-store/edges/removeSelectedEdges.cy.ts
@@ -1,4 +1,4 @@
-import { isEdge, useVueFlow } from '@braks/vue-flow'
+import { isEdge, useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/edges/updateEdge.cy.ts b/e2e/cypress/component/1-store/edges/updateEdge.cy.ts
index fe855323..a1aa55dc 100644
--- a/e2e/cypress/component/1-store/edges/updateEdge.cy.ts
+++ b/e2e/cypress/component/1-store/edges/updateEdge.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements(2, 2)
diff --git a/e2e/cypress/component/1-store/elements/addSelectedElements.cy.ts b/e2e/cypress/component/1-store/elements/addSelectedElements.cy.ts
index cb8fdbaa..90358781 100644
--- a/e2e/cypress/component/1-store/elements/addSelectedElements.cy.ts
+++ b/e2e/cypress/component/1-store/elements/addSelectedElements.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/elements/removeSelectedElements.cy.ts b/e2e/cypress/component/1-store/elements/removeSelectedElements.cy.ts
index 7d809a10..70a37adc 100644
--- a/e2e/cypress/component/1-store/elements/removeSelectedElements.cy.ts
+++ b/e2e/cypress/component/1-store/elements/removeSelectedElements.cy.ts
@@ -1,5 +1,5 @@
-import type { GraphEdge, GraphNode } from '@braks/vue-flow'
-import { isNode, useVueFlow } from '@braks/vue-flow'
+import type { GraphEdge, GraphNode } from '@vue-flow/core'
+import { isNode, useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/elements/setElements.cy.ts b/e2e/cypress/component/1-store/elements/setElements.cy.ts
index 911b54e7..8ce5d788 100644
--- a/e2e/cypress/component/1-store/elements/setElements.cy.ts
+++ b/e2e/cypress/component/1-store/elements/setElements.cy.ts
@@ -1,4 +1,4 @@
-import { isEdge, isNode, useVueFlow } from '@braks/vue-flow'
+import { isEdge, isNode, useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/nodes/addNodes.cy.ts b/e2e/cypress/component/1-store/nodes/addNodes.cy.ts
index e08ead15..b83f44e7 100644
--- a/e2e/cypress/component/1-store/nodes/addNodes.cy.ts
+++ b/e2e/cypress/component/1-store/nodes/addNodes.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes } = getElements()
diff --git a/e2e/cypress/component/1-store/nodes/addSelectedNodes.cy.ts b/e2e/cypress/component/1-store/nodes/addSelectedNodes.cy.ts
index 150617df..4133109d 100644
--- a/e2e/cypress/component/1-store/nodes/addSelectedNodes.cy.ts
+++ b/e2e/cypress/component/1-store/nodes/addSelectedNodes.cy.ts
@@ -1,4 +1,4 @@
-import { isNode, useVueFlow } from '@braks/vue-flow'
+import { isNode, useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/nodes/findNode.cy.ts b/e2e/cypress/component/1-store/nodes/findNode.cy.ts
index caf4535b..18957022 100644
--- a/e2e/cypress/component/1-store/nodes/findNode.cy.ts
+++ b/e2e/cypress/component/1-store/nodes/findNode.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/nodes/removeNodes.cy.ts b/e2e/cypress/component/1-store/nodes/removeNodes.cy.ts
index 71fcd9bf..b8f49403 100644
--- a/e2e/cypress/component/1-store/nodes/removeNodes.cy.ts
+++ b/e2e/cypress/component/1-store/nodes/removeNodes.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/nodes/removeSelectedNodes.cy.ts b/e2e/cypress/component/1-store/nodes/removeSelectedNodes.cy.ts
index e8da06aa..5b4530e3 100644
--- a/e2e/cypress/component/1-store/nodes/removeSelectedNodes.cy.ts
+++ b/e2e/cypress/component/1-store/nodes/removeSelectedNodes.cy.ts
@@ -1,4 +1,4 @@
-import { isNode, useVueFlow } from '@braks/vue-flow'
+import { isNode, useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/setState.cy.ts b/e2e/cypress/component/1-store/setState.cy.ts
index 8278ec86..325bd200 100644
--- a/e2e/cypress/component/1-store/setState.cy.ts
+++ b/e2e/cypress/component/1-store/setState.cy.ts
@@ -1,6 +1,6 @@
 import { isRef } from 'vue'
-import type { State } from '@braks/vue-flow'
-import { useVueFlow } from '@braks/vue-flow'
+import type { State } from '@vue-flow/core'
+import { useVueFlow } from '@vue-flow/core'
 
 describe('Store Action: `setState`', () => {
   let store = useVueFlow()
diff --git a/e2e/cypress/component/1-store/viewpane/deleteKeyCode.cy.ts b/e2e/cypress/component/1-store/viewpane/deleteKeyCode.cy.ts
index 474de337..a7ba29c1 100644
--- a/e2e/cypress/component/1-store/viewpane/deleteKeyCode.cy.ts
+++ b/e2e/cypress/component/1-store/viewpane/deleteKeyCode.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/viewpane/selectionKeyCode.cy.ts b/e2e/cypress/component/1-store/viewpane/selectionKeyCode.cy.ts
index 8e0d6b7e..42b5351d 100644
--- a/e2e/cypress/component/1-store/viewpane/selectionKeyCode.cy.ts
+++ b/e2e/cypress/component/1-store/viewpane/selectionKeyCode.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
diff --git a/e2e/cypress/component/1-store/viewpane/setMaxZoom.cy.ts b/e2e/cypress/component/1-store/viewpane/setMaxZoom.cy.ts
index 94e7ea0b..84b7549d 100644
--- a/e2e/cypress/component/1-store/viewpane/setMaxZoom.cy.ts
+++ b/e2e/cypress/component/1-store/viewpane/setMaxZoom.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes } = getElements()
diff --git a/e2e/cypress/component/1-store/viewpane/setMinZoom.cy.ts b/e2e/cypress/component/1-store/viewpane/setMinZoom.cy.ts
index 551cf858..8f4aa801 100644
--- a/e2e/cypress/component/1-store/viewpane/setMinZoom.cy.ts
+++ b/e2e/cypress/component/1-store/viewpane/setMinZoom.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../../utils'
 
 const { nodes } = getElements()
diff --git a/e2e/cypress/component/2-vue-flow/connect.cy.ts b/e2e/cypress/component/2-vue-flow/connect.cy.ts
index f7af6aa1..cfe82642 100644
--- a/e2e/cypress/component/2-vue-flow/connect.cy.ts
+++ b/e2e/cypress/component/2-vue-flow/connect.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 
 describe('Check if nodes are connectable', () => {
   const store = useVueFlow({ id: 'test' })
diff --git a/e2e/cypress/component/2-vue-flow/updateEdge.cy.ts b/e2e/cypress/component/2-vue-flow/updateEdge.cy.ts
index a41e17d1..68581d44 100644
--- a/e2e/cypress/component/2-vue-flow/updateEdge.cy.ts
+++ b/e2e/cypress/component/2-vue-flow/updateEdge.cy.ts
@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 
 describe('Check if edges are updatable', () => {
   const store = useVueFlow({ id: 'test' })
diff --git a/e2e/cypress/component/3-additional-components/background/App.vue b/e2e/cypress/component/3-additional-components/background/App.vue
index 67d4840e..ef599e5c 100644
--- a/e2e/cypress/component/3-additional-components/background/App.vue
+++ b/e2e/cypress/component/3-additional-components/background/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background, VueFlow } from '@braks/vue-flow'
+import { Background, VueFlow } from '@vue-flow/core'
 </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 42f522ab..b7a95961 100644
--- a/e2e/cypress/component/3-additional-components/controls/App.vue
+++ b/e2e/cypress/component/3-additional-components/controls/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Controls, VueFlow } from '@braks/vue-flow'
+import { Controls, VueFlow } from '@vue-flow/core'
 </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 0f864b66..29dfe783 100644
--- a/e2e/cypress/component/3-additional-components/minimap/App.vue
+++ b/e2e/cypress/component/3-additional-components/minimap/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { MiniMap, VueFlow } from '@braks/vue-flow'
+import { MiniMap, VueFlow } from '@vue-flow/core'
 
 defineProps({
   nodes: {
diff --git a/e2e/cypress/support/component.ts b/e2e/cypress/support/component.ts
index d7f2edd8..b03a66fc 100644
--- a/e2e/cypress/support/component.ts
+++ b/e2e/cypress/support/component.ts
@@ -14,8 +14,8 @@
 // ***********************************************************
 
 // Import necessary styles
-import '@braks/vue-flow/dist/style.css'
-import '@braks/vue-flow/dist/theme-default.css'
+import '@vue-flow/core/dist/style.css'
+import '@vue-flow/core/dist/theme-default.css'
 
 // Import commands.js using ES2015 syntax:
 import './commands'
@@ -24,8 +24,8 @@ import './commands'
 // require('./commands')
 
 import { mount } from 'cypress/vue'
-import { VueFlow } from '@braks/vue-flow'
-import type { FlowProps } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
+import type { FlowProps } from '@vue-flow/core'
 
 const mountVueFlow = (props?: FlowProps, attrs?: Record<string, any>) => {
   cy.mount(VueFlow, {
diff --git a/e2e/cypress/utils/elements.ts b/e2e/cypress/utils/elements.ts
index b52181fa..23194436 100644
--- a/e2e/cypress/utils/elements.ts
+++ b/e2e/cypress/utils/elements.ts
@@ -1,4 +1,4 @@
-import type { Edge, Node } from '@braks/vue-flow'
+import type { Edge, Node } from '@vue-flow/core'
 
 export function getElements(xElements = 10, yElements = 10) {
   const initialNodes: Node[] = []
diff --git a/e2e/package.json b/e2e/package.json
index f38523ef..596ae2bf 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -7,7 +7,7 @@
     "open": "cypress open"
   },
   "dependencies": {
-    "@braks/vue-flow": "workspace:*"
+    "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {
     "cypress": "^10.9.0",
diff --git a/examples/nuxt3/app.vue b/examples/nuxt3/app.vue
index e3057969..16288641 100644
--- a/examples/nuxt3/app.vue
+++ b/examples/nuxt3/app.vue
@@ -3,8 +3,8 @@
 </template>
 
 <style>
-@import '@braks/vue-flow/dist/style.css';
-@import '@braks/vue-flow/dist/theme-default.css';
+@import '@vue-flow/core/dist/style.css';
+@import '@vue-flow/core/dist/theme-default.css';
 
 html,
 body,
diff --git a/examples/nuxt3/components/BasicFlow.vue b/examples/nuxt3/components/BasicFlow.vue
index 98fbbba9..8a125eee 100644
--- a/examples/nuxt3/components/BasicFlow.vue
+++ b/examples/nuxt3/components/BasicFlow.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 
diff --git a/examples/nuxt3/components/initial-elements.js b/examples/nuxt3/components/initial-elements.js
index 49bd96e8..39db84a6 100644
--- a/examples/nuxt3/components/initial-elements.js
+++ b/examples/nuxt3/components/initial-elements.js
@@ -1,4 +1,4 @@
-import { MarkerType } from '@braks/vue-flow'
+import { MarkerType } from '@vue-flow/core'
 
 /**
  * You can pass elements together as a v-model value
diff --git a/examples/nuxt3/package.json b/examples/nuxt3/package.json
index 8a10c536..d20df497 100644
--- a/examples/nuxt3/package.json
+++ b/examples/nuxt3/package.json
@@ -9,7 +9,7 @@
     "dev": "nuxt dev"
   },
   "dependencies": {
-    "@braks/vue-flow": "workspace:*"
+    "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {
     "nuxt": "3.0.0-rc.11"
diff --git a/examples/quasar/package.json b/examples/quasar/package.json
index 2747b09a..3366036f 100644
--- a/examples/quasar/package.json
+++ b/examples/quasar/package.json
@@ -10,7 +10,7 @@
     "lint": "eslint --ext .js,.ts,.vue ./"
   },
   "dependencies": {
-    "@braks/vue-flow": "workspace:*",
+    "@vue-flow/core": "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 4ede956f..5e84f4d9 100644
--- a/examples/quasar/src/components/BasicFlow.vue
+++ b/examples/quasar/src/components/BasicFlow.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 
diff --git a/examples/quasar/src/components/CustomizedFlow.vue b/examples/quasar/src/components/CustomizedFlow.vue
index 9dda14f8..10f26dc4 100644
--- a/examples/quasar/src/components/CustomizedFlow.vue
+++ b/examples/quasar/src/components/CustomizedFlow.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './customized-elements.js'
 
diff --git a/examples/quasar/src/components/customized-elements.js b/examples/quasar/src/components/customized-elements.js
index 0fb79b27..d14e24c9 100644
--- a/examples/quasar/src/components/customized-elements.js
+++ b/examples/quasar/src/components/customized-elements.js
@@ -1,4 +1,4 @@
-import { MarkerType } from '@braks/vue-flow'
+import { MarkerType } from '@vue-flow/core'
 
 /**
  * You can pass elements together as a v-model value
diff --git a/examples/quasar/src/components/initial-elements.js b/examples/quasar/src/components/initial-elements.js
index 49bd96e8..39db84a6 100644
--- a/examples/quasar/src/components/initial-elements.js
+++ b/examples/quasar/src/components/initial-elements.js
@@ -1,4 +1,4 @@
-import { MarkerType } from '@braks/vue-flow'
+import { MarkerType } from '@vue-flow/core'
 
 /**
  * You can pass elements together as a v-model value
diff --git a/examples/quasar/src/css/app.css b/examples/quasar/src/css/app.css
index da233ba1..184ef80c 100644
--- a/examples/quasar/src/css/app.css
+++ b/examples/quasar/src/css/app.css
@@ -1,6 +1,6 @@
 /* app global css */
-@import "@braks/vue-flow/dist/style.css";
-@import "@braks/vue-flow/dist/theme-default.css";
+@import "@vue-flow/core/dist/style.css";
+@import "@vue-flow/core/dist/theme-default.css";
 
 html,
 body,
diff --git a/examples/vite/index.css b/examples/vite/index.css
index 6ba561ca..7d29fe65 100644
--- a/examples/vite/index.css
+++ b/examples/vite/index.css
@@ -1,8 +1,8 @@
 /* import the required styles */
-@import 'node_modules/@braks/vue-flow/dist/style.css';
+@import 'node_modules/@vue-flow/core/dist/style.css';
 
 /* import the default theme (optional) */
-@import 'node_modules/@braks/vue-flow/dist/theme-default.css';
+@import 'node_modules/@vue-flow/core/dist/theme-default.css';
 
 body {
   color: #111;
diff --git a/examples/vite/package.json b/examples/vite/package.json
index 3da95462..14ea71c3 100644
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@@ -7,7 +7,7 @@
     "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore ."
   },
   "dependencies": {
-    "@braks/vue-flow": "workspace:*"
+    "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {
     "@types/dagre": "^0.7.47",
diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
index baa059df..ffabf25d 100644
--- a/examples/vite/src/Basic/Basic.vue
+++ b/examples/vite/src/Basic/Basic.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import type { Elements } from '@vue-flow/core'
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 
 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 16c2e8ff..d4aa61dd 100644
--- a/examples/vite/src/Basic/BasicOptionsAPI.vue
+++ b/examples/vite/src/Basic/BasicOptionsAPI.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { Elements, FlowEvents, VueFlowStore } from '@braks/vue-flow'
-import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
+import type { Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
+import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@vue-flow/core'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',
diff --git a/examples/vite/src/Basic/ResizableNode.vue b/examples/vite/src/Basic/ResizableNode.vue
index 12cbe130..f8b3f92d 100644
--- a/examples/vite/src/Basic/ResizableNode.vue
+++ b/examples/vite/src/Basic/ResizableNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Position, ValidConnectionFunc } from '@braks/vue-flow'
-import { Handle } from '@braks/vue-flow'
+import type { Position, ValidConnectionFunc } from '@vue-flow/core'
+import { Handle } from '@vue-flow/core'
 
 interface Props {
   id: string
diff --git a/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue b/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
index acdc369c..261ad586 100644
--- a/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
+++ b/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
+import type { Elements } from '@vue-flow/core'
+import { Background, BackgroundVariant, VueFlow } from '@vue-flow/core'
 import ConnectionLine from './ConnectionLine.vue'
 
 const elements = ref<Elements>([
diff --git a/examples/vite/src/CustomNode/ColorSelectorNode.vue b/examples/vite/src/CustomNode/ColorSelectorNode.vue
index f0469d59..47ae9a70 100644
--- a/examples/vite/src/CustomNode/ColorSelectorNode.vue
+++ b/examples/vite/src/CustomNode/ColorSelectorNode.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { Connection, Edge, NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { Connection, Edge, NodeProps } from '@vue-flow/core'
+import { Handle, Position } from '@vue-flow/core'
 
 interface ColorSelectorNodeProps extends NodeProps {
   data: {
diff --git a/examples/vite/src/CustomNode/CustomNode.vue b/examples/vite/src/CustomNode/CustomNode.vue
index a05cad1d..df70735a 100644
--- a/examples/vite/src/CustomNode/CustomNode.vue
+++ b/examples/vite/src/CustomNode/CustomNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, Node, SnapGrid } from '@braks/vue-flow'
-import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow'
+import type { Elements, Node, SnapGrid } from '@vue-flow/core'
+import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
 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 ece6f9cc..5c96a54e 100644
--- a/examples/vite/src/DragNDrop/DnD.vue
+++ b/examples/vite/src/DragNDrop/DnD.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Node } from '@braks/vue-flow'
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Node } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import Sidebar from './Sidebar.vue'
 
 let id = 0
diff --git a/examples/vite/src/EdgeTypes/EdgeTypesExample.vue b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
index b72560a5..34aa64bf 100644
--- a/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
+++ b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { VueFlowStore } from '@braks/vue-flow'
-import { Controls, MiniMap, VueFlow } from '@braks/vue-flow'
+import type { VueFlowStore } from '@vue-flow/core'
+import { Controls, MiniMap, VueFlow } from '@vue-flow/core'
 import { getElements } from './utils'
 
 const onLoad = (flowInstance: VueFlowStore) => {
diff --git a/examples/vite/src/EdgeTypes/utils.ts b/examples/vite/src/EdgeTypes/utils.ts
index 1f65a282..8b221619 100644
--- a/examples/vite/src/EdgeTypes/utils.ts
+++ b/examples/vite/src/EdgeTypes/utils.ts
@@ -1,5 +1,5 @@
-import type { Elements } from '@braks/vue-flow'
-import { Position } from '@braks/vue-flow'
+import type { Elements } from '@vue-flow/core'
+import { Position } from '@vue-flow/core'
 
 const nodeWidth = 80
 const nodeGapWidth = nodeWidth * 2
diff --git a/examples/vite/src/Edges/CustomEdge.vue b/examples/vite/src/Edges/CustomEdge.vue
index de99d9fc..89c730d8 100644
--- a/examples/vite/src/Edges/CustomEdge.vue
+++ b/examples/vite/src/Edges/CustomEdge.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { EdgeProps, Position } from '@braks/vue-flow'
-import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '@vue-flow/core'
+import { getBezierPath, getEdgeCenter, useVueFlow } from '@vue-flow/core'
 
 interface CustomEdgeProps<T = any> extends EdgeProps<T> {
   id: string
diff --git a/examples/vite/src/Edges/CustomEdge2.vue b/examples/vite/src/Edges/CustomEdge2.vue
index 29f5a7cd..fbdf6745 100644
--- a/examples/vite/src/Edges/CustomEdge2.vue
+++ b/examples/vite/src/Edges/CustomEdge2.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { EdgeProps, Position } from '@braks/vue-flow'
-import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '@vue-flow/core'
+import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@vue-flow/core'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string
diff --git a/examples/vite/src/Edges/EdgesExample.vue b/examples/vite/src/Edges/EdgesExample.vue
index 7f7ef74e..ec9bf530 100644
--- a/examples/vite/src/Edges/EdgesExample.vue
+++ b/examples/vite/src/Edges/EdgesExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Edge, Node } from '@braks/vue-flow'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Edge, Node } from '@vue-flow/core'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
diff --git a/examples/vite/src/Empty/EmptyExample.vue b/examples/vite/src/Empty/EmptyExample.vue
index ea8b692e..b5b517ae 100644
--- a/examples/vite/src/Empty/EmptyExample.vue
+++ b/examples/vite/src/Empty/EmptyExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Node } from '@braks/vue-flow'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow/src/index'
+import type { Node } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core/src/index'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
diff --git a/examples/vite/src/FloatingEdges/FloatingConnectionLine.vue b/examples/vite/src/FloatingEdges/FloatingConnectionLine.vue
index 91c4ec29..6e8ad7ed 100644
--- a/examples/vite/src/FloatingEdges/FloatingConnectionLine.vue
+++ b/examples/vite/src/FloatingEdges/FloatingConnectionLine.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { GraphNode, Position } from '@braks/vue-flow'
-import { getBezierPath } from '@braks/vue-flow'
+import type { GraphNode, Position } from '@vue-flow/core'
+import { getBezierPath } from '@vue-flow/core'
 import { getEdgeParams } from './floating-edge-utils'
 
 interface FloatingConnectionLineProps {
diff --git a/examples/vite/src/FloatingEdges/FloatingEdge.vue b/examples/vite/src/FloatingEdges/FloatingEdge.vue
index 6606811a..80fb2140 100644
--- a/examples/vite/src/FloatingEdges/FloatingEdge.vue
+++ b/examples/vite/src/FloatingEdges/FloatingEdge.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { EdgeProps, GraphNode, MarkerType } from '@braks/vue-flow'
-import { getBezierPath } from '@braks/vue-flow'
+import type { EdgeProps, GraphNode, MarkerType } from '@vue-flow/core'
+import { getBezierPath } from '@vue-flow/core'
 import { getEdgeParams } from './floating-edge-utils'
 
 interface FloatingEdgeProps extends EdgeProps {
diff --git a/examples/vite/src/FloatingEdges/FloatingEdges.vue b/examples/vite/src/FloatingEdges/FloatingEdges.vue
index ef354842..c84bbc61 100644
--- a/examples/vite/src/FloatingEdges/FloatingEdges.vue
+++ b/examples/vite/src/FloatingEdges/FloatingEdges.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, BackgroundVariant, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, BackgroundVariant, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'
diff --git a/examples/vite/src/FloatingEdges/floating-edge-utils.ts b/examples/vite/src/FloatingEdges/floating-edge-utils.ts
index c2c22987..61d5082a 100644
--- a/examples/vite/src/FloatingEdges/floating-edge-utils.ts
+++ b/examples/vite/src/FloatingEdges/floating-edge-utils.ts
@@ -1,5 +1,5 @@
-import type { Edge, GraphNode, XYPosition } from '@braks/vue-flow'
-import { MarkerType, Position } from '@braks/vue-flow'
+import type { Edge, GraphNode, XYPosition } from '@vue-flow/core'
+import { MarkerType, Position } from '@vue-flow/core'
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
diff --git a/examples/vite/src/Hidden/HiddenExample.vue b/examples/vite/src/Hidden/HiddenExample.vue
index 0d87dfbb..1b8c1a2d 100644
--- a/examples/vite/src/Hidden/HiddenExample.vue
+++ b/examples/vite/src/Hidden/HiddenExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+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 ce989d07..825bb2b7 100644
--- a/examples/vite/src/Interaction/InteractionExample.vue
+++ b/examples/vite/src/Interaction/InteractionExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, 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 1f83605f..4eb2a34b 100644
--- a/examples/vite/src/Layouting/LayoutingExample.vue
+++ b/examples/vite/src/Layouting/LayoutingExample.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
-import type { CoordinateExtent, Elements } from '@braks/vue-flow'
-import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@braks/vue-flow'
+import type { CoordinateExtent, Elements } from '@vue-flow/core'
+import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@vue-flow/core'
 import initialElements from './initial-elements'
 
 const dagreGraph = new dagre.graphlib.Graph()
diff --git a/examples/vite/src/Layouting/initial-elements.ts b/examples/vite/src/Layouting/initial-elements.ts
index 29d92e14..85018764 100644
--- a/examples/vite/src/Layouting/initial-elements.ts
+++ b/examples/vite/src/Layouting/initial-elements.ts
@@ -1,4 +1,4 @@
-import type { Elements, XYPosition } from '@braks/vue-flow'
+import type { Elements, XYPosition } from '@vue-flow/core'
 
 const position: XYPosition = { x: 0, y: 0 }
 
diff --git a/examples/vite/src/MultiFlows/Flow.vue b/examples/vite/src/MultiFlows/Flow.vue
index 8814e5c6..6b79c300 100644
--- a/examples/vite/src/MultiFlows/Flow.vue
+++ b/examples/vite/src/MultiFlows/Flow.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { Background, VueFlow } from '@braks/vue-flow'
+import type { Elements } from '@vue-flow/core'
+import { Background, VueFlow } from '@vue-flow/core'
 const initialElements: Elements = [
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
diff --git a/examples/vite/src/Nesting/GroupNode.vue b/examples/vite/src/Nesting/GroupNode.vue
index c9499696..33c58d7c 100644
--- a/examples/vite/src/Nesting/GroupNode.vue
+++ b/examples/vite/src/Nesting/GroupNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
-import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position, getNodesInside, useVueFlow } from '@vue-flow/core'
+import type { NodeProps } from '@vue-flow/core'
 
 const props = defineProps<NodeProps>()
 const { onNodeDragStop, getNodes, viewport } = useVueFlow()
diff --git a/examples/vite/src/Nesting/Nesting.vue b/examples/vite/src/Nesting/Nesting.vue
index b944dd3c..4c8366a6 100644
--- a/examples/vite/src/Nesting/Nesting.vue
+++ b/examples/vite/src/Nesting/Nesting.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,
diff --git a/examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue b/examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
index 71dc7955..b1b8b709 100644
--- a/examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
+++ b/examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, VueFlowStore } from '@braks/vue-flow'
-import { Position, VueFlow, addEdge, isEdge } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, VueFlowStore } from '@vue-flow/core'
+import { Position, VueFlow, addEdge, isEdge } from '@vue-flow/core'
 
 const initialElements: Elements = [
   {
diff --git a/examples/vite/src/Overview/Overview.vue b/examples/vite/src/Overview/Overview.vue
index d37ac8cc..656efa42 100644
--- a/examples/vite/src/Overview/Overview.vue
+++ b/examples/vite/src/Overview/Overview.vue
@@ -9,8 +9,8 @@ import type {
   Styles,
   ViewpaneTransform,
   VueFlowStore,
-} from '@braks/vue-flow'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
+} from '@vue-flow/core'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@vue-flow/core'
 
 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 646a81b4..87cdcd4c 100644
--- a/examples/vite/src/Provider/ProviderExample.vue
+++ b/examples/vite/src/Provider/ProviderExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, VueFlowStore } from '@braks/vue-flow'
-import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Elements, VueFlowStore } from '@vue-flow/core'
+import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
 import Sidebar from './Sidebar.vue'
 
 const onLoad = (flowInstance: VueFlowStore) => console.log('flow loaded:', flowInstance)
diff --git a/examples/vite/src/Provider/Sidebar.vue b/examples/vite/src/Provider/Sidebar.vue
index fbff809c..aa9be7ce 100644
--- a/examples/vite/src/Provider/Sidebar.vue
+++ b/examples/vite/src/Provider/Sidebar.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 const { nodesSelectionActive, addSelectedNodes, getNodes, viewport } = useVueFlow()
 
 const selectAll = () => {
diff --git a/examples/vite/src/RGBFlow/RGBFlow.vue b/examples/vite/src/RGBFlow/RGBFlow.vue
index e6d66686..415ae912 100644
--- a/examples/vite/src/RGBFlow/RGBFlow.vue
+++ b/examples/vite/src/RGBFlow/RGBFlow.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
-import type { Elements, VueFlowStore } from '@braks/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import type { Elements, VueFlowStore } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
 
diff --git a/examples/vite/src/RGBFlow/RGBNode.vue b/examples/vite/src/RGBFlow/RGBNode.vue
index c0ea1711..61ddc8ed 100644
--- a/examples/vite/src/RGBFlow/RGBNode.vue
+++ b/examples/vite/src/RGBFlow/RGBNode.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { NodeProps } from '@vue-flow/core'
+import { Handle, Position } from '@vue-flow/core'
 
 interface RGBNodeProps extends NodeProps {
   data: {
diff --git a/examples/vite/src/RGBFlow/RGBOutputNode.vue b/examples/vite/src/RGBFlow/RGBOutputNode.vue
index 793d8a33..905ce302 100644
--- a/examples/vite/src/RGBFlow/RGBOutputNode.vue
+++ b/examples/vite/src/RGBFlow/RGBOutputNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { NodeProps } from '@vue-flow/core'
+import { Handle, Position } from '@vue-flow/core'
 
 interface RBGOutputNodeProps extends NodeProps {
   rgb: string
diff --git a/examples/vite/src/SaveRestore/Controls.vue b/examples/vite/src/SaveRestore/Controls.vue
index 69deec4f..5f4d6a2d 100644
--- a/examples/vite/src/SaveRestore/Controls.vue
+++ b/examples/vite/src/SaveRestore/Controls.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { FlowExportObject, Node } from '@braks/vue-flow'
-import { useVueFlow, useZoomPanHelper } from '@braks/vue-flow'
+import type { FlowExportObject, Node } from '@vue-flow/core'
+import { useVueFlow, useZoomPanHelper } from '@vue-flow/core'
 
 const flowKey = 'example-flow'
 const state = useStorage<FlowExportObject>(flowKey, {
diff --git a/examples/vite/src/SaveRestore/SaveRestoreExample.vue b/examples/vite/src/SaveRestore/SaveRestoreExample.vue
index 2bebff33..2b004167 100644
--- a/examples/vite/src/SaveRestore/SaveRestoreExample.vue
+++ b/examples/vite/src/SaveRestore/SaveRestoreExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import type { Elements } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
 import Controls from './Controls.vue'
 
 const initialElements: Elements = [
diff --git a/examples/vite/src/Stress/StressExample.vue b/examples/vite/src/Stress/StressExample.vue
index ea324df3..4de5c430 100644
--- a/examples/vite/src/Stress/StressExample.vue
+++ b/examples/vite/src/Stress/StressExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { getElements } from './utils'
 
 const { nodes, edges } = getElements(10, 10)
diff --git a/examples/vite/src/Stress/utils.ts b/examples/vite/src/Stress/utils.ts
index 268abe79..1b650a9c 100644
--- a/examples/vite/src/Stress/utils.ts
+++ b/examples/vite/src/Stress/utils.ts
@@ -1,4 +1,4 @@
-import type { Edge, Node } from '@braks/vue-flow'
+import type { Edge, Node } from '@vue-flow/core'
 
 export function getElements(xElements = 10, yElements = 10) {
   const initialNodes: Node[] = []
diff --git a/examples/vite/src/Switch/SwitchExample.vue b/examples/vite/src/Switch/SwitchExample.vue
index 41958956..c48ceb59 100644
--- a/examples/vite/src/Switch/SwitchExample.vue
+++ b/examples/vite/src/Switch/SwitchExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import type { Elements } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
 
 const elementsA: Elements = [
   { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
diff --git a/examples/vite/src/Unidirectional/CustomNode.vue b/examples/vite/src/Unidirectional/CustomNode.vue
index 4316dc7d..5f59ad38 100644
--- a/examples/vite/src/Unidirectional/CustomNode.vue
+++ b/examples/vite/src/Unidirectional/CustomNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '@vue-flow/core'
 
 interface Props {
   id: string
diff --git a/examples/vite/src/Unidirectional/UnidirectionalExample.vue b/examples/vite/src/Unidirectional/UnidirectionalExample.vue
index a805b247..112a28cf 100644
--- a/examples/vite/src/Unidirectional/UnidirectionalExample.vue
+++ b/examples/vite/src/Unidirectional/UnidirectionalExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, Node } from '@braks/vue-flow'
-import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@braks/vue-flow'
+import type { Elements, Node } from '@vue-flow/core'
+import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@vue-flow/core'
 import CustomNode from './CustomNode.vue'
 
 const initialElements: Elements = [
diff --git a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
index 57738df8..8a5e084b 100644
--- a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@braks/vue-flow'
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, VueFlowStore } from '@vue-flow/core'
+import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
 
 const initialElements: Elements = [
   {
diff --git a/examples/vite/src/UpdateNode/UpdateNodeExample.vue b/examples/vite/src/UpdateNode/UpdateNodeExample.vue
index b76fe98b..cbb19296 100644
--- a/examples/vite/src/UpdateNode/UpdateNodeExample.vue
+++ b/examples/vite/src/UpdateNode/UpdateNodeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import type { Elements } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
 
 const initialElements: Elements = [
   { id: '1', label: '-', position: { x: 100, y: 100 } },
diff --git a/examples/vite/src/Validation/CustomInput.vue b/examples/vite/src/Validation/CustomInput.vue
index b0ab2e6a..ad71fc42 100644
--- a/examples/vite/src/Validation/CustomInput.vue
+++ b/examples/vite/src/Validation/CustomInput.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { ValidConnectionFunc } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { ValidConnectionFunc } from '@vue-flow/core'
+import { Handle, Position } from '@vue-flow/core'
 
 interface CustomInputProps {
   isValidTargetPos: ValidConnectionFunc
diff --git a/examples/vite/src/Validation/CustomNode.vue b/examples/vite/src/Validation/CustomNode.vue
index b84134a4..9b26603c 100644
--- a/examples/vite/src/Validation/CustomNode.vue
+++ b/examples/vite/src/Validation/CustomNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { NodeProps, ValidConnectionFunc } from '@vue-flow/core'
+import { Handle, Position } from '@vue-flow/core'
 
 interface CustomNodeProps extends NodeProps {
   id: string
diff --git a/examples/vite/src/Validation/ValidationExample.vue b/examples/vite/src/Validation/ValidationExample.vue
index 63b75ced..99a6c521 100644
--- a/examples/vite/src/Validation/ValidationExample.vue
+++ b/examples/vite/src/Validation/ValidationExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, OnConnectStartParams, VueFlowStore } from '@braks/vue-flow'
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Connection, OnConnectStartParams, VueFlowStore } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
 
diff --git a/examples/vite/vite.config.ts b/examples/vite/vite.config.ts
index 27991204..f2bfdcb8 100644
--- a/examples/vite/vite.config.ts
+++ b/examples/vite/vite.config.ts
@@ -24,6 +24,6 @@ export default defineConfig({
     }),
   ],
   optimizeDeps: {
-    exclude: ['@braks/vue-flow'],
+    exclude: ['@vue-flow/core'],
   },
 })
diff --git a/package.json b/package.json
index 36ffa049..a2d8093a 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@braks/vue-flow-monorepo",
+  "name": "@vue-flow/monorepo",
   "version": "0.0.0",
   "private": true,
   "scripts": {
diff --git a/packages/pathfinding-edge/README.md b/packages/pathfinding-edge/README.md
index 67266acc..80f4891b 100644
--- a/packages/pathfinding-edge/README.md
+++ b/packages/pathfinding-edge/README.md
@@ -6,18 +6,18 @@ __Custom edge that avoids crossing nodes__
 
 ```bash
 # install
-$ yarn add @braks/vue-flow-pathfinding-edge
+$ yarn add @vue-flow/core-pathfinding-edge
 
 # or
-$ npm i --save @braks/vue-flow-pathfinding-edge
+$ npm i --save @vue-flow/core-pathfinding-edge
 ```
 
 ## 🎮 Quickstart
 
 ```vue
 <script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
-import { PathFindingEdge } from '@braks/vue-flow-pathfinding-edge'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { PathFindingEdge } from '@vue-flow/core-pathfinding-edge'
 import initialElements from './initial-elements'
 
 const elements = ref(initialElements)
diff --git a/packages/pathfinding-edge/example/App.vue b/packages/pathfinding-edge/example/App.vue
index 0a206255..0f3ca4a3 100644
--- a/packages/pathfinding-edge/example/App.vue
+++ b/packages/pathfinding-edge/example/App.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements } from '@braks/vue-flow'
-import { Background, VueFlow, addEdge } from '@braks/vue-flow'
+import type { Connection, Edge, Elements } from '@vue-flow/core'
+import { Background, VueFlow, addEdge } from '@vue-flow/core'
 import { ref } from 'vue'
 import initialElements from './elements'
 import { PathFindingEdge, PerfectArrow } from '~/index'
@@ -31,8 +31,8 @@ const onConnect = (params: Edge | Connection) => (elements.value = addEdge(param
 </template>
 
 <style>
-@import '@braks/vue-flow/dist/style.css';
-@import '@braks/vue-flow/dist/theme-default.css';
+@import '@vue-flow/core/dist/style.css';
+@import '@vue-flow/core/dist/theme-default.css';
 
 html,
 body,
diff --git a/packages/pathfinding-edge/example/elements.ts b/packages/pathfinding-edge/example/elements.ts
index e3e3f99c..eb751d74 100644
--- a/packages/pathfinding-edge/example/elements.ts
+++ b/packages/pathfinding-edge/example/elements.ts
@@ -1,5 +1,5 @@
-import type { EdgeMarkerType, Elements } from '@braks/vue-flow'
-import { MarkerType } from '@braks/vue-flow'
+import type { EdgeMarkerType, Elements } from '@vue-flow/core'
+import { MarkerType } from '@vue-flow/core'
 
 const markerEnd: EdgeMarkerType = MarkerType.Arrow
 
diff --git a/packages/pathfinding-edge/package.json b/packages/pathfinding-edge/package.json
index 4053e1e9..e993afc2 100644
--- a/packages/pathfinding-edge/package.json
+++ b/packages/pathfinding-edge/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@braks/vue-flow-pathfinding-edge",
+  "name": "@vue-flow/pathfinding-edge",
   "version": "0.2.2",
   "private": false,
   "repository": {
@@ -34,7 +34,7 @@
     "perfect-arrows": "^0.3.7"
   },
   "devDependencies": {
-    "@braks/vue-flow": "workspace:*",
+    "@vue-flow/core": "workspace:*",
     "@types/pathfinding": "^0.0.5",
     "@vitejs/plugin-vue": "^2.3.4",
     "ts-patch": "^2.0.1",
@@ -45,7 +45,7 @@
     "vue-tsc": "^0.40.13"
   },
   "peerDependencies": {
-    "@braks/vue-flow": "^0.4.29",
+    "@vue-flow/core": "^0.4.29",
     "vue": "^3.2.25"
   },
   "publishConfig": {
diff --git a/packages/pathfinding-edge/src/arrow/PerfectArrow.vue b/packages/pathfinding-edge/src/arrow/PerfectArrow.vue
index 33df0912..8bb888fb 100644
--- a/packages/pathfinding-edge/src/arrow/PerfectArrow.vue
+++ b/packages/pathfinding-edge/src/arrow/PerfectArrow.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { EdgeText, getEdgeCenter } from '@braks/vue-flow'
+import { EdgeText, getEdgeCenter } from '@vue-flow/core'
 import type { CSSProperties } from 'vue'
 import { getArrow } from 'perfect-arrows'
 import type { PerfectArrowProps } from '../types'
diff --git a/packages/pathfinding-edge/src/edge/PathFindingEdge.vue b/packages/pathfinding-edge/src/edge/PathFindingEdge.vue
index 491dd744..709aa4d2 100644
--- a/packages/pathfinding-edge/src/edge/PathFindingEdge.vue
+++ b/packages/pathfinding-edge/src/edge/PathFindingEdge.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Position } from '@braks/vue-flow'
-import { BezierEdge, EdgeText, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
+import type { Position } from '@vue-flow/core'
+import { BezierEdge, EdgeText, getEdgeCenter, useVueFlow } from '@vue-flow/core'
 import type { PathFindingEdgeProps } from '../types'
 import { createGrid, gridRatio } from './createGrid'
 import { drawSmoothLinePath } from './drawSvgPath'
diff --git a/packages/pathfinding-edge/src/edge/createGrid.ts b/packages/pathfinding-edge/src/edge/createGrid.ts
index 480a1803..8cfacac1 100644
--- a/packages/pathfinding-edge/src/edge/createGrid.ts
+++ b/packages/pathfinding-edge/src/edge/createGrid.ts
@@ -1,5 +1,5 @@
 import { Grid } from 'pathfinding'
-import type { Position } from '@braks/vue-flow'
+import type { Position } from '@vue-flow/core'
 import { getNextPointFromPosition, guaranteeWalkablePath } from './guaranteeWalkablePath'
 import { graphToGridPoint } from './pointConversion'
 import { round } from './utils'
diff --git a/packages/pathfinding-edge/src/edge/drawSvgPath.ts b/packages/pathfinding-edge/src/edge/drawSvgPath.ts
index 30b8462c..fb67461e 100644
--- a/packages/pathfinding-edge/src/edge/drawSvgPath.ts
+++ b/packages/pathfinding-edge/src/edge/drawSvgPath.ts
@@ -1,4 +1,4 @@
-import type { XYPosition } from '@braks/vue-flow'
+import type { XYPosition } from '@vue-flow/core'
 
 /**
  * Draws an SVG path from a list of points, using straight lines.
diff --git a/packages/pathfinding-edge/src/edge/generatePath.ts b/packages/pathfinding-edge/src/edge/generatePath.ts
index 80a3fed8..66e9c256 100644
--- a/packages/pathfinding-edge/src/edge/generatePath.ts
+++ b/packages/pathfinding-edge/src/edge/generatePath.ts
@@ -1,6 +1,6 @@
 import { AStarFinder, DiagonalMovement, Util } from 'pathfinding'
 import type { Grid, Heuristic } from 'pathfinding'
-import type { XYPosition } from '@braks/vue-flow'
+import type { XYPosition } from '@vue-flow/core'
 
 // https://www.npmjs.com/package/pathfinding#advanced-usage
 declare module 'pathfinding' {
diff --git a/packages/pathfinding-edge/src/edge/getBoundingBoxes.ts b/packages/pathfinding-edge/src/edge/getBoundingBoxes.ts
index ebda0d9d..2b8797f8 100644
--- a/packages/pathfinding-edge/src/edge/getBoundingBoxes.ts
+++ b/packages/pathfinding-edge/src/edge/getBoundingBoxes.ts
@@ -1,4 +1,4 @@
-import type { GraphNode, XYPosition } from '@braks/vue-flow'
+import type { GraphNode, XYPosition } from '@vue-flow/core'
 import { roundDown, roundUp } from './utils'
 
 export interface NodeBoundingBox {
diff --git a/packages/pathfinding-edge/src/edge/guaranteeWalkablePath.ts b/packages/pathfinding-edge/src/edge/guaranteeWalkablePath.ts
index 9023e31b..86394a8f 100644
--- a/packages/pathfinding-edge/src/edge/guaranteeWalkablePath.ts
+++ b/packages/pathfinding-edge/src/edge/guaranteeWalkablePath.ts
@@ -1,5 +1,5 @@
 import type { Grid } from 'pathfinding'
-import type { Position, XYPosition } from '@braks/vue-flow'
+import type { Position, XYPosition } from '@vue-flow/core'
 
 type Direction = 'top' | 'bottom' | 'left' | 'right'
 
diff --git a/packages/pathfinding-edge/src/edge/pointConversion.ts b/packages/pathfinding-edge/src/edge/pointConversion.ts
index 8875c985..1d86281b 100644
--- a/packages/pathfinding-edge/src/edge/pointConversion.ts
+++ b/packages/pathfinding-edge/src/edge/pointConversion.ts
@@ -1,4 +1,4 @@
-import type { XYPosition } from '@braks/vue-flow'
+import type { XYPosition } from '@vue-flow/core'
 
 const gridRatio = 10
 
diff --git a/packages/pathfinding-edge/src/types.ts b/packages/pathfinding-edge/src/types.ts
index 673d78fb..6bf22785 100644
--- a/packages/pathfinding-edge/src/types.ts
+++ b/packages/pathfinding-edge/src/types.ts
@@ -1,4 +1,4 @@
-import type { EdgeProps, Position } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '@vue-flow/core'
 import type { CSSProperties } from 'vue'
 import type { ArrowOptions } from 'perfect-arrows'
 
diff --git a/packages/resize-rotate-node/README.md b/packages/resize-rotate-node/README.md
index e93e4806..bad9049a 100644
--- a/packages/resize-rotate-node/README.md
+++ b/packages/resize-rotate-node/README.md
@@ -6,10 +6,10 @@
 
 ```bash
 # install
-$ yarn add @braks/vue-flow-resize-rotate-node
+$ yarn add @vue-flow/core-resize-rotate-node
 
 # or
-$ npm i --save @braks/vue-flow-resize-rotate-node
+$ npm i --save @vue-flow/core-resize-rotate-node
 ```
 
 ## 🎮 Quickstart
@@ -17,8 +17,8 @@ $ npm i --save @braks/vue-flow-resize-rotate-node
 ```vue
 
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
-import { ResizeRotateNode } from '@braks/vue-flow-resize-rotate-node'
+import { VueFlow } from '@vue-flow/core'
+import { ResizeRotateNode } from '@vue-flow/core-resize-rotate-node'
 import initialElements from './initial-elements'
 
 const elements = ref(initialElements)
diff --git a/packages/resize-rotate-node/example/App.vue b/packages/resize-rotate-node/example/App.vue
index 70d9db6d..9d85416d 100644
--- a/packages/resize-rotate-node/example/App.vue
+++ b/packages/resize-rotate-node/example/App.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, FlowEvents } from '@braks/vue-flow'
-import { Background, Controls, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
+import type { Elements, FlowEvents } from '@vue-flow/core'
+import { Background, Controls, MiniMap, VueFlow, addEdge } from '@vue-flow/core'
 import { ref } from 'vue'
 import { ResizeRotateNode } from '../src'
 import initialElements from './elements'
@@ -27,8 +27,8 @@ const onConnect = (params: FlowEvents['connect']) => (elements.value = addEdge(p
 </template>
 
 <style>
-@import '@braks/vue-flow/dist/style.css';
-@import '@braks/vue-flow/dist/theme-default.css';
+@import '@vue-flow/core/dist/style.css';
+@import '@vue-flow/core/dist/theme-default.css';
 
 html,
 body,
diff --git a/packages/resize-rotate-node/example/elements.ts b/packages/resize-rotate-node/example/elements.ts
index f18f2a12..278bd024 100644
--- a/packages/resize-rotate-node/example/elements.ts
+++ b/packages/resize-rotate-node/example/elements.ts
@@ -1,4 +1,4 @@
-import type { Elements } from '@braks/vue-flow'
+import type { Elements } from '@vue-flow/core'
 
 export default [
   {
diff --git a/packages/resize-rotate-node/package.json b/packages/resize-rotate-node/package.json
index 68ba5ef3..40f46a04 100644
--- a/packages/resize-rotate-node/package.json
+++ b/packages/resize-rotate-node/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@braks/vue-flow-resize-rotate-node",
+  "name": "@vue-flow/resize-rotate-node",
   "version": "0.0.3",
   "private": false,
   "repository": {
@@ -34,7 +34,7 @@
     "vue3-moveable": "^0.4.9"
   },
   "devDependencies": {
-    "@braks/vue-flow": "workspace:*",
+    "@vue-flow/core": "workspace:*",
     "@vitejs/plugin-vue": "^2.3.4",
     "ts-patch": "^2.0.1",
     "typescript-transform-paths": "^3.3.1",
@@ -44,7 +44,7 @@
     "vue-tsc": "^0.40.13"
   },
   "peerDependencies": {
-    "@braks/vue-flow": "^0.4.37",
+    "@vue-flow/core": "^0.4.37",
     "vue": "^3.2.25"
   },
   "publishConfig": {
diff --git a/packages/resize-rotate-node/src/node/ResizeRotateNode.vue b/packages/resize-rotate-node/src/node/ResizeRotateNode.vue
index 4c485291..7aa4a9c1 100644
--- a/packages/resize-rotate-node/src/node/ResizeRotateNode.vue
+++ b/packages/resize-rotate-node/src/node/ResizeRotateNode.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Moveable from 'vue3-moveable'
-import type { Dimensions } from '@braks/vue-flow'
-import { Handle, useVueFlow } from '@braks/vue-flow'
+import type { Dimensions } from '@vue-flow/core'
+import { Handle, useVueFlow } from '@vue-flow/core'
 import { useMoveable } from './utils'
 import type { ResizeRotateNodeProps } from './types'
 
diff --git a/packages/resize-rotate-node/src/node/types.ts b/packages/resize-rotate-node/src/node/types.ts
index 35f22227..dddff61c 100644
--- a/packages/resize-rotate-node/src/node/types.ts
+++ b/packages/resize-rotate-node/src/node/types.ts
@@ -1,4 +1,4 @@
-import type { Dimensions, ElementData, Position } from '@braks/vue-flow'
+import type { Dimensions, ElementData, Position } from '@vue-flow/core'
 import type { MoveableProps } from 'vue3-moveable'
 import type { CSSProperties } from 'vue'
 
diff --git a/packages/resize-rotate-node/src/node/utils.ts b/packages/resize-rotate-node/src/node/utils.ts
index 24f9bcb2..00d1f16f 100644
--- a/packages/resize-rotate-node/src/node/utils.ts
+++ b/packages/resize-rotate-node/src/node/utils.ts
@@ -1,6 +1,6 @@
 import type { Able, MoveableEvents, MoveableManagerInterface } from 'vue3-moveable'
-import type { GraphNode } from '@braks/vue-flow'
-import { useVueFlow } from '@braks/vue-flow'
+import type { GraphNode } from '@vue-flow/core'
+import { useVueFlow } from '@vue-flow/core'
 import type { ResizeRotateNodeData, ResizeRotateNodeEmits } from './types'
 
 export function useMoveable(id: string, emits: ResizeRotateNodeEmits) {
diff --git a/packages/vue-flow/package.json b/packages/vue-flow/package.json
index 74405714..060922c5 100644
--- a/packages/vue-flow/package.json
+++ b/packages/vue-flow/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@braks/vue-flow",
+  "name": "@vue-flow/core",
   "version": "0.4.41",
   "private": false,
   "license": "MIT",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 731eed6a..4074dc7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,7 +31,7 @@ importers:
       '@algolia/client-search': ^4.14.2
       '@animxyz/core': ^0.6.6
       '@animxyz/vue3': ^0.6.7
-      '@braks/vue-flow': workspace:*
+      '@vue-flow/core': workspace:*
       '@iconify/json': ^2.1.95
       '@stackblitz/sdk': ^1.8.0
       '@types/canvas-confetti': ^1.4.3
@@ -55,7 +55,7 @@ importers:
       '@algolia/client-search': 4.14.2
       '@animxyz/core': 0.6.6
       '@animxyz/vue3': 0.6.7_vue@3.2.37
-      '@braks/vue-flow': link:../packages/vue-flow
+      '@vue-flow/core': link:../packages/vue-flow
       '@stackblitz/sdk': 1.8.0
       '@vue/repl': 1.1.2_vue@3.2.37
       blobity: 0.2.1_react@18.2.0+vue@3.2.37
@@ -79,27 +79,27 @@ importers:
 
   e2e:
     specifiers:
-      '@braks/vue-flow': workspace:*
+      '@vue-flow/core': workspace:*
       '@vitejs/plugin-vue': ^2.3.4
       cypress: ^10.9.0
     dependencies:
-      '@braks/vue-flow': link:../packages/vue-flow
+      '@vue-flow/core': link:../packages/vue-flow
     devDependencies:
       '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.40
       cypress: 10.9.0
 
   examples/nuxt3:
     specifiers:
-      '@braks/vue-flow': workspace:*
+      '@vue-flow/core': workspace:*
       nuxt: 3.0.0-rc.11
     dependencies:
-      '@braks/vue-flow': link:../../packages/vue-flow
+      '@vue-flow/core': link:../../packages/vue-flow
     devDependencies:
       nuxt: 3.0.0-rc.11_rollup@2.79.1+vite@3.1.6
 
   examples/quasar:
     specifiers:
-      '@braks/vue-flow': workspace:*
+      '@vue-flow/core': workspace:*
       '@quasar/app-vite': ^1.0.5
       '@quasar/extras': ^1.15.4
       '@types/node': ^18.8.3
@@ -109,7 +109,7 @@ importers:
       vue: ^3.2.37
       vue-router: ^4.1.5
     dependencies:
-      '@braks/vue-flow': link:../../packages/vue-flow
+      '@vue-flow/core': link:../../packages/vue-flow
       '@quasar/extras': 1.15.4
       quasar: 2.9.2
       vue: 3.2.37
@@ -122,7 +122,7 @@ importers:
 
   examples/vite:
     specifiers:
-      '@braks/vue-flow': workspace:*
+      '@vue-flow/core': workspace:*
       '@types/dagre': ^0.7.47
       '@vitejs/plugin-vue': ^2.3.4
       dagre: ^0.8.5
@@ -133,7 +133,7 @@ importers:
       vue: ^3.2.37
       vue-router: ^4.1.5
     dependencies:
-      '@braks/vue-flow': link:../../packages/vue-flow
+      '@vue-flow/core': link:../../packages/vue-flow
     devDependencies:
       '@types/dagre': 0.7.47
       '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.37
@@ -147,7 +147,7 @@ importers:
 
   packages/pathfinding-edge:
     specifiers:
-      '@braks/vue-flow': workspace:*
+      '@vue-flow/core': workspace:*
       '@types/pathfinding': ^0.0.5
       '@vitejs/plugin-vue': ^2.3.4
       pathfinding: ^0.4.18
@@ -164,7 +164,7 @@ importers:
       perfect-arrows: 0.3.7
       vue: 3.2.37
     devDependencies:
-      '@braks/vue-flow': link:../vue-flow
+      '@vue-flow/core': link:../vue-flow
       '@types/pathfinding': 0.0.5
       '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.37
       ts-patch: 2.0.1_typescript@4.8.4
@@ -176,7 +176,7 @@ importers:
 
   packages/resize-rotate-node:
     specifiers:
-      '@braks/vue-flow': workspace:*
+      '@vue-flow/core': workspace:*
       '@vitejs/plugin-vue': ^2.3.4
       '@vueuse/core': ^8.9.4
       ts-patch: ^2.0.1
@@ -192,7 +192,7 @@ importers:
       vue: 3.2.37
       vue3-moveable: 0.4.9_@types+react@16.9.56
     devDependencies:
-      '@braks/vue-flow': link:../vue-flow
+      '@vue-flow/core': link:../vue-flow
       '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.37
       ts-patch: 2.0.1_typescript@4.8.4
       typescript-transform-paths: 3.3.1_typescript@4.8.4