refactor: change pkg scope to vue-flow

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