diff --git a/beta-webview/App.vue b/beta-webview/App.vue
index 242e9f9..f5401fe 100644
--- a/beta-webview/App.vue
+++ b/beta-webview/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
+import FormDemo from './components/FormDemo.vue'
 </script>
 
 <template>
@@ -12,6 +13,7 @@ import HelloWorld from './components/HelloWorld.vue'
     </a>
   </div>
   <HelloWorld msg="Vite + Vue" />
+  <FormDemo />
 
 </template>
 
diff --git a/beta-webview/components/FormDemo.vue b/beta-webview/components/FormDemo.vue
new file mode 100644
index 0000000..31b7156
--- /dev/null
+++ b/beta-webview/components/FormDemo.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const name = ref<string>('')
+const email = ref('')
+const message = ref('');
+const fruit = ref('Banana');
+const color = ref('red');
+const topics = ref(['IT']);
+const terms = ref(true);
+const newsletter = ref(false);
+</script>
+
+<template>
+  <h1>Controlled components</h1>
+  <div class="forms">
+    <div class="vscode-form">
+      <h2>A form created using VSCode Elements</h2>
+      <form action="./">
+        <vscode-form-group variant="vertical">
+          <vscode-label for="name">Name</vscode-label>
+          <vscode-textfield id="name" v-model="name" name="name"></vscode-textfield>
+        </vscode-form-group>
+        <vscode-form-group variant="vertical">
+          <vscode-label for="email">E-mail</vscode-label>
+          <vscode-textfield type="email" id="email" v-model="email" name="email"></vscode-textfield>
+        </vscode-form-group>
+        <vscode-form-group variant="vertical">
+          <vscode-label for="fruit">Favorite fruit</vscode-label>
+          <vscode-single-select v-model="fruit" id="fruit" name="fruit">
+            <vscode-option>Apple</vscode-option>
+            <vscode-option>Banana</vscode-option>
+            <vscode-option>Cherry</vscode-option>
+          </vscode-single-select>
+        </vscode-form-group>
+        <vscode-form-group variant="vertical">
+          <vscode-label for="radio-1">Favorite color</vscode-label>
+          <vscode-radio-group>
+            <vscode-radio type="radio" name="color" v-model="color" value="red" id="radio-1">Red</vscode-radio>
+            <vscode-radio type="radio" name="color" v-model="color" value="green">Green</vscode-radio>
+            <vscode-radio type="radio" name="color" v-model="color" value="blue">Blue</vscode-radio>
+          </vscode-radio-group>
+        </vscode-form-group>
+        <vscode-form-group variant="vertical">
+          <vscode-label for="topics">Favorite topics</vscode-label>
+          <vscode-multi-select v-model="topics" name="topics" id="topics">
+            <vscode-option>IT</vscode-option>
+            <vscode-option>Art</vscode-option>
+            <vscode-option>Sport</vscode-option>
+            <vscode-option>History</vscode-option>
+            <vscode-option>Business</vscode-option>
+            <vscode-option>Science</vscode-option>
+          </vscode-multi-select>
+        </vscode-form-group>
+        <vscode-form-group>
+          <vscode-checkbox type="checkbox" v-model="terms">Accept terms & conditions</vscode-checkbox>
+        </vscode-form-group>
+        <vscode-form-group>
+          <vscode-checkbox type="checkbox" v-model="newsletter">Subscribe to newsletter</vscode-checkbox>
+        </vscode-form-group>
+        <vscode-form-group variant="vertical">
+          <vscode-label for="textarea">Message</vscode-label>
+          <vscode-textarea id="textarea" v-model="message"></vscode-textarea>
+        </vscode-form-group>
+        <vscode-form-group variant="vertical">
+          <vscode-button type="submit">Submit</vscode-button>
+          <vscode-button type="reset" secondary>Reset</vscode-button>
+        </vscode-form-group>
+      </form>
+    </div>
+    <div class="native-form">
+      <h2>A native form</h2>
+      <form action="./">
+        <div>
+          <label for="n-name">Name</label>
+          <input type="text" id="n-name" v-model="name" name="name">
+        </div>
+        <div>
+          <label for="n-email">E-mail</label>
+          <input type="text" id="n-email" v-model="email" name="email">
+        </div>
+        <div>
+          <label for="n-fruit">Favorite fruit</label>
+          <select name="fruit" id="n-fruit" v-model="fruit">
+            <option>Apple</option>
+            <option>Banana</option>
+            <option>Cherry</option>
+          </select>
+        </div>
+        <div>
+          <label>Favorite color</label>
+          <div class="radio-group">
+            <div>
+              <input type="radio" name="color" v-model="color" value="red" id="n-radio-1">
+              <label for="n-radio-1">Red</label>
+            </div>
+            <div>
+              <input type="radio" name="color" v-model="color" value="green" id="n-radio-2">
+              <label for="n-radio-2">Green</label>
+            </div>
+            <div>
+              <input type="radio" name="color" v-model="color" value="blue" id="n-radio-3">
+              <label for="n-radio-3">Blue</label>
+            </div>
+          </div>
+        </div>
+        <div>
+          <label for="n-topics">Favorite topics</label>
+          <select name="topics" id="n-topics" v-model="topics" multiple>
+            <option>IT</option>
+            <option>Art</option>
+            <option>Sport</option>
+            <option>History</option>
+            <option>Business</option>
+            <option>Science</option>
+          </select>
+        </div>
+        <div>
+          <input type="checkbox" v-model="terms" name="terms" id="n-terms">
+          <label for="n-terms">Accept terms & conditions</label>
+        </div>
+        <div>
+          <input type="checkbox" v-model="newsletter" name="newsletter" id="n-newsletter">
+          <label for="n-newsletter">Subscribe to newsletter</label>
+        </div>
+        <div>
+          <button type="submit">Submit</button>
+          <button type="reset">Reset</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <div>
+    <p>Name: {{ name }}</p>
+    <p>E-mail: {{ email }}</p>
+    <p>Favorite fruit: {{ fruit }}</p>
+    <p>Favorite color: {{ color }}</p>
+    <p>Message: {{ message }}</p>
+    <p>Favorite topics:</p>
+    <ul>
+      <li v-for="f in topics" :key="f">
+        {{ f }}
+      </li>
+    </ul>
+    <p>Terms & conditions: {{ terms }}</p>
+    <p>Newsletter: {{ newsletter }}</p>
+  </div>
+</template>
+
+<style>
+h1 {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 800px;
+}
+
+.forms {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  margin: 0 auto;
+  max-width: 800px;
+}
+
+form {
+  border: 1px solid var(--vscode-widget-border);
+  border-radius: 5px;
+  padding: 20px;
+  width: 320px;
+}
+
+.native-form label {
+  display: block;
+  font-weight: 600;
+  padding: 5px 0;
+}
+
+.native-form input[type="radio"] + label,
+.native-form input[type="checkbox"] + label {
+  display: inline-block;
+  font-weight: normal;
+}
+</style>
\ No newline at end of file
diff --git a/beta-webview/main.ts b/beta-webview/main.ts
index d75345d..6f3468e 100644
--- a/beta-webview/main.ts
+++ b/beta-webview/main.ts
@@ -1,5 +1,19 @@
-import { createApp } from 'vue';
 import './style.css';
+import '@vscode-elements/elements/dist/vscode-button';
+import '@vscode-elements/elements/dist/vscode-checkbox';
+import '@vscode-elements/elements/dist/vscode-form-group';
+import '@vscode-elements/elements/dist/vscode-label';
+import '@vscode-elements/elements/dist/vscode-single-select';
+import '@vscode-elements/elements/dist/vscode-multi-select';
+import '@vscode-elements/elements/dist/vscode-option';
+import '@vscode-elements/elements/dist/vscode-radio';
+import '@vscode-elements/elements/dist/vscode-radio-group';
+import '@vscode-elements/elements/dist/vscode-textfield';
+import { createApp } from 'vue';
 import App from './App.vue';
 
+if (import.meta.env.DEV) {
+  await import('@vscode-elements/webview-playground');
+}
+
 createApp(App).mount('#app');
diff --git a/package-lock.json b/package-lock.json
index 8615c9e..477d12b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "3.48.2",
       "license": "AGPL-3.0",
       "dependencies": {
+        "@vscode-elements/elements": "^1.16.0",
         "convert-array-to-csv": "^2.0.0",
         "lightning-flow-scanner-core": "4.36.0",
         "tabulator-tables": "^6.3.1",
@@ -31,6 +32,7 @@
         "@typescript-eslint/eslint-plugin": "^8.22.0",
         "@typescript-eslint/parser": "^8.22.0",
         "@vitejs/plugin-vue": "^5.2.4",
+        "@vscode-elements/webview-playground": "^1.7.0",
         "@vscode/test-cli": "^0.0.10",
         "@vscode/test-electron": "^2.5.2",
         "@vscode/vsce": "3.4.0",
@@ -62,6 +64,7 @@
         "tsup": "^8.4.0",
         "typescript": "^5.7.3",
         "vite": "^6.3.5",
+        "vite-plugin-vue-devtools": "^7.7.6",
         "vitest": "^3.1.3",
         "vscode-ext-gen": "^1.0.2",
         "vue-tsc": "^2.2.10",
@@ -98,6 +101,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@antfu/utils": {
+      "version": "0.7.10",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.10.tgz",
+      "integrity": "sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@azu/format-text": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@azu/format-text/-/format-text-1.0.2.tgz",
@@ -431,6 +444,19 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.1.tgz",
+      "integrity": "sha512-WnuuDILl9oOBbKnb4L+DyODx7iC47XfzmNCpTttFsSp6hTG7XZxu60+4IO+2/hPfcGOoKbFiwoI/+zwARbNQow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
@@ -475,6 +501,52 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.27.1.tgz",
+      "integrity": "sha512-QwGAmuvM17btKU5VqXfb+Giw4JcN0hjuufz3DYnpeVDvZLAObloM77bhMXiqry3Iio+Ai4phVRDwl6WU10+r5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.1",
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/traverse": "^7.27.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz",
+      "integrity": "sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-module-imports": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
@@ -507,6 +579,19 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-plugin-utils": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
@@ -517,6 +602,38 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz",
+      "integrity": "sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
@@ -577,6 +694,24 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/plugin-proposal-decorators": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.27.1.tgz",
+      "integrity": "sha512-DTxe4LBPrtFdsWzgpmbBKevg3e9PBy+dXRt19kSbucbZvL2uqtdqwwpluL1jfxYE0wIDTFp1nTy/q6gNLsxXrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/plugin-syntax-decorators": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
@@ -632,6 +767,22 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-syntax-decorators": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.27.1.tgz",
+      "integrity": "sha512-YMq8Z87Lhl8EGkmb0MwYkt36QnxC+fzCgrl66ereamPlYToRpIk5nUjKUY3QKLWq8mwUB1BgbeXcTJhZOCDg5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-syntax-import-attributes": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.27.1.tgz",
@@ -816,6 +967,26 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.27.1.tgz",
+      "integrity": "sha512-Q5sT5+O4QUebHdbwKedFBEwRLb02zJ7r4A5Gg2hUoLuU3FjdMcyqcywqUrLCaDsFCxzokf7u9kuy7qz51YUuAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.1",
+        "@babel/helper-create-class-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/plugin-syntax-typescript": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -2632,6 +2803,21 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.3.0.tgz",
+      "integrity": "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.0.tgz",
+      "integrity": "sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0"
+      }
+    },
     "node_modules/@lukeed/ms": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@lukeed/ms/-/ms-2.0.2.tgz",
@@ -2735,6 +2921,13 @@
         "node": ">=14"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@promptbook/utils": {
       "version": "0.58.0",
       "resolved": "https://registry.npmjs.org/@promptbook/utils/-/utils-0.58.0.tgz",
@@ -2952,14 +3145,15 @@
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
-      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
+      "integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.0",
         "estree-walker": "^2.0.2",
-        "picomatch": "^2.3.1"
+        "picomatch": "^4.0.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -2973,19 +3167,6 @@
         }
       }
     },
-    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.40.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.0.tgz",
@@ -3950,6 +4131,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
     "node_modules/@types/uuid": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
@@ -4422,6 +4609,22 @@
         "vscode-uri": "^3.0.8"
       }
     },
+    "node_modules/@vscode-elements/elements": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@vscode-elements/elements/-/elements-1.16.0.tgz",
+      "integrity": "sha512-5GWXSPaqdrZnWLTtqYn8IKx/ljPiVhH4Y1gNAr1CeP9B0dRgkgiJ2RQGs9TUAsyW5phxkX4+K0qpNQd+iKtoHg==",
+      "license": "MIT",
+      "dependencies": {
+        "lit": "^3.2.1"
+      }
+    },
+    "node_modules/@vscode-elements/webview-playground": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@vscode-elements/webview-playground/-/webview-playground-1.7.0.tgz",
+      "integrity": "sha512-me+JCk3FsneHN33a+E2mCcnuMlbJ09QrWfaRppnOvPnq5GEyFMqs5JbeJKWbKZ4lBxsQhpWSy7zT85374C9TxQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@vscode/test-cli": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/@vscode/test-cli/-/test-cli-0.0.10.tgz",
@@ -5011,6 +5214,59 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/@vue/babel-helper-vue-transform-on": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.4.0.tgz",
+      "integrity": "sha512-mCokbouEQ/ocRce/FpKCRItGo+013tHg7tixg3DUNS+6bmIchPt66012kBMm476vyEIJPafrvOf4E5OYj3shSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vue/babel-plugin-jsx": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.4.0.tgz",
+      "integrity": "sha512-9zAHmwgMWlaN6qRKdrg1uKsBKHvnUU+Py+MOCTuYZBoZsopa90Di10QRjB+YPnVss0BZbG/H5XFwJY1fTxJWhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-plugin-utils": "^7.26.5",
+        "@babel/plugin-syntax-jsx": "^7.25.9",
+        "@babel/template": "^7.26.9",
+        "@babel/traverse": "^7.26.9",
+        "@babel/types": "^7.26.9",
+        "@vue/babel-helper-vue-transform-on": "1.4.0",
+        "@vue/babel-plugin-resolve-type": "1.4.0",
+        "@vue/shared": "^3.5.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.4.0.tgz",
+      "integrity": "sha512-4xqDRRbQQEWHQyjlYSgZsWj44KfiF6D+ktCuXyZ8EnVDYV3pztmXJDf1HveAjUAXxAnR8daCQT51RneWWxtTyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.26.2",
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-plugin-utils": "^7.26.5",
+        "@babel/parser": "^7.26.9",
+        "@vue/compiler-sfc": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.5.14",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.14.tgz",
@@ -5055,7 +5311,6 @@
       "integrity": "sha512-9T6m/9mMr81Lj58JpzsiSIjBgv2LiVoWjIVa7kuXHICUi8LiDSIotMpPRXYJsXKqyARrzjT24NAwttrMnMaCXA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.27.2",
         "@vue/compiler-core": "3.5.14",
@@ -5074,7 +5329,6 @@
       "integrity": "sha512-Y0G7PcBxr1yllnHuS/NxNCSPWnRGH4Ogrp0tsLA5QemDZuJLs99YjAKQ7KqkHE0vCg4QTKlQzXLKCMF7WPSl7Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.14",
         "@vue/shared": "3.5.14"
@@ -5091,6 +5345,90 @@
         "he": "^1.2.0"
       }
     },
+    "node_modules/@vue/devtools-core": {
+      "version": "7.7.6",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.7.6.tgz",
+      "integrity": "sha512-ghVX3zjKPtSHu94Xs03giRIeIWlb9M+gvDRVpIZ/cRIxKHdW6HE/sm1PT3rUYS3aV92CazirT93ne+7IOvGUWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.6",
+        "@vue/devtools-shared": "^7.7.6",
+        "mitt": "^3.0.1",
+        "nanoid": "^5.1.0",
+        "pathe": "^2.0.3",
+        "vite-hot-client": "^2.0.4"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-core/node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vue/devtools-core/node_modules/nanoid": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
+      "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/@vue/devtools-core/node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.6",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.6.tgz",
+      "integrity": "sha512-geu7ds7tem2Y7Wz+WgbnbZ6T5eadOvozHZ23Atk/8tksHMFOFylKi1xgGlQlVn0wlkEf4hu+vd5ctj1G4kFtwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.6",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-kit/node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.6",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.6.tgz",
+      "integrity": "sha512-yFEgJZ/WblEsojQQceuyK6FzpFDx4kqrz2ohInxNj5/DnhoX023upTv4OD6lNPLAA5LLkbwPVb10o/7b+Y4FVA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/@vue/language-core": {
       "version": "2.2.10",
       "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.10.tgz",
@@ -9685,6 +10023,16 @@
         "url": "https://bevry.me/fund"
       }
     },
+    "node_modules/birpc": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.3.0.tgz",
+      "integrity": "sha512-ijbtkn/F3Pvzb6jHypHRyve2QApOCZDR25D/VnkY2G/lBNcXCTsnsCxgY4k4PkVB7zfwzYbY3O9Lcqe3xufS5g==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -9978,6 +10326,22 @@
       "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==",
       "dev": true
     },
+    "node_modules/bundle-name": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
+      "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "run-applescript": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/bundle-require": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/bundle-require/-/bundle-require-5.1.0.tgz",
@@ -11045,6 +11409,22 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/copy-anything": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
+      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -11531,6 +11911,36 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/default-browser": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.2.1.tgz",
+      "integrity": "sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bundle-name": "^4.1.0",
+        "default-browser-id": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-browser-id": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.0.tgz",
+      "integrity": "sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/defaults": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
@@ -12382,6 +12792,16 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/error-stack-parser-es": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-0.1.5.tgz",
+      "integrity": "sha512-xHku1X40RO+fO8yJ8Wh2f2rZWVjqyhb1zgq1yZ8aZRQkv6OOKhKWRUaht3eSCUbAOBaKIgM+ykwFLE+QUxgGeg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
@@ -12800,9 +13220,9 @@
       }
     },
     "node_modules/execa": {
-      "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-9.4.0.tgz",
-      "integrity": "sha512-yKHlle2YGxZE842MERVIplWwNH5VYmqqcPFgtnlU//K8gxuFFXu0pwd/CrfXTumFpeEiufsP7+opT/bPJa1yVw==",
+      "version": "9.5.3",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-9.5.3.tgz",
+      "integrity": "sha512-QFNnTvU3UjgWFy8Ef9iDHvIdcgZ344ebkwYx4/KLbR+CKQA4xBaHzv+iRpp86QfMHP8faFQLh8iOc57215y4Rg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -14136,6 +14556,13 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -14653,6 +15080,41 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^3.0.0"
+      },
+      "bin": {
+        "is-inside-container": "cli.js"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-inside-container/node_modules/is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-interactive": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz",
@@ -14744,6 +15206,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-what": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
+      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -16078,6 +16553,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ky": {
       "version": "0.33.3",
       "resolved": "https://registry.npmjs.org/ky/-/ky-0.33.3.tgz",
@@ -16442,6 +16924,37 @@
         "uc.micro": "^2.0.0"
       }
     },
+    "node_modules/lit": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.0.tgz",
+      "integrity": "sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^2.1.0",
+        "lit-element": "^4.2.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.2.0.tgz",
+      "integrity": "sha512-MGrXJVAI5x+Bfth/pU9Kst1iWID6GHDLEzFEnyULB/sFiRLgkd8NPK/PeeXxktA3T6EIIaq8U3KcbTU5XFcP2Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0",
+        "@lit/reactive-element": "^2.1.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.0.tgz",
+      "integrity": "sha512-RHoswrFAxY2d8Cf2mm4OZ1DgzCoBKUKSPvA1fhtSELxUERq2aQQ2h05pO9j81gS1o7RIRJ+CePLogfyahwmynw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/load-tsconfig": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/load-tsconfig/-/load-tsconfig-0.2.5.tgz",
@@ -17023,6 +17536,16 @@
         "obliterator": "^2.0.1"
       }
     },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -18068,6 +18591,13 @@
       "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
       "dev": true
     },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/periscopic": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -19751,6 +20281,19 @@
       "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
       "dev": true
     },
+    "node_modules/run-applescript": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.0.0.tgz",
+      "integrity": "sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/run-async": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-3.0.0.tgz",
@@ -20134,6 +20677,21 @@
         "simple-concat": "^1.0.0"
       }
     },
+    "node_modules/sirv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.1.tgz",
+      "integrity": "sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -20350,6 +20908,16 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/split2": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
@@ -20776,6 +21344,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/superjson": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
+      "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/supports-color": {
       "version": "9.4.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-9.4.0.tgz",
@@ -21502,6 +22083,16 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -22722,6 +23313,19 @@
         }
       }
     },
+    "node_modules/vite-hot-client": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vite-hot-client/-/vite-hot-client-2.0.4.tgz",
+      "integrity": "sha512-W9LOGAyGMrbGArYJN4LBCdOC5+Zwh7dHvOHC0KmGKkJhsOzaKbpo/jEjpPKVHIW0/jBWj8RZG0NUxfgA8BxgAg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0"
+      }
+    },
     "node_modules/vite-node": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.1.3.tgz",
@@ -22752,6 +23356,129 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vite-plugin-inspect": {
+      "version": "0.8.9",
+      "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.9.tgz",
+      "integrity": "sha512-22/8qn+LYonzibb1VeFZmISdVao5kC22jmEKm24vfFE8siEn47EpVcCLYMv6iKOYMJfjSvSJfueOwcFCkUnV3A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/utils": "^0.7.10",
+        "@rollup/pluginutils": "^5.1.3",
+        "debug": "^4.3.7",
+        "error-stack-parser-es": "^0.1.5",
+        "fs-extra": "^11.2.0",
+        "open": "^10.1.0",
+        "perfect-debounce": "^1.0.0",
+        "picocolors": "^1.1.1",
+        "sirv": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.1"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-inspect/node_modules/define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vite-plugin-inspect/node_modules/is-wsl": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.0.tgz",
+      "integrity": "sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-inside-container": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vite-plugin-inspect/node_modules/open": {
+      "version": "10.1.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-10.1.2.tgz",
+      "integrity": "sha512-cxN6aIDPz6rm8hbebcP7vrQNhvRcveZoJU72Y7vskh4oIm+BZwBECnx5nTmrlres1Qapvx27Qo1Auukpf8PKXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "default-browser": "^5.2.1",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "is-wsl": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vite-plugin-vue-devtools": {
+      "version": "7.7.6",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.7.6.tgz",
+      "integrity": "sha512-L7nPVM5a7lgit/Z+36iwoqHOaP3wxqVi1UvaDJwGCfblS9Y6vNqf32ILlzJVH9c47aHu90BhDXeZc+rgzHRHcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-core": "^7.7.6",
+        "@vue/devtools-kit": "^7.7.6",
+        "@vue/devtools-shared": "^7.7.6",
+        "execa": "^9.5.2",
+        "sirv": "^3.0.1",
+        "vite-plugin-inspect": "0.8.9",
+        "vite-plugin-vue-inspector": "^5.3.1"
+      },
+      "engines": {
+        "node": ">=v14.21.3"
+      },
+      "peerDependencies": {
+        "vite": "^3.1.0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-vue-inspector": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-inspector/-/vite-plugin-vue-inspector-5.3.1.tgz",
+      "integrity": "sha512-cBk172kZKTdvGpJuzCCLg8lJ909wopwsu3Ve9FsL1XsnLBiRT9U3MePcqrgGHgCX2ZgkqZmAGR8taxw+TV6s7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.23.0",
+        "@babel/plugin-proposal-decorators": "^7.23.0",
+        "@babel/plugin-syntax-import-attributes": "^7.22.5",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-transform-typescript": "^7.22.15",
+        "@vue/babel-plugin-jsx": "^1.1.5",
+        "@vue/compiler-dom": "^3.3.4",
+        "kolorist": "^1.8.0",
+        "magic-string": "^0.30.4"
+      },
+      "peerDependencies": {
+        "vite": "^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0"
+      }
+    },
     "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.4",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.4.tgz",
diff --git a/package.json b/package.json
index b698ad8..ce8e828 100644
--- a/package.json
+++ b/package.json
@@ -138,6 +138,7 @@
     "@typescript-eslint/eslint-plugin": "^8.22.0",
     "@typescript-eslint/parser": "^8.22.0",
     "@vitejs/plugin-vue": "^5.2.4",
+    "@vscode-elements/webview-playground": "^1.7.0",
     "@vscode/test-cli": "^0.0.10",
     "@vscode/test-electron": "^2.5.2",
     "@vscode/vsce": "3.4.0",
@@ -169,6 +170,7 @@
     "tsup": "^8.4.0",
     "typescript": "^5.7.3",
     "vite": "^6.3.5",
+    "vite-plugin-vue-devtools": "^7.7.6",
     "vitest": "^3.1.3",
     "vscode-ext-gen": "^1.0.2",
     "vue-tsc": "^2.2.10",
@@ -177,6 +179,7 @@
     "webpack-cli": "^6.0.1"
   },
   "dependencies": {
+    "@vscode-elements/elements": "^1.16.0",
     "convert-array-to-csv": "^2.0.0",
     "lightning-flow-scanner-core": "4.36.0",
     "tabulator-tables": "^6.3.1",
diff --git a/vite.config.ts b/vite.config.ts
index b483f44..7621542 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,15 +1,38 @@
 import path from 'node:path';
 import vue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
+import vueDevTools from 'vite-plugin-vue-devtools';
+
+import { fileURLToPath, URL } from 'node:url';
 
 // https://vitejs.dev/config/
 export default defineConfig(() => {
   return {
     resolve: {
       alias: {
-        '@': path.join(__dirname, 'beta-webview'),
+        '@': fileURLToPath(new URL('./beta-webview', import.meta.url)),
       },
     },
-    plugins: [vue()],
+    plugins: [
+      vue({
+        template: {
+          compilerOptions: {
+            // treat all tags with a dash as custom elements
+            isCustomElement: (tag) => tag.includes('-'),
+          },
+        },
+      }),
+      vueDevTools(),
+      {
+        name: 'html-transform',
+        apply: 'build',
+        transformIndexHtml(html) {
+          return html.replace(
+            '<script type="module" src="node_modules/@vscode-elements/webview-playground/dist/index.js"></script>',
+            ''
+          );
+        },
+      },
+    ],
   };
 });