diff --git a/README.md b/README.md
index b0667fe..4ffbfa5 100644
--- a/README.md
+++ b/README.md
@@ -208,6 +208,10 @@ slVueTree.traverse((node, nodeModel, path) => {
 [see CONTRIBUTING.md](CONTRIBUTING.md)
 
 # Changelog
+v0.0.8
+- update demos
+- 
+
 v0.0.7
   - add support for generics
 
diff --git a/demo/dark-theme.html b/demo/dark-theme.html
index e1f1c6b..2b04c31 100644
--- a/demo/dark-theme.html
+++ b/demo/dark-theme.html
@@ -5,12 +5,11 @@
         <title>sl-vue-tree-next</title>
         <link rel="stylesheet" href="../dist/sl-vue-tree-next-dark.css" />
         <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
-        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
-        <script src="../dist/sl-vue-tree-next.js"></script>
+        <script src="https://unpkg.com/vue@3.4.18/dist/vue.global.js"></script>
     </head>
     <body>
         <div id="app" @click="contextMenuIsVisible = false">
-            <h2>sl-vue-tree-next - custom dark theme and events handlers</h2>
+            <h2>Sl-vue-tree-next - custom dark theme and events handlers</h2>
 
             <a href="./dark-theme.html" target="_blank">Source code</a>
             <br /><br />
@@ -56,6 +55,7 @@ <h2>sl-vue-tree-next - custom dark theme and events handlers</h2>
                 </div>
 
                 <div class="json-preview">
+                    <h2>JSON Preview</h2>
                     <pre>{{ JSON.stringify(nodes, null, 4)}}</pre>
                 </div>
 
@@ -65,7 +65,9 @@ <h2>sl-vue-tree-next - custom dark theme and events handlers</h2>
             </div>
         </div>
 
-        <script>
+        <script type="module">
+            import { SlVueTreeNext } from '../public/sl-vue-tree-next.global.js'
+
             var nodes = [
                 { title: 'Item1', isLeaf: true },
                 { title: 'Item2', isLeaf: true, data: { visible: false } },
@@ -99,9 +101,8 @@ <h2>sl-vue-tree-next - custom dark theme and events handlers</h2>
                 },
             ]
 
-            new Vue({
-                el: '#app',
-                components: { SlVueTree },
+            Vue.createApp({
+                components: { SlVueTreeNext },
                 data: function () {
                     return {
                         nodes: nodes,
@@ -153,7 +154,7 @@ <h2>sl-vue-tree-next - custom dark theme and events handlers</h2>
                         $slVueTree.remove(paths)
                     },
                 },
-            })
+            }).mount('#app')
         </script>
 
         <style>
diff --git a/demo/externaldrag.html b/demo/externaldrag.html
index fd2fe1c..e981cad 100644
--- a/demo/externaldrag.html
+++ b/demo/externaldrag.html
@@ -5,8 +5,7 @@
         <title>sl-vue-tree-next</title>
         <link rel="stylesheet" href="../dist/sl-vue-tree-next-dark.css" />
         <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
-        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
-        <script src="../dist/sl-vue-tree-next.js"></script>
+        <script src="https://unpkg.com/vue@3.4.18/dist/vue.global.js"></script>
     </head>
     <body>
         <div id="app">
@@ -54,7 +53,9 @@ <h2>sl-vue-tree-next - drag external elements</h2>
             </div>
         </div>
 
-        <script>
+        <script type="module">
+            import { SlVueTreeNext } from '../public/sl-vue-tree-next.global.js'
+
             var nodes = [
                 { title: 'Item1', isLeaf: true },
                 { title: 'Item2', isLeaf: true },
@@ -73,9 +74,8 @@ <h2>sl-vue-tree-next - drag external elements</h2>
                 { title: 'Item6', isLeaf: true },
             ]
 
-            new Vue({
-                el: '#app',
-                components: { SlVueTree },
+            Vue.createApp({
+                components: { SlVueTreeNext },
                 data: function () {
                     return {
                         nodes: nodes,
@@ -93,7 +93,7 @@ <h2>sl-vue-tree-next - drag external elements</h2>
                         console.log('external drop', cursorPosition)
                     },
                 },
-            })
+            }).mount('#app')
         </script>
 
         <style>
diff --git a/demo/index.html b/demo/index.html
index db1e330..a4bd72d 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,14 +1,148 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>sl-vue-tree-next</title>
-</head>
-<body>
+    <head>
+        <meta charset="UTF-8" />
+        <title>sl-vue-tree-next</title>
+    </head>
+    <body>
+        <div class="tabs">
+            <!-- tab 1 -->
+            <input class="radiotab" name="tabs" tabindex="1" type="radio" id="tabone" checked="checked" />
+            <label class="label" for="tabone">Minimal Theme</label>
+            <div class="panel" tabindex="1">
+                <iframe src="minimal-theme.html" frameborder="0" width="100%" height="1400px"></iframe>
+            </div>
 
-<iframe src="dark-theme.html" frameborder="0" width="100%" height="1400px"></iframe>
-<iframe src="minimal-theme.html" frameborder="0" width="100%" height="1400px"></iframe>
+            <!-- tab 2 -->
+            <input class="radiotab" tabindex="1" name="tabs" type="radio" id="tabtwo" />
+            <label class="label" for="tabtwo">Dark Theme</label>
+            <div class="panel" tabindex="1">
+                <iframe src="dark-theme.html" frameborder="0" width="100%" height="1400px"></iframe>
+            </div>
 
+            <!-- tab 3 -->
+            <input class="radiotab" tabindex="1" name="tabs" type="radio" id="tabthree" />
+            <label class="label" for="tabthree">External Drag</label>
+            <div class="panel" tabindex="1">
+                <iframe src="externaldrag.html" frameborder="0" width="100%" height="1400px"></iframe>
+            </div>
 
-</body>
+            <!-- tab 4 -->
+            <input class="radiotab" tabindex="1" name="tabs" type="radio" id="tabfour" />
+            <label class="label" for="tabfour">Keyboard Control</label>
+            <div class="panel" tabindex="1">
+                <iframe src="keyboardcontrol.html" frameborder="0" width="100%" height="1400px"></iframe>
+            </div>
+        </div>
+    </body>
+
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+
+        *:focus,
+        input:focus + label {
+            outline: none;
+            box-shadow: inset 0 0 0 5px lightBlue;
+        }
+
+        body {
+            padding: 30px 20px;
+            background: #fff;
+            color: #333;
+        }
+
+        main {
+            max-width: 801px;
+            margin: auto;
+        }
+
+        h1 {
+            text-align: center;
+            margin-top: 0;
+        }
+
+        h2 {
+            margin: 0 0 12px;
+            font-size: 30px;
+        }
+
+        p {
+            margin: 0 0 20px;
+            font-size: 20px;
+            line-height: 1.5;
+        }
+
+        .tabs {
+            display: flex;
+            flex-wrap: wrap;
+            margin: 0 auto 20px;
+            border-radius: 10px 10px 0 0;
+        }
+
+        .radiotab {
+            position: absolute;
+            opacity: 0;
+        }
+
+        .label {
+            width: 100%;
+            padding: 22px 20px;
+            background: #e5e5e5;
+            cursor: pointer;
+            font-weight: bold;
+            font-size: 23px;
+            color: #7f7f7f;
+            transition:
+                background 0.3s,
+                color 0.3s;
+            border: none;
+            border-radius: 0;
+            text-align: center;
+        }
+
+        .label:hover {
+            background: #d8d8d8;
+        }
+
+        .label:active {
+            background: #ccc;
+        }
+
+        .radiotab:checked + .label {
+            background: #fff;
+            color: #000;
+            border-top: solid 2px #000;
+            border-left: solid 2px #000;
+            border-right: solid 2px #000;
+            border-bottom: none;
+        }
+
+        .panel {
+            display: none;
+            padding: 20px 30px 30px;
+            background: #fff;
+            width: 100%;
+            border-left: solid 2px #000;
+            border-bottom: solid 2px #000;
+            border-right: solid 2px #000;
+        }
+
+        .radiotab:checked + .label + .panel {
+            display: block;
+        }
+
+        @media (min-width: 600px) {
+            .panel {
+                order: 99;
+            }
+
+            .label {
+                width: 25%;
+                border-radius: 10px 10px 0 0;
+                border-bottom: solid 2px #000;
+            }
+        }
+    </style>
 </html>
diff --git a/demo/keyboardcontrol.html b/demo/keyboardcontrol.html
index bbd16b4..528cafe 100644
--- a/demo/keyboardcontrol.html
+++ b/demo/keyboardcontrol.html
@@ -5,8 +5,7 @@
         <title>sl-vue-tree-next</title>
         <link rel="stylesheet" href="../dist/sl-vue-tree-next-dark.css" />
         <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
-        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
-        <script src="../dist/sl-vue-tree-next.js"></script>
+        <script src="https://unpkg.com/vue@3.4.18/dist/vue.global.js"></script>
     </head>
     <body>
         <div id="app">
@@ -42,7 +41,8 @@ <h2>Sl-vue-tree-next - Press Up and Down to move selection, Space and Enter to e
             </div>
         </div>
 
-        <script>
+        <script type="module">
+            import { SlVueTreeNext } from '../public/sl-vue-tree-next.global.js'
             var nodes = [
                 { title: 'Item1', isLeaf: true },
                 { title: 'Item2', isLeaf: true },
@@ -61,9 +61,8 @@ <h2>Sl-vue-tree-next - Press Up and Down to move selection, Space and Enter to e
                 { title: 'Item6', isLeaf: true },
             ]
 
-            new Vue({
-                el: '#app',
-                components: { SlVueTree },
+            Vue.createApp({
+                components: { SlVueTreeNext },
                 data: function () {
                     return {
                         nodes: nodes,
@@ -107,7 +106,7 @@ <h2>Sl-vue-tree-next - Press Up and Down to move selection, Space and Enter to e
                         }
                     },
                 },
-            })
+            }).mount('#app')
         </script>
 
         <style>
diff --git a/demo/minimal-theme.html b/demo/minimal-theme.html
index 892caf2..af5a4a5 100644
--- a/demo/minimal-theme.html
+++ b/demo/minimal-theme.html
@@ -2,11 +2,10 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <title>sl-vue-tree-next</title>
+        <title>sl-vue-tree</title>
         <link rel="stylesheet" href="../dist/sl-vue-tree-next-minimal.css" />
         <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
         <script src="https://unpkg.com/vue@3.4.18/dist/vue.global.js"></script>
-        <script src="https://www.unpkg.com/sl-vue-tree-next@0.0.8/dist/sl-vue-tree-next.umd.cjs" type="module"></script>
     </head>
     <body>
         <div id="app">
@@ -16,7 +15,7 @@ <h2>Sl-vue-tree-next - minimal css</h2>
 
             <div class="row">
                 <div class="tree-container">
-                    <sl-vue-tree-next v-model="nodes" :show-branches="true" />
+                    <sl-vue-tree-next v-model="nodes" :show-branches="true"></sl-vue-tree-next>
                 </div>
 
                 <div class="json-preview">
@@ -26,6 +25,8 @@ <h2>Sl-vue-tree-next - minimal css</h2>
         </div>
 
         <script type="module">
+            import { SlVueTreeNext } from '../public/sl-vue-tree-next.global.js'
+
             var nodes = [
                 { title: 'Item1', isLeaf: true },
                 { title: 'Item2', isLeaf: true, data: { visible: false } },
@@ -59,31 +60,20 @@ <h2>Sl-vue-tree-next - minimal css</h2>
                 },
             ]
 
-            const { createApp } = Vue
-
-            const app = createApp({
-                components: {
-                    SlVueTreeNext
-                },
-                setup() {
+            Vue.createApp({
+                components: { SlVueTreeNext },
+                data: function () {
                     return {
-                        nodes,
+                        nodes: nodes,
+                        lastEvent: 'No last event',
                     }
                 },
-            })
-
-            app.mount('#app')
+            }).mount('#app')
         </script>
 
         <style>
             body {
-                background: #050d12;
                 font-family: Arial;
-                color: rgba(255, 255, 255, 0.5);
-            }
-
-            a {
-                color: #bbb;
             }
 
             .row {
@@ -98,7 +88,6 @@ <h2>Sl-vue-tree-next - minimal css</h2>
             .json-preview {
                 flex-grow: 1;
                 margin-left: 10px;
-                background-color: #13242d;
                 border: 1px solid black;
                 padding: 10px;
             }
diff --git a/package.json b/package.json
index 247b1d5..9398c03 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
         "typescript": "^5.3.3",
         "vite": "^5.0.12",
         "vite-plugin-dts": "^3.7.2",
+        "vite-plugin-externals": "^0.6.2",
         "vue": "^3.4.18"
     }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ddce64..e73a6e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ devDependencies:
   vite-plugin-dts:
     specifier: ^3.7.2
     version: 3.7.2(typescript@5.3.3)(vite@5.1.1)
+  vite-plugin-externals:
+    specifier: ^0.6.2
+    version: 0.6.2(vite@5.1.1)
   vue:
     specifier: ^3.4.18
     version: 3.4.18(typescript@5.3.3)
@@ -413,104 +416,104 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@rollup/rollup-android-arm-eabi@4.9.6:
-    resolution: {integrity: sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==}
+  /@rollup/rollup-android-arm-eabi@4.10.0:
+    resolution: {integrity: sha512-/MeDQmcD96nVoRumKUljsYOLqfv1YFJps+0pTrb2Z9Nl/w5qNUysMaWQsrd1mvAlNT4yza1iVyIu4Q4AgF6V3A==}
     cpu: [arm]
     os: [android]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-android-arm64@4.9.6:
-    resolution: {integrity: sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==}
+  /@rollup/rollup-android-arm64@4.10.0:
+    resolution: {integrity: sha512-lvu0jK97mZDJdpZKDnZI93I0Om8lSDaiPx3OiCk0RXn3E8CMPJNS/wxjAvSJJzhhZpfjXsjLWL8LnS6qET4VNQ==}
     cpu: [arm64]
     os: [android]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-darwin-arm64@4.9.6:
-    resolution: {integrity: sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==}
+  /@rollup/rollup-darwin-arm64@4.10.0:
+    resolution: {integrity: sha512-uFpayx8I8tyOvDkD7X6n0PriDRWxcqEjqgtlxnUA/G9oS93ur9aZ8c8BEpzFmsed1TH5WZNG5IONB8IiW90TQg==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-darwin-x64@4.9.6:
-    resolution: {integrity: sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==}
+  /@rollup/rollup-darwin-x64@4.10.0:
+    resolution: {integrity: sha512-nIdCX03qFKoR/MwQegQBK+qZoSpO3LESurVAC6s6jazLA1Mpmgzo3Nj3H1vydXp/JM29bkCiuF7tDuToj4+U9Q==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm-gnueabihf@4.9.6:
-    resolution: {integrity: sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==}
+  /@rollup/rollup-linux-arm-gnueabihf@4.10.0:
+    resolution: {integrity: sha512-Fz7a+y5sYhYZMQFRkOyCs4PLhICAnxRX/GnWYReaAoruUzuRtcf+Qnw+T0CoAWbHCuz2gBUwmWnUgQ67fb3FYw==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm64-gnu@4.9.6:
-    resolution: {integrity: sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==}
+  /@rollup/rollup-linux-arm64-gnu@4.10.0:
+    resolution: {integrity: sha512-yPtF9jIix88orwfTi0lJiqINnlWo6p93MtZEoaehZnmCzEmLL0eqjA3eGVeyQhMtxdV+Mlsgfwhh0+M/k1/V7Q==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm64-musl@4.9.6:
-    resolution: {integrity: sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==}
+  /@rollup/rollup-linux-arm64-musl@4.10.0:
+    resolution: {integrity: sha512-9GW9yA30ib+vfFiwjX+N7PnjTnCMiUffhWj4vkG4ukYv1kJ4T9gHNg8zw+ChsOccM27G9yXrEtMScf1LaCuoWQ==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-riscv64-gnu@4.9.6:
-    resolution: {integrity: sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==}
+  /@rollup/rollup-linux-riscv64-gnu@4.10.0:
+    resolution: {integrity: sha512-X1ES+V4bMq2ws5fF4zHornxebNxMXye0ZZjUrzOrf7UMx1d6wMQtfcchZ8SqUnQPPHdOyOLW6fTcUiFgHFadRA==}
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-x64-gnu@4.9.6:
-    resolution: {integrity: sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==}
+  /@rollup/rollup-linux-x64-gnu@4.10.0:
+    resolution: {integrity: sha512-w/5OpT2EnI/Xvypw4FIhV34jmNqU5PZjZue2l2Y3ty1Ootm3SqhI+AmfhlUYGBTd9JnpneZCDnt3uNOiOBkMyw==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-x64-musl@4.9.6:
-    resolution: {integrity: sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==}
+  /@rollup/rollup-linux-x64-musl@4.10.0:
+    resolution: {integrity: sha512-q/meftEe3QlwQiGYxD9rWwB21DoKQ9Q8wA40of/of6yGHhZuGfZO0c3WYkN9dNlopHlNT3mf5BPsUSxoPuVQaw==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-win32-arm64-msvc@4.9.6:
-    resolution: {integrity: sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==}
+  /@rollup/rollup-win32-arm64-msvc@4.10.0:
+    resolution: {integrity: sha512-NrR6667wlUfP0BHaEIKgYM/2va+Oj+RjZSASbBMnszM9k+1AmliRjHc3lJIiOehtSSjqYiO7R6KLNrWOX+YNSQ==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-win32-ia32-msvc@4.9.6:
-    resolution: {integrity: sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==}
+  /@rollup/rollup-win32-ia32-msvc@4.10.0:
+    resolution: {integrity: sha512-FV0Tpt84LPYDduIDcXvEC7HKtyXxdvhdAOvOeWMWbQNulxViH2O07QXkT/FffX4FqEI02jEbCJbr+YcuKdyyMg==}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-win32-x64-msvc@4.9.6:
-    resolution: {integrity: sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==}
+  /@rollup/rollup-win32-x64-msvc@4.10.0:
+    resolution: {integrity: sha512-OZoJd+o5TaTSQeFFQ6WjFCiltiYVjIdsXxwu/XZ8qRpsvMQr4UsVrE5UyT9RIvsnuF47DqkJKhhVZ2Q9YW9IpQ==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
@@ -846,6 +849,10 @@ packages:
     engines: {node: '>=0.12'}
     dev: true
 
+  /es-module-lexer@0.4.1:
+    resolution: {integrity: sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==}
+    dev: true
+
   /esbuild@0.19.12:
     resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==}
     engines: {node: '>=12'}
@@ -1052,6 +1059,15 @@ packages:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
     dev: true
 
+  /fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+    dev: true
+
   /fs-extra@7.0.1:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
@@ -1217,6 +1233,14 @@ packages:
       graceful-fs: 4.2.11
     dev: true
 
+  /jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    dev: true
+
   /keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
     dependencies:
@@ -1265,6 +1289,12 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /magic-string@0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: true
+
   /magic-string@0.30.7:
     resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==}
     engines: {node: '>=12'}
@@ -1450,26 +1480,26 @@ packages:
       glob: 7.2.3
     dev: true
 
-  /rollup@4.9.6:
-    resolution: {integrity: sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==}
+  /rollup@4.10.0:
+    resolution: {integrity: sha512-t2v9G2AKxcQ8yrG+WGxctBes1AomT0M4ND7jTFBCVPXQ/WFTvNSefIrNSmLKhIKBrvN8SG+CZslimJcT3W2u2g==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
     dependencies:
       '@types/estree': 1.0.5
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.9.6
-      '@rollup/rollup-android-arm64': 4.9.6
-      '@rollup/rollup-darwin-arm64': 4.9.6
-      '@rollup/rollup-darwin-x64': 4.9.6
-      '@rollup/rollup-linux-arm-gnueabihf': 4.9.6
-      '@rollup/rollup-linux-arm64-gnu': 4.9.6
-      '@rollup/rollup-linux-arm64-musl': 4.9.6
-      '@rollup/rollup-linux-riscv64-gnu': 4.9.6
-      '@rollup/rollup-linux-x64-gnu': 4.9.6
-      '@rollup/rollup-linux-x64-musl': 4.9.6
-      '@rollup/rollup-win32-arm64-msvc': 4.9.6
-      '@rollup/rollup-win32-ia32-msvc': 4.9.6
-      '@rollup/rollup-win32-x64-msvc': 4.9.6
+      '@rollup/rollup-android-arm-eabi': 4.10.0
+      '@rollup/rollup-android-arm64': 4.10.0
+      '@rollup/rollup-darwin-arm64': 4.10.0
+      '@rollup/rollup-darwin-x64': 4.10.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.10.0
+      '@rollup/rollup-linux-arm64-gnu': 4.10.0
+      '@rollup/rollup-linux-arm64-musl': 4.10.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.10.0
+      '@rollup/rollup-linux-x64-gnu': 4.10.0
+      '@rollup/rollup-linux-x64-musl': 4.10.0
+      '@rollup/rollup-win32-arm64-msvc': 4.10.0
+      '@rollup/rollup-win32-ia32-msvc': 4.10.0
+      '@rollup/rollup-win32-x64-msvc': 4.10.0
       fsevents: 2.3.3
     dev: true
 
@@ -1517,6 +1547,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /sourcemap-codec@1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
+    dev: true
+
   /sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
     dev: true
@@ -1582,6 +1617,11 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: true
 
+  /universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+    dev: true
+
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
@@ -1621,6 +1661,19 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-externals@0.6.2(vite@5.1.1):
+    resolution: {integrity: sha512-R5oVY8xDJjLXLTs2XDYzvYbc/RTZuIwOx2xcFbYf+/VXB6eJuatDgt8jzQ7kZ+IrgwQhe6tU8U2fTyy72C25CQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: '>=2.0.0'
+    dependencies:
+      acorn: 8.11.3
+      es-module-lexer: 0.4.1
+      fs-extra: 10.1.0
+      magic-string: 0.25.9
+      vite: 5.1.1
+    dev: true
+
   /vite@5.1.1:
     resolution: {integrity: sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -1651,7 +1704,7 @@ packages:
     dependencies:
       esbuild: 0.19.12
       postcss: 8.4.35
-      rollup: 4.9.6
+      rollup: 4.10.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
diff --git a/public/sl-vue-tree-next.global.js b/public/sl-vue-tree-next.global.js
new file mode 100644
index 0000000..c7d20d2
--- /dev/null
+++ b/public/sl-vue-tree-next.global.js
@@ -0,0 +1,503 @@
+const Me = window.Vue.defineComponent, xe = window.Vue.renderList, ye = window.Vue.Fragment, m = window.Vue.openBlock, N = window.Vue.createElementBlock, Z = window.Vue.withModifiers, be = window.Vue.normalizeStyle, p = window.Vue.createElementVNode, C = window.Vue.renderSlot, y = window.Vue.toDisplayString, b = window.Vue.createCommentVNode, ee = window.Vue.createTextVNode, te = window.Vue.normalizeClass, Ue = window.Vue.resolveComponent, je = window.Vue.withCtx, qe = window.Vue.createBlock, We = window.Vue.vShow, Ge = window.Vue.withDirectives, Qe = {
+  ref: "nodes",
+  class: "sl-vue-tree-next-nodes-list"
+}, Ze = ["onMousedown", "onMouseup", "onContextmenu", "onDblclick", "onClick", "onDragover", "onDrop", "path"], et = { class: "sl-vue-tree-next-gap" }, tt = {
+  key: 0,
+  class: "sl-vue-tree-next-branch"
+}, ot = { key: 0 }, nt = { key: 1 }, lt = { class: "sl-vue-tree-next-title" }, st = ["onClick"], rt = { class: "sl-vue-tree-next-sidebar" }, it = {
+  slot: "title",
+  "slot-scope": "{ node }"
+}, at = {
+  slot: "toggle",
+  "slot-scope": "{ node }"
+}, ut = {
+  slot: "sidebar",
+  "slot-scope": "{ node }"
+}, ct = {
+  slot: "empty-node",
+  "slot-scope": "{ node }"
+}, S = window.Vue.ref, dt = window.Vue.onMounted, ft = window.Vue.onBeforeUnmount, pt = window.Vue.watchEffect, D = window.Vue.computed, gt = /* @__PURE__ */ Me({
+  __name: "SlVueTreeNext",
+  props: {
+    modelValue: { default: () => [] },
+    edgeSize: { default: 3 },
+    allowMultiselect: { type: Boolean, default: !0 },
+    showBranches: { type: Boolean, default: !1 },
+    level: { default: 0 },
+    parentInd: { default: void 0 },
+    parentContext: {},
+    rootContext: {},
+    allowToggleBranch: { type: Boolean, default: !0 }
+  },
+  emits: [
+    "update:modelValue",
+    "select",
+    "beforedrop",
+    "drop",
+    "toggle",
+    "nodeclick",
+    "nodedblclick",
+    "updateNode",
+    "nodecontextmenu",
+    "externaldragover",
+    "externaldrop"
+  ],
+  setup(_e, { expose: Ve, emit: De }) {
+    const c = _e, oe = De, B = S(), ne = S(), A = S(null), T = S(0), O = S(0), H = S(null), $ = S(!1), _ = S(!1), F = S({ x: 0, y: 0 }), R = S(!1), g = S([]), f = D(() => !c.level), le = D(() => {
+      const e = [];
+      let t = c.level - 1;
+      for (c.showBranches || t++; t-- > 0; )
+        e.push(t);
+      return e;
+    }), d = D(() => {
+      var t;
+      return f.value ? A.value : (t = q()) == null ? void 0 : t.cursorPosition.value;
+    }), se = D(() => le.value.length), J = D(() => {
+      var t, n, o, s;
+      if (f.value) {
+        const l = x(g.value);
+        return re(l);
+      }
+      return c.parentInd === null ? [] : (s = (o = (n = (t = q()) == null ? void 0 : t.currentNodes) == null ? void 0 : n.value) == null ? void 0 : o[c.parentInd]) == null ? void 0 : s.children;
+    }), ke = D(() => ve().length);
+    D(() => G().length), dt(() => {
+      f.value && document.addEventListener("mouseup", ge);
+    }), ft(() => {
+      document.removeEventListener("mouseup", ge);
+    }), pt(() => {
+      g.value = c.modelValue;
+    });
+    const k = (e) => {
+      var t;
+      if (f.value) {
+        A.value = e;
+        return;
+      }
+      (t = q()) == null || t.setCursorPosition(e);
+    }, re = (e, t = [], n = !0) => e.map((o, s) => {
+      const l = t.concat(s);
+      return E(l, o, e, n);
+    }), E = (e, t = null, n = null, o = !1) => {
+      const s = e.slice(-1)[0];
+      if (n = n || z(g.value, e), t = t || n && n[s] || null, o == null && (o = K == null ? void 0 : K(e)), !t)
+        return null;
+      const l = t.isExpanded == null ? !0 : !!t.isExpanded, i = t.isDraggable == null ? !0 : !!t.isDraggable, r = t.isSelectable == null ? !0 : !!t.isSelectable;
+      return {
+        // define the all TreeNodeModel props
+        title: t.title,
+        isLeaf: !!t.isLeaf,
+        children: t.children ? re(t.children, e, l) : [],
+        isSelected: !!t.isSelected,
+        isExpanded: l,
+        isVisible: o,
+        isDraggable: i,
+        isSelectable: r,
+        data: t.data !== void 0 ? t.data : {},
+        // define the all TreeNode computed props
+        path: e,
+        pathStr: JSON.stringify(e),
+        level: e.length,
+        ind: s,
+        isFirstChild: s == 0,
+        isLastChild: s == ((n == null ? void 0 : n.length) ?? 0) - 1
+      };
+    }, K = (e) => {
+      if (e.length < 2)
+        return !0;
+      let t = g.value;
+      for (let n = 0; n < e.length - 1; n++) {
+        let o = e[n], s = t[o];
+        if (!(s.isExpanded == null ? !0 : !!s.isExpanded))
+          return !1;
+        t = s.children || [];
+      }
+      return !0;
+    }, I = (e) => {
+      g.value = e, u().emit("update:modelValue", e);
+    }, Ee = (e, t) => {
+      u().emit("select", e, t);
+    }, Be = (e, t, n) => {
+      u().emit("beforedrop", e, t, n);
+    }, Ie = (e, t, n) => {
+      u().emit("drop", e, t, n);
+    }, Pe = (e, t) => {
+      u().emit("toggle", e, t);
+    }, Le = (e, t) => {
+      u().emit("nodeclick", e, t);
+    }, Te = (e, t) => {
+      u().emit("nodedblclick", e, t);
+    }, He = (e, t) => {
+      u().emit("nodecontextmenu", e, t);
+    }, $e = (e, t) => {
+      t.preventDefault();
+      const n = u(), o = n.getCursorPositionFromCoords(t.clientX, t.clientY);
+      n.setCursorPosition(o), n.emit("externaldragover", o, t);
+    }, Re = (e, t) => {
+      const n = u(), o = n.getCursorPositionFromCoords(t.clientX, t.clientY);
+      n.emit("externaldrop", o, t), k(null);
+    }, X = (e, t = !1, n = null) => {
+      const o = Array.isArray(c.multiselectKey) ? c.multiselectKey : [c.multiselectKey];
+      t = (n && !!o.find((h) => n[h]) || t) && c.allowMultiselect;
+      const l = E(e);
+      if (!l)
+        return null;
+      const i = x(g.value), r = c.allowMultiselect && n && n.shiftKey && H.value, a = [];
+      let v = !1;
+      return w((h, V) => {
+        var L;
+        r ? ((h.pathStr === l.pathStr || h.pathStr === ((L = H.value) == null ? void 0 : L.pathStr)) && (V.isSelected = h.isSelectable, v = !v), v && (V.isSelected = h.isSelectable)) : h.pathStr === l.pathStr ? V.isSelected = h.isSelectable : t || V.isSelected && (V.isSelected = !1), V.isSelected && a.push(h);
+      }, i), H.value = l, I(i), Ee(a, n), l;
+    }, ie = (e) => {
+      var Ne, Ce;
+      if (!f.value) {
+        (Ne = u()) == null || Ne.onMousemoveHandler(e);
+        return;
+      }
+      if (R.value)
+        return;
+      const t = _.value, n = t || $.value && (F.value.x !== e.clientX || F.value.y !== e.clientY), o = t === !1 && n === !0;
+      if (F.value = {
+        x: e.clientX,
+        y: e.clientY
+      }, !n)
+        return;
+      const s = u().ref.value, l = s.getBoundingClientRect(), i = e.clientY - l.top + s.scrollTop - Number(((Ce = B.value) == null ? void 0 : Ce.style.marginBottom) ?? 0), r = e.clientX - l.left;
+      B.value && (B.value.style.top = i + "px", B.value.style.left = r + "px");
+      const a = ae(e.clientX, e.clientY), v = a == null ? void 0 : a.node, h = a == null ? void 0 : a.placement;
+      if (o && !v.isSelected && X(v.path, !1, e), !G().length) {
+        R.value = !0;
+        return;
+      }
+      _.value = n, k({ node: v, placement: h });
+      const L = l.bottom - c.scrollAreaHeight, me = (e.clientY - L) / (l.bottom - L), Se = l.top + c.scrollAreaHeight, we = (Se - e.clientY) / (Se - l.top);
+      me > 0 ? pe(me) : we > 0 ? pe(-we) : U();
+    }, ae = (e, t) => {
+      const n = document.elementFromPoint(e, t), o = n != null && n.getAttribute("path") ? n : ue(n);
+      let s, l;
+      if (o) {
+        if (!o)
+          return;
+        s = E(JSON.parse(o.getAttribute("path")));
+        const i = o.offsetHeight, r = c.edgeSize, a = t - o.getBoundingClientRect().top;
+        s.isLeaf ? l = a >= i / 2 ? "after" : "before" : a <= r ? l = "before" : a >= i - r ? l = "after" : l = "inside";
+      } else {
+        const r = u().ref.value.getBoundingClientRect();
+        t > r.top + r.height / 2 ? (l = "after", s = ce()) : (l = "before", s = M());
+      }
+      return { node: s, placement: l };
+    }, ue = (e) => e ? e.getAttribute("path") ? e : ue(e.parentElement) : null, ze = (e) => {
+      if (!f.value || !_.value)
+        return;
+      const n = u().ref.value.getBoundingClientRect();
+      if (e.clientY >= n.bottom) {
+        const o = structuredClone(J.value);
+        k({ node: o[0], placement: "after" });
+      } else
+        e.clientY < n.top && k({ node: M(), placement: "before" });
+    }, Ye = (e) => u().ref.value.querySelector(`[path="${JSON.stringify(e)}"]`), ce = () => {
+      let e = null;
+      return w((t) => {
+        e = t;
+      }), e;
+    }, M = () => E([0]), Ae = (e, t) => {
+      let n = null;
+      return w((o) => {
+        if (!(de(o.path, e) < 1) && (!t || t(o)))
+          return n = o, !1;
+      }), n;
+    }, Oe = (e, t) => {
+      let n = [];
+      w((s) => {
+        if (de(s.path, e) >= 0)
+          return !1;
+        n.push(s);
+      });
+      let o = n.length;
+      for (; o--; ) {
+        const s = n[o];
+        if (!t || t(s))
+          return s;
+      }
+      return null;
+    }, de = (e, t) => {
+      for (let n = 0; n < e.length; n++) {
+        if (t[n] == null || e[n] > t[n])
+          return 1;
+        if (e[n] < t[n])
+          return -1;
+      }
+      return t[e.length] == null ? 0 : -1;
+    }, fe = (e, t) => {
+      if (e.button === 0) {
+        if (!f.value) {
+          u().onNodeMousedownHandler(e, t);
+          return;
+        }
+        $.value = !0;
+      }
+    }, pe = (e) => {
+      const t = u().ref.value;
+      O.value !== e && (T.value && U(), O.value = e, T.value = setInterval(() => {
+        t.scrollTop += c.maxScrollSpeed * e;
+      }, 20));
+    }, U = () => {
+      clearInterval(T.value), T.value = 0, O.value = 0;
+    }, ge = (e) => {
+      _.value && j(e);
+    }, j = (e, t = null) => {
+      if (e.button !== 0)
+        return;
+      if (!f.value) {
+        u().onNodeMouseupHandler(e, t);
+        return;
+      }
+      if ($.value = !1, !_.value && t && !R.value && X(t.path, !1, e), R.value = !1, !d.value) {
+        P();
+        return;
+      }
+      const n = G();
+      for (let r of n) {
+        if (r.pathStr == d.value.node.pathStr) {
+          P();
+          return;
+        }
+        if (Xe(r, d.value.node)) {
+          P();
+          return;
+        }
+      }
+      const o = x(g.value), s = [];
+      for (let r of n) {
+        const v = z(o, r.path)[r.ind];
+        s.push(v);
+      }
+      let l = !1;
+      if (Be(n, d.value, () => l = !0), l) {
+        P();
+        return;
+      }
+      const i = [];
+      for (let r of s)
+        i.push(x(r)), r._markToDelete = !0;
+      he(d.value, i, o), Q((r, a, v) => {
+        r._markToDelete && a.splice(v, 1);
+      }, o), H.value = null, I(o), Ie(n, d.value, e), P();
+    }, Fe = (e, t) => {
+      c.allowToggleBranch && (W({ path: t.path, patch: { isExpanded: !t.isExpanded } }), Pe(t, e), e.stopPropagation());
+    }, P = () => {
+      _.value = !1, $.value = !1, k(null), U();
+    }, q = () => c.parentContext, u = () => f.value ? Y : c.rootContext, z = (e, t) => t.length === 1 ? e : z(e[t[0]].children, t.slice(1)), W = ({ path: e, patch: t }) => {
+      f.value || oe("updateNode", { path: e, patch: t });
+      const n = JSON.stringify(e), o = x(g.value);
+      w((s, l) => {
+        s.pathStr === n && Object.assign(l, t);
+      }, o), I(o);
+    }, ve = () => {
+      const e = [];
+      return w((t) => {
+        t.isSelected && e.push(t);
+      }), e;
+    }, G = () => {
+      const e = [];
+      return w((t) => {
+        t.isSelected && t.isDraggable && e.push(t);
+      }), e;
+    }, w = (e, t = null, n = []) => {
+      t || (t = g.value);
+      let o = !1;
+      const s = [];
+      for (let l = 0; l < t.length; l++) {
+        const i = t[l], r = n.concat(l), a = E(r, i, t);
+        if (o = e(a, i, t) === !1, a && s.push(a), o || i.children && (o = w(e, i.children, r) === !1, o))
+          break;
+      }
+      return o ? !1 : s;
+    }, Q = (e, t) => {
+      let n = t.length;
+      for (; n--; ) {
+        const o = t[n];
+        o.children && Q(e, o.children), e(o, t, n);
+      }
+      return t;
+    }, Je = (e) => {
+      const t = e.map((o) => JSON.stringify(o)), n = x(g.value);
+      w((o, s, l) => {
+        for (const i of t)
+          o.pathStr === i && (s._markToDelete = !0);
+      }, n), Q((o, s, l) => {
+        o._markToDelete && s.splice(l, 1);
+      }, n), I(n);
+    }, he = (e, t, n) => {
+      const o = x(e), s = o.node, l = z(n, s.path), i = l[s.ind];
+      if (o.placement === "inside")
+        i.children = i.children || [], i.children.unshift(...t);
+      else {
+        const r = o.placement === "before" ? s.ind : s.ind + 1;
+        l.splice(r, 0, ...t);
+      }
+    }, Ke = (e, t) => {
+      const n = Array.isArray(t) ? t : [t], o = x(g.value);
+      he(e, n, o), I(o);
+    }, Xe = (e, t) => {
+      const o = x(t).path;
+      return JSON.stringify(o.slice(0, e.path.length)) == e.pathStr;
+    }, x = (e) => JSON.parse(JSON.stringify(e)), Y = {
+      getRoot: u,
+      setCursorPosition: k,
+      currentNodes: J,
+      cursorPosition: d,
+      emit: oe,
+      ref: ne,
+      onNodeMousedownHandler: fe,
+      onNodeMouseupHandler: j,
+      onMousemoveHandler: ie,
+      getCursorPositionFromCoords: ae,
+      updateNode: W,
+      getNode: E,
+      traverse: w,
+      select: X,
+      getNodeEl: Ye,
+      getFirstNode: M,
+      getLastNode: ce,
+      getNextNode: Ae,
+      getPrevNode: Oe,
+      getSelected: ve,
+      insert: Ke,
+      remove: Je,
+      rootCursorPosition: A
+    };
+    return Ve(Y), (e, t) => {
+      const n = Ue("SlVueTreeNext", !0);
+      return m(), N("div", {
+        ref_key: "rootRef",
+        ref: ne,
+        class: te(["sl-vue-tree-next", { "sl-vue-tree-next-root": f.value }]),
+        onMousemove: ie,
+        onMouseleave: ze
+      }, [
+        p("div", Qe, [
+          (m(!0), N(ye, null, xe(J.value, (o, s) => (m(), N("div", {
+            class: te(["sl-vue-tree-next-node", { "sl-vue-tree-next-selected": o.isSelected }])
+          }, [
+            p("div", {
+              class: "sl-vue-tree-next-cursor sl-vue-tree-next-cursor_before",
+              onDragover: t[0] || (t[0] = Z(() => {
+              }, ["prevent"])),
+              style: be({
+                visibility: d.value && d.value.node.pathStr === o.pathStr && d.value.placement === "before" ? "visible" : "hidden",
+                "--depth": se.value
+              })
+            }, null, 36),
+            p("div", {
+              class: te(["sl-vue-tree-next-node-item", {
+                "sl-vue-tree-next-cursor-hover": d.value && d.value.node.pathStr === o.pathStr,
+                "sl-vue-tree-next-cursor-inside": d.value && d.value.placement === "inside" && d.value.node.pathStr === o.pathStr,
+                "sl-vue-tree-next-node-is-leaf": o.isLeaf,
+                "sl-vue-tree-next-node-is-folder": !o.isLeaf
+              }]),
+              onMousedown: (l) => fe(l, o),
+              onMouseup: (l) => j(l, o),
+              onContextmenu: (l) => He(o, l),
+              onDblclick: (l) => Te(o, l),
+              onClick: (l) => Le(o, l),
+              onDragover: (l) => $e(o, l),
+              onDrop: (l) => Re(o, l),
+              path: o.pathStr
+            }, [
+              (m(!0), N(ye, null, xe(le.value, (l) => (m(), N("div", et))), 256)),
+              e.level && e.showBranches ? (m(), N("div", tt, [
+                C(e.$slots, "branch", { node: o }, () => [
+                  o.isLastChild ? b("", !0) : (m(), N("span", ot, y("├") + y("─") + "  ", 1)),
+                  o.isLastChild ? (m(), N("span", nt, y("└") + y("─") + "  ", 1)) : b("", !0)
+                ])
+              ])) : b("", !0),
+              p("div", lt, [
+                o.isLeaf ? b("", !0) : (m(), N("span", {
+                  key: 0,
+                  class: "sl-vue-tree-next-toggle",
+                  onClick: (l) => Fe(l, o)
+                }, [
+                  C(e.$slots, "toggle", { node: o }, () => [
+                    p("span", null, y(o.isLeaf ? "" : o.isExpanded ? "-" : "+"), 1)
+                  ])
+                ], 8, st)),
+                C(e.$slots, "title", { node: o }, () => [
+                  ee(y(o.title), 1)
+                ]),
+                !o.isLeaf && o.children.length == 0 && o.isExpanded ? C(e.$slots, "empty-node", {
+                  key: 1,
+                  node: o
+                }) : b("", !0)
+              ]),
+              p("div", rt, [
+                C(e.$slots, "sidebar", { node: o })
+              ])
+            ], 42, Ze),
+            o.children && o.children.length && o.isExpanded ? (m(), qe(n, {
+              key: 0,
+              "model-value": o.children,
+              level: o.level,
+              "parent-ind": s,
+              "allow-multiselect": e.allowMultiselect,
+              "allow-toggle-branch": e.allowToggleBranch,
+              "edge-size": e.edgeSize,
+              "show-branches": e.showBranches,
+              "parent-context": Y,
+              "root-context": f.value ? Y : e.rootContext,
+              onUpdateNode: W,
+              onDragover: t[1] || (t[1] = Z(() => {
+              }, ["prevent"]))
+            }, {
+              default: je(() => [
+                p("template", it, [
+                  C(e.$slots, "title", { node: o }, () => [
+                    ee(y(o.title), 1)
+                  ])
+                ]),
+                p("template", at, [
+                  C(e.$slots, "toggle", { node: o }, () => [
+                    p("span", null, y(o.isLeaf ? "" : o.isExpanded ? "-" : "+"), 1)
+                  ])
+                ]),
+                p("template", ut, [
+                  C(e.$slots, "sidebar", { node: o })
+                ]),
+                p("template", ct, [
+                  !o.isLeaf && o.children.length == 0 && o.isExpanded ? C(e.$slots, "empty-node", {
+                    key: 0,
+                    node: o
+                  }) : b("", !0)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["model-value", "level", "parent-ind", "allow-multiselect", "allow-toggle-branch", "edge-size", "show-branches", "root-context"])) : b("", !0),
+            p("div", {
+              class: "sl-vue-tree-next-cursor sl-vue-tree-next-cursor_after",
+              onDragover: t[2] || (t[2] = Z(() => {
+              }, ["prevent"])),
+              style: be({
+                visibility: d.value && d.value.node.pathStr === o.pathStr && d.value.placement === "after" ? "visible" : "hidden",
+                "--depth": se.value
+              })
+            }, null, 36)
+          ], 2))), 256)),
+          f.value ? Ge((m(), N("div", {
+            key: 0,
+            ref_key: "dragInfoRef",
+            ref: B,
+            class: "sl-vue-tree-next-drag-info"
+          }, [
+            C(e.$slots, "draginfo", {}, () => [
+              ee(" Items: " + y(ke.value), 1)
+            ])
+          ], 512)), [
+            [We, _.value]
+          ]) : b("", !0)
+        ], 512)
+      ], 34);
+    };
+  }
+});
+export {
+  gt as SlVueTreeNext
+};
diff --git a/src/index.ts b/src/index.ts
index 1aa82c9..5701a21 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,13 +1,3 @@
 import { SlVueTreeNext } from '@/components/SlVueTreeNext'
 
-const install = () => {
-    globalThis.SlVueTreeNext = SlVueTreeNext
-}
-
-if (globalThis.Vue) {
-    install()
-}
-
-export { install }
-
-export default { SlVueTreeNext }
+export { SlVueTreeNext }
