Merge branch 'electron-vite' into dev

Console.logs are back, I'll do some debugging anyways
2024-03-02 14:36:34 +01:00
parent 1513376a8d c7a119e985
commit ef60a754f1
398 changed files with 8673 additions and 38231 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+out
+.gitignore
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,20 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    '@electron-toolkit',
+    '@electron-toolkit/eslint-config-ts/eslint-recommended',
+    '@vue/eslint-config-typescript/recommended',
+    '@vue/eslint-config-prettier',
+    'plugin:tailwindcss/recommended'
+  ],
+  rules: {
+    'vue/require-default-prop': 'off',
+    'vue/multi-word-component-names': 'off',
+    'tailwindcss/no-custom-classname': 'off'
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@@ -1,36 +1,5 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
 node_modules
-.DS_Store
 dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-*.tsbuildinfo
-
-#Electron-builder output
-/dist_electron
-
-.vite
-out
+out
+.DS_Store
+*.log*
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1,3 @@
+electron_mirror=https://npmmirror.com/mirrors/electron/
+electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
+shamefully-hoist=true
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,6 @@
+out
+dist
+pnpm-lock.yaml
+LICENSE.md
+tsconfig.json
+tsconfig.*.json
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -0,0 +1,5 @@
+singleQuote: true
+semi: false
+printWidth: 100
+trailingComma: none
+endOfLine: auto
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +1,9 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "Vue.volar",
+    "kamikillerto.vscode-colorize",
+    "formulahendry.auto-close-tag",
+    "formulahendry.auto-rename-tag"
+  ]
 }
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -0,0 +1,39 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Main Process",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceRoot}",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
+      "windows": {
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
+      },
+      "runtimeArgs": ["--sourcemap"],
+      "env": {
+        "REMOTE_DEBUGGING_PORT": "9222"
+      }
+    },
+    {
+      "name": "Debug Renderer Process",
+      "port": 9222,
+      "request": "attach",
+      "type": "chrome",
+      "webRoot": "${workspaceFolder}/src/renderer",
+      "timeout": 60000,
+      "presentation": {
+        "hidden": true
+      }
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug All",
+      "configurations": ["Debug Main Process", "Debug Renderer Process"],
+      "presentation": {
+        "order": 1
+      }
+    }
+  ]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,14 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  }
+}
--- a/README.md
+++ b/README.md
@@ -5,8 +5,8 @@ Haptic configuration tool
 ## Running the code

 - use VSCode (or WebStorm) with the appropriate Vue plugins (Vetur, i18n Ally, ESLint, Prettier, etc.)
- run `npm i` to install dependencies
- run `npm run dev` to start the json-server and electron app
+- run `pnpm i` to install dependencies
+- run `pnpm dev` to start the json-server and electron app

 ## Connecting your Nano

--- a/build/entitlements.mac.plist
+++ b/build/entitlements.mac.plist
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+    <true/>
+  </dict>
+</plist>
--- a/build/icon.icns
+++ b/build/icon.icns
--- a/src/assets/favicon.ico
+++ b/src/assets/favicon.ico
--- a/src/assets/favicon.png
+++ b/src/assets/favicon.png
--- a/components.json
+++ b/components.json
@@ -1,16 +1,16 @@
 {
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "new-york",
-  "typescript": false,
+  "typescript": true,
  "tailwind": {
    "config": "tailwind.config.js",
-    "css": "src/assets/index.css",
+    "css": "src/renderer/src/assets/main.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "framework": "vite",
  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
+    "components": "src/renderer/src/components",
+    "utils": "src/renderer/src/lib/utils"
  }
 }
--- a/dev-app-update.yml
+++ b/dev-app-update.yml
@@ -0,0 +1,3 @@
+provider: generic
+url: https://example.com/auto-updates
+updaterCacheDirName: zeroone-updater
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -0,0 +1,45 @@
+appId: com.electron.app
+productName: zeroone
+directories:
+  buildResources: build
+files:
+  - '!**/.vscode/*'
+  - '!src/*'
+  - '!electron.vite.config.{js,ts,mjs,cjs}'
+  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
+  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+asarUnpack:
+  - resources/**
+win:
+  executableName: zeroone
+nsis:
+  artifactName: ${name}-${version}-setup.${ext}
+  shortcutName: ${productName}
+  uninstallDisplayName: ${productName}
+  createDesktopShortcut: always
+mac:
+  entitlementsInherit: build/entitlements.mac.plist
+  extendInfo:
+    - NSCameraUsageDescription: Application requests access to the device's camera.
+    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
+    - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
+    - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
+  notarize: false
+dmg:
+  artifactName: ${name}-${version}.${ext}
+linux:
+  target:
+    - AppImage
+    - snap
+    - deb
+  maintainer: electronjs.org
+  category: Utility
+appImage:
+  artifactName: ${name}-${version}.${ext}
+npmRebuild: false
+publish:
+  provider: generic
+  url: https://example.com/auto-updates
+electronDownload:
+  mirror: https://npmmirror.com/mirrors/electron/
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -0,0 +1,34 @@
+import { resolve } from 'path'
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import vue from '@vitejs/plugin-vue'
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+
+import tailwind from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+
+export default defineConfig({
+  main: {
+    plugins: [externalizeDepsPlugin()]
+  },
+  preload: {
+    plugins: [externalizeDepsPlugin()]
+  },
+  renderer: {
+    resolve: {
+      alias: {
+        '@renderer': resolve('src/renderer/src')
+      }
+    },
+    plugins: [
+      vue(),
+      VueI18nPlugin({
+        jitCompilation: true // Without this, we get CSP errors
+      })
+    ],
+    css: {
+      postcss: {
+        plugins: [tailwind(), autoprefixer()]
+      }
+    }
+  }
+})
--- a/forge.config.js
+++ b/forge.config.js
@@ -1,54 +0,0 @@
-module.exports = {
-  packagerConfig: {
-    icon: 'src/assets/favicon',
-  },
-  rebuildConfig: {},
-  makers: [
-    {
-      name: '@electron-forge/maker-squirrel',
-      config: {},
-    },
-    {
-      name: '@electron-forge/maker-zip',
-      platforms: ['darwin'],
-    },
-    {
-      name: '@electron-forge/maker-deb',
-      config: {},
-    },
-    {
-      name: '@electron-forge/maker-rpm',
-      config: {},
-    },
-  ],
-  plugins: [
-    {
-      name: '@electron-forge/plugin-vite',
-      config: {
-        // `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
-        // If you are familiar with Vite configuration, it will look really familiar.
-        build: [
-          {
-            // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
-            entry: 'src/main.js',
-            config: 'vite.main.config.mjs',
-          },
-          {
-            entry: 'src/preload.js',
-            config: 'vite.preload.config.mjs',
-          },
-        ],
-        renderer: [
-          {
-            name: 'main_window',
-            config: 'vite.renderer.config.mjs',
-          },
-          {
-            name: 'loading_window',
-            config: 'vite.loading.config.mjs',
-          }
-        ],
-      },
-    },
-  ],
-};
--- a/index.html
+++ b/index.html
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="/src/assets/favicon.png">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ZERO/ONE Configuration Suite</title>
-  <style>
-      html {
-          background: black;
-      }
-  </style>
-  <link rel="preload" href="/src/assets/fonts/ProtoMono-Regular.ttf" as="font" crossorigin="anonymous" />
-  <link rel="preload" href="/src/assets/fonts/JetBrainsMono%5Bwght%5D.ttf" as="font" crossorigin="anonymous" />
-  <link rel="preload" href="/src/assets/fonts/SG12.ttf" as="font" crossorigin="anonymous" />
-  <link rel="preload" href="/src/assets/fonts/andina.ttf" as="font" crossorigin="anonymous" />
-</head>
-<body class="dark bg-background">
-<div id="app"></div>
-<script type="module" src="/src/renderer.js"></script>
-</body>
-</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "exclude": ["node_modules", "dist"]
-}
--- a/loading.html
+++ b/loading.html
@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="src/assets/favicon.png">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ZERO/ONE Starting...</title>
-  <link rel="stylesheet" href="src/assets/main.css">
-  <style>
-      body {
-          background: black url(src/assets/images/splashBG.png) center;
-          background-size: cover;
-          color: white;
-          height: 100vh;
-          overflow: hidden;
-      }
-
-      .badge {
-          background: #f79c1e;
-          color: black;
-          display: inline-block;
-          align-self: center;
-          width: fit-content;
-          border-radius: 4px;
-          padding: 4px 8px;
-      }
-
-      .title {
-          margin-top: 10vh;
-          gap: 8px;
-      }
-
-      .status {
-          margin-top: 10vh;
-      }
-
-      .footer {
-          font-size: 0.5rem;
-      }
-  </style>
-</head>
-<body>
-<div class="flex h-full flex-col text-center justify-between items-center p-2 px-8 select-none">
-  <div class="title flex flex-col gap-2">
-    <h1 class="text-5xl">ZERO<span class="opacity-70">/</span>ONE</h1>
-    <p class="text-muted-foreground">Configuration Suite v0.1</p>
-    <div class="badge text-xs">PUBLIC BETA</div>
-    <div class="status">
-      <p>Stand by...</p>
-      <p class="text-muted-foreground text-sm">The goblins are turning the cogs.</p>
-    </div>
-  </div>
-  <div class="footer flex flex-col gap-2 text-muted-foreground">
-    <img class="w-3 self-center" src="/src/assets/icons/binarisEmblem.svg" alt="binaris-logo">
-    <p>Copyright 2024 Binaris Circuitry Ltd.</p>
-    <p>This software is licensed under the Apache License, Version 2.0 (the "License"). Usage of this
-      software is
-      permitted only in compliance with the terms of the License.</p>
-  </div>
-</div>
-</body>
-</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,133 +1,68 @@
 {
  "name": "zeroone",
-  "version": "0.1.1",
-  "description": "Haptic configuration tool",
-  "private": true,
-  "main": ".vite/build/main.js",
+  "version": "1.0.0",
+  "description": "Configuration Suite for Binaris Devices",
+  "main": "./out/main/index.js",
+  "author": "katbinaris",
+  "homepage": "https://electron-vite.org",
  "scripts": {
-    "start": "electron-forge start",
-    "package": "electron-forge package",
-    "make": "electron-forge make",
-    "publish": "electron-forge publish",
-    "lint": "eslint . --ext .js, .vue",
-    "dev": "concurrently --kill-others \"json-server src/data/nanoConfig.json --port=3001\" \"electron-forge start\" "
+    "preinstall": "npx only-allow pnpm",
+    "format": "prettier --write .",
+    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue --fix",
+    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
+    "typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
+    "typecheck": "npm run typecheck:node && npm run typecheck:web",
+    "start": "electron-vite preview",
+    "dev": "electron-vite dev",
+    "build": "npm run typecheck && electron-vite build",
+    "build:unpack": "npm run build && electron-builder --dir",
+    "build:win": "npm run build && electron-builder --win",
+    "build:mac": "npm run build && electron-builder --mac",
+    "build:linux": "npm run build && electron-builder --linux"
  },
  "dependencies": {
+    "@electron-toolkit/preload": "^3.0.0",
+    "@electron-toolkit/utils": "^3.0.0",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
    "@radix-icons/vue": "^1.0.0",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@vee-validate/zod": "^4.12.4",
-    "@vueuse/core": "^10.7.1",
-    "ajv": "^6.12.6",
-    "axios": "^1.6.5",
+    "@vueuse/core": "^10.9.0",
+    "ajv": "^8.12.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "color": "^4.2.3",
-    "concurrently": "^8.2.2",
-    "electron-squirrel-startup": "^1.0.0",
+    "electron-updater": "^6.1.7",
    "gsap": "^3.12.5",
-    "lucide-vue-next": "^0.309.0",
+    "lucide-vue-next": "^0.344.0",
    "pinia": "^2.1.7",
-    "radix-vue": "^1.3.0",
+    "radix-vue": "^1.4.9",
    "serialport": "^12.0.0",
-    "tailwind-merge": "^2.2.0",
+    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
-    "vee-validate": "^4.12.4",
-    "vue": "^3.4.15",
-    "vue-i18n": "^9.9.0",
-    "vuedraggable": "^4.1.0",
-    "zod": "^3.22.4"
+    "vue-i18n": "^9.10.1",
+    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/eslint-parser": "^7.23.10",
-    "@electron-forge/cli": "^7.2.0",
-    "@electron-forge/maker-deb": "^7.2.0",
-    "@electron-forge/maker-rpm": "^7.2.0",
-    "@electron-forge/maker-squirrel": "^7.2.0",
-    "@electron-forge/maker-zip": "^7.2.0",
-    "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
-    "@electron-forge/plugin-vite": "^7.2.0",
-    "@electron/rebuild": "^3.6.0",
-    "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
-    "@types/node": "^20.11.0",
+    "@electron-toolkit/eslint-config": "^1.0.2",
+    "@electron-toolkit/eslint-config-ts": "^1.0.1",
+    "@electron-toolkit/tsconfig": "^1.0.1",
+    "@rushstack/eslint-patch": "^1.7.1",
+    "@types/node": "^18.19.21",
    "@vitejs/plugin-vue": "^5.0.3",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
    "autoprefixer": "^10.4.17",
-    "electron": "28.2.0",
+    "electron": "^28.2.0",
+    "electron-builder": "^24.9.1",
+    "electron-vite": "^2.0.0",
    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-tailwindcss": "^3.14.3",
    "eslint-plugin-vue": "^9.20.1",
-    "json-server": "^1.0.0-alpha.21",
-    "postcss": "^8.4.33",
-    "postcss-loader": "^8.0.0",
-    "prettier": "3.2.4",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.4",
    "tailwindcss": "^3.4.1",
-    "vite-plugin-eslint": "^1.8.1"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "parserOptions": {
-      "parser": "@babel/eslint-parser",
-      "ecmaVersion": 2020,
-      "requireConfigFile": false
-    },
-    "extends": [
-      "eslint:recommended",
-      "plugin:vue/vue3-recommended",
-      "plugin:@intlify/vue-i18n/recommended",
-      "prettier"
-    ],
-    "settings": {
-      "vue-i18n": {
-        "localeDir": "@/lang/*.{json,json5,yaml,yml}",
-        "messageSyntaxVersion": "^9.0.0"
-      }
-    },
-    "rules": {
-      "indent": "off",
-      "camelcase": "off",
-      "space-before-function-paren": "off",
-      "object-curly-spacing": "off",
-      "comma-dangle": "off",
-      "vue/html-self-closing": "warn",
-      "@intlify/vue-i18n/no-v-html": "off",
-      "@intlify/vue-i18n/no-dynamic-keys": "off",
-      "@intlify/vue-i18n/no-raw-text": [
-        "warn",
-        {
-          "ignorePattern": "^(([\\W\\d]+)|(http.*))|()$",
-          "ignoreNodes": [
-            "code"
-          ]
-        }
-      ],
-      "@intlify/vue-i18n/no-unused-keys": [
-        "error",
-        {
-          "extensions": [
-            ".js",
-            ".ts",
-            ".vue"
-          ]
-        }
-      ]
-    },
-    "globals": {
-      "MAIN_WINDOW_VITE_DEV_SERVER_URL": "readonly",
-      "MAIN_WINDOW_VITE_NAME": "readonly",
-      "LOADING_WINDOW_VITE_DEV_SERVER_URL": "readonly",
-      "LOADING_WINDOW_VITE_NAME": "readonly"
-    }
-  },
-  "prettier": {
-    "trailingComma": "es5",
-    "printWidth": 120,
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true
-  },
-  "web-types": "./web-types.json"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vue": "^3.4.15",
+    "vue-tsc": "^1.8.27"
+  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/resources/icon.png
+++ b/resources/icon.png
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,117 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 240 10% 3.9%;
-
-        --card: 0 0% 100%;
-        --card-foreground: 240 10% 3.9%;
-
-        --popover: 0 0% 100%;
-        --popover-foreground: 240 10% 3.9%;
-
-        --primary: 240 5.9% 10%;
-        --primary-foreground: 0 0% 98%;
-
-        --secondary: 240 4.8% 95.9%;
-        --secondary-foreground: 240 5.9% 10%;
-
-        --muted: 240 4.8% 95.9%;
-        --muted-foreground: 240 3.8% 46.1%;
-
-        --accent: 240 4.8% 95.9%;
-        --accent-foreground: 240 5.9% 10%;
-
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 0 0% 98%;
-
-        --border: 240 5.9% 90%;
-        --input: 240 5.9% 90%;
-        --ring: 240 10% 3.9%;
-
-        --radius: 0.5rem;
-    }
-
-    .dark {
-        --background: 240 10% 3.9%;
-        --foreground: 0 0% 98%;
-
-        --card: 240 10% 3.9%;
-        --card-foreground: 0 0% 98%;
-
-        --popover: 240 10% 3.9%;
-        --popover-foreground: 0 0% 98%;
-
-        --primary: 0 0% 98%;
-        --primary-foreground: 240 5.9% 10%;
-
-        --secondary: 240 3.7% 15.9%;
-        --secondary-foreground: 0 0% 98%;
-
-        --muted: 240 3.7% 15.9%;
-        --muted-foreground: 240 5% 64.9%;
-
-        --accent: 240 3.7% 15.9%;
-        --accent-foreground: 0 0% 98%;
-
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 0 0% 98%;
-
-        --border: 240 3.7% 15.9%;
-        --input: 240 3.7% 15.9%;
-        --ring: 240 4.9% 83.9%;
-    }
-}
-
-@layer base {
-    * {
-        @apply border-border;
-    }
-
-    body {
-        @apply bg-background text-foreground;
-    }
-
-    @font-face {
-        font-family: 'ProtoMono';
-        src: url(fonts/ProtoMono-Regular.ttf), local('monospace');
-    }
-    @font-face {
-        font-family: 'RenoMono';
-        src: url(fonts/RenoMono.otf), local('monospace');
-    }
-
-    @font-face {
-        font-family: 'JetBrainsMono';
-        src: url(fonts/JetBrainsMono[wght].ttf), local('monospace');
-    }
-
-    @font-face {
-        font-family: 'PixelLg';
-        src: url(fonts/SG12.ttf), local('monospace');
-    }
-
-    @font-face {
-        font-family: 'PixelSm';
-        src: url(fonts/andina.ttf), local('monospace');
-    }
-
-    .font-pixellg {
-        font-family: 'PixelLg', monospace, sans-serif;
-    }
-
-    .font-pixelsm {
-        font-family: 'PixelSm', monospace, sans-serif;
-    }
-
-    .font-size-gui-extra {
-        font-size: 48px;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        @apply font-heading;
-    }
-}
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -1,79 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
- 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
- 
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
- 
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
- 
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
- 
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
- 
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 240 10% 3.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
- 
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
- 
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
- 
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
- 
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
- 
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
- 
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
- 
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 240 4.9% 83.9%;
-  }
-  
-}
- 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,34 +0,0 @@
-@import './base.css';
-
-@layer base {
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-    }
-}
-
-body {
-    overflow: hidden;
-    --scrollbar-foreground: rgb(39 39 42);
-    --scrollbar-background: black;
-    scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
-}
-
-::-webkit-scrollbar {
-    width: 0.5em;
-    height: 0.5em;
-}
-
-::-webkit-scrollbar-thumb { /* Foreground */
-    background: var(--scrollbar-foreground);
-}
-
-::-webkit-scrollbar-track { /* Background */
-    background: var(--scrollbar-background);
-}
-
-::selection {
-    background: #c66936;
-    color: black;
-    text-shadow: none;
-}
--- a/src/backend/nanodevices.js
+++ b/src/backend/nanodevices.js
@@ -1,154 +0,0 @@
-import { SerialPort } from 'serialport';
-import { EventEmitter } from 'events';
-
-// JTAG interface, TODO: change me!
-const NANO_PRODUCT_ID = '1001';
-const NANO_VENDOR_ID = '303a';
-const NANO_BAUD_RATE = 115200;
-
-
-class NanoDevices extends EventEmitter {
-    constructor() {
-        super();
-        this.all_nano_devices = {};
-        this.connected_nano_devices = {};
-    }
-
-    _list() {
-        let p = new Promise((resolve, reject) => {
-            SerialPort.list().then((ports, err) => {
-                if (err) {
-                    reject(err); // TODO format for errors?
-                }
-                else {
-                    let found_nano_devices = []
-                    for (let port of ports) {
-                        if (port.productId === NANO_PRODUCT_ID && port.vendorId === NANO_VENDOR_ID) {
-                            found_nano_devices.push(port.serialNumber);
-                            if (this.all_nano_devices[port.serialNumber] === undefined) {
-                                this.all_nano_devices[port.serialNumber] = port;
-                                this.emit('nanodevices:device-attached', port.serialNumber);
-                                //console.log('attached', port.serialNumber);
-                            }
-                        }
-                    }
-                    resolve(found_nano_devices);
-                    for (let serialNumber in this.all_nano_devices) {
-                        if (found_nano_devices.indexOf(serialNumber) === -1) {
-                            delete this.all_nano_devices[serialNumber];
-                            this.emit('nanodevices:device-detached', serialNumber);
-                            //console.log('detached', serialNumber);
-                        }
-                    }
-                }
-            });
-        });
-        return p;
-    };
-
-
-    _handle_data(connected_port, data) {
-        connected_port.data += data;
-        let lines = connected_port.data.split('\n');
-        if (lines.length > 1) {
-            for (let i = 0; i < lines.length - 1; i++) {
-                if (lines[i].length > 0) {
-                    if (lines[i].startsWith('{')) // if its a json object
-                        this.emit('nanodevices:update', connected_port.serialNumber, lines[i]);
-                    else
-                        console.log("Device: "+lines[i]); // otherwise just log it
-                }
-            }
-            connected_port.data = lines[lines.length - 1];
-        }
-    };
-
-
-    list_devices() {
-        let result = [];
-        for (const [key, value] of Object.entries(this.all_nano_devices)) {
-            if (value.serialNumber)
-                result.push(key);
-        }
-        //console.log('list_devices', result);
-        return result;
-    };
-
-
-    async send(deviceid, jsonstr) {
-        let connected_port = this.connected_nano_devices[deviceid];
-        if (connected_port === undefined) {
-            return Promise.reject('Device not connected');
-        }
-        else {
-            connected_port.port.write(jsonstr+'\n');
-            return Promise.resolve();
-        }
-    };
-
-
-    async connect(deviceid) {
-        const nanodevices = this;
-        let p = new Promise((resolve, reject) => {
-            let nano_device = nanodevices.all_nano_devices[deviceid];
-            if (nano_device === undefined) {
-                reject('Device not attached');
-            }
-            else {
-                let port = new SerialPort({ path: nano_device.path, baudRate: NANO_BAUD_RATE, autoOpen: false });
-                port.on('error', (err) => {
-                    // forward error to FE
-                    nanodevices.emit('nanodevices:error', nano_device.serialNumber, err);
-                });
-                port.on('close', (err) => {
-                    if (err && err.disconnected) {
-                        // forward close to FE
-                        nanodevices.emit('nanodevices:disconnected', nano_device.serialNumber);
-                    }
-                    delete nanodevices.connected_nano_devices[nano_device.serialNumber];
-                });
-                port.on('open', () => {
-                    resolve(nano_device.serialNumber);
-                    nanodevices.connected_nano_devices[nano_device.serialNumber] = { port: port, data: '' };
-                    nanodevices.emit('nanodevices:connected', nano_device.serialNumber);
-                });
-                port.on('data', (data) => {
-                    let connected_port = nanodevices.connected_nano_devices[nano_device.serialNumber];
-                    nanodevices._handle_data(connected_port, data);
-                });
-                port.open((err)=>{
-                    if (err) {
-                        reject(err);
-                    }
-                });
-            }
-        });
-        return p;
-    };
-
-
-    disconnect(deviceid) {
-        const nanodevices = this;
-        let p = new Promise((resolve, reject) => {
-            let nano_device = nanodevices.all_nano_devices[deviceid];
-            if (nano_device === undefined) {
-                reject('Device not attached');
-            }
-            else {
-                if (nanodevices.connected_nano_devices[nano_device.serialNumber] === undefined) {
-                    reject('Device not connected');
-                }
-                else {
-                    nano_device.close();
-                    resolve(nano_device.serialNumber);
-                }
-            }
-        });
-        return p;
-    };
-
-};
-
-const nanodevices = new NanoDevices();
-
-export default nanodevices;
--- a/src/background.js
+++ b/src/background.js
@@ -1,81 +0,0 @@
-'use strict'
-
-import { app, protocol, BrowserWindow } from 'electron'
-import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
-import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
-const isDevelopment = process.env.NODE_ENV !== 'production'
-
-// Scheme must be registered before the app is ready
-protocol.registerSchemesAsPrivileged([
-  { scheme: 'app', privileges: { secure: true, standard: true } }
-])
-
-async function createWindow() {
-  // Create the browser window.
-  const win = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      
-      // Use pluginOptions.nodeIntegration, leave this alone
-      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
-      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
-    }
-  })
-
-  if (process.env.WEBPACK_DEV_SERVER_URL) {
-    // Load the url of the dev server if in development mode
-    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
-    if (!process.env.IS_TEST) win.webContents.openDevTools()
-  } else {
-    createProtocol('app')
-    // Load the index.html when not in development
-    win.loadURL('app://./index.html')
-  }
-}
-
-// Quit when all windows are closed.
-app.on('window-all-closed', () => {
-  // On macOS it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
-
-app.on('activate', () => {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (BrowserWindow.getAllWindows().length === 0) createWindow()
-})
-
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
-app.on('ready', async () => {
-  if (isDevelopment && !process.env.IS_TEST) {
-    // Install Vue Devtools
-    try {
-      await installExtension(VUEJS3_DEVTOOLS)
-    } catch (e) {
-      console.error('Vue Devtools failed to install:', e.toString())
-    }
-  }
-  createWindow()
-})
-
-// Exit cleanly on request from parent process in development mode.
-if (isDevelopment) {
-  if (process.platform === 'win32') {
-    process.on('message', (data) => {
-      if (data === 'graceful-exit') {
-        app.quit()
-      }
-    })
-  } else {
-    process.on('SIGTERM', () => {
-      app.quit()
-    })
-  }
-}
--- a/src/components/common/ConfigSection.vue
+++ b/src/components/common/ConfigSection.vue
@@ -1,60 +0,0 @@
-<template>
-  <Collapsible v-model:open="collapse" :default-open="true">
-    <div class="w-full bg-zinc-900 h-12 flex">
-      <div
-        class="flex-1 flex items-center px-4"
-        :class="{'cursor-pointer hover:bg-zinc-800': showToggle}"
-        @click="toggle = !toggle">
-        <component :is="iconComponent" v-if="iconComponent" class="h-4 w-4 mr-2" />
-        <h2 class="text-sm py-4">{{ title }}<slot name="title"/></h2>
-        <Switch
-          v-if="showToggle" :checked="toggle"
-          class="ml-auto" @click.stop="toggle=!toggle" />
-      </div>
-      <CollapsibleTrigger v-if="foldable" class="flex items-center justify-center h-12 aspect-square hover:bg-zinc-800">
-        <ChevronLeft class="chevrot h-4 w-4 mt-0.5 transition-transform text-muted-foreground" />
-      </CollapsibleTrigger>
-    </div>
-    <CollapsibleContent>
-      <slot />
-    </CollapsibleContent>
-  </Collapsible>
-</template>
-<script setup>
-import { ChevronLeft } from 'lucide-vue-next'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
-import { ref } from 'vue'
-import { Switch } from '@/components/ui/switch'
-
-const collapse = ref(true)
-
-const toggle = defineModel({
-  type: Boolean,
-  default: true,
-})
-
-defineProps({
-  title: {
-    type: String,
-    default: 'MISSING_TITLE',
-  },
-  iconComponent: {
-    type: [String, Object, Function],
-    default: undefined,
-  },
-  showToggle: {
-    type: Boolean,
-    default: false,
-  },
-  foldable: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-</script>
-<style scoped>
-[data-state=open] > .chevrot {
-  transform: rotate(-90deg);
-}
-</style>
--- a/src/components/common/SteppedSlider.vue
+++ b/src/components/common/SteppedSlider.vue
@@ -1,110 +0,0 @@
-<template>
-  <div class="flex flex-col px-8 my-4">
-    <span class="text-sm text-muted-foreground font-mono">{{ label }}</span>
-    <Slider
-      ref="steppedSlider" v-model="sliderModelValue" :max="max" :step="1"
-      class="pt-4" />
-    <div class="flex justify-between py-2">
-      <button
-        v-for="(position, index) in positions" :key="position"
-        class="min-w-0 text-nowrap group"
-        :class="{
-          'slider-start mr-4': index===0,
-          'slider-center': index > 0 && index < positions.length-1,
-          'slider-end ml-4': index === positions.length-1}"
-        @click="value = position.value">
-        <span
-          v-if="index===0" class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
-          :class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
-        <span
-          v-if="position.label" class="text-xs font-mono uppercase mx-1 transition-colors"
-          :class="value===position.value ? 'text-zinc-100' : 'text-zinc-600 group-hover:text-zinc-500'">{{ position.label }}</span>
-        <span
-          v-if="!position.label || index === positions.length-1"
-          class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
-          :class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
-      </button>
-    </div>
-  </div>
-</template>
-<script setup>
-import { Slider } from '@/components/ui/slider'
-import { computed } from 'vue'
-
-const value = defineModel({
-  type: Number,
-  default: 0,
-})
-
-const sliderModelValue = computed({
-  get: () => [value.value],
-  set: (val) => {
-    value.value = val[0]
-  },
-})
-
-const props = defineProps({
-  label: {
-    type: String,
-    default: null,
-  },
-  max: {
-    type: Number,
-    default: 4,
-  },
-  namedPositions: {
-    type: Array,
-    default: () => [
-      {
-        label: 'Min',
-        value: 0,
-      },
-      {
-        value: 2,
-      },
-      {
-        label: 'Max',
-        value: 4,
-      },
-    ],
-  },
-  autoMarkers: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-const positions = computed(() => {
-  if (props.autoMarkers) {
-    const filled = []
-    for (let i = 0; i <= props.max; i++) {
-      const position = props.namedPositions.find((p) => p.value === i) || { value: i }
-      filled.push(position)
-    }
-    return filled
-  }
-  return props.namedPositions
-})
-</script>
-<style scoped>
-.slider-start {
-  text-align: left;
-}
-
-.slider-center {
-  text-align: center;
-}
-
-.slider-end {
-  text-align: right;
-}
-
-.slider-start,
-.slider-end {
-  flex: 0.5;
-}
-
-.slider-center {
-  flex: 1;
-}
-</style>
--- a/src/components/common/TabSelectButton.vue
+++ b/src/components/common/TabSelectButton.vue
@@ -1,38 +0,0 @@
-<template>
-  <button
-    class="flex-1 flex flex-col items-center rounded-lg p-2 gap-2 font-heading transition-all border"
-    :class="{'text-black bg-zinc-300 hover:bg-zinc-200 border-zinc-100': selected,
-          'hover:bg-zinc-800 text-muted-foreground border-transparent' : !selected}"
-    @click="$emit('select'); $refs.title?.scramble()">
-    <slot v-if="$slots['replace']" name="replace" />
-    <template v-else>
-      <img
-        v-if="icon"
-        draggable="false"
-        :src="icon" :alt="title"
-        class="h-16"
-        :class="{'invert': selected}">
-      <ScrambleText ref="title" :resize="false" class="text-xs text-wrap line-clamp-2 text-ellipsis overflow-hidden" :text="title" />
-    </template>
-  </button>
-</template>
-<script setup>
-import ScrambleText from '@/components/common/ScrambleText.vue'
-
-defineEmits(['select'])
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: [String, Object, Function],
-    default: null,
-  },
-  selected: {
-    type: Boolean,
-    default: false,
-  },
-})
-</script>
--- a/src/components/device/DeviceBar.vue
+++ b/src/components/device/DeviceBar.vue
@@ -1,82 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue'
-
-const model = defineModel({ type: Number, default: 60 })
-
-const bar = ref(null)
-
-const props = defineProps({
-  width: { type: Number, default: 160 },
-  count: { type: Number, default: 40 },
-  gapWidth: { type: Number, default: 2 },
-})
-
-const rectWidth = computed(() => {
-  return (props.width - ((props.count + 1) * props.gapWidth)) / props.count
-})
-const currentPosition = computed(() => {
-  return Math.round((model.value / 100) * (props.count - 1))
-})
-
-function onMouseDown() {
-  window.addEventListener('mousemove', onMouseMove)
-  window.addEventListener('mouseup', onMouseUp)
-}
-
-function onMouseMove(e) {
-  const rect = bar.value.getBoundingClientRect()
-  model.value = Math.max(0, Math.min(Math.round((e.clientX - rect.left - 9) / (props.width - 6) * 100), 100))
-}
-
-function onMouseUp() {
-  window.removeEventListener('mousemove', onMouseMove)
-  window.removeEventListener('mouseup', onMouseUp)
-}
-</script>
-
-<template>
-    <span @mousedown="onMouseDown">
-      <svg ref="bar" :width="width+12" height="32">
-        <g>
-          <rect
-            v-for="(_, i) in count"
-            :key="`key${i}`"
-            :style="`fill:${i < currentPosition ? '#fff' : '#4a4a4a'}`"
-            :width="rectWidth"
-            :height="i===0 || i===count-1 ? 8 : 5"
-            :x="6+gapWidth+i*(rectWidth+gapWidth)"
-            y="10" />
-          <g :transform="`translate(${6+(rectWidth+gapWidth)*currentPosition},0)`">
-            <rect
-              style="fill:#000"
-              :width="6"
-              height="13"
-              x="0"
-              y="10"
-            />
-            <rect
-              style="fill:#c66936"
-              :width="2"
-              height="11"
-              :x="2"
-              y="10"
-            />
-            <rect
-              style="fill:#c66936"
-              :width="2"
-              :height="2"
-              x="0"
-              y="21"
-            />
-            <rect
-              style="fill:#c66936"
-              :width="2"
-              :height="2"
-              :x="4"
-              y="21"
-            />
-          </g>
-        </g>
-      </svg>
-    </span>
-</template>
--- a/src/components/navbar/MenubarButton.vue
+++ b/src/components/navbar/MenubarButton.vue
@@ -1,7 +0,0 @@
-<template>
-  <button
-    class="app-titlebar-button text-muted-foreground flex items-center rounded-sm px-3 py-1 text-sm font-medium hover:bg-accent hover:text-accent-foreground"
-  >
-    <slot />
-  </button>
-</template>
--- a/src/components/old/DevPlayground.vue
+++ b/src/components/old/DevPlayground.vue
@@ -1,8 +0,0 @@
-<template>
-  <WIP />
-  <DeviceLEDRing />
-</template>
-<script setup>
-import WIP from '@/components/WIP.vue'
-import DeviceLEDRing from '@/components/device/DeviceLEDRing.vue'
-</script>
--- a/src/components/profile/ProfileButton.vue
+++ b/src/components/profile/ProfileButton.vue
@@ -1,166 +0,0 @@
-<template>
-  <div
-    class="h-12 flex overflow-hidden rounded-lg m-2 transition-all"
-    :class="{'border border-zinc-100 bg-zinc-300': selected,
-    'border border-transparent hover:border-zinc-900': !selected,
-    'group': showHoverButtons}">
-    <form
-      v-if="nameEditable && editing"
-      class="flex-1 flex h-full text-left whitespace-nowrap overflow-hidden"
-      :class="{'bg-zinc-300' : selected}"
-      @submit.prevent="store.renameProfile(profile.id, nameInput); editing=false">
-      <input
-        ref="profileNameInput" v-model="nameInput"
-        onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
-        class="flex-1 pl-8 h-full rounded-lg text-sm bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0 transition-all"
-        :class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
-        'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
-        @blur="onNameInputBlur">
-      <button
-        ref="nameSubmitButton"
-        type="submit"
-        :class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
-                'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected}"
-        class="flex h-full rounded-lg aspect-square justify-center items-center flex-shrink-0 transition-all">
-        <Check class="h-4 w-4" />
-      </button>
-    </form>
-    <!-- TODO: Make hover buttons use Transition(Group) and v-if directive -->
-    <button
-      v-else
-      :class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
-      'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
-      class="flex-1 h-12 rounded-lg text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-all"
-      @click="!editing && $emit('select') && $refs.profileTitle.scramble()">
-      <span class="ml-2 w-4 mr-2 cursor-grab" :class="{'ml-2': !draggable}">
-        <GripHorizontal
-          v-if="draggable"
-          :class="{'text-zinc-600': selected,
-          'text-muted-foreground': !selected}"
-          class="mb-0.5 h-4 w-4 opacity-0 group-hover:opacity-100 inline-block transition-all" />
-      </span>
-      <ScrambleText
-        ref="profileTitle"
-        class="transition-colors"
-        :class="{'text-black': selected, 'text-muted-foreground': !selected}"
-        :text="profile.name" />
-      <span
-        v-if="showId"
-        class="text-xs text-zinc-600 group-hover:hidden"> UID:{{ profile.id }}</span>
-    </button>
-    <template v-if="!confirmDelete">
-      <button
-        v-if="nameEditable"
-        :class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
-                'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
-                'group-hover:w-12' : !editing}"
-        class="flex w-0 h-12 rounded-lg justify-center items-center flex-shrink-0 transition-all"
-        @click="startEditing">
-        <PenLine class="h-4 w-4" />
-      </button>
-      <button
-        :class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
-                'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
-                'group-hover:w-12' : !editing,
-                'rounded-l-lg': !nameEditable}"
-        class="flex w-0 h-12 rounded-lg justify-center items-center flex-shrink-0 transition-all"
-        @click="$emit('duplicate')">
-        <Copy class="h-4 w-4" />
-      </button>
-      <button
-        :class="{'bg-orange-700 hover:bg-orange-600 text-black' : selected,
-                'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected,
-                'group-hover:w-12' : !editing}"
-        class="flex w-0 h-12 rounded-lg justify-center items-center flex-shrink-0 transition-all"
-        @click="confirmDelete=true">
-        <Trash2 class="h-4 w-4" />
-      </button>
-    </template>
-    <template v-else>
-      <button
-        :class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected,
-                'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected,
-                'group-hover:w-12' : !editing}"
-        class="flex w-0 h-12 rounded-lg justify-center items-center flex-shrink-0 transition-all"
-        @click="$emit('delete', profile.id)">
-        <Check class="h-4 w-4" />
-      </button>
-      <button
-        :class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
-                'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
-                'group-hover:w-12' : !editing}"
-        class="flex w-0 h-12 rounded-lg justify-center items-center flex-shrink-0 transition-all"
-        @click="confirmDelete=false">
-        <X class="h-4 w-4" />
-      </button>
-    </template>
-  </div>
-</template>
-<script setup>
-import { Check, Copy, PenLine, Trash2, X, GripHorizontal } from 'lucide-vue-next'
-import ScrambleText from '@/components/common/ScrambleText.vue'
-import { nextTick, ref } from 'vue'
-import { useStore } from '@/store'
-
-const store = useStore()
-
-defineEmits(['select', 'duplicate', 'delete'])
-
-const nameSubmitButton = ref(null)
-
-const props = defineProps({
-  profile: {
-    type: Object,
-    default: () => ({
-      id: '1234',
-      name: 'Profile Name',
-    }),
-    required: true,
-  },
-  selected: {
-    type: Boolean,
-    default: false,
-  },
-  showId: {
-    type: Boolean,
-    default: false,
-  },
-  nameEditable: {
-    type: Boolean,
-    default: true,
-  },
-  initEditing: {
-    type: Boolean,
-    default: false,
-  },
-  draggable: {
-    // Not implemented yet
-    type: Boolean,
-    default: true,
-  },
-  showHoverButtons: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-async function startEditing() {
-  editing.value = true
-  await nextTick()
-  profileNameInput.value.focus()
-}
-
-function onNameInputBlur(e) {
-  if (e.relatedTarget === nameSubmitButton.value) return
-  editing.value = false
-}
-
-const profileNameInput = ref(null)
-
-const nameInput = ref(props.profile.name)
-
-const editing = ref(props.initEditing)
-
-const confirmDelete = ref(false)
-
-</script>
--- a/src/components/profile/ProfileConfig.vue
+++ b/src/components/profile/ProfileConfig.vue
@@ -1,60 +0,0 @@
-<template>
-  <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
-    <div class="px-8 my-4">
-      <span class="text-sm text-muted-foreground font-mono">Title</span>
-      <Input class="font-pixelsm mt-2 uppercase" default-value="Title text" />
-    </div>
-    <div class="px-8 my-4">
-      <span class="text-sm text-muted-foreground font-mono">Description</span>
-      <Textarea class="font-pixelsm mt-2 uppercase" default-value="Descriptive description describing the profile" />
-    </div>
-  </ConfigSection>
-  <ConfigSection
-    v-if="false" :title="$t('config_options.profile_settings.connection_type.title')"
-    :icon-component="Cable">
-    <!-- TODO: Remove later if not needed -->
-    <TabSelect v-model="connectionType" :options="connectionTypeOptions" />
-  </ConfigSection>
-
-  <ConfigSection
-    :title="$t('config_options.profile_settings.internal_profile_toggle.title')"
-    :icon-component="Replace" :show-toggle="true">
-    <p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
-      {{ $t('config_options.profile_settings.internal_profile_toggle.subtitle') }}
-      <Separator class="mt-4" />
-      <span class="py-4 space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
-        }}:<br>
-          <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
-          class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
-      <Separator />
-      <span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
-    </p>
-  </ConfigSection>
-</template>
-<script setup>
-import { Cable, Replace, Type } from 'lucide-vue-next'
-import ConfigSection from '@/components/common/ConfigSection.vue'
-import { Separator } from '@/components/ui/separator'
-import { ref } from 'vue'
-import UsbIcon from '@/assets/logos/logoUsb.svg'
-import MidiIcon from '@/assets/logos/logoMidi.svg'
-import { Badge } from '@/components/ui/badge'
-import WIP from '@/components/WIP.vue'
-import TabSelect from '@/components/common/TabSelect.vue'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-
-const connectionType = ref('usb') // TODO: replace with actual value
-
-const connectionTypeOptions = {
-  usb: {
-    icon: UsbIcon,
-    titleKey: 'config_options.profile_settings.connection_type.usb',
-  },
-  midi: {
-    icon: MidiIcon,
-    titleKey: 'config_options.profile_settings.connection_type.midi',
-  },
-}
-
-</script>
--- a/src/components/ui/accordion/Accordion.vue
+++ b/src/components/ui/accordion/Accordion.vue
@@ -1,22 +0,0 @@
-<script setup>
-import { AccordionRoot, useEmitAsProps } from "radix-vue";
-
-const props = defineProps({
-  type: { type: String, required: true },
-  modelValue: { type: [String, Array], required: false },
-  defaultValue: { type: [String, Array], required: false },
-  collapsible: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  dir: { type: String, required: false },
-  orientation: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-const emits = defineEmits(["update:modelValue"]);
-</script>
-
-<template>
-  <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
-    <slot />
-  </AccordionRoot>
-</template>
--- a/src/components/ui/accordion/AccordionContent.vue
+++ b/src/components/ui/accordion/AccordionContent.vue
@@ -1,26 +0,0 @@
-<script setup>
-import { AccordionContent } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-});
-</script>
-
-<template>
-  <AccordionContent
-    v-bind="props"
-    :class="
-      cn(
-        'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
-        props.class
-      )
-    "
-  >
-    <div class="pb-4 pt-0">
-      <slot />
-    </div>
-  </AccordionContent>
-</template>
--- a/src/components/ui/accordion/AccordionItem.vue
+++ b/src/components/ui/accordion/AccordionItem.vue
@@ -1,18 +0,0 @@
-<script setup>
-import { AccordionItem } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  disabled: { type: Boolean, required: false },
-  value: { type: String, required: true },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-});
-</script>
-
-<template>
-  <AccordionItem v-bind="props" :class="cn('border-b', props.class ?? '')">
-    <slot />
-  </AccordionItem>
-</template>
--- a/src/components/ui/accordion/AccordionTrigger.vue
+++ b/src/components/ui/accordion/AccordionTrigger.vue
@@ -1,30 +0,0 @@
-<script setup>
-import { AccordionHeader, AccordionTrigger } from "radix-vue";
-import { ChevronDownIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-});
-</script>
-
-<template>
-  <AccordionHeader class="flex" as="div">
-    <AccordionTrigger
-      v-bind="props"
-      :class="
-        cn(
-          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-          props.class
-        )
-      "
-    >
-      <slot />
-      <ChevronDownIcon
-        class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
-      />
-    </AccordionTrigger>
-  </AccordionHeader>
-</template>
--- a/src/components/ui/accordion/index.js
+++ b/src/components/ui/accordion/index.js
@@ -1,4 +0,0 @@
-export { default as Accordion } from "./Accordion.vue";
-export { default as AccordionContent } from "./AccordionContent.vue";
-export { default as AccordionItem } from "./AccordionItem.vue";
-export { default as AccordionTrigger } from "./AccordionTrigger.vue";
--- a/src/components/ui/alert-dialog/AlertDialog.vue
+++ b/src/components/ui/alert-dialog/AlertDialog.vue
@@ -1,17 +0,0 @@
-<script setup>
-import { AlertDialogRoot, useForwardPropsEmits } from "radix-vue";
-
-const props = defineProps({
-  open: { type: Boolean, required: false },
-  defaultOpen: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <AlertDialogRoot v-bind="forwarded">
-    <slot />
-  </AlertDialogRoot>
-</template>
--- a/src/components/ui/alert-dialog/AlertDialogAction.vue
+++ b/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -1,19 +0,0 @@
-<script setup>
-import { AlertDialogAction } from "radix-vue";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-</script>
-
-<template>
-  <AlertDialogAction
-    v-bind="props"
-    :class="cn(buttonVariants(), $attrs.class ?? '')"
-  >
-    <slot />
-  </AlertDialogAction>
-</template>
--- a/src/components/ui/alert-dialog/AlertDialogCancel.vue
+++ b/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,25 +0,0 @@
-<script setup>
-import { AlertDialogCancel } from "radix-vue";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-</script>
-
-<template>
-  <AlertDialogCancel
-    v-bind="props"
-    :class="
-      cn(
-        buttonVariants({ variant: 'outline' }),
-        'mt-2 sm:mt-0',
-        $attrs.class ?? ''
-      )
-    "
-  >
-    <slot />
-  </AlertDialogCancel>
-</template>
--- a/src/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/src/components/ui/alert-dialog/AlertDialogContent.vue
@@ -1,49 +0,0 @@
-<script setup>
-import {
-  AlertDialogContent,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  useEmitAsProps,
-} from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  forceMount: { type: Boolean, required: false },
-  trapFocus: { type: Boolean, required: false },
-  disableOutsidePointerEvents: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-});
-
-const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "dismiss",
-  "openAutoFocus",
-  "closeAutoFocus",
-]);
-
-const emitsAsProps = useEmitAsProps(emits);
-</script>
-
-<template>
-  <AlertDialogPortal>
-    <AlertDialogOverlay
-      class="fixed inset-0 z-50 bg-background/80 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"
-    />
-    <AlertDialogContent
-      v-bind="{ ...props, ...emitsAsProps }"
-      :class="
-        cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
-          props.class
-        )
-      "
-    >
-      <slot />
-    </AlertDialogContent>
-  </AlertDialogPortal>
-</template>
--- a/src/components/ui/alert-dialog/AlertDialogDescription.vue
+++ b/src/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -1,19 +0,0 @@
-<script setup>
-import { AlertDialogDescription } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-});
-</script>
-
-<template>
-  <AlertDialogDescription
-    :class="cn('text-muted-foreground text-sm', props.class)"
-    :as-child="props.asChild"
-  >
-    <slot />
-  </AlertDialogDescription>
-</template>
--- a/src/components/ui/alert-dialog/AlertDialogFooter.vue
+++ b/src/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -1,23 +0,0 @@
-<script setup>
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  class: {
-    type: String,
-    default: "",
-  },
-});
-</script>
-
-<template>
-  <div
-    :class="
-      cn(
-        'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',
-        props.class
-      )
-    "
-  >
-    <slot />
-  </div>
-</template>
--- a/src/components/ui/alert-dialog/AlertDialogHeader.vue
+++ b/src/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -1,18 +0,0 @@
-<script setup>
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  class: {
-    type: String,
-    default: "",
-  },
-});
-</script>
-
-<template>
-  <div
-    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
-  >
-    <slot />
-  </div>
-</template>
--- a/src/components/ui/alert-dialog/AlertDialogTitle.vue
+++ b/src/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,19 +0,0 @@
-<script setup>
-import { AlertDialogTitle } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-});
-</script>
-
-<template>
-  <AlertDialogTitle
-    :as-child="props.asChild"
-    :class="cn('text-lg text-foreground font-semibold', props.class)"
-  >
-    <slot />
-  </AlertDialogTitle>
-</template>
--- a/src/components/ui/alert-dialog/AlertDialogTrigger.vue
+++ b/src/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -1,14 +0,0 @@
-<script setup>
-import { AlertDialogTrigger } from "radix-vue";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-</script>
-
-<template>
-  <AlertDialogTrigger v-bind="props">
-    <slot />
-  </AlertDialogTrigger>
-</template>
--- a/src/components/ui/alert-dialog/index.js
+++ b/src/components/ui/alert-dialog/index.js
@@ -1,9 +0,0 @@
-export { default as AlertDialog } from "./AlertDialog.vue";
-export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue";
-export { default as AlertDialogContent } from "./AlertDialogContent.vue";
-export { default as AlertDialogHeader } from "./AlertDialogHeader.vue";
-export { default as AlertDialogTitle } from "./AlertDialogTitle.vue";
-export { default as AlertDialogDescription } from "./AlertDialogDescription.vue";
-export { default as AlertDialogFooter } from "./AlertDialogFooter.vue";
-export { default as AlertDialogAction } from "./AlertDialogAction.vue";
-export { default as AlertDialogCancel } from "./AlertDialogCancel.vue";
--- a/src/components/ui/alert/Alert.vue
+++ b/src/components/ui/alert/Alert.vue
@@ -1,15 +0,0 @@
-<script setup>
-import { alertVariants } from ".";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  variant: { type: null, required: false },
-  class: { type: String, required: false },
-});
-</script>
-
-<template>
-  <div :class="cn(alertVariants({ variant }), props.class ?? '')">
-    <slot />
-  </div>
-</template>
--- a/src/components/ui/alert/AlertDescription.vue
+++ b/src/components/ui/alert/AlertDescription.vue
@@ -1,13 +0,0 @@
-<script setup>
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  class: String,
-});
-</script>
-
-<template>
-  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
-    <slot />
-  </div>
-</template>
--- a/src/components/ui/alert/AlertTitle.vue
+++ b/src/components/ui/alert/AlertTitle.vue
@@ -1,13 +0,0 @@
-<script setup>
-import { cn } from "@/lib/utils";
-</script>
-
-<template>
-  <h5
-    :class="
-      cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')
-    "
-  >
-    <slot />
-  </h5>
-</template>
--- a/src/components/ui/alert/index.js
+++ b/src/components/ui/alert/index.js
@@ -1,21 +0,0 @@
-import { cva } from "class-variance-authority";
-
-export { default as Alert } from "./Alert.vue";
-export { default as AlertTitle } from "./AlertTitle.vue";
-export { default as AlertDescription } from "./AlertDescription.vue";
-
-export const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
--- a/src/components/ui/badge/Badge.vue
+++ b/src/components/ui/badge/Badge.vue
@@ -1,14 +0,0 @@
-<script setup>
-import { badgeVariants } from ".";
-import { cn } from "@/lib/utils";
-
-defineProps({
-  variant: { type: null, required: false },
-});
-</script>
-
-<template>
-  <div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
-    <slot />
-  </div>
-</template>
--- a/src/components/ui/badge/index.js
+++ b/src/components/ui/badge/index.js
@@ -1,23 +0,0 @@
-import { cva } from "class-variance-authority";
-
-export { default as Badge } from "./Badge.vue";
-
-export const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
--- a/src/components/ui/button/Button.vue
+++ b/src/components/ui/button/Button.vue
@@ -1,22 +0,0 @@
-<script setup>
-import { Primitive } from "radix-vue";
-import { buttonVariants } from ".";
-import { cn } from "@/lib/utils";
-
-defineProps({
-  variant: { type: null, required: false },
-  size: { type: null, required: false },
-  as: { type: String, required: false, default: "button" },
-  asChild: { type: Boolean, required: false },
-});
-</script>
-
-<template>
-  <Primitive
-    :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
-  >
-    <slot />
-  </Primitive>
-</template>
--- a/src/components/ui/button/index.js
+++ b/src/components/ui/button/index.js
@@ -1,33 +0,0 @@
-import { cva } from "class-variance-authority";
-
-export { default as Button } from "./Button.vue";
-
-export const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
--- a/src/components/ui/card/Card.vue
+++ b/src/components/ui/card/Card.vue
@@ -1,20 +0,0 @@
-<script setup>
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  class: {
-    type: String,
-    default: "",
-  },
-});
-</script>
-
-<template>
-  <div
-    :class="
-      cn('rounded-lg border bg-card text-card-foreground shadow', props.class)
-    "
-  >
-    <slot />
-  </div>
-</template>
--- a/src/components/ui/card/CardContent.vue
+++ b/src/components/ui/card/CardContent.vue
@@ -1,16 +0,0 @@
-<script setup>
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  class: {
-    type: String,
-    default: "",
-  },
-});
-</script>
-
-<template>
-  <div :class="cn('p-6 pt-0', props.class)">
-    <slot />
-  </div>
-</template>
--- a/src/components/ui/card/CardDescription.vue
+++ b/src/components/ui/card/CardDescription.vue
@@ -1,16 +0,0 @@
-<script setup>
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  class: {
-    type: String,
-    default: "",
-  },
-});
-</script>
-
-<template>
-  <p :class="cn('text-sm text-muted-foreground', props.class)">
-    <slot />
-  </p>
-</template>
--- a/src/components/ui/card/CardFooter.vue
+++ b/src/components/ui/card/CardFooter.vue
@@ -1,16 +0,0 @@
-<script setup>
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  class: {
-    type: String,
-    default: "",
-  },
-});
-</script>
-
-<template>
-  <div :class="cn('flex items-center p-6 pt-0', props.class)">
-    <slot />
-  </div>
-</template>
--- a/src/components/ui/card/CardHeader.vue
+++ b/src/components/ui/card/CardHeader.vue
@@ -1,16 +0,0 @@
-<script setup>
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  class: {
-    type: String,
-    default: "",
-  },
-});
-</script>
-
-<template>
-  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
-    <slot />
-  </div>
-</template>
--- a/src/components/ui/card/CardTitle.vue
+++ b/src/components/ui/card/CardTitle.vue
@@ -1,16 +0,0 @@
-<script setup>
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  class: {
-    type: String,
-    default: "",
-  },
-});
-</script>
-
-<template>
-  <h3 :class="cn('font-semibold leading-none tracking-tight', props.class)">
-    <slot />
-  </h3>
-</template>
--- a/src/components/ui/card/index.js
+++ b/src/components/ui/card/index.js
@@ -1,6 +0,0 @@
-export { default as Card } from "./Card.vue";
-export { default as CardHeader } from "./CardHeader.vue";
-export { default as CardTitle } from "./CardTitle.vue";
-export { default as CardDescription } from "./CardDescription.vue";
-export { default as CardContent } from "./CardContent.vue";
-export { default as CardFooter } from "./CardFooter.vue";
--- a/src/components/ui/checkbox/Checkbox.vue
+++ b/src/components/ui/checkbox/Checkbox.vue
@@ -1,42 +0,0 @@
-<script setup>
-import {
-  CheckboxIndicator,
-  CheckboxRoot,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { CheckIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  defaultChecked: { type: Boolean, required: false },
-  checked: { type: [Boolean, String], required: false },
-  disabled: { type: Boolean, required: false },
-  required: { type: Boolean, required: false },
-  name: { type: String, required: false },
-  value: { type: String, required: false },
-  id: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-const emits = defineEmits(["update:checked"]);
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <CheckboxRoot
-    v-bind="forwarded"
-    :class="
-      cn(
-        'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-        $attrs.class ?? ''
-      )
-    "
-  >
-    <CheckboxIndicator
-      class="flex h-full w-full items-center justify-center text-current"
-    >
-      <CheckIcon class="h-4 w-4" />
-    </CheckboxIndicator>
-  </CheckboxRoot>
-</template>
--- a/src/components/ui/checkbox/index.js
+++ b/src/components/ui/checkbox/index.js
@@ -1 +0,0 @@
-export { default as Checkbox } from "./Checkbox.vue";
--- a/src/components/ui/collapsible/Collapsible.vue
+++ b/src/components/ui/collapsible/Collapsible.vue
@@ -1,21 +0,0 @@
-<script setup>
-import { CollapsibleRoot, useEmitAsProps } from "radix-vue";
-
-const props = defineProps({
-  defaultOpen: { type: Boolean, required: false },
-  open: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-const emits = defineEmits(["update:open"]);
-</script>
-
-<template>
-  <CollapsibleRoot
-    v-slot="{ open }"
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-  >
-    <slot :open="open" />
-  </CollapsibleRoot>
-</template>
--- a/src/components/ui/collapsible/CollapsibleContent.vue
+++ b/src/components/ui/collapsible/CollapsibleContent.vue
@@ -1,18 +0,0 @@
-<script setup>
-import { CollapsibleContent } from "radix-vue";
-
-const props = defineProps({
-  forceMount: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-</script>
-
-<template>
-  <CollapsibleContent
-    v-bind="props"
-    class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
-  >
-    <slot />
-  </CollapsibleContent>
-</template>
--- a/src/components/ui/collapsible/CollapsibleTrigger.vue
+++ b/src/components/ui/collapsible/CollapsibleTrigger.vue
@@ -1,14 +0,0 @@
-<script setup>
-import { CollapsibleTrigger } from "radix-vue";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-</script>
-
-<template>
-  <CollapsibleTrigger v-bind="props">
-    <slot />
-  </CollapsibleTrigger>
-</template>
--- a/src/components/ui/collapsible/index.js
+++ b/src/components/ui/collapsible/index.js
@@ -1,3 +0,0 @@
-export { default as Collapsible } from "./Collapsible.vue";
-export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue";
-export { default as CollapsibleContent } from "./CollapsibleContent.vue";
--- a/src/components/ui/command/Command.vue
+++ b/src/components/ui/command/Command.vue
@@ -1,42 +0,0 @@
-<script setup>
-import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  modelValue: { type: null, required: false },
-  defaultValue: { type: null, required: false },
-  open: { type: Boolean, required: false },
-  defaultOpen: { type: Boolean, required: false },
-  searchTerm: { type: String, required: false },
-  multiple: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  name: { type: String, required: false },
-  dir: { type: String, required: false },
-  filterFunction: { type: Function, required: false },
-  displayValue: { type: Function, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-const emits = defineEmits([
-  "update:modelValue",
-  "update:open",
-  "update:searchTerm",
-]);
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <ComboboxRoot
-    v-bind="forwarded"
-    :open="true"
-    :class="
-      cn(
-        'flex h-full w-full flex-col overflow-hidden rounded-md text-popover-foreground',
-        $attrs.class ?? ''
-      )
-    "
-  >
-    <slot />
-  </ComboboxRoot>
-</template>
--- a/src/components/ui/command/CommandDialog.vue
+++ b/src/components/ui/command/CommandDialog.vue
@@ -1,26 +0,0 @@
-<script setup>
-import { useEmitAsProps } from "radix-vue";
-import Command from "./Command.vue";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-
-const props = defineProps({
-  open: { type: Boolean, required: false },
-  defaultOpen: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
-
-const emitsAsProps = useEmitAsProps(emits);
-</script>
-
-<template>
-  <Dialog v-bind="{ ...props, ...emitsAsProps }">
-    <DialogContent class="overflow-hidden p-0 shadow-lg">
-      <Command
-        class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
-      >
-        <slot />
-      </Command>
-    </DialogContent>
-  </Dialog>
-</template>
--- a/src/components/ui/command/CommandEmpty.vue
+++ b/src/components/ui/command/CommandEmpty.vue
@@ -1,18 +0,0 @@
-<script setup>
-import { ComboboxEmpty } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-</script>
-
-<template>
-  <ComboboxEmpty
-    v-bind="props"
-    :class="cn('py-6 text-center text-sm', $attrs.class ?? '')"
-  >
-    <slot />
-  </ComboboxEmpty>
-</template>
--- a/src/components/ui/command/CommandGroup.vue
+++ b/src/components/ui/command/CommandGroup.vue
@@ -1,25 +0,0 @@
-<script setup>
-import { ComboboxGroup, ComboboxLabel } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  heading: { type: String, required: false },
-});
-</script>
-
-<template>
-  <ComboboxGroup
-    v-bind="props"
-    :class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
-  >
-    <ComboboxLabel
-      v-if="heading"
-      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
-    >
-      {{ heading }}
-    </ComboboxLabel>
-    <slot />
-  </ComboboxGroup>
-</template>
--- a/src/components/ui/command/CommandInput.vue
+++ b/src/components/ui/command/CommandInput.vue
@@ -1,35 +0,0 @@
-<script setup>
-import { MagnifyingGlassIcon } from "@radix-icons/vue";
-import { ComboboxInput } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  type: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  autoFocus: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-</script>
-
-<script>
-export default {
-  inheritAttrs: false,
-};
-</script>
-
-<template>
-  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
-    <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <ComboboxInput
-      v-bind="{ ...props, ...$attrs }"
-      auto-focus
-      :class="
-        cn(
-          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-          $attrs.class ?? ''
-        )
-      "
-    />
-  </div>
-</template>
--- a/src/components/ui/command/CommandItem.vue
+++ b/src/components/ui/command/CommandItem.vue
@@ -1,30 +0,0 @@
-<script setup>
-import { ComboboxItem, useEmitAsProps } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  value: { type: null, required: true },
-  disabled: { type: Boolean, required: false },
-  textValue: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-const emits = defineEmits(["select"]);
-
-const emitsAsProps = useEmitAsProps(emits);
-</script>
-
-<template>
-  <ComboboxItem
-    v-bind="{ ...props, ...emitsAsProps }"
-    :class="
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        $attrs.class ?? ''
-      )
-    "
-    @select.prevent
-  >
-    <slot />
-  </ComboboxItem>
-</template>
--- a/src/components/ui/command/CommandList.vue
+++ b/src/components/ui/command/CommandList.vue
@@ -1,48 +0,0 @@
-<script setup>
-import { ComboboxContent, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  forceMount: { type: Boolean, required: false },
-  position: { type: String, required: false },
-  bodyLock: { type: Boolean, required: false },
-  disableOutsidePointerEvents: { type: Boolean, required: false },
-  side: { type: null, required: false },
-  sideOffset: { type: Number, required: false },
-  align: { type: null, required: false },
-  alignOffset: { type: Number, required: false },
-  avoidCollisions: { type: Boolean, required: false },
-  collisionBoundary: { type: null, required: false },
-  collisionPadding: { type: [Number, Object], required: false },
-  arrowPadding: { type: Number, required: false },
-  sticky: { type: String, required: false },
-  hideWhenDetached: { type: Boolean, required: false },
-  updatePositionStrategy: { type: String, required: false },
-  onPlaced: { type: Function, required: false },
-  prioritizePosition: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "dismiss",
-]);
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <ComboboxContent
-    v-bind="forwarded"
-    :class="
-      cn('max-h-[500px] max-h-full overflow-y-auto overflow-x-hidden', $attrs.class ?? '')
-    "
-  >
-    <div role="presentation">
-      <slot />
-    </div>
-  </ComboboxContent>
-</template>
--- a/src/components/ui/command/CommandSeparator.vue
+++ b/src/components/ui/command/CommandSeparator.vue
@@ -1,18 +0,0 @@
-<script setup>
-import { ComboboxSeparator } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-</script>
-
-<template>
-  <ComboboxSeparator
-    v-bind="props"
-    :class="cn('-mx-1 h-px bg-border', $attrs.class ?? '')"
-  >
-    <slot />
-  </ComboboxSeparator>
-</template>
--- a/src/components/ui/command/CommandShortcut.vue
+++ b/src/components/ui/command/CommandShortcut.vue
@@ -1,16 +0,0 @@
-<script setup>
-import { cn } from "@/lib/utils";
-</script>
-
-<template>
-  <span
-    :class="
-      cn(
-        'ml-auto text-xs tracking-widest text-muted-foreground',
-        $attrs.class ?? ''
-      )
-    "
-  >
-    <slot />
-  </span>
-</template>
--- a/src/components/ui/command/index.js
+++ b/src/components/ui/command/index.js
@@ -1,9 +0,0 @@
-export { default as Command } from "./Command.vue";
-export { default as CommandDialog } from "./CommandDialog.vue";
-export { default as CommandEmpty } from "./CommandEmpty.vue";
-export { default as CommandGroup } from "./CommandGroup.vue";
-export { default as CommandInput } from "./CommandInput.vue";
-export { default as CommandItem } from "./CommandItem.vue";
-export { default as CommandList } from "./CommandList.vue";
-export { default as CommandSeparator } from "./CommandSeparator.vue";
-export { default as CommandShortcut } from "./CommandShortcut.vue";
--- a/src/components/ui/context-menu/ContextMenu.vue
+++ b/src/components/ui/context-menu/ContextMenu.vue
@@ -1,17 +0,0 @@
-<script setup>
-import { ContextMenuRoot, useForwardPropsEmits } from "radix-vue";
-
-const props = defineProps({
-  dir: { type: String, required: false },
-  modal: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <ContextMenuRoot v-bind="forwarded">
-    <slot />
-  </ContextMenuRoot>
-</template>
--- a/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -1,40 +0,0 @@
-<script setup>
-import {
-  ContextMenuCheckboxItem,
-  ContextMenuItemIndicator,
-  useEmitAsProps,
-} from "radix-vue";
-import { CheckIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  checked: { type: [Boolean, String], required: false },
-  disabled: { type: Boolean, required: false },
-  textValue: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-});
-const emits = defineEmits(["select", "update:checked"]);
-</script>
-
-<template>
-  <ContextMenuCheckboxItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class
-      ),
-    ]"
-  >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuItemIndicator
-        class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
-      >
-        <CheckIcon class="h-4 w-4" />
-      </ContextMenuItemIndicator>
-    </span>
-    <slot />
-  </ContextMenuCheckboxItem>
-</template>
--- a/src/components/ui/context-menu/ContextMenuContent.vue
+++ b/src/components/ui/context-menu/ContextMenuContent.vue
@@ -1,51 +0,0 @@
-<script setup>
-import {
-  ContextMenuContent,
-  ContextMenuPortal,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  forceMount: { type: Boolean, required: false },
-  loop: { type: Boolean, required: false },
-  alignOffset: { type: Number, required: false },
-  avoidCollisions: { type: Boolean, required: false },
-  collisionBoundary: { type: null, required: false },
-  collisionPadding: { type: [Number, Object], required: false },
-  sticky: { type: String, required: false },
-  hideWhenDetached: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-});
-const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "dismiss",
-  "entryFocus",
-  "openAutoFocus",
-  "closeAutoFocus",
-]);
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <ContextMenuPortal>
-    <ContextMenuContent
-      :align-offset="props.alignOffset"
-      :class="[
-        cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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',
-          props.class
-        ),
-      ]"
-      v-bind="forwarded"
-    >
-      <slot />
-    </ContextMenuContent>
-  </ContextMenuPortal>
-</template>
--- a/src/components/ui/context-menu/ContextMenuGroup.vue
+++ b/src/components/ui/context-menu/ContextMenuGroup.vue
@@ -1,14 +0,0 @@
-<script setup>
-import { ContextMenuGroup } from "radix-vue";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-</script>
-
-<template>
-  <ContextMenuGroup v-bind="props">
-    <slot />
-  </ContextMenuGroup>
-</template>
--- a/src/components/ui/context-menu/ContextMenuItem.vue
+++ b/src/components/ui/context-menu/ContextMenuItem.vue
@@ -1,29 +0,0 @@
-<script setup>
-import { ContextMenuItem, useEmitAsProps } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  disabled: { type: Boolean, required: false },
-  textValue: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-  inset: { type: Boolean, required: false },
-});
-const emits = defineEmits(["select"]);
-</script>
-
-<template>
-  <ContextMenuItem
-    v-bind="{ ...props, ...useEmitAsProps(emits) }"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        inset && 'pl-8',
-        props.class
-      ),
-    ]"
-  >
-    <slot />
-  </ContextMenuItem>
-</template>
--- a/src/components/ui/context-menu/ContextMenuLabel.vue
+++ b/src/components/ui/context-menu/ContextMenuLabel.vue
@@ -1,26 +0,0 @@
-<script setup>
-import { ContextMenuLabel } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-  inset: { type: Boolean, required: false },
-});
-</script>
-
-<template>
-  <ContextMenuLabel
-    v-bind="props"
-    :class="
-      cn(
-        'px-2 py-1.5 text-sm font-semibold text-foreground',
-        inset && 'pl-8',
-        props.class ?? ''
-      )
-    "
-  >
-    <slot />
-  </ContextMenuLabel>
-</template>
--- a/src/components/ui/context-menu/ContextMenuPortal.vue
+++ b/src/components/ui/context-menu/ContextMenuPortal.vue
@@ -1,15 +0,0 @@
-<script setup>
-import { ContextMenuPortal } from "radix-vue";
-
-const props = defineProps({
-  to: { type: null, required: false },
-  disabled: { type: Boolean, required: false },
-  forceMount: { type: Boolean, required: false },
-});
-</script>
-
-<template>
-  <ContextMenuPortal v-bind="props">
-    <slot />
-  </ContextMenuPortal>
-</template>
--- a/src/components/ui/context-menu/ContextMenuRadioGroup.vue
+++ b/src/components/ui/context-menu/ContextMenuRadioGroup.vue
@@ -1,18 +0,0 @@
-<script setup>
-import { ContextMenuRadioGroup, useForwardPropsEmits } from "radix-vue";
-
-const props = defineProps({
-  modelValue: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-const emits = defineEmits(["update:modelValue"]);
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <ContextMenuRadioGroup v-bind="forwarded">
-    <slot />
-  </ContextMenuRadioGroup>
-</template>
--- a/src/components/ui/context-menu/ContextMenuRadioItem.vue
+++ b/src/components/ui/context-menu/ContextMenuRadioItem.vue
@@ -1,40 +0,0 @@
-<script setup>
-import {
-  ContextMenuItemIndicator,
-  ContextMenuRadioItem,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { DotFilledIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  value: { type: String, required: true },
-  disabled: { type: Boolean, required: false },
-  textValue: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-});
-const emits = defineEmits(["select"]);
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <ContextMenuRadioItem
-    v-bind="forwarded"
-    :class="[
-      cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class
-      ),
-    ]"
-  >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuItemIndicator>
-        <DotFilledIcon class="h-4 w-4 fill-current" />
-      </ContextMenuItemIndicator>
-    </span>
-    <slot />
-  </ContextMenuRadioItem>
-</template>
--- a/src/components/ui/context-menu/ContextMenuSeparator.vue
+++ b/src/components/ui/context-menu/ContextMenuSeparator.vue
@@ -1,16 +0,0 @@
-<script setup>
-import { ContextMenuSeparator } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-</script>
-
-<template>
-  <ContextMenuSeparator
-    v-bind="props"
-    :class="cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')"
-  />
-</template>
--- a/src/components/ui/context-menu/ContextMenuShortcut.vue
+++ b/src/components/ui/context-menu/ContextMenuShortcut.vue
@@ -1,16 +0,0 @@
-<script setup>
-import { cn } from "@/lib/utils";
-</script>
-
-<template>
-  <span
-    :class="
-      cn(
-        'ml-auto text-xs tracking-widest text-muted-foreground',
-        $attrs.class ?? ''
-      )
-    "
-  >
-    <slot />
-  </span>
-</template>
--- a/src/components/ui/context-menu/ContextMenuSub.vue
+++ b/src/components/ui/context-menu/ContextMenuSub.vue
@@ -1,17 +0,0 @@
-<script setup>
-import { ContextMenuSub, useForwardPropsEmits } from "radix-vue";
-
-const props = defineProps({
-  open: { type: Boolean, required: false },
-  defaultOpen: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <ContextMenuSub v-bind="forwarded">
-    <slot />
-  </ContextMenuSub>
-</template>
--- a/src/components/ui/context-menu/ContextMenuSubContent.vue
+++ b/src/components/ui/context-menu/ContextMenuSubContent.vue
@@ -1,53 +0,0 @@
-<script setup>
-import { ContextMenuSubContent, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  forceMount: { type: Boolean, required: false },
-  loop: { type: Boolean, required: false },
-  disableOutsidePointerEvents: { type: Boolean, required: false },
-  disableOutsideScroll: { type: Boolean, required: false },
-  trapFocus: { type: Boolean, required: false },
-  side: { type: null, required: false },
-  sideOffset: { type: Number, required: false },
-  align: { type: null, required: false },
-  alignOffset: { type: Number, required: false },
-  avoidCollisions: { type: Boolean, required: false },
-  collisionBoundary: { type: null, required: false },
-  collisionPadding: { type: [Number, Object], required: false },
-  arrowPadding: { type: Number, required: false },
-  sticky: { type: String, required: false },
-  hideWhenDetached: { type: Boolean, required: false },
-  updatePositionStrategy: { type: String, required: false },
-  prioritizePosition: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-});
-const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "dismiss",
-  "entryFocus",
-  "openAutoFocus",
-  "closeAutoFocus",
-]);
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <ContextMenuSubContent
-    v-bind="forwarded"
-    :class="
-      cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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',
-        props.class
-      )
-    "
-  >
-    <slot />
-  </ContextMenuSubContent>
-</template>
--- a/src/components/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/src/components/ui/context-menu/ContextMenuSubTrigger.vue
@@ -1,30 +0,0 @@
-<script setup>
-import { ContextMenuSubTrigger } from "radix-vue";
-import { ChevronRightIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
-
-const props = defineProps({
-  disabled: { type: Boolean, required: false },
-  textValue: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: String, required: false },
-  inset: { type: Boolean, required: false },
-});
-</script>
-
-<template>
-  <ContextMenuSubTrigger
-    v-bind="props"
-    :class="[
-      cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-        inset && 'pl-8',
-        props.class
-      ),
-    ]"
-  >
-    <slot />
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
-  </ContextMenuSubTrigger>
-</template>
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`export { default as Checkbox } from "./Checkbox.vue";`