diff --git a/ai b/ai
index eb7800f5f..4bfb2b6ac 160000
--- a/ai
+++ b/ai
@@ -1 +1 @@
-Subproject commit eb7800f5f7f0481769c2a946078c05d23b609ef5
+Subproject commit 4bfb2b6ace3de7ae9db9ec1840da2d91e06f44da
diff --git a/bun.lock b/bun.lock
index 6caefd47d..0daf3adc6 100644
--- a/bun.lock
+++ b/bun.lock
@@ -481,26 +481,12 @@
       "dependencies": {
         "@ai-sdk/react": "^3.0.25",
         "@autumn/shared": "workspace:*",
+        "@base-ui/react": "^1.4.1",
         "@better-auth/dash": "catalog:",
         "@fortawesome/free-brands-svg-icons": "^6.7.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
         "@monaco-editor/react": "^4.7.0",
         "@phosphor-icons/react": "^2.1.10",
-        "@radix-ui/react-accordion": "^1.2.11",
-        "@radix-ui/react-checkbox": "^1.1.4",
-        "@radix-ui/react-dialog": "^1.1.15",
-        "@radix-ui/react-dropdown-menu": "^2.1.16",
-        "@radix-ui/react-hover-card": "^1.1.15",
-        "@radix-ui/react-label": "^2.1.8",
-        "@radix-ui/react-popover": "^1.1.14",
-        "@radix-ui/react-radio-group": "^1.3.8",
-        "@radix-ui/react-scroll-area": "^1.2.10",
-        "@radix-ui/react-select": "^2.2.6",
-        "@radix-ui/react-separator": "^1.1.8",
-        "@radix-ui/react-slot": "^1.2.4",
-        "@radix-ui/react-switch": "^1.2.5",
-        "@radix-ui/react-tabs": "^1.1.3",
-        "@radix-ui/react-tooltip": "^1.2.8",
         "@sentry/react": "^10.25.0",
         "@sentry/vite-plugin": "^4.6.0",
         "@squircle/core": "^1.0.6",
@@ -1679,7 +1665,7 @@
 
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
-    "@radix-ui/react-label": ["@radix-ui/react-label@2.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A=="],
+    "@radix-ui/react-label": ["@radix-ui/react-label@2.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ=="],
 
     "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
 
@@ -1699,7 +1685,7 @@
 
     "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
 
-    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
 
     "@radix-ui/react-progress": ["@radix-ui/react-progress@1.1.7", "", { "dependencies": { "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg=="],
 
@@ -1711,11 +1697,11 @@
 
     "@radix-ui/react-select": ["@radix-ui/react-select@2.2.6", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-visually-hidden": "1.2.3", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ=="],
 
-    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g=="],
+    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA=="],
 
     "@radix-ui/react-slider": ["@radix-ui/react-slider@1.3.6", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw=="],
 
-    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
+    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ=="],
 
@@ -6341,29 +6327,85 @@
 
     "@prisma/instrumentation/@opentelemetry/instrumentation": ["@opentelemetry/instrumentation@0.207.0", "", { "dependencies": { "@opentelemetry/api-logs": "0.207.0", "import-in-the-middle": "^2.0.0", "require-in-the-middle": "^8.0.0" }, "peerDependencies": { "@opentelemetry/api": "^1.3.0" } }, "sha512-y6eeli9+TLKnznrR8AZlQMSJT7wILpXH+6EYq5Vf/4Ao+huI7EedxQHwRgVUOMLFbe7VFDvHJrX9/f4lcwnJsA=="],
 
-    "@radix-ui/react-alert-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-accordion/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-alert-dialog/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-arrow/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-form/@radix-ui/react-label": ["@radix-ui/react-label@2.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ=="],
+    "@radix-ui/react-aspect-ratio/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-label/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
+    "@radix-ui/react-avatar/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-checkbox/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-popover/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-collapsible/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-collection/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-select/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-context-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-separator/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
+    "@radix-ui/react-dialog/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-toolbar/@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA=="],
+    "@radix-ui/react-dismissable-layer/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-tooltip/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-dropdown-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-focus-scope/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-form/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-hover-card/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-label/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-menubar/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-navigation-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-one-time-password-field/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-password-toggle-field/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-popover/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-popper/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-portal/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
+
+    "@radix-ui/react-progress/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-radio-group/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-roving-focus/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-scroll-area/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-select/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-separator/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-slider/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-switch/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-tabs/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-toast/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-toggle/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-toggle-group/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-toolbar/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-tooltip/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
     "@reduxjs/toolkit/immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
 
@@ -6669,8 +6711,6 @@
 
     "clone-response/mimic-response": ["mimic-response@1.0.1", "", {}, "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="],
 
-    "cmdk/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
-
     "concurrently/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
     "conf/ajv": ["ajv@8.20.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA=="],
@@ -7037,11 +7077,7 @@
 
     "puppeteer/puppeteer-core": ["puppeteer-core@22.14.0", "", { "dependencies": { "@puppeteer/browsers": "2.3.0", "chromium-bidi": "0.6.2", "debug": "^4.3.5", "devtools-protocol": "0.0.1312386", "ws": "^8.18.0" } }, "sha512-rl4tOY5LcA3e374GAlsGGHc05HL3eGNf5rZ+uxkl6id9zVZKcwcp1Z+Nd6byb6WPiPeecT/dwz8f/iUm+AZQSw=="],
 
-    "radix-ui/@radix-ui/react-label": ["@radix-ui/react-label@2.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ=="],
-
-    "radix-ui/@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA=="],
-
-    "radix-ui/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "radix-ui/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
     "rc/strip-json-comments": ["strip-json-comments@2.0.1", "", {}, "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="],
 
diff --git a/knip.json b/knip.json
index c23fe5b83..1371dbcf1 100644
--- a/knip.json
+++ b/knip.json
@@ -25,6 +25,7 @@
 		"server": {
 			"entry": [
 				"src/internal/customers/cusUtils/createNewCustomer.ts",
+				"src/internal/rewards/RewardRedemptionService.ts",
 				"src/utils/importUtils/addProductFromSubs.ts",
 				"src/utils/scriptUtils/readOnlyStripe.ts",
 				"src/utils/scriptUtils/scriptUtils.ts",
@@ -43,7 +44,7 @@
 		"vite": {
 			"entry": ["tests/**/*.{ts,tsx}"],
 			"project": ["src/**/*.{ts,tsx}", "tests/**/*.{ts,tsx}"],
-			"ignore": ["src/components/ai-elements/**"],
+			"ignore": ["src/components/ai-elements/**", "src/hooks/useControllableState.ts"],
 			"ignoreDependencies": [
 				"tailwindcss",
 				"tailwind-scrollbar-hide",
diff --git a/vite/components.json b/vite/components.json
index 5599e04e3..4d2990c87 100644
--- a/vite/components.json
+++ b/vite/components.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://ui.shadcn.com/schema.json",
-	"style": "new-york",
+	"style": "base-nova",
 	"rsc": false,
 	"tsx": true,
 	"tailwind": {
diff --git a/vite/package.json b/vite/package.json
index de56c2a2d..e9237ef39 100644
--- a/vite/package.json
+++ b/vite/package.json
@@ -21,26 +21,12 @@
 	"dependencies": {
 		"@ai-sdk/react": "^3.0.25",
 		"@autumn/shared": "workspace:*",
+		"@base-ui/react": "^1.4.1",
 		"@better-auth/dash": "catalog:",
 		"@fortawesome/free-brands-svg-icons": "^6.7.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
 		"@monaco-editor/react": "^4.7.0",
 		"@phosphor-icons/react": "^2.1.10",
-		"@radix-ui/react-accordion": "^1.2.11",
-		"@radix-ui/react-checkbox": "^1.1.4",
-		"@radix-ui/react-dialog": "^1.1.15",
-		"@radix-ui/react-dropdown-menu": "^2.1.16",
-		"@radix-ui/react-hover-card": "^1.1.15",
-		"@radix-ui/react-label": "^2.1.8",
-		"@radix-ui/react-popover": "^1.1.14",
-		"@radix-ui/react-radio-group": "^1.3.8",
-		"@radix-ui/react-scroll-area": "^1.2.10",
-		"@radix-ui/react-select": "^2.2.6",
-		"@radix-ui/react-separator": "^1.1.8",
-		"@radix-ui/react-slot": "^1.2.4",
-		"@radix-ui/react-switch": "^1.2.5",
-		"@radix-ui/react-tabs": "^1.1.3",
-		"@radix-ui/react-tooltip": "^1.2.8",
 		"@sentry/react": "^10.25.0",
 		"@sentry/vite-plugin": "^4.6.0",
 		"@squircle/core": "^1.0.6",
diff --git a/vite/src/components/ai-elements/chain-of-thought.tsx b/vite/src/components/ai-elements/chain-of-thought.tsx
index f2d1dca4a..091ac73ce 100644
--- a/vite/src/components/ai-elements/chain-of-thought.tsx
+++ b/vite/src/components/ai-elements/chain-of-thought.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useControllableState } from "@/hooks/useControllableState";
 import {
 	BrainIcon,
 	ChevronDownIcon,
@@ -58,7 +58,7 @@ export const ChainOfThought = memo(
 		});
 
 		const chainOfThoughtContext = useMemo(
-			() => ({ isOpen, setIsOpen }),
+			() => ({ isOpen: isOpen ?? false, setIsOpen }),
 			[isOpen, setIsOpen],
 		);
 
diff --git a/vite/src/components/ai-elements/inline-citation.tsx b/vite/src/components/ai-elements/inline-citation.tsx
index 8ea52296e..57f5b212c 100644
--- a/vite/src/components/ai-elements/inline-citation.tsx
+++ b/vite/src/components/ai-elements/inline-citation.tsx
@@ -80,7 +80,7 @@ export const InlineCitationCardTrigger = ({
 	</HoverCardTrigger>
 );
 
-export type InlineCitationCardBodyProps = ComponentProps<"div">;
+export type InlineCitationCardBodyProps = ComponentProps<typeof HoverCardContent>;
 
 export const InlineCitationCardBody = ({
 	className,
diff --git a/vite/src/components/ai-elements/reasoning.tsx b/vite/src/components/ai-elements/reasoning.tsx
index 55b5ebedd..55b916c42 100644
--- a/vite/src/components/ai-elements/reasoning.tsx
+++ b/vite/src/components/ai-elements/reasoning.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useControllableState } from "@/hooks/useControllableState";
 import { BrainIcon, ChevronDownIcon } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
 import { createContext, memo, useContext, useEffect, useState } from "react";
diff --git a/vite/src/components/forms/shared/plan-items/CollapsedBooleanItems.tsx b/vite/src/components/forms/shared/plan-items/CollapsedBooleanItems.tsx
index a178c6ab6..2f489c403 100644
--- a/vite/src/components/forms/shared/plan-items/CollapsedBooleanItems.tsx
+++ b/vite/src/components/forms/shared/plan-items/CollapsedBooleanItems.tsx
@@ -18,19 +18,17 @@ export function CollapsedBooleanItems({
 	items,
 	renderItem,
 }: CollapsedBooleanItemsProps) {
-	const [value, setValue] = useState("");
+	const [value, setValue] = useState<string[]>([]);
 
 	if (items.length === 0) return null;
 
-	const isExpanded = value === "boolean-flags";
+	const isExpanded = value.includes("boolean-flags");
 	const label = isExpanded
 		? "Hide"
 		: `${items.length} more`;
 
 	return (
 		<Accordion
-			type="single"
-			collapsible
 			value={value}
 			onValueChange={setValue}
 			className="w-full"
diff --git a/vite/src/components/general/modal-components/InfoTooltip.tsx b/vite/src/components/general/modal-components/InfoTooltip.tsx
index 9981d5409..10008e601 100644
--- a/vite/src/components/general/modal-components/InfoTooltip.tsx
+++ b/vite/src/components/general/modal-components/InfoTooltip.tsx
@@ -1,5 +1,4 @@
 import { InfoIcon } from "@phosphor-icons/react";
-import type { TooltipContentProps } from "@radix-ui/react-tooltip";
 import {
 	Tooltip,
 	TooltipContent,
@@ -13,7 +12,10 @@ export const InfoTooltip = ({
 }: {
 	children: React.ReactNode;
 	className?: string;
-} & TooltipContentProps) => {
+	side?: "top" | "bottom" | "left" | "right";
+	align?: "start" | "center" | "end";
+	sideOffset?: number;
+}) => {
 	return (
 		<Tooltip>
 			<TooltipTrigger
diff --git a/vite/src/components/ui/accordion.tsx b/vite/src/components/ui/accordion.tsx
index f079c0e03..48402dfc4 100644
--- a/vite/src/components/ui/accordion.tsx
+++ b/vite/src/components/ui/accordion.tsx
@@ -1,19 +1,32 @@
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 import { ChevronDownIcon } from "lucide-react";
-import type * as React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+type AccordionProps = AccordionPrimitive.Root.Props & {
+	type?: "single" | "multiple";
+	collapsible?: boolean;
+};
+
 function Accordion({
+	type,
+	collapsible,
 	...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-	return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}: AccordionProps) {
+	return (
+		<AccordionPrimitive.Root
+			data-slot="accordion"
+			multiple={type === "multiple"}
+			{...props}
+		/>
+	);
 }
 
 function AccordionItem({
 	className,
 	...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+}: AccordionPrimitive.Item.Props) {
 	return (
 		<AccordionPrimitive.Item
 			data-slot="accordion-item"
@@ -27,13 +40,13 @@ function AccordionTrigger({
 	className,
 	children,
 	...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+}: AccordionPrimitive.Trigger.Props) {
 	return (
 		<AccordionPrimitive.Header className="flex">
 			<AccordionPrimitive.Trigger
 				data-slot="accordion-trigger"
 				className={cn(
-					"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+					"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[aria-expanded=true]>svg]:rotate-180",
 					className,
 				)}
 				{...props}
@@ -49,15 +62,15 @@ function AccordionContent({
 	className,
 	children,
 	...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+}: AccordionPrimitive.Panel.Props) {
 	return (
-		<AccordionPrimitive.Content
+		<AccordionPrimitive.Panel
 			data-slot="accordion-content"
-			className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+			className="data-closed:animate-accordion-up data-open:animate-accordion-down overflow-hidden text-sm"
 			{...props}
 		>
 			<div className={cn("pt-0 pb-4", className)}>{children}</div>
-		</AccordionPrimitive.Content>
+		</AccordionPrimitive.Panel>
 	);
 }
 
diff --git a/vite/src/components/ui/badge.tsx b/vite/src/components/ui/badge.tsx
index 484454e45..3bdb0b22d 100644
--- a/vite/src/components/ui/badge.tsx
+++ b/vite/src/components/ui/badge.tsx
@@ -1,6 +1,7 @@
-import { Slot } from "@radix-ui/react-slot";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -36,18 +37,28 @@ function Badge({
 	className,
 	variant,
 	asChild = false,
+	render: renderProp,
+	children,
 	...props
-}: React.ComponentProps<"span"> &
+}: useRender.ComponentProps<"span"> &
 	VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-	const Comp = asChild ? Slot : "span";
+	const effectiveRender =
+		asChild && React.isValidElement(children) ? children : renderProp;
 
-	return (
-		<Comp
-			data-slot="badge"
-			className={cn(badgeVariants({ variant }), className)}
-			{...props}
-		/>
-	);
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps<"span">(
+			{
+				className: cn(badgeVariants({ variant }), className),
+			},
+			{ ...props, children: effectiveRender ? undefined : children },
+		),
+		render: effectiveRender,
+		state: {
+			slot: "badge",
+			variant,
+		},
+	});
 }
 
 export { Badge };
diff --git a/vite/src/components/ui/breadcrumb.tsx b/vite/src/components/ui/breadcrumb.tsx
index 39c067dfc..34ef1d3cc 100644
--- a/vite/src/components/ui/breadcrumb.tsx
+++ b/vite/src/components/ui/breadcrumb.tsx
@@ -1,6 +1,7 @@
-import { Slot } from "@radix-ui/react-slot";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
-import type * as React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -34,19 +35,28 @@ function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
 function BreadcrumbLink({
 	asChild,
 	className,
+	render: renderProp,
+	children,
 	...props
-}: React.ComponentProps<"a"> & {
+}: useRender.ComponentProps<"a"> & {
 	asChild?: boolean;
 }) {
-	const Comp = asChild ? Slot : "a";
+	const effectiveRender =
+		asChild && React.isValidElement(children) ? children : renderProp;
 
-	return (
-		<Comp
-			data-slot="breadcrumb-link"
-			className={cn("hover:text-foreground transition-colors", className)}
-			{...props}
-		/>
-	);
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps<"a">(
+			{
+				className: cn("hover:text-foreground transition-colors", className),
+			},
+			{ ...props, children: effectiveRender ? undefined : children },
+		),
+		render: effectiveRender,
+		state: {
+			slot: "breadcrumb-link",
+		},
+	});
 }
 
 function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
diff --git a/vite/src/components/ui/button-group.tsx b/vite/src/components/ui/button-group.tsx
index 3f7db816f..d048ef0bc 100644
--- a/vite/src/components/ui/button-group.tsx
+++ b/vite/src/components/ui/button-group.tsx
@@ -1,5 +1,7 @@
-import { Slot } from "@radix-ui/react-slot";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 
@@ -39,21 +41,31 @@ function ButtonGroup({
 function ButtonGroupText({
 	className,
 	asChild = false,
+	render: renderProp,
+	children,
 	...props
-}: React.ComponentProps<"div"> & {
+}: useRender.ComponentProps<"div"> & {
 	asChild?: boolean;
 }) {
-	const Comp = asChild ? Slot : "div";
+	const effectiveRender =
+		asChild && React.isValidElement(children) ? children : renderProp;
 
-	return (
-		<Comp
-			className={cn(
-				"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-				className,
-			)}
-			{...props}
-		/>
-	);
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(
+					"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+					className,
+				),
+			},
+			{ ...props, children: effectiveRender ? undefined : children },
+		),
+		render: effectiveRender,
+		state: {
+			slot: "button-group-text",
+		},
+	});
 }
 
 function ButtonGroupSeparator({
diff --git a/vite/src/components/ui/button.tsx b/vite/src/components/ui/button.tsx
index b885a974d..7a84c0223 100644
--- a/vite/src/components/ui/button.tsx
+++ b/vite/src/components/ui/button.tsx
@@ -1,12 +1,10 @@
-import { Slot } from "@radix-ui/react-slot";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva, type VariantProps } from "class-variance-authority";
 import { LoaderCircle, PlusIcon, Search } from "lucide-react";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 
-// [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
-
 const buttonVariants = cva(
 	`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-zinc-300 font-regular
   
@@ -14,19 +12,14 @@ const buttonVariants = cva(
 	{
 		variants: {
 			variant: {
-				// border border-[#8231FF]
 				default:
-					// "bg-zinc-900 text-zinc-50 shadow hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90",
 					`bg-primary hover:bg-primary/90 text-zinc-50 shadow dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90
           !rounded-xs
           `,
 				secondary:
 					"border border-zinc-200 bg-white shadow-sm hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
-				// "bg-zinc-100 text-zinc-900 shadow-sm hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80",
 				destructive:
 					"font-semibold text-red-400 border border-red-400 rounded-md shadow-sm hover:bg-red-500/90 hover:text-zinc-50 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90 shadow-sm ",
-				// destructive:
-				//   "bg-red-500 font-semibold text-zinc-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
 				outline:
 					"border border-zinc-200 bg-white shadow-sm hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
 				ghost:
@@ -36,15 +29,12 @@ const buttonVariants = cva(
 				link: "text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50",
 				dashed:
 					"hover:bg-stone-100 text-t2 border border-1 border-dashed border-stone-300",
-				// shadow-sm hover:from-stone-100 hover:to-stone-200 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50
 				gradientPrimary:
 					"bg-gradient-to-b font-semibold border-t border-purple-400 outline outline-primary  rounded-sm from-primary/85 to-primary text-white hover:from-primary hover:to-primary  shadow-purple-500/50 transition-[background] duration-300 !h-7.5 mt-0.25",
 
 				gradientSecondary:
 					"border border-stone-300 font-semibold bg-gradient-to-b from-white to-stone-100 text-t1 hover:from-stone-300 hover:to-stone-400 shadow-sm",
-				// add: "text-primary border-t border-white outline outline-purple-800/20 bg-gradient-to-b from-zinc-50 to-zinc-200/70 shadow-sm hover:from-zinc-200 hover:border-zinc-200 hover:text-primary dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 !h-6 rounded-md",
 				add: "text-primary border-t border-white outline outline-zinc-200 bg-gradient-to-b from-stone-100 to-zinc-50 hover:from-stone-100 hover:to-stone-100 hover:border-primary  dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 !h-9.5 rounded-none",
-				// add: "border-t border-purple-400 bg-gradient-to-b from-primary/90 to-primary text-white hover:from-primary hover:to-primary !shadow-lg !h-6 rounded-md",
 
 				analyse:
 					"text-primary border-t border-white outline outline-zinc-200 bg-gradient-to-b from-stone-100 to-zinc-50 hover:from-stone-100 hover:to-stone-100 hover:border-primary  dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 !h-9.5 rounded-none",
@@ -82,6 +72,7 @@ export interface ButtonProps
 	tooltipContent?: string;
 	disableStartIcon?: boolean;
 	shimmer?: boolean;
+	render?: React.ReactElement;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -100,14 +91,17 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			children,
 			disableStartIcon = false,
 			shimmer = false,
+			render,
 			...props
 		},
 		ref,
 	) => {
-		const Comp = asChild ? Slot : "button";
-		const Button = (
-			<Comp
+		const renderProp = asChild && React.isValidElement(children) ? children : render;
+
+		const ButtonElement = (
+			<ButtonPrimitive
 				{...props}
+				render={renderProp}
 				className={cn(
 					buttonVariants({ variant, size, className }),
 					isIcon && `w-${dim} h-${dim} p-0`,
@@ -124,33 +118,33 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 				}}
 				disabled={isLoading || props.disabled || shimmer}
 			>
-				{isLoading && <LoaderCircle className="animate-spin" size={14} />}
-				{startIcon && !isLoading && <>{startIcon}</>}
-				{!isLoading && !startIcon && variant === "add" && !disableStartIcon && (
-					<PlusIcon size={12} />
+				{renderProp ? undefined : (
+					<>
+						{isLoading && <LoaderCircle className="animate-spin" size={14} />}
+						{startIcon && !isLoading && <>{startIcon}</>}
+						{!isLoading && !startIcon && variant === "add" && !disableStartIcon && (
+							<PlusIcon size={12} />
+						)}
+						{!isLoading &&
+							!startIcon &&
+							variant === "analyse" &&
+							!disableStartIcon && <Search size={12} />}
+						{children}
+						{endIcon && !isLoading && <>{endIcon}</>}
+					</>
 				)}
-				{!isLoading &&
-					!startIcon &&
-					variant === "analyse" &&
-					!disableStartIcon && <Search size={12} />}
-				{children}
-				{endIcon && !isLoading && <>{endIcon}</>}
-			</Comp>
+			</ButtonPrimitive>
 		);
 
 		if (tooltipContent) {
 			return (
 				<Tooltip delayDuration={200}>
-					<TooltipTrigger asChild>{Button}</TooltipTrigger>
+					<TooltipTrigger asChild>{ButtonElement}</TooltipTrigger>
 					<TooltipContent>{tooltipContent}</TooltipContent>
 				</Tooltip>
-				// <Tooltip content={tooltipContent}>
-				//   {Button}
-				// </Tooltip>
 			);
-		} else {
-			return Button;
 		}
+		return ButtonElement;
 	},
 );
 Button.displayName = "Button";
diff --git a/vite/src/components/ui/checkbox.tsx b/vite/src/components/ui/checkbox.tsx
index a7b94809f..b66c7120f 100644
--- a/vite/src/components/ui/checkbox.tsx
+++ b/vite/src/components/ui/checkbox.tsx
@@ -1,12 +1,12 @@
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { CheckIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
 const Checkbox = React.forwardRef<
-	React.ElementRef<typeof CheckboxPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+	HTMLButtonElement,
+	CheckboxPrimitive.Root.Props & {
 		iconClassName?: string;
 	}
 >(({ className, iconClassName, ...props }, ref) => (
@@ -14,7 +14,7 @@ const Checkbox = React.forwardRef<
 		ref={ref}
 		data-slot="checkbox"
 		className={cn(
-			"peer shrink-0 rounded border border-gray-300 size-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gray-900 data-[state=checked]:border-gray-900 transition-none",
+			"peer shrink-0 rounded border border-gray-300 size-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-gray-900 data-checked:border-gray-900 transition-none",
 			className,
 		)}
 		{...props}
@@ -27,6 +27,6 @@ const Checkbox = React.forwardRef<
 		</CheckboxPrimitive.Indicator>
 	</CheckboxPrimitive.Root>
 ));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+Checkbox.displayName = "Checkbox";
 
 export { Checkbox };
diff --git a/vite/src/components/ui/dialog.tsx b/vite/src/components/ui/dialog.tsx
index 0199e0f6e..0e7491a96 100644
--- a/vite/src/components/ui/dialog.tsx
+++ b/vite/src/components/ui/dialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import { XIcon } from "lucide-react";
 import * as React from "react";
 
@@ -8,60 +8,90 @@ import { cn } from "@/lib/utils";
 
 function Dialog({
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+}: DialogPrimitive.Root.Props) {
 	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
+	asChild,
+	children,
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}: DialogPrimitive.Trigger.Props & { asChild?: boolean }) {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<DialogPrimitive.Trigger
+				data-slot="dialog-trigger"
+				render={children}
+				{...props}
+			/>
+		);
+	}
+	return (
+		<DialogPrimitive.Trigger data-slot="dialog-trigger" {...props}>
+			{children}
+		</DialogPrimitive.Trigger>
+	);
 }
 
 function DialogPortal({
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+}: DialogPrimitive.Portal.Props) {
 	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
+	asChild,
+	children,
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}: DialogPrimitive.Close.Props & { asChild?: boolean }) {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<DialogPrimitive.Close
+				data-slot="dialog-close"
+				render={children}
+				{...props}
+			/>
+		);
+	}
+	return (
+		<DialogPrimitive.Close data-slot="dialog-close" {...props}>
+			{children}
+		</DialogPrimitive.Close>
+	);
 }
 
-const DialogOverlay = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Overlay>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-	<DialogPrimitive.Overlay
-		ref={ref}
-		data-slot="dialog-overlay"
-		onClick={(e) => e.stopPropagation()}
-		className={cn(
-			"fixed inset-0 z-[170] bg-white/70 backdrop-blur-sm  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-			className,
-		)}
-		{...props}
-	/>
-));
-DialogOverlay.displayName = "DialogOverlay";
+function DialogOverlay({
+	className,
+	...props
+}: DialogPrimitive.Backdrop.Props) {
+	return (
+		<DialogPrimitive.Backdrop
+			data-slot="dialog-overlay"
+			onClick={(e) => e.stopPropagation()}
+			className={cn(
+				"fixed inset-0 z-[170] bg-white/70 backdrop-blur-sm data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
 
 function DialogContent({
 	className,
 	children,
 	showCloseButton = true,
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+}: DialogPrimitive.Popup.Props & {
 	showCloseButton?: boolean;
 }) {
 	return (
 		<DialogPortal data-slot="dialog-portal">
 			<DialogOverlay />
-			<DialogPrimitive.Content
+			<DialogPrimitive.Popup
 				data-slot="dialog-content"
 				className={cn(
-					`data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[180] grid  translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-3xl
+					`data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 fixed top-[50%] left-[50%] z-[180] grid  translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-3xl
           bg-stone-50
           min-w-[15rem]
           `,
@@ -71,12 +101,12 @@ function DialogContent({
 			>
 				{children}
 				{showCloseButton && (
-					<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+					<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-open:bg-accent data-open:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
 						<XIcon />
 						<span className="sr-only">Close</span>
 					</DialogPrimitive.Close>
 				)}
-			</DialogPrimitive.Content>
+			</DialogPrimitive.Popup>
 		</DialogPortal>
 	);
 }
@@ -113,7 +143,7 @@ function DialogFooter({
 function DialogTitle({
 	className,
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: DialogPrimitive.Title.Props) {
 	return (
 		<DialogPrimitive.Title
 			data-slot="dialog-title"
@@ -126,7 +156,7 @@ function DialogTitle({
 function DialogDescription({
 	className,
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+}: DialogPrimitive.Description.Props) {
 	return (
 		<DialogPrimitive.Description
 			data-slot="dialog-description"
diff --git a/vite/src/components/ui/dropdown-menu.tsx b/vite/src/components/ui/dropdown-menu.tsx
index 7c75f9fb7..517f4772d 100644
--- a/vite/src/components/ui/dropdown-menu.tsx
+++ b/vite/src/components/ui/dropdown-menu.tsx
@@ -1,35 +1,82 @@
 "use client";
 
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
 import SmallSpinner from "../general/SmallSpinner";
 
-const DropdownMenu = DropdownMenuPrimitive.Root;
+function DropdownMenu({
+	...props
+}: MenuPrimitive.Root.Props) {
+	return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+function DropdownMenuTrigger({
+	asChild,
+	children,
+	...props
+}: MenuPrimitive.Trigger.Props & { asChild?: boolean }) {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<MenuPrimitive.Trigger
+				data-slot="dropdown-menu-trigger"
+				render={children}
+				{...props}
+			/>
+		);
+	}
+	return (
+		<MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props}>
+			{children}
+		</MenuPrimitive.Trigger>
+	);
+}
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+function DropdownMenuGroup({
+	...props
+}: MenuPrimitive.Group.Props) {
+	return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+function DropdownMenuPortal({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return <>{children}</>;
+}
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+function DropdownMenuSub({
+	...props
+}: MenuPrimitive.SubmenuRoot.Props) {
+	return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
+}
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+function DropdownMenuRadioGroup({
+	...props
+}: MenuPrimitive.RadioGroup.Props) {
+	return (
+		<MenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	);
+}
 
 const DropdownMenuSubTrigger = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+	HTMLDivElement,
+	MenuPrimitive.SubmenuTrigger.Props & {
 		inset?: boolean;
 		withIcon?: boolean;
 	}
 >(({ className, inset, children, withIcon = true, ...props }, ref) => (
-	<DropdownMenuPrimitive.SubTrigger
+	<MenuPrimitive.SubmenuTrigger
 		ref={ref}
+		data-slot="dropdown-menu-sub-trigger"
 		className={cn(
-			"flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 data-[state=open]:bg-zinc-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus:bg-zinc-800 dark:data-[state=open]:bg-zinc-800",
+			"flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 data-popup-open:bg-zinc-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus:bg-zinc-800 dark:data-popup-open:bg-zinc-800",
 			inset && "pl-8",
 			className,
 		)}
@@ -37,86 +84,127 @@ const DropdownMenuSubTrigger = React.forwardRef<
 	>
 		{children}
 		{withIcon && <ChevronRight className="ml-auto text-t3" />}
-	</DropdownMenuPrimitive.SubTrigger>
+	</MenuPrimitive.SubmenuTrigger>
 ));
-DropdownMenuSubTrigger.displayName =
-	DropdownMenuPrimitive.SubTrigger.displayName;
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
 
 const DropdownMenuSubContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-	<DropdownMenuPrimitive.SubContent
-		ref={ref}
-		className={cn(
-			"z-[200] min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50 text-zinc-800 font-regular",
-			className,
-		)}
-		{...props}
-	/>
+	HTMLDivElement,
+	MenuPrimitive.Popup.Props & {
+		sideOffset?: number;
+	}
+>(({ className, sideOffset = 0, ...props }, ref) => (
+	<MenuPrimitive.Portal>
+		<MenuPrimitive.Positioner
+			sideOffset={sideOffset}
+			className="isolate z-[200]"
+		>
+			<MenuPrimitive.Popup
+				ref={ref}
+				data-slot="dropdown-menu-sub-content"
+				className={cn(
+					"z-[200] min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 shadow-lg data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50 text-zinc-800 font-regular",
+					className,
+				)}
+				{...props}
+			/>
+		</MenuPrimitive.Positioner>
+	</MenuPrimitive.Portal>
 ));
-DropdownMenuSubContent.displayName =
-	DropdownMenuPrimitive.SubContent.displayName;
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 
 const DropdownMenuContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-	<DropdownMenuPrimitive.Portal>
-		<DropdownMenuPrimitive.Content
-			onCloseAutoFocus={(e) => e.preventDefault()}
-			ref={ref}
+	HTMLDivElement,
+	MenuPrimitive.Popup.Props & {
+		sideOffset?: number;
+		side?: "top" | "bottom" | "left" | "right";
+		align?: "start" | "center" | "end";
+		onCloseAutoFocus?: (e: any) => void;
+	}
+>(({ className, sideOffset = 4, side = "bottom", align = "start", onCloseAutoFocus: _onCloseAutoFocus, ...props }, ref) => (
+	<MenuPrimitive.Portal>
+		<MenuPrimitive.Positioner
 			sideOffset={sideOffset}
-			className={cn(
-				"z-[200] min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-				className,
-			)}
-			{...props}
-		/>
-	</DropdownMenuPrimitive.Portal>
+			side={side}
+			align={align}
+			className="isolate z-[200] outline-none"
+		>
+			<MenuPrimitive.Popup
+				ref={ref}
+				data-slot="dropdown-menu-content"
+				className={cn(
+					"z-[200] min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+					"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+					className,
+				)}
+				{...props}
+			/>
+		</MenuPrimitive.Positioner>
+	</MenuPrimitive.Portal>
 ));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+DropdownMenuContent.displayName = "DropdownMenuContent";
 
 const DropdownMenuItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+	HTMLDivElement,
+	MenuPrimitive.Item.Props & {
 		inset?: boolean;
 		isLoading?: boolean;
 		shimmer?: boolean;
+		asChild?: boolean;
 	}
->(({ className, inset, shimmer = false, isLoading, ...props }, ref) => (
-	<DropdownMenuPrimitive.Item
-		ref={ref}
-		className={cn(
-			"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-			shimmer && "shimmer",
-			inset && "pl-8",
-			className,
-		)}
-		disabled={shimmer || isLoading}
-		{...props}
-	>
-		{isLoading ? (
-			<>
-				{props.children}
-				<SmallSpinner />
-			</>
-		) : (
-			props.children
-		)}
-	</DropdownMenuPrimitive.Item>
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+>(({ className, inset, shimmer = false, isLoading, children, asChild, ...props }, ref) => {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<MenuPrimitive.Item
+				ref={ref}
+				data-slot="dropdown-menu-item"
+				render={children}
+				className={cn(
+					"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+					shimmer && "shimmer",
+					inset && "pl-8",
+					className,
+				)}
+				disabled={shimmer || isLoading}
+				{...props}
+			/>
+		);
+	}
+	return (
+		<MenuPrimitive.Item
+			ref={ref}
+			data-slot="dropdown-menu-item"
+			className={cn(
+				"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+				shimmer && "shimmer",
+				inset && "pl-8",
+				className,
+			)}
+			disabled={shimmer || isLoading}
+			{...props}
+		>
+			{isLoading ? (
+				<>
+					{children}
+					<SmallSpinner />
+				</>
+			) : (
+				children
+			)}
+		</MenuPrimitive.Item>
+	);
+});
+DropdownMenuItem.displayName = "DropdownMenuItem";
 
 const DropdownMenuCheckboxItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+	HTMLDivElement,
+	MenuPrimitive.CheckboxItem.Props
 >(({ className, children, checked, ...props }, ref) => (
-	<DropdownMenuPrimitive.CheckboxItem
+	<MenuPrimitive.CheckboxItem
 		ref={ref}
+		data-slot="dropdown-menu-checkbox-item"
 		className={cn(
-			"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-1 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50",
+			"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-1 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-disabled:pointer-events-none data-disabled:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50",
 			className,
 		)}
 		checked={checked}
@@ -124,45 +212,46 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 	>
 		{children}
 		<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-			<DropdownMenuPrimitive.ItemIndicator>
+			<MenuPrimitive.CheckboxItemIndicator>
 				<Check className="h-4 w-4 text-t3" />
-			</DropdownMenuPrimitive.ItemIndicator>
+			</MenuPrimitive.CheckboxItemIndicator>
 		</span>
-	</DropdownMenuPrimitive.CheckboxItem>
+	</MenuPrimitive.CheckboxItem>
 ));
-DropdownMenuCheckboxItem.displayName =
-	DropdownMenuPrimitive.CheckboxItem.displayName;
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
 
 const DropdownMenuRadioItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+	HTMLDivElement,
+	MenuPrimitive.RadioItem.Props
 >(({ className, children, ...props }, ref) => (
-	<DropdownMenuPrimitive.RadioItem
+	<MenuPrimitive.RadioItem
 		ref={ref}
+		data-slot="dropdown-menu-radio-item"
 		className={cn(
-			"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50",
+			"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-disabled:pointer-events-none data-disabled:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50",
 			className,
 		)}
 		{...props}
 	>
 		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-			<DropdownMenuPrimitive.ItemIndicator>
+			<MenuPrimitive.RadioItemIndicator>
 				<Circle className="h-2 w-2 fill-current" />
-			</DropdownMenuPrimitive.ItemIndicator>
+			</MenuPrimitive.RadioItemIndicator>
 		</span>
 		{children}
-	</DropdownMenuPrimitive.RadioItem>
+	</MenuPrimitive.RadioItem>
 ));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
 
 const DropdownMenuLabel = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+	HTMLDivElement,
+	MenuPrimitive.GroupLabel.Props & {
 		inset?: boolean;
 	}
 >(({ className, inset, ...props }, ref) => (
-	<DropdownMenuPrimitive.Label
+	<MenuPrimitive.GroupLabel
 		ref={ref}
+		data-slot="dropdown-menu-label"
 		className={cn(
 			"px-2 py-1.5 text-sm font-semibold",
 			inset && "pl-8",
@@ -171,19 +260,20 @@ const DropdownMenuLabel = React.forwardRef<
 		{...props}
 	/>
 ));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
 
 const DropdownMenuSeparator = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+	HTMLDivElement,
+	MenuPrimitive.Separator.Props
 >(({ className, ...props }, ref) => (
-	<DropdownMenuPrimitive.Separator
+	<MenuPrimitive.Separator
 		ref={ref}
+		data-slot="dropdown-menu-separator"
 		className={cn("-mx-1 my-1 h-px bg-zinc-100 dark:bg-zinc-800", className)}
 		{...props}
 	/>
 ));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 
 const DropdownMenuShortcut = ({
 	className,
diff --git a/vite/src/components/ui/hover-card.tsx b/vite/src/components/ui/hover-card.tsx
index 4193aff8e..450d18839 100644
--- a/vite/src/components/ui/hover-card.tsx
+++ b/vite/src/components/ui/hover-card.tsx
@@ -1,19 +1,37 @@
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import type * as React from "react";
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
 function HoverCard({
+	openDelay: _openDelay,
+	closeDelay: _closeDelay,
 	...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-	return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}: PreviewCardPrimitive.Root.Props & {
+	openDelay?: number;
+	closeDelay?: number;
+}) {
+	return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
 }
 
 function HoverCardTrigger({
+	asChild,
+	children,
 	...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+}: PreviewCardPrimitive.Trigger.Props & { asChild?: boolean }) {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<PreviewCardPrimitive.Trigger
+				data-slot="hover-card-trigger"
+				render={children}
+				{...props}
+			/>
+		);
+	}
 	return (
-		<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+		<PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props}>
+			{children}
+		</PreviewCardPrimitive.Trigger>
 	);
 }
 
@@ -21,21 +39,31 @@ function HoverCardContent({
 	className,
 	align = "center",
 	sideOffset = 4,
+	side = "bottom",
 	...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+}: PreviewCardPrimitive.Popup.Props &
+	Pick<
+		PreviewCardPrimitive.Positioner.Props,
+		"align" | "side" | "sideOffset"
+	>) {
 	return (
-		<HoverCardPrimitive.Portal data-slot="hover-card-portal">
-			<HoverCardPrimitive.Content
-				data-slot="hover-card-content"
+		<PreviewCardPrimitive.Portal data-slot="hover-card-portal">
+			<PreviewCardPrimitive.Positioner
 				align={align}
+				side={side}
 				sideOffset={sideOffset}
-				className={cn(
-					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-					className,
-				)}
-				{...props}
-			/>
-		</HoverCardPrimitive.Portal>
+				className="isolate z-50"
+			>
+				<PreviewCardPrimitive.Popup
+					data-slot="hover-card-content"
+					className={cn(
+						"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-64 origin-(--transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+						className,
+					)}
+					{...props}
+				/>
+			</PreviewCardPrimitive.Positioner>
+		</PreviewCardPrimitive.Portal>
 	);
 }
 
diff --git a/vite/src/components/ui/label.tsx b/vite/src/components/ui/label.tsx
index ce1650543..b7bf7d1f1 100644
--- a/vite/src/components/ui/label.tsx
+++ b/vite/src/components/ui/label.tsx
@@ -1,4 +1,4 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
+import { Field } from "@base-ui/react/field";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -6,9 +6,9 @@ import { cn } from "@/lib/utils";
 function Label({
 	className,
 	...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+}: Field.Label.Props) {
 	return (
-		<LabelPrimitive.Root
+		<Field.Label
 			data-slot="label"
 			className={cn(
 				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
diff --git a/vite/src/components/ui/popover.tsx b/vite/src/components/ui/popover.tsx
index da7264a63..ad0bf593f 100644
--- a/vite/src/components/ui/popover.tsx
+++ b/vite/src/components/ui/popover.tsx
@@ -1,46 +1,78 @@
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import type * as React from "react";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
 function Popover({
 	...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+}: PopoverPrimitive.Root.Props) {
 	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
 function PopoverTrigger({
+	asChild,
+	children,
 	...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}: PopoverPrimitive.Trigger.Props & { asChild?: boolean }) {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<PopoverPrimitive.Trigger
+				data-slot="popover-trigger"
+				render={children}
+				{...props}
+			/>
+		);
+	}
+	return (
+		<PopoverPrimitive.Trigger data-slot="popover-trigger" {...props}>
+			{children}
+		</PopoverPrimitive.Trigger>
+	);
 }
 
 function PopoverContent({
 	className,
 	align = "center",
 	sideOffset = 4,
+	side = "bottom",
+	onEscapeKeyDown: _onEscapeKeyDown,
+	onPointerDownOutside: _onPointerDownOutside,
+	onOpenAutoFocus: _onOpenAutoFocus,
+	onCloseAutoFocus: _onCloseAutoFocus,
+	forceMount: _forceMount,
+	asChild: _asChild,
 	...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+}: PopoverPrimitive.Popup.Props &
+	Pick<
+		PopoverPrimitive.Positioner.Props,
+		"align" | "side" | "sideOffset"
+	> & {
+		onEscapeKeyDown?: (e: any) => void;
+		onPointerDownOutside?: (e: any) => void;
+		onOpenAutoFocus?: (e: any) => void;
+		onCloseAutoFocus?: (e: any) => void;
+		forceMount?: boolean;
+		asChild?: boolean;
+	}) {
 	return (
 		<PopoverPrimitive.Portal>
-			<PopoverPrimitive.Content
-				data-slot="popover-content"
+			<PopoverPrimitive.Positioner
 				align={align}
+				side={side}
 				sideOffset={sideOffset}
-				className={cn(
-					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[200] w-72 rounded-md border p-4 shadow-md outline-hidden",
-					className,
-				)}
-				{...props}
-			/>
+				className="isolate z-[200]"
+			>
+				<PopoverPrimitive.Popup
+					data-slot="popover-content"
+					className={cn(
+						"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-72 rounded-md border p-4 shadow-md outline-hidden",
+						className,
+					)}
+					{...props}
+				/>
+			</PopoverPrimitive.Positioner>
 		</PopoverPrimitive.Portal>
 	);
 }
 
-function PopoverAnchor({
-	...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
-}
-
 export { Popover, PopoverTrigger, PopoverContent };
diff --git a/vite/src/components/ui/scroll-area.tsx b/vite/src/components/ui/scroll-area.tsx
index ecb7fc891..22abdc01e 100644
--- a/vite/src/components/ui/scroll-area.tsx
+++ b/vite/src/components/ui/scroll-area.tsx
@@ -1,4 +1,4 @@
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -7,7 +7,7 @@ function ScrollArea({
 	className,
 	children,
 	...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+}: ScrollAreaPrimitive.Root.Props) {
 	return (
 		<ScrollAreaPrimitive.Root
 			data-slot="scroll-area"
@@ -30,9 +30,9 @@ function ScrollBar({
 	className,
 	orientation = "vertical",
 	...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+}: ScrollAreaPrimitive.Scrollbar.Props) {
 	return (
-		<ScrollAreaPrimitive.ScrollAreaScrollbar
+		<ScrollAreaPrimitive.Scrollbar
 			data-slot="scroll-area-scrollbar"
 			orientation={orientation}
 			className={cn(
@@ -45,12 +45,12 @@ function ScrollBar({
 			)}
 			{...props}
 		>
-			<ScrollAreaPrimitive.ScrollAreaThumb
+			<ScrollAreaPrimitive.Thumb
 				data-slot="scroll-area-thumb"
 				className="bg-border relative flex-1 rounded-full"
 			/>
-		</ScrollAreaPrimitive.ScrollAreaScrollbar>
+		</ScrollAreaPrimitive.Scrollbar>
 	);
 }
 
-export { ScrollArea };
+export { ScrollArea, ScrollBar };
diff --git a/vite/src/components/ui/separator.tsx b/vite/src/components/ui/separator.tsx
index 00b0ff284..fbfc19566 100644
--- a/vite/src/components/ui/separator.tsx
+++ b/vite/src/components/ui/separator.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -8,14 +8,17 @@ import { cn } from "@/lib/utils";
 function Separator({
 	className,
 	orientation = "horizontal",
-	decorative = true,
+	decorative,
 	...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+}: SeparatorPrimitive.Props & {
+	orientation?: "horizontal" | "vertical";
+	decorative?: boolean;
+}) {
 	return (
-		<SeparatorPrimitive.Root
+		<SeparatorPrimitive
 			data-slot="separator-root"
-			decorative={decorative}
 			orientation={orientation}
+			data-orientation={orientation}
 			className={cn(
 				"shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px bg-border",
 				className,
diff --git a/vite/src/components/ui/switch.tsx b/vite/src/components/ui/switch.tsx
index f1a270540..328755139 100644
--- a/vite/src/components/ui/switch.tsx
+++ b/vite/src/components/ui/switch.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -9,14 +9,14 @@ function Switch({
 	className,
 	thumbClassName,
 	...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+}: SwitchPrimitive.Root.Props & {
 	thumbClassName?: string;
 }) {
 	return (
 		<SwitchPrimitive.Root
 			data-slot="switch"
 			className={cn(
-				"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				"peer data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}
@@ -24,7 +24,7 @@ function Switch({
 			<SwitchPrimitive.Thumb
 				data-slot="switch-thumb"
 				className={cn(
-					"bg-background pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+					"bg-background pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-checked:translate-x-4 data-unchecked:translate-x-0",
 					thumbClassName,
 				)}
 			/>
diff --git a/vite/src/components/ui/tabs.tsx b/vite/src/components/ui/tabs.tsx
index 46525bcba..3bbb2f8a2 100644
--- a/vite/src/components/ui/tabs.tsx
+++ b/vite/src/components/ui/tabs.tsx
@@ -1,15 +1,19 @@
 "use client";
 
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-const Tabs = TabsPrimitive.Root;
+function Tabs({
+	...props
+}: TabsPrimitive.Root.Props) {
+	return <TabsPrimitive.Root data-slot="tabs" {...props} />;
+}
 
 const TabsList = React.forwardRef<
-	React.ElementRef<typeof TabsPrimitive.List>,
-	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+	HTMLDivElement,
+	TabsPrimitive.List.Props
 >(({ className, ...props }, ref) => (
 	<TabsPrimitive.List
 		ref={ref}
@@ -20,32 +24,32 @@ const TabsList = React.forwardRef<
 		{...props}
 	/>
 ));
-TabsList.displayName = TabsPrimitive.List.displayName;
+TabsList.displayName = "TabsList";
 
 const TabsTrigger = React.forwardRef<
-	React.ElementRef<typeof TabsPrimitive.Trigger>,
-	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+	HTMLButtonElement,
+	TabsPrimitive.Tab.Props & {
 		variant?: "default" | "onboarding";
 	}
 >(({ className, variant = "default", ...props }, ref) => (
-	<TabsPrimitive.Trigger
+	<TabsPrimitive.Tab
 		ref={ref}
 		className={cn(
-			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-2 py-1 text-sm font-medium ring-offset-background transition-all cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary hover:bg-interactive-secondary-hover dark:focus-visible:ring-zinc-300 dark:data-[state=active]:bg-zinc-950 dark:data-[state=active]:text-zinc-50",
+			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-2 py-1 text-sm font-medium ring-offset-background transition-all cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-selected:text-primary hover:bg-interactive-secondary-hover dark:focus-visible:ring-zinc-300 dark:data-selected:bg-zinc-950 dark:data-selected:text-zinc-50",
 			className,
 			variant === "onboarding" &&
-				"data-[state=active]:bg-stone-200 data-[state=active]:text-t2 data-[state=active]:font-medium",
+				"data-selected:bg-stone-200 data-selected:text-t2 data-selected:font-medium",
 		)}
 		{...props}
 	/>
 ));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+TabsTrigger.displayName = "TabsTrigger";
 
 const TabsContent = React.forwardRef<
-	React.ElementRef<typeof TabsPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+	HTMLDivElement,
+	TabsPrimitive.Panel.Props
 >(({ className, ...props }, ref) => (
-	<TabsPrimitive.Content
+	<TabsPrimitive.Panel
 		ref={ref}
 		className={cn(
 			"mt-2 mb-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
@@ -54,6 +58,6 @@ const TabsContent = React.forwardRef<
 		{...props}
 	/>
 ));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+TabsContent.displayName = "TabsContent";
 
 export { Tabs, TabsContent, TabsList, TabsTrigger };
diff --git a/vite/src/components/ui/tooltip.tsx b/vite/src/components/ui/tooltip.tsx
index ef784d8bd..90b09dcfd 100644
--- a/vite/src/components/ui/tooltip.tsx
+++ b/vite/src/components/ui/tooltip.tsx
@@ -1,63 +1,89 @@
 "use client";
 
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import type * as React from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
 function TooltipProvider({
-	delayDuration = 0,
+	delay = 0,
 	...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+}: TooltipPrimitive.Provider.Props) {
 	return (
 		<TooltipPrimitive.Provider
 			data-slot="tooltip-provider"
-			delayDuration={delayDuration}
+			delay={delay}
 			{...props}
 		/>
 	);
 }
 
 function Tooltip({
+	delayDuration,
 	...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+}: TooltipPrimitive.Root.Props & { delayDuration?: number }) {
 	return (
-		<TooltipProvider>
+		<TooltipProvider delay={delayDuration}>
 			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
 		</TooltipProvider>
 	);
 }
 
 function TooltipTrigger({
+	asChild,
+	children,
 	...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}: TooltipPrimitive.Trigger.Props & { asChild?: boolean }) {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<TooltipPrimitive.Trigger
+				data-slot="tooltip-trigger"
+				render={children}
+				{...props}
+			/>
+		);
+	}
+	return (
+		<TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props}>
+			{children}
+		</TooltipPrimitive.Trigger>
+	);
 }
 
 function TooltipContent({
 	className,
 	sideOffset = 0,
+	side = "top",
+	align = "center",
 	children,
-
 	...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: TooltipPrimitive.Popup.Props &
+	Pick<
+		TooltipPrimitive.Positioner.Props,
+		"align" | "side" | "sideOffset"
+	>) {
 	return (
 		<TooltipPrimitive.Portal>
-			<TooltipPrimitive.Content
-				data-slot="tooltip-content"
+			<TooltipPrimitive.Positioner
+				side={side}
 				sideOffset={sideOffset}
-				className={cn(
-					`z-[200] overflow-hidden rounded-lg px-4 py-2 text-xs max-w-56 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
+				align={align}
+				className="isolate z-[200]"
+			>
+				<TooltipPrimitive.Popup
+					data-slot="tooltip-content"
+					className={cn(
+						`overflow-hidden rounded-lg px-4 py-2 text-xs max-w-56 animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
           
       backdrop-blur-sm shadow-lg text-t2 border bg-outer-background
           `,
-					className,
-				)}
-				{...props}
-			>
-				{children}
-				{/* <TooltipPrimitive.Arrow className="bg-zinc-900 fill-zinc-900 z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" /> */}
-			</TooltipPrimitive.Content>
+						className,
+					)}
+					{...props}
+				>
+					{children}
+				</TooltipPrimitive.Popup>
+			</TooltipPrimitive.Positioner>
 		</TooltipPrimitive.Portal>
 	);
 }
diff --git a/vite/src/components/v2/CodeGroup.tsx b/vite/src/components/v2/CodeGroup.tsx
index 39397fba7..2872753b7 100644
--- a/vite/src/components/v2/CodeGroup.tsx
+++ b/vite/src/components/v2/CodeGroup.tsx
@@ -1,24 +1,24 @@
 import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import * as React from "react";
 import { useTheme } from "@/contexts/ThemeProvider";
 import { highlightCode } from "@/lib/shikiHighlighter";
 import { cn } from "@/lib/utils";
 
 interface CodeGroupProps
-	extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {}
+	extends TabsPrimitive.Root.Props {}
 
 const CodeGroup = React.forwardRef<
-	React.ElementRef<typeof TabsPrimitive.Root>,
+	HTMLDivElement,
 	CodeGroupProps
 >(({ ...props }, ref) => <TabsPrimitive.Root ref={ref} {...props} />);
 CodeGroup.displayName = "CodeGroup";
 
 interface CodeGroupListProps
-	extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {}
+	extends TabsPrimitive.List.Props {}
 
 const CodeGroupList = React.forwardRef<
-	React.ElementRef<typeof TabsPrimitive.List>,
+	HTMLDivElement,
 	CodeGroupListProps
 >(({ className, ...props }, ref) => (
 	<TabsPrimitive.List
@@ -30,13 +30,13 @@ const CodeGroupList = React.forwardRef<
 CodeGroupList.displayName = "CodeGroupList";
 
 interface CodeGroupTabProps
-	extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {}
+	extends TabsPrimitive.Tab.Props {}
 
 const CodeGroupTab = React.forwardRef<
-	React.ElementRef<typeof TabsPrimitive.Trigger>,
+	HTMLButtonElement,
 	CodeGroupTabProps
 >(({ className, ...props }, ref) => (
-	<TabsPrimitive.Trigger
+	<TabsPrimitive.Tab
 		ref={ref}
 		className={cn(
 			"flex items-center justify-center flex-1 min-w-0 h-6 px-2 py-1 text-[13px] font-semibold tracking-[-0.039px] leading-normal whitespace-nowrap",
@@ -44,8 +44,8 @@ const CodeGroupTab = React.forwardRef<
 			"text-t3 transition-none outline-none",
 			"hover:text-primary",
 			"focus-visible:text-primary",
-			"data-[state=active]:bg-interactive-secondary-hover  data-[state=active]:shadow-[0px_3px_4px_0px_inset_rgba(0,0,0,0.04)]",
-			"data-[state=inactive]:shadow-[0px_-3px_4px_0px_inset_rgba(0,0,0,0.04)]",
+			"data-selected:bg-interactive-secondary-hover  data-selected:shadow-[0px_3px_4px_0px_inset_rgba(0,0,0,0.04)]",
+			"data-unselected:shadow-[0px_-3px_4px_0px_inset_rgba(0,0,0,0.04)]",
 			"first:rounded-tl-md first:border-l",
 			className,
 		)}
@@ -102,16 +102,16 @@ const CodeGroupCopyButton = React.forwardRef<
 CodeGroupCopyButton.displayName = "CodeGroupCopyButton";
 
 interface CodeGroupContentProps
-	extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {
+	extends TabsPrimitive.Panel.Props {
 	copyText?: string;
 }
 
 const CodeGroupContent = React.forwardRef<
-	React.ElementRef<typeof TabsPrimitive.Content>,
+	HTMLDivElement,
 	CodeGroupContentProps
 >(({ className, children, copyText: _copyText, ...props }, ref) => {
 	return (
-		<TabsPrimitive.Content
+		<TabsPrimitive.Panel
 			ref={ref}
 			className={cn(
 				"bg-white dark:bg-background border border-t-0 rounded-bl-lg rounded-br-lg",
@@ -121,7 +121,7 @@ const CodeGroupContent = React.forwardRef<
 			{...props}
 		>
 			{children}
-		</TabsPrimitive.Content>
+		</TabsPrimitive.Panel>
 	);
 });
 CodeGroupContent.displayName = "CodeGroupContent";
diff --git a/vite/src/components/v2/badges/Badge.tsx b/vite/src/components/v2/badges/Badge.tsx
index e7e21bc65..cc3a995d7 100644
--- a/vite/src/components/v2/badges/Badge.tsx
+++ b/vite/src/components/v2/badges/Badge.tsx
@@ -1,11 +1,10 @@
-import { Slot } from "@radix-ui/react-slot";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-// transition-colors focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 dark:border-zinc-800 dark:focus:ring-zinc-300
-
 const badgeVariants = cva(
 	`inline-flex items-center rounded-lg border border-zinc-200 px-1.5 py-0.5
 
@@ -38,18 +37,24 @@ function Badge({
 	variant,
 	size,
 	asChild = false,
+	render: renderProp,
 	...props
-}: React.ComponentProps<"span"> &
+}: useRender.ComponentProps<"span"> &
 	VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-	const Comp = asChild ? Slot : "span";
-
-	return (
-		<Comp
-			data-slot="badge"
-			className={cn(badgeVariants({ variant, size }), className)}
-			{...props}
-		/>
-	);
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps<"span">(
+			{
+				className: cn(badgeVariants({ variant, size }), className),
+			},
+			props,
+		),
+		render: renderProp,
+		state: {
+			slot: "badge",
+			variant,
+		},
+	});
 }
 
 export { Badge };
diff --git a/vite/src/components/v2/buttons/Button.tsx b/vite/src/components/v2/buttons/Button.tsx
index ecef5a224..c67bf4a71 100644
--- a/vite/src/components/v2/buttons/Button.tsx
+++ b/vite/src/components/v2/buttons/Button.tsx
@@ -1,12 +1,10 @@
 /* eslint-disable react-refresh/only-export-components */
-import { Slot } from "@radix-ui/react-slot";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import SmallSpinner from "@/components/general/SmallSpinner";
 import { cn } from "@/lib/utils";
 
-// Remove ring styles
-// focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
 const buttonVariants = cva(
 	`inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none cursor-pointer
   rounded-lg group/btn transition-colors  w-fit transform-gpu
@@ -14,7 +12,6 @@ const buttonVariants = cva(
 	{
 		variants: {
 			variant: {
-				// Custom
 				primary: `
 				!text-primary-foreground
 				bg-primary
@@ -76,6 +73,7 @@ export interface ButtonProps
 	transition?: boolean;
 	disableActive?: boolean;
 	hide?: boolean;
+	render?: React.ReactElement;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -90,11 +88,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			disableActive = true,
 			hide = false,
 			children,
+			render: renderProp,
 			...props
 		},
 		ref,
 	) => {
-		const Comp = asChild ? Slot : "button";
+		const effectiveRender = asChild && React.isValidElement(children) ? children : renderProp;
 
 		const getDisableActiveStyles = () => {
 			if (!disableActive) return "";
@@ -126,9 +125,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 		if (hide) return null;
 
 		return (
-			<Comp
+			<ButtonPrimitive
 				ref={ref}
 				data-slot="button"
+				render={effectiveRender}
 				className={cn(
 					buttonVariants({ variant, size, className }),
 					getDisableActiveStyles(),
@@ -136,19 +136,23 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 				disabled={isLoading || props.disabled}
 				{...props}
 			>
-				{isLoading ? (
-					<SmallSpinner
-						size={14}
-						className={variant === "primary" ? "relative z-10" : undefined}
-					/>
-				) : variant === "primary" ? (
-					<span className="relative z-10 inline-flex items-center gap-2 transition-none">
-						{children}
-					</span>
-				) : (
-					children
+				{effectiveRender ? undefined : (
+					<>
+						{isLoading ? (
+							<SmallSpinner
+								size={14}
+								className={variant === "primary" ? "relative z-10" : undefined}
+							/>
+						) : variant === "primary" ? (
+							<span className="relative z-10 inline-flex items-center gap-2 transition-none">
+								{children}
+							</span>
+						) : (
+							children
+						)}
+					</>
 				)}
-			</Comp>
+			</ButtonPrimitive>
 		);
 	},
 );
diff --git a/vite/src/components/v2/buttons/CheckboxButton.tsx b/vite/src/components/v2/buttons/CheckboxButton.tsx
index aa0e87d83..64265de8f 100644
--- a/vite/src/components/v2/buttons/CheckboxButton.tsx
+++ b/vite/src/components/v2/buttons/CheckboxButton.tsx
@@ -1,15 +1,15 @@
-import type * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import type { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import * as React from "react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 
 export const CheckboxButton = React.forwardRef<
-	React.ElementRef<typeof CheckboxPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+	HTMLButtonElement,
+	CheckboxPrimitive.Root.Props
 >(({ className, onCheckedChange, checked, ...props }, ref) => {
 	const handleClick = () => {
 		const newChecked = !checked;
-		onCheckedChange?.(newChecked);
+		onCheckedChange?.(newChecked, undefined as any);
 	};
 
 	return (
@@ -35,7 +35,7 @@ export const CheckboxButton = React.forwardRef<
 				ref={ref}
 				tabIndex={-1}
 				onClick={(e) => e.preventDefault()}
-				className="data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:shadow-none size-3.5 shadow-[0_2px_4px_0_#00000005,inset_0_2px_1px_0_#FFFFFF] rounded-md border border-border bg-interactive-secondary dark:shadow-none pointer-events-none"
+				className="data-checked:bg-primary data-checked:border-primary data-checked:shadow-none size-3.5 shadow-[0_2px_4px_0_#00000005,inset_0_2px_1px_0_#FFFFFF] rounded-md border border-border bg-interactive-secondary dark:shadow-none pointer-events-none"
 				iconClassName="size-2"
 				{...props}
 			/>
diff --git a/vite/src/components/v2/checkboxes/Checkbox.tsx b/vite/src/components/v2/checkboxes/Checkbox.tsx
index ae1cafc46..9c3f0b6df 100644
--- a/vite/src/components/v2/checkboxes/Checkbox.tsx
+++ b/vite/src/components/v2/checkboxes/Checkbox.tsx
@@ -1,13 +1,12 @@
 "use client";
 
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { CheckIcon } from "lucide-react";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-interface CheckboxProps
-	extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
+interface CheckboxProps extends CheckboxPrimitive.Root.Props {
 	size?: "sm" | "md" | "lg";
 	disabled?: boolean;
 }
@@ -24,7 +23,7 @@ function Checkbox({
 	const handleKeyDown = (e: React.KeyboardEvent) => {
 		if (e.key === "Enter" && !disabled) {
 			e.preventDefault();
-			onCheckedChange?.(!checked);
+			onCheckedChange?.(!checked, undefined as any);
 		}
 	};
 
@@ -33,7 +32,7 @@ function Checkbox({
 			data-slot="checkbox"
 			style={{ cursor: "pointer", ...style }}
 			className={cn(
-				"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive  shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				"peer border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive  shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 
 				!disabled && "hover:bg-hover-primary hover:border-primary",
 				size === "sm" && "size-3.5",
diff --git a/vite/src/components/v2/checkboxes/TextCheckbox.tsx b/vite/src/components/v2/checkboxes/TextCheckbox.tsx
index 41085bde4..c69eaf16c 100644
--- a/vite/src/components/v2/checkboxes/TextCheckbox.tsx
+++ b/vite/src/components/v2/checkboxes/TextCheckbox.tsx
@@ -1,11 +1,10 @@
-import type * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import type * as React from "react";
 import { useId } from "react";
 import { cn } from "@/lib/utils";
 import { Checkbox } from "./Checkbox";
 
 interface TextCheckboxProps
-	extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
+	extends React.ComponentProps<typeof Checkbox> {
 	children: React.ReactNode;
 }
 
diff --git a/vite/src/components/v2/dialogs/Dialog.tsx b/vite/src/components/v2/dialogs/Dialog.tsx
index bf5cd72ca..eaa8960e9 100644
--- a/vite/src/components/v2/dialogs/Dialog.tsx
+++ b/vite/src/components/v2/dialogs/Dialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import { XIcon } from "lucide-react";
 import * as React from "react";
 
@@ -8,57 +8,87 @@ import { cn } from "@/lib/utils";
 
 function Dialog({
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+}: DialogPrimitive.Root.Props) {
 	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
+	asChild,
+	children,
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}: DialogPrimitive.Trigger.Props & { asChild?: boolean }) {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<DialogPrimitive.Trigger
+				data-slot="dialog-trigger"
+				render={children}
+				{...props}
+			/>
+		);
+	}
+	return (
+		<DialogPrimitive.Trigger data-slot="dialog-trigger" {...props}>
+			{children}
+		</DialogPrimitive.Trigger>
+	);
 }
 
 function DialogPortal({
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+}: DialogPrimitive.Portal.Props) {
 	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
+	asChild,
+	children,
 	...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}: DialogPrimitive.Close.Props & { asChild?: boolean }) {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<DialogPrimitive.Close
+				data-slot="dialog-close"
+				render={children}
+				{...props}
+			/>
+		);
+	}
+	return (
+		<DialogPrimitive.Close data-slot="dialog-close" {...props}>
+			{children}
+		</DialogPrimitive.Close>
+	);
 }
 
-const DialogOverlay = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Overlay>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-	<DialogPrimitive.Overlay
-		ref={ref}
-		data-slot="dialog-overlay"
-		className={cn(
-			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[170] bg-black/50 dark:bg-black/80",
-			className,
-		)}
-		{...props}
-	/>
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+function DialogOverlay({
+	className,
+	...props
+}: DialogPrimitive.Backdrop.Props) {
+	return (
+		<DialogPrimitive.Backdrop
+			data-slot="dialog-overlay"
+			className={cn(
+				"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-[170] bg-black/50 dark:bg-black/80",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
 
 const DialogContent = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+	HTMLDivElement,
+	DialogPrimitive.Popup.Props & {
 		showCloseButton?: boolean;
 	}
 >(({ className, children, showCloseButton = true, ...props }, ref) => (
 	<DialogPortal data-slot="dialog-portal">
 		<DialogOverlay />
-		<DialogPrimitive.Content
+		<DialogPrimitive.Popup
 			ref={ref}
 			data-slot="dialog-content"
 			className={cn(
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[40%] left-[50%] z-[180] grid translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200",
+				"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 fixed top-[40%] left-[50%] z-[180] grid translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200",
 
 				"w-full max-w-md gap-3 bg-background",
 				"p-4",
@@ -70,16 +100,16 @@ const DialogContent = React.forwardRef<
 			{showCloseButton && (
 				<DialogPrimitive.Close
 					data-slot="dialog-close"
-					className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+					className="ring-offset-background focus:ring-ring data-open:bg-accent data-open:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 				>
 					<XIcon />
 					<span className="sr-only">Close</span>
 				</DialogPrimitive.Close>
 			)}
-		</DialogPrimitive.Content>
+		</DialogPrimitive.Popup>
 	</DialogPortal>
 ));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+DialogContent.displayName = "DialogContent";
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 	return (
@@ -105,8 +135,8 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const DialogTitle = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Title>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+	HTMLHeadingElement,
+	DialogPrimitive.Title.Props
 >(({ className, ...props }, ref) => (
 	<DialogPrimitive.Title
 		ref={ref}
@@ -115,11 +145,11 @@ const DialogTitle = React.forwardRef<
 		{...props}
 	/>
 ));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+DialogTitle.displayName = "DialogTitle";
 
 const DialogDescription = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Description>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+	HTMLParagraphElement,
+	DialogPrimitive.Description.Props
 >(({ className, ...props }, ref) => (
 	<DialogPrimitive.Description
 		ref={ref}
@@ -128,7 +158,7 @@ const DialogDescription = React.forwardRef<
 		{...props}
 	/>
 ));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+DialogDescription.displayName = "DialogDescription";
 
 export {
 	Dialog,
diff --git a/vite/src/components/v2/dropdowns/DropdownMenu.tsx b/vite/src/components/v2/dropdowns/DropdownMenu.tsx
index 7af30e9ea..2837777db 100644
--- a/vite/src/components/v2/dropdowns/DropdownMenu.tsx
+++ b/vite/src/components/v2/dropdowns/DropdownMenu.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
@@ -9,14 +9,12 @@ import { useHotkeys } from "react-hotkeys-hook";
 import SmallSpinner from "@/components/general/SmallSpinner";
 import { cn } from "@/lib/utils";
 
-// Context for sharing menu open state with items
 const DropdownMenuContext = React.createContext<{ isOpen: boolean }>({
 	isOpen: false,
 });
 
-// CVA variants for menu items
 const dropdownMenuItemVariants = cva(
-	"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-t2 outline-hidden transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+	"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-t2 outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
 	{
 		variants: {
 			variant: {
@@ -40,86 +38,91 @@ type DropdownMenuItemVariantProps = VariantProps<
 	typeof dropdownMenuItemVariants
 >;
 
-// Root
 function DropdownMenu(
-	props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>,
+	props: MenuPrimitive.Root.Props,
 ) {
 	const isOpen = props.open ?? false;
 	return (
 		<DropdownMenuContext.Provider value={{ isOpen }}>
-			<DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+			<MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 		</DropdownMenuContext.Provider>
 	);
 }
 
-// Trigger
 const DropdownMenuTrigger = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
-	React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>
->(function DropdownMenuTrigger(props, ref) {
+	HTMLButtonElement,
+	MenuPrimitive.Trigger.Props & { asChild?: boolean }
+>(function DropdownMenuTrigger({ asChild, children, ...props }, ref) {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<MenuPrimitive.Trigger
+				ref={ref}
+				data-slot="dropdown-menu-trigger"
+				render={children}
+				{...props}
+			/>
+		);
+	}
 	return (
-		<DropdownMenuPrimitive.Trigger
+		<MenuPrimitive.Trigger
 			ref={ref}
 			data-slot="dropdown-menu-trigger"
 			{...props}
-		/>
+		>
+			{children}
+		</MenuPrimitive.Trigger>
 	);
 });
 
-// Group
 function DropdownMenuGroup(
-	props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>,
+	props: MenuPrimitive.Group.Props,
 ) {
 	return (
-		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+		<MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
 	);
 }
 
-// Portal
-function DropdownMenuPortal(
-	props: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,
-) {
-	return <DropdownMenuPrimitive.Portal {...props} />;
+function DropdownMenuPortal({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return <>{children}</>;
 }
 
-// Sub
 function DropdownMenuSub(
-	props: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>,
+	props: MenuPrimitive.SubmenuRoot.Props,
 ) {
-	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+	return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
 }
 
-// RadioGroup
 function DropdownMenuRadioGroup(
-	props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,
+	props: MenuPrimitive.RadioGroup.Props,
 ) {
 	return (
-		<DropdownMenuPrimitive.RadioGroup
+		<MenuPrimitive.RadioGroup
 			data-slot="dropdown-menu-radio-group"
 			{...props}
 		/>
 	);
 }
 
-// SubTrigger
-type DropdownMenuSubTriggerProps = React.ComponentProps<
-	typeof DropdownMenuPrimitive.SubTrigger
-> & {
+type DropdownMenuSubTriggerProps = MenuPrimitive.SubmenuTrigger.Props & {
 	inset?: boolean;
 	withIcon?: boolean;
 };
 
 const DropdownMenuSubTrigger = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	HTMLDivElement,
 	DropdownMenuSubTriggerProps
 >(function DropdownMenuSubTrigger(props, ref) {
 	const { inset, withIcon = true, className, children, ...rest } = props;
 	return (
-		<DropdownMenuPrimitive.SubTrigger
+		<MenuPrimitive.SubmenuTrigger
 			ref={ref}
 			data-slot="dropdown-menu-sub-trigger"
 			className={cn(
-				"flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm text-t2 outline-hidden hover:bg-accent focus:bg-accent data-[state=open]:bg-accent [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0",
+				"flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm text-t2 outline-hidden hover:bg-accent focus:bg-accent data-popup-open:bg-accent [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0",
 				inset && "pl-8",
 				className,
 			)}
@@ -127,73 +130,80 @@ const DropdownMenuSubTrigger = React.forwardRef<
 		>
 			{children}
 			{withIcon && <ChevronRight className="ml-auto text-t3" />}
-		</DropdownMenuPrimitive.SubTrigger>
+		</MenuPrimitive.SubmenuTrigger>
 	);
 });
 
-// SubContent
 const DropdownMenuSubContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-	React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>
+	HTMLDivElement,
+	MenuPrimitive.Popup.Props & { sideOffset?: number }
 >(function DropdownMenuSubContent(props, ref) {
-	const { className, ...rest } = props;
+	const { className, sideOffset = 0, ...rest } = props;
 	return (
-		<DropdownMenuPrimitive.SubContent
-			ref={ref}
-			data-slot="dropdown-menu-sub-content"
-			className={cn(
-				"bg-interactive-secondary text-t2 z-[101] min-w-[8rem] overflow-hidden rounded-lg border p-1 shadow-md",
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-				className,
-			)}
-			{...rest}
-		/>
+		<MenuPrimitive.Portal>
+			<MenuPrimitive.Positioner
+				sideOffset={sideOffset}
+				className="isolate z-[101]"
+			>
+				<MenuPrimitive.Popup
+					ref={ref}
+					data-slot="dropdown-menu-sub-content"
+					className={cn(
+						"bg-interactive-secondary text-t2 min-w-[8rem] overflow-hidden rounded-lg border p-1 shadow-md",
+						"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+						className,
+					)}
+					{...rest}
+				/>
+			</MenuPrimitive.Positioner>
+		</MenuPrimitive.Portal>
 	);
 });
 
-// Content
-type DropdownMenuContentProps = React.ComponentProps<
-	typeof DropdownMenuPrimitive.Content
-> & {
+type DropdownMenuContentProps = MenuPrimitive.Popup.Props & {
 	sideOffset?: number;
+	side?: "top" | "bottom" | "left" | "right";
+	align?: "start" | "center" | "end";
+	onCloseAutoFocus?: (e: any) => void;
 };
 
 const DropdownMenuContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+	HTMLDivElement,
 	DropdownMenuContentProps
 >(function DropdownMenuContent(props, ref) {
-	const { className, sideOffset = 4, ...rest } = props;
+	const { className, sideOffset = 4, side = "bottom", align = "start", onCloseAutoFocus: _onCloseAutoFocus, ...rest } = props;
 	return (
-		<DropdownMenuPrimitive.Portal>
-			<DropdownMenuPrimitive.Content
-				ref={ref}
-				data-slot="dropdown-menu-content"
+		<MenuPrimitive.Portal>
+			<MenuPrimitive.Positioner
 				sideOffset={sideOffset}
-				onCloseAutoFocus={(e) => e.preventDefault()}
-				className={cn(
-					"bg-interactive-secondary text-t2 z-[101] min-w-[8rem] overflow-hidden rounded-lg border p-1 shadow-md",
-					"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-					className,
-				)}
-				{...rest}
-			/>
-		</DropdownMenuPrimitive.Portal>
+				side={side}
+				align={align}
+				className="isolate z-[101] outline-none"
+			>
+				<MenuPrimitive.Popup
+					ref={ref}
+					data-slot="dropdown-menu-content"
+					className={cn(
+						"bg-interactive-secondary text-t2 min-w-[8rem] overflow-hidden rounded-lg border p-1 shadow-md",
+						"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+						className,
+					)}
+					{...rest}
+				/>
+			</MenuPrimitive.Positioner>
+		</MenuPrimitive.Portal>
 	);
 });
 
-// Item
-type DropdownMenuItemProps = React.ComponentProps<
-	typeof DropdownMenuPrimitive.Item
-> &
+type DropdownMenuItemProps = MenuPrimitive.Item.Props &
 	DropdownMenuItemVariantProps & {
 		isLoading?: boolean;
 		shimmer?: boolean;
-		/** Keyboard shortcut that triggers this item when the menu is open */
 		shortcut?: string;
 	};
 
 const DropdownMenuItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+	HTMLDivElement,
 	DropdownMenuItemProps
 >(function DropdownMenuItem(props, ref) {
 	const {
@@ -213,7 +223,7 @@ const DropdownMenuItem = React.forwardRef<
 		shortcut ?? "",
 		(e) => {
 			e.preventDefault();
-			onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);
+			onClick?.(e as any);
 		},
 		{
 			enabled: !!shortcut && isOpen,
@@ -222,7 +232,7 @@ const DropdownMenuItem = React.forwardRef<
 	);
 
 	return (
-		<DropdownMenuPrimitive.Item
+		<MenuPrimitive.Item
 			ref={ref}
 			data-slot="dropdown-menu-item"
 			className={cn(
@@ -240,85 +250,73 @@ const DropdownMenuItem = React.forwardRef<
 					<SmallSpinner />
 				</>
 			) : (
-				<>
-					{children}
-					{/* {shortcut && (
-						<span className="ml-auto text-xs tracking-widest text-t4 uppercase">
-							{shortcut}
-						</span>
-					)} */}
-				</>
+				children
 			)}
-		</DropdownMenuPrimitive.Item>
+		</MenuPrimitive.Item>
 	);
 });
 
-// CheckboxItem
 const DropdownMenuCheckboxItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-	React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>
+	HTMLDivElement,
+	MenuPrimitive.CheckboxItem.Props
 >(function DropdownMenuCheckboxItem(props, ref) {
 	const { className, children, ...rest } = props;
 	return (
-		<DropdownMenuPrimitive.CheckboxItem
+		<MenuPrimitive.CheckboxItem
 			ref={ref}
 			data-slot="dropdown-menu-checkbox-item"
 			className={cn(
-				"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-1 pr-2 text-sm text-t2 outline-hidden transition-colors hover:bg-accent focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+				"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-1 pr-2 text-sm text-t2 outline-hidden transition-colors hover:bg-accent focus:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50",
 				className,
 			)}
 			{...rest}
 		>
 			{children}
 			<span className="absolute right-2 flex size-3.5 items-center justify-center">
-				<DropdownMenuPrimitive.ItemIndicator>
+				<MenuPrimitive.CheckboxItemIndicator>
 					<Check className="size-4 text-t3" />
-				</DropdownMenuPrimitive.ItemIndicator>
+				</MenuPrimitive.CheckboxItemIndicator>
 			</span>
-		</DropdownMenuPrimitive.CheckboxItem>
+		</MenuPrimitive.CheckboxItem>
 	);
 });
 
-// RadioItem
 const DropdownMenuRadioItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-	React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>
+	HTMLDivElement,
+	MenuPrimitive.RadioItem.Props
 >(function DropdownMenuRadioItem(props, ref) {
 	const { className, children, ...rest } = props;
 	return (
-		<DropdownMenuPrimitive.RadioItem
+		<MenuPrimitive.RadioItem
 			ref={ref}
 			data-slot="dropdown-menu-radio-item"
 			className={cn(
-				"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-t2 outline-hidden transition-colors hover:bg-accent focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+				"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-t2 outline-hidden transition-colors hover:bg-accent focus:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50",
 				className,
 			)}
 			{...rest}
 		>
 			<span className="absolute left-2 flex size-3.5 items-center justify-center">
-				<DropdownMenuPrimitive.ItemIndicator>
+				<MenuPrimitive.RadioItemIndicator>
 					<Circle className="size-2 fill-current" />
-				</DropdownMenuPrimitive.ItemIndicator>
+				</MenuPrimitive.RadioItemIndicator>
 			</span>
 			{children}
-		</DropdownMenuPrimitive.RadioItem>
+		</MenuPrimitive.RadioItem>
 	);
 });
 
-// Label
-type DropdownMenuLabelProps = React.ComponentProps<
-	typeof DropdownMenuPrimitive.Label
-> & {
+type DropdownMenuLabelProps = MenuPrimitive.GroupLabel.Props & {
 	inset?: boolean;
 };
 
 const DropdownMenuLabel = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+	HTMLDivElement,
 	DropdownMenuLabelProps
 >(function DropdownMenuLabel(props, ref) {
 	const { inset, className, ...rest } = props;
 	return (
-		<DropdownMenuPrimitive.Label
+		<MenuPrimitive.GroupLabel
 			ref={ref}
 			data-slot="dropdown-menu-label"
 			className={cn(
@@ -331,14 +329,13 @@ const DropdownMenuLabel = React.forwardRef<
 	);
 });
 
-// Separator
 const DropdownMenuSeparator = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-	React.ComponentProps<typeof DropdownMenuPrimitive.Separator>
+	HTMLDivElement,
+	MenuPrimitive.Separator.Props
 >(function DropdownMenuSeparator(props, ref) {
 	const { className, ...rest } = props;
 	return (
-		<DropdownMenuPrimitive.Separator
+		<MenuPrimitive.Separator
 			ref={ref}
 			data-slot="dropdown-menu-separator"
 			className={cn("-mx-1 my-1 h-px bg-border", className)}
@@ -347,7 +344,6 @@ const DropdownMenuSeparator = React.forwardRef<
 	);
 });
 
-// Shortcut
 type DropdownMenuShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
 
 function DropdownMenuShortcut(props: DropdownMenuShortcutProps) {
diff --git a/vite/src/components/v2/radio-groups/RadioGroup.tsx b/vite/src/components/v2/radio-groups/RadioGroup.tsx
index 60cf58e79..fb8110fc3 100644
--- a/vite/src/components/v2/radio-groups/RadioGroup.tsx
+++ b/vite/src/components/v2/radio-groups/RadioGroup.tsx
@@ -1,14 +1,15 @@
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { Radio } from "@base-ui/react/radio";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
 const RadioGroup = React.forwardRef<
-	React.ElementRef<typeof RadioGroupPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+	HTMLDivElement,
+	RadioGroupPrimitive.Props
 >(({ className, ...props }, ref) => {
 	return (
-		<RadioGroupPrimitive.Root
+		<RadioGroupPrimitive
 			data-slot="radio-group"
 			className={cn("grid gap-2", className)}
 			{...props}
@@ -16,14 +17,14 @@ const RadioGroup = React.forwardRef<
 		/>
 	);
 });
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+RadioGroup.displayName = "RadioGroup";
 
 const RadioGroupItem = React.forwardRef<
-	React.ElementRef<typeof RadioGroupPrimitive.Item>,
-	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+	HTMLButtonElement,
+	Radio.Root.Props
 >(({ className, style, ...props }, ref) => {
 	return (
-		<RadioGroupPrimitive.Item
+		<Radio.Root
 			ref={ref}
 			data-slot="radio-group-item"
 			style={{ cursor: "pointer", ...style }}
@@ -31,23 +32,22 @@ const RadioGroupItem = React.forwardRef<
 				"w-[13px] h-[13px] px-0.5 py-[3px] rounded-xl inline-flex flex-col justify-center items-center gap-2.5 overflow-hidden transition-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 
 				"bg-interactive-secondary shadow-[0px_2px_4px_0px_rgba(0,0,0,0.02)] border-[0.70px] border",
-				"data-[state=checked]:bg-violet-600 data-[state=checked]:shadow-none data-[state=checked]:border-none",
+				"data-checked:bg-violet-600 data-checked:shadow-none data-checked:border-none",
 
-				// Custom
 				"hover:bg-interactive-secondary-hover hover:border-primary hover:border-[1px]",
 				className,
 			)}
 			{...props}
 		>
-			<RadioGroupPrimitive.Indicator
+			<Radio.Indicator
 				data-slot="radio-group-indicator"
 				className="flex items-center justify-center"
 			>
 				<div className="w-1 h-1 bg-white rounded-full" />
-			</RadioGroupPrimitive.Indicator>
-		</RadioGroupPrimitive.Item>
+			</Radio.Indicator>
+		</Radio.Root>
 	);
 });
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+RadioGroupItem.displayName = "RadioGroupItem";
 
 export { RadioGroup, RadioGroupItem };
diff --git a/vite/src/components/v2/selects/RoleSelect.tsx b/vite/src/components/v2/selects/RoleSelect.tsx
index cef9a1456..d8503614a 100644
--- a/vite/src/components/v2/selects/RoleSelect.tsx
+++ b/vite/src/components/v2/selects/RoleSelect.tsx
@@ -105,7 +105,6 @@ export function RoleSelect({
 					<SelectItem
 						key={role}
 						value={role}
-						textValue={ROLE_META[role].label}
 						className="items-start"
 					>
 						<div className="flex flex-col items-start py-0.5 gap-0.5 w-full">
diff --git a/vite/src/components/v2/selects/SearchableSelect.tsx b/vite/src/components/v2/selects/SearchableSelect.tsx
index 9acd09a52..582daf4c4 100644
--- a/vite/src/components/v2/selects/SearchableSelect.tsx
+++ b/vite/src/components/v2/selects/SearchableSelect.tsx
@@ -116,10 +116,9 @@ export function SearchableSelect<T>({
 			<AnimatePresence>
 				{open && (
 					<PopoverContent
-						forceMount
 						align="start"
 						className={cn(
-							"w-(--radix-popover-trigger-width) p-0 z-200 rounded-md overflow-hidden",
+							"w-(--anchor-width) p-0 z-200 rounded-md overflow-hidden",
 							contentClassName,
 						)}
 						asChild
diff --git a/vite/src/components/v2/selects/Select.tsx b/vite/src/components/v2/selects/Select.tsx
index 8567c9d2c..58e65c48c 100644
--- a/vite/src/components/v2/selects/Select.tsx
+++ b/vite/src/components/v2/selects/Select.tsx
@@ -1,62 +1,44 @@
 "use client";
 
-import * as SelectPrimitive from "@radix-ui/react-select";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-const SelectContext = React.createContext<{
-	triggerRef: React.RefObject<HTMLButtonElement>;
-} | null>(null);
-
 function Select({
 	onValueChange,
 	onOpenChange,
+	value,
+	defaultValue,
 	...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-	const triggerRef = React.useRef<HTMLButtonElement>(null);
-
-	const handleValueChange = (value: string) => {
-		onValueChange?.(value);
-	};
-
-	const handleOpenChange = (open: boolean) => {
-		// When dropdown closes, blur the trigger to remove focus ring
-		if (!open) {
-			setTimeout(() => {
-				if (triggerRef.current) {
-					triggerRef.current.blur();
-				} else {
-					// Fallback: blur the active element if ref isn't set
-					(document.activeElement as HTMLElement)?.blur();
-				}
-			}, 0);
-		}
-		onOpenChange?.(open);
-	};
-
+}: Omit<SelectPrimitive.Root.Props<string>, "onValueChange" | "onOpenChange"> & {
+	onValueChange?: (value: string) => void;
+	onOpenChange?: (open: boolean) => void;
+	value?: string;
+	defaultValue?: string;
+}) {
 	return (
-		<SelectContext.Provider value={{ triggerRef }}>
-			<SelectPrimitive.Root
-				data-slot="select"
-				onValueChange={handleValueChange}
-				onOpenChange={handleOpenChange}
-				{...props}
-			/>
-		</SelectContext.Provider>
+		<SelectPrimitive.Root<string>
+			data-slot="select"
+			value={value}
+			defaultValue={defaultValue}
+			onValueChange={onValueChange ? (val) => onValueChange(val as string) : undefined}
+			onOpenChange={onOpenChange ? (open) => onOpenChange(open) : undefined}
+			{...props}
+		/>
 	);
 }
 
 function SelectGroup({
 	...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+}: SelectPrimitive.Group.Props) {
 	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
 function SelectValue({
 	...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+}: SelectPrimitive.Value.Props) {
 	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
@@ -65,28 +47,22 @@ function SelectTrigger({
 	size = "default",
 	children,
 	...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+}: SelectPrimitive.Trigger.Props & {
 	size?: "sm" | "default";
 }) {
-	const context = React.useContext(SelectContext);
-
 	return (
 		<SelectPrimitive.Trigger
-			ref={context?.triggerRef}
 			data-slot="select-trigger"
 			data-size={size}
 			className={cn(
-				// Essential functionality only - no layout-shifting selectors
 				"[&_svg:not([class*='text-'])]:text-muted-foreground rounded-lg flex items-center justify-between gap-2 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer",
-
-				// Use only custom styles for visual appearance
 				`input-base input-shadow-default input-state-open`,
 				className,
 			)}
 			{...props}
 		>
 			{children}
-			<SelectPrimitive.Icon asChild>
+			<SelectPrimitive.Icon>
 				<ChevronDownIcon className="size-4 opacity-50" />
 			</SelectPrimitive.Icon>
 		</SelectPrimitive.Trigger>
@@ -96,43 +72,26 @@ function SelectTrigger({
 function SelectContent({
 	className,
 	children,
-	position = "popper",
-	onEscapeKeyDown,
+	position = "item-aligned",
 	...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+}: SelectPrimitive.Popup.Props & {
+	position?: string;
+	side?: string;
+}) {
 	return (
 		<SelectPrimitive.Portal>
-			<SelectPrimitive.Content
-				data-slot="select-content"
-				onEscapeKeyDown={(e) => {
-					// Stop propagation to prevent parent dialogs/sheets from closing
-					e.stopPropagation();
-					onEscapeKeyDown?.(e);
-				}}
-				className={cn(
-					// z-[200] to appear above sheets (z-[150])
-					"bg-interactive-secondary text-popover-foreground relative z-[200] max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-
-					position === "popper" &&
-						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-
-					className,
-				)}
-				position={position}
-				{...props}
-			>
-				<SelectScrollUpButton />
-				<SelectPrimitive.Viewport
+			<SelectPrimitive.Positioner className="isolate z-[200]">
+				<SelectPrimitive.Popup
+					data-slot="select-content"
 					className={cn(
-						"p-1",
-						position === "popper" &&
-							"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+						"bg-interactive-secondary text-popover-foreground relative max-h-[var(--available-height)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md p-1",
+						className,
 					)}
+					{...props}
 				>
 					{children}
-				</SelectPrimitive.Viewport>
-				<SelectScrollDownButton />
-			</SelectPrimitive.Content>
+				</SelectPrimitive.Popup>
+			</SelectPrimitive.Positioner>
 		</SelectPrimitive.Portal>
 	);
 }
@@ -140,9 +99,9 @@ function SelectContent({
 function SelectLabel({
 	className,
 	...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+}: SelectPrimitive.GroupLabel.Props) {
 	return (
-		<SelectPrimitive.Label
+		<SelectPrimitive.GroupLabel
 			data-slot="select-label"
 			className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
 			{...props}
@@ -154,12 +113,12 @@ function SelectItem({
 	className,
 	children,
 	...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+}: SelectPrimitive.Item.Props) {
 	return (
 		<SelectPrimitive.Item
 			data-slot="select-item"
 			className={cn(
-				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
 				className,
 			)}
 			{...props}
@@ -177,9 +136,9 @@ function SelectItem({
 function SelectSeparator({
 	className,
 	...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+}: React.ComponentProps<"div">) {
 	return (
-		<SelectPrimitive.Separator
+		<div
 			data-slot="select-separator"
 			className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
 			{...props}
@@ -187,42 +146,6 @@ function SelectSeparator({
 	);
 }
 
-function SelectScrollUpButton({
-	className,
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-	return (
-		<SelectPrimitive.ScrollUpButton
-			data-slot="select-scroll-up-button"
-			className={cn(
-				"flex cursor-default items-center justify-center py-1",
-				className,
-			)}
-			{...props}
-		>
-			<ChevronUpIcon className="size-4" />
-		</SelectPrimitive.ScrollUpButton>
-	);
-}
-
-function SelectScrollDownButton({
-	className,
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-	return (
-		<SelectPrimitive.ScrollDownButton
-			data-slot="select-scroll-down-button"
-			className={cn(
-				"flex cursor-default items-center justify-center py-1",
-				className,
-			)}
-			{...props}
-		>
-			<ChevronDownIcon className="size-4" />
-		</SelectPrimitive.ScrollDownButton>
-	);
-}
-
 export {
 	Select,
 	SelectContent,
diff --git a/vite/src/components/v2/separator.tsx b/vite/src/components/v2/separator.tsx
index 37eeeacdd..61a89e10c 100644
--- a/vite/src/components/v2/separator.tsx
+++ b/vite/src/components/v2/separator.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -10,12 +10,15 @@ function Separator({
 	orientation = "horizontal",
 	decorative = true,
 	...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+}: SeparatorPrimitive.Props & {
+	orientation?: "horizontal" | "vertical";
+	decorative?: boolean;
+}) {
 	return (
-		<SeparatorPrimitive.Root
+		<SeparatorPrimitive
 			data-slot="separator-root"
-			decorative={decorative}
 			orientation={orientation}
+			data-orientation={orientation}
 			className={cn(
 				"shrink-0 data-[orientation=horizontal]:!h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px bg-border atmn-sep",
 				className,
diff --git a/vite/src/components/v2/sheets/Sheet.tsx b/vite/src/components/v2/sheets/Sheet.tsx
index f89e755cd..55283630c 100644
--- a/vite/src/components/v2/sheets/Sheet.tsx
+++ b/vite/src/components/v2/sheets/Sheet.tsx
@@ -1,31 +1,61 @@
 "use client";
 
-import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 import { XIcon } from "lucide-react";
-import type * as React from "react";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
 	return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
 function SheetTrigger({
+	asChild,
+	children,
 	...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}: SheetPrimitive.Trigger.Props & { asChild?: boolean }) {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<SheetPrimitive.Trigger
+				data-slot="sheet-trigger"
+				render={children}
+				{...props}
+			/>
+		);
+	}
+	return (
+		<SheetPrimitive.Trigger data-slot="sheet-trigger" {...props}>
+			{children}
+		</SheetPrimitive.Trigger>
+	);
 }
 
 function SheetClose({
+	asChild,
+	children,
 	...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}: SheetPrimitive.Close.Props & { asChild?: boolean }) {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<SheetPrimitive.Close
+				data-slot="sheet-close"
+				render={children}
+				{...props}
+			/>
+		);
+	}
+	return (
+		<SheetPrimitive.Close data-slot="sheet-close" {...props}>
+			{children}
+		</SheetPrimitive.Close>
+	);
 }
 
 function SheetPortal({
 	container,
 	...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal> & {
+}: SheetPrimitive.Portal.Props & {
 	container?: HTMLElement | null;
 }) {
 	const resolvedContainer =
@@ -33,7 +63,7 @@ function SheetPortal({
 	return (
 		<SheetPrimitive.Portal
 			data-slot="sheet-portal"
-			container={resolvedContainer ?? undefined}
+			container={resolvedContainer as HTMLElement | undefined}
 			{...props}
 		/>
 	);
@@ -42,12 +72,12 @@ function SheetPortal({
 function SheetOverlay({
 	className,
 	...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+}: SheetPrimitive.Backdrop.Props) {
 	return (
-		<SheetPrimitive.Overlay
+		<SheetPrimitive.Backdrop
 			data-slot="sheet-overlay"
 			className={cn(
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[150] bg-white/70 dark:bg-black/70",
+				"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-[150] bg-white/70 dark:bg-black/70",
 				className,
 			)}
 			{...props}
@@ -62,7 +92,7 @@ function SheetContent({
 	hideCloseButton = false,
 	portalContainer,
 	...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+}: SheetPrimitive.Popup.Props & {
 	side?: "top" | "right" | "bottom" | "left";
 	hideCloseButton?: boolean;
 	portalContainer?: HTMLElement | null;
@@ -70,30 +100,30 @@ function SheetContent({
 	return (
 		<SheetPortal container={portalContainer}>
 			<SheetOverlay />
-			<SheetPrimitive.Content
+			<SheetPrimitive.Popup
 				data-slot="sheet-content"
 				className={cn(
-					"bg-card data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-[150] flex flex-col gap-0 shadow-sm transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-300",
+					"bg-card data-open:animate-in data-closed:animate-out fixed z-[150] flex flex-col gap-0 shadow-sm transition ease-in-out data-closed:duration-300 data-open:duration-300",
 					side === "right" &&
-						`data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right top-0 bottom-0 right-0 w-full md:min-w-xs md:max-w-md md:border-l border-border/40`,
+						`data-closed:slide-out-to-right data-open:slide-in-from-right top-0 bottom-0 right-0 w-full md:min-w-xs md:max-w-md md:border-l border-border/40`,
 					side === "left" &&
-						`data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left top-0 bottom-0 left-0 w-3/4 border-r border-border/40 sm:max-w-sm`,
+						`data-closed:slide-out-to-left data-open:slide-in-from-left top-0 bottom-0 left-0 w-3/4 border-r border-border/40 sm:max-w-sm`,
 					side === "top" &&
-						"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top left-0 right-0 top-0 h-auto border-b border-border/40",
+						"data-closed:slide-out-to-top data-open:slide-in-from-top left-0 right-0 top-0 h-auto border-b border-border/40",
 					side === "bottom" &&
-						"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom left-0 right-0 bottom-0 h-auto border-t border-border/40",
+						"data-closed:slide-out-to-bottom data-open:slide-in-from-bottom left-0 right-0 bottom-0 h-auto border-t border-border/40",
 					className,
 				)}
 				{...props}
 			>
 				{children}
 				{!hideCloseButton && (
-					<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-3 right-3 md:top-4 md:right-4 flex items-center justify-center size-10 md:size-auto rounded-sm md:rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+					<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-open:bg-secondary absolute top-3 right-3 md:top-4 md:right-4 flex items-center justify-center size-10 md:size-auto rounded-sm md:rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
 						<XIcon className="size-5 md:size-4" />
 						<span className="sr-only">Close</span>
 					</SheetPrimitive.Close>
 				)}
-			</SheetPrimitive.Content>
+			</SheetPrimitive.Popup>
 		</SheetPortal>
 	);
 }
@@ -121,7 +151,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
 function SheetTitle({
 	className,
 	...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+}: SheetPrimitive.Title.Props) {
 	return (
 		<SheetPrimitive.Title
 			data-slot="sheet-title"
@@ -134,7 +164,7 @@ function SheetTitle({
 function SheetDescription({
 	className,
 	...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+}: SheetPrimitive.Description.Props) {
 	return (
 		<SheetPrimitive.Description
 			data-slot="sheet-description"
diff --git a/vite/src/components/v2/sheets/SheetAccordion.tsx b/vite/src/components/v2/sheets/SheetAccordion.tsx
index e68811c79..8f2edb1cb 100644
--- a/vite/src/components/v2/sheets/SheetAccordion.tsx
+++ b/vite/src/components/v2/sheets/SheetAccordion.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 import { ChevronDownIcon } from "lucide-react";
 import type * as React from "react";
 import { Separator } from "@/components/v2/separator";
@@ -22,13 +22,12 @@ function SheetAccordion({
 	collapsible = true,
 	...props
 }: SheetAccordionProps &
-	Omit<React.ComponentProps<typeof AccordionPrimitive.Root>, "type">) {
+	Omit<AccordionPrimitive.Root.Props, "type">) {
 	return (
 		<>
 			<AccordionPrimitive.Root
-				type={type as any}
-				defaultValue={defaultValue}
-				collapsible={collapsible}
+				multiple={type === "multiple"}
+				defaultValue={defaultValue as any}
 				className="w-full"
 				{...props}
 			>
@@ -61,7 +60,7 @@ function SheetAccordionItem({
 	return (
 		<AccordionPrimitive.Item value={value} className={cn("", className)}>
 			<AccordionPrimitive.Header className="flex">
-				<AccordionPrimitive.Trigger className="flex flex-1 items-start justify-between gap-4 px-4 py-3 text-left transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180 hover:bg-accent/50">
+				<AccordionPrimitive.Trigger className="flex flex-1 items-start justify-between gap-4 px-4 py-3 text-left transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[aria-expanded=true]>svg]:rotate-180 hover:bg-accent/50">
 					<div className="flex flex-col gap-1">
 						<h3 className="text-sm font-medium">{title}</h3>
 						{description && (
@@ -71,9 +70,9 @@ function SheetAccordionItem({
 					<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
 				</AccordionPrimitive.Trigger>
 			</AccordionPrimitive.Header>
-			<AccordionPrimitive.Content className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden">
+			<AccordionPrimitive.Panel className="data-closed:animate-accordion-up data-open:animate-accordion-down overflow-hidden">
 				<div className="px-4 pb-4 pt-2">{children}</div>
-			</AccordionPrimitive.Content>
+			</AccordionPrimitive.Panel>
 		</AccordionPrimitive.Item>
 	);
 }
diff --git a/vite/src/components/v2/tooltips/Tooltip.tsx b/vite/src/components/v2/tooltips/Tooltip.tsx
index ba23739fa..a4cfe3e52 100644
--- a/vite/src/components/v2/tooltips/Tooltip.tsx
+++ b/vite/src/components/v2/tooltips/Tooltip.tsx
@@ -1,56 +1,83 @@
 "use client";
 
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import type * as React from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import * as React from "react";
 import { cn } from "@/lib/utils";
 
 function TooltipProvider({
-	delayDuration = 0,
+	delay = 0,
 	...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+}: TooltipPrimitive.Provider.Props) {
 	return (
 		<TooltipPrimitive.Provider
 			data-slot="tooltip-provider"
-			delayDuration={delayDuration}
+			delay={delay}
 			{...props}
 		/>
 	);
 }
 
 function Tooltip({
+	delayDuration,
 	...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+}: TooltipPrimitive.Root.Props & { delayDuration?: number }) {
 	return (
-		<TooltipProvider>
+		<TooltipProvider delay={delayDuration}>
 			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
 		</TooltipProvider>
 	);
 }
 
 function TooltipTrigger({
+	asChild,
+	children,
 	...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}: TooltipPrimitive.Trigger.Props & { asChild?: boolean }) {
+	if (asChild && React.isValidElement(children)) {
+		return (
+			<TooltipPrimitive.Trigger
+				data-slot="tooltip-trigger"
+				render={children}
+				{...props}
+			/>
+		);
+	}
+	return (
+		<TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props}>
+			{children}
+		</TooltipPrimitive.Trigger>
+	);
 }
 
 function TooltipContent({
 	className,
 	sideOffset = 6,
+	side = "top",
+	align = "center",
 	children,
 	...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: TooltipPrimitive.Popup.Props &
+	Pick<
+		TooltipPrimitive.Positioner.Props,
+		"align" | "side" | "sideOffset"
+	>) {
 	return (
 		<TooltipPrimitive.Portal>
-			<TooltipPrimitive.Content
-				data-slot="tooltip-content"
+			<TooltipPrimitive.Positioner
+				side={side}
 				sideOffset={sideOffset}
-				className={cn(
-					`z-[200] overflow-hidden rounded-[6px] px-2 py-[3px] text-t2 border
+				align={align}
+				className="isolate z-[200]"
+			>
+				<TooltipPrimitive.Popup
+					data-slot="tooltip-content"
+					className={cn(
+						`overflow-hidden rounded-[6px] px-2 py-[3px] text-t2 border
          bg-interactive-secondary dark:bg-card
           text-[13px] font-medium leading-[1.6] tracking-[-0.039px]
           shadow-[0px_0px_4px_2px_rgba(0,0,0,0.05)]
           animate-in fade-in-0 zoom-in-95
-          data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95
+          data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95
           data-[side=bottom]:slide-in-from-top-2
           data-[side=left]:slide-in-from-right-2
           data-[side=right]:slide-in-from-left-2
@@ -69,12 +96,13 @@ function TooltipContent({
           before:data-[side=right]:border-t-[7px] before:data-[side=right]:border-b-[7px] before:data-[side=right]:border-r-[6px]
           before:data-[side=right]:border-t-transparent before:data-[side=right]:border-b-transparent before:data-[side=right]:border-r-t12
           `,
-					className,
-				)}
-				{...props}
-			>
-				{children}
-			</TooltipPrimitive.Content>
+						className,
+					)}
+					{...props}
+				>
+					{children}
+				</TooltipPrimitive.Popup>
+			</TooltipPrimitive.Positioner>
 		</TooltipPrimitive.Portal>
 	);
 }
diff --git a/vite/src/hooks/useControllableState.ts b/vite/src/hooks/useControllableState.ts
new file mode 100644
index 000000000..e53b7a328
--- /dev/null
+++ b/vite/src/hooks/useControllableState.ts
@@ -0,0 +1,37 @@
+import { useCallback, useRef, useState } from "react";
+
+type UseControllableStateParams<T> = {
+	prop?: T;
+	defaultProp?: T;
+	onChange?: (value: T) => void;
+};
+
+/**
+ * Manages state that can be either controlled or uncontrolled.
+ * Replacement for @radix-ui/react-use-controllable-state.
+ */
+function useControllableState<T>({
+	prop,
+	defaultProp,
+	onChange,
+}: UseControllableStateParams<T>): [T | undefined, (value: T) => void] {
+	const [uncontrolled, setUncontrolled] = useState(defaultProp);
+	const isControlled = prop !== undefined;
+	const value = isControlled ? prop : uncontrolled;
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+
+	const setValue = useCallback(
+		(nextValue: T) => {
+			if (!isControlled) {
+				setUncontrolled(nextValue);
+			}
+			onChangeRef.current?.(nextValue);
+		},
+		[isControlled],
+	);
+
+	return [value, setValue];
+}
+
+export { useControllableState };
diff --git a/vite/src/views/main-sidebar/components/OrgDropdown.tsx b/vite/src/views/main-sidebar/components/OrgDropdown.tsx
index 76226f1cf..afd0360e2 100644
--- a/vite/src/views/main-sidebar/components/OrgDropdown.tsx
+++ b/vite/src/views/main-sidebar/components/OrgDropdown.tsx
@@ -1,4 +1,4 @@
-import { DropdownMenuGroup } from "@radix-ui/react-dropdown-menu";
+import { DropdownMenuGroup } from "@/components/v2/dropdowns/DropdownMenu";
 import { useQueryClient } from "@tanstack/react-query";
 import {
 	ChevronDown,
@@ -49,10 +49,10 @@ export const OrgDropdown = () => {
 	const { expanded, setExpanded } = useSidebarContext();
 	const { theme, setTheme } = useTheme();
 
-	let { data: orgs } = useListOrganizations();
+	const { data: orgsData } = useListOrganizations();
+	let orgs = Array.isArray(orgsData) ? orgsData : undefined;
 	const { data: activeOrganization } = authClient.useActiveOrganization();
 
-	// Exclude the active organization from the orgs list (this makes it easier for users to understand which org is active)
 	if (activeOrganization && orgs) {
 		orgs = orgs.filter((o) => o.id !== activeOrganization.id);
 	}
diff --git a/vite/vite.config.ts b/vite/vite.config.ts
index 359b91aa5..bd211d3cb 100644
--- a/vite/vite.config.ts
+++ b/vite/vite.config.ts
@@ -43,20 +43,6 @@ export default defineConfig({
 				"../packages/atmn/src/prompts/skills/index.ts",
 			),
 
-			// Hide Radix UI imports with cleaner aliases
-			"@radix/accordion": "@radix-ui/react-accordion",
-			"@radix/checkbox": "@radix-ui/react-checkbox",
-			"@radix/context-menu": "@radix-ui/react-context-menu",
-			"@radix/dialog": "@radix-ui/react-dialog",
-			"@radix/dropdown-menu": "@radix-ui/react-dropdown-menu",
-			"@radix/popover": "@radix-ui/react-popover",
-			"@radix/scroll-area": "@radix-ui/react-scroll-area",
-			"@radix/select": "@radix-ui/react-select",
-			"@radix/separator": "@radix-ui/react-separator",
-			"@radix/slot": "@radix-ui/react-slot",
-			"@radix/switch": "@radix-ui/react-switch",
-			"@radix/tabs": "@radix-ui/react-tabs",
-			"@radix/tooltip": "@radix-ui/react-tooltip",
 		},
 	},