diff --git a/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png b/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png
index 7a4472d97..5501865d0 100644
Binary files a/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png and b/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png differ
diff --git a/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-win32.png b/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-win32.png
index fdf3ae2e7..2e7a80467 100644
Binary files a/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-win32.png and b/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-win32.png differ
diff --git a/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png b/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png
index 29a74441b..9d7a7ffaf 100644
Binary files a/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png and b/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png differ
diff --git a/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-win32.png b/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-win32.png
index 7c8323b4c..88625a20c 100644
Binary files a/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-win32.png and b/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-win32.png differ
diff --git a/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png b/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png
index 36b30a66e..fdc5a59fe 100644
Binary files a/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png and b/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png differ
diff --git a/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-win32.png b/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-win32.png
index 9ea44c555..377d8ef5f 100644
Binary files a/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-win32.png and b/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-win32.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png
index ca6ede7f4..8ed396024 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png and b/browser_tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-linux.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-win32.png
index d5594d4ca..cb55539b6 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-win32.png and b/browser_tests/interaction.spec.ts-snapshots/adjusted-widget-value-chromium-win32.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/default-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/default-chromium-linux.png
index e364f03a9..f6d7b3540 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/default-chromium-linux.png and b/browser_tests/interaction.spec.ts-snapshots/default-chromium-linux.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/default-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/default-chromium-win32.png
index 967a7b4fa..26fbe4067 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/default-chromium-win32.png and b/browser_tests/interaction.spec.ts-snapshots/default-chromium-win32.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/disconnected-edge-with-menu-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/disconnected-edge-with-menu-chromium-linux.png
index 2786ddee9..c62656914 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/disconnected-edge-with-menu-chromium-linux.png and b/browser_tests/interaction.spec.ts-snapshots/disconnected-edge-with-menu-chromium-linux.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/disconnected-edge-with-menu-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/disconnected-edge-with-menu-chromium-win32.png
index 20ee5b816..e66616508 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/disconnected-edge-with-menu-chromium-win32.png and b/browser_tests/interaction.spec.ts-snapshots/disconnected-edge-with-menu-chromium-win32.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/panned-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/panned-chromium-linux.png
index da1dd83d9..866d7d447 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/panned-chromium-linux.png and b/browser_tests/interaction.spec.ts-snapshots/panned-chromium-linux.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/panned-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/panned-chromium-win32.png
index 28d787386..8ce8db21e 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/panned-chromium-win32.png and b/browser_tests/interaction.spec.ts-snapshots/panned-chromium-win32.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png
index bbe682f83..b9882de6f 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png and b/browser_tests/interaction.spec.ts-snapshots/selected-node1-chromium-linux.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/selected-node1-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/selected-node1-chromium-win32.png
index c12e91382..bd6c52a1d 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/selected-node1-chromium-win32.png and b/browser_tests/interaction.spec.ts-snapshots/selected-node1-chromium-win32.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png
index 17e635f2a..b1c3569e4 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png and b/browser_tests/interaction.spec.ts-snapshots/selected-node2-chromium-linux.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/selected-node2-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/selected-node2-chromium-win32.png
index a4a367c0d..c8a301288 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/selected-node2-chromium-win32.png and b/browser_tests/interaction.spec.ts-snapshots/selected-node2-chromium-win32.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png
index 791c74151..b0edeba61 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png and b/browser_tests/interaction.spec.ts-snapshots/zoomed-in-chromium-linux.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/zoomed-in-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/zoomed-in-chromium-win32.png
index c94ece8ce..44570a544 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/zoomed-in-chromium-win32.png and b/browser_tests/interaction.spec.ts-snapshots/zoomed-in-chromium-win32.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png
index 0ac44001a..f6d7b3540 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png and b/browser_tests/interaction.spec.ts-snapshots/zoomed-out-chromium-linux.png differ
diff --git a/browser_tests/interaction.spec.ts-snapshots/zoomed-out-chromium-win32.png b/browser_tests/interaction.spec.ts-snapshots/zoomed-out-chromium-win32.png
index 967a7b4fa..26fbe4067 100644
Binary files a/browser_tests/interaction.spec.ts-snapshots/zoomed-out-chromium-win32.png and b/browser_tests/interaction.spec.ts-snapshots/zoomed-out-chromium-win32.png differ
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png
index e24037e18..b3166d65b 100644
Binary files a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png and b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png differ
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-win32.png b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-win32.png
index a1460ffb2..8cd11f334 100644
Binary files a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-win32.png and b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-win32.png differ
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png
index 3eec3f233..4195bed25 100644
Binary files a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png and b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-linux.png differ
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-win32.png b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-win32.png
index b11730051..b472cd762 100644
Binary files a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-win32.png and b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-collapsed-chromium-win32.png differ
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png
index 45ab0746f..6beee8947 100644
Binary files a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png and b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-linux.png differ
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-win32.png b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-win32.png
index 0f350f11a..170bf4bde 100644
Binary files a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-win32.png and b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-group-node-chromium-win32.png differ
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png
index f898378e2..8b7a8d1cb 100644
Binary files a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png and b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png differ
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-win32.png b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-win32.png
index 4b21608ae..97ef11c37 100644
Binary files a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-win32.png and b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-win32.png differ
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-widget-converted-chromium-linux.png b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-widget-converted-chromium-linux.png
index d40e0a585..69f637488 100644
Binary files a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-widget-converted-chromium-linux.png and b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-widget-converted-chromium-linux.png differ
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-widget-converted-chromium-win32.png b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-widget-converted-chromium-win32.png
index 11c30d344..b4a05f2bb 100644
Binary files a/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-widget-converted-chromium-win32.png and b/browser_tests/rightClickMenu.spec.ts-snapshots/right-click-node-widget-converted-chromium-win32.png differ
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png b/browser_tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png
index 3ed7d43d2..b6bdfae42 100644
Binary files a/browser_tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png and b/browser_tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-linux.png differ
diff --git a/browser_tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-win32.png b/browser_tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-win32.png
index b7eefd87c..8055342ff 100644
Binary files a/browser_tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-win32.png and b/browser_tests/rightClickMenu.spec.ts-snapshots/selected-2-nodes-chromium-win32.png differ
diff --git a/index.html b/index.html
index a43969556..f3ebcaf8c 100644
--- a/index.html
+++ b/index.html
@@ -12,19 +12,15 @@
 				font-family: 'Roboto Mono', 'Noto Color Emoji';
 			}
 		</style> -->
+		<script type="module" src="/src/main.ts"></script>
 		<script type="module">
 			console.log("ComfyUI Front-end version:", __COMFYUI_FRONTEND_VERSION__);
-			import { app } from "./src/scripts/app";
-			(async () => {
-				await app.setup();
-				window.app = app;
-				window.graph = app.graph;
-			})();
 		</script>
 		<link rel="stylesheet" type="text/css" href="/user.css" />
 		<link rel="stylesheet" type="text/css" href="/materialdesignicons.min.css" />
 	</head>
 	<body class="litegraph">
+		<div id="vue-app"></div>
 		<div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">
 			<main class="comfy-user-selection-inner">
 				<h1>ComfyUI</h1>
diff --git a/package-lock.json b/package-lock.json
index 09429c889..5b519b557 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,15 @@
       "name": "comfyui-frontend",
       "version": "1.0.1",
       "dependencies": {
-        "@comfyorg/litegraph": "^0.7.23",
+        "@comfyorg/litegraph": "^0.7.25",
+        "@primevue/themes": "^4.0.0-rc.2",
+        "@vitejs/plugin-vue": "^5.0.5",
         "dotenv": "^16.4.5",
+        "fuse.js": "^7.0.0",
+        "lodash": "^4.17.21",
+        "primeicons": "^7.0.0",
+        "primevue": "^4.0.0-rc.2",
+        "vue": "^3.4.31",
         "zod": "^3.23.8",
         "zod-validation-error": "^3.3.0"
       },
@@ -18,7 +25,9 @@
         "@babel/preset-env": "^7.22.20",
         "@playwright/test": "^1.44.1",
         "@types/jest": "^29.5.12",
+        "@types/lodash": "^4.17.6",
         "@types/node": "^20.14.8",
+        "autoprefixer": "^10.4.19",
         "babel-plugin-transform-import-meta": "^2.2.1",
         "babel-plugin-transform-rename-import": "^2.3.0",
         "chalk": "^5.3.0",
@@ -28,7 +37,9 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "lint-staged": "^15.2.7",
+        "postcss": "^8.4.39",
         "prettier": "^3.3.2",
+        "tailwindcss": "^3.4.4",
         "ts-jest": "^29.1.4",
         "ts-node": "^10.9.2",
         "tsx": "^4.15.6",
@@ -38,6 +49,18 @@
         "zip-dir": "^2.0.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -478,7 +501,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz",
       "integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1793,9 +1815,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.7.23",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.23.tgz",
-      "integrity": "sha512-jW7oNubtCtP9aUiG7RPQB5Tzfl9f5NdnpH9TzDtPLF22qBt2TU0KUo20dvfi3pv+uZigGialJkbhV9nGSRFRLw=="
+      "version": "0.7.25",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.25.tgz",
+      "integrity": "sha512-/Zk9lT0Cq17IFrlntZ8fKmiH6CpMXaEmAdWHdWtaiCDybNFAqCpr7w0JDjax0dR4pjYqHSAPtHUSjLvD+5q8Kw=="
     },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
@@ -1826,7 +1848,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -1842,7 +1863,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1858,7 +1878,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1874,7 +1893,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1890,7 +1908,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1906,7 +1923,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1922,7 +1938,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -1938,7 +1953,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -1954,7 +1968,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1970,7 +1983,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1986,7 +1998,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2002,7 +2013,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2018,7 +2028,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2034,7 +2043,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2050,7 +2058,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2066,7 +2073,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2082,7 +2088,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2098,7 +2103,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -2114,7 +2118,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -2130,7 +2133,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -2146,7 +2148,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -2162,7 +2163,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -2178,7 +2178,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -2187,6 +2186,102 @@
         "node": ">=12"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -2875,8 +2970,7 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
@@ -2923,6 +3017,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@playwright/test": {
       "version": "1.45.1",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.1.tgz",
@@ -2938,6 +3042,50 @@
         "node": ">=18"
       }
     },
+    "node_modules/@primeuix/styled": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.1.tgz",
+      "integrity": "sha512-0psCSZr3906UwC4mTl2ol4aDoLvdbM0ekJFLKvCvC2oQ9z2YZhmUOVZQNNxBW34mChDzZYcAcRWXADQz3z5lBg==",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.0-rc.2.tgz",
+      "integrity": "sha512-S0RGGdW/M/ogIKeif6JwkJrPLC8pyuBYy2zZlloXXj6Fpvk416sMpO308sx89fqvba2d5poT9a+AbkGob4TDtQ==",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.0-rc.2.tgz",
+      "integrity": "sha512-VZFETBtmpAduGxXhxcYoqiuGriidyz4XR/4NcrR87CQpUWmT13PXfRoqZ1hLXwNZp1XferT1F5GtY1mHcYxJdw==",
+      "dependencies": {
+        "@primevue/core": "4.0.0-rc.2"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/themes": {
+      "version": "4.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.0-rc.2.tgz",
+      "integrity": "sha512-4y9NlDDwA4J51aNoO1+7anPOwjNTpCzetOZlKY7pQfxxpAmKUM4ouf87kjQz0/IFjBIxN4ZK3XfwtamFoL08Ug==",
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "@primeuix/styled": "^0.0.1"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.18.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
@@ -2945,7 +3093,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -2958,7 +3105,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -2971,7 +3117,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -2984,7 +3129,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -2997,7 +3141,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3010,7 +3153,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3023,7 +3165,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3036,7 +3177,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3049,7 +3189,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3062,7 +3201,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3075,7 +3213,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3088,7 +3225,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3101,7 +3237,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -3114,7 +3249,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -3127,7 +3261,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -3140,7 +3273,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -3247,8 +3379,7 @@
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
@@ -3304,11 +3435,17 @@
         "parse5": "^7.0.0"
       }
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.6.tgz",
+      "integrity": "sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "20.14.10",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
       "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -3340,6 +3477,109 @@
       "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
       "dev": true
     },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.5.tgz",
+      "integrity": "sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.31.tgz",
+      "integrity": "sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==",
+      "dependencies": {
+        "@babel/parser": "^7.24.7",
+        "@vue/shared": "3.4.31",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.31.tgz",
+      "integrity": "sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==",
+      "dependencies": {
+        "@vue/compiler-core": "3.4.31",
+        "@vue/shared": "3.4.31"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.31.tgz",
+      "integrity": "sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==",
+      "dependencies": {
+        "@babel/parser": "^7.24.7",
+        "@vue/compiler-core": "3.4.31",
+        "@vue/compiler-dom": "3.4.31",
+        "@vue/compiler-ssr": "3.4.31",
+        "@vue/shared": "3.4.31",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.10",
+        "postcss": "^8.4.38",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.31.tgz",
+      "integrity": "sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.4.31",
+        "@vue/shared": "3.4.31"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.31.tgz",
+      "integrity": "sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==",
+      "dependencies": {
+        "@vue/shared": "3.4.31"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.31.tgz",
+      "integrity": "sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==",
+      "dependencies": {
+        "@vue/reactivity": "3.4.31",
+        "@vue/shared": "3.4.31"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.31.tgz",
+      "integrity": "sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==",
+      "dependencies": {
+        "@vue/reactivity": "3.4.31",
+        "@vue/runtime-core": "3.4.31",
+        "@vue/shared": "3.4.31",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.31.tgz",
+      "integrity": "sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.4.31",
+        "@vue/shared": "3.4.31"
+      },
+      "peerDependencies": {
+        "vue": "3.4.31"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz",
+      "integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA=="
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -3429,6 +3669,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -3469,6 +3715,43 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001599",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/babel-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -3821,6 +4104,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001640",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001640.tgz",
@@ -4231,6 +4523,18 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -4255,6 +4559,11 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "dev": true
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
     "node_modules/data-urls": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
@@ -4333,6 +4642,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
     "node_modules/diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -4351,6 +4666,12 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -4375,6 +4696,12 @@
         "url": "https://dotenvx.com"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.817",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.817.tgz",
@@ -4403,7 +4730,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -4424,7 +4750,6 @@
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
       "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -4519,6 +4844,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -4647,6 +4977,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
+      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -4661,6 +5019,19 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -4694,7 +5065,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -4713,6 +5083,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
+      "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -5208,6 +5586,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
+      "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz",
@@ -6791,6 +7187,15 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.21.6",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
+      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7153,6 +7558,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -7275,6 +7685,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.10",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
+      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      }
+    },
     "node_modules/make-dir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
@@ -7387,17 +7805,36 @@
         "node": "*"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7438,6 +7875,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -7456,6 +7902,24 @@
       "integrity": "sha512-QK0sRs7MKv0tKe1+5uZIQk/C8XGza4DAnztJG8iD+TpJIORARrCxczA738awHrZoHeTjSSoHqao2teO0dC/gFQ==",
       "dev": true
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -7531,6 +7995,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
+      "dev": true
+    },
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@@ -7600,11 +8070,35 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz",
+      "integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==",
+      "dev": true,
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
-      "dev": true
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -7630,6 +8124,15 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
@@ -7699,7 +8202,6 @@
       "version": "8.4.39",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
       "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7723,6 +8225,115 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
     "node_modules/prettier": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
@@ -7764,6 +8375,23 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
+    },
+    "node_modules/primevue": {
+      "version": "4.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.0-rc.2.tgz",
+      "integrity": "sha512-1SICPga4FA5sx27h5FBnMHWidPJRn58mPZj0LNlJygp+9P5ksrtRRNdfDPzmRB+fWcmhvbIxk46meyHeMw1wTQ==",
+      "dependencies": {
+        "@primevue/core": "4.0.0-rc.2",
+        "@primevue/icons": "4.0.0-rc.2"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -7846,6 +8474,15 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "dev": true
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
@@ -8051,7 +8688,6 @@
       "version": "4.18.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz",
       "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
       },
@@ -8227,7 +8863,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
       "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8317,6 +8952,36 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/string-width/node_modules/ansi-regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -8356,6 +9021,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
@@ -8386,6 +9064,84 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.2.tgz",
+      "integrity": "sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -8416,6 +9172,70 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "node_modules/tailwindcss": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
+      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@@ -8430,6 +9250,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -8484,6 +9325,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
     "node_modules/ts-jest": {
       "version": "29.1.5",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.5.tgz",
@@ -8636,7 +9483,7 @@
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
       "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8649,7 +9496,7 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
@@ -8770,7 +9617,6 @@
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
       "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==",
-      "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.39",
@@ -8839,6 +9685,26 @@
         "vite": "^5.0.0"
       }
     },
+    "node_modules/vue": {
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.31.tgz",
+      "integrity": "sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.4.31",
+        "@vue/compiler-sfc": "3.4.31",
+        "@vue/runtime-dom": "3.4.31",
+        "@vue/server-renderer": "3.4.31",
+        "@vue/shared": "3.4.31"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -8935,6 +9801,86 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/wrap-ansi/node_modules/ansi-regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
diff --git a/package.json b/package.json
index 70ebc693a..ea4418d26 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "deploy": "node scripts/deploy.js",
     "zipdist": "node scripts/zipdist.js",
     "typecheck": "tsc --noEmit",
-    "format": "prettier --write 'src/**/*.{js,ts,tsx}'",
+    "format": "prettier --write 'src/**/*.{js,ts,tsx,vue}'",
     "test": "npm run build && jest",
     "test:generate:examples": "npx tsx tests-ui/extractExamples",
     "test:generate": "npx tsx tests-ui/setup",
@@ -22,7 +22,9 @@
     "@babel/preset-env": "^7.22.20",
     "@playwright/test": "^1.44.1",
     "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.6",
     "@types/node": "^20.14.8",
+    "autoprefixer": "^10.4.19",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "chalk": "^5.3.0",
@@ -32,7 +34,9 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.7",
+    "postcss": "^8.4.39",
     "prettier": "^3.3.2",
+    "tailwindcss": "^3.4.4",
     "ts-jest": "^29.1.4",
     "ts-node": "^10.9.2",
     "tsx": "^4.15.6",
@@ -42,13 +46,20 @@
     "zip-dir": "^2.0.0"
   },
   "dependencies": {
-    "@comfyorg/litegraph": "^0.7.23",
+    "@comfyorg/litegraph": "^0.7.25",
+    "@primevue/themes": "^4.0.0-rc.2",
+    "@vitejs/plugin-vue": "^5.0.5",
     "dotenv": "^16.4.5",
+    "fuse.js": "^7.0.0",
+    "lodash": "^4.17.21",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.0.0-rc.2",
+    "vue": "^3.4.31",
     "zod": "^3.23.8",
     "zod-validation-error": "^3.3.0"
   },
   "lint-staged": {
-    "src/**/*.{js,ts,tsx}": [
+    "src/**/*.{js,ts,tsx,vue}": [
       "prettier --write",
       "git add"
     ]
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 000000000..2e7af2b7f
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 000000000..a8eb5f3b2
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,66 @@
+<template>
+  <ProgressSpinner v-if="isLoading" class="spinner"></ProgressSpinner>
+  <div v-else>
+    <NodeSearchboxPopover v-if="nodeSearchEnabled" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, provide, ref } from "vue";
+import NodeSearchboxPopover from "@/components/NodeSearchBoxPopover.vue";
+import ProgressSpinner from "primevue/progressspinner";
+import { api } from "@/scripts/api";
+import { NodeSearchService } from "./services/nodeSearchService";
+import { ColorPaletteLoadedEvent } from "./types/colorPalette";
+import { LiteGraphNodeSearchSettingEvent } from "./scripts/ui";
+
+const isLoading = ref(true);
+const nodeSearchEnabled = ref(false);
+const nodeSearchService = ref<NodeSearchService>();
+
+const updateTheme = (e: ColorPaletteLoadedEvent) => {
+  const DARK_THEME_CLASS = "dark-theme";
+  const isDarkTheme = e.detail.id !== "light";
+
+  if (isDarkTheme) {
+    document.body.classList.add(DARK_THEME_CLASS);
+  } else {
+    document.body.classList.remove(DARK_THEME_CLASS);
+  }
+};
+
+const updateNodeSearchSetting = (e: LiteGraphNodeSearchSettingEvent) => {
+  nodeSearchEnabled.value = !e.detail;
+};
+
+onMounted(async () => {
+  const nodeDefs = Object.values(await api.getNodeDefs());
+  nodeSearchService.value = new NodeSearchService(nodeDefs);
+  isLoading.value = false;
+
+  document.addEventListener("comfy:setting:color-palette-loaded", updateTheme);
+  document.addEventListener(
+    "comfy:setting:litegraph-node-search",
+    updateNodeSearchSetting
+  );
+});
+
+onUnmounted(() => {
+  document.removeEventListener(
+    "comfy:setting:color-palette-loaded",
+    updateTheme
+  );
+  document.removeEventListener(
+    "comfy:setting:litegraph-node-search",
+    updateNodeSearchSetting
+  );
+});
+
+provide("nodeSearchService", nodeSearchService);
+</script>
+
+<style scoped>
+.spinner {
+  @apply absolute inset-0 flex justify-center items-center h-screen;
+}
+</style>
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 0ac857aff..72ab5794c 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -36,14 +36,15 @@ body {
 	height: 100vh;
 	margin: 0;
 	overflow: hidden;
-	background-color: var(--bg-color);
-	color: var(--fg-color);
 	grid-template-columns: auto 1fr auto;
 	grid-template-rows: auto auto 1fr auto;
+	background-color: var(--bg-color);
+	color: var(--fg-color);
 	min-height: -webkit-fill-available;
 	max-height: -webkit-fill-available;
 	min-width: -webkit-fill-available;
 	max-width: -webkit-fill-available;
+	font-family: Arial, sans-serif;
 }
 
 .comfyui-body-top {
@@ -149,7 +150,7 @@ body {
 	right: 0;
 	text-align: center;
 	z-index: 999;
-	width: 170px;
+	width: 190px;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -634,3 +635,17 @@ dialog::backdrop {
 audio.comfy-audio.empty-audio-widget {
 	display: none;
 }
+
+#vue-app {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+}
+
+/* Set auto complete panel's width as it is not accessible within vue-root */
+.p-autocomplete-overlay {
+	max-width: 25vw;
+}
diff --git a/src/components/NodeSearchBox.vue b/src/components/NodeSearchBox.vue
new file mode 100644
index 000000000..6a17366f6
--- /dev/null
+++ b/src/components/NodeSearchBox.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="comfy-vue-node-search-container">
+    <NodeSearchFilter @addFilter="onAddFilter" />
+    <AutoComplete
+      :model-value="props.filters"
+      class="comfy-vue-node-search-box"
+      scrollHeight="28rem"
+      :placeholder="placeholder"
+      :input-id="inputId"
+      append-to="self"
+      :suggestions="suggestions"
+      :min-length="0"
+      @complete="search($event.query)"
+      @option-select="emit('addNode', $event.value)"
+      complete-on-focus
+      auto-option-focus
+      force-selection
+      multiple
+    >
+      <template v-slot:option="{ option }">
+        <div class="option-container">
+          <div class="option-display-name">
+            {{ option.display_name }}
+            <NodeSourceChip
+              v-if="option.python_module !== undefined"
+              :python_module="option.python_module"
+            />
+          </div>
+          <div v-if="option.description" class="option-description">
+            {{ option.description }}
+          </div>
+        </div>
+      </template>
+      <!-- FilterAndValue -->
+      <template v-slot:chip="{ value }">
+        <Chip removable @remove="onRemoveFilter($event, value)">
+          <Badge size="small" :class="value[0].invokeSequence + '-badge'">
+            {{ value[0].invokeSequence.toUpperCase() }}
+          </Badge>
+          {{ value[1] }}
+        </Chip>
+      </template>
+    </AutoComplete>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, Ref, ref } from "vue";
+import AutoComplete from "primevue/autocomplete";
+import Chip from "primevue/chip";
+import Badge from "primevue/badge";
+import NodeSearchFilter from "@/components/NodeSearchFilter.vue";
+import NodeSourceChip from "@/components/NodeSourceChip.vue";
+import { ComfyNodeDef } from "@/types/apiTypes";
+import {
+  NodeSearchService,
+  type FilterAndValue,
+} from "@/services/nodeSearchService";
+
+const props = defineProps({
+  filters: {
+    type: Array<FilterAndValue>,
+  },
+  searchLimit: {
+    type: Number,
+    default: 64,
+  },
+});
+
+const nodeSearchService = (
+  inject("nodeSearchService") as Ref<NodeSearchService>
+).value;
+
+const inputId = `comfy-vue-node-search-box-input-${Math.random()}`;
+const suggestions = ref<ComfyNodeDef[]>([]);
+const placeholder = computed(() => {
+  return props.filters.length === 0 ? "Search for nodes" : "";
+});
+
+const search = (query: string) => {
+  suggestions.value = nodeSearchService.searchNode(query, props.filters, {
+    limit: props.searchLimit,
+  });
+};
+
+const emit = defineEmits(["addFilter", "removeFilter", "addNode"]);
+
+const reFocusInput = () => {
+  const inputElement = document.getElementById(inputId) as HTMLInputElement;
+  if (inputElement) {
+    inputElement.blur();
+    inputElement.focus();
+  }
+};
+
+onMounted(reFocusInput);
+const onAddFilter = (filterAndValue: FilterAndValue) => {
+  emit("addFilter", filterAndValue);
+  reFocusInput();
+};
+const onRemoveFilter = (event: Event, filterAndValue: FilterAndValue) => {
+  event.stopPropagation();
+  event.preventDefault();
+  emit("removeFilter", filterAndValue);
+  reFocusInput();
+};
+</script>
+
+<style scoped>
+.comfy-vue-node-search-container {
+  @apply flex justify-center items-center;
+}
+
+.comfy-vue-node-search-container * {
+  pointer-events: auto;
+}
+
+.comfy-vue-node-search-box {
+  @apply min-w-96 w-full z-10;
+}
+
+.option-container {
+  @apply flex flex-col px-4 py-2 cursor-pointer overflow-hidden;
+}
+
+.option-container:hover .option-description {
+  @apply overflow-visible;
+  /* Allows text to wrap */
+  white-space: normal;
+}
+
+.option-display-name {
+  @apply font-semibold;
+}
+
+.option-description {
+  @apply text-sm text-gray-400 overflow-hidden text-ellipsis;
+  /* Keeps the text on a single line by default */
+  white-space: nowrap;
+}
+
+.i-badge {
+  @apply bg-green-500 text-white;
+}
+
+.o-badge {
+  @apply bg-red-500 text-white;
+}
+
+.c-badge {
+  @apply bg-blue-500 text-white;
+}
+
+.s-badge {
+  @apply bg-yellow-500;
+}
+</style>
diff --git a/src/components/NodeSearchBoxPopover.vue b/src/components/NodeSearchBoxPopover.vue
new file mode 100644
index 000000000..72448e81e
--- /dev/null
+++ b/src/components/NodeSearchBoxPopover.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <Dialog v-model:visible="visible" pt:root:class="invisible-dialog-root">
+      <template #container>
+        <NodeSearchBox
+          :filters="nodeFilters"
+          @add-filter="addFilter"
+          @remove-filter="removeFilter"
+          @add-node="addNode"
+        />
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { app } from "@/scripts/app";
+import { inject, onMounted, onUnmounted, reactive, Ref, ref } from "vue";
+import NodeSearchBox from "./NodeSearchBox.vue";
+import Dialog from "primevue/dialog";
+import { LiteGraph, LiteGraphCanvasEvent } from "@comfyorg/litegraph";
+import {
+  FilterAndValue,
+  NodeSearchService,
+} from "@/services/nodeSearchService";
+import { ComfyNodeDef } from "@/types/apiTypes";
+
+interface LiteGraphPointerEvent extends Event {
+  canvasX: number;
+  canvasY: number;
+}
+
+const visible = ref(false);
+const triggerEvent = ref<LiteGraphCanvasEvent | null>(null);
+const getNewNodeLocation = (): [number, number] => {
+  if (triggerEvent.value === null) {
+    return [100, 100];
+  }
+
+  const originalEvent = triggerEvent.value.detail
+    .originalEvent as LiteGraphPointerEvent;
+  return [originalEvent.canvasX, originalEvent.canvasY];
+};
+const nodeFilters = reactive([]);
+const addFilter = (filter: FilterAndValue) => {
+  nodeFilters.push(filter);
+};
+const removeFilter = (filter: FilterAndValue) => {
+  const index = nodeFilters.findIndex((f) => f === filter);
+  if (index !== -1) {
+    nodeFilters.splice(index, 1);
+  }
+};
+const clearFilters = () => {
+  nodeFilters.splice(0, nodeFilters.length);
+};
+const closeDialog = () => {
+  clearFilters();
+  visible.value = false;
+};
+const addNode = (nodeDef: ComfyNodeDef) => {
+  closeDialog();
+  const node = LiteGraph.createNode(nodeDef.name, nodeDef.display_name, {});
+  if (node) {
+    node.pos = getNewNodeLocation();
+    app.graph.add(node);
+  }
+};
+const nodeSearchService = (
+  inject("nodeSearchService") as Ref<NodeSearchService>
+).value;
+
+const canvasEventHandler = (e: LiteGraphCanvasEvent) => {
+  const shiftPressed = (e.detail.originalEvent as KeyboardEvent).shiftKey;
+  if (e.detail.subType === "empty-release" && shiftPressed) {
+    const destIsInput = e.detail.linkReleaseContext.node_from !== undefined;
+    const filter = destIsInput
+      ? nodeSearchService.getFilterById("input")
+      : nodeSearchService.getFilterById("output");
+    const value = destIsInput
+      ? e.detail.linkReleaseContext.type_filter_in
+      : e.detail.linkReleaseContext.type_filter_out;
+
+    addFilter([filter, value]);
+  }
+  triggerEvent.value = e;
+  visible.value = true;
+};
+
+const handleEscapeKeyPress = (event) => {
+  if (event.key === "Escape") {
+    closeDialog();
+  }
+};
+
+onMounted(() => {
+  document.addEventListener("litegraph:canvas", canvasEventHandler);
+  document.addEventListener("keydown", handleEscapeKeyPress);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("litegraph:canvas", canvasEventHandler);
+  document.removeEventListener("keydown", handleEscapeKeyPress);
+});
+</script>
+
+<style>
+.invisible-dialog-root {
+  width: 30%;
+  min-width: 24rem;
+  max-width: 48rem;
+  border: 0 !important;
+  background-color: transparent !important;
+}
+</style>
diff --git a/src/components/NodeSearchFilter.vue b/src/components/NodeSearchFilter.vue
new file mode 100644
index 000000000..d24eda101
--- /dev/null
+++ b/src/components/NodeSearchFilter.vue
@@ -0,0 +1,101 @@
+<template>
+  <Button
+    icon="pi pi-filter"
+    severity="secondary"
+    class="filter-button"
+    @click="showModal"
+  />
+  <Dialog v-model:visible="visible" class="dialog">
+    <template #header>
+      <h3>Add node filter condition</h3>
+    </template>
+    <div class="dialog-body">
+      <SelectButton
+        v-model="selectedFilter"
+        :options="filters"
+        :allowEmpty="false"
+        optionLabel="name"
+        @change="updateSelectedFilterValue"
+      />
+      <AutoComplete
+        v-model="selectedFilterValue"
+        :suggestions="filterValues"
+        :min-length="0"
+        @complete="(event) => updateFilterValues(event.query)"
+        completeOnFocus
+        forceSelection
+        dropdown
+      ></AutoComplete>
+    </div>
+    <template #footer>
+      <Button type="button" label="Add" @click="submit"></Button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import {
+  NodeFilter,
+  NodeSearchService,
+  type FilterAndValue,
+} from "@/services/nodeSearchService";
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
+import SelectButton from "primevue/selectbutton";
+import AutoComplete from "primevue/autocomplete";
+import { inject, ref, onMounted } from "vue";
+
+const visible = ref<boolean>(false);
+const nodeSearchService: NodeSearchService = inject("nodeSearchService").value;
+
+const filters = ref<NodeFilter[]>([]);
+const selectedFilter = ref<NodeFilter>();
+const filterValues = ref<string[]>([]);
+const selectedFilterValue = ref<string>("");
+
+onMounted(() => {
+  filters.value = nodeSearchService.nodeFilters;
+  selectedFilter.value = nodeSearchService.nodeFilters[0];
+});
+
+const emit = defineEmits(["addFilter"]);
+
+const updateSelectedFilterValue = () => {
+  updateFilterValues("");
+  if (filterValues.value.includes(selectedFilterValue.value)) {
+    return;
+  }
+  selectedFilterValue.value = filterValues.value[0];
+};
+
+const updateFilterValues = (query: string) => {
+  filterValues.value = selectedFilter.value.fuseSearch.search(query);
+};
+
+const submit = () => {
+  visible.value = false;
+  emit("addFilter", [
+    selectedFilter.value,
+    selectedFilterValue.value,
+  ] as FilterAndValue);
+};
+
+const showModal = () => {
+  updateSelectedFilterValue();
+  visible.value = true;
+};
+</script>
+
+<style scoped>
+.filter-button {
+  z-index: 10;
+}
+
+.dialog {
+  @apply min-w-96;
+}
+
+.dialog-body {
+  @apply flex flex-col space-y-2;
+}
+</style>
diff --git a/src/components/NodeSourceChip.vue b/src/components/NodeSourceChip.vue
new file mode 100644
index 000000000..ea3aa7296
--- /dev/null
+++ b/src/components/NodeSourceChip.vue
@@ -0,0 +1,29 @@
+<template>
+  <Chip :class="nodeSource.className">
+    {{ nodeSource.displayText }}
+  </Chip>
+</template>
+
+<script setup lang="ts">
+import { getNodeSource } from "@/types/nodeSource";
+import Chip from "primevue/chip";
+import { computed } from "vue";
+
+const props = defineProps({
+  python_module: {
+    type: String,
+    required: true,
+  },
+});
+
+const nodeSource = computed(() => getNodeSource(props.python_module));
+</script>
+
+<style scoped>
+.comfy-core,
+.comfy-custom-nodes,
+.comfy-unknown {
+  font-size: small;
+  font-weight: lighter;
+}
+</style>
diff --git a/src/extensions/core/colorPalette.ts b/src/extensions/core/colorPalette.ts
index 711df0d6d..94431e769 100644
--- a/src/extensions/core/colorPalette.ts
+++ b/src/extensions/core/colorPalette.ts
@@ -1,6 +1,6 @@
 import { app } from "../../scripts/app";
 import { $el } from "../../scripts/ui";
-import type { ColorPalettes } from "@/types/colorPalette";
+import type { ColorPalettes, Palette } from "@/types/colorPalette";
 import { LGraphCanvas, LiteGraph } from "@comfyorg/litegraph";
 
 // Manage color palettes
@@ -626,7 +626,7 @@ app.registerExtension({
       await loadColorPalette(getColorPalette());
     };
 
-    const loadColorPalette = async (colorPalette) => {
+    const loadColorPalette = async (colorPalette: Palette) => {
       colorPalette = await completeColorPalette(colorPalette);
       if (colorPalette.colors) {
         // Sets the colors of node slots and links
@@ -671,6 +671,12 @@ app.registerExtension({
         }
         app.canvas.draw(true, true);
       }
+
+      document.dispatchEvent(
+        new CustomEvent("comfy:setting:color-palette-loaded", {
+          detail: colorPalette,
+        })
+      );
     };
 
     const getColorPalette = (colorPaletteId?) => {
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 000000000..884fa3102
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,28 @@
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+import Aura from "@primevue/themes/aura";
+import "primeicons/primeicons.css";
+
+import App from "./App.vue";
+import { app as comfyApp } from "@/scripts/app";
+
+const app = createApp(App);
+app
+  .use(PrimeVue, {
+    theme: {
+      preset: Aura,
+      options: {
+        prefix: "p",
+        cssLayer: false,
+        // This is a workaround for the issue with the dark mode selector
+        // https://github.com/primefaces/primevue/issues/5515
+        darkModeSelector: ".dark-theme, :root:has(.dark-theme)",
+      },
+    },
+  })
+  .mount("#vue-app");
+
+comfyApp.setup().then(() => {
+  window["app"] = comfyApp;
+  window["graph"] = comfyApp.graph;
+});
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 7dadf294d..f2e6ee23c 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -1145,7 +1145,7 @@ export class ComfyApp {
       // copy nodes and clear clipboard
       if (
         e.target instanceof Element &&
-        e.target.className === "litegraph" &&
+        e.target.classList.contains("litegraph") &&
         this.canvas.selected_nodes
       ) {
         this.canvas.copyToClipboard();
@@ -1858,6 +1858,7 @@ export class ComfyApp {
     this.#addAfterConfigureHandler();
 
     this.canvas = new LGraphCanvas(canvasEl, this.graph);
+    this.ui.settings.refreshSetting("Comfy.NodeSearchBoxImpl");
     this.ctx = canvasEl.getContext("2d");
 
     LiteGraph.release_link_on_empty_shows_menu = true;
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index 9926af7e4..81c6ba20a 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -7,6 +7,8 @@ import { TaskItem } from "@/types/apiTypes";
 
 export const ComfyDialog = _ComfyDialog;
 
+export type LiteGraphNodeSearchSettingEvent = CustomEvent<boolean>;
+
 type Position2D = {
   x: number;
   y: number;
@@ -420,6 +422,26 @@ export class ComfyUI {
       defaultValue: 0,
     });
 
+    this.settings.addSetting({
+      id: "Comfy.NodeSearchBoxImpl",
+      name: "Node Search box implementation",
+      type: "combo",
+      options: ["default", "litegraph (legacy)"],
+      defaultValue: "default",
+      onChange: (value?: string) => {
+        if (value === undefined) return;
+        if (!app.canvas) return;
+
+        const useLitegraphSearch = value === "litegraph (legacy)";
+        app.canvas.allow_searchbox = useLitegraphSearch;
+        document.dispatchEvent(
+          new CustomEvent("comfy:setting:litegraph-node-search", {
+            detail: useLitegraphSearch,
+          })
+        );
+      },
+    });
+
     const fileInput = $el("input", {
       id: "comfy-file-input",
       type: "file",
diff --git a/src/scripts/ui/settings.ts b/src/scripts/ui/settings.ts
index 98b9599cc..dd2ee4c60 100644
--- a/src/scripts/ui/settings.ts
+++ b/src/scripts/ui/settings.ts
@@ -150,6 +150,12 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
     });
   }
 
+  refreshSetting(id: string) {
+    const value = this.getSettingValue(id);
+    this.settingsLookup[id].onChange?.(value);
+    this.#dispatchChange(id, value);
+  }
+
   addSetting(params: SettingParams) {
     const {
       id,
diff --git a/src/services/nodeSearchService.ts b/src/services/nodeSearchService.ts
new file mode 100644
index 000000000..4231046e8
--- /dev/null
+++ b/src/services/nodeSearchService.ts
@@ -0,0 +1,168 @@
+import { ComfyNodeDef } from "@/types/apiTypes";
+import { getNodeSource } from "@/types/nodeSource";
+import Fuse, { IFuseOptions, FuseSearchOptions } from "fuse.js";
+import _ from "lodash";
+
+export class FuseSearch<T> {
+  private fuse: Fuse<T>;
+  public readonly data: T[];
+
+  constructor(
+    data: T[],
+    options?: IFuseOptions<T>,
+    createIndex: boolean = true
+  ) {
+    this.data = data;
+    const index =
+      createIndex && options?.keys
+        ? Fuse.createIndex(options.keys, data)
+        : undefined;
+    this.fuse = new Fuse(data, options, index);
+  }
+
+  public search(query: string, options?: FuseSearchOptions): T[] {
+    if (!query || query === "") {
+      return [...this.data];
+    }
+    return this.fuse.search(query, options).map((result) => result.item);
+  }
+}
+
+export type FilterAndValue<T = string> = [NodeFilter<T>, T];
+
+export abstract class NodeFilter<FilterOptionT = string> {
+  public abstract readonly id: string;
+  public abstract readonly name: string;
+  public abstract readonly invokeSequence: string;
+  public abstract readonly longInvokeSequence: string;
+  public readonly fuseSearch: FuseSearch<FilterOptionT>;
+
+  constructor(nodeDefs: ComfyNodeDef[], options?: IFuseOptions<FilterOptionT>) {
+    this.fuseSearch = new FuseSearch(this.getAllNodeOptions(nodeDefs), options);
+  }
+
+  private getAllNodeOptions(nodeDefs: ComfyNodeDef[]): FilterOptionT[] {
+    return [
+      ...new Set(
+        nodeDefs.reduce((acc, nodeDef) => {
+          return [...acc, ...this.getNodeOptions(nodeDef)];
+        }, [])
+      ),
+    ];
+  }
+
+  public abstract getNodeOptions(node: ComfyNodeDef): FilterOptionT[];
+
+  public matches(node: ComfyNodeDef, value: FilterOptionT): boolean {
+    return this.getNodeOptions(node).includes(value);
+  }
+}
+
+export class InputTypeFilter extends NodeFilter<string> {
+  public readonly id: string = "input";
+  public readonly name = "Input Type";
+  public readonly invokeSequence = "i";
+  public readonly longInvokeSequence = "input";
+
+  public override getNodeOptions(node: ComfyNodeDef): string[] {
+    const inputs = {
+      ...(node.input.required || {}),
+      ...(node.input.optional || {}),
+    };
+    return Object.values(inputs).map((input) => {
+      const [inputType, inputSpec] = input;
+      return typeof inputType === "string" ? inputType : "COMBO";
+    });
+  }
+}
+
+export class OutputTypeFilter extends NodeFilter<string> {
+  public readonly id: string = "output";
+  public readonly name = "Output Type";
+  public readonly invokeSequence = "o";
+  public readonly longInvokeSequence = "output";
+
+  public override getNodeOptions(node: ComfyNodeDef): string[] {
+    const outputs = node.output;
+    return outputs.map((output) => {
+      return typeof output === "string" ? output : output[0];
+    });
+  }
+}
+
+export class NodeSourceFilter extends NodeFilter<string> {
+  public readonly id: string = "source";
+  public readonly name = "Source";
+  public readonly invokeSequence = "s";
+  public readonly longInvokeSequence = "source";
+
+  public override getNodeOptions(node: ComfyNodeDef): string[] {
+    return [getNodeSource(node.python_module).displayText];
+  }
+}
+
+export class NodeCategoryFilter extends NodeFilter<string> {
+  public readonly id: string = "category";
+  public readonly name = "Category";
+  public readonly invokeSequence = "c";
+  public readonly longInvokeSequence = "category";
+
+  public override getNodeOptions(node: ComfyNodeDef): string[] {
+    return [node.category];
+  }
+}
+
+export class NodeSearchService {
+  public readonly nodeFuseSearch: FuseSearch<ComfyNodeDef>;
+  public readonly nodeFilters: NodeFilter<string>[];
+
+  constructor(data: ComfyNodeDef[]) {
+    this.nodeFuseSearch = new FuseSearch(data, {
+      keys: ["name", "display_name", "description"],
+      includeScore: true,
+      threshold: 0.6,
+      shouldSort: true,
+    });
+
+    const filterSearchOptions = {
+      includeScore: true,
+      threshold: 0.6,
+      shouldSort: true,
+    };
+
+    this.nodeFilters = [
+      new InputTypeFilter(data, filterSearchOptions),
+      new OutputTypeFilter(data, filterSearchOptions),
+      new NodeCategoryFilter(data, filterSearchOptions),
+    ];
+
+    if (data[0].python_module !== undefined) {
+      this.nodeFilters.push(new NodeSourceFilter(data, filterSearchOptions));
+    }
+  }
+
+  public endsWithFilterStartSequence(query: string): boolean {
+    return query.endsWith(":");
+  }
+
+  public searchNode(
+    query: string,
+    filters: FilterAndValue<string>[] = [],
+    options?: FuseSearchOptions
+  ): ComfyNodeDef[] {
+    const matchedNodes = this.nodeFuseSearch.search(query);
+
+    const results = matchedNodes.filter((node) => {
+      return _.every(filters, (filterAndValue) => {
+        const [filter, value] = filterAndValue;
+        return filter.matches(node, value);
+      });
+    });
+
+    return options?.limit ? results.slice(0, options.limit) : results;
+  }
+
+  public getFilterById(id: string): NodeFilter<string> | undefined {
+    return this.nodeFilters.find((filter) => filter.id === id);
+  }
+}
diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts
index 72221acf2..ca1990cdd 100644
--- a/src/types/apiTypes.ts
+++ b/src/types/apiTypes.ts
@@ -219,6 +219,7 @@ const zComfyNodeDef = z.object({
   description: z.string(),
   category: z.string(),
   output_node: z.boolean(),
+  python_module: z.string(),
 });
 
 // `/object_info`
diff --git a/src/types/colorPalette.ts b/src/types/colorPalette.ts
index a7cbe8036..10d35b1b3 100644
--- a/src/types/colorPalette.ts
+++ b/src/types/colorPalette.ts
@@ -93,3 +93,4 @@ const colorPalettesSchema = z.record(paletteSchema);
 export type Colors = z.infer<typeof colorsSchema>;
 export type Palette = z.infer<typeof paletteSchema>;
 export type ColorPalettes = z.infer<typeof colorPalettesSchema>;
+export type ColorPaletteLoadedEvent = CustomEvent<Palette>;
diff --git a/src/types/nodeSource.ts b/src/types/nodeSource.ts
new file mode 100644
index 000000000..b1d91e614
--- /dev/null
+++ b/src/types/nodeSource.ts
@@ -0,0 +1,25 @@
+export type NodeSourceType = "core" | "custom_nodes";
+export type NodeSource = {
+  type: NodeSourceType;
+  className: string;
+  displayText: string;
+};
+
+export const getNodeSource = (python_module: string): NodeSource => {
+  const modules = python_module.split(".");
+  if (["nodes", "comfy_extras"].includes(modules[0])) {
+    return {
+      type: "core",
+      className: "comfy-core",
+      displayText: "Comfy Core",
+    };
+  } else if (modules[0] === "custom_nodes") {
+    return {
+      type: "custom_nodes",
+      className: "comfy-custom-nodes",
+      displayText: modules[1],
+    };
+  } else {
+    throw new Error(`Unknown node source: ${python_module}`);
+  }
+};
diff --git a/src/types/vue-shim.d.ts b/src/types/vue-shim.d.ts
new file mode 100644
index 000000000..671bb35c7
--- /dev/null
+++ b/src/types/vue-shim.d.ts
@@ -0,0 +1,6 @@
+// vue-shim.d.ts
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..a28ce7117
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/tsconfig.json b/tsconfig.json
index aee8feba9..ef159ef27 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -28,6 +28,7 @@
   },
   "include": [
     "src/**/*",
+    "src/**/*.vue",
     "src/types/**/*.d.ts",
     "tests-ui/**/*"
   ],
diff --git a/vite.config.mts b/vite.config.mts
index afdd54ae8..c7b5442cc 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,4 +1,5 @@
 import { defineConfig, Plugin } from 'vite';
+import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import dotenv from "dotenv";
 dotenv.config();
@@ -98,6 +99,7 @@ export default defineConfig({
     }
   },
   plugins: [
+    vue(),
     comfyAPIPlugin(),
   ],
   build: {
@@ -112,4 +114,9 @@ export default defineConfig({
   define: {
     '__COMFYUI_FRONTEND_VERSION__': JSON.stringify(process.env.npm_package_version),
   },
+  resolve: {
+    alias: {
+      '@': '/src'
+    }
+  }
 });
\ No newline at end of file