refactor: change pkg scope to vue-flow

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)

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,
     },
   })

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'
 

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

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'
 

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'

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'
 

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

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'

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

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

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

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)

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'
 

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 = [
   {

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>

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 {

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([

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

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'
 

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'
 

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'
 

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'

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

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'
 
 /**

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([

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

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([

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 = '-'

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"

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

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

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>

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'

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

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'])
 

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'])

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'

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'])

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'

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

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

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",

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'
 

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

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

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',

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 {

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

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

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

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

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' },

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

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

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

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

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

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)

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

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

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

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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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' })

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' })

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>

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>

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

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

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[] = []

e2e/package.json

@@ -7,7 +7,7 @@
     "open": "cypress open"
   },
   "dependencies": {
-    "@braks/vue-flow": "workspace:*"
+    "@vue-flow/core": "workspace:*"
   },
   "devDependencies": {
     "cypress": "^10.9.0",

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,

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'
 

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

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"

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",

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'
 

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'
 

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

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

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,

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;

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",

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' },

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',

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

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>([