diff --git a/docs/components/Repl.vue b/docs/components/Repl.vue
index 98708f4e..c7d32ea7 100644
--- a/docs/components/Repl.vue
+++ b/docs/components/Repl.vue
@@ -36,9 +36,11 @@ const store = new ReplStore({
   outputMode: 'preview',
 })
 
+const vh = useCssVar('--vh')
+
 watchEffect(
   () => {
-    document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`)
+    vh.value = `${window.innerHeight}px`
   },
   { flush: 'post' },
 )
@@ -99,12 +101,14 @@ const sfcOptions = {
 }
 
 .vue-repl {
+  --vh: 100vh;
+
   @apply rounded-lg border-1 border-solid dark:border-gray-200/10 border-gray-200;
 
-  height: calc(var(--vh) - var(--navbar-height));
+  height: calc(var(--vh) - 72px);
 }
 
 .msg.err {
-  display: none;
+  @apply hidden;
 }
 </style>
diff --git a/docs/components/examples/teleport/style.css b/docs/components/examples/teleport/style.css
index ef076e6f..63301cb2 100644
--- a/docs/components/examples/teleport/style.css
+++ b/docs/components/examples/teleport/style.css
@@ -71,7 +71,7 @@
   gap: 5px;
 }
 
-.button {
+.buttons .button {
   background-color: whitesmoke;
   cursor: pointer;
   padding: 5px 10px;
@@ -82,7 +82,7 @@
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
-.button:hover {
+.buttons .button:hover {
   background: black;
   color: white;
 }
diff --git a/docs/components/home/Acknowledgement.vue b/docs/components/home/Acknowledgement.vue
index e969fbe2..3115dd94 100644
--- a/docs/components/home/Acknowledgement.vue
+++ b/docs/components/home/Acknowledgement.vue
@@ -3,8 +3,8 @@ import Heart from '~icons/mdi/heart'
 </script>
 
 <template>
-  <div id="acknowledgement" class="w-full dark:(bg-black text-white) border-y-1 border-white">
-    <div class="max-w-11/12 md:max-w-6/12 m-auto py-4 md:(pb-12 pt-6) text-center">
+  <div id="acknowledgement" class="w-full">
+    <div class="max-w-[1024px] md:max-w-3/4 m-auto py-4 md:(pb-12 pt-6) text-center">
       <div>
         <h1 class="md:mb-8 flex justify-center items-center"><Heart class="text-red-500" /> Acknowledgement</h1>
         <strong>First off</strong>: A big thank you to the developers of
diff --git a/docs/components/home/Banner.vue b/docs/components/home/Banner.vue
index 2b3fcd0e..dd8a87dc 100644
--- a/docs/components/home/Banner.vue
+++ b/docs/components/home/Banner.vue
@@ -8,7 +8,7 @@ const npmData = await $fetch('https://api.npmjs.org/downloads/point/last-month/@
 </script>
 
 <template>
-  <div class="w-full dark:(bg-black text-white border-white) border-black border-y-1">
+  <div class="w-full dark:(border-white) border-black border-y-1">
     <div class="max-w-full md:max-w-11/12 m-auto py-4 md:py-12 <md:(dark:border-t-1 border-white)">
       <div class="grid md:grid-cols-3 gap-3 text-center <md:divide-y md:divide-x dark:divide-white divide-black">
         <div class="grid grid-rows-auto gap-2 py-4 md:py-0">
diff --git a/docs/components/home/Features.vue b/docs/components/home/Features.vue
index 53bf7bae..81a2bf7f 100644
--- a/docs/components/home/Features.vue
+++ b/docs/components/home/Features.vue
@@ -24,7 +24,7 @@ onBeforeUnmount(stop)
 </script>
 
 <template>
-  <div ref="el" class="w-full dark:(bg-black text-white)">
+  <div ref="el" class="w-full">
     <div
       class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left"
     >
diff --git a/docs2/components/home/Team.vue b/docs/components/home/Team.vue
similarity index 100%
rename from docs2/components/home/Team.vue
rename to docs/components/home/Team.vue
diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index 7eddbdf6..4ddb904b 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -239,7 +239,7 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
 </script>
 
 <template>
-  <VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
+  <VueFlow ref="el">
     <XyzTransition xyz="fade down ease-out-back duration-10" mode="out-in">
       <Background v-if="animatedBackground">
         <template #pattern-container="{ id }">
@@ -306,21 +306,21 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
       </template>
       <template v-else-if="props.id === 'documentation'">
         <div class="flex">
-          <router-link class="link group bg-[#f15a16]" to="/guide/"> Read The Documentation </router-link>
+          <router-link class="intro-link group bg-[#f15a16]" to="/guide/"> Read The Documentation </router-link>
         </div>
         <Handle type="target" :position="Position.Top" />
         <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
       </template>
       <template v-else-if="props.id === 'examples'">
         <div class="flex">
-          <router-link class="link group bg-[#ef467e]" to="/examples/"> Check The Examples </router-link>
+          <router-link class="intro-link group bg-[#ef467e]" to="/examples/"> Check The Examples </router-link>
         </div>
         <Handle type="target" :position="Position.Top" />
         <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
       </template>
       <template v-else-if="props.id === 'acknowledgement'">
         <div class="flex" @click="scrollTo">
-          <button class="link group bg-sky-500"><Heart class="text-red-500" /> Acknowledgement</button>
+          <button class="intro-link group bg-sky-500"><Heart class="text-red-500" /> Acknowledgement</button>
         </div>
         <Handle type="target" :position="Position.Top" />
       </template>
@@ -431,7 +431,7 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
   hover:(ring ring-white);
 }
 
-.link {
+.intro-link {
   @apply flex
   gap-3
   items-center
diff --git a/docs/package.json b/docs/package.json
index b126c331..19ebb959 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,41 +1,39 @@
 {
-  "name": "docs",
-  "version": "0.0.0",
+  "name": "docs2",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "pnpm run typedoc && vuepress dev src",
-    "build": "pnpm run typedoc && vuepress build src",
+    "dev": "pnpm run typedoc && vitepress dev src",
+    "build": "pnpm run typedoc && vitepress build src",
+    "serve": "vitepress serve src",
     "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore .",
-    "typedoc": "typedoc --options ./typedoc.json"
+    "typedoc": "typedoc --options ./typedoc.json",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
+    "@algolia/client-search": "^4.14.2",
     "@animxyz/core": "^0.6.6",
     "@animxyz/vue3": "^0.6.7",
     "@braks/vue-flow": "workspace:*",
     "@stackblitz/sdk": "^1.8.0",
     "@vue/repl": "1.1.2",
-    "blobity": "^0.1.7",
+    "blobity": "^0.2.1",
     "canvas-confetti": "^1.5.1"
   },
   "devDependencies": {
-    "@iconify/json": "^2.1.81",
+    "@iconify/json": "^2.1.85",
     "@types/canvas-confetti": "^1.4.3",
-    "@types/node": "^18.0.6",
-    "@vuepress/bundler-vite": "^2.0.0-beta.49",
-    "@vuepress/plugin-docsearch": "^2.0.0-beta.49",
-    "@vuepress/plugin-pwa": "^2.0.0-beta.49",
+    "@types/node": "^18.6.2",
     "@windicss/plugin-scrollbar": "^1.2.3",
     "dotenv": "^16.0.1",
     "ohmyfetch": "^0.4.18",
     "typedoc": "^0.22.18",
     "typedoc-plugin-markdown": "^3.13.4",
-    "unplugin-auto-import": "^0.9.5",
-    "unplugin-icons": "^0.14.7",
-    "unplugin-vue-components": "^0.19.9",
+    "unplugin-auto-import": "^0.10.3",
+    "unplugin-icons": "^0.14.8",
+    "unplugin-vue-components": "^0.21.2",
     "vite-plugin-windicss": "^1.8.7",
-    "vuepress": "^2.0.0-beta.49",
-    "vuepress-plugin-seo2": "^2.0.0-beta.84",
-    "vuepress-plugin-sitemap2": "^2.0.0-beta.84",
+    "vitepress": "^1.0.0-alpha.4",
     "windicss": "^3.5.6"
   }
 }
diff --git a/docs2/src/.vitepress/config.ts b/docs/src/.vitepress/config.ts
similarity index 100%
rename from docs2/src/.vitepress/config.ts
rename to docs/src/.vitepress/config.ts
diff --git a/docs/src/.vuepress/copy-plugin.ts b/docs/src/.vitepress/copy-plugin.ts
similarity index 100%
rename from docs/src/.vuepress/copy-plugin.ts
rename to docs/src/.vitepress/copy-plugin.ts
diff --git a/docs/src/.vuepress/head.ts b/docs/src/.vitepress/head.ts
similarity index 100%
rename from docs/src/.vuepress/head.ts
rename to docs/src/.vitepress/head.ts
diff --git a/docs2/src/.vitepress/theme/index.ts b/docs/src/.vitepress/theme/index.ts
similarity index 100%
rename from docs2/src/.vitepress/theme/index.ts
rename to docs/src/.vitepress/theme/index.ts
diff --git a/docs2/src/.vitepress/theme/layouts/default.vue b/docs/src/.vitepress/theme/layouts/default.vue
similarity index 100%
rename from docs2/src/.vitepress/theme/layouts/default.vue
rename to docs/src/.vitepress/theme/layouts/default.vue
diff --git a/docs2/src/.vitepress/windi.config.ts b/docs/src/.vitepress/windi.config.ts
similarity index 100%
rename from docs2/src/.vitepress/windi.config.ts
rename to docs/src/.vitepress/windi.config.ts
diff --git a/docs/src/.vuepress/assets/index.css b/docs/src/.vuepress/assets/index.css
deleted file mode 100644
index 9734ccf0..00000000
--- a/docs/src/.vuepress/assets/index.css
+++ /dev/null
@@ -1,111 +0,0 @@
-:root {
-  --primary: #BB86FC;
-  --secondary: #03dac5;
-}
-
-.dark {
-  --c-text-lighter: white !important;
-  --c-text: white !important;
-  --c-bg: black !important;
-}
-
-.dark .tip {
-  --c-bg-light: gray;
-}
-
-.tip {
-  --c-bg-light: white;
-}
-
-html, body {
-  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
-}
-
-.home {
-  --content-width: 100%;
-  max-width: 100% !important;
-  @apply !px-0;
-}
-
-.page a {
-  @apply text-green-500 font-semibold;
-}
-
-.examples .page, .examples .page-meta, .footer, .sidebar {
-  @apply dark:(!bg-black text-white);
-}
-
-.examples .page {
-  --content-width: 100%;
-}
-
-.theme-default-content {
-  @apply overflow-scroll md:overflow-hidden;
-}
-
-.navbar {
-  @apply dark:bg-gray-900;
-}
-
-h1 {
-  @apply text-xl lg:text-4xl mb-4 font-bold;
-}
-
-h2 {
-  @apply text-lg lg:text-2xl mb-4 font-semibold;
-}
-
-p {
-  line-height: inherit;
-  margin: revert;
-}
-
-ul li {
-  @apply mt-2;
-}
-
-.docs-button {
-  @apply z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg mt-4 px-5 py-3 rounded-lg bg-green-500;
-}
-
-.vue-flow__node.dark {
-  @apply bg-gray-800 text-white;
-}
-
-.vue-flow__node-selector {
-  font-size: 14px;
-  background: #f0f2f3;
-  border: 1px solid #555;
-  border-radius: 5px;
-  text-align: center;
-}
-
-.vue-flow__node-selector .vue-flow__handle {
-  border-color: #f0f2f3;
-}
-
-.slider {
-  --color: red;
-  @apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
-  -webkit-appearance: none;
-  appearance: none;
-
-  &::-moz-range-thumb {
-     @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
-     -webkit-appearance: none;
-     background: var(--color);
-   }
-  &::-webkit-slider-thumb {
-     @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
-     -webkit-appearance: none;
-     background: var(--color);
-   }
-}
-
-.theme-container.examples .theme-default-content .vue-repl pre, .theme-default-content .vue-repl pre[class*=language-] {
-  padding: unset;
-  margin: unset;
-  border-radius: unset;
-  line-height: unset;
-
-}
diff --git a/docs/src/.vuepress/assets/polygon-scatter.svg b/docs/src/.vuepress/assets/polygon-scatter.svg
deleted file mode 100644
index 5b07c11f..00000000
--- a/docs/src/.vuepress/assets/polygon-scatter.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="960" height="540" fill="#31475e"></rect><g><g transform="translate(57 45)"><path d="M0 -106.9L83.6 -66.7L104.2 23.8L46.4 96.3L-46.4 96.3L-104.2 23.8L-83.6 -66.7Z" fill="#3fb984"></path></g><g transform="translate(708 88)"><path d="M0 -66L51.6 -41.2L64.3 14.7L28.6 59.5L-28.6 59.5L-64.3 14.7L-51.6 -41.2Z" fill="#3fb984"></path></g><g transform="translate(823 510)"><path d="M0 -77L60.2 -48L75.1 17.1L33.4 69.4L-33.4 69.4L-75.1 17.1L-60.2 -48Z" fill="#3fb984"></path></g><g transform="translate(896 280)"><path d="M0 -45L35.2 -28.1L43.9 10L19.5 40.5L-19.5 40.5L-43.9 10L-35.2 -28.1Z" fill="#3fb984"></path></g><g transform="translate(287 458)"><path d="M0 -58L45.3 -36.2L56.5 12.9L25.2 52.3L-25.2 52.3L-56.5 12.9L-45.3 -36.2Z" fill="#3fb984"></path></g><g transform="translate(12 380)"><path d="M0 -101L79 -63L98.5 22.5L43.8 91L-43.8 91L-98.5 22.5L-79 -63Z" fill="#3fb984"></path></g><g transform="translate(609 440)"><path d="M0 -60L46.9 -37.4L58.5 13.4L26 54.1L-26 54.1L-58.5 13.4L-46.9 -37.4Z" fill="#3fb984"></path></g><g transform="translate(457 42)"><path d="M0 -81L63.3 -50.5L79 18L35.1 73L-35.1 73L-79 18L-63.3 -50.5Z" fill="#3fb984"></path></g></g></svg>
\ No newline at end of file
diff --git a/docs/src/.vuepress/components.d.ts b/docs/src/.vuepress/components.d.ts
deleted file mode 100644
index 7a638935..00000000
--- a/docs/src/.vuepress/components.d.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    Acknowledgement: typeof import('./../../components/home/Acknowledgement.vue')['default']
-    Additional: typeof import('./../../components/home/flows/Additional.vue')['default']
-    App: typeof import('./../../components/examples/basic/App.vue')['default']
-    Banner: typeof import('./../../components/home/Banner.vue')['default']
-    Basic: typeof import('./../../components/home/flows/Basic.vue')['default']
-    Controls: typeof import('./../../components/examples/save-restore/Controls.vue')['default']
-    Custom: typeof import('./../../components/home/edges/Custom.vue')['default']
-    CustomConnectionLine: typeof import('./../../components/examples/connectionline/CustomConnectionLine.vue')['default']
-    CustomEdge: typeof import('./../../components/examples/edges/CustomEdge.vue')['default']
-    CustomEdge2: typeof import('./../../components/examples/edges/CustomEdge2.vue')['default']
-    CustomEdgeLabel: typeof import('./../../components/examples/edges/CustomEdgeLabel.vue')['default']
-    CustomInput: typeof import('./../../components/examples/validation/CustomInput.vue')['default']
-    CustomNode: typeof import('./../../components/examples/custom-node/CustomNode.vue')['default']
-    Features: typeof import('./../../components/home/Features.vue')['default']
-    Flow: typeof import('./../../components/examples/multi/Flow.vue')['default']
-    Home: typeof import('./../../components/home/Home.vue')['default']
-    Input: typeof import('./../../components/home/nodes/Input.vue')['default']
-    InteractionControls: typeof import('./../../components/examples/interaction/InteractionControls.vue')['default']
-    Intro: typeof import('./../../components/home/flows/Intro.vue')['default']
-    Nested: typeof import('./../../components/home/flows/Nested.vue')['default']
-    Output: typeof import('./../../components/home/nodes/Output.vue')['default']
-    PiniaExample: typeof import('./../../components/examples/pinia/PiniaExample.vue')['default']
-    Repl: typeof import('./../../components/Repl.vue')['default']
-    RGB: typeof import('./../../components/home/flows/RGB.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    Sidebar: typeof import('./../../components/examples/dnd/Sidebar.vue')['default']
-    TeleportableNode: typeof import('./../../components/examples/teleport/TeleportableNode.vue')['default']
-  }
-}
-
-export {}
diff --git a/docs/src/.vuepress/config.ts b/docs/src/.vuepress/config.ts
deleted file mode 100644
index c363bdfd..00000000
--- a/docs/src/.vuepress/config.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { resolve } from 'path'
-import { config } from 'dotenv'
-import { defineUserConfig } from 'vuepress'
-import type { HeadConfig } from 'vuepress'
-import { docsearchPlugin } from '@vuepress/plugin-docsearch'
-import { viteBundler } from '@vuepress/bundler-vite'
-import WindiCSS from 'vite-plugin-windicss'
-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 seoPlugin from 'vuepress-plugin-seo2'
-import sitemapPlugin from 'vuepress-plugin-sitemap2'
-import { copyVueFlowPlugin } from './copy-plugin'
-import head, { meta } from './head'
-import Theme from './theme'
-
-config({ path: resolve(__dirname, '.env') })
-
-export default defineUserConfig({
-  title: 'Vue Flow',
-  description: 'Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.',
-  head: head as HeadConfig[],
-
-  dest: resolve(__dirname, '../../dist'),
-
-  bundler: viteBundler({
-    viteOptions: {
-      optimizeDeps: {
-        exclude: ['@animxyz/vue3'],
-      },
-      plugins: [
-        copyVueFlowPlugin(),
-        AutoImport({
-          imports: ['vue', '@vueuse/core'],
-          dts: resolve(__dirname, './auto-imports.d.ts'),
-        }),
-        WindiCSS({
-          transformCSS: 'pre',
-          config: resolve(__dirname, './windi.config.ts'),
-        }),
-        Components({
-          dirs: [resolve(__dirname, '../../components')],
-          deep: true,
-          // allow auto load markdown components under `./src/components/`
-          extensions: ['vue', 'md'],
-          // allow auto import and register components used in markdown
-          include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-          dts: resolve(__dirname, './components.d.ts'),
-          resolvers: [IconsResolver()],
-        }),
-        Icons({
-          compiler: 'vue3',
-        }),
-      ],
-    },
-  }),
-
-  plugins: [
-    [
-      docsearchPlugin({
-        appId: 'F7BJNSM4M5',
-        apiKey: process.env.ALGOLIA_API_KEY!,
-        indexName: 'vueflow',
-      }),
-      seoPlugin({
-        hostname: meta.url,
-        author: 'Burak Cakmakoglu',
-      }),
-      sitemapPlugin({
-        hostname: meta.url,
-      }),
-    ],
-  ],
-
-  theme: Theme,
-})
diff --git a/docs/src/.vuepress/theme/clientAppEnhance.ts b/docs/src/.vuepress/theme/clientAppEnhance.ts
deleted file mode 100644
index ac68a28f..00000000
--- a/docs/src/.vuepress/theme/clientAppEnhance.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { defineClientConfig } from '@vuepress/client'
-import VueAnimXyz from '@animxyz/vue3'
-
-export default defineClientConfig({
-  enhance({ app, router, siteData }){
-    app.use(VueAnimXyz)
-  },
-  setup(){},
-  rootComponents: [],
-})
diff --git a/docs/src/.vuepress/theme/index.ts b/docs/src/.vuepress/theme/index.ts
deleted file mode 100644
index 84918e9b..00000000
--- a/docs/src/.vuepress/theme/index.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { resolve } from 'path'
-import { readdirSync, statSync } from 'fs'
-import type { SidebarConfigArray, Theme } from 'vuepress'
-import { defaultTheme } from 'vuepress'
-import { path } from '@vuepress/utils'
-import { useVueFlow } from '@braks/vue-flow'
-
-const { vueFlowVersion } = useVueFlow()
-
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-const typedocSidebarEntries = (): SidebarConfigArray => {
-  const filePath = resolve(__dirname, '../../typedocs')
-
-  const docsModules = readdirSync(filePath).filter((name) => statSync(`${filePath}/${name}`).isDirectory())
-
-  const sidebarItems = docsModules.map((module) => {
-    let children = readdirSync(`${filePath}/${module}/`).map((entry) => `/typedocs/${module}/${entry}`)
-
-    if (module === 'variables') {
-      children = children.filter((child) => {
-        return child.includes('default')
-      })
-    }
-
-    return { text: capitalize(module), children }
-  })
-
-  return [
-    {
-      text: 'Modules',
-      link: '/typedocs/',
-      children: [...sidebarItems],
-    },
-  ]
-}
-
-export default {
-  name: 'vuepress-theme-local',
-  extends: defaultTheme({
-    docsDir: 'docs/src/',
-    docsBranch: 'master',
-    lastUpdated: true,
-    contributors: true,
-    colorMode: 'auto',
-    colorModeSwitch: true,
-    logo: '/favicons/android-chrome-512x512.png',
-    sidebar: {
-      '/guide/': [
-        {
-          text: 'Guide',
-          children: [
-            '/guide/',
-            '/guide/getting-started',
-            '/guide/theming',
-            {
-              text: 'Vue Flow',
-              children: [
-                '/guide/vue-flow/config',
-                '/guide/vue-flow/state',
-                {
-                  text: 'Actions',
-                  link: '/typedocs/interfaces/Actions.html',
-                },
-                {
-                  text: 'Getters',
-                  link: '/typedocs/interfaces/Getters.html',
-                },
-                {
-                  text: 'Events',
-                  link: '/typedocs/interfaces/FlowEvents.html',
-                },
-                '/guide/vue-flow/slots',
-              ],
-            },
-            '/guide/node',
-            '/guide/edge',
-            '/guide/composables',
-            {
-              text: 'Utilities',
-              children: ['/guide/utils/graph', '/guide/utils/instance', '/guide/utils/edge'],
-            },
-            {
-              text: 'Components',
-              children: [
-                '/guide/components/background',
-                '/guide/components/minimap',
-                '/guide/components/minimap-node',
-                '/guide/components/controls',
-                '/guide/components/control-button',
-              ],
-            },
-          ],
-        },
-      ],
-      '/examples/': [
-        {
-          text: 'Examples',
-          children: [
-            '/examples/',
-            {
-              text: 'Nodes',
-              children: ['/examples/nodes/', '/examples/nodes/update-node', '/examples/nodes/nesting'],
-            },
-            {
-              text: 'Edges',
-              children: [
-                '/examples/edges/',
-                '/examples/edges/updatable-edge',
-                '/examples/edges/connection-line',
-                '/examples/edges/validation',
-              ],
-            },
-            '/examples/save',
-            '/examples/dnd',
-            '/examples/empty',
-            '/examples/hidden',
-            '/examples/horizontal',
-            '/examples/interaction',
-            '/examples/teleport',
-            '/examples/multi',
-            '/examples/pinia',
-            '/examples/stress',
-          ],
-        },
-      ],
-      '/typedocs/': typedocSidebarEntries(),
-    },
-    navbar: [
-      { text: `v${vueFlowVersion.value}`, link: '/' },
-      { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
-      {
-        text: 'Examples',
-        link: '/examples/',
-        activeMatch: '^/examples/',
-      },
-      {
-        text: 'TypeDocs',
-        link: '/typedocs/',
-        activeMatch: '^/typedocs/',
-      },
-    ],
-  }),
-  layouts: {
-    Layout: resolve(__dirname, 'layouts/default.vue'),
-  },
-  clientConfigFile: path.resolve(__dirname, './clientAppEnhance.ts'),
-} as Theme
diff --git a/docs/src/.vuepress/theme/layouts/default.vue b/docs/src/.vuepress/theme/layouts/default.vue
deleted file mode 100644
index 4b9ce0c8..00000000
--- a/docs/src/.vuepress/theme/layouts/default.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script>
-import 'virtual:windi.css'
-import '@animxyz/core'
-import '@braks/vue-flow/dist/style.css'
-import '@braks/vue-flow/dist/theme-default.css'
-import '../../assets/index.css'
-</script>
-<script setup>
-import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
-import ReactIcon from '~icons/logos/react'
-import GithubIcon from '~icons/carbon/logo-github'
-import DiscordIcon from '~icons/logos/discord-icon'
-</script>
-<template>
-  <ParentLayout>
-    <template #navbar-before>
-      <XyzTransition appear-visible xyz="fade perspective-1 down ease-out-back duration-10">
-        <div class="border-1 border-gray-300 bg-white dark:bg-gray-800 dark:(shadow-gray-700 shadow-md) shadow-lg select-none flex justify-center items-center mx-2 gap-6 px-4 py-2 rounded-lg">
-          <a
-            href="https://github.com/bcakmakoglu/vue-flow"
-            target="_blank" rel="noopener noreferrer"
-            aria-label="GitHub"
-            class="bg-white rounded-full relative group cursor-pointer flex justify-center items-center"
-          >
-            <GithubIcon class="text-black text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
-            <span class="transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute top-[25px] right-0 mt-2 mr-2 text-xs">
-          Contribute on GitHub!
-        </span>
-          </a>
-          <a
-            href="https://discord.gg/F4v6qE4Fuq"
-            target="_blank" rel="noopener noreferrer"
-            aria-label="Discord"
-            class="relative group cursor-pointer flex justify-center items-center"
-          >
-            <DiscordIcon class="text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
-            <span class="transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute top-[25px] right-0 mt-2 mr-2 text-xs">
-          Join the Discord server!
-        </span>
-          </a>
-          <a
-            href="https://reactflow.dev/"
-            target="_blank" rel="noopener noreferrer"
-            aria-label="React Flow"
-            class="relative group cursor-pointer flex justify-center items-center"
-          >
-            <ReactIcon class="text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
-            <span class="transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute top-[25px] right-0 mt-2 mr-2 text-xs">
-          Check out the original React Flow by Wbkd!
-        </span>
-          </a>
-        </div>
-      </XyzTransition>
-      <div class="hidden md:(block w-8) lg:w-12" />
-    </template>
-    <template #page-bottom>
-      <div class="page-footer">MIT Licensed | Copyright © 2021-present Burak Cakmakoglu</div>
-    </template>
-  </ParentLayout>
-</template>
-<style>
-.page-footer {
-  @apply dark:(text-white bg-black) pt-[2rem] text-center;
-  border-top: 1px solid var(--c-border);
-  transition: border-color var(--t-color);
-}
-</style>
diff --git a/docs/src/.vuepress/windi.config.ts b/docs/src/.vuepress/windi.config.ts
deleted file mode 100644
index 26a4eccd..00000000
--- a/docs/src/.vuepress/windi.config.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { defineConfig } from 'windicss/helpers'
-import { resolve } from 'path'
-import typography from 'windicss/plugin/typography'
-// @ts-ignore
-import scrollbar from '@windicss/plugin-scrollbar'
-
-export default defineConfig({
-  extract: {
-    include: [
-      resolve(__dirname, './theme/**/*.{ts,md,vue}'),
-      resolve(__dirname, '../../components/**/*.{ts,md,vue}'),
-      resolve(__dirname, '../**/*.{ts,md,vue}')
-    ],
-  },
-
-  attributify: true,
-  darkMode: 'class',
-
-  plugins: [
-    typography({
-      dark: true,
-    }),
-    scrollbar
-  ],
-
-  shortcuts: {
-    'primary-gradient': 'bg-gradient-to-b from-accent-500 via-accent-700 to-accent-900',
-  },
-
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          '50': '#fcf9ff',
-          '100': '#f8f3ff',
-          '200': '#eee1fe',
-          '300': '#e4cffe',
-          '400': '#cfaafd',
-          '500': '#BB86FC',
-          '600': '#a879e3',
-          '700': '#8c65bd',
-          '800': '#705097',
-          '900': '#5c427b',
-          'DEFAULT': '#BB86FC',
-        },
-        secondary: {
-          '50': '#c4fef9',
-          '100': '#9df7ef',
-          '200': '#77f0e4',
-          '300': '#50e8da',
-          '400': '#2ae1cf',
-          '500': '#03dac5',
-          '600': '#03ae9d',
-          '700': '#028276',
-          '800': '#02564e',
-          '900': '#012a26',
-          'DEFAULT': '#03dac5',
-        },
-        accent: {
-          '50': '#e6d4ff',
-          '100': '#ccaafc',
-          '200': '#b17ff8',
-          '300': '#9755f5',
-          '400': '#7c2af1',
-          '500': '#6200ee',
-          '600': '#5000c1',
-          '700': '#3d0095',
-          '800': '#2b0068',
-          '900': '#18003b',
-          'DEFAULT': '#6200ee',
-        },
-      },
-    },
-  },
-})
diff --git a/docs2/src/assets/index.css b/docs/src/assets/index.css
similarity index 100%
rename from docs2/src/assets/index.css
rename to docs/src/assets/index.css
diff --git a/docs/src/.vuepress/auto-imports.d.ts b/docs/src/auto-imports.d.ts
similarity index 100%
rename from docs/src/.vuepress/auto-imports.d.ts
rename to docs/src/auto-imports.d.ts
diff --git a/docs2/src/components.d.ts b/docs/src/components.d.ts
similarity index 100%
rename from docs2/src/components.d.ts
rename to docs/src/components.d.ts
diff --git a/docs/src/examples/edges/validation.md b/docs/src/examples/edges/validation.md
index 962d87be..d458e020 100644
--- a/docs/src/examples/edges/validation.md
+++ b/docs/src/examples/edges/validation.md
@@ -8,7 +8,7 @@ layout: page
 Connections can be validated before edges are created and nodes get connected. 
 
 ## Using a handle in a custom node
-```vue:no-line-numbers
+```vue
 <div>
   [ ... ]
 
diff --git a/docs/src/guide/composables.md b/docs/src/guide/composables.md
index 3d8a8f15..094d78ef 100644
--- a/docs/src/guide/composables.md
+++ b/docs/src/guide/composables.md
@@ -10,7 +10,7 @@ The composition API and the power of provide/inject allows us to act more flexib
 a component tree.
 Thus accessing the internal state of Vue Flow becomes super easy when using composition.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { useVueFlow, VueFlow } from '@braks/vue-flow'
 
@@ -49,7 +49,7 @@ using viewpane transforms.
 All functions can also be accessed from `useVueFlow`.
 It requires a valid Vue Flow store in its context.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { useZoomPanHelper } from '@braks/vue-flow'
 
diff --git a/docs/src/guide/edge.md b/docs/src/guide/edge.md
index 48facf81..3183bb60 100644
--- a/docs/src/guide/edge.md
+++ b/docs/src/guide/edge.md
@@ -13,7 +13,7 @@ You can check the full options for an edge element in the TypeDocs [here](/typed
 
 Generally you create edges by adding them to the model-value or the edges prop of the Vue Flow component.
 
-```vue:no-line-numbers
+```vue
 <script>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -59,7 +59,7 @@ For more advanced graphs that require more state access you will want to use the
 you with an [`addEdges`](/typedocs/interfaces/Actions.html#addedges/) utility function, which you can use to add edges
 directly to the state.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
 
@@ -111,7 +111,7 @@ These edge types include `default` (bezier), `step`, `smoothstep` and `straight`
 
 A bezier edge has a curved path.
 
-```js:no-line-numbers
+```js
 const edges = [
   {
     id: 'e1-2',
@@ -125,7 +125,7 @@ const edges = [
 
 A step edge has a straight path with a step towards the target.
 
-```js:no-line-numbers{4}
+```js{4}
 const edges = [
   {
     id: 'e1-2',
@@ -140,7 +140,7 @@ const edges = [
 
 The same as the step edge though with a border radius on the step (rounded step).
 
-```js:no-line-numbers{4}
+```js{4}
 const edges = [
   {
     id: 'e1-2',
@@ -155,7 +155,7 @@ const edges = [
 
 A simple straight path.
 
-```js:no-line-numbers{4}
+```js{4}
 const edges = [
   {
     id: 'e1-2',
@@ -171,7 +171,7 @@ const edges = [
 In addition to the default edge types from the previous chapter, you can define any amount of custom edge-types.
 Edge-types are inferred from your edge's definition.
 
-```js:no-line-numbers{5,11}
+```js{5,11}
 const edges = [
   {
     id: 'e1-2',
@@ -195,7 +195,7 @@ The easiest way to define custom edges is, by passing them as template slots.
 Your custom edge-types are dynamically resolved to slot-names, meaning an edge with the type `custom`
 will expect a slot to have the name `edge-custom`.
 
-```vue:no-line-numbers{18,26}
+```vue{18,26}
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 import CustomEdge from './CustomEdge.vue'
@@ -239,7 +239,7 @@ turned into reactive objects.
 Otherwise, vue will throw a warning in the console.
 :::
 
-```vue:no-line-numbers{5-7,28}
+```vue{5-7,28}
 <script setup>
 import { markRaw } from 'vue'
 import CustomEdge from './CustomEdge.vue'
@@ -277,7 +277,7 @@ const elements = ref([
 You can also set a template per edge, which will overwrite the edge-type component but will retain
 the type otherwise.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { markRaw } from 'vue'
 import CustomEdge from './CustomEdge.vue'
@@ -358,7 +358,7 @@ In addition to the event handlers that you can access through [`useVueFlow`](/gu
 you can also pass in event handlers in your initial node definition, or you can access the node events through the `events` prop passed
 to your node components.
 
-```vue:no-line-numbers{19-26}
+```vue{19-26}
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -395,7 +395,7 @@ to forward callback functions to your custom components.
 The `click` handler is part of the [`EdgeEventsHandler`](/typedocs/types/EdgeEventsHandler.html) type, meaning it will be
 triggered when the edge is clicked.
 
-```vue:no-line-numbers
+```vue
 <script lang="ts" setup>
 import type { EdgeProps, EdgeEventsOn } from '@braks/vue-flow'
 
diff --git a/docs/src/guide/getting-started.md b/docs/src/guide/getting-started.md
index 32b64157..1cb38593 100644
--- a/docs/src/guide/getting-started.md
+++ b/docs/src/guide/getting-started.md
@@ -10,7 +10,7 @@
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
-```bash:no-line-numbers
+```bash
 yarn add @braks/vue-flow
 ```
 
@@ -19,7 +19,7 @@ yarn add @braks/vue-flow
 
   <CodeGroupItem title="NPM">
 
-```bash:no-line-numbers
+```bash
 npm i --save @braks/vue-flow
 ```
 
@@ -37,7 +37,7 @@ Together we call them
 A node also needs a [xy-position](/typedocs/interfaces/XYPosition.html/). An edge needs at least a
 source (node id) and a target (node id).
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow  } from '@braks/vue-flow'
 
@@ -79,14 +79,14 @@ A basic setup would look like this:
 <CodeGroup>
   <CodeGroupItem title="Composition API" active>
 
-@[code vue:no-line-numbers](../../../examples/vite/src/Basic/Basic.vue)
+@[code vue](../../../examples/vite/src/Basic/Basic.vue)
 
   </CodeGroupItem>
 
 
   <CodeGroupItem title="Options API">
 
-@[code vue:no-line-numbers](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
+@[code vue](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
 
   </CodeGroupItem>
 </CodeGroup>
diff --git a/docs/src/guide/node.md b/docs/src/guide/node.md
index 826e7251..938a3145 100644
--- a/docs/src/guide/node.md
+++ b/docs/src/guide/node.md
@@ -14,7 +14,7 @@ You can check the full options for a node element [here](/typedocs/interfaces/No
 
 Generally you create nodes by adding them to the model-value or the nodes prop of the Vue Flow component.
 
-```vue:no-line-numbers
+```vue
 <script>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -55,7 +55,7 @@ For more advanced graphs that require more state access you will want to use the
 you with an [`addNodes`](/typedocs/interfaces/Actions.html#addnodes/) utility function, which you can use to add nodes
 directly to the state.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
 
@@ -92,7 +92,7 @@ You can also apply changes using the [`applyNodeChanges`](/typedocs/interfaces/A
 function,
 which expects an array of [changes](/typedocs/types/NodeChange.html/) to be applied to the currently stored nodes.
 
-```vue:no-line-numbers{11,17-22}
+```vue{11,17-22}
 <script setup>
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
 
@@ -138,7 +138,7 @@ It represents a branching point in your map.
 
 You can specify the position of handles in the node definition.
 
-```js:no-line-numbers{5-6}
+```js{5-6}
 const nodes = [
   {
     id: '1',
@@ -168,7 +168,7 @@ It represents an ending point of your map.
 In addition to the default node types from the previous chapter, you can define any amount of custom node-types.
 Node-types are inferred from your node's definition.
 
-```js:no-line-numbers{5,11}
+```js{5,11}
 const nodes = [
   {
     id: '1',
@@ -198,7 +198,7 @@ The easiest way to define custom nodes is, by passing them as template slots.
 Your custom node-types are dynamically resolved to slot-names, meaning a node with the type `custom`
 will expect a slot to have the name `node-custom`.
 
-```vue:no-line-numbers{9,16}
+```vue{9,16}
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 import CustomNode from './CustomNode.vue'
@@ -232,7 +232,7 @@ turned into reactive objects.
 Otherwise, vue will throw a warning in the console.
 :::
 
-```vue:no-line-numbers{6-9,26}
+```vue{6-9,26}
 <script setup>
 import { markRaw } from 'vue'
 import CustomNode from './CustomNode.vue'
@@ -272,7 +272,7 @@ You can find a more advanced example [here](/examples/custom-node.html/).
 You can also set a template per node, which will overwrite the node-type component but will retain
 the type otherwise.
 
-```vue:no-line-numbers{17}
+```vue{17}
 <script setup>
 import { markRaw } from 'vue'
 import CustomNode from './CustomNode.vue'
@@ -339,7 +339,7 @@ you can also pass in event handlers in your initial node definition, or you can
 the `events` prop passed
 to your node components.
 
-```vue:no-line-numbers{9-13}
+```vue{9-13}
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -368,7 +368,7 @@ The `click` handler is part of the [`NodeEventsHandler`](/typedocs/types/NodeEve
 will be
 triggered when the node is clicked.
 
-```vue:no-line-numbers
+```vue
 <script lang="ts" setup>
 import type { NodeProps, NodeEventsOn } from '@braks/vue-flow'
 
@@ -405,7 +405,7 @@ To overwrite default theme styles check the [Theming section](/guide/theming.htm
 
 When you create a new node type you also need to implement some styling. Your custom node has no default styles.
 
-```css:no-line-numbers
+```css
 .vue-flow__node-custom {
   background: #9CA8B3;
   color: #fff;
@@ -435,7 +435,7 @@ or you can emit the `updateNodeInternals` event from your custom node component
 
 - Using store action
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { useVueFlow } from '@braks/vue-flow'
 
@@ -449,7 +449,7 @@ const onSomeEvent = () => {
 
 - Emitting event from custom component
 
-```vue:no-line-numbers
+```vue
 <script setup>
 const emits = defineEmits(['updateNodeInternals'])
 
diff --git a/docs/src/guide/theming.md b/docs/src/guide/theming.md
index 11e949e8..98773fd3 100644
--- a/docs/src/guide/theming.md
+++ b/docs/src/guide/theming.md
@@ -3,7 +3,7 @@
 VueFlow comes without any pre-injected stylings. Some necessary stylings have to be imported, though optional styles (i.e.
 the default theme) can be skipped.
 
-```css:no-line-numbers
+```css
 /* these are necessary styles for vue flow */
 @import '@braks/vue-flow/dist/style.css';
 
@@ -20,7 +20,7 @@ your own CSS rules, pass style/class properties to the components or use the ava
 
 You can customize the default theme by simply overwriting the class definitions with your own custom ones.
 
-```css:no-line-numbers
+```css
 .vue-flow {
   background: red;
 }
@@ -30,7 +30,7 @@ You can customize the default theme by simply overwriting the class definitions
 
 You can also pass a style or class attribute directly to the Vue Flow component.
 
-```vue:no-line-numbers{4}
+```vue{4}
 <div style="height: 300px">
   <VueFlow
     v-model="elements"
@@ -41,7 +41,7 @@ You can also pass a style or class attribute directly to the Vue Flow component.
 
 Nodes/Edges can also be styled with a style or class attribute.
 
-```ts:no-line-numbers{8-12,20-27}
+```ts{7-11,19-26}
 const nodes = ref<Node[]>([
   { 
     id: '1', 
@@ -87,7 +87,7 @@ These variables can either be applied globally or you can define them on an elem
 }
 ```
 
-```ts:no-line-numbers{4-5}
+```ts{4-5}
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
   
@@ -112,8 +112,6 @@ const elements = ref<Elements>([
 | --vf-handle           | Node handle color                        |
 | --vf-connection-path  | Connectionline color                     |
 
-
-
 ## Classes
 
 | Name                          | Container                                                |
@@ -126,7 +124,7 @@ const elements = ref<Elements>([
 | .vue-flow__selection          | User selection                                           |
 | .vue-flow__edges              | Edges renderer wrapper                                   |
 | .vue-flow__edge               | Edge element wrapper                                     |
-| .vue-flow__edge-{$type}       | Edge type, either a custom or default type               |
+| .vue-flow__edge-{type}        | Edge type, either a custom or default type               |
 | .vue-flow__edge .selected     | Selected Edge                                            |
 | .vue-flow__edge .animated     | Animated edge                                            |
 | .vue-flow__edge-path          | Edge element svg path                                    |
@@ -138,7 +136,7 @@ const elements = ref<Elements>([
 | .vue-flow__nodes              | Nodes renderer wrapper                                   |
 | .vue-flow__node               | Node element wrapper                                     |
 | .vue-flow__node .selected     | Selected Node                                            |
-| .vue-flow__node-{$type}       | Node type, either a custom or default type               |
+| .vue-flow__node-{type}        | Node type, either a custom or default type               |
 | .vue-flow__nodesselection     | Nodes selection rect                                     |
 | .vue-flow__handle             | Node handle element wrapper                              |
 | .vue-flow__handle-bottom      | Handle position bottom                                   |
diff --git a/docs/src/guide/utils/edge.md b/docs/src/guide/utils/edge.md
index be491763..c83785ef 100644
--- a/docs/src/guide/utils/edge.md
+++ b/docs/src/guide/utils/edge.md
@@ -2,7 +2,7 @@
 
 All default edge components are exported and can be used or extended if necessary.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 // CustomEdge.vue
 import { EdgeProps, BezierEdge } from '@braks/vue-flow'
diff --git a/docs/src/guide/utils/graph.md b/docs/src/guide/utils/graph.md
index 06f41452..b5144c20 100644
--- a/docs/src/guide/utils/graph.md
+++ b/docs/src/guide/utils/graph.md
@@ -8,7 +8,7 @@
 
 - Example:
 
-```vue:no-line-numbers{13}
+```vue{13}
 <script setup>
 import { VueFlow, isEdge } from '@braks/vue-flow'
 
@@ -42,7 +42,7 @@ const toggleClass = () => {
 
 - Example:
 
-```vue:no-line-numbers{13}
+```vue{13}
 <script setup>
 import { VueFlow, isNode } from '@braks/vue-flow'
 
@@ -81,7 +81,7 @@ of [`useVueFlow`](/guide/composables.html#usevueflow/)
 
 - Example:
 
-```vue:no-line-numbers{12}
+```vue{12}
 <script setup>
 import { VueFlow, addEdge } from '@braks/vue-flow'
 
@@ -114,7 +114,7 @@ of [`useVueFlow`](/guide/composables.html#usevueflow/)
 
 - Example:
 
-```vue:no-line-numbers{12}
+```vue{12}
 <script setup>
 import { VueFlow, updateEdge } from '@braks/vue-flow'
 
diff --git a/docs/src/guide/utils/instance.md b/docs/src/guide/utils/instance.md
index ef8c52a7..7b0471c1 100644
--- a/docs/src/guide/utils/instance.md
+++ b/docs/src/guide/utils/instance.md
@@ -11,7 +11,7 @@ instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents.html#panere
 <CodeGroup>
   <CodeGroupItem title="Composition API" active>
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
 
@@ -27,7 +27,7 @@ onPaneReady((instance) => instance.fitView())
 
   <CodeGroupItem title="Options API">
 
-```vue:no-line-numbers
+```vue
 <script>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -64,7 +64,7 @@ export default defineComponent({
 
 - Example:
 
-```ts:no-line-numbers
+```ts
 vueFlowInstance.project({ x: 100, y: 100 })
 ```
 
@@ -78,7 +78,7 @@ vueFlowInstance.project({ x: 100, y: 100 })
 
 - Example:
 
-```ts:no-line-numbers
+```ts
 vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
 ```
 
@@ -90,7 +90,7 @@ vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
 
 - Example:
 
-```ts:no-line-numbers
+```ts
 vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
 ```
 
@@ -102,7 +102,7 @@ vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
 
 - Example:
 
-```ts:no-line-numbers
+```ts
 vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
 ```
 
@@ -156,7 +156,7 @@ vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
 
 - Example:
 
-```ts:no-line-numbers
+```ts
 toObject = (): {
   elements: FlowElements,
   position: [x, y],
diff --git a/docs/src/guide/vue-flow/config.md b/docs/src/guide/vue-flow/config.md
index f0ba2b74..027426b8 100644
--- a/docs/src/guide/vue-flow/config.md
+++ b/docs/src/guide/vue-flow/config.md
@@ -7,7 +7,7 @@ as options to the [`useVueFlow`](/guide/composables.html#usevueflow/) composable
 <CodeGroup>
   <CodeGroupItem title="Props" active>
 
-```vue:no-line-numbers
+```vue
 <!-- Pass configuration as props -->
 <template>
   <VueFlow :default-zoom="0.5" :max-zoom="4" :min-zoom="0.1" />
@@ -19,7 +19,7 @@ as options to the [`useVueFlow`](/guide/composables.html#usevueflow/) composable
 
   <CodeGroupItem title="Composable">
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { useVueFlow  } from '@braks/vue-flow'
 
@@ -42,7 +42,7 @@ by `useVueFlow`.
 <CodeGroup>
   <CodeGroupItem title="Props" active>
 
-```vue:no-line-numbers{2,5-6,10}
+```vue{2,5-6,10}
 <script setup>
 const defaultZoom = ref(1)
 
@@ -61,7 +61,7 @@ onMounted(() => {
 
   <CodeGroupItem title="Composable">
 
-```vue:no-line-numbers{2,7-8}
+```vue{2,7-8}
 <script setup>
 const { defaultZoom } = useVueFlow({
   defaultZoom: 0.5,
@@ -101,7 +101,7 @@ onMounted(() => {
 
 - Example:
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -133,7 +133,7 @@ const elements = ref([
 
 - Example:
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -163,7 +163,7 @@ const nodes = ref([
 
 - Example:
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -198,7 +198,7 @@ const edges = ref([
 
 - Example:
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 import CustomNode from './CustomNode.vue'
@@ -235,7 +235,7 @@ const edges = ref([
 
 - Example:
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 import CustomEdge from './CustomEdge.vue'
@@ -275,7 +275,7 @@ const edges = ref([
 
 - Example:
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -496,7 +496,7 @@ const edges = ref([
 
 - Default:
 
-```ts:no-line-numbers
+```ts
 [
   [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
   [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
@@ -557,7 +557,7 @@ const edges = ref([
 
 - Example:
 
-```vue:no-line-numbers{5-6,10}
+```vue{5-6,10}
 <script setup>
 const elements = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -585,7 +585,7 @@ const elements = ref([
 
 - Example:
 
-```vue:no-line-numbers{5-6,10}
+```vue{5-6,10}
 <script setup>
 const elements = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -605,7 +605,7 @@ const elements = ref([
 
 - Default:
 
-```ts:no-line-numbers
+```ts
 [
   [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
   [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
@@ -620,7 +620,7 @@ const elements = ref([
 
 - Example:
 
-```vue:no-line-numbers{5-6}
+```vue{5-6}
 <script setup>
 const elements = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -676,7 +676,7 @@ const elements = ref([
 
 - Example:
 
-```vue:no-line-numbers{7-8,12}
+```vue{7-8,12}
 <script setup>
 const elements = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -753,7 +753,7 @@ const elements = ref([
 
 ##### Boolean value
 
-```vue:no-line-numbers{2}
+```vue{2}
 <template>
   <VueFlow v-model="elements" auto-connect />
 </template>
@@ -761,7 +761,7 @@ const elements = ref([
 
 #### [Connector](/typedocs/types/Connector.html/)
 
-```vue:no-line-numbers{6-18,22}
+```vue{6-18,22}
 <script setup>
 import { ref } from 'vue'
 
diff --git a/docs/src/guide/vue-flow/slots.md b/docs/src/guide/vue-flow/slots.md
index ae700526..cbc8657a 100644
--- a/docs/src/guide/vue-flow/slots.md
+++ b/docs/src/guide/vue-flow/slots.md
@@ -15,7 +15,7 @@ You can use the default slot to add a sidebar or floating toolbar etc. to your g
 The connection line slot allows you to pass down a custom connection line component, which will be used, when a connection
 is triggered.
 
-```vue:no-line-numbers
+```vue
 <template>
   <VueFlow>
     <template #connection-line="connectionLineProps">
@@ -31,7 +31,7 @@ The full description of connection line props can be found [here](/typedocs/inte
 
 The zoom pane slot is placed inside the viewport transformation, so that it scales and moves with the current viewport zoom and position.
 
-```vue:no-line-numbers
+```vue
 <template>
   <VueFlow>
     <template #zoom-pane>
diff --git a/docs/src/guide/vue-flow/state.md b/docs/src/guide/vue-flow/state.md
index b4a0115a..0fc7fed2 100644
--- a/docs/src/guide/vue-flow/state.md
+++ b/docs/src/guide/vue-flow/state.md
@@ -10,7 +10,7 @@ an already existing store from the current context.
 Internal state can be manipulated, for example by adding new elements to the state. The
 state is reactive and changes will be reflected on the graph.
 
-```vue:no-line-numbers{4-6}
+```vue{4-6}
 <script setup>
 import { useVueFlow } from '@braks/vue-flow'
 
@@ -34,7 +34,7 @@ to reading, writing and updating the state.
 
 Consider this example, where we want to create a Sidebar that allows us to select all nodes.
 
-```vue:no-line-numbers
+```vue
 <!-- Container.vue -->
 <template>
   <div>
@@ -54,7 +54,7 @@ the flow of information.
 Instead, we can initialize a Vue Flow store instance __before__ the Sidebar is initialized, thus the instance becomes
 available as an injection in the component tree.
 
-```vue:no-line-numbers{5-6}
+```vue{5-6}
 <script>
 // Container.vue
 import { useVueFlow  } from '@braks/vue-flow'
@@ -66,7 +66,7 @@ useVueFlow()
 
 Now we can easily access our current state instance from our Sidebar without passing them as props.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { useVueFlow } from '@braks/vue-flow'
 
@@ -102,7 +102,7 @@ State updates like removing elements or updating positions are applied by defaul
 If you want to strictly control state changes you can disable this behavior by setting the `applyDefault` option/prop
 to `false`.
 
-```vue:no-line-numbers
+```vue
 <div style="height: 300px">
   <VueFlow v-model="elements" :apply-default="false" />
 </div>
@@ -120,7 +120,7 @@ Though it is necessary to pass a unique id for your Vue Flow state instance, oth
 will create a new state instance
 when mounted.
 
-```vue:no-line-numbers{4,32}
+```vue{4,32}
 <script>
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
 
diff --git a/docs/src/index.md b/docs/src/index.md
index 1531bce5..38171587 100644
--- a/docs/src/index.md
+++ b/docs/src/index.md
@@ -1,8 +1,7 @@
 ---
-home: true
+layout: home
 heroText: null
 tagline: null
-footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
 ---
 
 <Home />
@@ -11,10 +10,12 @@ footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
   <Banner />
 </Suspense>
 
-<client-only>
-  <Features />
+<Features />
 
-  <XyzTransition appear-visible xyz="fade down ease-out-back">
+<XyzTransition appear-visible xyz="fade down ease-out-back">
     <Acknowledgement />
-  </XyzTransition>
-</client-only>
+</XyzTransition>
+
+<XyzTransition appear-visible xyz="fade down ease-out-back">
+    <Team />
+</XyzTransition>
diff --git a/docs/src/.vuepress/public/favicons/android-chrome-192x192.png b/docs/src/public/favicons/android-chrome-192x192.png
similarity index 100%
rename from docs/src/.vuepress/public/favicons/android-chrome-192x192.png
rename to docs/src/public/favicons/android-chrome-192x192.png
diff --git a/docs/src/.vuepress/public/favicons/android-chrome-512x512.png b/docs/src/public/favicons/android-chrome-512x512.png
similarity index 100%
rename from docs/src/.vuepress/public/favicons/android-chrome-512x512.png
rename to docs/src/public/favicons/android-chrome-512x512.png
diff --git a/docs/src/.vuepress/public/favicons/apple-touch-icon.png b/docs/src/public/favicons/apple-touch-icon.png
similarity index 100%
rename from docs/src/.vuepress/public/favicons/apple-touch-icon.png
rename to docs/src/public/favicons/apple-touch-icon.png
diff --git a/docs/src/.vuepress/public/favicons/favicon-16x16.png b/docs/src/public/favicons/favicon-16x16.png
similarity index 100%
rename from docs/src/.vuepress/public/favicons/favicon-16x16.png
rename to docs/src/public/favicons/favicon-16x16.png
diff --git a/docs/src/.vuepress/public/favicons/favicon-32x32.png b/docs/src/public/favicons/favicon-32x32.png
similarity index 100%
rename from docs/src/.vuepress/public/favicons/favicon-32x32.png
rename to docs/src/public/favicons/favicon-32x32.png
diff --git a/docs/src/.vuepress/public/favicons/favicon.ico b/docs/src/public/favicons/favicon.ico
similarity index 100%
rename from docs/src/.vuepress/public/favicons/favicon.ico
rename to docs/src/public/favicons/favicon.ico
diff --git a/docs/src/.vuepress/public/favicons/site.webmanifest b/docs/src/public/favicons/site.webmanifest
similarity index 100%
rename from docs/src/.vuepress/public/favicons/site.webmanifest
rename to docs/src/public/favicons/site.webmanifest
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index e4ce3b63..2a501060 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -17,7 +17,5 @@
     "forceConsistentCasingInFileNames": true,
     "types": ["vite/client", "@types/node", "unplugin-icons/types/vue"]
   },
-  "include": ["components", "src", "src/.vuepress"],
-  "exclude": ["node_modules", "dist"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "exclude": ["node_modules", "dist"]
 }
diff --git a/docs/tsconfig.node.json b/docs/tsconfig.node.json
deleted file mode 100644
index e993792c..00000000
--- a/docs/tsconfig.node.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
-  },
-  "include": ["vite.config.ts"]
-}
diff --git a/docs/typedoc.json b/docs/typedoc.json
index c68f4f70..a377fec6 100644
--- a/docs/typedoc.json
+++ b/docs/typedoc.json
@@ -9,5 +9,6 @@
   "lightHighlightTheme": "vitesse-light",
   "disableSources": true,
   "out": "src/typedocs",
-  "tsconfig": "../packages/vue-flow/tsconfig.docs.json"
+  "tsconfig": "../packages/vue-flow/tsconfig.docs.json",
+  "entryDocument": "index.md"
 }
diff --git a/docs2/.gitignore b/docs2/.gitignore
deleted file mode 100644
index 34a44fc0..00000000
--- a/docs2/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-.data.json
-.temp
diff --git a/docs2/components/Repl.vue b/docs2/components/Repl.vue
deleted file mode 100644
index c7d32ea7..00000000
--- a/docs2/components/Repl.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script lang="ts" setup>
-import { Repl, ReplStore } from '@vue/repl'
-import { useVueFlow } from '@braks/vue-flow'
-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';
-
-html,
-body,
-#app {
-  margin: 0;
-  height: 100%;
-}
-
-#app {
-  text-transform: uppercase;
-  font-family: 'JetBrains Mono', monospace;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-.vue-flow__minimap {
-  transform: scale(75%);
-  transform-origin: bottom right;
-}
-\n`
-
-const store = new ReplStore({
-  showOutput: true,
-  outputMode: 'preview',
-})
-
-const vh = useCssVar('--vh')
-
-watchEffect(
-  () => {
-    vh.value = `${window.innerHeight}px`
-  },
-  { flush: 'post' },
-)
-
-const files: any = {}
-const imports = exampleImports[props.example]
-
-for (const example of Object.keys(imports)) {
-  if (example.includes('css')) {
-    css += `${imports[example as keyof typeof imports]}`
-  } else {
-    files[example] = imports[example as keyof typeof imports]
-  }
-}
-
-onMounted(async () => {
-  await store.setVueVersion('3.2.25')
-
-  await store.setFiles(
-    {
-      ...files,
-      'main.css': css,
-    },
-    props.mainFile ?? 'App.vue',
-  )
-
-  // pre-set import map
-  store.setImportMap({
-    imports: {
-      '@braks/vue-flow': `${location.origin}/vue-flow.es.js`,
-    },
-  })
-})
-
-const sfcOptions = {
-  script: {
-    reactivityTransform: true,
-  },
-}
-</script>
-
-<template>
-  <Repl
-    :clear-console="true"
-    :auto-resize="true"
-    :store="store"
-    :show-compile-output="false"
-    :show-import-map="false"
-    :sfc-options="sfcOptions"
-    @keydown.ctrl.s.prevent
-    @keydown.meta.s.prevent
-  />
-</template>
-
-<style>
-.file-selector {
-  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
-}
-
-.vue-repl {
-  --vh: 100vh;
-
-  @apply rounded-lg border-1 border-solid dark:border-gray-200/10 border-gray-200;
-
-  height: calc(var(--vh) - 72px);
-}
-
-.msg.err {
-  @apply hidden;
-}
-</style>
diff --git a/docs2/components/examples/basic/App.vue b/docs2/components/examples/basic/App.vue
deleted file mode 100644
index 31c05328..00000000
--- a/docs2/components/examples/basic/App.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
-import { ref } from 'vue'
-import { initialElements } from './initial-elements.js'
-
-/**
- * useVueFlow provides all event handlers and store properties
- * You can pass the composable an object that has the same properties as the VueFlow component props
- */
-const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow()
-
-/**
- * Our elements
- */
-const elements = ref(initialElements)
-
-/**
- * This is a Vue Flow event-hook which can be listened to from anywhere you call the composable, instead of only on the main component
- *
- * onPaneReady is called when viewpane & nodes have visible dimensions
- */
-onPaneReady(({ fitView }) => {
-  fitView()
-})
-
-onNodeDragStop((e) => console.log('drag stop', e))
-
-/**
- * onConnect is called when a new connection is created.
- * You can add additional properties to your new edge (like a type or label) or block the creation altogether
- */
-onConnect((params) => addEdges([params]))
-
-const dark = ref(false)
-
-/**
- * To update node properties you can simply use your elements v-model and mutate the elements directly
- * Changes should always be reflected on the graph reactively, without the need to overwrite the elements
- */
-const updatePos = () =>
-  elements.value.forEach((el) => {
-    if (isNode(el)) {
-      el.position = {
-        x: Math.random() * 400,
-        y: Math.random() * 400,
-      }
-    }
-  })
-
-/**
- * toObject transforms your current graph data to an easily persist-able object
- */
-const logToObject = () => console.log(toObject())
-
-/**
- * Resets the current viewpane transformation (zoom & pan)
- */
-const resetTransform = () => setTransform({ x: 0, y: 0, zoom: 1 })
-
-const toggleClass = () => {
-  dark.value = !dark.value
-  elements.value.forEach((el) => (el.class = dark.value ? 'dark' : 'light'))
-}
-</script>
-
-<template>
-  <VueFlow v-model="elements" class="basicflow" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
-    <Background pattern-color="#aaa" gap="8" />
-    <MiniMap />
-    <Controls />
-
-    <div class="controls">
-      <button style="background-color: #113285; color: white" @click="resetTransform">reset transform</button>
-      <button style="background-color: #6f3381; color: white" @click="updatePos">update positions</button>
-      <button
-        :style="{ backgroundColor: dark ? '#FFFFFB' : '#1C1C1C', color: dark ? '#1C1C1C' : '#FFFFFB' }"
-        @click="toggleClass"
-      >
-        toggle {{ dark ? 'light' : 'dark' }}
-      </button>
-      <button @click="logToObject">log toObject</button>
-    </div>
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/basic/index.ts b/docs2/components/examples/basic/index.ts
deleted file mode 100644
index 05bd1883..00000000
--- a/docs2/components/examples/basic/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as BasicApp } from './App.vue?raw'
-export { default as BasicElements } from './initial-elements.js?raw'
-export { default as BasicCSS } from './style.css'
diff --git a/docs2/components/examples/basic/initial-elements.js b/docs2/components/examples/basic/initial-elements.js
deleted file mode 100644
index 68f5e14d..00000000
--- a/docs2/components/examples/basic/initial-elements.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { MarkerType } from '@braks/vue-flow'
-
-/**
- * You can pass elements together as a v-model value
- * or split them up into nodes and edges and pass them to the `nodes` and `edges` props of Vue Flow (or useVueFlow composable)
- */
-export const initialElements = [
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
-  { id: '4', label: 'Node 4', position: { x: 150, y: 200 }, class: 'light' },
-  { id: '5', type: 'output', label: 'Node 5', position: { x: 300, y: 300 }, class: 'light' },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', label: 'edge with arrowhead', source: '1', target: '3', markerEnd: MarkerType.Arrow },
-  {
-    id: 'e4-5',
-    type: 'step',
-    label: 'step-edge',
-    source: '4',
-    target: '5',
-    style: { stroke: 'orange' },
-    labelBgStyle: { fill: 'orange' },
-  },
-  { id: 'e3-4', type: 'smoothstep', label: 'smoothstep-edge', source: '3', target: '4' },
-]
diff --git a/docs2/components/examples/basic/style.css b/docs2/components/examples/basic/style.css
deleted file mode 100644
index 425bc525..00000000
--- a/docs2/components/examples/basic/style.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.basicflow .vue-flow__node.dark {
-  background: #1C1C1C;
-  color: #FFFFFB;
-}
-
-.basicflow .controls {
-  position: absolute;
-  left: 10px;
-  top: 10px;
-  z-index: 4;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-}
-
-.basicflow .controls button {
-  padding: 5px;
-  border-radius: 5px;
-  font-weight: 500;
-  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
-  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-}
-
-.basicflow .controls button:hover {
-  opacity: 0.8;
-  transform: scale(105%);
-  transition: 250ms all ease;
-}
diff --git a/docs2/components/examples/connectionline/App.vue b/docs2/components/examples/connectionline/App.vue
deleted file mode 100644
index 4bda5dff..00000000
--- a/docs2/components/examples/connectionline/App.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup>
-import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
-import { ref } from 'vue'
-import CustomConnectionLine from './CustomConnectionLine.vue'
-
-const elements = ref([
-  {
-    id: '1',
-    type: 'input',
-    label: 'Node 1',
-    position: { x: 250, y: 5 },
-  },
-])
-</script>
-
-<template>
-  <VueFlow v-model="elements">
-    <template #connection-line="props">
-      <CustomConnectionLine v-bind="props" />
-    </template>
-
-    <Background :variant="BackgroundVariant.Lines" />
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/connectionline/CustomConnectionLine.vue b/docs2/components/examples/connectionline/CustomConnectionLine.vue
deleted file mode 100644
index 64759b84..00000000
--- a/docs2/components/examples/connectionline/CustomConnectionLine.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup>
-const props = defineProps({
-  sourceX: {
-    type: Number,
-    required: true,
-  },
-  sourceY: {
-    type: Number,
-    required: true,
-  },
-  targetX: {
-    type: Number,
-    required: true,
-  },
-  targetY: {
-    type: Number,
-    required: true,
-  },
-})
-</script>
-
-<template>
-  <g>
-    <path
-      class="animated"
-      fill="none"
-      stroke="#6F3381"
-      :stroke-width="2.5"
-      :d="`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`"
-    />
-    <circle :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" />
-  </g>
-</template>
diff --git a/docs2/components/examples/connectionline/index.ts b/docs2/components/examples/connectionline/index.ts
deleted file mode 100644
index e93b98df..00000000
--- a/docs2/components/examples/connectionline/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as CustomConnectionLineApp } from './App.vue?raw'
-export { default as CustomConnectionLine } from './CustomConnectionLine.vue?raw'
diff --git a/docs2/components/examples/custom-node/App.vue b/docs2/components/examples/custom-node/App.vue
deleted file mode 100644
index 5008404b..00000000
--- a/docs2/components/examples/custom-node/App.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<script setup>
-import { ConnectionMode, MiniMap, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
-import { computed, h, onMounted, ref } from 'vue'
-import ColorSelectorNode from './CustomNode.vue'
-import { presets } from './presets.js'
-
-const { getNode } = useVueFlow()
-
-const outputColorNode = computed(() => getNode.value('3'))
-
-const elements = ref([])
-
-const gradient = ref(false)
-const bgColor = ref(presets.ayame)
-const bgName = ref('AYAME')
-
-const connectionLineStyle = { stroke: '#fff' }
-
-// minimap stroke color functions
-const nodeStroke = (n) => {
-  if (n.type === 'input') return '#0041d0'
-  if (n.type === 'custom') return presets.sumi
-  if (n.type === 'output') return '#ff0072'
-  return '#eee'
-}
-
-const nodeColor = (n) => {
-  if (n.type === 'custom') return bgColor.value
-  return '#fff'
-}
-
-// output labels
-const outputColorLabel = () => h('div', {}, bgColor.value)
-const outputNameLabel = () => h('div', {}, bgName.value)
-
-const onChange = (color) => {
-  gradient.value = false
-  bgColor.value = color.value
-  bgName.value = color.name
-
-  outputColorNode.value.hidden = false
-}
-
-const onGradient = () => {
-  gradient.value = true
-  bgColor.value = null
-  bgName.value = 'gradient'
-
-  outputColorNode.value.hidden = true
-}
-
-onMounted(() => {
-  elements.value = [
-    {
-      id: '1',
-      type: 'custom',
-      data: { color: bgColor },
-      position: { x: 0, y: 50 },
-    },
-    {
-      id: '2',
-      type: 'output',
-      label: outputNameLabel,
-      position: { x: 350, y: 25 },
-      targetPosition: Position.Left,
-    },
-    {
-      id: '3',
-      type: 'output',
-      label: outputColorLabel,
-      position: { x: 350, y: 200 },
-      targetPosition: Position.Left,
-    },
-    {
-      id: 'e1a-2',
-      source: '1',
-      sourceHandle: 'a',
-      target: '2',
-      animated: true,
-      style: () => ({
-        stroke: bgColor.value,
-        filter: 'invert(100%)',
-      }),
-    },
-    {
-      id: 'e1b-3',
-      source: '1',
-      sourceHandle: 'b',
-      target: '3',
-      animated: true,
-      style: () => ({
-        stroke: bgColor.value,
-        filter: 'invert(100%)',
-      }),
-    },
-  ]
-})
-</script>
-
-<template>
-  <VueFlow
-    v-model="elements"
-    class="customnodeflow"
-    :class="[gradient ? 'animated-bg-gradient' : '']"
-    :style="{ backgroundColor: bgColor }"
-    :connection-mode="ConnectionMode.Loose"
-    :connection-line-style="connectionLineStyle"
-    :default-zoom="1.5"
-    :fit-view-on-init="true"
-  >
-    <template #node-custom="props">
-      <ColorSelectorNode :data="props.data" @change="onChange" @gradient="onGradient" />
-    </template>
-
-    <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/custom-node/CustomNode.vue b/docs2/components/examples/custom-node/CustomNode.vue
deleted file mode 100644
index ecfff975..00000000
--- a/docs2/components/examples/custom-node/CustomNode.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup>
-import { Handle, Position } from '@braks/vue-flow'
-import { computed } from 'vue'
-import { presets } from './presets.js'
-
-const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-})
-
-const emit = defineEmits(['change', 'gradient'])
-
-const onConnect = (params) => console.log('handle onConnect', params)
-
-const onSelect = (color) => {
-  emit('change', color)
-}
-
-const onGradient = () => {
-  emit('gradient')
-}
-
-const colors = computed(() => {
-  return Object.keys(presets).map((color) => {
-    return {
-      name: color,
-      value: presets[color],
-    }
-  })
-})
-
-const selectedColor = computed(() => {
-  return colors.value.find((color) => color.value === props.data.color)
-})
-
-const sourceHandleStyleA = computed(() => ({ backgroundColor: props.data.color, filter: 'invert(100%)', top: '10px' }))
-const sourceHandleStyleB = computed(() => ({
-  backgroundColor: props.data.color,
-  filter: 'invert(100%)',
-  bottom: '10px',
-  top: 'auto',
-}))
-</script>
-
-<template>
-  <div>Select a color</div>
-  <div
-    style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 90%; margin: auto; gap: 3px"
-  >
-    <template v-for="color of colors" :key="color.name">
-      <button :title="color.name" :style="{ backgroundColor: color.value }" type="button" @click="onSelect(color)"></button>
-    </template>
-    <button class="animated-bg-gradient" title="gradient" type="button" @click="onGradient"></button>
-  </div>
-  <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
-  <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
-</template>
diff --git a/docs2/components/examples/custom-node/index.ts b/docs2/components/examples/custom-node/index.ts
deleted file mode 100644
index cebea17a..00000000
--- a/docs2/components/examples/custom-node/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as CustomNodeApp } from './App.vue?raw'
-export { default as CustomNode } from './CustomNode.vue?raw'
-export { default as CustomNodeCSS } from './style.css'
-export { default as ColorPresets } from './presets.js?raw'
diff --git a/docs2/components/examples/custom-node/presets.js b/docs2/components/examples/custom-node/presets.js
deleted file mode 100644
index 8933583c..00000000
--- a/docs2/components/examples/custom-node/presets.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export const presets = {
-  sumi: '#1C1C1C',
-  gofun: '#FFFFFB',
-  byakuroku: '#A8D8B9',
-  mizu: '#81C7D4',
-  asagi: '#33A6B8',
-  ukon: '#EFBB24',
-  mushikuri: '#D9CD90',
-  hiwa: '#BEC23F',
-  ichigo: '#B5495B',
-  kurenai: '#CB1B45',
-  syojyohi: '#E83015',
-  konjyo: '#113285',
-  fuji: '#8B81C3',
-  ayame: '#6F3381',
-  torinoko: '#DAC9A6',
-  kurotsurubami: '#0B1013',
-  ohni: '#F05E1C',
-  kokikuchinashi: '#FB9966',
-  beniukon: '#E98B2A',
-  sakura: '#FEDFE1',
-  toki: '#EEA9A9',
-}
diff --git a/docs2/components/examples/custom-node/style.css b/docs2/components/examples/custom-node/style.css
deleted file mode 100644
index 789d54b2..00000000
--- a/docs2/components/examples/custom-node/style.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.customnodeflow .vue-flow__node-custom {
-  border: 1px solid #777;
-  padding: 10px;
-  border-radius: 10px;
-  background: whitesmoke;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-  max-width: 250px;
-}
-
-.customnodeflow button {
-  padding: 5px;
-  width: 25px;
-  height: 25px;
-  border-radius: 25px;
-  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
-  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-}
-
-.customnodeflow button:hover {
-  opacity: 0.9;
-  transform: scale(105%);
-  transition: 250ms all ease;
-}
-
-.animated-bg-gradient {
-  background: linear-gradient(122deg, #6f3381, #81c7d4, #fedfe1, #fffffb);
-  background-size: 800% 800%;
-
-  -webkit-animation: gradient 4s ease infinite;
-  -moz-animation: gradient 4s ease infinite;
-  animation: gradient 4s ease infinite;
-}
-
-@-webkit-keyframes gradient {
-  0% {
-    background-position: 0% 22%
-  }
-  50% {
-    background-position: 100% 79%
-  }
-  100% {
-    background-position: 0% 22%
-  }
-}
-
-@-moz-keyframes gradient {
-  0% {
-    background-position: 0% 22%
-  }
-  50% {
-    background-position: 100% 79%
-  }
-  100% {
-    background-position: 0% 22%
-  }
-}
-
-@keyframes gradient {
-  0% {
-    background-position: 0% 22%
-  }
-  50% {
-    background-position: 100% 79%
-  }
-  100% {
-    background-position: 0% 22%
-  }
-}
diff --git a/docs2/components/examples/dnd/App.vue b/docs2/components/examples/dnd/App.vue
deleted file mode 100644
index aa93fa9b..00000000
--- a/docs2/components/examples/dnd/App.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
-import Sidebar from './Sidebar.vue'
-
-let id = 0
-const getId = () => `dndnode_${id++}`
-
-const { onConnect, nodes, edges, addEdges, addNodes, viewport, project } = useVueFlow({
-  nodes: [
-    {
-      id: '1',
-      type: 'input',
-      label: 'input node',
-      position: { x: 250, y: 25 },
-    },
-  ],
-})
-const onDragOver = (event) => {
-  event.preventDefault()
-  if (event.dataTransfer) {
-    event.dataTransfer.dropEffect = 'move'
-  }
-}
-
-onConnect((params) => addEdges([params]))
-
-const onDrop = (event) => {
-  const type = event.dataTransfer?.getData('application/vueflow')
-  const position = project({ x: event.clientX - 40, y: event.clientY - 18 })
-  const newNode = {
-    id: getId(),
-    type,
-    position,
-    label: `${type} node`,
-  }
-  addNodes([newNode])
-}
-</script>
-
-<template>
-  <div class="dndflow" @drop="onDrop">
-    <VueFlow @dragover="onDragOver" />
-    <Sidebar />
-  </div>
-</template>
diff --git a/docs2/components/examples/dnd/Sidebar.vue b/docs2/components/examples/dnd/Sidebar.vue
deleted file mode 100644
index 7a42607b..00000000
--- a/docs2/components/examples/dnd/Sidebar.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup>
-const onDragStart = (event, nodeType) => {
-  if (event.dataTransfer) {
-    event.dataTransfer.setData('application/vueflow', nodeType)
-    event.dataTransfer.effectAllowed = 'move'
-  }
-}
-</script>
-
-<template>
-  <aside>
-    <div class="description">You can drag these nodes to the pane.</div>
-    <div class="nodes">
-      <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, 'input')">Input Node</div>
-      <div class="vue-flow__node-default" :draggable="true" @dragstart="onDragStart($event, 'default')">Default Node</div>
-      <div class="vue-flow__node-output" :draggable="true" @dragstart="onDragStart($event, 'output')">Output Node</div>
-    </div>
-  </aside>
-</template>
diff --git a/docs2/components/examples/dnd/index.ts b/docs2/components/examples/dnd/index.ts
deleted file mode 100644
index a8c16c1a..00000000
--- a/docs2/components/examples/dnd/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as DndApp } from './App.vue?raw'
-export { default as DndSidebar } from './Sidebar.vue?raw'
-export { default as DndCSS } from './style.css'
diff --git a/docs2/components/examples/dnd/style.css b/docs2/components/examples/dnd/style.css
deleted file mode 100644
index d6560044..00000000
--- a/docs2/components/examples/dnd/style.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.dndflow {
-  flex-direction: column;
-  display: flex;
-  height: 100%;
-}
-
-.dndflow aside {
-  color: white;
-  font-weight: 700;
-  border-right: 1px solid #eee;
-  padding: 15px 10px;
-  font-size: 12px;
-  background: rgba(16, 185, 129, 0.75);
-  -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-}
-
-.dndflow aside .nodes > * {
-  margin-bottom: 10px;
-  cursor: grab;
-  font-weight: 500;
-  -webkit-box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25);
-  box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25);
-}
-
-.dndflow aside .description {
-  margin-bottom: 10px;
-}
-
-.dndflow .vue-flow-wrapper {
-  flex-grow: 1;
-  height: 100%;
-}
-
-@media screen and (min-width: 640px) {
-  .dndflow {
-    flex-direction: row;
-  }
-
-  .dndflow aside {
-    min-width: 25%;
-  }
-}
-
-@media screen and (max-width: 639px) {
-  .dndflow aside .nodes {
-    display: flex;
-    flex-direction: row;
-    gap: 5px;
-  }
-}
diff --git a/docs2/components/examples/edges/App.vue b/docs2/components/examples/edges/App.vue
deleted file mode 100644
index 9829eeb5..00000000
--- a/docs2/components/examples/edges/App.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup>
-import { Background, Controls, MarkerType, MiniMap, VueFlow } from '@braks/vue-flow'
-import { h, ref } from 'vue'
-import CustomEdge from './CustomEdge.vue'
-import CustomEdge2 from './CustomEdge2.vue'
-import CustomEdgeLabel from './CustomEdgeLabel.vue'
-
-const elements = ref([
-  { id: '1', type: 'input', label: 'Start', position: { x: 50, y: 0 }, style: { borderColor: '#10b981' } },
-  { id: '2', label: 'Node 2', position: { x: 150, y: 100 } },
-  { id: '2a', label: 'Node 2a', position: { x: 0, y: 180 } },
-  { id: '3', label: 'Node 3', position: { x: 250, y: 200 } },
-  { id: '4', label: 'Node 4', position: { x: 400, y: 300 } },
-  { id: '3a', label: 'Node 3a', position: { x: 175, y: 300 } },
-  { id: '5', label: 'Node 5', position: { x: 200, y: 400 } },
-  { id: '6', type: 'output', label: 'Output 6', position: { x: 0, y: 350 } },
-  { id: '7', type: 'output', label: 'Output 7', position: { x: 50, y: 600 } },
-  { id: '8', type: 'output', label: 'Output 8', position: { x: 350, y: 600 } },
-  { id: '9', type: 'output', label: 'Output 9', position: { x: 550, y: 400 } },
-  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
-  { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
-  { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
-  { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
-  { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
-  { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: '#10b981' } },
-  {
-    id: 'e2a-6',
-    source: '2a',
-    target: '6',
-    label: () => h(CustomEdgeLabel, { label: 'custom label text' }),
-    labelStyle: { fill: '#10b981', fontWeight: 700 },
-    markerEnd: MarkerType.Arrow,
-  },
-  {
-    id: 'e5-7',
-    source: '5',
-    target: '7',
-    label: 'label with bg',
-    labelBgPadding: [8, 4],
-    labelBgBorderRadius: 4,
-    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
-    markerEnd: MarkerType.ArrowClosed,
-  },
-  {
-    id: 'e5-8',
-    source: '5',
-    target: '8',
-    type: 'custom',
-    data: { text: 'custom edge' },
-    markerEnd: MarkerType.ArrowClosed,
-  },
-  {
-    id: 'e4-9',
-    source: '4',
-    target: '9',
-    type: 'custom2',
-    data: { text: 'styled custom edge label' },
-  },
-])
-</script>
-
-<template>
-  <VueFlow v-model="elements" :fit-view-on-init="true" :snap-to-grid="true">
-    <template #edge-custom="props">
-      <CustomEdge v-bind="props" />
-    </template>
-    <template #edge-custom2="props">
-      <CustomEdge2 v-bind="props" />
-    </template>
-    <MiniMap />
-    <Controls />
-    <Background />
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/edges/CustomEdge.vue b/docs2/components/examples/edges/CustomEdge.vue
deleted file mode 100644
index 52fe1385..00000000
--- a/docs2/components/examples/edges/CustomEdge.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup>
-import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
-import { computed } from 'vue'
-
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  sourceX: {
-    type: Number,
-    required: true,
-  },
-  sourceY: {
-    type: Number,
-    required: true,
-  },
-  targetX: {
-    type: Number,
-    required: true,
-  },
-  targetY: {
-    type: Number,
-    required: true,
-  },
-  sourcePosition: {
-    type: String,
-    required: true,
-  },
-  targetPosition: {
-    type: String,
-    required: true,
-  },
-  data: {
-    type: Object,
-    required: false,
-  },
-  markerEnd: {
-    type: String,
-    required: false,
-  },
-  style: {
-    type: Object,
-    required: false,
-  },
-})
-
-const { applyEdgeChanges } = useVueFlow()
-
-const foreignObjectSize = 40
-
-const onClick = (evt, id) => {
-  applyEdgeChanges([{ type: 'remove', id }])
-  evt.stopPropagation()
-}
-
-const edgePath = computed(() =>
-  getBezierPath({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-  }),
-)
-
-const center = computed(() =>
-  getEdgeCenter({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    targetX: props.targetX,
-    targetY: props.targetY,
-  }),
-)
-</script>
-
-<script>
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <path :id="id" :style="style" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
-  <foreignObject
-    :width="foreignObjectSize"
-    :height="foreignObjectSize"
-    :x="center[0] - foreignObjectSize / 2"
-    :y="center[1] - foreignObjectSize / 2"
-    class="edgebutton-foreignobject"
-    requiredExtensions="http://www.w3.org/1999/xhtml"
-  >
-    <body style="display: flex; align-items: center; justify-content: center">
-      <div>
-        <button ref="btn" class="edgebutton" @click="(event) => onClick(event, id)">×</button>
-      </div>
-    </body>
-  </foreignObject>
-</template>
diff --git a/docs2/components/examples/edges/CustomEdge2.vue b/docs2/components/examples/edges/CustomEdge2.vue
deleted file mode 100644
index b4fff2ba..00000000
--- a/docs2/components/examples/edges/CustomEdge2.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup>
-import { EdgeText, getBezierPath, getEdgeCenter } from '@braks/vue-flow'
-import { computed } from 'vue'
-
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  sourceX: {
-    type: Number,
-    required: true,
-  },
-  sourceY: {
-    type: Number,
-    required: true,
-  },
-  targetX: {
-    type: Number,
-    required: true,
-  },
-  targetY: {
-    type: Number,
-    required: true,
-  },
-  sourcePosition: {
-    type: String,
-    required: true,
-  },
-  targetPosition: {
-    type: String,
-    required: true,
-  },
-  data: {
-    type: Object,
-    required: false,
-  },
-  markerEnd: {
-    type: String,
-    required: false,
-  },
-  style: {
-    type: Object,
-    required: false,
-  },
-  sourceHandleId: {
-    type: String,
-    required: false,
-  },
-  targetHandleId: {
-    type: String,
-    required: false,
-  },
-})
-
-const edgePath = computed(() =>
-  getBezierPath({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-  }),
-)
-
-const center = computed(() =>
-  getEdgeCenter({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    targetX: props.targetX,
-    targetY: props.targetY,
-  }),
-)
-const onClick = () => console.log(props.data)
-</script>
-
-<script>
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="props.markerEnd" />
-  <EdgeText
-    :x="center[0]"
-    :y="center[1]"
-    :label="props.data?.text"
-    :label-style="{ fill: 'white' }"
-    :label-show-bg="true"
-    :label-bg-style="{ fill: '#10b981' }"
-    :label-bg-padding="[2, 4]"
-    :label-bg-border-radius="2"
-    @click="onClick"
-  />
-</template>
diff --git a/docs2/components/examples/edges/CustomEdgeLabel.vue b/docs2/components/examples/edges/CustomEdgeLabel.vue
deleted file mode 100644
index 19d19e75..00000000
--- a/docs2/components/examples/edges/CustomEdgeLabel.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup>
-const props = defineProps({
-  label: {
-    type: String,
-    required: true,
-  },
-})
-</script>
-
-<template>
-  <tspan dy="10" x="0">{{ props.label }}</tspan>
-</template>
diff --git a/docs2/components/examples/edges/index.ts b/docs2/components/examples/edges/index.ts
deleted file mode 100644
index 5d38a75c..00000000
--- a/docs2/components/examples/edges/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as EdgesApp } from './App.vue?raw'
-export { default as CustomEdge } from './CustomEdge.vue?raw'
-export { default as CustomEdge2 } from './CustomEdge2.vue?raw'
-export { default as CustomEdgeLabel } from './CustomEdgeLabel.vue?raw'
-export { default as EdgeCSS } from './style.css'
diff --git a/docs2/components/examples/edges/style.css b/docs2/components/examples/edges/style.css
deleted file mode 100644
index 34182d43..00000000
--- a/docs2/components/examples/edges/style.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.edgebutton {
-  border-radius: 999px;
-  cursor: pointer;
-}
-
-.edgebutton:hover {
-  transform: scale(110%);
-  transition: all ease 500ms;
-  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5), 0 0 0 4px #10b981;
-}
diff --git a/docs2/components/examples/empty/App.vue b/docs2/components/examples/empty/App.vue
deleted file mode 100644
index bf823312..00000000
--- a/docs2/components/examples/empty/App.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup>
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
-
-const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
-
-onConnect((params) => addEdges([params]))
-onPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
-onNodeDragStop((node) => console.log('drag stop', node))
-
-const addRandomNode = () => {
-  const nodeId = (nodes.value.length + 1).toString()
-  const newNode = {
-    id: nodeId,
-    label: `Node: ${nodeId}`,
-    position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
-  }
-  addNodes([newNode])
-}
-</script>
-
-<template>
-  <VueFlow>
-    <MiniMap />
-    <Controls />
-    <Background :variant="BackgroundVariant.Lines" />
-
-    <button type="button" :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }" @click="addRandomNode">
-      add node
-    </button>
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/empty/index.ts b/docs2/components/examples/empty/index.ts
deleted file mode 100644
index 74eb2379..00000000
--- a/docs2/components/examples/empty/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as EmptyApp } from './App.vue?raw'
diff --git a/docs2/components/examples/hidden/App.vue b/docs2/components/examples/hidden/App.vue
deleted file mode 100644
index 87811329..00000000
--- a/docs2/components/examples/hidden/App.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
-import { ref, watchEffect } from 'vue'
-
-const isHidden = ref(false)
-
-const { nodes, edges } = useVueFlow({
-  nodes: [
-    { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-    { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
-    { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-    { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
-  ],
-  edges: [
-    { id: 'e1-2', source: '1', target: '2' },
-    { id: 'e1-3', source: '1', target: '3' },
-    { id: 'e3-4', source: '3', target: '4' },
-  ],
-})
-
-watchEffect(() => {
-  nodes.value.forEach((n) => (n.hidden = isHidden.value))
-  edges.value.forEach((e) => (e.hidden = isHidden.value))
-})
-</script>
-
-<template>
-  <VueFlow>
-    <MiniMap />
-    <Controls />
-
-    <div :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }">
-      <div>
-        <label for="ishidden">
-          hidden
-          <input id="ishidden" v-model="isHidden" type="checkbox" />
-        </label>
-      </div>
-    </div>
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/hidden/index.ts b/docs2/components/examples/hidden/index.ts
deleted file mode 100644
index b6a6a585..00000000
--- a/docs2/components/examples/hidden/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as HiddenApp } from './App.vue?raw'
diff --git a/docs2/components/examples/horizontal/App.vue b/docs2/components/examples/horizontal/App.vue
deleted file mode 100644
index 8eebf67f..00000000
--- a/docs2/components/examples/horizontal/App.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup>
-import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
-import { ref } from 'vue'
-import { initialElements } from './initial-elements.js'
-
-const { onConnect, addEdges } = useVueFlow()
-
-const elements = ref(initialElements)
-
-onConnect((params) => addEdges([params]))
-</script>
-
-<template>
-  <VueFlow
-    v-model="elements"
-    class="basicflow"
-    :default-edge-options="{ type: 'smoothstep' }"
-    :default-zoom="1.5"
-    :min-zoom="0.2"
-    :max-zoom="4"
-    :fit-view-on-init="true"
-  >
-    <Background pattern-color="#aaa" gap="8" />
-    <MiniMap />
-    <Controls />
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/horizontal/index.ts b/docs2/components/examples/horizontal/index.ts
deleted file mode 100644
index a40f7c4c..00000000
--- a/docs2/components/examples/horizontal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as HorizontalApp } from './App.vue?raw'
-export { default as HorizontalElements } from './initial-elements.js?raw'
diff --git a/docs2/components/examples/horizontal/initial-elements.js b/docs2/components/examples/horizontal/initial-elements.js
deleted file mode 100644
index 174e97b4..00000000
--- a/docs2/components/examples/horizontal/initial-elements.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { MarkerType, Position } from '@braks/vue-flow'
-
-export const initialElements = [
-  {
-    id: '1',
-    type: 'input',
-    label: 'Node 1',
-    position: { x: 0, y: 50 },
-    sourcePosition: Position.Right,
-  },
-  {
-    id: '2',
-    type: 'output',
-    label: 'Node 2',
-    position: { x: 250, y: 0 },
-    targetPosition: Position.Left,
-  },
-  { id: '3', label: 'Node 3', position: { x: 250, y: 100 }, sourcePosition: Position.Right, targetPosition: Position.Left },
-  { id: '4', label: 'Node 4', position: { x: 500, y: 150 }, sourcePosition: Position.Right, targetPosition: Position.Left },
-  {
-    id: '5',
-    type: 'output',
-    label: 'Node 5',
-    position: { x: 750, y: 50 },
-    sourcePosition: Position.Right,
-    targetPosition: Position.Left,
-  },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3', markerEnd: MarkerType.Arrow },
-  {
-    id: 'e4-5',
-    source: '4',
-    target: '5',
-    style: { stroke: 'orange' },
-    labelBgStyle: { fill: 'orange' },
-  },
-  { id: 'e3-4', source: '3', target: '4' },
-]
diff --git a/docs2/components/examples/index.ts b/docs2/components/examples/index.ts
deleted file mode 100644
index 6d92740d..00000000
--- a/docs2/components/examples/index.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { BasicApp, BasicCSS, BasicElements } from './basic'
-import { ColorPresets, CustomNode, CustomNodeApp, CustomNodeCSS } from './custom-node'
-import { CustomConnectionLine, CustomConnectionLineApp } from './connectionline'
-import { CustomEdge, CustomEdge2, CustomEdgeLabel, EdgeCSS, EdgesApp } from './edges'
-import { NestedApp } from './nested'
-import { StressApp, StressCSS, StressUtils } from './stress'
-import { UpdateEdgeApp } from './update-edge'
-import { UpdateNodeApp, UpdateNodeCSS } from './update-node'
-import { ValidationApp, ValidationCSS, ValidationCustomInput, ValidationCustomNode } from './validation'
-import { SaveRestoreApp, SaveRestoreCSS, SaveRestoreControls } from './save-restore'
-import { DndApp, DndCSS, DndSidebar } from './dnd'
-import { EmptyApp } from './empty'
-import { HiddenApp } from './hidden'
-import { InteractionApp, InteractionCSS, InteractionControls } from './interaction'
-import { MultiApp, MultiCSS, MultiFlow } from './multi'
-import { HorizontalApp, HorizontalElements } from './horizontal'
-import { TeleportApp, TeleportCSS, TeleportSidebar, TeleportableNode, TeleportableUseTransition } from './teleport'
-
-export const exampleImports = {
-  basic: {
-    'App.vue': BasicApp,
-    'initial-elements.js': BasicElements,
-    'style.css': BasicCSS,
-  },
-  customNode: {
-    'App.vue': CustomNodeApp,
-    'CustomNode.vue': CustomNode,
-    'style.css': CustomNodeCSS,
-    'presets.js': ColorPresets,
-  },
-  connectionline: {
-    'App.vue': CustomConnectionLineApp,
-    'CustomConnectionLine.vue': CustomConnectionLine,
-  },
-  edges: {
-    'App.vue': EdgesApp,
-    'CustomEdge.vue': CustomEdge,
-    'CustomEdge2.vue': CustomEdge2,
-    'CustomEdgeLabel.vue': CustomEdgeLabel,
-    'style.css': EdgeCSS,
-  },
-  nested: {
-    'App.vue': NestedApp,
-  },
-  stress: {
-    'App.vue': StressApp,
-    'utils.js': StressUtils,
-    'style.css': StressCSS,
-  },
-  updateEdge: {
-    'App.vue': UpdateEdgeApp,
-  },
-  updateNode: {
-    'App.vue': UpdateNodeApp,
-    'style.css': UpdateNodeCSS,
-  },
-  validation: {
-    'App.vue': ValidationApp,
-    'CustomInput.vue': ValidationCustomInput,
-    'CustomNode.vue': ValidationCustomNode,
-    'style.css': ValidationCSS,
-  },
-  saveRestore: {
-    'App.vue': SaveRestoreApp,
-    'Controls.vue': SaveRestoreControls,
-    'style.css': SaveRestoreCSS,
-  },
-  dnd: {
-    'App.vue': DndApp,
-    'Sidebar.vue': DndSidebar,
-    'style.css': DndCSS,
-  },
-  empty: {
-    'App.vue': EmptyApp,
-  },
-  hidden: {
-    'App.vue': HiddenApp,
-  },
-  interaction: {
-    'App.vue': InteractionApp,
-    'InteractionControls.vue': InteractionControls,
-    'style.css': InteractionCSS,
-  },
-  multi: {
-    'App.vue': MultiApp,
-    'Flow.vue': MultiFlow,
-    'style.css': MultiCSS,
-  },
-  horizontal: {
-    'App.vue': HorizontalApp,
-    'initial-elements.js': HorizontalElements,
-  },
-  teleport: {
-    'App.vue': TeleportApp,
-    'Sidebar.vue': TeleportSidebar,
-    'TeleportableNode.vue': TeleportableNode,
-    'useTransition.js': TeleportableUseTransition,
-    'style.css': TeleportCSS,
-  },
-}
diff --git a/docs2/components/examples/interaction/App.vue b/docs2/components/examples/interaction/App.vue
deleted file mode 100644
index c8fca777..00000000
--- a/docs2/components/examples/interaction/App.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup>
-import { VueFlow } from '@braks/vue-flow'
-import { ref } from 'vue'
-import InteractionControls from './InteractionControls.vue'
-
-const elements = ref([
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' },
-])
-</script>
-
-<template>
-  <VueFlow class="interactionflow" v-model="elements" :fit-view-on-init="true">
-    <InteractionControls />
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/interaction/InteractionControls.vue b/docs2/components/examples/interaction/InteractionControls.vue
deleted file mode 100644
index 942f4d00..00000000
--- a/docs2/components/examples/interaction/InteractionControls.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script setup>
-import { useVueFlow } from '@braks/vue-flow'
-import { ref } from 'vue'
-
-const {
-  nodesDraggable,
-  nodesConnectable,
-  elementsSelectable,
-  zoomOnScroll,
-  zoomOnDoubleClick,
-  zoomOnPinch,
-  panOnScroll,
-  panOnScrollMode,
-  panOnDrag,
-  onConnect,
-  onNodeDragStop,
-  onPaneClick,
-  onPaneScroll,
-  onPaneContextMenu,
-  onNodeDragStart,
-  onMoveEnd,
-  addEdges,
-} = useVueFlow()
-
-const captureZoomClick = ref(false)
-const captureZoomScroll = ref(false)
-
-onConnect((params) => addEdges([params]))
-onNodeDragStart((e) => console.log('drag start', e))
-onNodeDragStop((e) => console.log('drag stop', e))
-onPaneClick((event) => captureZoomClick.value && console.log('pane click', event))
-onPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', event))
-onPaneContextMenu((event) => captureZoomClick.value && console.log('pane ctx menu', event))
-onMoveEnd((flowTransform) => console.log('move end', flowTransform))
-</script>
-
-<template>
-  <div class="controls">
-    <div>
-      <label class="label" for="draggable">
-        nodesDraggable
-        <input id="draggable" v-model="nodesDraggable" type="checkbox" class="vue-flow__draggable" />
-      </label>
-    </div>
-    <div>
-      <label class="label" for="connectable">
-        nodesConnectable
-        <input id="connectable" v-model="nodesConnectable" type="checkbox" class="vue-flow__connectable" />
-      </label>
-    </div>
-    <div>
-      <label class="label" for="selectable">
-        elementsSelectable
-        <input id="selectable" v-model="elementsSelectable" type="checkbox" class="vue-flow__selectable" />
-      </label>
-    </div>
-    <div>
-      <label class="label" for="zoomonscroll">
-        zoomOnScroll
-        <input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="vue-flow__zoomonscroll" />
-      </label>
-    </div>
-    <div>
-      <label class="label" for="zoomonpinch">
-        zoomOnPinch
-        <input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="vue-flow__zoomonpinch" />
-      </label>
-    </div>
-    <div>
-      <label class="label" for="panonscroll">
-        panOnScroll
-        <input id="panonscroll" v-model="panOnScroll" type="checkbox" class="vue-flow__panonscroll" />
-      </label>
-    </div>
-    <div>
-      <label class="label">
-        panOnScrollMode
-        <select id="panonscrollmode" v-model="panOnScrollMode" class="vue-flow__panonscrollmode">
-          <option value="free">free</option>
-          <option value="horizontal">horizontal</option>
-          <option value="vertical">vertical</option>
-        </select>
-      </label>
-    </div>
-    <div>
-      <label class="label" for="zoomondbl">
-        zoomOnDoubleClick
-        <input id="zoomondbl" v-model="zoomOnDoubleClick" type="checkbox" class="vue-flow__zoomondbl" />
-      </label>
-    </div>
-    <div>
-      <label class="label" for="panemoveable">
-        paneMovable
-        <input id="panemoveable" v-model="panOnDrag" type="checkbox" class="vue-flow__panemoveable" />
-      </label>
-    </div>
-    <div>
-      <label class="label" for="capturezoompaneclick">
-        capture onPaneClick
-        <input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="vue-flow__capturezoompaneclick" />
-      </label>
-    </div>
-    <div>
-      <label class="label" for="capturezoompanescroll">
-        capture onPaneScroll
-        <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
-      </label>
-    </div>
-  </div>
-</template>
diff --git a/docs2/components/examples/interaction/index.ts b/docs2/components/examples/interaction/index.ts
deleted file mode 100644
index 84792f94..00000000
--- a/docs2/components/examples/interaction/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as InteractionApp } from './App.vue?raw'
-export { default as InteractionControls } from './InteractionControls.vue?raw'
-export { default as InteractionCSS } from './style.css'
diff --git a/docs2/components/examples/interaction/style.css b/docs2/components/examples/interaction/style.css
deleted file mode 100644
index b979c3c7..00000000
--- a/docs2/components/examples/interaction/style.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.interactionflow .controls {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 4;
-  font-size: 11px;
-  background-color: lightgray;
-  border-bottom-right-radius: 10px;
-  padding: 12px;
-}
-
-.interactionflow .controls .label {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 5px;
-  cursor: pointer;
-}
-
-.interactionflow .controls .label input {
-  cursor: pointer;
-}
diff --git a/docs2/components/examples/multi/App.vue b/docs2/components/examples/multi/App.vue
deleted file mode 100644
index 2f9b72a7..00000000
--- a/docs2/components/examples/multi/App.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup>
-import Flow from './Flow.vue'
-</script>
-
-<template>
-  <div class="multiflows">
-    <Flow />
-    <Flow />
-  </div>
-</template>
diff --git a/docs2/components/examples/multi/Flow.vue b/docs2/components/examples/multi/Flow.vue
deleted file mode 100644
index 18058d87..00000000
--- a/docs2/components/examples/multi/Flow.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup>
-import { Background, VueFlow, isNode } from '@braks/vue-flow'
-import { ref } from 'vue'
-
-const elements = ref([
-  { 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' },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
-  { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' },
-])
-
-const toggleClass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
-
-const updatePos = () =>
-  elements.value.forEach((el) => {
-    if (isNode(el)) {
-      el.position = {
-        x: Math.random() * 400,
-        y: Math.random() * 400,
-      }
-    }
-  })
-</script>
-
-<template>
-  <VueFlow v-model="elements" :fit-view-on-init="true">
-    <Background />
-
-    <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
-      <button style="margin-right: 5px" @click="updatePos">update positions</button>
-      <button style="margin-right: 5px" @click="toggleClass">toggle class</button>
-    </div>
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/multi/index.ts b/docs2/components/examples/multi/index.ts
deleted file mode 100644
index d6731a00..00000000
--- a/docs2/components/examples/multi/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as MultiApp } from './App.vue?raw'
-export { default as MultiFlow } from './Flow.vue?raw'
-export { default as MultiCSS } from './style.css'
diff --git a/docs2/components/examples/multi/style.css b/docs2/components/examples/multi/style.css
deleted file mode 100644
index 92c483fd..00000000
--- a/docs2/components/examples/multi/style.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.vue-flow__node.dark {
-  background: #000000;
-  color: #ffffff;
-}
-
-.multiflows {
-  display: flex;
-  height: 100%;
-}
-
-.multiflows .vue-flow {
-  width: 100%;
-  height: 100%;
-}
-
-.multiflows .vue-flow:first-child {
-  border-right: 2px solid #333;
-}
diff --git a/docs2/components/examples/nested/App.vue b/docs2/components/examples/nested/App.vue
deleted file mode 100644
index f328341e..00000000
--- a/docs2/components/examples/nested/App.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
-import { onMounted } from 'vue'
-
-const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
-  fitViewOnInit: true,
-  connectionMode: ConnectionMode.Loose,
-  // set this to true so edges get elevated when selected, defaults to false
-  elevateEdgesOnSelect: true,
-  nodes: [
-    { id: '1', type: 'input', label: 'node', position: { x: 250, y: 0 } },
-    {
-      id: '2',
-      label: 'parent node',
-      position: { x: 100, y: 100 },
-      style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '200px', height: '200px' },
-    },
-    {
-      id: '2a',
-      label: 'child node',
-      position: { x: 10, y: 50 },
-      parentNode: '2',
-    },
-    {
-      id: '4',
-      label: 'parent node',
-      position: { x: 320, y: 175 },
-      style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '400px', height: '300px' },
-    },
-    {
-      id: '4a',
-      label: 'child node',
-      position: { x: 15, y: 65 },
-      extent: 'parent',
-      parentNode: '4',
-    },
-    {
-      id: '4b',
-      label: 'nested parent node',
-      position: { x: 15, y: 120 },
-      style: { backgroundColor: 'rgba(139, 92, 246, 0.5)', height: '150px', width: '270px' },
-      parentNode: '4',
-    },
-    {
-      id: '4b1',
-      label: 'nested child node',
-      position: { x: 20, y: 40 },
-      parentNode: '4b',
-    },
-    {
-      id: '4b2',
-      label: 'nested child node',
-      position: { x: 100, y: 100 },
-      parentNode: '4b',
-    },
-    { id: '4c', label: 'child node', position: { x: 200, y: 65 }, parentNode: '4' },
-  ],
-  edges: [
-    { id: 'e1-2', source: '1', target: '2' },
-    { id: 'e1-4', source: '1', target: '4' },
-    { id: 'e1-4c', source: '1', target: '4c' },
-    { id: 'e2a-4a', source: '2a', target: '4a' },
-    { id: 'e4a-4b1', source: '4a', target: '4b1' },
-    { id: 'e4a-4b2', source: '4a', target: '4b2' },
-    { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
-  ],
-})
-
-onConnect((params) => addEdges([params]))
-
-onMounted(() => {
-  // add nodes to parent
-  addNodes([
-    {
-      id: '999',
-      type: 'input',
-      label: 'Drag me to extend area!',
-      position: { x: 20, y: 100 },
-      class: 'light',
-      expandParent: true,
-      parentNode: '2',
-    },
-  ])
-})
-</script>
-
-<template>
-  <VueFlow>
-    <MiniMap />
-    <Controls />
-    <Background />
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/nested/index.ts b/docs2/components/examples/nested/index.ts
deleted file mode 100644
index 7aef51bc..00000000
--- a/docs2/components/examples/nested/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as NestedApp } from './App.vue?raw'
diff --git a/docs2/components/examples/pinia/PiniaExample.vue b/docs2/components/examples/pinia/PiniaExample.vue
deleted file mode 100644
index bcc3333f..00000000
--- a/docs2/components/examples/pinia/PiniaExample.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup>
-import sdk from '@stackblitz/sdk'
-
-const el = ref()
-
-onMounted(() => {
-  sdk.embedProjectId(el.value, 'vitejs-vite-wyfpsj', {
-    height: 750,
-    forceEmbedLayout: true,
-    openFile: 'src/App.vue',
-  })
-})
-</script>
-
-<template>
-  <div ref="el" class="outline-none"></div>
-</template>
-
-<style>
-.application {
-  @apply h-[75vh];
-}
-</style>
diff --git a/docs2/components/examples/save-restore/App.vue b/docs2/components/examples/save-restore/App.vue
deleted file mode 100644
index 55d9d552..00000000
--- a/docs2/components/examples/save-restore/App.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-import { VueFlow } from '@braks/vue-flow'
-import { ref } from 'vue'
-import Controls from './Controls.vue'
-
-const elements = ref([{ id: '1', label: 'Node 1', position: { x: 100, y: 100 } }])
-</script>
-
-<template>
-  <VueFlow v-model="elements">
-    <Controls />
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/save-restore/Controls.vue b/docs2/components/examples/save-restore/Controls.vue
deleted file mode 100644
index dc6d84b2..00000000
--- a/docs2/components/examples/save-restore/Controls.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup>
-import { useVueFlow } from '@braks/vue-flow'
-
-const flowKey = 'example-flow'
-
-const { nodes, addNodes, setNodes, setEdges, dimensions, setTransform, toObject } = useVueFlow()
-
-const onSave = () => {
-  localStorage.setItem(flowKey, JSON.stringify(toObject()))
-}
-
-const onRestore = () => {
-  const flow = JSON.parse(localStorage.getItem(flowKey))
-
-  if (flow) {
-    const [x = 0, y = 0] = flow.position
-    setNodes(flow.nodes)
-    setEdges(flow.edges)
-    setTransform({ x, y, zoom: flow.zoom || 0 })
-  }
-}
-
-const onAdd = () => {
-  const id = nodes.value.length + 1
-  const newNode = {
-    id: `random_node-${id}`,
-    label: `Node ${id}`,
-    position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
-  }
-  addNodes([newNode])
-}
-</script>
-
-<template>
-  <div class="save__controls">
-    <button style="background-color: #33a6b8" @click="onSave">save</button>
-    <button style="background-color: #113285" @click="onRestore">restore</button>
-    <button style="background-color: #6f3381" @click="onAdd">add node</button>
-  </div>
-</template>
diff --git a/docs2/components/examples/save-restore/index.ts b/docs2/components/examples/save-restore/index.ts
deleted file mode 100644
index d6faf819..00000000
--- a/docs2/components/examples/save-restore/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as SaveRestoreApp } from './App.vue?raw'
-export { default as SaveRestoreControls } from './Controls.vue?raw'
-export { default as SaveRestoreCSS } from './style.css'
diff --git a/docs2/components/examples/save-restore/style.css b/docs2/components/examples/save-restore/style.css
deleted file mode 100644
index ab1c9790..00000000
--- a/docs2/components/examples/save-restore/style.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.save__controls {
-  position: absolute;
-  left: 10px;
-  top: 10px;
-  z-index: 4;
-  font-size: 12px;
-}
-
-.save__controls button {
-  margin-left: 5px;
-  padding: 5px;
-  border-radius: 5px;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: white;
-  -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-  cursor: pointer;
-}
-
-.save__controls button:hover {
-  opacity: 0.8;
-  transform: scale(105%);
-  transition: 250ms all ease-in-out;
-}
diff --git a/docs2/components/examples/stress/App.vue b/docs2/components/examples/stress/App.vue
deleted file mode 100644
index 931fea0d..00000000
--- a/docs2/components/examples/stress/App.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup>
-import { VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
-import { nextTick, ref } from 'vue'
-import { getElements } from './utils.js'
-
-const { nodes, edges } = getElements(15, 15)
-const elements = ref([...nodes, ...edges])
-
-const { onPaneReady, dimensions, onNodeClick, getEdges, fitView } = useVueFlow()
-
-onPaneReady((i) => {
-  i.fitView({
-    padding: 0.2,
-  })
-  console.log(i.getElements.value)
-})
-
-const toggleClass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
-
-const updatePos = () => {
-  elements.value.forEach((el) => {
-    if (isNode(el)) {
-      el.position = {
-        x: Math.random() * 10 * dimensions.value.width,
-        y: Math.random() * 10 * dimensions.value.height,
-      }
-    }
-  })
-  nextTick(() => {
-    fitView({ duration: 1000, padding: 0.5 })
-  })
-}
-</script>
-
-<template>
-  <VueFlow v-model="elements" :min-zoom="0.1">
-    <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
-      <button style="margin-right: 5px" @click="updatePos">update positions</button>
-      <button style="margin-right: 5px" @click="toggleClass">toggle class</button>
-    </div>
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/stress/index.ts b/docs2/components/examples/stress/index.ts
deleted file mode 100644
index 2b70f3e0..00000000
--- a/docs2/components/examples/stress/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as StressApp } from './App.vue?raw'
-export { default as StressUtils } from './utils.js?raw'
-export { default as StressCSS } from './style.css'
diff --git a/docs2/components/examples/stress/style.css b/docs2/components/examples/stress/style.css
deleted file mode 100644
index f835f6ea..00000000
--- a/docs2/components/examples/stress/style.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.vue-flow__node.dark {
-  background: #000000;
-  color: #ffffff;
-}
diff --git a/docs2/components/examples/stress/utils.js b/docs2/components/examples/stress/utils.js
deleted file mode 100644
index 60a7869b..00000000
--- a/docs2/components/examples/stress/utils.js
+++ /dev/null
@@ -1,40 +0,0 @@
-export function getElements(xElements = 10, yElements = 10) {
-  const initialNodes = []
-  const initialEdges = []
-  let nodeId = 1
-  let recentNodeId = null
-
-  for (let y = 0; y < yElements; y++) {
-    for (let x = 0; x < xElements; x++) {
-      const position = { x: x * 75, y: y * 75 }
-      const node = {
-        id: nodeId.toString(),
-        style: { width: `50px`, fontSize: `11px`, zIndex: 1 },
-        label: `Node ${nodeId}`,
-        class: 'light',
-        position,
-      }
-      initialNodes.push(node)
-
-      if (recentNodeId && nodeId <= xElements * yElements) {
-        initialEdges.push({
-          id: `${x}-${y}`,
-          source: recentNodeId.toString(),
-          target: nodeId.toString(),
-          style: (edge) => {
-            if (!edge.sourceNode.selected && !edge.targetNode.selected) return
-            return { stroke: '#10b981', strokeWidth: 3 }
-          },
-        })
-      }
-
-      recentNodeId = nodeId
-      nodeId++
-    }
-  }
-
-  return {
-    nodes: initialNodes,
-    edges: initialEdges,
-  }
-}
diff --git a/docs2/components/examples/teleport/App.vue b/docs2/components/examples/teleport/App.vue
deleted file mode 100644
index 9ef3e18c..00000000
--- a/docs2/components/examples/teleport/App.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup>
-import { VueFlow } from '@braks/vue-flow'
-import { ref } from 'vue'
-import Sidebar from './Sidebar.vue'
-import TeleportableNode from './TeleportableNode.vue'
-
-const elements = ref([
-  {
-    id: '1',
-    label: 'Click to teleport',
-    type: 'teleportable',
-    position: { x: 125, y: 0 },
-    data: {},
-  },
-  {
-    id: '2',
-    label: 'Click to teleport',
-    type: 'teleportable',
-    position: { x: 350, y: 200 },
-    data: {},
-  },
-  {
-    id: '3',
-    label: 'Click to teleport',
-    type: 'teleportable',
-    position: { x: 0, y: 200 },
-    data: {},
-  },
-  {
-    id: 'e1-2',
-    source: '1',
-    target: '2',
-  },
-])
-</script>
-
-<template>
-  <div class="teleportflow">
-    <VueFlow v-model="elements" :fit-view-on-init="true">
-      <template #node-teleportable="props">
-        <TeleportableNode v-bind="props" />
-      </template>
-    </VueFlow>
-    <Sidebar />
-  </div>
-</template>
diff --git a/docs2/components/examples/teleport/Sidebar.vue b/docs2/components/examples/teleport/Sidebar.vue
deleted file mode 100644
index e632a47b..00000000
--- a/docs2/components/examples/teleport/Sidebar.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup>
-//
-</script>
-
-<template>
-  <aside>
-    <div class="description">Teleport destination</div>
-    <div id="port" class="port"></div>
-  </aside>
-</template>
diff --git a/docs2/components/examples/teleport/TeleportableNode.vue b/docs2/components/examples/teleport/TeleportableNode.vue
deleted file mode 100644
index e1c4a8e9..00000000
--- a/docs2/components/examples/teleport/TeleportableNode.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup>
-import { Handle, Position } from '@braks/vue-flow'
-import { useTransition } from './useTransition.js'
-
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-})
-
-const { animation, transition, teleport, onClick } = useTransition(props.id)
-
-const changeAnimation = () => {
-  animation.value = animation.value === 'fade' ? 'shrink' : 'fade'
-}
-</script>
-
-<script>
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <teleport :disabled="!teleport" :to="teleport">
-    <transition :name="animation">
-      <div v-if="!transition" class="teleportable">
-        <Handle type="target" :position="Position.Top" />
-        [Node {{ id }}]
-        <div class="buttons">
-          <div v-if="teleport !== '#port'" class="button" @click.prevent="onClick('#port')">Teleport To Sidebar</div>
-          <div v-if="teleport !== null" class="button" @click.prevent="onClick(null)">Teleport To Main Graph</div>
-          <div class="button" @click.prevent="changeAnimation">Animation: {{ animation }}</div>
-        </div>
-        <Handle type="source" :position="Position.Bottom" />
-      </div>
-    </transition>
-  </teleport>
-</template>
diff --git a/docs2/components/examples/teleport/index.ts b/docs2/components/examples/teleport/index.ts
deleted file mode 100644
index 9a262f7b..00000000
--- a/docs2/components/examples/teleport/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as TeleportApp } from './App.vue?raw'
-export { default as TeleportSidebar } from './Sidebar.vue?raw'
-export { default as TeleportableNode } from './TeleportableNode.vue?raw'
-export { default as TeleportableUseTransition } from './useTransition.js?raw'
-export { default as TeleportCSS } from './style.css'
diff --git a/docs2/components/examples/teleport/style.css b/docs2/components/examples/teleport/style.css
deleted file mode 100644
index 63301cb2..00000000
--- a/docs2/components/examples/teleport/style.css
+++ /dev/null
@@ -1,125 +0,0 @@
-.teleportflow {
-  flex-direction: column;
-  display: flex;
-  height: 100%;
-}
-
-.teleportflow aside {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  color: white;
-  font-weight: 700;
-  border-right: 1px solid #eee;
-  padding: 10px 10px;
-  font-size: 12px;
-  background: rgba(16, 185, 129, 0.75);
-  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
-  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
-}
-
-.teleportflow aside .port > * {
-  position: relative;
-  margin-bottom: 10px;
-  cursor: grab;
-  font-weight: 500;
-  -webkit-box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.25);
-  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.25);
-}
-
-.teleportflow aside .description {
-  margin-bottom: 10px;
-}
-
-.teleportflow .vue-flow-wrapper {
-  flex-grow: 1;
-  height: 100%;
-}
-
-@media screen and (min-width: 640px) {
-  .teleportflow {
-    flex-direction: row;
-  }
-
-  .teleportflow aside {
-    min-width: 25%;
-  }
-}
-
-@media screen and (max-width: 639px) {
-  .teleportflow aside .port {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 5px;
-  }
-}
-
-.teleportable {
-  padding: 10px;
-  background: white;
-  border: 1px solid black;
-  border-radius: 10px;
-  color: black
-}
-
-.buttons {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: 5px;
-  gap: 5px;
-}
-
-.buttons .button {
-  background-color: whitesmoke;
-  cursor: pointer;
-  padding: 5px 10px;
-  border: 1px solid black;
-  border-radius: 10px;
-  color: black;
-  font-weight: 700;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-}
-
-.buttons .button:hover {
-  background: black;
-  color: white;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.shrink-leave-active {
-  animation: shrink 0.5s;
-}
-
-.shrink-enter-active {
-  animation: grow 0.5s;
-}
-
-@keyframes grow {
-  from {
-    transform: scale(0.1);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-@keyframes shrink {
-  from {
-    transform: scale(1);
-  }
-  to {
-    transform: scale(0.1);
-  }
-}
-
diff --git a/docs2/components/examples/teleport/useTransition.js b/docs2/components/examples/teleport/useTransition.js
deleted file mode 100644
index 21eeedb1..00000000
--- a/docs2/components/examples/teleport/useTransition.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import { getConnectedEdges, useVueFlow } from '@braks/vue-flow'
-import { nextTick, ref } from 'vue'
-
-/**
- * Utility composable for specifying animations
- *
- * Animations that resize a node need to call the `updateNodeDimensions` function from store to update node handle positions
- * Otherwise edges do not connect properly
- */
-export const useTransition = (id) => {
-  const animation = ref('fade')
-  const transition = ref(false)
-  const teleport = ref(null)
-
-  const { updateNodeInternals, getNode, edges } = useVueFlow()
-
-  /**
-   * specify a selector to teleport to
-   *
-   * teleported elements still behave like they're at their position before,
-   * i.e. if they emit events, they will still emit them up their regular tree
-   */
-  const fade = (destination, onFinish) => {
-    setTimeout(() => {
-      // teleport to destination or disable teleport
-      teleport.value = destination
-
-      setTimeout(() => {
-        transition.value = false
-
-        // if destination is null, defer hiding edges until node is teleported back
-        if (!destination) {
-          onFinish()
-        }
-      }, 500)
-    }, 500)
-  }
-
-  const shrink = (destination, onFinish) => {
-    setTimeout(() => {
-      // teleport to destination or disable teleport
-      teleport.value = destination
-
-      setTimeout(() => {
-        transition.value = false
-
-        setTimeout(() => {
-          // if destination is null, defer hiding edges until node is teleported back
-          if (!destination) {
-            updateNodeInternals([id])
-
-            nextTick(() => {
-              onFinish()
-            })
-          }
-        }, 500)
-      }, 500)
-    }, 500)
-  }
-
-  /**
-   * specify a selector to teleport to
-   *
-   * teleported elements still behave like they're at their position before,
-   * i.e. if they emit events, they will still emit them up their regular tree
-   */
-  const onClick = (destination) => {
-    const node = getNode.value(id)
-
-    transition.value = true
-
-    // save current teleport destination to data of node
-    node.data.destination = destination
-
-    // hide connected edges when teleporting
-    const connectedEdges = getConnectedEdges([node], edges.value)
-
-    // if destination is not null, hide edges immediately
-    // check if nodes connected to edge are teleported and hide edge if one of them is
-    if (destination) {
-      connectedEdges.forEach(
-        (edge) => (edge.hidden = !!getNode.value(edge.source).data.destination || !!getNode.value(edge.target).data.destination),
-      )
-    }
-
-    const onFinish = () => {
-      connectedEdges.forEach(
-        (edge) => (edge.hidden = !!getNode.value(edge.source).data.destination || !!getNode.value(edge.target).data.destination),
-      )
-    }
-
-    switch (animation.value) {
-      case 'fade':
-        fade(destination, onFinish)
-        break
-      case 'shrink':
-        shrink(destination, onFinish)
-    }
-  }
-
-  return {
-    animation,
-    transition,
-    teleport,
-    onClick,
-  }
-}
diff --git a/docs2/components/examples/update-edge/App.vue b/docs2/components/examples/update-edge/App.vue
deleted file mode 100644
index bb224f7a..00000000
--- a/docs2/components/examples/update-edge/App.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup>
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
-import { ref } from 'vue'
-
-const elements = ref([
-  {
-    id: '1',
-    type: 'input',
-    label: 'Node <strong>A</strong>',
-    position: { x: 250, y: 0 },
-  },
-  {
-    id: '2',
-    label: 'Node <strong>B</strong>',
-    position: { x: 100, y: 100 },
-  },
-  {
-    id: '3',
-    label: 'Node <strong>C</strong>',
-    position: { x: 400, y: 100 },
-    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
-  },
-  { id: 'e1-2', source: '1', target: '2', label: 'Updateable edge', updatable: true },
-])
-
-const onLoad = (flowInstance) => flowInstance.fitView()
-const onEdgeUpdateStart = (edge) => console.log('start update', edge)
-const onEdgeUpdateEnd = (edge) => console.log('end update', edge)
-const onEdgeUpdate = ({ edge, connection }) => {
-  elements.value = updateEdge(edge, connection, elements.value)
-}
-const onConnect = (params) => (elements.value = addEdge(params, elements.value))
-</script>
-
-<template>
-  <VueFlow
-    v-model="elements"
-    :connection-mode="ConnectionMode.Loose"
-    @pane-ready="onLoad"
-    @edge-update="onEdgeUpdate"
-    @connect="onConnect"
-    @edge-update-start="onEdgeUpdateStart"
-    @edge-update-end="onEdgeUpdateEnd"
-  >
-    <Controls />
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/update-edge/index.ts b/docs2/components/examples/update-edge/index.ts
deleted file mode 100644
index ad531558..00000000
--- a/docs2/components/examples/update-edge/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as UpdateEdgeApp } from './App.vue?raw'
diff --git a/docs2/components/examples/update-node/App.vue b/docs2/components/examples/update-node/App.vue
deleted file mode 100644
index 1e9bc50c..00000000
--- a/docs2/components/examples/update-node/App.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
-import { reactive } from 'vue'
-
-const defaultLabel = '-'
-const { onPaneReady, getNode } = useVueFlow({
-  nodes: [
-    { id: '1', label: defaultLabel, position: { x: 100, y: 100 } },
-    { id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
-  ],
-  edges: [{ id: 'e1-2', source: '1', target: '2' }],
-})
-
-const opts = reactive({
-  bg: '#eeeeee',
-  label: 'Node 1',
-  hidden: false,
-})
-
-const updateNode = () => {
-  const node = getNode.value('1')
-  node.label = opts.label.trim() !== '' ? opts.label : defaultLabel
-  node.style = { backgroundColor: opts.bg }
-  node.hidden = opts.hidden
-}
-
-onPaneReady(({ fitView }) => {
-  fitView()
-  updateNode()
-})
-</script>
-
-<template>
-  <VueFlow>
-    <div class="updatenode__controls">
-      <label>label:</label>
-      <input v-model="opts.label" @input="updateNode" />
-
-      <label class="updatenode__bglabel">background:</label>
-      <input v-model="opts.bg" type="color" @input="updateNode" />
-
-      <div class="updatenode__checkboxwrapper">
-        <label>hidden:</label>
-        <input v-model="opts.hidden" type="checkbox" @change="updateNode" />
-      </div>
-    </div>
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/update-node/index.ts b/docs2/components/examples/update-node/index.ts
deleted file mode 100644
index 2d3749b4..00000000
--- a/docs2/components/examples/update-node/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as UpdateNodeApp } from './App.vue?raw'
-export { default as UpdateNodeCSS } from './style.css'
diff --git a/docs2/components/examples/update-node/style.css b/docs2/components/examples/update-node/style.css
deleted file mode 100644
index 26021bf4..00000000
--- a/docs2/components/examples/update-node/style.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.updatenode__controls {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  z-index: 4;
-  font-size: 11px;
-  background-color: lightgray;
-  border-radius: 10px;
-  padding: 8px;
-}
-
-.updatenode__controls label {
-  display: blocK;
-}
-
-.updatenode__controls input {
-  padding: 2px;
-  border-radius: 5px;
-}
-
-.updatenode__bglabel {
-  margin-top: 8px;
-}
-
-.updatenode__checkboxwrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 8px;
-}
diff --git a/docs2/components/examples/validation/App.vue b/docs2/components/examples/validation/App.vue
deleted file mode 100644
index a9576e98..00000000
--- a/docs2/components/examples/validation/App.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup>
-import { VueFlow, addEdge } from '@braks/vue-flow'
-import { ref } from 'vue'
-import CustomInput from './CustomInput.vue'
-import CustomNode from './CustomNode.vue'
-
-const elements = ref([
-  { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
-  {
-    id: 'A',
-    type: 'custom',
-    position: { x: 250, y: 0 },
-    isValidSourcePos: () => false,
-  },
-  { id: 'B', type: 'custom', position: { x: 250, y: 150 }, isValidSourcePos: (connection) => connection.target === 'B' },
-  { id: 'C', type: 'custom', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
-])
-
-const onLoad = (flowInstance) => flowInstance.fitView()
-const onConnectStart = ({ nodeId, handleType }) => console.log('on connect start', { nodeId, handleType })
-const onConnectStop = (event) => console.log('on connect stop', event)
-const onConnectEnd = (event) => console.log('on connect end', event)
-
-const onConnect = (params) => {
-  console.log('on connect', params)
-  addEdge(params, elements.value)
-}
-</script>
-
-<template>
-  <VueFlow
-    class="validationflow"
-    v-model="elements"
-    @connect="onConnect"
-    @pane-ready="onLoad"
-    @connect-start="onConnectStart"
-    @connect-stop="onConnectStop"
-    @connect-end="onConnectEnd"
-  >
-    <template #node-custominput="props">
-      <CustomInput v-bind="props" />
-    </template>
-    <template #node-custom="props">
-      <CustomNode v-bind="props" />
-    </template>
-  </VueFlow>
-</template>
diff --git a/docs2/components/examples/validation/CustomInput.vue b/docs2/components/examples/validation/CustomInput.vue
deleted file mode 100644
index f6501416..00000000
--- a/docs2/components/examples/validation/CustomInput.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-import { Handle, Position } from '@braks/vue-flow'
-
-const props = defineProps({
-  isValidTargetPos: {
-    type: Function,
-    required: false,
-  },
-})
-</script>
-
-<script>
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <div>Only connectable with B</div>
-  <Handle type="source" :position="Position.Right" :is-valid-connection="props.isValidTargetPos" />
-</template>
diff --git a/docs2/components/examples/validation/CustomNode.vue b/docs2/components/examples/validation/CustomNode.vue
deleted file mode 100644
index 9d28c452..00000000
--- a/docs2/components/examples/validation/CustomNode.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup>
-import { Handle, Position } from '@braks/vue-flow'
-
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  isValidSourcePos: {
-    type: Function,
-    required: false,
-  },
-})
-</script>
-
-<script>
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <Handle type="target" :position="Position.Left" :is-valid-connection="props.isValidSourcePos" />
-  <div>{{ props.id }}</div>
-</template>
diff --git a/docs2/components/examples/validation/index.ts b/docs2/components/examples/validation/index.ts
deleted file mode 100644
index d2674919..00000000
--- a/docs2/components/examples/validation/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as ValidationApp } from './App.vue?raw'
-export { default as ValidationCustomInput } from './CustomInput.vue?raw'
-export { default as ValidationCustomNode } from './CustomNode.vue?raw'
-export { default as ValidationCSS } from './style.css'
diff --git a/docs2/components/examples/validation/style.css b/docs2/components/examples/validation/style.css
deleted file mode 100644
index 98f3a03b..00000000
--- a/docs2/components/examples/validation/style.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.validationflow .vue-flow__node {
-  width: 150px;
-  border-radius: 5px;
-  padding: 10px;
-  color: #555;
-  border: 1px solid #ddd;
-  text-align: center;
-  font-size: 12px;
-}
-
-.validationflow .vue-flow__node-customnode {
-  background: #e6e6e9;
-  border: 1px solid #ddd;
-}
-
-.validationflow .vue-flow__node-custominput .vue-flow__handle {
-  background: #e6e6e9;
-}
-
-.validationflow .vue-flow__node-custominput {
-  background: #fff;
-
-}
-
-.validationflow .vue-flow__handle-connecting {
-  background: #ff6060;
-}
-
-.validationflow .vue-flow__handle-valid {
-  background: #55dd99;
-}
diff --git a/docs2/components/home/Acknowledgement.vue b/docs2/components/home/Acknowledgement.vue
deleted file mode 100644
index 3115dd94..00000000
--- a/docs2/components/home/Acknowledgement.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts" setup>
-import Heart from '~icons/mdi/heart'
-</script>
-
-<template>
-  <div id="acknowledgement" class="w-full">
-    <div class="max-w-[1024px] md:max-w-3/4 m-auto py-4 md:(pb-12 pt-6) text-center">
-      <div>
-        <h1 class="md:mb-8 flex justify-center items-center"><Heart class="text-red-500" /> Acknowledgement</h1>
-        <strong>First off</strong>: A big thank you to the developers of
-        <a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a>. Their amazing work made it possible for me
-        to create this port to Vue 3 - without them there is no Vue Flow.
-      </div>
-      <br />
-      <div>
-        Vue Flow is built on top of existing features and code taken from
-        <a href="https://reactflow.dev" target="_blank" class="text-green-500">React Flow</a>. It replicates the basic features
-        found in React Flow (zoom, pan, graph, additional components and more) and brings them to the Vue 3 experience, with all
-        the fun reactivity and features like template slots etc. you know and love from Vue. If you're happy with Vue Flow,
-        <br />
-        <a href="https://github.com/sponsors/wbkd" target="_blank" class="text-lg font-bold text-green-500">
-          please consider supporting Webkid by donating.
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/docs2/components/home/Banner.vue b/docs2/components/home/Banner.vue
deleted file mode 100644
index dd8a87dc..00000000
--- a/docs2/components/home/Banner.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts" setup>
-import { $fetch } from 'ohmyfetch'
-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')
-</script>
-
-<template>
-  <div class="w-full dark:(border-white) border-black border-y-1">
-    <div class="max-w-full md:max-w-11/12 m-auto py-4 md:py-12 <md:(dark:border-t-1 border-white)">
-      <div class="grid md:grid-cols-3 gap-3 text-center <md:divide-y md:divide-x dark:divide-white divide-black">
-        <div class="grid grid-rows-auto gap-2 py-4 md:py-0">
-          <div class="text-gray-400 font-semibold text-lg">Stargazers</div>
-          <div class="font-bold text-3xl flex gap-2 items-center justify-center"><Star /> {{ githubData.stargazers_count }}</div>
-        </div>
-        <div class="grid grid-rows-2 gap-2 py-4 md:py-0">
-          <div class="text-gray-400 font-semibold text-lg">Downloads (last month)</div>
-          <div class="font-bold text-3xl flex gap-2 items-center justify-center"><Download /> {{ npmData.downloads }}</div>
-        </div>
-        <div class="grid grid-rows-2 gap-2 py-4 md:py-0">
-          <div class="text-gray-400 font-semibold text-lg">License</div>
-          <div class="font-bold text-3xl">
-            {{ githubData.license.key.toUpperCase() }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/docs2/components/home/Features.vue b/docs2/components/home/Features.vue
deleted file mode 100644
index 81a2bf7f..00000000
--- a/docs2/components/home/Features.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts" setup>
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import type { VueFlowStore } from '@braks/vue-flow'
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-const el = ref()
-const instances: VueFlowStore[] = []
-
-const onLoad = (instance: VueFlowStore) => {
-  instances.push(instance)
-  instance.fitView()
-}
-
-const fitViews = () => {
-  instances.forEach((i) => i.fitView())
-}
-
-const { stop } = useResizeObserver(
-  el,
-  useDebounceFn(() => fitViews(), 5),
-)
-onBeforeUnmount(stop)
-</script>
-
-<template>
-  <div ref="el" class="w-full">
-    <div
-      class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left"
-    >
-      <XyzTransition appear-visible xyz="fade down ease-out-back">
-        <div class="flex flex-col md:flex-row gap-12 md:gap-24">
-          <Basic @pane="onLoad" />
-        </div>
-      </XyzTransition>
-
-      <XyzTransition appear-visible xyz="fade down ease-out-back">
-        <div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
-          <RGB @pane="onLoad" />
-        </div>
-      </XyzTransition>
-
-      <XyzTransition appear-visible xyz="fade down ease-out-back">
-        <div class="flex flex-col md:flex-row flex-unwrap gap-12 md:gap-24">
-          <Nested @pane="onLoad" />
-        </div>
-      </XyzTransition>
-
-      <XyzTransition appear-visible xyz="fade down ease-out-back">
-        <div class="flex flex-col-reverse md:flex-row flex-unwrap gap-12 md:gap-24">
-          <Additional @pane="onLoad" />
-        </div>
-      </XyzTransition>
-    </div>
-  </div>
-</template>
diff --git a/docs2/components/home/Home.vue b/docs2/components/home/Home.vue
deleted file mode 100644
index 9965ce97..00000000
--- a/docs2/components/home/Home.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts" setup>
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import Blobity from 'blobity'
-import Intro from './flows/Intro.vue'
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-const usesDark = useDark({
-  storageKey: 'vuepress-color-scheme',
-  selector: 'html',
-})
-
-const dark = ref(false)
-
-onMounted(() => {
-  const html = document.getElementsByTagName('html')![0]
-
-  usesDark.value = html.classList.contains('dark')
-
-  const observer = new MutationObserver((mutations) => {
-    for (const m of mutations) {
-      dark.value = html.classList.contains('dark')
-    }
-  })
-
-  observer.observe(html, {
-    attributes: true,
-    attributeOldValue: true,
-    attributeFilter: ['class'],
-  })
-})
-
-onMounted(() => {
-  if (!breakpoints.isSmaller('md')) {
-    const blobity = new Blobity({
-      color: dark.value ? '#ffffff' : '#000000',
-      invert: true,
-      zIndex: 0,
-      magnetic: false,
-      dotColor: '#10b981',
-      radius: 8,
-      focusableElementsOffsetX: 5,
-      focusableElementsOffsetY: 4,
-      mode: 'normal',
-      focusableElements:
-        '[data-blobity], a:not([data-no-blobity]), button:not([data-no-blobity]), [data-blobity-tooltip], .back-to-top, .intro',
-    })
-
-    onBeforeUnmount(() => {
-      blobity.destroy()
-    })
-  }
-})
-</script>
-
-<template>
-  <div class="relative h-[90vh] md:h-[75vh]">
-    <Intro />
-  </div>
-</template>
-
-<style>
-button:focus {
-  outline: none;
-}
-
-h1 {
-  @apply text-xl lg:text-4xl mb-4 font-bold;
-}
-
-h2 {
-  @apply text-lg lg:text-2xl mb-4 font-semibold;
-}
-
-p {
-  @apply text-md lg:text-lg;
-}
-
-p ~ h1,
-p ~ h2 {
-  @apply mt-6;
-}
-</style>
diff --git a/docs2/components/home/edges/Custom.vue b/docs2/components/home/edges/Custom.vue
deleted file mode 100644
index cfd55976..00000000
--- a/docs2/components/home/edges/Custom.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-import type { EdgeProps, MarkerType, Position } from '@braks/vue-flow'
-import { getBezierPath } from '@braks/vue-flow'
-
-interface CustomEdgeProps extends EdgeProps {
-  source: string
-  target: string
-  sourceHandleId?: string
-  targetHandleId?: string
-  id: string
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-  sourcePosition: Position
-  targetPosition: Position
-  markerEnd?: MarkerType
-  data?: {
-    text?: string
-    color?: 'red' | 'green' | 'blue'
-  }
-}
-
-const props = defineProps<CustomEdgeProps>()
-const edgePath = computed(() =>
-  getBezierPath({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-  }),
-)
-</script>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <path
-    :id="props.id"
-    class="vue-flow__edge-path"
-    :style="{ stroke: props.data?.color }"
-    :d="edgePath"
-    :marker-end="props.markerEnd"
-  />
-  <text>
-    <textPath :href="`#${props.id}`" :style="{ fontSize: '1.25rem', fill: 'white' }" startOffset="50%" text-anchor="middle">
-      {{ props.data?.text }}
-    </textPath>
-  </text>
-</template>
diff --git a/docs2/components/home/flows/Additional.vue b/docs2/components/home/flows/Additional.vue
deleted file mode 100644
index 8d7d9b67..00000000
--- a/docs2/components/home/flows/Additional.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<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'
-
-const emit = defineEmits(['pane'])
-
-const elements = ref<Elements>([
-  {
-    id: '1',
-    style: { width: '75px' },
-    type: 'input',
-    sourcePosition: Position.Right,
-    label: 'input',
-    position: { x: 25, y: 120 },
-  },
-  {
-    id: '2',
-    label: 'A',
-    targetPosition: Position.Left,
-    sourcePosition: Position.Right,
-    position: { x: 150, y: 25 },
-    style: { width: '75px' },
-  },
-  {
-    id: '3',
-    label: 'B',
-    targetPosition: Position.Left,
-    sourcePosition: Position.Right,
-    position: { x: 250, y: 25 },
-    style: { width: '75px' },
-  },
-  {
-    id: '4',
-    label: 'C',
-    targetPosition: Position.Left,
-    sourcePosition: Position.Right,
-    position: { x: 350, y: 25 },
-    style: { width: '75px' },
-  },
-  {
-    id: '5',
-    label: 'D',
-    targetPosition: Position.Left,
-    sourcePosition: Position.Right,
-    position: { x: 150, y: 220 },
-    style: { width: '75px' },
-  },
-  {
-    id: '6',
-    label: 'E',
-    targetPosition: Position.Left,
-    sourcePosition: Position.Right,
-    position: { x: 250, y: 220 },
-    style: { width: '75px' },
-  },
-  {
-    id: '7',
-    label: 'F',
-    targetPosition: Position.Left,
-    sourcePosition: Position.Right,
-    position: { x: 350, y: 220 },
-    style: { width: '75px' },
-  },
-  {
-    id: '8',
-    type: 'output',
-    label: 'Output',
-    targetPosition: Position.Left,
-    position: { x: 500, y: 120 },
-    style: { width: '75px' },
-  },
-  { id: 'e1-2', type: 'step', source: '1', target: '2' },
-  { id: 'e2-3', type: 'step', source: '2', target: '3' },
-  { id: 'e3-4', type: 'step', source: '3', target: '4' },
-  { id: 'e4-8', type: 'step', source: '4', target: '8' },
-  { id: 'e1-5', type: 'step', source: '1', target: '5', animated: true },
-  { id: 'e5-6', type: 'step', source: '5', target: '6', animated: true },
-  { id: 'e6-7', type: 'step', source: '6', target: '7', animated: true },
-  { id: 'e6-8', type: 'step', source: '7', target: '8', animated: true },
-])
-
-const { onPaneReady } = useVueFlow({
-  modelValue: elements.value,
-  zoomOnScroll: false,
-  panOnDrag: false,
-})
-
-onPaneReady((i) => emit('pane', i))
-</script>
-
-<template>
-  <div class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden border-2">
-    <VueFlow>
-      <Controls :show-interactive="false" />
-      <MiniMap mask-color="rgba(16, 185, 129, 0.5)" class="transform scale-60 origin-bottom-right opacity-75" />
-      <Background variant="lines" pattern-color="#aaa" :gap="46" />
-    </VueFlow>
-  </div>
-  <div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
-    <div class="flex flex-col gap-2 items-center md:items-start">
-      <h1>Additional Features</h1>
-      <p>
-        On top of all the features Vue Flow comes with several components like a Background, Minimap or Controls.
-
-        <br />
-        Plus it's built for composition, making the access of the internal state easy as can be!
-      </p>
-      <router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
-    </div>
-  </div>
-</template>
diff --git a/docs2/components/home/flows/Basic.vue b/docs2/components/home/flows/Basic.vue
deleted file mode 100644
index 45c0d97e..00000000
--- a/docs2/components/home/flows/Basic.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<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 Cross from '~icons/mdi/window-close'
-
-const emit = defineEmits(['pane'])
-
-const getNodeClass: ClassFunc<GraphNode> = (el) => {
-  const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out']
-  if (el.selected)
-    classes.push(
-      ...['!border-green-500/80', '!shadow-md', '!shadow-green-500/50', '!bg-green-100/80 dark:(!bg-white)', '!text-gray-700'],
-    )
-
-  return classes.join(' ')
-}
-
-const getEdgeClass: ClassFunc<GraphEdge> = (el) => {
-  const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
-  return classes.join(' ')
-}
-
-const getEdgeStyle: StyleFunc<GraphEdge> = (el) => {
-  const sourceNodeSelected = el.sourceNode.selected
-  return {
-    transition: 'stroke ease-in-out 300ms',
-    stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : '',
-  }
-}
-
-const { onPaneReady, onConnect, addEdges, viewport } = useVueFlow({
-  connectionLineType: ConnectionLineType.SmoothStep,
-  connectionLineStyle: {
-    strokeDasharray: 5,
-    animation: 'dashdraw 0.5s linear infinite',
-  },
-  modelValue: [
-    {
-      id: '1',
-      type: 'input',
-      label: 'Start',
-      position: { x: 250, y: 5 },
-      class: getNodeClass,
-    },
-    {
-      id: '2',
-      label: 'Waypoint',
-      position: { x: 100, y: 100 },
-      class: getNodeClass,
-    },
-    { id: '3', label: 'Waypoint', position: { x: 400, y: 100 }, class: getNodeClass },
-    {
-      id: '4',
-      type: 'output',
-      label: 'End',
-      position: { x: 250, y: 225 },
-      class: getNodeClass,
-    },
-    {
-      id: 'e1-2',
-      source: '1',
-      label: 'animated edge',
-      target: '2',
-      animated: true,
-      class: getEdgeClass,
-      style: getEdgeStyle,
-    },
-    {
-      id: 'e1-3',
-      source: '1',
-      target: '3',
-      label: 'default edge',
-      class: getEdgeClass,
-      style: (el: GraphEdge) => {
-        const sourceNodeSelected = el.sourceNode.selected
-        return {
-          transition: 'stroke ease-in-out 300ms',
-          stroke: el.selected || sourceNodeSelected ? 'red' : '',
-        }
-      },
-    },
-    {
-      id: 'e2-4',
-      source: '2',
-      target: '4',
-      type: 'step',
-      animated: true,
-      class: getEdgeClass,
-      style: getEdgeStyle,
-    },
-  ],
-})
-
-onPaneReady((i) => emit('pane', i))
-onConnect((param) => {
-  addEdges([
-    {
-      ...param,
-      type: 'smoothstep',
-      animated: true,
-    },
-  ])
-})
-</script>
-
-<template>
-  <div class="md:max-w-1/3 flex flex-col justify-center">
-    <div class="flex flex-col items-center md:items-start">
-      <h1>Interactive Graphs</h1>
-      <p>
-        Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable
-        elements, customizable nodes and edges and a bunch of event handlers.
-      </p>
-      <router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
-    </div>
-  </div>
-  <div
-    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden"
-  >
-    <VueFlow class="basic">
-      <Controls class="md:(!left-auto !right-[10px])" />
-      <Background :gap="60">
-        <template #pattern>
-          <Cross :style="{ fontSize: `${8 * viewport.zoom || 1}px` }" class="text-[#10b981] opacity-50" />
-        </template>
-      </Background>
-    </VueFlow>
-  </div>
-</template>
-
-<style>
-.basic .vue-flow__node-input.selected .vue-flow__handle {
-  @apply bg-green-500;
-}
-
-.basic .vue-flow__node-default.selected .vue-flow__handle {
-  @apply bg-green-500;
-}
-
-.basic .vue-flow__node-output.selected .vue-flow__handle {
-  @apply bg-green-500;
-}
-</style>
diff --git a/docs2/components/home/flows/Intro.vue b/docs2/components/home/flows/Intro.vue
deleted file mode 100644
index 4ddb904b..00000000
--- a/docs2/components/home/flows/Intro.vue
+++ /dev/null
@@ -1,451 +0,0 @@
-<script lang="ts" setup>
-import { Background, Handle, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import confetti from 'canvas-confetti'
-import colors from 'windicss/colors'
-import { cheer, fireworks } from './confetti'
-import Heart from '~icons/mdi/heart'
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-const dark = ref(false)
-const animatedBackground = ref(false)
-
-onMounted(() => {
-  const html = document.getElementsByTagName('html')![0]
-
-  const observer = new MutationObserver((mutations) => {
-    for (const m of mutations) {
-      dark.value = html.classList.contains('dark')
-    }
-  })
-
-  observer.observe(html, {
-    attributes: true,
-    attributeOldValue: true,
-    attributeFilter: ['class'],
-  })
-})
-
-const initialEdges = [
-  {
-    id: 'eintro-examples',
-    sourceHandle: 'a',
-    source: 'intro',
-    target: 'examples',
-    animated: true,
-    style: { strokeWidth: 4, stroke: '#ef467e' },
-  },
-  {
-    id: 'eintro-documentation',
-    sourceHandle: 'a',
-    source: 'intro',
-    target: 'documentation',
-    animated: true,
-    style: { strokeWidth: 4, stroke: '#f97316' },
-  },
-  {
-    id: 'eintro-acknowledgement',
-    sourceHandle: 'a',
-    source: 'intro',
-    target: 'acknowledgement',
-    animated: true,
-    style: { strokeWidth: 4, stroke: '#0ea5e9' },
-  },
-]
-const { dimensions, onNodeClick, getNodes, fitView, getNode, getEdge, updateEdge, edges, setEdges } = useVueFlow({
-  nodes: [
-    { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
-    { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
-    { id: 'documentation', type: 'box', position: { x: 300, y: 400 } },
-    { id: 'acknowledgement', type: 'box', position: { x: 150, y: 500 } },
-  ],
-  edges: initialEdges,
-  elementsSelectable: true,
-  panOnDrag: false,
-  zoomOnScroll: false,
-  zoomOnDoubleClick: false,
-  zoomOnPinch: false,
-  elevateEdgesOnSelect: true,
-})
-
-const clickInterval = ref()
-const clicks = ref(0)
-const disabled = ref(false)
-
-const confettiColors = Object.values(colors).flatMap((color) => {
-  if (typeof color === 'string') return color
-  else return Object.values(color).flatMap((c) => c)
-})
-
-onNodeClick(async ({ node }) => {
-  if (node.id === 'intro') {
-    if (disabled.value) return
-
-    animatedBackground.value = !animatedBackground.value
-
-    if (clickInterval.value) {
-      clearInterval(clickInterval.value)
-    }
-
-    clickInterval.value = setInterval(() => {
-      clearInterval(clickInterval.value)
-      clicks.value = 0
-    }, 1000)
-
-    clicks.value++
-    if (clicks.value < 10) {
-      confetti({
-        startVelocity: 25,
-        spread: 360,
-        angle: 270,
-        origin: { y: 0.1 },
-        colors: confettiColors,
-      })
-    } else if (clicks.value < 20) {
-      await cheer(['#10b981', dark.value ? '#ffffff' : '#000000'])
-    } else if (clicks.value === 20) {
-      disabled.value = true
-      await fireworks(confettiColors)
-      disabled.value = false
-    } else {
-      clicks.value = 0
-    }
-  }
-})
-
-const el = templateRef<HTMLDivElement>('el', null)
-
-const setNodes = () => {
-  if (breakpoints.isSmaller('md')) {
-    const mainNode = getNode.value('intro')!
-    getNodes.value.forEach((node) => {
-      switch (node.id) {
-        case 'intro':
-          node.position = { x: 0, y: 0 }
-          break
-        case 'examples':
-          node.position = {
-            x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
-            y: mainNode.dimensions.height * 1.5,
-          }
-          break
-        case 'documentation':
-          node.position = {
-            x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
-            y: mainNode.dimensions.height * 2 + 50,
-          }
-          break
-        case 'acknowledgement':
-          node.position = {
-            x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
-            y: mainNode.dimensions.height * 3,
-          }
-          break
-      }
-    })
-
-    setEdges(() => {
-      return [
-        {
-          id: 'eintro-examples',
-          sourceHandle: 'a',
-          source: 'intro',
-          target: 'examples',
-          animated: true,
-          style: { strokeWidth: 4, stroke: '#ef467e' },
-        },
-        {
-          id: 'eexamples-documentation',
-          source: 'examples',
-          target: 'documentation',
-          animated: true,
-          style: { strokeWidth: 4, stroke: '#f97316' },
-        },
-        {
-          id: 'edocumentation-acknowledgement',
-          source: 'documentation',
-          target: 'acknowledgement',
-          animated: true,
-          style: { strokeWidth: 4, stroke: '#0ea5e9' },
-        },
-      ]
-    })
-  } else {
-    getNodes.value.forEach((node) => {
-      const mainNode = getNode.value('intro')!
-      switch (node.id) {
-        case 'intro':
-          node.position = { x: 0, y: 0 }
-          break
-        case 'examples':
-          node.position = { x: -node.dimensions.width / 2, y: mainNode.dimensions.height * 1.5 }
-          break
-        case 'documentation':
-          node.position = {
-            x: mainNode.dimensions.width - node.dimensions.width / 2,
-            y: mainNode.dimensions.height * 1.5,
-          }
-          break
-        case 'acknowledgement':
-          node.position = {
-            x: mainNode.dimensions.width / 2 - node.dimensions.width / 2,
-            y: mainNode.dimensions.height * 2,
-          }
-          break
-      }
-    })
-
-    setEdges(initialEdges)
-  }
-
-  nextTick(() => {
-    fitView()
-  })
-}
-
-const { stop } = useResizeObserver(el, useDebounceFn(setNodes, 5))
-onBeforeUnmount(stop)
-
-const scrollTo = () => {
-  const el = document.getElementById('acknowledgement')
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth' })
-  }
-}
-
-const animationClassNames = ['checker-gb', 'checker-op', 'checker-yg', 'checker-ss']
-
-const shuffle = (a: any[]) => {
-  for (let i = a.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1))
-    ;[a[i], a[j]] = [a[j], a[i]]
-  }
-  return a
-}
-
-const createAnimationDurations = () => {
-  return animationClassNames.map((className) => {
-    const duration = 5 + Math.random() * 5
-
-    return {
-      className,
-      duration,
-    }
-  })
-}
-
-const animations = ref<{ className: string; duration: number }[]>(shuffle(createAnimationDurations()))
-</script>
-
-<template>
-  <VueFlow ref="el">
-    <XyzTransition xyz="fade down ease-out-back duration-10" mode="out-in">
-      <Background v-if="animatedBackground">
-        <template #pattern-container="{ id }">
-          <pattern :id="id" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
-            <rect
-              :class="animations[0].className"
-              :style="{ '--animation-duration': `${animations[0].duration}s` }"
-              x="0"
-              y="0"
-              width="50"
-              height="50"
-            ></rect>
-            <rect
-              :class="animations[1].className"
-              :style="{ '--animation-duration': `${animations[1].duration}s` }"
-              x="0"
-              y="100"
-              width="50"
-              height="50"
-            ></rect>
-            <rect
-              :class="animations[2].className"
-              :style="{ '--animation-duration': `${animations[2].duration}s` }"
-              x="100"
-              y="0"
-              width="50"
-              height="50"
-            ></rect>
-            <rect
-              :class="animations[3].className"
-              :style="{ '--animation-duration': `${animations[3].duration}s` }"
-              x="100"
-              y="100"
-              width="50"
-              height="50"
-            ></rect>
-          </pattern>
-        </template>
-      </Background>
-    </XyzTransition>
-    <XyzTransition xyz="fade down ease-out-back duration-20" mode="out-in">
-      <Background
-        v-if="!animatedBackground"
-        variant="lines"
-        :pattern-color="dark ? '#ffffff' : '#000000'"
-        :size="0.7"
-        :gap="100"
-      />
-    </XyzTransition>
-
-    <template #node-box="props">
-      <template v-if="props.id === 'intro'">
-        <div class="box max-w-[500px]">
-          <div class="intro px-4 py-2 shadow-lg rounded-md border-2 border-solid border-black">
-            <div class="font-mono flex flex-col gap-4 p-4 items-center text-center">
-              <h1 class="text-2xl lg:text-4xl !my-0 !pt-0 font-bold">Vue Flow</h1>
-              <h2 class="text-lg lg:text-xl font-normal !border-0">
-                The customizable Vue 3 component bringing interactivity to flowcharts and graphs.
-              </h2>
-            </div>
-            <Handle id="a" type="source" :position="Position.Bottom" />
-          </div>
-        </div>
-      </template>
-      <template v-else-if="props.id === 'documentation'">
-        <div class="flex">
-          <router-link class="intro-link group bg-[#f15a16]" to="/guide/"> Read The Documentation </router-link>
-        </div>
-        <Handle type="target" :position="Position.Top" />
-        <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
-      </template>
-      <template v-else-if="props.id === 'examples'">
-        <div class="flex">
-          <router-link class="intro-link group bg-[#ef467e]" to="/examples/"> Check The Examples </router-link>
-        </div>
-        <Handle type="target" :position="Position.Top" />
-        <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
-      </template>
-      <template v-else-if="props.id === 'acknowledgement'">
-        <div class="flex" @click="scrollTo">
-          <button class="intro-link group bg-sky-500"><Heart class="text-red-500" /> Acknowledgement</button>
-        </div>
-        <Handle type="target" :position="Position.Top" />
-      </template>
-    </template>
-  </VueFlow>
-</template>
-
-<style>
-.checker-gb {
-  animation: fill-green-blue var(--animation-duration) alternate infinite;
-}
-
-.checker-gb path {
-  animation: fill-green-blue var(--animation-duration) alternate infinite;
-}
-
-.checker-op {
-  animation: fill-orange-purple var(--animation-duration) alternate infinite;
-}
-
-.checker-op path {
-  animation: fill-orange-purple var(--animation-duration) alternate infinite;
-}
-
-.checker-yg {
-  animation: fill-yellow-green var(--animation-duration) alternate infinite;
-}
-
-.checker-yg path {
-  animation: fill-yellow-green var(--animation-duration) alternate infinite;
-}
-
-.checker-ss {
-  animation: fill-sky-red var(--animation-duration) alternate infinite;
-}
-
-.checker-ss path {
-  animation: fill-sky-red var(--animation-duration) alternate infinite;
-}
-
-@keyframes fill-green-blue {
-  0% {
-    @apply fill-transparent;
-  }
-  35% {
-    @apply fill-green-500/50;
-  }
-  65% {
-    @apply fill-transparent;
-  }
-  100% {
-    @apply fill-blue-500/50;
-  }
-}
-
-@keyframes fill-orange-purple {
-  0% {
-    @apply fill-transparent;
-  }
-  35% {
-    @apply fill-orange-500/50;
-  }
-  65% {
-    @apply fill-transparent;
-  }
-  100% {
-    @apply fill-purple-500/50;
-  }
-}
-
-@keyframes fill-yellow-green {
-  0% {
-    @apply fill-transparent;
-  }
-  35% {
-    @apply fill-yellow-500/50;
-  }
-  65% {
-    @apply fill-transparent;
-  }
-  100% {
-    @apply fill-green-500/50;
-  }
-}
-
-@keyframes fill-sky-red {
-  0% {
-    @apply fill-transparent;
-  }
-  35% {
-    @apply fill-sky-500/50;
-  }
-  65% {
-    @apply fill-transparent;
-  }
-  100% {
-    @apply fill-red-500/50;
-  }
-}
-
-.intro {
-  @apply cursor-pointer
-  bg-green-500
-  text-white
-  transform
-  transition-transform
-  duration-300
-  hover:(ring ring-white);
-}
-
-.intro-link {
-  @apply flex
-  gap-3
-  items-center
-  p-4
-  shadow-lg
-  transform
-  transition-transform
-  duration-300
-  hover:(scale-102)
-  transition-colors
-  ease-in-out
-  rounded-lg
-  text-white
-  font-semibold
-  text-lg;
-}
-</style>
diff --git a/docs2/components/home/flows/Nested.vue b/docs2/components/home/flows/Nested.vue
deleted file mode 100644
index 261c7ca0..00000000
--- a/docs2/components/home/flows/Nested.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts" setup>
-import { Background, ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
-import { breakpointsTailwind } from '@vueuse/core'
-
-const emit = defineEmits(['pane'])
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-const nodeClasses = ['!normal-case font-semibold !text-white', '!border-1', 'shadow-md'].join(' ')
-const childClasses = `${nodeClasses} !bg-green-500/70 !border-white`
-
-const { onPaneReady, panOnDrag } = useVueFlow({
-  fitViewOnInit: true,
-  connectionMode: ConnectionMode.Loose,
-  zoomOnScroll: false,
-  preventScrolling: false,
-  translateExtent: [
-    [-500, -100],
-    [600, 500],
-  ],
-  nodes: [
-    { id: '1', type: 'input', label: 'Outer Node', position: { x: 0, y: 0 }, class: childClasses },
-    {
-      id: '2',
-      label: 'Parent Node',
-      position: { x: -125, y: 100 },
-      class: `${nodeClasses} !bg-green-500/30 !border-green-500`,
-      style: { width: '400px', height: '160px' },
-    },
-    {
-      id: '2a',
-      label: 'Child Node',
-      position: { x: 17, y: 30 },
-      parentNode: '2',
-      extent: 'parent',
-      class: childClasses,
-    },
-    { id: '2b', label: 'Child Node', position: { x: 225, y: 30 }, parentNode: '2', extent: 'parent', class: childClasses },
-    { id: '2c', label: 'Child Node', position: { x: 125, y: 100 }, parentNode: '2', extent: 'parent', class: childClasses },
-    { id: '3', type: 'output', label: 'Outer Node', position: { x: 0, y: 300 }, class: childClasses },
-  ],
-  edges: [
-    { id: 'e1-2a', source: '1', target: '2a', type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } },
-    { id: 'e2-3', source: '2', target: '3', type: 'smoothstep', style: { stroke: 'white', strokeWidth: '2' } },
-  ],
-})
-
-watch(
-  [breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']],
-  () => {
-    panOnDrag.value = !breakpoints.isSmaller('md')
-  },
-  { immediate: true },
-)
-
-onPaneReady((i) => emit('pane', i))
-</script>
-
-<template>
-  <div class="md:max-w-1/3 flex flex-col justify-center <md:pt-12">
-    <div class="flex flex-col gap-2 items-center md:items-start">
-      <h1>Complex Flows</h1>
-      <p>
-        You want to visualize more complex ideas?
-        <br />
-        No worries! Vue Flow supports creating nested nodes and nested graphs out-of-the-box.
-      </p>
-      <router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
-    </div>
-  </div>
-  <div
-    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-green-500 overflow-hidden"
-  >
-    <VueFlow class="nested">
-      <Controls class="md:(!left-auto !right-[10px])" />
-      <Background pattern-color="#aaa" class="!bg-gray-800" :gap="18" />
-    </VueFlow>
-  </div>
-</template>
-
-<style>
-.nested .vue-flow__handle {
-  opacity: 0;
-}
-</style>
diff --git a/docs2/components/home/flows/RGB.vue b/docs2/components/home/flows/RGB.vue
deleted file mode 100644
index 7af38546..00000000
--- a/docs2/components/home/flows/RGB.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script lang="ts" setup>
-import type { MiniMapNodeFunc } from '@braks/vue-flow'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
-import { breakpointsTailwind } from '@vueuse/core'
-import CustomEdge from '../edges/Custom.vue'
-import RGBNode from '../nodes/Input.vue'
-import RGBOutputNode from '../nodes/Output.vue'
-
-const emit = defineEmits(['pane'])
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-interface Colors {
-  red: number
-  green: number
-  blue: number
-}
-
-const { onPaneReady, getNode, panOnDrag } = useVueFlow({
-  id: 'rgb-flow',
-  nodes: [
-    { id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 0 } },
-    { id: '2', type: 'rgb', data: { color: 'r' }, position: { x: 50, y: -110 } },
-    { id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 110 } },
-    { id: '4', type: 'rgb-output', label: 'RGB', position: { x: 400, y: -25 } },
-  ],
-  edges: [
-    { id: 'e1-4', type: 'rgb-line', data: { color: 'green' }, source: '1', target: '4', animated: true },
-    { id: 'e2-4', type: 'rgb-line', data: { color: 'red' }, source: '2', target: '4', animated: true },
-    { id: 'e3-4', type: 'rgb-line', data: { color: 'blue' }, source: '3', target: '4', animated: true },
-  ],
-  zoomOnScroll: false,
-  nodeExtent: [
-    [-50, -150],
-    [500, 300],
-  ],
-})
-
-onPaneReady((i) => emit('pane', i))
-
-const el = templateRef<HTMLDivElement>('el', null)
-
-const color = ref<Colors>({
-  red: 222,
-  green: 45,
-  blue: 140,
-})
-
-watch(
-  [breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']],
-  () => {
-    const mobile = breakpoints.isSmaller('md')
-    if (mobile) {
-      getNode.value('4')!.position = { x: 300, y: -25 }
-    }
-    panOnDrag.value = !mobile
-  },
-  { immediate: true },
-)
-
-const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
-
-const nodeColor: MiniMapNodeFunc = (node) => {
-  switch (node.id) {
-    case '1':
-      return 'green'
-    case '2':
-      return 'red'
-    case '3':
-      return 'blue'
-    case '4':
-      return `rgb(${color.value.red}, ${color.value.green}, ${color.value.blue})`
-  }
-  return ''
-}
-</script>
-
-<template>
-  <div
-    ref="el"
-    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden bg-gray-800 border-2"
-    :style="{ borderColor: `rgb(${color.red}, ${color.green}, ${color.blue})` }"
-  >
-    <VueFlow class="relative font-mono">
-      <template #edge-rgb-line="rgbLineProps">
-        <CustomEdge v-bind="{ ...rgbLineProps, data: { text: color[rgbLineProps.data?.color], ...rgbLineProps.data } }" />
-      </template>
-      <template #node-rgb="rgbProps">
-        <RGBNode v-bind="rgbProps" :amount="color" @change="onChange" />
-      </template>
-      <template #node-rgb-output="rgbOutputProps">
-        <RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
-      </template>
-      <Controls class="hidden md:block" />
-      <Background
-        :variant="BackgroundVariant.Lines"
-        :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
-        :gap="48"
-        :size="1"
-      />
-      <MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
-    </VueFlow>
-  </div>
-  <div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
-    <div class="flex flex-col gap-2 items-center md:items-start">
-      <h1>Customizable</h1>
-      <p>
-        You can expand on the existing features by using your own custom nodes and edges and implement any design and
-        functionality you want.
-      </p>
-      <router-link class="docs-button max-w-max" to="/guide/">Documentation</router-link>
-    </div>
-  </div>
-</template>
diff --git a/docs2/components/home/flows/confetti.ts b/docs2/components/home/flows/confetti.ts
deleted file mode 100644
index 469b5ad7..00000000
--- a/docs2/components/home/flows/confetti.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import confetti from 'canvas-confetti'
-
-export const fireworks = (colors?: string[]) => {
-  return new Promise((resolve) => {
-    const duration = 15 * 1000
-    const animationEnd = Date.now() + duration
-    const defaults = { startVelocity: 60, spread: 360, ticks: 20, zIndex: 0 }
-
-    function randomInRange(min: number, max: number) {
-      return Math.random() * (max - min) + min
-    }
-
-    const interval: any = setInterval(function () {
-      const timeLeft = animationEnd - Date.now()
-
-      if (timeLeft <= 0) {
-        clearInterval(interval)
-        return resolve(true)
-      }
-
-      const particleCount = 50 * (timeLeft / duration)
-      // since particles fall down, start a bit higher than random
-      confetti(
-        Object.assign({}, defaults, {
-          particleCount,
-          origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
-          colors,
-        }),
-      )
-      confetti(
-        Object.assign({}, defaults, {
-          particleCount,
-          origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
-          colors,
-        }),
-      )
-    }, 250)
-  })
-}
-
-export const cheer = (colors: string[]) => {
-  return new Promise((resolve) => {
-    const end = Date.now() + 2 * 1000
-
-    function frame() {
-      confetti({
-        particleCount: 2,
-        angle: 60,
-        spread: 75,
-        origin: { x: 0 },
-        colors,
-      })
-      confetti({
-        particleCount: 2,
-        angle: 120,
-        spread: 75,
-        origin: { x: 1 },
-        colors,
-      })
-
-      if (Date.now() < end) {
-        requestAnimationFrame(frame)
-      } else {
-        resolve(true)
-      }
-    }
-    frame()
-  })
-}
diff --git a/docs2/components/home/nodes/Input.vue b/docs2/components/home/nodes/Input.vue
deleted file mode 100644
index 683377d9..00000000
--- a/docs2/components/home/nodes/Input.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts" setup>
-import type { NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
-
-interface RGBNodeProps extends NodeProps {
-  data: {
-    color: 'r' | 'g' | 'b'
-  }
-  amount: {
-    red: number
-    green: number
-    blue: number
-  }
-}
-const props = defineProps<RGBNodeProps>()
-const emit = defineEmits(['change'])
-let color = 'red'
-switch (props.data?.color) {
-  case 'r':
-    color = 'red'
-    break
-  case 'g':
-    color = 'green'
-    break
-  case 'b':
-    color = 'blue'
-    break
-}
-const onChange = (e: any) => emit('change', { color, val: e.target.value })
-</script>
-
-<template>
-  <div class="px-4 py-2 bg-white rounded-md border-2 border-solid border-black text-left transform scale-75 lg:scale-100">
-    <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
-    <input
-      v-model="props.amount[color]"
-      class="slider nodrag"
-      :style="{ '--color': color }"
-      type="range"
-      min="0"
-      max="255"
-      @input="onChange"
-    />
-    <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
-  </div>
-</template>
diff --git a/docs2/components/home/nodes/Output.vue b/docs2/components/home/nodes/Output.vue
deleted file mode 100644
index 50cdce16..00000000
--- a/docs2/components/home/nodes/Output.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import type { NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
-
-interface RBGOutputNodeProps extends NodeProps {
-  rgb: string
-}
-
-const props = defineProps<RBGOutputNodeProps>()
-</script>
-
-<template>
-  <div
-    :style="{ backgroundColor: props.rgb }"
-    class="px-6 py-2 rounded-xl text-white text-center min-w-[220px] border-2 border-white"
-  >
-    <div class="text-xl font-bold">Color Output</div>
-    <div class="font-semibold">{{ props.rgb }}</div>
-    <Handle type="target" :position="Position.Left" />
-  </div>
-</template>
diff --git a/docs2/package.json b/docs2/package.json
deleted file mode 100644
index 19ebb959..00000000
--- a/docs2/package.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "name": "docs2",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "pnpm run typedoc && vitepress dev src",
-    "build": "pnpm run typedoc && vitepress build src",
-    "serve": "vitepress serve src",
-    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore .",
-    "typedoc": "typedoc --options ./typedoc.json",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "dependencies": {
-    "@algolia/client-search": "^4.14.2",
-    "@animxyz/core": "^0.6.6",
-    "@animxyz/vue3": "^0.6.7",
-    "@braks/vue-flow": "workspace:*",
-    "@stackblitz/sdk": "^1.8.0",
-    "@vue/repl": "1.1.2",
-    "blobity": "^0.2.1",
-    "canvas-confetti": "^1.5.1"
-  },
-  "devDependencies": {
-    "@iconify/json": "^2.1.85",
-    "@types/canvas-confetti": "^1.4.3",
-    "@types/node": "^18.6.2",
-    "@windicss/plugin-scrollbar": "^1.2.3",
-    "dotenv": "^16.0.1",
-    "ohmyfetch": "^0.4.18",
-    "typedoc": "^0.22.18",
-    "typedoc-plugin-markdown": "^3.13.4",
-    "unplugin-auto-import": "^0.10.3",
-    "unplugin-icons": "^0.14.8",
-    "unplugin-vue-components": "^0.21.2",
-    "vite-plugin-windicss": "^1.8.7",
-    "vitepress": "^1.0.0-alpha.4",
-    "windicss": "^3.5.6"
-  }
-}
diff --git a/docs2/src/.vitepress/copy-plugin.ts b/docs2/src/.vitepress/copy-plugin.ts
deleted file mode 100644
index 7bcfa0a8..00000000
--- a/docs2/src/.vitepress/copy-plugin.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { existsSync, readFileSync } from 'fs'
-import { resolve } from 'path'
-import type { Plugin } from 'vite'
-
-export function copyVueFlowPlugin(): Plugin {
-  return {
-    name: 'copy-vue-flow',
-    generateBundle() {
-      const filePath = resolve(__dirname, '../../node_modules/@braks/vue-flow/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.`)
-      }
-
-      this.emitFile({
-        type: 'asset',
-        fileName: 'vue-flow.es.js',
-        source: readFileSync(filePath, 'utf-8'),
-      })
-    },
-  }
-}
diff --git a/docs2/src/.vitepress/head.ts b/docs2/src/.vitepress/head.ts
deleted file mode 100644
index 12cb45d4..00000000
--- a/docs2/src/.vitepress/head.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-export const meta = {
-  title: '🌊 Vue Flow - The customizable Vue3 Flowchart Library',
-  description: `Bring interactivity to your flowcharts and graphs with Vue Flow. It's a highly customizable Vue3 Flowchart library that can be used to visualize your ideas with Vue3 Flowchart. Features seamless zoom & pan and a ton of more features!`,
-  keywords: 'vue, flowchart, graph, vue3, vuejs, vite, nuxt3, nuxtjs, quasar',
-  img: 'https://images.prismic.io/bcakmakoglu/8fbdad18-3cd4-46a9-83cf-dbd9fbf60484_vue-flow.png?auto=compress,format',
-  url: 'https://vueflow.dev/',
-}
-
-export default [
-  [
-    'meta',
-    {
-      name: 'description',
-      content: meta.description,
-    },
-  ],
-  ['meta', { hid: 'og:title', name: 'og:title', content: meta.title }],
-  [
-    'meta',
-    {
-      hid: 'og:description',
-      property: 'og:description',
-      content: meta.description,
-    },
-  ],
-  [
-    'meta',
-    {
-      hid: 'og:image',
-      property: 'og:image',
-      content: `http://${meta.img}`,
-    },
-  ],
-  [
-    'meta',
-    {
-      hid: 'og:image:secure_url',
-      property: 'og:image:secure_url',
-      content: `https://${meta.img}`,
-    },
-  ],
-  [
-    'meta',
-    {
-      hid: 'og:image:type',
-      property: 'og:image:type',
-      content: 'image/png',
-    },
-  ],
-  [
-    'meta',
-    {
-      hid: 'og:image:width',
-      property: 'og:image:width',
-      content: '2428',
-    },
-  ],
-  [
-    'meta',
-    {
-      hid: 'og:image:height',
-      property: 'og:image:height',
-      content: '1280',
-    },
-  ],
-  ['meta', { hid: 'og:url', property: 'og:url', content: meta.url }],
-  [
-    'meta',
-    {
-      hid: 'twitter:card',
-      name: 'twitter:card',
-      content: 'summary_large_image',
-    },
-  ],
-  [
-    'meta',
-    {
-      hid: 'twitter:url',
-      name: 'twitter:url',
-      content: meta.url,
-    },
-  ],
-  [
-    'meta',
-    {
-      hid: 'twitter:title',
-      name: 'twitter:title',
-      content: meta.title,
-    },
-  ],
-  [
-    'meta',
-    {
-      hid: 'twitter:description',
-      name: 'twitter:description',
-      content: meta.description,
-    },
-  ],
-  [
-    'meta',
-    {
-      hid: 'twitter:image',
-      name: 'twitter:image',
-      content: meta.img,
-    },
-  ],
-  [
-    'link',
-    {
-      hid: 'canonical',
-      rel: 'canonical',
-      href: meta.url,
-    },
-  ],
-  [
-    'link',
-    {
-      hid: 'image_src',
-      rel: 'image_src',
-      href: meta.img,
-    },
-  ],
-  ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/favicons/apple-touch-icon.png' }],
-  ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicons/favicon-32x32.png' }],
-  ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicons/favicon-16x16.png' }],
-  ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicons/android-chrome-192x192.png' }],
-  ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicons/android-chrome-512x512.png' }],
-  ['link', { rel: 'manifest', href: '/favicons/site.webmanifest' }],
-  ['link', { rel: 'shortcut icon', href: '/favicons/favicon.ico' }],
-  ['meta', { name: 'msapplication-TileColor', content: '#10b981' }],
-  ['meta', { name: 'theme-color', content: '#10b981' }],
-]
diff --git a/docs2/src/auto-imports.d.ts b/docs2/src/auto-imports.d.ts
deleted file mode 100644
index 7821e0e8..00000000
--- a/docs2/src/auto-imports.d.ts
+++ /dev/null
@@ -1,248 +0,0 @@
-// Generated by 'unplugin-auto-import'
-export {}
-declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
-  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
-  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
-  const computed: typeof import('vue')['computed']
-  const computedAsync: typeof import('@vueuse/core')['computedAsync']
-  const computedEager: typeof import('@vueuse/core')['computedEager']
-  const computedInject: typeof import('@vueuse/core')['computedInject']
-  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
-  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
-  const controlledRef: typeof import('@vueuse/core')['controlledRef']
-  const createApp: typeof import('vue')['createApp']
-  const createEventHook: typeof import('@vueuse/core')['createEventHook']
-  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
-  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
-  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
-  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
-  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
-  const customRef: typeof import('vue')['customRef']
-  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
-  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
-  const effectScope: typeof import('vue')['effectScope']
-  const extendRef: typeof import('@vueuse/core')['extendRef']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
-  const inject: typeof import('vue')['inject']
-  const isDefined: typeof import('@vueuse/core')['isDefined']
-  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const logicAnd: typeof import('@vueuse/core')['logicAnd']
-  const logicNot: typeof import('@vueuse/core')['logicNot']
-  const logicOr: typeof import('@vueuse/core')['logicOr']
-  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
-  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
-  const onLongPress: typeof import('@vueuse/core')['onLongPress']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
-  const provide: typeof import('vue')['provide']
-  const reactify: typeof import('@vueuse/core')['reactify']
-  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
-  const reactive: typeof import('vue')['reactive']
-  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
-  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
-  const reactivePick: typeof import('@vueuse/core')['reactivePick']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
-  const refDebounced: typeof import('@vueuse/core')['refDebounced']
-  const refDefault: typeof import('@vueuse/core')['refDefault']
-  const refThrottled: typeof import('@vueuse/core')['refThrottled']
-  const refWithControl: typeof import('@vueuse/core')['refWithControl']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const resolveRef: typeof import('@vueuse/core')['resolveRef']
-  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const syncRef: typeof import('@vueuse/core')['syncRef']
-  const syncRefs: typeof import('@vueuse/core')['syncRefs']
-  const templateRef: typeof import('@vueuse/core')['templateRef']
-  const throttledRef: typeof import('@vueuse/core')['throttledRef']
-  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
-  const toRaw: typeof import('vue')['toRaw']
-  const toReactive: typeof import('@vueuse/core')['toReactive']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
-  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
-  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
-  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
-  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
-  const unref: typeof import('vue')['unref']
-  const unrefElement: typeof import('@vueuse/core')['unrefElement']
-  const until: typeof import('@vueuse/core')['until']
-  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
-  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
-  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useBase64: typeof import('@vueuse/core')['useBase64']
-  const useBattery: typeof import('@vueuse/core')['useBattery']
-  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
-  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
-  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
-  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
-  const useCached: typeof import('@vueuse/core')['useCached']
-  const useClamp: typeof import('@vueuse/core')['useClamp']
-  const useClipboard: typeof import('@vueuse/core')['useClipboard']
-  const useColorMode: typeof import('@vueuse/core')['useColorMode']
-  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
-  const useCounter: typeof import('@vueuse/core')['useCounter']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVar: typeof import('@vueuse/core')['useCssVar']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
-  const useCycleList: typeof import('@vueuse/core')['useCycleList']
-  const useDark: typeof import('@vueuse/core')['useDark']
-  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
-  const useDebounce: typeof import('@vueuse/core')['useDebounce']
-  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
-  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
-  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
-  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
-  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
-  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
-  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
-  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
-  const useDraggable: typeof import('@vueuse/core')['useDraggable']
-  const useDropZone: typeof import('@vueuse/core')['useDropZone']
-  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
-  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
-  const useElementHover: typeof import('@vueuse/core')['useElementHover']
-  const useElementSize: typeof import('@vueuse/core')['useElementSize']
-  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
-  const useEventBus: typeof import('@vueuse/core')['useEventBus']
-  const useEventListener: typeof import('@vueuse/core')['useEventListener']
-  const useEventSource: typeof import('@vueuse/core')['useEventSource']
-  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
-  const useFavicon: typeof import('@vueuse/core')['useFavicon']
-  const useFetch: typeof import('@vueuse/core')['useFetch']
-  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
-  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
-  const useFocus: typeof import('@vueuse/core')['useFocus']
-  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
-  const useFps: typeof import('@vueuse/core')['useFps']
-  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
-  const useGamepad: typeof import('@vueuse/core')['useGamepad']
-  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
-  const useIdle: typeof import('@vueuse/core')['useIdle']
-  const useImage: typeof import('@vueuse/core')['useImage']
-  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
-  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
-  const useInterval: typeof import('@vueuse/core')['useInterval']
-  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
-  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
-  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
-  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
-  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
-  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
-  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
-  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
-  const useMemoize: typeof import('@vueuse/core')['useMemoize']
-  const useMemory: typeof import('@vueuse/core')['useMemory']
-  const useMounted: typeof import('@vueuse/core')['useMounted']
-  const useMouse: typeof import('@vueuse/core')['useMouse']
-  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
-  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
-  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
-  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
-  const useNetwork: typeof import('@vueuse/core')['useNetwork']
-  const useNow: typeof import('@vueuse/core')['useNow']
-  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
-  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
-  const useOnline: typeof import('@vueuse/core')['useOnline']
-  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
-  const useParallax: typeof import('@vueuse/core')['useParallax']
-  const usePermission: typeof import('@vueuse/core')['usePermission']
-  const usePointer: typeof import('@vueuse/core')['usePointer']
-  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
-  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
-  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
-  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
-  const useRafFn: typeof import('@vueuse/core')['useRafFn']
-  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
-  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
-  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
-  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
-  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
-  const useScroll: typeof import('@vueuse/core')['useScroll']
-  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
-  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
-  const useShare: typeof import('@vueuse/core')['useShare']
-  const useSlots: typeof import('vue')['useSlots']
-  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
-  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
-  const useStepper: typeof import('@vueuse/core')['useStepper']
-  const useStorage: typeof import('@vueuse/core')['useStorage']
-  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
-  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
-  const useSwipe: typeof import('@vueuse/core')['useSwipe']
-  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
-  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
-  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
-  const useThrottle: typeof import('@vueuse/core')['useThrottle']
-  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
-  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
-  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
-  const useTimeout: typeof import('@vueuse/core')['useTimeout']
-  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
-  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
-  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
-  const useTitle: typeof import('@vueuse/core')['useTitle']
-  const useToggle: typeof import('@vueuse/core')['useToggle']
-  const useTransition: typeof import('@vueuse/core')['useTransition']
-  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
-  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
-  const useVModel: typeof import('@vueuse/core')['useVModel']
-  const useVModels: typeof import('@vueuse/core')['useVModels']
-  const useVibrate: typeof import('@vueuse/core')['useVibrate']
-  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
-  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
-  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
-  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
-  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
-  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
-  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
-  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
-  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
-  const watch: typeof import('vue')['watch']
-  const watchArray: typeof import('@vueuse/core')['watchArray']
-  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
-  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
-  const watchOnce: typeof import('@vueuse/core')['watchOnce']
-  const watchPausable: typeof import('@vueuse/core')['watchPausable']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
-  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
-  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
-  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
-  const whenever: typeof import('@vueuse/core')['whenever']
-}
diff --git a/docs2/src/examples/dnd.md b/docs2/src/examples/dnd.md
deleted file mode 100644
index 9c2a8722..00000000
--- a/docs2/src/examples/dnd.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-layout: page
-
----
-
-# Drag & Drop
-
-Adding nodes to an already existing graph can be done multiple ways. To create an interactive editor, you would probably
-like them to be inserted with drag and drop.
-
-In this example we demonstrate how to build a basic Sidebar and implement drag and drop handlers to create new nodes.
-
-## State access
-
-This example shows another key feature of Vue Flow. You can initialize the Flow state at any point before the `VueFlow` component
-is actually mounted. This can be achieved by using the [`useVueFlow`](/guide/composables.html#usevueflow) composable.
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="dnd"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/edges/connection-line.md b/docs2/src/examples/edges/connection-line.md
deleted file mode 100644
index bf80d509..00000000
--- a/docs2/src/examples/edges/connection-line.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-layout: page
-
----
-
-# Custom Connection Line
-
-If the default connection lines aren't to your liking, or you want to expand on the existing 
-functionality you can use your own custom connection line.
-
-Simply pass a component in the designated template slot, and you're good to go.
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="connectionline"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/edges/index.md b/docs2/src/examples/edges/index.md
deleted file mode 100644
index 0fe0772a..00000000
--- a/docs2/src/examples/edges/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-layout: page
-
----
-
-# Edges
-
-Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and straight-edges.
-In addition to the built-in edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types).
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="edges"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/edges/updatable-edge.md b/docs2/src/examples/edges/updatable-edge.md
deleted file mode 100644
index 762a6b91..00000000
--- a/docs2/src/examples/edges/updatable-edge.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-layout: page
-
----
-
-# Updatable Edge
-
-Existing edges can be updated, meaning their source / target position can be changed interactively.
-
-Update an edge by simply dragging it from one node to another at the edge-anchor (handles).
-
-You can enable updating edges either globally by passing the `edgesUpdatable` prop or you can enable it
-for specific edges by using the `updatable` attribute.
-
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="updateEdge"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/edges/validation.md b/docs2/src/examples/edges/validation.md
deleted file mode 100644
index d458e020..00000000
--- a/docs2/src/examples/edges/validation.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-layout: page
-
----
-
-# Connection Validation
-
-Connections can be validated before edges are created and nodes get connected. 
-
-## Using a handle in a custom node
-```vue
-<div>
-  [ ... ]
-
-  <Handle type="source" :is-valid-connection="isValidConnection" />
-</div>
-```
-
-## Passing as node option
-```ts
-const nodes = [
-  {
-    id: '1',
-    label: 'Node 1',
-    position: { x: 0, y: 0 },
-    isValidSourcePos: (connection) => {
-      return connection.target === '2'
-    },
-  },
-]
-```
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="validation"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/empty.md b/docs2/src/examples/empty.md
deleted file mode 100644
index f87c48be..00000000
--- a/docs2/src/examples/empty.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-layout: page
-
----
-
-# Empty
-
-Similar to the drag and drop example, we can also add nodes to an empty graph on a button click, 
-which triggers a push into our elements / nodes array.
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="empty"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/floating-edges.md b/docs2/src/examples/floating-edges.md
deleted file mode 100644
index 0f729272..00000000
--- a/docs2/src/examples/floating-edges.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-layout: page
-
----
-
-This example demonstrates "floating edges".
-
-The positions of the source and target nodes are calculated dynamically,
-the caveat here is, that edge-anchors are still tied to Handles (even though invisible in this example),
-so connections would, by default, only be triggered when hovering over the handles (bottom / top by default).
-
-<div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-floating-edges-zfxdok?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Floating Edges"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-floating-edges-zfxdok?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Floating Edges"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-</div>
diff --git a/docs2/src/examples/hidden.md b/docs2/src/examples/hidden.md
deleted file mode 100644
index 95ff0105..00000000
--- a/docs2/src/examples/hidden.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-layout: page
-
----
-
-# Hidden
-
-You can toggle the visibility of nodes by simply setting their `hidden` attribute to either `true` or `false`.
-
-Edges that are connected to a hidden node will also be hidden.
-
-If you set the `onlyRenderVisibleElements` prop to `true`, only elements that are visible inside the current viewpane will be rendered. 
-This behavior is disabled by default, meaning all elements are rendered whether they are inside the view or not.
-
-This can save you some time on initial renders but consider that moving the pane can cause multiple renders of nodes into the dom,
-which can cause performance spikes depending on the complexity of the components that have to be mounted.
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="hidden"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/horizontal.md b/docs2/src/examples/horizontal.md
deleted file mode 100644
index dedb5106..00000000
--- a/docs2/src/examples/horizontal.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-layout: page
-
----
-
-# Horizontal Layout
-
-Vue Flow doesn't require you to use vertical layouts.
-You can use horizontal layouts with the default node types as well.
-
-You can define where source or target handle positions are with the `sourcePosition` or `targetPosition` properties of nodes.
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="horizontal"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/index.md b/docs2/src/examples/index.md
deleted file mode 100644
index ee2cd9ae..00000000
--- a/docs2/src/examples/index.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-layout: page
-
----
-
-# Basic
-
-This is a basic example to help you familiarize with the basic features of Vue Flow. 
-
-On the bottom left you see the viewport-controls and on the bottom right the minimap.
-You can also see the built-in node (default, input, output) and edge (bezier, straight, step, smoothstep) types.
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="basic"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/interaction.md b/docs2/src/examples/interaction.md
deleted file mode 100644
index 8a5132a5..00000000
--- a/docs2/src/examples/interaction.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-layout: page
-
----
-# Interaction
-
-Vue Flow provides options to interact and limit interaction with the viewport and graph.
-This includes enabling/disabling zoom-scroll, pan-scroll, dragging etc.
-
-In the sandbox below you can find an example showing you how to toggle interaction options.
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="interaction"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/multi.md b/docs2/src/examples/multi.md
deleted file mode 100644
index 0cb69d8a..00000000
--- a/docs2/src/examples/multi.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-layout: page
-
----
-
-# Multi Flows
-
-Vue Flow is not limited to a single instance on a page. 
-
-You can use as many component instances as you like.
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="multi"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/nodes/index.md b/docs2/src/examples/nodes/index.md
deleted file mode 100644
index 14d7f02c..00000000
--- a/docs2/src/examples/nodes/index.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-layout: page
-
----
-
-# Custom Node
-
-One of the key features of Vue Flow is implementing custom elements (nodes / edges) that allow you to expand on the basic functionalities (dragging, selecting etc).
-
-You can display any content and functionality inside a custom node. More documentation about how to set
-up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes).
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="customNode"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/nodes/nesting.md b/docs2/src/examples/nodes/nesting.md
deleted file mode 100644
index 1b757736..00000000
--- a/docs2/src/examples/nodes/nesting.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-layout: page
-
----
-
-# Nested Nodes
-
-Another key feature is nested nodes (or even nested flows).
-
-You can define parents of a node, which are then nested inside that node. 
-You can also define the boundaries of a node, i.e. if the node can be dragged outside it's parent or if it's contained to the parent 
-or even let Vue Flow extend the area of a node to fit all it's children.
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="nested"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/nodes/update-node.md b/docs2/src/examples/nodes/update-node.md
deleted file mode 100644
index f6484362..00000000
--- a/docs2/src/examples/nodes/update-node.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-layout: page
-
----
-
-# Update Node
-
-Updating internal node data is simple.
-After initializing your elements and parsing them into either `GraphNode` or `GraphEdge`
-Vue Flow will emit the changes back into your initial `ref`.
-
-That means you can manipulate any property of your original nodes, and it will trigger changes in the graph.
-
-You can of course also access the nodes directly from the state and change their properties from there.
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="updateNode"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/pinia.md b/docs2/src/examples/pinia.md
deleted file mode 100644
index 6c5d92c3..00000000
--- a/docs2/src/examples/pinia.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-layout: page
-
----
-
-# Pinia
-
-Using your existing storage implementation is not an issue. 
-You can store your elements in whatever store you're already using, mutate them there and pass the result to Vue Flow.
-
-In this example we use [pinia](https://pinia.vuejs.org/) to store our elements, update their positions and toggle classes.
-
-<div class="mt-6">
-  <PiniaExample />
-</div>
diff --git a/docs2/src/examples/save.md b/docs2/src/examples/save.md
deleted file mode 100644
index 1cdc18f2..00000000
--- a/docs2/src/examples/save.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-layout: page
-
----
-
-# Save & Restore
-
-There is no built-in persistent storage feature, however you can use your own storage implementation.
-
-::: tip State Management Libraries
-  Check the [pinia](/examples/pinia.html) example to see how to use Vue Flow with a state management library.
-:::
-
-This example demonstrates save & restore functionality using the [`LocalStorage`](https://developer.mozilla.org/de/docs/Web/API/Window/localStorage) of the browser.
-
-You can extend on this basic idea however you like, i.e. fetch data that you transform into elements which are then passed to Vue Flow or 
-some other business logic you would like to handle.
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="saveRestore"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/stress.md b/docs2/src/examples/stress.md
deleted file mode 100644
index 4488da44..00000000
--- a/docs2/src/examples/stress.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-layout: page
-
----
-
-# Stress
-
-Vue Flow is built to be fast but there are limits.
-
-Try out how many nodes you can get to render before your browser crashes.
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="stress"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/examples/teleport.md b/docs2/src/examples/teleport.md
deleted file mode 100644
index 5a700f0b..00000000
--- a/docs2/src/examples/teleport.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-layout: page
-
----
-
-# Teleport
-
-Teleport your nodes to another dom element using Vue 3 [`Teleport`](https://vuejs.org/guide/built-ins/teleport.html).
-
-<div class="mt-6">
-  <client-only>
-    <Suspense>
-      <Repl example="teleport"></Repl>
-    </Suspense>
-  </client-only>
-</div>
diff --git a/docs2/src/guide/components/background.md b/docs2/src/guide/components/background.md
deleted file mode 100644
index 1f8b3236..00000000
--- a/docs2/src/guide/components/background.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Background
-
-Vue Flow comes with two background pattern variants: dots and lines. 
-
-## Usage
-
-To use the background simply pass the `Background` component as a child to the `VueFlow` component.
-
-```vue
-<template>
-  <VueFlow>
-    <Background :variant="BackgroundVariant.Dots" pattern-color="#f8f8f8" />
-  </VueFlow>
-</template>
-```
-
-## [Props](/typedocs/interfaces/BackgroundProps.html/)
-
-| Name         | Definition        | Type                                                         | Optional | Default |
-|--------------|-------------------|--------------------------------------------------------------|----------|---------|
-| variant      | Pattern variant   | [BackgroundVariant](/typedocs/enums/BackgroundVariant.html/) | true     | dots    |
-| gap          | Pattern gap       | number                                                       | true     | 10      |
-| size         | Pattern size      | number                                                       | true     | 0.4     |
-| patternColor | Pattern color     | string                                                       | true     | #81818a |
-| bgColor      | Is node dragging  | boolean                                                      | true     | #fff    |
-| height       | Background height | number                                                       | true     | 100     |
-| width        | Background width  | number                                                       | true     | 100     |
-| x            | X-offset          | number                                                       | true     | 0       |
-| y            | Y-offset          | number                                                       | true     | 0       |
diff --git a/docs2/src/guide/components/control-button.md b/docs2/src/guide/components/control-button.md
deleted file mode 100644
index 78fd2bb3..00000000
--- a/docs2/src/guide/components/control-button.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Control Button
-
-You can use the existing `ControlButton` component to create new control buttons.
-
-## Usage
-
-To use the component pass the `ControlButton` component as a child to the [`Controls`](/guide/components/control-button.html/) component.
-
-```vue
-<template>
-  <VueFlow>
-    <Controls>
-      <ControlButton>
-        <i class="fa fa-plus"></i>
-      </ControlButton>
-    </Controls>
-  </VueFlow>
-</template>
-```
-
-## Slots
-
-| Name    | Definition                                             |
-|---------|--------------------------------------------------------|
-| default | inner slot of btn (is wrapped by a `<button>` element) |
-
diff --git a/docs2/src/guide/components/controls.md b/docs2/src/guide/components/controls.md
deleted file mode 100644
index 0a1f0a91..00000000
--- a/docs2/src/guide/components/controls.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# Controls
-
-The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button.
-
-## Usage
-
-To use the controls simply pass the `Controls` component as a child to the `VueFlow` component.
-
-```vue
-<template>
-  <VueFlow>
-    <Controls />
-  </VueFlow>
-</template>
-```
-
-## [Props](/typedocs/interfaces/ControlProps.html/)
-
-| Name            | Definition                | Type                                                 | Optional | Default |
-|-----------------|---------------------------|------------------------------------------------------|----------|---------|
-| showZoom        | Show zoom btn             | boolean                                              | true     | true    |
-| showFitView     | Show fit-view btn         | boolean                                              | true     | true    |
-| showInteractive | Show lock interactive btn | boolean                                              | true     | true    |
-| showZoom        | Show zoom button          | boolean                                              | true     | true    |
-| fitViewParams   | Params to use on fit-view | [FitViewParams](/typedocs/types/FitViewParams.html/) | true     | -       |
-
-## Emits
-
-| Name               | Definition                  |
-|--------------------|-----------------------------|
-| zoom-in            | Zoom-in btn clicked         |
-| zoom-out           | Zoom-out btn clicked        |
-| fit-view           | Fit-view btn clicked        |
-| interaction-change | Interaction locked/unlocked |
-
-## Slots
-
-### Control Buttons
-
-| Name                | Definition              |
-|---------------------|-------------------------|
-| top                 | slot above default btns |
-| control-zoom-in     | Zoom-in btn             |
-| control-zoom-out    | Zoom-out btn            |
-| control-fit-view    | Fit-view btn            |
-| control-interaction | Interaction btn         |
-| default             | slot below default btns |
-
-### Icons
-
-| Name          | Definition                |
-|---------------|---------------------------|
-| icon-zoom-in  | Zoom-in icon              |
-| icon-zoom-out | Zoom-out icon             |
-| icon-fit-view | Fit-view icon             |
-| icon-lock     | Interaction locked icon   |
-| icon-unlock   | Interaction unlocked icon |
-
-
diff --git a/docs2/src/guide/components/minimap-node.md b/docs2/src/guide/components/minimap-node.md
deleted file mode 100644
index 1ec04bab..00000000
--- a/docs2/src/guide/components/minimap-node.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# MiniMap Node
-
-The minimap node component can be used to extend the default minimap nodes.
-You can use it to add an icon to your node, or to add a custom tooltip etc.
-
-## Usage
-
-To use the component pass the `MiniMapNode` as a child to the [`MiniMap`](/guide/components/minimap.html/) component.
-
-```vue
-<template>
-  <VueFlow>
-    <MiniMap>
-      <template #node-input="props">
-        <MiniMapNode v-bind="props" />
-      </template>
-    </MiniMap>
-  </VueFlow>
-</template>
-```
-
-## [Props](/typedocs/interfaces/MiniMapNodeProps.html/)
-
-| Name           | Definition                      | Type                                                | Optional | Default |
-|----------------|---------------------------------|-----------------------------------------------------|----------|---------|
-| id             | Node id                         | string                                              | false    | -       |
-| parentNode     | Parent node id                  | string                                              | true     | -       |
-| selected       | Is node selected                | boolean                                             | true     | false   |
-| dragging       | Is node dragging                | boolean                                             | true     | false   |
-| position       | XY position of node             | [XYPosition](/typedocs/interfaces/XYPosition.html/) | false    | -       |
-| dimensions     | Node dimensions                 | [Dimensions](/typedocs/interfaces/Dimensions.html/) | false    | -       |
-| borderRadius   | MiniMap node css border-radius  | number                                              | true     | -       |
-| color          | MiniMap node css color          | string                                              | true     | -       |
-| shapeRendering | MiniMap node css shapeRendering | ShapeRendering                                      | true     | -       |
-| strokeColor    | MiniMap node css stroke-color   | string                                              | true     | -       |
-| strokeWidth    | MiniMap node css stroke-width   | string                                              | true     | -       |
-
-## Slots
-
-| Name    | Definition                   |
-|---------|------------------------------|
-| default | Slot below MiniMap node rect |
diff --git a/docs2/src/guide/components/minimap.md b/docs2/src/guide/components/minimap.md
deleted file mode 100644
index faec7358..00000000
--- a/docs2/src/guide/components/minimap.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# MiniMap
-
-## Usage
-
-To use the minimap simply pass the `MiniMap` component as a child to the `VueFlow` component.
-
-```vue
-<template>
-  <VueFlow>
-    <MiniMap />
-  </VueFlow>
-</template>
-```
-
-## [Props](/typedocs/interfaces/MiniMapProps.html/)
-
-| Name             | Definition               | Type                                                             | Optional | Default                 |
-|------------------|--------------------------|------------------------------------------------------------------|----------|-------------------------|
-| nodeColor        | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc.html/) | true     | #fff                    |
-| nodeStrokeColor  | Border color             | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc.html/) | true     | #555                    |
-| nodeClassName    | Extra classes            | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc.html/) | true     | -                       |
-| nodeBorderRadius | Border radius            | number                                                           | true     | 5                       |
-| nodeStrokeWidth  | Stroke width             | number                                                           | true     | 2                       |
-| maskColor        | Minimap Background color | string                                                           | true     | rgb(240, 242, 243, 0.7) |
-
-## Slots
-
-| Name                | Definition        | Props                                                           | Default                                             |
-|---------------------|-------------------|-----------------------------------------------------------------|-----------------------------------------------------|
-| `node-${node.type}` | MiniMap Node slot | [MiniMapNodeProps](/typedocs/interfaces/MiniMapNodeProps.html/) | [MiniMapNode](/guide/components/minimap-node.html/) |
diff --git a/docs2/src/guide/composables.md b/docs2/src/guide/composables.md
deleted file mode 100644
index 094d78ef..00000000
--- a/docs2/src/guide/composables.md
+++ /dev/null
@@ -1,125 +0,0 @@
-# Composables
-
-## [useVueFlow](/typedocs/functions/useVueFlow.html/)
-
-If you're using the options API of Vue you will soon notice that your access to the state of Vue Flow is limited.
-
-This is where the composition API comes in.
-
-The composition API and the power of provide/inject allows us to act more flexible with the way we provide states inside
-a component tree.
-Thus accessing the internal state of Vue Flow becomes super easy when using composition.
-
-```vue
-<script setup>
-import { useVueFlow, VueFlow } from '@braks/vue-flow'
-
-const { nodes, edges } = useVueFlow({
-  nodes: [
-    {
-      id: '1',
-      label: 'Node 1',
-      position: { x: 0, y: 0 },
-    }
-  ]
-})
-
-onMounted(() => {
-  console.log(nodes.value) // will log a single node
-  console.log(edges.value) // will log an empty array
-})
-</script>
-<template>
-  <VueFlow />
-</template>
-```
-
-`useVueFlow` exposes basically the whole internal state.
-The values are reactive, meaning changing the state values returned from `useVueFlow` will trigger changes in the graph.
-
-## [useZoomPanHelper](/typedocs/functions/useZoomPanHelper.html/)
-
-::: warning [deprecated]
-All functions of `useZoomPanHelper` are also available in `useVueFlow`.
-`useZoomPanHelper` might be removed in a future version.
-:::
-
-The `useZoomPanHelper` utility can be used to access core store functions like getting Elements or
-using viewpane transforms.
-All functions can also be accessed from `useVueFlow`.
-It requires a valid Vue Flow store in its context.
-
-```vue
-<script setup>
-import { useZoomPanHelper } from '@braks/vue-flow'
-
-const { fitView } = useZoomPanHelper()
-</script>
-<template>
-  <button @click="fitView({ padding: 0.2, includeHiddenNodes: true })"></button>
-</template>
-```
-
-## [useHandle](/typedocs/functions/useHandle.html/)
-
-Instead of using the Handle component you can use the useHandle composable to create your own custom nodes. `useHandle`
-provides you with a mouseDown- and click-handler functions that you can apply to the element you want to use as a
-node-handle.
-
-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'
-
-const props = withDefaults(defineProps<HandleProps>(), {
-  type: 'source',
-  position: 'top' as Position,
-  connectable: true,
-})
-
-const { id, hooks, connectionStartHandle } = useVueFlow()
-const nodeId = inject(NodeId, '')
-
-const { onMouseDown, onClick } = useHandle()
-const onMouseDownHandler = (event: MouseEvent) =>
-  onMouseDown(event, props.id ?? null, nodeId, props.type === 'target', props.isValidConnection, undefined, (connection) =>
-    hooks.value.connect.trigger(connection),
-  )
-const onClickHandler = (event: MouseEvent) => onClick(event, props.id ?? null, nodeId, props.type, props.isValidConnection)
-</script>
-
-<script lang="ts">
-export default {
-  name: 'Handle',
-}
-</script>
-
-<template>
-  <div
-    :data-handleid="props.id"
-    :data-nodeid="nodeId"
-    :data-handlepos="props.position"
-    class="vue-flow__handle nodrag"
-    :class="[
-      `vue-flow__handle-${props.position}`,
-      `vue-flow__handle-${id}`,
-      {
-        source: props.type !== 'target',
-        target: props.type === 'target',
-        connectable: props.connectable,
-        connecting:
-          connectionStartHandle?.nodeId === nodeId &&
-          connectionStartHandle?.handleId === props.id &&
-          connectionStartHandle?.type === props.type,
-      },
-    ]"
-    @mousedown="onMouseDownHandler"
-    @click="onClickHandler"
-  >
-    <slot :node-id="nodeId" v-bind="props"></slot>
-  </div>
-</template>
-```
diff --git a/docs2/src/guide/edge.md b/docs2/src/guide/edge.md
deleted file mode 100644
index 3183bb60..00000000
--- a/docs2/src/guide/edge.md
+++ /dev/null
@@ -1,423 +0,0 @@
-# Edges
-
-Edges are what connects your nodes into a map.
-
-They cannot exist on their own and need nodes to which they are connected.
-
-Each edge <span class="font-bold text-blue-500">requires a unique id, a source node and a target node id.</span>
-Anything else is optional.
-
-You can check the full options for an edge element in the TypeDocs [here](/typedocs/interfaces/Edge.html/).
-
-## Usage
-
-Generally you create edges by adding them to the model-value or the edges prop of the Vue Flow component.
-
-```vue
-<script>
-import { VueFlow } from '@braks/vue-flow'
-
-export default defineComponent({
-  components: { VueFlow },
-  data() {
-    return {
-      elements: [
-        {
-          id: '1',
-          position: { x: 50, y: 50 },
-          label: 'Node 1',
-        },
-        {
-          id: '2',
-          position: { x: 50, y: 250 },
-          label: 'Node 2',
-        }
-      ]
-    }
-  },
-  mounted() {
-    // Add an edge after mount
-    this.elements.push(
-      {
-        id: 'e1-2',
-        source: '1',
-        target: '2',
-      }
-    )
-  }
-})
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow v-model="elements" />
-  </div>
-</template>
-```
-
-For more advanced graphs that require more state access you will want to use the useVueFlow composable.
-[useVueFlow](/typedocs/functions/useVueFlow.html/) will provide
-you with an [`addEdges`](/typedocs/interfaces/Actions.html#addedges/) utility function, which you can use to add edges
-directly to the state.
-
-```vue
-<script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
-
-const initialNodes = ref([
-  {
-    id: '1',
-    position: { x: 50, y: 50 },
-    label: 'Node 1',
-  },
-  {
-    id: '2',
-    position: { x: 50, y: 250 },
-    label: 'Node 2',
-  }
-])
-const { addEdges } = useVueFlow({
-  nodes: initialNodes,
-})
-
-onMounted(() => {
-  // Add an edge after mount
-  addEdges([
-     {
-        source: '1',
-        target: '2',
-        sourceHandle: null,
-        targetHandle: null,
-     }
-  ])
-})
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow />
-  </div>
-</template>
-```
-
-You can also apply changes (like removing elements safely) using
-the [`applyEdgeChanges`](/typedocs/interfaces/Actions.html#applyedgechanges/) utility function, which expects an array
-of [changes](/typedocs/types/EdgeChange.html/) to be applied to the currently stored edges.
-
-## [Default Edge-Types](/typedocs/types/DefaultEdgeTypes.html/)
-
-Vue Flow comes with built-in edges that you can use right out of the box.
-These edge types include `default` (bezier), `step`, `smoothstep` and `straight`.
-
-### Default Edge (Bezier)
-
-A bezier edge has a curved path.
-
-```js
-const edges = [
-  {
-    id: 'e1-2',
-    source: '1',
-    target: '2',
-  }
-]
-```
-
-### Step Edge
-
-A step edge has a straight path with a step towards the target.
-
-```js{4}
-const edges = [
-  {
-    id: 'e1-2',
-    type: 'step',
-    source: '1',
-    target: '2',
-  }
-]
-```
-
-### Smoothstep Edge
-
-The same as the step edge though with a border radius on the step (rounded step).
-
-```js{4}
-const edges = [
-  {
-    id: 'e1-2',
-    type: 'smoothstep',
-    source: '1',
-    target: '2',
-  }
-]
-```
-
-### Straight Edge
-
-A simple straight path.
-
-```js{4}
-const edges = [
-  {
-    id: 'e1-2',
-    type: 'straight',
-    source: '1',
-    target: '2',
-  }
-]
-```
-
-## Custom Edges
-
-In addition to the default edge types from the previous chapter, you can define any amount of custom edge-types.
-Edge-types are inferred from your edge's definition.
-
-```js{5,11}
-const edges = [
-  {
-    id: 'e1-2',
-    type: 'special',
-    source: '1',
-    target: '2',
-  },
-]
-```
-
-Vue Flow will now try to resolve this edge-type to a component.
-First and foremost we will look for a definition in the `edgeTypes` object of the state.
-After that we will try to resolve the component to a globally registered one that matches the exact name.
-Finally, we will check if a template slot has been provided to fill the edge-type.
-
-If none of these methods succeed in resolving the component the default (bezier) edge-type will be used as a fallback.
-
-### Template slots
-
-The easiest way to define custom edges is, by passing them as template slots.
-Your custom edge-types are dynamically resolved to slot-names, meaning an edge with the type `custom`
-will expect a slot to have the name `edge-custom`.
-
-```vue{18,26}
-<script setup>
-import { VueFlow } from '@braks/vue-flow'
-import CustomEdge from './CustomEdge.vue'
-
-const elements = ref([
-  {
-    id: '1',
-    label: 'Node 1',
-    position: { x: 50, y: 50 },
-  },
-  {
-    id: '2',
-    label: 'Node 2',
-    position: { x: 50, y: 250 },
-  },
-  {
-    id: 'e1-2',
-    type: 'custom',
-    source: '1',
-    target: '2',
-  },
-])
-</script>
-<template>
-  <VueFlow v-model="elements">
-    <template #edge-custom="props">
-      <CustomEdge v-bind="props" />
-    </template>
-  </VueFlow>
-</template>
-```
-
-### Edge-types object
-
-You can also define edge-types by passing an object as a prop to the VueFlow component (or as an option to the
-composable).
-
-::: warning
-When doing this, mark your components as raw (using the designated function from the vue library) to avoid them being
-turned into reactive objects.
-Otherwise, vue will throw a warning in the console.
-:::
-
-```vue{5-7,28}
-<script setup>
-import { markRaw } from 'vue'
-import CustomEdge from './CustomEdge.vue'
-
-const edgeTypes = {
-  custom: markRaw(CustomNode),
-}
-
-const elements = ref([
-  {
-    id: '1',
-    label: 'Node 1',
-  },
-  {
-    id: '1',
-    label: 'Node 1',
-  },
-    {
-    id: 'e1-2',
-    type: 'custom',
-    source: '1',
-    target: '2',
-  },
-])
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow v-model="elements" :edge-types="edgeTypes" />
-  </div>
-</template>
-```
-
-### Edge Template
-
-You can also set a template per edge, which will overwrite the edge-type component but will retain
-the type otherwise.
-
-```vue
-<script setup>
-import { markRaw } from 'vue'
-import CustomEdge from './CustomEdge.vue'
-
-const elements = ref([
-  {
-    id: '1',
-    label: 'Node 1',
-    position: { x: 0, y: 0 },
-  },
-  {
-    id: '2',
-    label: 'Node 2',
-    position: { x: 0, y: 150 },
-  },
-    {
-    id: '3',
-    label: 'Node 3',
-    position: { x: 0, y: 300 },
-  },
-  {
-    id: 'e1-2',
-    source: '1',
-    target: '2',
-  },
-  {
-    id: 'e1-3',
-    source: '1',
-    target: '2',
-    template: markRaw(CustomEdge),
-  },
-])
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow v-model="elements" />
-  </div>
-</template>
-```
-
-### [Custom Edge Props](/typedocs/interfaces/EdgeProps.html/)
-
-Your custom edges are wrapped so that the basic functions like selecting work.
-But you might want to extend on that functionality or implement your own business logic inside of edges, therefore
-your edges receive the following props:
-
-| Name                | Definition                    | Type                                               | Optional |
-|---------------------|-------------------------------|----------------------------------------------------|----------|
-| id                  | Edge id                       | string                                             | false    |
-| source              | The source node id            | string                                             | false    |
-| target              | The target node id            | string                                             | false    |
-| sourceNode          | The source node               | GraphNode                                          | false    |
-| targetNode          | The target node               | GraphNode                                          | false    |
-| sourceX             | X position of source handle   | number                                             | false    |
-| sourceY             | Y position of source handle   | number                                             | false    |
-| targetX             | X position of target handle   | number                                             | false    |
-| targetY             | Y position of target handle   | number                                             | false    |
-| type                | Edge type                     | string                                             | true     |
-| sourceHandleId      | Source handle id              | string                                             | true     |
-| targetHandleId      | Target handle id              | string                                             | true     |
-| data                | Custom data object            | Any object                                         | true     |
-| events              | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn.html/) | true     |
-| label               | Edge label                    | string, Component                                  | true     |
-| labelStyle          | Additional label styles       | CSSProperties                                      | true     |
-| labelShowBg         | Enable/Disable label bg       | boolean                                            | true     |
-| labelBgPadding      | Edge label bg padding         | number                                             | true     |
-| labelBgBorderRadius | Edge label bg border radius   | number                                             | true     |
-| selected            | Is edge selected              | boolean                                            | true     |
-| animated            | Is edge animated              | boolean                                            | true     |
-| updatable           | Is edge updatable             | boolean                                            | true     |
-| markerStart         | Edge marker id                | string                                             | true     |
-| markerEnd           | Edge marker id                | string                                             | true     |
-| curvature           | Edge path curvature           | number                                             | true     |
-
-### [(Custom) Edge Events](/typedocs/interfaces/EdgeEvents.html/)
-
-In addition to the event handlers that you can access through [`useVueFlow`](/guide/composables#useVueFlow/) or the Vue Flow component,
-you can also pass in event handlers in your initial node definition, or you can access the node events through the `events` prop passed
-to your node components.
-
-```vue{19-26}
-<script setup>
-import { VueFlow } from '@braks/vue-flow'
-
-const elements = ref([
-  {
-    id: '1',
-    label: 'Node 1',
-    position: { x: 50, y: 50 },
-  },
-  {
-    id: '2',
-    label: 'Node 2',
-    position: { x: 50, y: 150 },
-  },
-  {
-    id: 'edge1-2',
-    source: '1',
-    target: '2',
-    events: {
-      click: () => {
-        console.log('Edge clicked')
-      },
-      change: () => {
-        console.log('Something changed')
-      },
-    },
-  }
-])
-</script>
-```
-
-As you can see above, you can also pass in custom event handlers. These will not be called by Vue Flow but can be used
-to forward callback functions to your custom components.
-The `click` handler is part of the [`EdgeEventsHandler`](/typedocs/types/EdgeEventsHandler.html) type, meaning it will be
-triggered when the edge is clicked.
-
-```vue
-<script lang="ts" setup>
-import type { EdgeProps, EdgeEventsOn } from '@braks/vue-flow'
-
-// define your events
-interface CustomEdgeEvents {
-  click: EdgeEventsOn['click']
-  customEvent: (input: string) => void
-}
-
-interface CustomEdgeProps extends EdgeProps<any, CustomEdgeEvents> {
-  id: string
-  events: CustomEdgeEvents
-}
-
-props.events.click(() => {
-  console.log(`Edge ${props.id} clicked`)
-})
-
-// custom events are just functions, they are not hooks which you can listen to like `click`
-props.events.customEvent('custom event triggered')
-</script>
-<template>
-  <!-- Omitted for simplicty -->
-</template>
-```
diff --git a/docs2/src/guide/getting-started.md b/docs2/src/guide/getting-started.md
deleted file mode 100644
index 1cb38593..00000000
--- a/docs2/src/guide/getting-started.md
+++ /dev/null
@@ -1,100 +0,0 @@
-# Getting Started
-
-## Prerequisites
-
-- [Node.js v12+](https://nodejs.org/)
-- [Vue 3](https://vuejs.org/)
-
-## Installation
-
-<CodeGroup>
-  <CodeGroupItem title="YARN" active>
-
-```bash
-yarn add @braks/vue-flow
-```
-
-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="NPM">
-
-```bash
-npm i --save @braks/vue-flow
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-## Usage
-
-A flow consists of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node.html/)
-and (optionally) [<span class="font-bold text-purple-500">edges</span>](/typedocs/interfaces/Edge.html).
-Together we call them
-[<span class="font-bold text-green-500">elements</span>](/typedocs/types/Elements.html/).
-
-<span class="font-bold text-blue-500">Each element needs a unique id.</span>
-A node also needs a [xy-position](/typedocs/interfaces/XYPosition.html/). An edge needs at least a
-source (node id) and a target (node id).
-
-```vue
-<script setup>
-import { VueFlow  } from '@braks/vue-flow'
-
-const elements = ref([
-  // Nodes
-  // An input node, specified by using `type: 'input'`
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-
-  // Default nodes, you can omit `type: 'default'`
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-
-  // An output node, specified by using `type: 'output'`
-  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
-
-  // Edges
-  // Most basic edge, only consists of an id, source-id and target-id
-  { id: 'e1-3', source: '1', target: '3' },
-
-  // An animated edge
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-])
-</script>
-<template>
-  <VueFlow v-model="elements" />
-</template>
-```
-
-## Quickstart
-
-The recommended method of using Vue Flow is the composition API as it allows for full control of the state, thanks to
-composables and the power of [provide/inject](https://vuejs.org/guide/components/provide-inject.html). You can even
-access the state outside the context and manipulate it to your liking. However, using the options API is possible,
-though more limited it will probably satisfy most of your needs if you are not looking for too advanced handling of
-states.
-
-A basic setup would look like this:
-
-<CodeGroup>
-  <CodeGroupItem title="Composition API" active>
-
-@[code vue](../../../examples/vite/src/Basic/Basic.vue)
-
-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="Options API">
-
-@[code vue](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
-
-  </CodeGroupItem>
-</CodeGroup>
-
-## TypeScript
-
-Vue Flow is fully written in [TypeScript](https://www.typescriptlang.org/), so it is highly recommended to use TypeScript to have the best possible DX and
-avoid common mistakes.
-The types are included in the library.
-
-[You can find the TypeDocs here](/typedocs/).
diff --git a/docs2/src/guide/index.md b/docs2/src/guide/index.md
deleted file mode 100644
index 2daa5593..00000000
--- a/docs2/src/guide/index.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Introduction
----
-
-# Introduction
-
-## What is Vue Flow?
-
-Vue Flow is a Vue 3 library that brings interactivity to flowcharts and graphs.
-
-It is a tool to build your own diagrams, editors and whatever your imagination allows for.
-
-Easily implement your own custom nodes and edges and expand on the basic functionality and on top of that Vue Flow comes
-with a couple of additional components like a Background, a Minimap and Controls.
-
-Check out the [examples](/examples/) if you want to dive directly into the code.
-
-## Key Features
-
-- 👶 __Easy setup__: Get started hassle-free - Built-in zoom- & pan features, element dragging, selection and much more
-
-- 🎨 __Customizable__: Use your own custom nodes, edges, connection lines and expand on the Vue Flows functionality
-
-- 🚀 __Fast__: Tracks changes reactively and only re-renders the appropriate elements
-
-- 🧲 __Utils & Composition__: Comes with graph helper and state composable functions for advanced uses
-
-- 📦 __Additional Components__:
-
-  - 🖼 Background: With two built-in patterns and some configuration options like height, width or color.
-
-  - 🧭 Minimap: Shows current nodes in a small map shape in the bottom right corner
-
-  - 🕹 Controls: Control zoom behavior from a panel on the bottom left
-
-- 🦾 __Reliable__: Fully written in TypeScript
-
-::: warning Vue Flow is still version 0.x.x.
-Expect breaking changes between versions!
-:::
diff --git a/docs2/src/guide/node.md b/docs2/src/guide/node.md
deleted file mode 100644
index 938a3145..00000000
--- a/docs2/src/guide/node.md
+++ /dev/null
@@ -1,460 +0,0 @@
-# Nodes
-
-Nodes are the building blocks of your graph. They represent any sort of data you want to present in your graph.
-
-They can exist on their own but can be connected to each other with edges to create a map.
-
-Each node <span class="font-bold text-blue-500">requires a unique id and
-a [xy-position](/typedocs/interfaces/XYPosition.html/).</span>
-Anything else is optional.
-
-You can check the full options for a node element [here](/typedocs/interfaces/Node.html/).
-
-## Usage
-
-Generally you create nodes by adding them to the model-value or the nodes prop of the Vue Flow component.
-
-```vue
-<script>
-import { VueFlow } from '@braks/vue-flow'
-
-export default defineComponent({
-  components: { VueFlow },
-  data() {
-    return {
-      elements: [
-        {
-          id: '1',
-          position: { x: 50, y: 50 },
-          label: 'Node 1',
-        }
-      ]
-    }
-  },
-  mounted() {
-    // Add an element after mount
-    this.elements.push(
-      {
-        id: '2',
-        position: { x: 150, y: 50 },
-        label: 'Node 2',
-      }
-    )
-  }
-})
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow v-model="elements" />
-  </div>
-</template>
-```
-
-For more advanced graphs that require more state access you will want to use the useVueFlow composable.
-[useVueFlow](/typedocs/functions/useVueFlow.html/) will provide
-you with an [`addNodes`](/typedocs/interfaces/Actions.html#addnodes/) utility function, which you can use to add nodes
-directly to the state.
-
-```vue
-<script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
-
-const initialNodes = ref([
-  {
-    id: '1',
-    position: { x: 50, y: 50 },
-    label: 'Node 1',
-  }
-])
-const { addNodes } = useVueFlow({
-  nodes: initialNodes,
-})
-
-onMounted(() => {
-  // Add an element after mount
-  addNodes([
-    {
-      id: '2',
-      position: { x: 150, y: 50 },
-      label: 'Node 2',
-    }
-  ])
-})
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow />
-  </div>
-</template>
-```
-
-You can also apply changes using the [`applyNodeChanges`](/typedocs/interfaces/Actions.html#applynodechanges/) utility
-function,
-which expects an array of [changes](/typedocs/types/NodeChange.html/) to be applied to the currently stored nodes.
-
-```vue{11,17-22}
-<script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
-
-const initialNodes = ref([
-  {
-    id: '1',
-    position: { x: 50, y: 50 },
-    label: 'Node 1',
-  }
-])
-const { applyNodeChanges } = useVueFlow({
-  nodes: initialNodes,
-})
-
-onMounted(() => {
-  // Remove an element after mount
-  applyNodeChanges([
-    {
-      id: '1',
-      type: 'remove',
-    }
-  ])
-})
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow />
-  </div>
-</template>
-```
-
-## [Default Node-Types](/typedocs/types/DefaultNodeTypes.html/)
-
-Vue Flow comes with built-in nodes that you can use right out of the box.
-These node types include `default`, `input` and `output`.
-
-### Default Node
-
-![vue flow default node](https://images.prismic.io/bcakmakoglu/235b4a10-5bdc-41c0-ba3f-4fb402fba65f_Default-node.png?auto=compress,format)
-
-A default node comes with two handles.
-It represents a branching point in your map.
-
-You can specify the position of handles in the node definition.
-
-```js{5-6}
-const nodes = [
-  {
-    id: '1',
-    label: 'Node 1',
-    targetHandle: Position.Top, // or Bottom, Left, Right,
-    sourceHandle: Position.Right,
-  }
-]
-```
-
-### Input Node
-
-![vue flow input node](https://images.prismic.io/bcakmakoglu/fd871fe3-6c5f-4ef1-8e71-fb66d947866b_Input-node.png?auto=compress,format)
-
-An input node has a single handle, located at the bottom by default.
-It represents a starting point of your map.
-
-### Output Node
-
-![vue flow output node](https://images.prismic.io/bcakmakoglu/abe32a60-d0a4-40ee-a710-092570d4d128_Output-node.png?auto=compress,format)
-
-An output node has a single handle, located at the top by default.
-It represents an ending point of your map.
-
-## Custom Nodes
-
-In addition to the default node types from the previous chapter, you can define any amount of custom node-types.
-Node-types are inferred from your node's definition.
-
-```js{5,11}
-const nodes = [
-  {
-    id: '1',
-    label: 'Node 1',
-    type: 'custom',
-    position: { x: 50, y: 50 },
-  },
-  {
-    id: '1',
-    label: 'Node 1',
-    type: 'special',
-    position: { x: 150, y: 50 },
-  }
-]
-```
-
-Vue Flow will now try to resolve this node-type to a component.
-First and foremost we will look for a definition in the `nodeTypes` object of the state.
-After that we will try to resolve the component to a globally registered one that matches the exact name.
-Finally, we will check if a template slot has been provided to fill the node-type.
-
-If none of these methods succeed in resolving the component the default node-type will be used as a fallback.
-
-### Template slots
-
-The easiest way to define custom nodes is, by passing them as template slots.
-Your custom node-types are dynamically resolved to slot-names, meaning a node with the type `custom`
-will expect a slot to have the name `node-custom`.
-
-```vue{9,16}
-<script setup>
-import { VueFlow } from '@braks/vue-flow'
-import CustomNode from './CustomNode.vue'
-
-const elements = ref([
-  {
-    id: '1',
-    label: 'Node 1',
-    type: 'custom',
-    position: { x: 50, y: 50 },
-  }
-])
-</script>
-<template>
-  <VueFlow v-model="elements">
-    <template #node-custom="props">
-      <CustomNode v-bind="props" />
-    </template>
-  </VueFlow>
-</template>
-```
-
-### Node-types object
-
-You can also define node-types by passing an object as a prop to the VueFlow component (or as an option to the
-composable).
-
-::: warning
-When doing this, mark your components as raw (using the designated function from the vue library) to avoid them being
-turned into reactive objects.
-Otherwise, vue will throw a warning in the console.
-:::
-
-```vue{6-9,26}
-<script setup>
-import { markRaw } from 'vue'
-import CustomNode from './CustomNode.vue'
-import SpecialNode from './SpecialNode.vue'
-
-const nodeTypes = {
-  custom: markRaw(CustomNode),
-  special: markRaw(SpecialNode),
-}
-
-const elements = ref([
-  {
-    id: '1',
-    label: 'Node 1',
-    type: 'custom',
-  },
-  {
-    id: '1',
-    label: 'Node 1',
-    type: 'special',
-  }
-])
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow v-model="elements" :node-types="nodeTypes" />
-  </div>
-</template>
-```
-
-::: tip
-You can find a more advanced example [here](/examples/custom-node.html/).
-:::
-
-### Node Template
-
-You can also set a template per node, which will overwrite the node-type component but will retain
-the type otherwise.
-
-```vue{17}
-<script setup>
-import { markRaw } from 'vue'
-import CustomNode from './CustomNode.vue'
-import CustomNode from './OverwriteCustomNode.vue'
-import SpecialNode from './SpecialNode.vue'
-
-const nodeTypes = {
-  custom: markRaw(CustomNode),
-  special: markRaw(SpecialNode),
-}
-
-const elements = ref([
-  {
-    id: '1',
-    label: 'Node 1',
-    type: 'custom',
-    template: markRaw(OverwriteCustomNode),
-  },
-  {
-    id: '1',
-    label: 'Node 1',
-    type: 'special',
-  }
-])
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow v-model="elements" :node-types="nodeTypes" />
-  </div>
-</template>
-```
-
-### [(Custom) Node Props](/typedocs/interfaces/NodeProps.html/)
-
-Your custom nodes are wrapped so that the basic functions like dragging or selecting work.
-But you might want to extend on that functionality or implement your own business logic inside of nodes, therefore
-your nodes receive the following props:
-
-| Name             | Definition                                       | Type                                                             | Optional |
-|------------------|--------------------------------------------------|------------------------------------------------------------------|----------|
-| id               | Node id                                          | string                                                           | false    |
-| type             | Node type                                        | string                                                           | false    |
-| selected         | Is node selected                                 | boolean                                                          | false    |
-| dragging         | Is node dragging                                 | boolean                                                          | false    |
-| connectable      | Is node connectable                              | boolean                                                          | false    |
-| position         | Relative position of a node                      | [XYPosition](/typedocs/interfaces/XYPosition.html/)              | false    |
-| zIndex           | Node z-index                                     | number                                                           | false    |
-| dimensions       | Node size                                        | [Dimensions](/typedocs/interfaces/Dimensions.html)               | false    |
-| data             | Custom data object                               | Any object                                                       | true     |
-| events           | Node events and custom events                    | [NodeEventsOn](/typedocs/types/NodeEventsOn.html/)               | true     |
-| label            | Node label                                       | string, Component                                                | true     |
-| isValidTargetPos | Called when target handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc.html/) | true     |
-| isValidSourcePos | Called when source handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc.html/) | true     |
-| parentNode       | Parent node id                                   | string                                                           | true     |
-| targetPosition   | Target handle position                           | [Position](/typedocs/enums/Position.html/)                       | true     |
-| sourcePosition   | Source handle position                           | [Position](/typedocs/enums/Position.html/)                       | true     |
-| dragHandle       | Node drag handle class                           | string                                                           | true     |
-
-### [(Custom) Node Events](/typedocs/interfaces/NodeEvents.html/)
-
-In addition to the event handlers that you can access through [`useVueFlow`](/guide/composables#useVueFlow/) or the Vue
-Flow component,
-you can also pass in event handlers in your initial node definition, or you can access the node events through
-the `events` prop passed
-to your node components.
-
-```vue{9-13}
-<script setup>
-import { VueFlow } from '@braks/vue-flow'
-
-const elements = ref([
-  {
-    id: '1',
-    label: 'Node 1',
-    type: 'custom',
-    position: { x: 50, y: 50 },
-    events: {
-      click: () => {
-        console.log('Node 1 clicked')
-      },
-      customEvent: () => {
-        console.log('Node 1 custom event')
-      },
-    }
-  }
-])
-</script>
-```
-
-As you can see above, you can also pass in custom event handlers. These will not be called by Vue Flow but can be used
-to forward callback functions to your custom components.
-The `click` handler is part of the [`NodeEventsHandler`](/typedocs/types/NodeEventsHandler.html) interface, meaning it
-will be
-triggered when the node is clicked.
-
-```vue
-<script lang="ts" setup>
-import type { NodeProps, NodeEventsOn } from '@braks/vue-flow'
-
-// define your events
-interface CustomNodeEvents {
-  click: NodeEventsOn['click']
-  customEvent: (input: string) => void
-}
-
-interface CustomNodeProps extends NodeProps<any, CustomNodeEvents> {
-  id: string
-  events: CustomNodeEvents
-}
-
-props.events.click(() => {
-  console.log(`Node ${props.id} clicked`)
-})
-
-// custom events are just functions, they are not hooks which you can listen to like `click`
-props.events.customEvent('custom event triggered')
-</script>
-<template>
-  <!-- Omitted for simplicty -->
-</template>
-```
-
-## Styling
-
-::: tip
-To overwrite default theme styles check the [Theming section](/guide/theming.html).
-:::
-
-### Custom Nodes
-
-When you create a new node type you also need to implement some styling. Your custom node has no default styles.
-
-```css
-.vue-flow__node-custom {
-  background: #9CA8B3;
-  color: #fff;
-  padding: 10px;
-}
-```
-
-### Allow scrolling inside a node
-
-You can use the `noWheelClassName` prop to define a class which will prevent zoom-on-scroll or pan-on-scroll behavior on
-that element.
-By default, the `noWheelClassName` is `.nowheel`.
-By adding this class you can also enable scrolling inside a node.
-
-### Dynamic handle positions / Adding handles dynamically
-
-When working with dynamic handle positions or adding handles dynamically, you need to use
-the [`updateNodeInternals`](/typedocs/types/UpdateNodeInternals.html/) method.
-
-You need to call this method otherwise your node will not respond to the new handles and edges will be 
-misaligned.
-
-You can either use the store action to update multiple nodes at once by passing their ids into the method, 
-or you can emit the `updateNodeInternals` event from your custom node component without passing any parameters.
-
-#### Examples
-
-- Using store action
-
-```vue
-<script setup>
-import { useVueFlow } from '@braks/vue-flow'
-
-const { updateNodeInternals } = useVueFlow()
-
-const onSomeEvent = () => {
-  updateNodeInternals(['1'])
-}
-</script>
-```
-
-- Emitting event from custom component
-
-```vue
-<script setup>
-const emits = defineEmits(['updateNodeInternals'])
-
-const onSomeEvent = () => {
-  emits('updateNodeInternals')
-}
-</script>
-```
diff --git a/docs2/src/guide/theming.md b/docs2/src/guide/theming.md
deleted file mode 100644
index 98773fd3..00000000
--- a/docs2/src/guide/theming.md
+++ /dev/null
@@ -1,151 +0,0 @@
-# Theming
-
-VueFlow comes without any pre-injected stylings. Some necessary stylings have to be imported, though optional styles (i.e.
-the default theme) can be skipped.
-
-```css
-/* these are necessary styles for vue flow */
-@import '@braks/vue-flow/dist/style.css';
-
-/* this contains the default theme, these are optional styles */
-@import '@braks/vue-flow/dist/theme-default.css';
-```
-
-## Customizing default theme
-
-When you are using the default theme there are three ways how you can style the graph pane and the elements. You can create
-your own CSS rules, pass style/class properties to the components or use the available css variables.
-
-### Using classes
-
-You can customize the default theme by simply overwriting the class definitions with your own custom ones.
-
-```css
-.vue-flow {
-  background: red;
-}
-```
-
-### Using styles
-
-You can also pass a style or class attribute directly to the Vue Flow component.
-
-```vue{4}
-<div style="height: 300px">
-  <VueFlow
-    v-model="elements"
-    :style="{ background: 'red' }"
-  />
-</div>
-```
-
-Nodes/Edges can also be styled with a style or class attribute.
-
-```ts{7-11,19-26}
-const nodes = ref<Node[]>([
-  { 
-    id: '1', 
-    label: 'Node 1', 
-    position: { x: 250, y: 5 },
-    
-    // Add a class name to the node
-    class: 'my-custom-node-class',
-    
-    // You can pass an object containing CSSProperties or CSS variables
-    style: { backgroundColor: 'green', width: '200px', height: '100px' },
-  },
-  
-  { 
-    id: '2', 
-    label: 'Node 2', 
-    position: { x: 100, y: 100 }, 
-    
-    /* 
-     * You can also use a function which will receive your current element as it's input.
-     * Useful if you want to add styles if the element is selected
-     */
-    style: (el) => {
-      if (el.selected) return { background: 'purple' }
-      return { background: 'green' }
-    }
-  },
-])
-```
-
-### [Using CSS variables](/typedocs/types/CSSVars.html/)
-
-Some theme stylings can be overwritten by using css variables.
-These variables can either be applied globally or you can define them on an element basis.
-
-```css
-/* global defaults */
-:root {
-  --vf-node-bg: #fff;
-  --vf-node-text: #222;
-  --vf-connection-path:  #b1b1b7;
-  --vf-handle: #555;
-}
-```
-
-```ts{4-5}
-const elements = ref<Elements>([
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-  
-  // Overwrite the `--vf-node-color` variable to change the border, box-shadow and handle color of a node
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, style: { '--vf-node-color': 'blue' } },
-  
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' },
-])
-```
-
-## CSS Variables
-
-| Variable              | Effect                                   |
-|-----------------------|------------------------------------------|
-| --vf-node-color       | Node border, box-shadow and handle color |
-| --vf-box-shadow       | Node box-shadow color                    |
-| --vf-node-bg          | Node background color                    |
-| --vf-node-text        | Node font color                          |
-| --vf-handle           | Node handle color                        |
-| --vf-connection-path  | Connectionline color                     |
-
-## Classes
-
-| Name                          | Container                                                |
-|-------------------------------|----------------------------------------------------------|
-| .vue-flow                     | Outer container                                          |
-| .vue-flow__container          | Wrapping container elements                              |
-| .vue-flow__viewport           | Inner container                                          |
-| .vue-flow__transformationpane | Zoom & pan pane                                          |
-| .vue-flow__selectionpane      | Selection pane                                           |
-| .vue-flow__selection          | User selection                                           |
-| .vue-flow__edges              | Edges renderer wrapper                                   |
-| .vue-flow__edge               | Edge element wrapper                                     |
-| .vue-flow__edge-{type}        | Edge type, either a custom or default type               |
-| .vue-flow__edge .selected     | Selected Edge                                            |
-| .vue-flow__edge .animated     | Animated edge                                            |
-| .vue-flow__edge-path          | Edge element svg path                                    |
-| .vue-flow__edge-text          | Edge label wrapper                                       |
-| .vue-flow__edge-textbg        | Edge label wrapper background                            |
-| .vue-flow__connectionline     | Connection line container element                        |
-| .vue-flow__connection         | Connection line element                                  |
-| .vue-flow__connection-path    | Connection line svg path                                 |
-| .vue-flow__nodes              | Nodes renderer wrapper                                   |
-| .vue-flow__node               | Node element wrapper                                     |
-| .vue-flow__node .selected     | Selected Node                                            |
-| .vue-flow__node-{type}        | Node type, either a custom or default type               |
-| .vue-flow__nodesselection     | Nodes selection rect                                     |
-| .vue-flow__handle             | Node handle element wrapper                              |
-| .vue-flow__handle-bottom      | Handle position bottom                                   |
-| .vue-flow__handle-top         | Handle position top                                      |
-| .vue-flow__handle-left        | Handle position left                                     |
-| .vue-flow__handle-right       | Handle position right                                    |
-| .vue-flow__handle-connecting  | Connectionline is above handle                           |
-| .vue-flow__handle-valid       | Connectionline is above handle & the connection is valid |
-| .vue-flow__background         | Background component                                     |
-| .vue-flow__minimap            | Mini map component                                       |
-| .vue-flow__controls           | Controls component                                       |
- 
diff --git a/docs2/src/guide/utils/edge.md b/docs2/src/guide/utils/edge.md
deleted file mode 100644
index c83785ef..00000000
--- a/docs2/src/guide/utils/edge.md
+++ /dev/null
@@ -1,62 +0,0 @@
-# Edge
-
-All default edge components are exported and can be used or extended if necessary.
-
-```vue
-<script setup>
-// CustomEdge.vue
-import { EdgeProps, BezierEdge } from '@braks/vue-flow'
-
-const props = defineProps<EdgeProps>()
-
-// do some custom logic
-</script>
-<template>
-  <!-- wrap the bezier edge or do something else in the template -->
-  <BezierEdge v-bind="props" />
-</template>
-```
-
-## Path utils
-
-Vue Flow exports a couple of functions you can use to create your own custom edges without having to worry how to actually
-create a bezier path.
-
-This can be helpful if you don't want to actually change the way the path is calculated but just want to implement some custom logic on top of the 
-regular edge behavior.
-
-### [getBezierPath](/typedocs/functions/getBezierPath.html/)
-
-- Details:
-
-  Returns a bezier path.
-
-### [getBezierCenter](/typedocs/functions/getBezierCenter.html/)
-
-- Details:
-
-  Returns a bezier path's center x and y values.
-
-### [getSimpleBezierPath](/typedocs/functions/getSimpleBezierPath.html/)
-
-- Details:
-
-  Returns a simple bezier path (no curvature at handles).
-
-### [getSimpleBezierCenter](/typedocs/functions/getSimpleBezierCenter.html/)
-
-- Details:
-
-  Returns a simple bezier path's center x and y values.
-
-### [getSmoothStepPath](/typedocs/functions/getSmoothStepPath.html/)
-
-- Details:
-
-  Returns a smoothstep path (use border-radius 0 for a step path).
-
-### [getEdgeCenter](/typedocs/functions/getEdgeCenter.html/)
-
-- Details:
-
-  Returns an edge path's center x and y values.
diff --git a/docs2/src/guide/utils/graph.md b/docs2/src/guide/utils/graph.md
deleted file mode 100644
index b5144c20..00000000
--- a/docs2/src/guide/utils/graph.md
+++ /dev/null
@@ -1,179 +0,0 @@
-# Graph
-
-### [isEdge](/typedocs/functions/isEdge.html/)
-
-- Details:
-
-  Confirms if an element is an edge.
-
-- Example:
-
-```vue{13}
-<script setup>
-import { VueFlow, isEdge } from '@braks/vue-flow'
-
-const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 }, },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
-
-  { id: 'e1-2', source: '1', target: '2', class: 'light' },
-])
-
-const toggleClass = () => {
-  elements.value.forEach((el) => {
-    if (isEdge(el)) {
-      el.class = el.class === 'light' ? 'dark' : 'light'
-    }
-  })
-}
-</script>
-<template>
-  <VueFlow v-model="elements">
-    <button style="position: absolute; top: 10px; right: 10px;" @click="toggleClass">Toggle classes</button>
-  </VueFlow>
-</template>
-```
-
-### [isNode](/typedocs/functions/isNode.html/)
-
-- Details:
-
-  Confirms if an element is a node.
-
-- Example:
-
-```vue{13}
-<script setup>
-import { VueFlow, isNode } from '@braks/vue-flow'
-
-const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
-
-  { id: 'e1-2', source: '1', target: '2' },
-])
-
-const toggleClass = () => {
-  elements.value.forEach((el) => {
-    if (isNode(el)) {
-      el.class = el.class === 'light' ? 'dark' : 'light'
-    }
-  })
-}
-</script>
-<template>
-  <VueFlow v-model="elements">
-    <button style="position: absolute; top: 10px; right: 10px;" @click="toggleClass">Toggle classes</button>
-  </VueFlow>
-</template>
-```
-
-### [addEdge](/typedocs/functions/isEdge.html/)
-
-::: warning
-In the composition API you should use [`addEdges`](/typedocs/types/AddEdges.html/)
-of [`useVueFlow`](/guide/composables.html#usevueflow/)
-:::
-
-- Details:
-
-  Confirms if an element is a node.
-
-- Example:
-
-```vue{12}
-<script setup>
-import { VueFlow, addEdge } from '@braks/vue-flow'
-
-const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
-
-  { id: 'e1-2', source: '1', target: '2' },
-])
-
-const onConnect = (params) => {
-  addEdge(params, elements.value)
-}
-</script>
-<template>
-  <VueFlow v-model="elements" @connect="onConnect" />
-</template>
-```
-
-### [updateEdge](/typedocs/functions/updateEdge.html)
-
-::: warning
-In the composition API you use access [`updateEdge`](/typedocs/types/UpdateEdge.html)
-of [`useVueFlow`](/guide/composables.html#usevueflow/)
-:::
-
-- Details:
-
-  Updates an edge and applies new source/target.
-
-- Example:
-
-```vue{12}
-<script setup>
-import { VueFlow, updateEdge } from '@braks/vue-flow'
-
-const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
-
-  { id: 'e1-2', source: '1', target: '2' },
-])
-
-const onEdgeUpdate = ({ edge, connection }) => {
-  elements.value = updateEdge(edge, connection, elements.value)
-}
-</script>
-<template>
-  <VueFlow v-model="elements" @edge-update="onEdgeUpdate" />
-</template>
-```
-
-### [getOutgoers](/typedocs/functions/getOutgoers.html/)
-
-- Details:
-
-  Returns all target elements of a node.
-
-### [getIncomers](/typedocs/functions/getIncomers.html/)
-
-- Details:
-
-  Returns all source elements of a node.
-
-### [getConnectedEdges](/typedocs/functions/getConnectedEdges.html/)
-
-- Details:
-
-  Returns all connected edges of a node.
-
-### [getTransformForBounds](/typedocs/functions/getTransformForBounds.html/)
-
-- Details:
-
-  Returns a transformation for the viewport according to input bounds.
-
-### [getRectOfNodes](/typedocs/functions/getRectOfNodes.html/)
-
-- Details:
-
-  Returns a rect of node elements.
-
-  Useful when you need to know the boundaries of a set of nodes.
-
-### [getNodesInside](/typedocs/functions/getNodesInside.html/)
-
-- Details:
-
-  Returns node elements that are inside a specified rect.
-
-### [getMarkerId](/typedocs/functions/getMarkerId.html/)
-
-- Details:
-
-  Returns a marker id for a marker definition.
diff --git a/docs2/src/guide/utils/instance.md b/docs2/src/guide/utils/instance.md
deleted file mode 100644
index 7b0471c1..00000000
--- a/docs2/src/guide/utils/instance.md
+++ /dev/null
@@ -1,165 +0,0 @@
-# Viewport Functions
-
-::: warning
-The old `FlowInstance` has been removed and all it's functionalities merged into `useVueFlow`.
-:::
-
-Viewport Functions can be accessed via the [`useVueFlow`](/guide/composables.html#usevueflow)
-utility or with the [`VueFlowStore`](/typedocs/types/VueFlowStore.html/)
-instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents.html#paneready).
-
-<CodeGroup>
-  <CodeGroupItem title="Composition API" active>
-
-```vue
-<script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
-
-const { onPaneReady } = useVueFlow()
-
-// event handler
-onPaneReady((instance) => instance.fitView())
-</script>
-```
-
-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="Options API">
-
-```vue
-<script>
-import { VueFlow } from '@braks/vue-flow'
-
-export default defineComponent({
-  components: { VueFlow },
-  data() {
-    return {
-      instance: null,
-    }
-  },
-  methods: {
-    onPaneReady(vueFlowInstance) {
-      vueFlowInstance.fitView()
-      this.instance = vueFlowInstance
-    }
-  }
-})
-</script>
-<template>
-  <VueFlow @pane-ready="onPaneReady" />
-</template>
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-### [project](/typedocs/types/Project.html/)
-
-- Details:
-
-  Transforms pixel coordinates to the internal VueFlow coordinate system.
-
-  This can be used when you drag nodes (from a sidebar for example) and need the internal position on the pane.
-
-- Example:
-
-```ts
-vueFlowInstance.project({ x: 100, y: 100 })
-```
-
-### [fitView](/typedocs/types/FitView.html/)
-
-- Details:
-
-  Fits the view port so that all nodes are visible.
-
-  Padding is 0.1 and includeHiddenNodes is false by default.
-
-- Example:
-
-```ts
-vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
-```
-
-### [fitBounds](/typedocs/types/FitBounds.html/)
-
-- Details:
-
-  Fits the view port according to the bounds' rect input.
-
-- Example:
-
-```ts
-vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
-```
-
-### [setTransform](/typedocs/types/SetTransform.html/)
-
-- Details:
-
-  Sets position and zoom of the pane.
-
-- Example:
-
-```ts
-vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
-```
-
-### [getTransform](/typedocs/types/GetTransform.html/)
-
-- Details:
-
-  Gets position and zoom of the pane.
-
-### [zoomIn](/typedocs/types/ZoomInOut.html/)
-
-- Details:
-
-  Zooms in.
-
-### [zoomOut](/typedocs/types/ZoomInOut.html/)
-
-- Details:
-
-  Zooms out.
-
-### [zoomTo](/typedocs/types/ZoomTo.html/)
-
-- Details:
-
-  Zooms to specific level.
-
-### [getElements](/typedocs/interfaces/Getters.html#getelements)
-
-- Details:
-
-  Returns currently stored elements (nodes + edges).
-
-### [getNodes](/typedocs/interfaces/Getters.html#getnodes)
-
-- Details:
-
-  Returns currently stored nodes.
-
-### [getEdges](/typedocs/interfaces/Getters.html#getedges)
-
-- Details:
-
-  Returns currently stored edges.
-
-### [toObject](/typedocs/interfaces/Actions.html#toobject)
-
-- Details:
-
-  Returns elements, position and zoom of the current flow state.
-
-- Example:
-
-```ts
-toObject = (): {
-  elements: FlowElements,
-  position: [x, y],
-  zoom: scale,
-}
-```
diff --git a/docs2/src/guide/vue-flow/config.md b/docs2/src/guide/vue-flow/config.md
deleted file mode 100644
index 027426b8..00000000
--- a/docs2/src/guide/vue-flow/config.md
+++ /dev/null
@@ -1,824 +0,0 @@
-# Config (Props)
-
-Vue Flow allows you to configure zoom, graph and flow behavior.
-Configuration can be passed either as props to the `VueFlow` component or
-as options to the [`useVueFlow`](/guide/composables.html#usevueflow/) composable.
-
-<CodeGroup>
-  <CodeGroupItem title="Props" active>
-
-```vue
-<!-- Pass configuration as props -->
-<template>
-  <VueFlow :default-zoom="0.5" :max-zoom="4" :min-zoom="0.1" />
-</template>
-```
-
-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="Composable">
-
-```vue
-<script setup>
-import { useVueFlow  } from '@braks/vue-flow'
-
-useVueFlow({
-  defaultZoom: 0.5,
-  maxZoom: 4,
-  minZoom: 0.1,
-})
-</script>
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-## Updating Config
-
-You can update the configuration at any point, either by having them bound as props or using the state values returned
-by `useVueFlow`.
-
-<CodeGroup>
-  <CodeGroupItem title="Props" active>
-
-```vue{2,5-6,10}
-<script setup>
-const defaultZoom = ref(1)
-
-onMounted(() => {
-  // change the default zoom value of the state
-  defaultZoom.value = 1
-})
-</script>
-<template>
-  <VueFlow :default-zoom="defaultZoom" />
-</template>
-```
-
-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="Composable">
-
-```vue{2,7-8}
-<script setup>
-const { defaultZoom } = useVueFlow({
-  defaultZoom: 0.5,
-})
-
-onMounted(() => {
-  // change the default zoom value of the state
-  defaultZoom.value = 1
-})
-</script>
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-## Basic Options
-
-### id <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `string`
-
-- Details:
-
-  Unique id of Vue Flow.
-
-  It is used for the lookup and injection of the state instance.
-
-### modelValue <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: [`Elements`](/typedocs/types/Elements.html/)
-
-- Details:
-
-  An array of elements (nodes + edges).
-
-  Use either the modelValue prop or nodes/edges separately. __Do not mix them!__
-
-- Example:
-
-```vue
-<script setup>
-import { VueFlow } from '@braks/vue-flow'
-
-const elements = ref([
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
-  { id: 'e1-3', source: '1', target: '3' },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-])
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow v-model="elements" />
-  </div>
-</template>
-```
-
-### nodes <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: [`Node[]`](/typedocs/interfaces/Node.html/)
-
-- Details:
-
-  An array of nodes.
-
-  Use either the modelValue prop or nodes separately. __Do not mix them!__
-
-- Example:
-
-```vue
-<script setup>
-import { VueFlow } from '@braks/vue-flow'
-
-const nodes = ref([
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
-])
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow :nodes="nodes" />
-  </div>
-</template>
-```
-
-### edges <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: [`Edge[]`](/typedocs/interfaces/Edge.html/)
-
-- Details:
-
-  An array of edges.
-
-  Use either the modelValue prop or edges separately. __Do not mix them!__
-
-- Example:
-
-```vue
-<script setup>
-import { VueFlow } from '@braks/vue-flow'
-
-const nodes = ref([
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
-])
-
-const edges = ref([
-  { id: 'e1-3', source: '1', target: '3' },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-])
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow :nodes="nodes" :edges="edges" />
-  </div>
-</template>
-```
-
-### node-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: [`Record<string, NodeComponent>`](/typedocs/types/NodeComponent.html/)
-
-- Default: [`DefaultNodeTypes`](/typedocs/types/DefaultNodeTypes.html/)
-
-- Details:
-
-  An object mapping node-type names to component definitions/name.
-
-- Example:
-
-```vue
-<script setup>
-import { VueFlow } from '@braks/vue-flow'
-import CustomNode from './CustomNode.vue'
-
-const nodeTypes = {
-  custom: CustomNode,
-}
-
-const nodes = ref([
-  { id: '1', type: 'custom', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
-])
-
-const edges = ref([
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-])
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow :nodes="nodes" :edges="edges" :node-types="nodeTypes" />
-  </div>
-</template>
-```
-
-### edge-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: [`Record<string, EdgeComponent>`](/typedocs/types/EdgeComponent.html)
-
-- Default: [`DefaultEdgeTypes`](/typedocs/types/DefaultEdgeTypes.html)
-
-- Details:
-
-  An object mapping edge-type names to component definitions/name.
-
-- Example:
-
-```vue
-<script setup>
-import { VueFlow } from '@braks/vue-flow'
-import CustomEdge from './CustomEdge.vue'
-
-const edgeTypes = {
-  custom: CustomEdge,
-}
-
-const nodes = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
-])
-
-const edges = ref([
-  { id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true },
-])
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow :nodes="nodes" :edges="edges" :edge-types="edgeTypes" />
-  </div>
-</template>
-```
-
-### apply-default <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `true`
-
-- Details:
-
-  Enable/disable default state update handlers.
-
-  If you want to have full control of state changes, you can disable the default behavior and apply your own change
-  handlers to the state.
-
-- Example:
-
-```vue
-<script setup>
-import { VueFlow } from '@braks/vue-flow'
-
-const nodes = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
-])
-
-const edges = ref([
-  { id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true },
-])
-</script>
-<template>
-  <div style="height: 300px">
-    <VueFlow :nodes="nodes" :edges="edges" :apply-default="false" />
-  </div>
-</template>
-```
-
-### connection-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: [`ConnectionMode`](/typedocs/enums/ConnectionMode.html/)
-
-- Default: `ConnectionMode.Loose`
-
-- Details:
-
-  If set to `loose` all handles are treated as source handles (thus allowing for connections on target handles as well.)
-
-### connection-line-options
-
-- Type: [`ConnectionLineOptions`](/typedocs/interfaces/ConnectionLineOptions.html/)
-
-- Details:
-
-  Options for the connection line.
-  
-  The options include the connection line type, style and possible marker types (marker-end/marker-start).
-
-### connection-line-type <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> <Badge type="warning" class="text-white" style="line-height: inherit" text="deprecated" vertical="top" />
-
-- Type: [`ConnectionLineType`](/typedocs/enums/ConnectionLineType.html/)
-
-- Default: `ConnectionLineType.Bezier`
-
-- Details:
-
-  The path to use when drawing a connection-line (`bezier`, `step`, `smoothstep`).
-
-  When using a custom connection line this prop does nothing.
-
-### connection-line-style <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> <Badge type="warning" class="text-white" style="line-height: inherit" text="deprecated" vertical="top" />
-
-- Type: `CSSProperties` | `null`
-
-- Details:
-
-  Additional styles to add to the default connection-line.
-
-### fit-view-on-init <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `false`
-
-- Details:
-
-  Trigger fit view when viewport is mounted.
-
-## Viewport Options
-
-### zoom-activation-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `KeyCode`
-
-- Default: `Meta`
-
-- Details:
-
-  Define a key which can be used to activate zoom.
-
-  Overwrites zoom-on-scroll or pan-on-scroll behavior as long as the key is pressed.
-
-### zoom-on-scroll <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `true`
-
-- Details:
-
-  Whether to allow zooming in and out when scrolling inside the Vue Flow container.
-
-### zoom-on-pinch <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `true`
-
-- Details:
-
-  Whether to allow zooming in and out when pinching (touch or trackpad) inside the Vue Flow container.
-
-### zoom-on-double-click <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `true`
-
-- Details:
-
-  Whether to allow zooming in and out when double-clicking (or tapping) inside the Vue Flow container.
-
-### pan-on-scroll <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `false`
-
-- Details:
-
-  Whether to allow panning inside the Vue Flow container.
-
-  Does not work together with `zoom-on-scroll` but will work together with `zoom-activation-key-code`.
-
-### pan-on-scroll-speed <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `number`
-
-- Default: `0.5`
-
-### pan-on-scroll-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: [`PanOnScrollMode`](/typedocs/enums/PanOnScrollMode.html/)
-
-- Default: `PanOnScrollMode.Free`
-
-- Details:
-
-  Specify on which axis panning is allowed (x, y or both).
-
-### pan-on-drag <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Old name: `paneMovable`
-
-- Type: `boolean`
-
-- Default: `true`
-
-- Details:
-
-  Whether to allow moving the pane when dragging inside the Vue Flow container.
-
-### prevent-scrolling <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `true`
-
-- Details:
-
-  Enable this to prevent vue flow from scrolling inside its container, i.e. allow for the page to scroll.
-
-### no-wheel-class-name <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `string`
-
-- Default: `nowheel`
-
-- Details:
-
-  Set a class name which prevents elements from triggering wheel-scroll events (thus disabling zoom/pan-scroll behavior
-  on the element).
-
-  Useful if you want to allow for scrolling _inside_ a node
-
-### no-pan-class-name <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `string`
-
-- Default: `nopan`
-
-- Details:
-
-  Set a class name which prevents elements from triggering pan-scroll events.
-
-### min-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `number`
-
-- Default: `0.5`
-
-### max-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `number`
-
-- Default: `2`
-
-### default-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `number`
-
-- Default: `1`
-
-### default-position <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `[x: number, y: number]`
-
-- Default: `[0, 0]`
-
-- Details:
-
-  Default viewport position on initial load.
-
-### translate-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent.html/)
-
-- Default:
-
-```ts
-[
-  [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
-  [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
-]
-```
-
-- Details:
-
-  The area in which the viewport can be moved around.
-
-## Selection Options
-
-### selection-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `KeyCode`
-
-- Default: `Shift`
-
-- Details:
-
-  Define a key which can be used to activate the selection rect.
-
-### multi-selection-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `KeyCode`
-
-- Default: `Meta`
-
-- Details:
-
-  Define a key which can be used to activate multi-selection.
-
-  Multi-selection can be used to select multiple nodes with clicks.
-
-### delete-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `KeyCode`
-
-- Default: `Backspace`
-
-- Details:
-
-  Define a key which can be used to activate remove elements from the pane.
-
-## Global Node Options
-
-### nodes-draggable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `true`
-
-- Details:
-
-  Globally enable/disable dragging nodes.
-
-  Can be overwritten by setting `draggable` on a specific node element.
-
-- Example:
-
-```vue{5-6,10}
-<script setup>
-const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
-  
-  // This will overwrite the globally set option of nodes-draggable
-  { id: '2', draggable: true, label: 'Node 2', position: { x: 100, y: 100 } },
-])
-</script>
-<template>
-  <VueFlow :nodes-draggable="false" />
-</template>
-```
-
-### nodes-connectable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `true`
-
-- Details:
-
-  Globally enable/disable connecting nodes.
-
-  Can be overwritten by setting `connectable` on a specific node element.
-
-- Example:
-
-```vue{5-6,10}
-<script setup>
-const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
-  
-  // This will overwrite the globally set option of nodes-connectable
-  { id: '2', connectable: true, label: 'Node 2', position: { x: 100, y: 100 } },
-])
-</script>
-<template>
-  <VueFlow :nodes-connectable="false" />
-</template>
-```
-
-### nodes-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent.html/)
-
-- Default:
-
-```ts
-[
-  [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
-  [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
-]
-```
-
-- Details:
-
-  The area in which nodes can be moved around.
-
-  Can be overwritten by setting `extent` on a specific node element.
-
-- Example:
-
-```vue{5-6}
-<script setup>
-const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
-  
-  // This will overwrite the globally set option of node-extent
-  { id: '2', extent: [[-100, -100], [100, 100]], label: 'Node 2', position: { x: 100, y: 100 } },
-])
-</script>
-<template>
-  <VueFlow />
-</template>
-```
-
-### select-nodes-on-drag <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `true`
-
-### snap-to-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `false`
-
-- Details:
-
-  If enabled, nodes will be placed and moved in a grid-like fashion.
-
-### snap-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: [`SnapGrid`](/typedocs/types/SnapGrid.html)
-
-- Default: `[15, 15]`
-
-- Details:
-
-  If `snapToGrid` is enabled, nodes will be placed and moved in a grid-like fashion according to the `snapGrid` value.
-
-## Global Edge Options
-
-### edges-updatable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `true`
-
-- Details:
-
-  Globally enable/disable updating edges.
-
-  Can be overwritten by setting `updatable` on a specific edge element.
-
-- Example:
-
-```vue{7-8,12}
-<script setup>
-const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
-  
-  { id: 'e1-3', source: '1', target: '3' },
-  // Overwrites global edges-updatable config
-  { id: 'e1-2', updatable: true, source: '1', target: '2', animated: true },
-])
-</script>
-<template>
-  <VueFlow :edges-updatable="false" />
-</template>
-```
-
-### default-marker-color <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `string`
-
-- Default: `#b1b1b7`
-
-- Details:
-
-  The default color value which is used when presenting edge-markers (arrowheads).
-
-### edge-updater-radius <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `number`
-
-- Default: `10`
-
-- Details:
-
-  The radius at which an edge-updater can be triggered.
-
-### connect-on-click <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `true`
-
-- Details:
-
-  Allow edges to be created by clicking two handles in a row.
-
-  Useful if you want to enable creating edges on a touch device.
-
-### default-edge-options <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: [`DefaultEdgeOptions`]()
-
-- Details:
-
-  Default values when creating a new edge.
-
-  Does not work for the `addEdge` utility!
-
-### auto-connect <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean` | [`Connector`](/typedocs/types/Connector.html/)
-
-- Default: `false`
-
-- Details:
-
-  When connection is emitted, automatically create a new edge from params.
-
-  Also accepts a [`Connector`](/typedocs/types/Connector.html/) which returns an edge-like object or false (if creating
-  an edge is not allowed).
-
-  This option can be used as a shorthand for `onConnect((params) => addEdges([params]))`.
-
-#### Examples
-
-##### Boolean value
-
-```vue{2}
-<template>
-  <VueFlow v-model="elements" auto-connect />
-</template>
-```
-
-#### [Connector](/typedocs/types/Connector.html/)
-
-```vue{6-18,22}
-<script setup>
-import { ref } from 'vue'
-
-const elements = ref([/** elements omitted for simplicity */])
-
-const connector = (params) => {
-  if (params.source.id === params.target.id) {
-    return false
-  }
-  
-  return {
-    id: `edge-${params.source.id}-${params.target.id}`,
-    source: params.source.id,
-    target: params.target.id,
-    label: `Edge ${params.source.id}-${params.target.id}`,
-    animated: true,
-  }
-}
-</script>
-
-<template>
-  <VueFlow v-model="elements" :auto-connect="connector" />
-</template>
-```
-
-### elevate-edges-on-select <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `false`
-
-- Details:
-
-  When enabled, edges will be grouped by z-index and elevated when the nodes they connect to are selected.
-
-  This is useful if you want to show the edges on top of the nodes.
-
-  By default, edges have a z-index of 0.
-
-## Global Element Options
-
-### only-render-visible-elements <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `false`
-
-- Details:
-
-  Skip rendering elements that are not visible currently (either hidden or outside the current pane dimensions).
-
-### elements-selectable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
-
-- Type: `boolean`
-
-- Default: `true`
-
-- Details:
-
-  Enable/disable selecting elements. This will also disable pointer-events in general.
diff --git a/docs2/src/guide/vue-flow/slots.md b/docs2/src/guide/vue-flow/slots.md
deleted file mode 100644
index cbc8657a..00000000
--- a/docs2/src/guide/vue-flow/slots.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# Slots
-
-Vue Flow provides several slots for customization.
-In addition to the node and edge slots (see the guide on [nodes](/guide/node.html) and [edges](/guide/edge.html)),
-there are a number of other slots you can use to customize the visualization.
-
-## Default
-
-The default slot can be used to nest elements inside the Vue Flow wrapper `<div>`.
-It will not be rendered inside the viewport, meaning it will not receive a transformation for scale or positioning.
-You can use the default slot to add a sidebar or floating toolbar etc. to your graph.
-
-## Connection Line
-
-The connection line slot allows you to pass down a custom connection line component, which will be used, when a connection
-is triggered.
-
-```vue
-<template>
-  <VueFlow>
-    <template #connection-line="connectionLineProps">
-      <CustomConnectionLine v-bind="connectionLineProps" />
-    </template>
-  </VueFlow>
-</template>
-```
-
-The full description of connection line props can be found [here](/typedocs/interfaces/ConnectionLineProps.html/).
-
-## Zoom Pane
-
-The zoom pane slot is placed inside the viewport transformation, so that it scales and moves with the current viewport zoom and position.
-
-```vue
-<template>
-  <VueFlow>
-    <template #zoom-pane>
-      <div>Some element inside the zoom pane</div>
-    </template>
-  </VueFlow>
-</template>
-```
diff --git a/docs2/src/guide/vue-flow/state.md b/docs2/src/guide/vue-flow/state.md
deleted file mode 100644
index 0fc7fed2..00000000
--- a/docs2/src/guide/vue-flow/state.md
+++ /dev/null
@@ -1,157 +0,0 @@
-# State
-
-Under the hood Vue Flow uses [Provide/Inject](https://v3.vuejs.org/guide/component-provide-inject.html)
-to pass around it's state between components.
-You can access the internal state through the [`useVueFlow`](/guide/composables.html#usevueflow/) composable.
-
-[`useVueFlow`](/guide/composables.html#usevueflow/) can be used to either create a new state instance and inject it into
-the current component tree or inject
-an already existing store from the current context.
-Internal state can be manipulated, for example by adding new elements to the state. The
-state is reactive and changes will be reflected on the graph.
-
-```vue{4-6}
-<script setup>
-import { useVueFlow } from '@braks/vue-flow'
-
-const { getNodes, onPaneReady } = useVueFlow({
-  ... // you can pass any VueFlowProp to the composable as a static option
-})
-
-// event handler
-onPaneReady((i) => i.fitView())
-
-// watch the stored nodes
-watch(getNodes, (nodes) => console.log('nodes changed', nodes))
-</script>
-```
-
-## Accessing Internal State
-
-Using the composition API also allows us to pass the state around outside the current component context, thus we have a
-lot more flexibility when it comes
-to reading, writing and updating the state.
-
-Consider this example, where we want to create a Sidebar that allows us to select all nodes.
-
-```vue
-<!-- Container.vue -->
-<template>
-  <div>
-    <Sidebar />
-    <div class="wrapper">
-      <VueFlow v-model="elements" />
-    </div>
-  </div>
-</template>
-```
-
-We could pass all necessary info as props to the Sidebar, which could become either tedious or result in prop drilling,
-which we want to avoid.
-In this example it wouldn't be a big issue but if our destination was 3 components deep, it would become hard to track
-the flow of information.
-
-Instead, we can initialize a Vue Flow store instance __before__ the Sidebar is initialized, thus the instance becomes
-available as an injection in the component tree.
-
-```vue{5-6}
-<script>
-// Container.vue
-import { useVueFlow  } from '@braks/vue-flow'
-
-// initialize a store instance in this context, so it is available when calling inject(VueFlow)
-useVueFlow()
-</script>
-```
-
-Now we can easily access our current state instance from our Sidebar without passing them as props.
-
-```vue
-<script setup>
-import { useVueFlow } from '@braks/vue-flow'
-
-const { nodesSelectionActive, addSelectedNodes, getNodes } = useVueFlow()
-
-const selectAll = () => {
-  addSelectedNodes(getNodes.value)
-  nodesSelectionActive.value = true
-}
-</script>
-<template>
-  <aside>
-    <div class="description">
-      This is an example of how you can access the internal state outside of the Vue VueFlow component.
-    </div>
-    <div class="selectall">
-      <button @click="selectAll">select all nodes</button>
-    </div>
-  </aside>
-</template>
-```
-
-::: tip
-If you have multiple store instances in the same context, make sure to give them a unique id in order to guarantee
-access to the correct instance.
-Otherwise `useVueFlow` will try to inject the first instance it can find in the current context, which would usually be
-the last one that has been injected.
-:::
-
-## State Updates
-
-State updates like removing elements or updating positions are applied by default.
-If you want to strictly control state changes you can disable this behavior by setting the `applyDefault` option/prop
-to `false`.
-
-```vue
-<div style="height: 300px">
-  <VueFlow v-model="elements" :apply-default="false" />
-</div>
-```
-
-State changes are emitted by the `onNodesChange` or `onEdgesChange` events, which will provide an array of changes that
-have been triggered.
-To take control of state changes you can implement your own state update handlers or use the state helper functions that
-come with the library to mix it up.
-
-## Access State in Options API
-
-`useVueFlow` was designed to be used in the composition API, __but__ it is still possible to use it in the options API.
-Though it is necessary to pass a unique id for your Vue Flow state instance, otherwise a look-up will fail and Vue Flow
-will create a new state instance
-when mounted.
-
-```vue{4,32}
-<script>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
-
-const { addEdges, onConnect } = useVueFlow({ id: 'options-api' })
-export default defineComponent({
-  components: { VueFlow },
-  data() {
-    return {
-      elements: [
-        {
-          id: '1',
-          label: 'Node 1',
-          position: { x: 0, y: 0},
-        }
-      ]
-    }
-  },
-  methods: {
-    // regular event handler
-    handleConnect: (params) => {
-      addEdges([params])
-    }
-  },
-  beforeMount() {
-    // Register your event handler, can technically be called in any lifecycle phase
-    // Skip this if you're using regular event handlers
-    onConnect((params) => addEdges([params]))
-  }
-})
-</script>
-<template>
-  <VueFlow v-model="elements" id="options-api" @connect="handleConnect" />
-</template>
-```
diff --git a/docs2/src/index.md b/docs2/src/index.md
deleted file mode 100644
index 38171587..00000000
--- a/docs2/src/index.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-layout: home
-heroText: null
-tagline: null
----
-
-<Home />
-
-<Suspense>
-  <Banner />
-</Suspense>
-
-<Features />
-
-<XyzTransition appear-visible xyz="fade down ease-out-back">
-    <Acknowledgement />
-</XyzTransition>
-
-<XyzTransition appear-visible xyz="fade down ease-out-back">
-    <Team />
-</XyzTransition>
diff --git a/docs2/src/public/favicons/android-chrome-192x192.png b/docs2/src/public/favicons/android-chrome-192x192.png
deleted file mode 100644
index c4369d04..00000000
Binary files a/docs2/src/public/favicons/android-chrome-192x192.png and /dev/null differ
diff --git a/docs2/src/public/favicons/android-chrome-512x512.png b/docs2/src/public/favicons/android-chrome-512x512.png
deleted file mode 100644
index cc2b110c..00000000
Binary files a/docs2/src/public/favicons/android-chrome-512x512.png and /dev/null differ
diff --git a/docs2/src/public/favicons/apple-touch-icon.png b/docs2/src/public/favicons/apple-touch-icon.png
deleted file mode 100644
index 55ae7caa..00000000
Binary files a/docs2/src/public/favicons/apple-touch-icon.png and /dev/null differ
diff --git a/docs2/src/public/favicons/favicon-16x16.png b/docs2/src/public/favicons/favicon-16x16.png
deleted file mode 100644
index 81c77d02..00000000
Binary files a/docs2/src/public/favicons/favicon-16x16.png and /dev/null differ
diff --git a/docs2/src/public/favicons/favicon-32x32.png b/docs2/src/public/favicons/favicon-32x32.png
deleted file mode 100644
index cf622306..00000000
Binary files a/docs2/src/public/favicons/favicon-32x32.png and /dev/null differ
diff --git a/docs2/src/public/favicons/favicon.ico b/docs2/src/public/favicons/favicon.ico
deleted file mode 100644
index 6bbbf34a..00000000
Binary files a/docs2/src/public/favicons/favicon.ico and /dev/null differ
diff --git a/docs2/src/public/favicons/site.webmanifest b/docs2/src/public/favicons/site.webmanifest
deleted file mode 100644
index 8a2a5ca3..00000000
--- a/docs2/src/public/favicons/site.webmanifest
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "name": "VueFlow",
-  "short_name": "VueFlow",
-  "description": "Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.",
-  "start_url": "/index.html",
-  "theme_color": "#10b981",
-  "background_color": "#ffffff",
-  "display": "standalone",
-  "icons": [
-    {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-}
diff --git a/docs2/tsconfig.json b/docs2/tsconfig.json
deleted file mode 100644
index 2a501060..00000000
--- a/docs2/tsconfig.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "module": "ESNext",
-    "target": "es2017",
-    "lib": ["DOM", "ESNext"],
-    "noEmit": true,
-    "declaration": false,
-    "strict": true,
-    "esModuleInterop": true,
-    "incremental": false,
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "noUnusedLocals": false,
-    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
-    "types": ["vite/client", "@types/node", "unplugin-icons/types/vue"]
-  },
-  "exclude": ["node_modules", "dist"]
-}
diff --git a/docs2/typedoc.json b/docs2/typedoc.json
deleted file mode 100644
index a377fec6..00000000
--- a/docs2/typedoc.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "$schema": "https://typedoc.org/schema.json",
-  "readme": "none",
-  "plugin": "typedoc-plugin-markdown",
-  "entryPoints": ["../packages/vue-flow/src/index.ts"],
-  "allReflectionsHaveOwnDocument": true,
-  "categorizeByGroup": true,
-  "darkHighlightTheme": "vitesse-dark",
-  "lightHighlightTheme": "vitesse-light",
-  "disableSources": true,
-  "out": "src/typedocs",
-  "tsconfig": "../packages/vue-flow/tsconfig.docs.json",
-  "entryDocument": "index.md"
-}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index b3c03aac..a6563739 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,4 +3,3 @@ packages:
   - examples/*
   - e2e
   - docs
-  - docs2