From bba9424263471c0bb7ed77305b2c36310b03145c Mon Sep 17 00:00:00 2001
From: Timothy Lusk <timothy.lusk@gmail.com>
Date: Mon, 6 Jan 2025 00:56:40 -0500
Subject: [PATCH] Migrate codebase to TypeScript

---
 eslint.config.js                              |  16 +-
 package-lock.json                             | 939 +++++++++++++++---
 package.json                                  |  15 +-
 pi.html                                       |   2 +-
 plugin.html                                   |   2 +-
 src/@custom_types/snapsvg-cjs/index.d.ts      |   4 +
 src/components/EntitySelection.vue            |  25 +-
 src/components/PiComponent.vue                |  96 +-
 src/components/PluginComponent.vue            | 211 ++--
 src/components/ServiceCallConfiguration.vue   |  47 +-
 .../accordeon/BootstrapAccordeon.vue          |   2 +-
 .../accordeon/BootstrapAccordeonItem.vue      |   2 +-
 src/modules/common/settings.js                | 125 ---
 src/modules/common/settings.ts                | 288 ++++++
 .../common/{streamdeck.js => streamdeck.ts}   | 112 ++-
 src/modules/common/{utils.js => utils.ts}     |   5 +-
 .../actions/{action.js => action.ts}          |   0
 .../{service-action.js => service-action.ts}  |   6 +-
 .../commands/{command.js => command.ts}       |   5 +-
 ...t-command.js => execute-script-command.ts} |   4 +-
 ...ces-command.js => get-services-command.ts} |   2 +-
 ...tates-command.js => get-states-command.ts} |   2 +-
 ...command.js => subscribe-events-command.ts} |   4 +-
 .../{homeassistant.js => homeassistant.ts}    |  84 +-
 src/modules/pi/{entity.js => entity.ts}       |  10 +-
 src/modules/pi/{service.js => service.ts}     |   9 +-
 ...gFactoryNg.js => entityConfigFactoryNg.ts} |  81 +-
 .../plugin/{svgUtils.js => svgUtils.ts}       |  64 +-
 src/pi/{main.js => main.ts}                   |   2 +-
 src/plugin/{main.js => main.ts}               |   0
 ...tartStreamDeck.js => RestartStreamDeck.ts} |   3 +-
 tsconfig.app.json                             |  14 +
 tsconfig.json                                 |  11 +
 tsconfig.node.json                            |  18 +
 vite.config.js => vite.config.ts              |   2 +-
 35 files changed, 1696 insertions(+), 516 deletions(-)
 create mode 100644 src/@custom_types/snapsvg-cjs/index.d.ts
 delete mode 100644 src/modules/common/settings.js
 create mode 100644 src/modules/common/settings.ts
 rename src/modules/common/{streamdeck.js => streamdeck.ts} (64%)
 rename src/modules/common/{utils.js => utils.ts} (83%)
 rename src/modules/homeassistant/actions/{action.js => action.ts} (100%)
 rename src/modules/homeassistant/actions/{service-action.js => service-action.ts} (89%)
 rename src/modules/homeassistant/commands/{command.js => command.ts} (93%)
 rename src/modules/homeassistant/commands/{execute-script-command.js => execute-script-command.ts} (93%)
 rename src/modules/homeassistant/commands/{get-services-command.js => get-services-command.ts} (92%)
 rename src/modules/homeassistant/commands/{get-states-command.js => get-states-command.ts} (92%)
 rename src/modules/homeassistant/commands/{subscribe-events-command.js => subscribe-events-command.ts} (89%)
 rename src/modules/homeassistant/{homeassistant.js => homeassistant.ts} (56%)
 rename src/modules/pi/{entity.js => entity.ts} (51%)
 rename src/modules/pi/{service.js => service.ts} (65%)
 rename src/modules/plugin/{entityConfigFactoryNg.js => entityConfigFactoryNg.ts} (64%)
 rename src/modules/plugin/{svgUtils.js => svgUtils.ts} (71%)
 rename src/pi/{main.js => main.ts} (75%)
 rename src/plugin/{main.js => main.ts} (100%)
 rename src/vite/{RestartStreamDeck.js => RestartStreamDeck.ts} (82%)
 create mode 100644 tsconfig.app.json
 create mode 100644 tsconfig.json
 create mode 100644 tsconfig.node.json
 rename vite.config.js => vite.config.ts (93%)

diff --git a/eslint.config.js b/eslint.config.js
index 84fc7a5..7a68414 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -2,7 +2,9 @@ import js from '@eslint/js'
 import pluginVue from 'eslint-plugin-vue'
 import path from 'node:path'
 import skipFormattingConfig from '@vue/eslint-config-prettier/skip-formatting'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
 import eslintConfigPrettier from 'eslint-config-prettier'
+import tseslint from 'typescript-eslint'
 
 import { includeIgnoreFile } from '@eslint/compat'
 import { fileURLToPath } from 'node:url'
@@ -11,13 +13,15 @@ const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 const gitignorePath = path.resolve(__dirname, '.gitignore')
 
-export default [
+export default tseslint.config(
+  {
+    files: ['**/*.{ts,js,mts,tsx,vue}']
+  },
   js.configs.recommended,
+  tseslint.configs.recommended,
   ...pluginVue.configs['flat/essential'],
+  ...vueTsEslintConfig(),
   includeIgnoreFile(gitignorePath),
   eslintConfigPrettier,
-  skipFormattingConfig,
-  {
-    files: ['**/*.vue', '**/*.js', '**/*.jsx', '**/*.cjs', '**/*.mjs']
-  }
-]
+  skipFormattingConfig
+)
diff --git a/package-lock.json b/package-lock.json
index b75ee9d..718c098 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,14 +24,26 @@
         "@eslint/compat": "^1.2.4",
         "@eslint/js": "^9.17.0",
         "@modyfi/vite-plugin-yaml": "^1.1.0",
+        "@tsconfig/node20": "^20.1.4",
+        "@types/bootstrap": "^5.2.10",
+        "@types/js-yaml": "^4.0.9",
+        "@types/node": "~20.17.11",
+        "@types/nunjucks": "^3.2.6",
+        "@types/snapsvg": "^0.5.8",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vue/eslint-config-prettier": "^10.1.0",
+        "@vue/eslint-config-typescript": "^14.2.0",
+        "@vue/tsconfig": "^0.7.0",
         "eslint": "^9.17.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-vue": "^9.32.0",
         "prettier": "^3.4.2",
         "sass": "^1.83.1",
-        "vite": "^5.4.11"
+        "tslib": "^2.8.1",
+        "typescript": "^5.7.2",
+        "typescript-eslint": "^8.19.0",
+        "vite": "^5.4.11",
+        "vue-tsc": "^2.2.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -43,10 +55,32 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/parser": {
-      "version": "7.22.16",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.16.tgz",
-      "integrity": "sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
+      "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.26.3"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -54,6 +88,19 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/types": {
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
+      "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@elgato/cli": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@elgato/cli/-/cli-1.1.0.tgz",
@@ -988,6 +1035,44 @@
         "vite": "^3.2.7 || ^4.0.5 || ^5.0.5"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@parcel/watcher": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
@@ -1606,6 +1691,23 @@
         "win32"
       ]
     },
+    "node_modules/@tsconfig/node20": {
+      "version": "20.1.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node20/-/node20-20.1.4.tgz",
+      "integrity": "sha512-sqgsT69YFeLWf5NtJ4Xq/xAF8p4ZQHlmGW74Nu2tD4+g5fAsposc4ZfaaPixVu4y01BEiDCWLRDCvDM5JOsRxg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/bootstrap": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
+      "integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1613,6 +1715,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/js-yaml": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz",
+      "integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1620,16 +1729,244 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/mina": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/@types/mina/-/mina-0.4.5.tgz",
+      "integrity": "sha512-rKJ8aoYqsP9jGtMstbcR8Z75mq0yGXkkFu8581olgRIkpoHCM6UXcpkX1TctknQInTlHE7zV9wkhqdN6fgntpA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
-      "version": "20.15.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.15.0.tgz",
-      "integrity": "sha512-eQf4OkH6gA9v1W0iEpht/neozCsZKMTK+C4cU6/fv7wtJCCL8LEQ4hie2Ln8ZP/0YYM2xGj7//f8xyqItkJ6QA==",
+      "version": "20.17.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.11.tgz",
+      "integrity": "sha512-Ept5glCK35R8yeyIeYlRIZtX6SLRyqMhOFTgj5SOkMpLTdw3SEHI9fHx60xaUZ+V1aJxQJODE+7/j5ocZydYTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
+    "node_modules/@types/nunjucks": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/@types/nunjucks/-/nunjucks-3.2.6.tgz",
+      "integrity": "sha512-pHiGtf83na1nCzliuAdq8GowYiXvH5l931xZ0YEHaLMNFgynpEqx+IPStlu7UaDkehfvl01e4x/9Tpwhy7Ue3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/snapsvg": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/@types/snapsvg/-/snapsvg-0.5.8.tgz",
+      "integrity": "sha512-pQOX8vkOkXM956ahW7iiSgvDcNd8lSAObrIGZndoaze1dDLwhEQoa2YRHyxmY1r2hvUHntGOhP5XyhF5SPg7Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/mina": "*"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.19.0.tgz",
+      "integrity": "sha512-NggSaEZCdSrFddbctrVjkVZvFC6KGfKfNK0CU7mNK/iKHGKbzT4Wmgm08dKpcZECBu9f5FypndoMyRHkdqfT1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.19.0",
+        "@typescript-eslint/type-utils": "8.19.0",
+        "@typescript-eslint/utils": "8.19.0",
+        "@typescript-eslint/visitor-keys": "8.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.19.0.tgz",
+      "integrity": "sha512-6M8taKyOETY1TKHp0x8ndycipTVgmp4xtg5QpEZzXxDhNvvHOJi5rLRkLr8SK3jTgD5l4fTlvBiRdfsuWydxBw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.19.0",
+        "@typescript-eslint/types": "8.19.0",
+        "@typescript-eslint/typescript-estree": "8.19.0",
+        "@typescript-eslint/visitor-keys": "8.19.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.19.0.tgz",
+      "integrity": "sha512-hkoJiKQS3GQ13TSMEiuNmSCvhz7ujyqD1x3ShbaETATHrck+9RaDdUbt+osXaUuns9OFwrDTTrjtwsU8gJyyRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.19.0",
+        "@typescript-eslint/visitor-keys": "8.19.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.19.0.tgz",
+      "integrity": "sha512-TZs0I0OSbd5Aza4qAMpp1cdCYVnER94IziudE3JU328YUHgWu9gwiwhag+fuLeJ2LkWLXI+F/182TbG+JaBdTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "8.19.0",
+        "@typescript-eslint/utils": "8.19.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.19.0.tgz",
+      "integrity": "sha512-8XQ4Ss7G9WX8oaYvD4OOLCjIQYgRQxO+qCiR2V2s2GxI9AUpo7riNwo6jDhKtTcaJjT8PY54j2Yb33kWtSJsmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.19.0.tgz",
+      "integrity": "sha512-WW9PpDaLIFW9LCbucMSdYUuGeFUz1OkWYS/5fwZwTA+l2RwlWFdJvReQqMUMBw4yJWJOfqd7An9uwut2Oj8sLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.19.0",
+        "@typescript-eslint/visitor-keys": "8.19.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.8.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "dependencies": {
-        "undici-types": "~6.13.0"
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.19.0.tgz",
+      "integrity": "sha512-PTBG+0oEMPH9jCZlfg07LCB2nYI0I317yyvXGfxnvGvw4SHIOuRnQ3kadyyXY6tGdChusIHIbM5zfIbp4M6tCg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.19.0",
+        "@typescript-eslint/types": "8.19.0",
+        "@typescript-eslint/typescript-estree": "8.19.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.19.0.tgz",
+      "integrity": "sha512-mCFtBbFBJDCNCWUl5y6sZSCHXw1DEFEk3c/M3nRK2a4XUB8StGFtmcEMizdjKuBzB6e/smJAAWYug3VrdLMr1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.19.0",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
     "node_modules/@vitejs/plugin-vue": {
@@ -1646,50 +1983,94 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.11.tgz",
+      "integrity": "sha512-lN2C1+ByfW9/JRPpqScuZt/4OrUUse57GLI6TbLgTIqBVemdl1wNcZ1qYGEo2+Gw8coYLgCy7SuKqn6IrQcQgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.11"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.11.tgz",
+      "integrity": "sha512-ZQpmafIGvaZMn/8iuvCFGrW3smeqkq/IIh9F1SdSx9aUl0J4Iurzd6/FhmjNO5g2ejF3rT45dKskgXWiofqlZQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.11.tgz",
+      "integrity": "sha512-2DT+Tdh88Spp5PyPbqhyoYavYCPDsqbHLFwcUI9K1NlY1YgUJvujGdrqUp0zWxnW7KWNTr3xSpMuv2WnaTKDAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.11",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.13",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
-      "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.4",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+      "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.13",
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0",
-        "postcss": "^8.1.10",
-        "source-map-js": "^1.0.2"
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.48",
+        "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
       }
     },
     "node_modules/@vue/eslint-config-prettier": {
@@ -1707,61 +2088,150 @@
         "prettier": ">= 3.0.0"
       }
     },
-    "node_modules/@vue/reactivity": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+    "node_modules/@vue/eslint-config-typescript": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-14.2.0.tgz",
+      "integrity": "sha512-JJ4wHuTJa2faQsBOUeWzuHOSFizVS7RWG2eH2noABk2LcT4wVcTOMZKM/lFobKBcgwADIPAKVRGFHVKooXImoA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.3.4"
+        "fast-glob": "^3.3.2",
+        "typescript-eslint": "^8.18.1",
+        "vue-eslint-parser": "^9.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": "^9.10.0",
+        "eslint-plugin-vue": "^9.28.0",
+        "typescript": ">=4.8.4"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
+    "node_modules/@vue/language-core": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.0.tgz",
+      "integrity": "sha512-O1ZZFaaBGkKbsRfnVH1ifOK1/1BUkyK+3SQsfnh6PmMmD4qJcTU8godCeA96jjDRTL6zgnK7YzCHfaUlH2r0Mw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0"
+        "@volar/language-core": "~2.4.11",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^0.4.9",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.13"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+      "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/reactivity": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+      "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/runtime-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "csstype": "^3.1.1"
+        "@vue/reactivity": "3.5.13",
+        "@vue/runtime-core": "3.5.13",
+        "@vue/shared": "3.5.13",
+        "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+      "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13"
       },
       "peerDependencies": {
-        "vue": "3.3.4"
+        "vue": "3.5.13"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/tsconfig": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@vue/tsconfig/-/tsconfig-0.7.0.tgz",
+      "integrity": "sha512-ku2uNz5MaZ9IerPPUyOHzyjhXoX2kVJaVf7hL315DC17vS6IiZRmmCPfggNbU16QTvM80+uYYy3eYJB59WCtvg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": "5.x",
+        "vue": "^3.4.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
     },
     "node_modules/@zip.js/zip.js": {
       "version": "2.7.53",
@@ -1819,6 +2289,13 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/alien-signals": {
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-0.4.12.tgz",
+      "integrity": "sha512-Og0PgAihxlp1R22bsoBsyhhMG4+qhU+fkkLPoGBQkYVc3qt9rYnrwYTf+M6kqUqUZpf3rXDnpL90iKa0QcSVVg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -1994,8 +2471,8 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -2235,17 +2712,26 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -2327,6 +2813,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -2768,6 +3266,23 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -2788,6 +3303,16 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/fastq": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
+      "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -2838,8 +3363,8 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2934,9 +3459,10 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -2963,8 +3489,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "optional": true,
-      "peer": true,
+      "devOptional": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -2985,6 +3510,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2994,6 +3526,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -3162,8 +3704,8 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -3327,14 +3869,22 @@
       "license": "ISC"
     },
     "node_modules/magic-string": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">= 8"
       }
     },
     "node_modules/micromatch": {
@@ -3343,7 +3893,6 @@
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -3496,10 +4045,18 @@
       }
     },
     "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/mute-stream": {
       "version": "1.0.0",
@@ -3715,6 +4272,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3864,6 +4428,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/rage-edit": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/rage-edit/-/rage-edit-1.2.0.tgz",
@@ -3933,6 +4518,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.25.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.25.0.tgz",
@@ -3981,6 +4577,30 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -4124,6 +4744,7 @@
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/snapsvg-cjs/-/snapsvg-cjs-0.0.6.tgz",
       "integrity": "sha512-7NNvoGrc3BQvWz5rWK1DsD5/Vni4STswz5B3JrBADboQWcN8OBVGjYVJFPT5JkUXb2iVnEflZANhufEpEcTHXw==",
+      "license": "MIT",
       "dependencies": {
         "snapsvg": "0.5.1"
       },
@@ -4336,8 +4957,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -4354,11 +4975,25 @@
         "node": ">=10"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
+      "integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
     "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -4385,14 +5020,49 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/undici-types": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.13.0.tgz",
-      "integrity": "sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==",
+    "node_modules/typescript": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/typescript-eslint": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.19.0.tgz",
+      "integrity": "sha512-Ni8sUkVWYK4KAcTtPjQ/UTiRk6jcsuDhPpxULapUDi8A/l8TSBk+t1GtJA1RsCzIJg0q6+J7bf35AwQigENWRQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.19.0",
+        "@typescript-eslint/parser": "8.19.0",
+        "@typescript-eslint/utils": "8.19.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/uri-js": {
       "version": "4.4.1",
@@ -4470,16 +5140,32 @@
         }
       }
     },
+    "node_modules/vscode-uri": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
-      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+      "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
+      "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-sfc": "3.3.4",
-        "@vue/runtime-dom": "3.3.4",
-        "@vue/server-renderer": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-sfc": "3.5.13",
+        "@vue/runtime-dom": "3.5.13",
+        "@vue/server-renderer": "3.5.13",
+        "@vue/shared": "3.5.13"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue-eslint-parser": {
@@ -4537,6 +5223,23 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/vue-tsc": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.0.tgz",
+      "integrity": "sha512-gtmM1sUuJ8aSb0KoAFmK9yMxb8TxjewmxqTJ1aKphD5Cbu0rULFY6+UQT51zW7SpUcenfPUuflKyVwyx9Qdnxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "~2.4.11",
+        "@vue/language-core": "2.2.0"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
diff --git a/package.json b/package.json
index 22e99bb..18cc340 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "validate": "streamdeck validate --no-update-check ./de.perdoctus.streamdeck.homeassistant.sdPlugin",
     "build-dev": "vite build --watch --sourcemap inline --minify false",
     "bundle": "streamdeck bundle --no-update-check ./de.perdoctus.streamdeck.homeassistant.sdPlugin",
+    "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
     "format": "prettier . --write"
   },
@@ -28,13 +29,25 @@
     "@eslint/compat": "^1.2.4",
     "@eslint/js": "^9.17.0",
     "@modyfi/vite-plugin-yaml": "^1.1.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/bootstrap": "^5.2.10",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "~20.17.11",
+    "@types/nunjucks": "^3.2.6",
+    "@types/snapsvg": "^0.5.8",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.2.0",
+    "@vue/tsconfig": "^0.7.0",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.32.0",
     "prettier": "^3.4.2",
     "sass": "^1.83.1",
-    "vite": "^5.4.11"
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.19.0",
+    "vite": "^5.4.11",
+    "vue-tsc": "^2.2.0"
   }
 }
diff --git a/pi.html b/pi.html
index c11e6d8..eeaca42 100644
--- a/pi.html
+++ b/pi.html
@@ -15,4 +15,4 @@
   </body>
 </html>
 
-<script type="module" src="src/pi/main.js"></script>
+<script type="module" src="src/pi/main.ts"></script>
diff --git a/plugin.html b/plugin.html
index 41060a9..11520f1 100644
--- a/plugin.html
+++ b/plugin.html
@@ -10,4 +10,4 @@
     <div id="app"></div>
   </body>
 </html>
-<script type="module" src="src/plugin/main.js"></script>
+<script type="module" src="src/plugin/main.ts"></script>
diff --git a/src/@custom_types/snapsvg-cjs/index.d.ts b/src/@custom_types/snapsvg-cjs/index.d.ts
new file mode 100644
index 0000000..e3a5c56
--- /dev/null
+++ b/src/@custom_types/snapsvg-cjs/index.d.ts
@@ -0,0 +1,4 @@
+declare module 'snapsvg-cjs' {
+  import Snap from 'snapsvg'
+  export = Snap
+}
diff --git a/src/components/EntitySelection.vue b/src/components/EntitySelection.vue
index 2999de2..e90fca0 100644
--- a/src/components/EntitySelection.vue
+++ b/src/components/EntitySelection.vue
@@ -4,11 +4,16 @@
     <select
       size="5"
       id="entity"
-      @change="emit('update:modelValue', $event.target.value)"
+      @change="emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
       :value="modelValue"
       class="form-select form-select-sm mb-1"
     >
-      <option v-for="entity in filteredEntities" v-bind:key="entity" :value="entity.entityId" :title="entity?.entityId">
+      <option
+        v-for="entity in filteredEntities"
+        v-bind:key="entity as any"
+        :value="entity.entityId"
+        :title="entity?.entityId"
+      >
         {{ entity.title }}
       </option>
     </select>
@@ -20,19 +25,19 @@
     />
   </div>
 </template>
-<script setup>
-import { computed, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, type PropType, ref } from 'vue'
 import { Entity } from '@/modules/pi/entity'
 
 const props = defineProps({
   modelValue: {
     required: true,
-    type: Object,
-    default: () => new Entity()
+    type: Object as PropType<Entity>,
+    default: () => new Entity('', '', '')
   },
   availableEntities: {
     required: true,
-    type: [] // Entity[]
+    type: Object as PropType<Array<Entity>>
   }
 })
 
@@ -45,10 +50,10 @@ const filteredEntities = computed(() => {
     return props.availableEntities
   }
 
-  let filterLc = entityFilter.value.toLowerCase()
+  const filterLc = entityFilter.value.toLowerCase()
   return props.availableEntities.filter((entity) => {
-    let entityIdMatches = entity.entityId.toLowerCase().indexOf(filterLc) !== -1
-    let titleMatches = entity.title.toLowerCase().indexOf(filterLc) !== -1
+    const entityIdMatches = entity.entityId.toLowerCase().indexOf(filterLc) !== -1
+    const titleMatches = entity.title.toLowerCase().indexOf(filterLc) !== -1
     return entityIdMatches || titleMatches
   })
 })
diff --git a/src/components/PiComponent.vue b/src/components/PiComponent.vue
index a4ec1d1..3f87eb6 100644
--- a/src/components/PiComponent.vue
+++ b/src/components/PiComponent.vue
@@ -90,7 +90,7 @@
     <div v-if="haConnectionState === 'connected'" class="clearfix mb-3">
       <h1>{{ controllerType }} appearance</h1>
 
-      <EntitySelection class="mb-3" :available-entities="availableEntities" v-model="entity" />
+      <EntitySelection class="mb-3" :available-entities="availableEntities" v-model="entity as any" />
 
       <div class="form-check form-switch">
         <input id="chkButtonTitle" v-model="useCustomTitle" class="form-check-input" type="checkbox" />
@@ -270,30 +270,29 @@
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
+// @ts-expect-error ts-checker doesn't understand yaml imports
 import defaultManifest from '../../public/config/manifest.yml'
-import { StreamDeck } from '@/modules/common/streamdeck'
+import { type DidReceiveSettingsCommand, type GlobalSettings, StreamDeck } from '@/modules/common/streamdeck'
 import { Settings } from '@/modules/common/settings'
 import { Homeassistant } from '@/modules/homeassistant/homeassistant'
 import { Entity } from '@/modules/pi/entity'
 import { Service } from '@/modules/pi/service'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, type Ref, ref } from 'vue'
 import ServiceCallConfiguration from '@/components/ServiceCallConfiguration.vue'
 import { ObjectUtils } from '@/modules/common/utils'
 import AccordeonComponent from '@/components/accordeon/BootstrapAccordeon.vue'
 import AccordeonItem from '@/components/accordeon/BootstrapAccordeonItem.vue'
 import EntitySelection from '@/components/EntitySelection.vue'
 import axios from 'axios'
-import yaml from 'js-yaml'
+import { load as yamlLoad } from 'js-yaml'
 
-axios.defaults.headers = {
-  'Cache-Control': 'public, max-age=86400'
-}
+axios.defaults.headers['Cache-Control'] = 'public, max-age=86400'
 
-let manifest = ref(defaultManifest)
+const manifest = ref(defaultManifest)
 
-let $HA = null
-let $SD = null
+let $HA: Homeassistant | null = null
+let $SD: StreamDeck | null = null
 
 const serverUrl = ref('')
 const accessToken = ref('')
@@ -317,20 +316,38 @@ const useCustomButtonLabels = ref(false)
 const buttonLabels = ref('')
 const enableServiceIndicator = ref(true)
 const iconSettings = ref('PREFER_PLUGIN')
-const availableEntityDomains = ref([])
-const availableEntities = ref([])
-const availableServiceDomains = ref([])
-const availableServices = ref([])
-const currentStates = ref([])
+const availableEntityDomains: Ref<Array<string>> = ref([])
+const availableEntities: Ref<Array<Entity>> = ref([])
+const availableServiceDomains: Ref<Array<string>> = ref([])
+const availableServices: Ref<Array<Service>> = ref([])
+const currentStates: Ref<Array<{ entityId: string; attributes: string[] }>> = ref([])
 const haConnectionState = ref('disconnected') // disconnected, connecting, connected
 const haError = ref('')
 
 const controllerType = ref('')
 
+declare global {
+  interface Window {
+    connectElgatoStreamDeckSocket: (
+      inPort: number,
+      inPropertyInspectorUUID: string,
+      inRegisterEvent: string,
+      inInfo: string,
+      inActionInfo: string
+    ) => void
+  }
+}
+
 onMounted(() => {
   updateManifest()
 
-  window.connectElgatoStreamDeckSocket = (inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, inActionInfo) => {
+  window.connectElgatoStreamDeckSocket = (
+    inPort: number,
+    inPropertyInspectorUUID: string,
+    inRegisterEvent: string,
+    inInfo: string,
+    inActionInfo: string
+  ) => {
     $SD = new StreamDeck(inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, inActionInfo)
 
     // Dual State entity (custom icons for on/off)
@@ -340,12 +357,12 @@ onMounted(() => {
       inActionInfoObject['action'] === 'de.perdoctus.streamdeck.homeassistant.dual-state-entity'
     controllerType.value = inActionInfoObject.payload.controller
 
-    $SD.on('globalsettings', (globalSettings) => {
+    $SD.on('globalsettings', (globalSettings: GlobalSettings) => {
       if (globalSettings) {
         serverUrl.value = globalSettings.serverUrl
         accessToken.value = globalSettings.accessToken
 
-        let displayConfigurationFromSettings = globalSettings.displayConfiguration
+        const displayConfigurationFromSettings = globalSettings.displayConfiguration
         if (displayConfigurationFromSettings) {
           displayConfiguration.value = displayConfigurationFromSettings
           if (displayConfigurationFromSettings.urlOverride) {
@@ -359,10 +376,10 @@ onMounted(() => {
       }
     })
 
-    $SD.on('connected', (actionInfo) => {
-      $SD.requestGlobalSettings()
+    $SD.on('connected', (actionInfo: DidReceiveSettingsCommand) => {
+      $SD!.requestGlobalSettings()
 
-      let settings = Settings.parse(actionInfo.payload.settings)
+      const settings = Settings.parse(actionInfo.payload.settings)
 
       entity.value = settings['display']['entityId']
       enableServiceIndicator.value =
@@ -386,7 +403,7 @@ function updateManifest() {
   console.log('Updating manifest.')
   axios
     .get('https://cdn.jsdelivr.net/gh/cgiesche/streamdeck-homeassistant@master/public/config/manifest.yml')
-    .then((response) => (this.manifest = yaml.load(response.data)))
+    .then((response) => (manifest.value = yamlLoad(response.data)))
     .catch((error) => console.log(`Failed to download updated manifest.yml: ${error}`))
 }
 
@@ -395,9 +412,9 @@ const isHaSettingsComplete = computed(() => {
 })
 
 const entityAttributes = computed(() => {
-  let currentEntityState = currentStates.value.find((state) => state.entityId === entity.value)
+  const currentEntityState = currentStates.value.find((state) => state.entityId === entity.value)
   if (currentEntityState && currentEntityState.attributes) {
-    let attributes = currentEntityState.attributes.map((attribute) => `{{${attribute}}}`)
+    const attributes = currentEntityState.attributes.map((attribute) => `{{${attribute}}}`)
     return ['{{state}}', ...attributes]
   }
   return []
@@ -416,14 +433,14 @@ function connectHomeAssistant() {
       accessToken.value,
       () => {
         haConnectionState.value = 'connected'
-        $HA.getStates((states) => {
+        $HA!.getStates((states) => {
           availableEntityDomains.value = Array.from(
-            states.map((state) => state.entity_id.split('.')[0]).reduce((acc, curr) => acc.add(curr), new Set())
+            states.map((state) => state.entity_id.split('.')[0]).reduce((acc, curr) => acc.add(curr), new Set<string>())
           ).sort()
 
           availableEntities.value = states
             .map((state) => {
-              let splittedId = state.entity_id.split('.')
+              const splittedId = state.entity_id.split('.')
               return new Entity(splittedId[0], splittedId[1], state.attributes.friendly_name || state.entity_id)
             })
             .sort((a, b) =>
@@ -437,12 +454,19 @@ function connectHomeAssistant() {
             }
           })
         })
-        $HA.getServices((services) => {
+        $HA!.getServices((services: object) => {
           availableServices.value = Object.entries(services).flatMap((domainServices) => {
             const domain = domainServices[0]
             return Object.entries(domainServices[1]).map((services) => {
-              let serviceName = services[0]
-              let serviceData = services[1]
+              const serviceName = services[0]
+              const serviceData = services[1] as {
+                name: string
+                description: string
+                fields: string
+                target: {
+                  entity: unknown
+                }
+              }
               return new Service(
                 domain,
                 serviceName,
@@ -465,7 +489,7 @@ function connectHomeAssistant() {
       }
     )
   } catch (e) {
-    haError.value = e
+    haError.value = `${e}`
     haConnectionState.value = 'disconnected'
   }
 }
@@ -473,7 +497,7 @@ function connectHomeAssistant() {
 function saveGlobalSettings() {
   haError.value = ''
 
-  let displayConfigurationsSettings = displayConfiguration.value
+  const displayConfigurationsSettings = displayConfiguration.value
 
   // validate custom config
   if (displayConfigurationUrlOverride.value) {
@@ -485,7 +509,7 @@ function saveGlobalSettings() {
     displayConfigurationsSettings.urlOverride = displayConfigurationUrlOverride.value
   }
 
-  $SD.saveGlobalSettings({
+  $SD!.saveGlobalSettings({
     serverUrl: serverUrl.value,
     accessToken: accessToken.value,
     displayConfiguration: displayConfigurationsSettings
@@ -495,7 +519,7 @@ function saveGlobalSettings() {
 }
 
 function saveSettings() {
-  let settings = {
+  const settings = {
     version: 5,
 
     controllerType: controllerType.value,
@@ -522,6 +546,6 @@ function saveSettings() {
     rotationTickBucketSizeMs: rotationTickBucketSizeMs.value
   }
 
-  $SD.saveSettings(settings)
+  $SD!.saveSettings(settings)
 }
 </script>
diff --git a/src/components/PluginComponent.vue b/src/components/PluginComponent.vue
index f11f614..04ea00b 100644
--- a/src/components/PluginComponent.vue
+++ b/src/components/PluginComponent.vue
@@ -2,43 +2,54 @@
   <span>Nothing to see here!</span>
 </template>
 
-<script setup>
-import { StreamDeck } from '@/modules/common/streamdeck'
-import { Homeassistant } from '@/modules/homeassistant/homeassistant'
+<script lang="ts" setup>
+import {
+  type BaseCommand,
+  type DialRotateCommand,
+  type DidReceiveSettingsCommand,
+  type GlobalSettings,
+  StreamDeck,
+  type WillAppearCommand
+} from '@/modules/common/streamdeck'
+import { Homeassistant, type StateMessage } from '@/modules/homeassistant/homeassistant'
 import { SvgUtils } from '@/modules/plugin/svgUtils'
-import nunjucks from 'nunjucks'
-import { Settings } from '@/modules/common/settings'
-import { onMounted, ref } from 'vue'
+import { renderString } from 'nunjucks'
+import { Settings, type SettingsV5 } from '@/modules/common/settings'
+import { onMounted, type Ref, ref } from 'vue'
 import { EntityConfigFactory } from '@/modules/plugin/entityConfigFactoryNg'
+// @ts-expect-error ts-checker doesn't understand yaml imports
 import defaultActiveStates from '../../public/config/active-states.yml'
 import axios from 'axios'
-import yaml from 'js-yaml'
+import { load as yamlLoad } from 'js-yaml'
 
-axios.defaults.headers = {
-  'Cache-Control': 'public, max-age=86400'
-}
+axios.defaults.headers['Cache-Control'] = 'public, max-age=86400'
 
-let entityConfigFactory
+let entityConfigFactory: EntityConfigFactory
 const svgUtils = new SvgUtils()
 
-const $SD = ref(null)
-const $HA = ref(null)
-const $reconnectTimeout = ref({})
-const globalSettings = ref({})
-const actionSettings = ref([])
+const $SD: Ref<StreamDeck | null> = ref(null)
+const $HA: Ref<Homeassistant | null> = ref(null)
+const $reconnectTimeout: Ref<number | null> = ref(null)
+const globalSettings: Ref<GlobalSettings | null> = ref(null)
+const actionSettings: Ref<{ [key: string]: SettingsV5 }> = ref({})
 const buttonLongpressTimeouts = ref(new Map()) //context, timeout
 
 const activeStates = ref(defaultActiveStates)
 
-let rotationTimeout = []
-let rotationAmount = []
-let rotationPercent = []
+const rotationTimeout: { [key: string]: NodeJS.Timeout | null } = {}
+const rotationAmount: { [key: string]: number } = {}
+const rotationPercent: { [key: string]: number } = {}
 
 onMounted(async () => {
-  window.connectElgatoStreamDeckSocket = (inPort, inPluginUUID, inRegisterEvent, inInfo) => {
+  window.connectElgatoStreamDeckSocket = (
+    inPort: number,
+    inPluginUUID: string,
+    inRegisterEvent: string,
+    inInfo: string
+  ) => {
     $SD.value = new StreamDeck(inPort, inPluginUUID, inRegisterEvent, inInfo, '{}')
 
-    $SD.value.on('globalsettings', (inGlobalSettings) => {
+    $SD.value.on('globalsettings', (inGlobalSettings: GlobalSettings) => {
       console.log('Got global settings.')
       globalSettings.value = inGlobalSettings
       entityConfigFactory = new EntityConfigFactory(
@@ -48,19 +59,19 @@ onMounted(async () => {
     })
 
     $SD.value.on('connected', () => {
-      $SD.value.requestGlobalSettings()
+      $SD.value!.requestGlobalSettings()
     })
 
-    $SD.value.on('keyDown', (message) => {
+    $SD.value.on('keyDown', (message: BaseCommand) => {
       buttonDown(message.context)
     })
 
-    $SD.value.on('keyUp', (message) => {
+    $SD.value.on('keyUp', (message: BaseCommand) => {
       buttonUp(message.context)
     })
 
-    $SD.value.on('willAppear', (message) => {
-      let context = message.context
+    $SD.value.on('willAppear', (message: WillAppearCommand) => {
+      const context = message.context
       rotationAmount[context] = 0
       rotationPercent[context] = 0
       actionSettings.value[context] = Settings.parse(message.payload.settings)
@@ -69,16 +80,16 @@ onMounted(async () => {
       }
     })
 
-    $SD.value.on('willDisappear', (message) => {
-      let context = message.context
+    $SD.value.on('willDisappear', (message: BaseCommand) => {
+      const context = message.context
       delete actionSettings.value[context]
     })
 
-    $SD.value.on('dialRotate', (message) => {
-      let context = message.context
-      let settings = actionSettings.value[context]
-      let scaledTicks = message.payload.ticks * (settings.rotationTickMultiplier || 1)
-      let tickBucketSizeMs = settings.rotationTickBucketSizeMs || 300
+    $SD.value.on('dialRotate', (message: DialRotateCommand) => {
+      const context = message.context
+      const settings = actionSettings.value[context]
+      const scaledTicks = message.payload.ticks * (settings.rotationTickMultiplier || 1)
+      const tickBucketSizeMs = settings.rotationTickBucketSizeMs || 300
 
       rotationAmount[context] += scaledTicks
       rotationPercent[context] += scaledTicks
@@ -90,7 +101,7 @@ onMounted(async () => {
 
       if (rotationTimeout[context]) return
 
-      let serviceCall = () => {
+      const serviceCall = () => {
         callService(context, settings.button.serviceRotation, {
           ticks: rotationAmount[context],
           rotationPercent: rotationPercent[context],
@@ -107,22 +118,22 @@ onMounted(async () => {
       }
     })
 
-    $SD.value.on('dialDown', (message) => {
+    $SD.value.on('dialDown', (message: BaseCommand) => {
       buttonDown(message.context)
     })
 
-    $SD.value.on('dialUp', (message) => {
+    $SD.value.on('dialUp', (message: BaseCommand) => {
       buttonUp(message.context)
     })
 
-    $SD.value.on('touchTap', (message) => {
-      let context = message.context
-      let settings = actionSettings.value[context]
+    $SD.value.on('touchTap', (message: BaseCommand) => {
+      const context = message.context
+      const settings = actionSettings.value[context]
       callService(context, settings.button.serviceTap)
     })
 
-    $SD.value.on('didReceiveSettings', (message) => {
-      let context = message.context
+    $SD.value.on('didReceiveSettings', (message: DidReceiveSettingsCommand) => {
+      const context = message.context
       rotationAmount[context] = 0
       actionSettings.value[context] = Settings.parse(message.payload.settings)
       if ($HA.value) {
@@ -138,7 +149,7 @@ async function fetchActiveStates() {
   try {
     axios
       .get('https://cdn.jsdelivr.net/gh/cgiesche/streamdeck-homeassistant@master/public/config/active-states.yml')
-      .then((response) => (activeStates.value = yaml.load(response.data)))
+      .then((response) => (activeStates.value = yamlLoad(response.data)))
       .catch((error) => console.log(`Failed to download updated active-states.json: ${error}`))
   } catch (error) {
     console.log(`Failed to download updated active-states.json: ${error}`)
@@ -147,7 +158,7 @@ async function fetchActiveStates() {
 
 function connectHomeAssistant() {
   console.log('Connecting to Home Assistant')
-  if (globalSettings.value.serverUrl && globalSettings.value.accessToken) {
+  if (globalSettings.value && globalSettings.value.serverUrl && globalSettings.value.accessToken) {
     if ($HA.value) {
       $HA.value.close()
     }
@@ -163,47 +174,55 @@ function connectHomeAssistant() {
 }
 
 const onHAConnected = () => {
-  $HA.value.getStatesDebounced(entityStatesChanged)
-  $HA.value.subscribeEvents(entityStateChanged)
+  $HA.value!.getStatesDebounced(entityStatesChanged)
+  $HA.value!.subscribeEvents(entityStateChanged)
 }
 
-function onHAError(msg) {
+function onHAError(msg: string) {
   showAlert()
   console.log(`Home Assistant connection error: ${msg}`)
-  window.clearTimeout($reconnectTimeout)
+  if ($reconnectTimeout.value) {
+    window.clearTimeout($reconnectTimeout.value)
+  }
   $reconnectTimeout.value = window.setTimeout(connectHomeAssistant, 5000)
 }
 
-function onHAClosed(msg) {
+function onHAClosed(msg: CloseEvent) {
   showAlert()
   console.log(`Home Assistant connection closed, trying to reopen connection: ${msg}`)
-  window.clearTimeout($reconnectTimeout)
+  if ($reconnectTimeout.value) {
+    window.clearTimeout($reconnectTimeout.value)
+  }
   $reconnectTimeout.value = window.setTimeout(connectHomeAssistant, 5000)
 }
 
 function showAlert() {
-  Object.keys(actionSettings.value).forEach((key) => $SD.value.showAlert(key))
+  Object.keys(actionSettings.value).forEach((key) => $SD.value!.showAlert(key))
 }
 
-function entityStatesChanged(event) {
+function entityStatesChanged(event: StateMessage[]) {
   event.forEach(updateState)
 }
 
-function entityStateChanged(event) {
+function entityStateChanged(event: {
+  data: {
+    new_state: StateMessage
+  }
+}) {
   if (event) {
-    let newState = event.data.new_state
+    const newState = event.data.new_state
     updateState(newState)
   }
 }
 
-function updateState(stateMessage) {
+function updateState(stateMessage: StateMessage) {
   if (!stateMessage.entity_id) {
     console.log(`Missing entity_id in updated state: ${stateMessage}`)
     return
   }
 
-  let domain = stateMessage.entity_id.split('.')[0]
-  let changedContexts = Object.keys(actionSettings.value).filter(
+  const domain = stateMessage.entity_id.split('.')[0]
+  const changedContexts = Object.keys(actionSettings.value).filter(
     (key) => actionSettings.value[key].display.entityId === stateMessage.entity_id
   )
 
@@ -217,25 +236,27 @@ function updateState(stateMessage) {
       updateContextState(context, domain, stateMessage)
     } catch (e) {
       console.error(e)
-      $SD.value.setImage(context, null)
-      $SD.value.showAlert(context)
+      $SD.value!.setImage(context, null)
+      $SD.value!.showAlert(context)
     }
   })
 }
 
-function isEncoder(contextSettings) {
+function isEncoder(contextSettings: SettingsV5) {
   return contextSettings.controllerType === 'Encoder'
 }
 
-function updateContextState(currentContext, domain, stateObject) {
-  let contextSettings = actionSettings.value[currentContext]
-  let renderingConfig = entityConfigFactory.determineConfig(domain, stateObject, contextSettings.display)
+function updateContextState(currentContext: string, domain: string, stateObject: StateMessage) {
+  const contextSettings = actionSettings.value[currentContext]
+  const renderingConfig = entityConfigFactory.determineConfig(domain, stateObject, contextSettings.display)
 
   renderingConfig.isAction =
-    contextSettings.button.serviceShortPress.serviceId &&
+    contextSettings.button.serviceShortPress.serviceId !== null &&
+    contextSettings.button.serviceShortPress.serviceId !== '' &&
     (contextSettings.display.enableServiceIndicator === undefined || contextSettings.display.enableServiceIndicator) // undefined = on by default
   renderingConfig.isMultiAction =
-    contextSettings.button.serviceLongPress.serviceId &&
+    contextSettings.button.serviceLongPress.serviceId !== null &&
+    contextSettings.button.serviceLongPress.serviceId !== '' &&
     (contextSettings.display.enableServiceIndicator === undefined || contextSettings.display.enableServiceIndicator) // undefined = on by default
 
   if (renderingConfig.rotationPercent !== undefined) {
@@ -243,9 +264,9 @@ function updateContextState(currentContext, domain, stateObject) {
   }
 
   if (contextSettings.display.useCustomTitle) {
-    let state = stateObject.state
-    let stateAttributes = stateObject.attributes
-    renderingConfig.customTitle = nunjucks.renderString(contextSettings.display.buttonTitle, {
+    const state = stateObject.state
+    const stateAttributes = stateObject.attributes
+    renderingConfig.customTitle = renderString(contextSettings.display.buttonTitle, {
       ...{ state },
       ...stateAttributes
     })
@@ -259,14 +280,18 @@ function updateContextState(currentContext, domain, stateObject) {
     if (!renderingConfig.feedbackLayout) {
       renderingConfig.feedbackLayout = '$A1'
     }
-    $SD.value.setFeedbackLayout(currentContext, { layout: renderingConfig.feedbackLayout })
+    $SD.value!.setFeedbackLayout(currentContext, { layout: renderingConfig.feedbackLayout })
 
     if (!renderingConfig.feedback) {
-      renderingConfig.feedback = {}
+      renderingConfig.feedback = {
+        title: '',
+        icon: null,
+        value: ''
+      }
     }
     renderingConfig.feedback.title = renderingConfig.customTitle ? renderingConfig.customTitle : ''
     renderingConfig.feedback.icon =
-      'data:image/svg+xml;charset=utf8,' + svgUtils.renderIconSVG(renderingConfig.icon, renderingConfig.color)
+      'data:image/svg+xml;charset=utf8,' + svgUtils.renderIconSVG(renderingConfig.icon, renderingConfig.color!)
     if (renderingConfig.feedback.value === undefined) {
       renderingConfig.feedback.value = svgUtils
         .renderTemplates(renderingConfig.labelTemplates, {
@@ -275,28 +300,30 @@ function updateContextState(currentContext, domain, stateObject) {
         })
         .join(' ')
     }
-    $SD.value.setFeedback(currentContext, renderingConfig.feedback)
+    $SD.value!.setFeedback(currentContext, renderingConfig.feedback)
   } else if (contextSettings.display.useStateImagesForOnOffStates) {
     if (renderingConfig.customTitle) {
-      $SD.value.setTitle(currentContext, renderingConfig.customTitle)
+      $SD.value!.setTitle(currentContext, renderingConfig.customTitle)
     }
     if (activeStates.value.indexOf(stateObject.state) !== -1) {
       console.log('Setting state of ' + currentContext + ' to 1')
-      $SD.value.setState(currentContext, 1)
+      $SD.value!.setState(currentContext, 1)
     } else {
       console.log('Setting state of ' + currentContext + ' to 0')
-      $SD.value.setState(currentContext, 0)
+      $SD.value!.setState(currentContext, 0)
     }
   } else {
     if (renderingConfig.customTitle) {
-      $SD.value.setTitle(currentContext, renderingConfig.customTitle)
+      $SD.value!.setTitle(currentContext, renderingConfig.customTitle)
     }
 
     renderingConfig.isAction =
-      contextSettings.button.serviceShortPress.serviceId &&
+      contextSettings.button.serviceShortPress.serviceId !== null &&
+      contextSettings.button.serviceShortPress.serviceId !== '' &&
       (contextSettings.display.enableServiceIndicator === undefined || contextSettings.display.enableServiceIndicator) // undefined = on by default
     renderingConfig.isMultiAction =
-      contextSettings.button.serviceLongPress.serviceId &&
+      contextSettings.button.serviceLongPress.serviceId !== null &&
+      contextSettings.button.serviceLongPress.serviceId !== '' &&
       (contextSettings.display.enableServiceIndicator === undefined || contextSettings.display.enableServiceIndicator) // undefined = on by default
 
     if (!renderingConfig.color) {
@@ -311,22 +338,22 @@ function updateContextState(currentContext, domain, stateObject) {
   }
 }
 
-function setButtonSVG(svg, changedContext) {
+function setButtonSVG(svg: string, changedContext: string) {
   const image = 'data:image/svg+xml;,' + svg
   if (actionSettings.value[changedContext].controllerType === 'Encoder') {
-    $SD.value.setFeedbackLayout(changedContext, { layout: '$A0' })
-    $SD.value.setFeedback(changedContext, { 'full-canvas': image, canvas: null, title: '' })
+    $SD.value!.setFeedbackLayout(changedContext, { layout: '$A0' })
+    $SD.value!.setFeedback(changedContext, { 'full-canvas': image, canvas: null, title: '' })
   } else {
-    $SD.value.setImage(changedContext, image)
+    $SD.value!.setImage(changedContext, image)
   }
 }
 
-function buttonDown(context) {
+function buttonDown(context: string) {
   const timeout = setTimeout(buttonLongPress, 300, context)
   buttonLongpressTimeouts.value.set(context, timeout)
 }
 
-function buttonUp(context) {
+function buttonUp(context: string) {
   // If "long press timeout" is still present, we perform a normal press
   const lpTimeout = buttonLongpressTimeouts.value.get(context)
   if (lpTimeout) {
@@ -336,14 +363,14 @@ function buttonUp(context) {
   }
 }
 
-function buttonShortPress(context) {
-  let settings = actionSettings.value[context]
+function buttonShortPress(context: string) {
+  const settings = actionSettings.value[context]
   callService(context, settings.button.serviceShortPress)
 }
 
-function buttonLongPress(context) {
+function buttonLongPress(context: string) {
   buttonLongpressTimeouts.value.delete(context)
-  let settings = actionSettings.value[context]
+  const settings = actionSettings.value[context]
   if (settings.button.serviceLongPress.serviceId) {
     callService(context, settings.button.serviceLongPress)
   } else {
@@ -351,7 +378,11 @@ function buttonLongPress(context) {
   }
 }
 
-function callService(context, serviceToCall, serviceDataAttributes = {}) {
+function callService(
+  context: string,
+  serviceToCall: { serviceId: string | null; serviceData: string; entityId: string },
+  serviceDataAttributes = {}
+) {
   if ($HA.value) {
     if (serviceToCall['serviceId']) {
       try {
@@ -359,14 +390,14 @@ function callService(context, serviceToCall, serviceDataAttributes = {}) {
 
         let serviceData = null
         if (serviceToCall.serviceData) {
-          let renderedServiceData = nunjucks.renderString(serviceToCall.serviceData, serviceDataAttributes)
+          const renderedServiceData = renderString(serviceToCall.serviceData, serviceDataAttributes)
           serviceData = JSON.parse(renderedServiceData)
         }
 
         $HA.value.callService(serviceIdParts[1], serviceIdParts[0], serviceToCall.entityId, serviceData)
       } catch (e) {
         console.error(e)
-        $SD.value.showAlert(context)
+        $SD.value!.showAlert(context)
       }
     }
   }
diff --git a/src/components/ServiceCallConfiguration.vue b/src/components/ServiceCallConfiguration.vue
index 5c968c8..cc15fd8 100644
--- a/src/components/ServiceCallConfiguration.vue
+++ b/src/components/ServiceCallConfiguration.vue
@@ -8,6 +8,7 @@
           v-model="selectedDomain"
           class="form-select form-select-sm"
           @change="
+            // prettier-ignore
             update('serviceId', null);
             update('entityId', null)
           "
@@ -20,6 +21,7 @@
           class="btn btn-sm btn-outline-secondary"
           type="button"
           @click="
+            // prettier-ignore
             selectedDomain = '';
             clear('serviceId', 'entityId', 'serviceData')
           "
@@ -36,7 +38,7 @@
           id="service"
           :value="modelValue.serviceId"
           class="form-select form-select-sm"
-          @change="update('serviceId', $event.target.value)"
+          @change="update('serviceId', ($event.target as HTMLSelectElement).value)"
         >
           <option
             v-for="domainService in domainServices"
@@ -77,7 +79,7 @@
   "option": "value"
 }'
         rows="5"
-        @input="update('serviceData', $event.target.value)"
+        @input="update('serviceData', ($event.target as HTMLTextAreaElement).value)"
       />
       <div class="invalid-feedback" v-if="serviceDataInvalidFeedback">
         {{ serviceDataInvalidFeedback }}
@@ -101,12 +103,15 @@
   </div>
 </template>
 
-<script setup>
-import { computed, onMounted, ref } from 'vue'
-import nunjucks from 'nunjucks'
+<script lang="ts" setup>
+import { computed, onMounted, type PropType, ref } from 'vue'
+import { renderString } from 'nunjucks'
 import EntitySelection from '@/components/EntitySelection.vue'
+import type { Service } from '@/modules/pi/service'
+import type { Entity } from '@/modules/pi/entity'
 
-const titleSort = (s1, s2) => (s1.title.toLowerCase() > s2.title.toLowerCase() ? 1 : -1)
+const titleSort = (s1: { title: string }, s2: { title: string }) =>
+  s1.title.toLowerCase() > s2.title.toLowerCase() ? 1 : -1
 
 const props = defineProps({
   modelValue: {
@@ -120,11 +125,11 @@ const props = defineProps({
   },
   availableServices: {
     required: true,
-    type: [] // Service[]
+    type: Object as PropType<Array<Service>>
   },
   availableEntities: {
     required: true,
-    type: [] // Entity[]
+    type: Object as PropType<Array<Entity>>
   }
 })
 
@@ -138,13 +143,13 @@ onMounted(() => {
   }
 })
 
-function update(key, value) {
+function update(key: string, value: unknown) {
   console.log(`Update ${key} to ${JSON.stringify(value)}`)
   emit('update:modelValue', { ...props.modelValue, [key]: value })
 }
 
-function clear(...keys) {
-  let clearedValue = { ...props.modelValue }
+function clear(...keys: string[]) {
+  const clearedValue = { ...props.modelValue }
   keys.forEach((key) => delete clearedValue[key])
   emit('update:modelValue', clearedValue)
 }
@@ -170,11 +175,15 @@ const domainEntities = computed(() => {
   if (!props.availableServices || !props.availableEntities || !props.modelValue || !props.modelValue.serviceId) {
     return []
   }
-  let selectedService = props.availableServices.filter((service) => service.serviceId === props.modelValue.serviceId)[0]
+  const selectedService = props.availableServices.filter(
+    (service) => service.serviceId === props.modelValue.serviceId
+  )[0]
   if (selectedService && selectedService.target && selectedService.target.entity) {
     // target.entity may contain a single or an array of entities. Make sure we always work with array.
-    let targetEntities = ensureArray(selectedService.target.entity)
-    let targetDomains = targetEntities.filter((entity) => entity.domain).flatMap((entity) => ensureArray(entity.domain))
+    const targetEntities = ensureArray(selectedService.target.entity)
+    const targetDomains = targetEntities
+      .filter((entity) => entity.domain)
+      .flatMap((entity) => ensureArray(entity.domain))
     if (targetDomains.length > 0) {
       return props.availableEntities.filter((entity) => targetDomains.includes(entity.domain)).sort(titleSort)
     } else {
@@ -185,12 +194,12 @@ const domainEntities = computed(() => {
 })
 
 const serviceDataInvalidFeedback = computed(() => {
-  let serviceDataString = props.modelValue.serviceData
+  const serviceDataString = props.modelValue.serviceData
   if (!serviceDataString) {
     return ''
   }
   try {
-    const renderedServiceData = nunjucks.renderString(serviceDataString, {
+    const renderedServiceData = renderString(serviceDataString, {
       ticks: 5,
       rotationPercent: 100,
       rotationAbsolute: 100
@@ -207,7 +216,9 @@ const dataProperties = computed(() => {
   if (!(props.availableServices.length && props.availableEntities && props.modelValue && props.modelValue.serviceId)) {
     return []
   }
-  let selectedService = props.availableServices.filter((service) => service.serviceId === props.modelValue.serviceId)[0]
+  const selectedService = props.availableServices.filter(
+    (service) => service.serviceId === props.modelValue.serviceId
+  )[0]
   if (!selectedService || !selectedService.dataFields) {
     return []
   }
@@ -219,7 +230,7 @@ const dataProperties = computed(() => {
   })
 })
 
-function ensureArray(input) {
+function ensureArray(input: unknown) {
   return Array.isArray(input) ? input : [input]
 }
 </script>
diff --git a/src/components/accordeon/BootstrapAccordeon.vue b/src/components/accordeon/BootstrapAccordeon.vue
index bca557e..8b27243 100644
--- a/src/components/accordeon/BootstrapAccordeon.vue
+++ b/src/components/accordeon/BootstrapAccordeon.vue
@@ -3,7 +3,7 @@
     <slot />
   </div>
 </template>
-<script setup>
+<script lang="ts" setup>
 defineProps({
   id: {
     type: String,
diff --git a/src/components/accordeon/BootstrapAccordeonItem.vue b/src/components/accordeon/BootstrapAccordeonItem.vue
index 3e43857..45640b8 100644
--- a/src/components/accordeon/BootstrapAccordeonItem.vue
+++ b/src/components/accordeon/BootstrapAccordeonItem.vue
@@ -25,7 +25,7 @@
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 defineProps({
   accordeonId: {
     type: String,
diff --git a/src/modules/common/settings.js b/src/modules/common/settings.js
deleted file mode 100644
index 300a753..0000000
--- a/src/modules/common/settings.js
+++ /dev/null
@@ -1,125 +0,0 @@
-export class Settings {
-  static parse(settings) {
-    if (!settings.version) {
-      settings.version = 1
-    }
-
-    console.log(`Parsing version ${settings.version} settings: ${JSON.stringify(settings)}`)
-
-    if (settings.version === 1) {
-      const settingsV2 = {
-        version: 2,
-        display: {
-          domain: settings['domain'],
-          entityId: settings['entityId'],
-          useCustomTitle: settings['useCustomTitle'],
-          buttonTitle: settings['buttonTitle'] || '{{friendly_name}}',
-          enableServiceIndicator:
-            settings['enableServiceIndicator'] || settings['enableServiceIndicator'] === undefined,
-          hideIcon: settings['hideIcon'],
-          useCustomButtonLabels: settings['useCustomButtonLabels'],
-          buttonLabels: settings['buttonLabels'],
-          useStateImagesForOnOffStates: settings['useStateImagesForOnOffStates'] // determined by action ID (manifest)
-        },
-        button: {
-          service: {
-            domain: '',
-            name: '',
-            data: ''
-          },
-          serviceLongPress: {
-            domain: '',
-            name: '',
-            data: ''
-          }
-        }
-      }
-
-      if (settings['service']) {
-        settingsV2.button.service.domain = settings['domain']
-        settingsV2.button.service.name = settings['service'].id
-        settingsV2.button.service.data = settings['service'].data
-      }
-      if (settings['serviceLongPress']) {
-        settingsV2.button.serviceLongPress.domain = settings['domain']
-        settingsV2.button.serviceLongPress.name = settings['serviceLongPress'].id
-        settingsV2.button.serviceLongPress.data = settings['serviceLongPress'].data
-      }
-
-      return this.parse(settingsV2)
-    }
-
-    if (settings.version === 2) {
-      const settingsV3 = { ...settings }
-      settingsV3.version = 3
-
-      if (settings.button.service.name) {
-        settingsV3.button.serviceShortPress = {
-          serviceId: settings.button.service.domain + '.' + settings.button.service.name,
-          entityId: settings.display.entityId,
-          serviceData: settings.button.service.data
-        }
-      } else {
-        settingsV3.button.serviceShortPress = {
-          serviceId: '',
-          entityId: '',
-          serviceData: ''
-        }
-      }
-
-      if (settings.button.serviceLongPress.name) {
-        settingsV3.button.serviceLongPress = {
-          serviceId:
-            settings.button.serviceLongPress.domain + '.' + settings.button.serviceLongPress.name,
-          entityId: settings.display.entityId,
-          serviceData: settings.button.serviceLongPress.data
-        }
-      } else {
-        settingsV3.button.serviceLongPress = {
-          serviceId: '',
-          entityId: '',
-          serviceData: ''
-        }
-      }
-
-      delete settingsV3.button.service
-
-      return this.parse(settingsV3)
-    }
-
-    if (settings.version === 3) {
-      const settingsV4 = { ...settings }
-      settingsV4.version = 4
-
-      settingsV4.button.serviceRotation = {
-        serviceId: '',
-        entityId: '',
-        serviceData: ''
-      }
-      settingsV4.button.serviceTap = {
-        serviceId: '',
-        entityId: '',
-        serviceData: ''
-      }
-      settingsV4.controllerType = 'Keypad'
-      settingsV4.rotationTickMultiplier = 1
-      settingsV4.rotationTickBucketSizeMs = 300
-
-      return this.parse(settingsV4)
-    }
-
-    if (settings.version === 4) {
-      let settingsV5 = { ...settings }
-      settingsV5.version = 5
-
-      settingsV5.display.iconSettings = settingsV5.display.hideIcon ? 'HIDE' : 'PREFER_PLUGIN'
-      delete settingsV5.display.hideIcon
-
-      return this.parse(settingsV5)
-    }
-
-    if (settings.version === 5) {
-      return settings
-    }
-  }
-}
diff --git a/src/modules/common/settings.ts b/src/modules/common/settings.ts
new file mode 100644
index 0000000..c6bf541
--- /dev/null
+++ b/src/modules/common/settings.ts
@@ -0,0 +1,288 @@
+interface SettingsV1 {
+  version: 1 | null
+  domain: string
+  entityId: string
+  useCustomTitle: boolean
+  buttonTitle: string
+  enableServiceIndicator: boolean
+  hideIcon: boolean
+  useCustomButtonLabels: boolean
+  buttonLabels: string
+  useStateImagesForOnOffStates: boolean
+  service: {
+    id: string
+    data: string
+  }
+  serviceLongPress: {
+    id: string
+    data: string
+  }
+}
+
+interface SettingsV2 {
+  version: 2
+  display: {
+    domain: string
+    entityId: string
+    useCustomTitle: boolean
+    buttonTitle: string
+    enableServiceIndicator: boolean
+    hideIcon: boolean
+    useCustomButtonLabels: boolean
+    buttonLabels: string
+    useStateImagesForOnOffStates: boolean
+  }
+  button: {
+    service: {
+      domain: string
+      name: string
+      data: string
+    }
+    serviceLongPress: {
+      domain: string
+      name: string
+      data: string
+    }
+  }
+}
+
+interface SettingsV3 {
+  version: 3
+  display: {
+    domain: string
+    entityId: string
+    useCustomTitle: boolean
+    buttonTitle: string
+    enableServiceIndicator: boolean
+    hideIcon: boolean
+    useCustomButtonLabels: boolean
+    buttonLabels: string
+    useStateImagesForOnOffStates: boolean
+  }
+  button: {
+    serviceShortPress: {
+      serviceId: string
+      entityId: string
+      serviceData: string
+    }
+    serviceLongPress: {
+      serviceId: string
+      entityId: string
+      serviceData: string
+    }
+  }
+}
+
+interface SettingsV4 {
+  version: 4
+  display: {
+    domain: string
+    entityId: string
+    useCustomTitle: boolean
+    buttonTitle: string
+    enableServiceIndicator: boolean
+    hideIcon: boolean | undefined
+    useCustomButtonLabels: boolean
+    buttonLabels: string
+    useStateImagesForOnOffStates: boolean
+  }
+  button: {
+    serviceShortPress: {
+      serviceId: string
+      entityId: string
+      serviceData: string
+    }
+    serviceLongPress: {
+      serviceId: string
+      entityId: string
+      serviceData: string
+    }
+    serviceRotation: {
+      serviceId: string
+      entityId: string
+      serviceData: string
+    }
+    serviceTap: {
+      serviceId: string
+      entityId: string
+      serviceData: string
+    }
+  }
+  controllerType: string
+  rotationTickMultiplier: number
+  rotationTickBucketSizeMs: number
+}
+
+export interface SettingsV5 {
+  version: 5
+  display: {
+    domain: string
+    entityId: string
+    useCustomTitle: boolean
+    buttonTitle: string
+    enableServiceIndicator: boolean
+    useCustomButtonLabels: boolean
+    buttonLabels: string
+    useStateImagesForOnOffStates: boolean
+    iconSettings: string
+  }
+  button: {
+    serviceShortPress: {
+      serviceId: string
+      entityId: string
+      serviceData: string
+    }
+    serviceLongPress: {
+      serviceId: string
+      entityId: string
+      serviceData: string
+    }
+    serviceRotation: {
+      serviceId: string
+      entityId: string
+      serviceData: string
+    }
+    serviceTap: {
+      serviceId: string
+      entityId: string
+      serviceData: string
+    }
+  }
+  controllerType: string
+  rotationTickMultiplier: number
+  rotationTickBucketSizeMs: number
+}
+
+export type SettingsType = SettingsV1 | SettingsV2 | SettingsV3 | SettingsV4 | SettingsV5
+
+export class Settings {
+  static parse(settings: SettingsType): SettingsV5 {
+    console.log(`Parsing version ${settings.version} settings: ${JSON.stringify(settings)}`)
+
+    if (!settings.version || settings.version === 1) {
+      const settingsV2: SettingsV2 = {
+        version: 2,
+        display: {
+          domain: settings.domain,
+          entityId: settings.entityId,
+          useCustomTitle: settings.useCustomTitle,
+          buttonTitle: settings.buttonTitle || '{{friendly_name}}',
+          enableServiceIndicator:
+            settings.enableServiceIndicator || settings.enableServiceIndicator === undefined,
+          hideIcon: settings.hideIcon,
+          useCustomButtonLabels: settings.useCustomButtonLabels,
+          buttonLabels: settings.buttonLabels,
+          useStateImagesForOnOffStates: settings.useStateImagesForOnOffStates // determined by action ID (manifest)
+        },
+        button: {
+          service: {
+            domain: '',
+            name: '',
+            data: ''
+          },
+          serviceLongPress: {
+            domain: '',
+            name: '',
+            data: ''
+          }
+        }
+      }
+
+      if (settings.service) {
+        settingsV2.button.service.domain = settings.domain
+        settingsV2.button.service.name = settings.service.id
+        settingsV2.button.service.data = settings.service.data
+      }
+      if (settings.serviceLongPress) {
+        settingsV2.button.serviceLongPress.domain = settings.domain
+        settingsV2.button.serviceLongPress.name = settings.serviceLongPress.id
+        settingsV2.button.serviceLongPress.data = settings.serviceLongPress.data
+      }
+
+      return this.parse(settingsV2)
+    }
+
+    if (settings.version === 2) {
+      const settingsV3: SettingsV3 = {
+        version: 3,
+        display: settings.display,
+        button: {
+          serviceShortPress: {
+            serviceId: '',
+            entityId: '',
+            serviceData: ''
+          },
+          serviceLongPress: {
+            serviceId: '',
+            entityId: '',
+            serviceData: ''
+          }
+        }
+      }
+
+      if (settings.button.service.name) {
+        settingsV3.button.serviceShortPress = {
+          serviceId: settings.button.service.domain + '.' + settings.button.service.name,
+          entityId: settings.display.entityId,
+          serviceData: settings.button.service.data
+        }
+      }
+
+      if (settings.button.serviceLongPress.name) {
+        settingsV3.button.serviceLongPress = {
+          serviceId:
+            settings.button.serviceLongPress.domain + '.' + settings.button.serviceLongPress.name,
+          entityId: settings.display.entityId,
+          serviceData: settings.button.serviceLongPress.data
+        }
+      }
+
+      return this.parse(settingsV3)
+    }
+
+    if (settings.version === 3) {
+      const settingsV4: SettingsV4 = {
+        ...settings,
+        version: 4,
+        button: {
+          ...settings.button,
+          serviceRotation: {
+            serviceId: '',
+            entityId: '',
+            serviceData: ''
+          },
+          serviceTap: {
+            serviceId: '',
+            entityId: '',
+            serviceData: ''
+          }
+        },
+        controllerType: 'Keypad',
+        rotationTickMultiplier: 1,
+        rotationTickBucketSizeMs: 300
+      }
+
+      return this.parse(settingsV4)
+    }
+
+    if (settings.version === 4) {
+      delete settings.display.hideIcon
+      const settingsV5: SettingsV5 = {
+        ...settings,
+        version: 5,
+        display: {
+          ...settings.display,
+          iconSettings: settings.display.hideIcon ? 'HIDE' : 'PREFER_PLUGIN'
+        }
+      }
+
+      return this.parse(settingsV5)
+    }
+
+    if (settings.version === 5) {
+      return settings
+    } else {
+      throw new Error(`Unsupported settings version: ${settings.version}`)
+    }
+  }
+}
diff --git a/src/modules/common/streamdeck.js b/src/modules/common/streamdeck.ts
similarity index 64%
rename from src/modules/common/streamdeck.js
rename to src/modules/common/streamdeck.ts
index 40fe6db..9a581d0 100644
--- a/src/modules/common/streamdeck.js
+++ b/src/modules/common/streamdeck.ts
@@ -1,13 +1,62 @@
+import type { SettingsType } from '@/modules/common/settings'
+
+export interface BaseCommand {
+  context: string
+}
+
+export interface WillAppearCommand extends BaseCommand {
+  payload: {
+    settings: SettingsType
+  }
+}
+
+export interface DialRotateCommand extends BaseCommand {
+  payload: {
+    ticks: number
+  }
+}
+
+export interface DidReceiveSettingsCommand extends BaseCommand {
+  payload: {
+    settings: SettingsType
+  }
+}
+
+export interface GlobalSettings {
+  serverUrl: string
+  accessToken: string
+  displayConfiguration: {
+    url: string
+    urlOverride: string
+  }
+}
+
 export class StreamDeck {
-  constructor(inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, inActionInfo) {
-    let actionInfo = JSON.parse(inActionInfo)
+  propertyInspectorUUID: string
+  events: Readonly<{
+    on: (name: string, fn: (data: never) => void) => unknown
+    has: (name: string) => boolean
+    emit: (name: string, data: object) => false | void
+    eventList: Map<string, unknown>
+  }>
+  streamDeckWebsocket: WebSocket
+  on: (evt: string, fn: (data: never) => void) => unknown
+
+  constructor(
+    inPort: number,
+    inPropertyInspectorUUID: string,
+    inRegisterEvent: string,
+    inInfo: string,
+    inActionInfo: string
+  ) {
+    const actionInfo = JSON.parse(inActionInfo)
 
     this.propertyInspectorUUID = inPropertyInspectorUUID
     this.events = ELGEvents.eventEmitter()
 
     this.streamDeckWebsocket = new WebSocket('ws://localhost:' + inPort)
     this.streamDeckWebsocket.onopen = () => {
-      let json = {
+      const json = {
         event: inRegisterEvent,
         uuid: inPropertyInspectorUUID
       }
@@ -18,7 +67,7 @@ export class StreamDeck {
     this.on = (evt, fn) => this.events.on(evt, fn)
 
     this.streamDeckWebsocket.onmessage = (evt) => {
-      let incomingEvent = JSON.parse(evt.data)
+      const incomingEvent = JSON.parse(evt.data)
       switch (incomingEvent.event) {
         case 'didReceiveGlobalSettings':
           this.events.emit('globalsettings', incomingEvent.payload['settings'])
@@ -64,15 +113,15 @@ export class StreamDeck {
   }
 
   requestGlobalSettings() {
-    let getGlobalSettingsMessage = {
+    const getGlobalSettingsMessage = {
       event: 'getGlobalSettings',
       context: this.propertyInspectorUUID
     }
     this.streamDeckWebsocket.send(JSON.stringify(getGlobalSettingsMessage))
   }
 
-  saveGlobalSettings(payload) {
-    let message = {
+  saveGlobalSettings(payload: unknown) {
+    const message = {
       event: 'setGlobalSettings',
       context: this.propertyInspectorUUID,
       payload: payload
@@ -81,8 +130,8 @@ export class StreamDeck {
     this.streamDeckWebsocket.send(JSON.stringify(message))
   }
 
-  saveSettings(actionSettings) {
-    let message = {
+  saveSettings(actionSettings: unknown) {
+    const message = {
       event: 'setSettings',
       context: this.propertyInspectorUUID,
       payload: actionSettings
@@ -90,8 +139,8 @@ export class StreamDeck {
     this.streamDeckWebsocket.send(JSON.stringify(message))
   }
 
-  setTitle(context, title) {
-    let message = {
+  setTitle(context: unknown, title: string) {
+    const message = {
       event: 'setTitle',
       context: context,
       payload: {
@@ -102,8 +151,8 @@ export class StreamDeck {
     this.streamDeckWebsocket.send(JSON.stringify(message))
   }
 
-  setImage(context, image) {
-    let message = {
+  setImage(context: unknown, image: unknown) {
+    const message = {
       event: 'setImage',
       context: context,
       payload: {
@@ -116,8 +165,8 @@ export class StreamDeck {
     this.streamDeckWebsocket.send(JSON.stringify(message))
   }
 
-  setFeedback(context, payload) {
-    let message = {
+  setFeedback(context: unknown, payload: unknown) {
+    const message = {
       event: 'setFeedback',
       context: context,
       payload: payload
@@ -126,8 +175,8 @@ export class StreamDeck {
     this.streamDeckWebsocket.send(JSON.stringify(message))
   }
 
-  setFeedbackLayout(context, payload) {
-    let message = {
+  setFeedbackLayout(context: unknown, payload: unknown) {
+    const message = {
       event: 'setFeedbackLayout',
       context: context,
       payload: payload
@@ -136,8 +185,8 @@ export class StreamDeck {
     this.streamDeckWebsocket.send(JSON.stringify(message))
   }
 
-  showAlert(context) {
-    let message = {
+  showAlert(context: unknown) {
+    const message = {
       event: 'showAlert',
       context: context
     }
@@ -145,8 +194,8 @@ export class StreamDeck {
     this.streamDeckWebsocket.send(JSON.stringify(message))
   }
 
-  showOk(context) {
-    let message = {
+  showOk(context: unknown) {
+    const message = {
       event: 'showOk',
       context: context
     }
@@ -154,8 +203,8 @@ export class StreamDeck {
     this.streamDeckWebsocket.send(JSON.stringify(message))
   }
 
-  setState(context, number) {
-    let message = {
+  setState(context: unknown, number: unknown) {
+    const message = {
       event: 'setState',
       context: context,
       payload: {
@@ -166,8 +215,8 @@ export class StreamDeck {
     this.streamDeckWebsocket.send(JSON.stringify(message))
   }
 
-  log(message) {
-    let messageEvent = {
+  log(message: unknown) {
+    const messageEvent = {
       event: 'logMessage',
       payload: {
         message: message
@@ -182,30 +231,31 @@ const ELGEvents = {
   eventEmitter: function () {
     const eventList = new Map()
 
-    const on = (name, fn) => {
+    const on = (name: string, fn: unknown) => {
       if (!eventList.has(name)) eventList.set(name, ELGEvents.pubSub())
 
       return eventList.get(name).sub(fn)
     }
 
-    const has = (name) => eventList.has(name)
+    const has = (name: string) => eventList.has(name)
 
-    const emit = (name, data) => eventList.has(name) && eventList.get(name).pub(data)
+    const emit = (name: string, data: unknown) =>
+      eventList.has(name) && eventList.get(name).pub(data)
 
     return Object.freeze({ on, has, emit, eventList })
   },
 
   pubSub: function pubSub() {
-    const subscribers = new Set()
+    const subscribers = new Set<(value: unknown) => unknown>()
 
-    const sub = (fn) => {
+    const sub = (fn: (value: unknown) => unknown) => {
       subscribers.add(fn)
       return () => {
         subscribers.delete(fn)
       }
     }
 
-    const pub = (data) => subscribers.forEach((fn) => fn(data))
+    const pub = (data: unknown) => subscribers.forEach((fn) => fn(data))
     return Object.freeze({ pub, sub })
   }
 }
diff --git a/src/modules/common/utils.js b/src/modules/common/utils.ts
similarity index 83%
rename from src/modules/common/utils.js
rename to src/modules/common/utils.ts
index 0a490e0..dbf061a 100644
--- a/src/modules/common/utils.js
+++ b/src/modules/common/utils.ts
@@ -1,6 +1,7 @@
 export const ObjectUtils = {
-  paths: (object) => {
-    let paths = []
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  paths: (object: any) => {
+    const paths: string[] = []
     Object.keys(object).forEach((key) => {
       let keyPath = key
       if (Array.isArray(object)) {
diff --git a/src/modules/homeassistant/actions/action.js b/src/modules/homeassistant/actions/action.ts
similarity index 100%
rename from src/modules/homeassistant/actions/action.js
rename to src/modules/homeassistant/actions/action.ts
diff --git a/src/modules/homeassistant/actions/service-action.js b/src/modules/homeassistant/actions/service-action.ts
similarity index 89%
rename from src/modules/homeassistant/actions/service-action.js
rename to src/modules/homeassistant/actions/service-action.ts
index 658aaf1..e77a835 100644
--- a/src/modules/homeassistant/actions/service-action.js
+++ b/src/modules/homeassistant/actions/service-action.ts
@@ -4,6 +4,10 @@ import { Action } from '@/modules/homeassistant/actions/action'
  * ServiceAction, extending Action, facilitates interactions with HomeAssistant services.
  */
 export class ServiceAction extends Action {
+  service: string
+  data: unknown
+  target: unknown
+
   /**
    * Constructs a ServiceAction instance.
    * @param {string} domain - Service domain, must be a non-empty string.
@@ -13,7 +17,7 @@ export class ServiceAction extends Action {
    * @throws {Error} if 'domain' or 'service' are empty or not strings.
    * @throws {TypeError} if 'entity_id' is not an array or 'serviceData' is not an object.
    */
-  constructor(domain, service, entity_id, serviceData) {
+  constructor(domain: string, service: string, entity_id: unknown[] | null, serviceData: unknown) {
     super()
 
     if (typeof domain !== 'string' || !domain.trim()) {
diff --git a/src/modules/homeassistant/commands/command.js b/src/modules/homeassistant/commands/command.ts
similarity index 93%
rename from src/modules/homeassistant/commands/command.js
rename to src/modules/homeassistant/commands/command.ts
index 5831090..2065aff 100644
--- a/src/modules/homeassistant/commands/command.js
+++ b/src/modules/homeassistant/commands/command.ts
@@ -3,6 +3,9 @@
  * that can be used to interact with the HomeAssistant WebSocket API.
  */
 export class Command {
+  id: number
+  type: string
+
   /**
    * Constructs a Command instance.
    * @param {number} requestId - The unique identifier for the command request.
@@ -11,7 +14,7 @@ export class Command {
    * @throws {Error} If the requestId is not a non-negative number.
    * @throws {Error} If the type is not a non-empty string.
    */
-  constructor(requestId, type) {
+  constructor(requestId: number, type: string) {
     // Prevent direct instantiation of this abstract class.
     if (new.target === Command) {
       throw new TypeError('Cannot instantiate abstract class Command directly')
diff --git a/src/modules/homeassistant/commands/execute-script-command.js b/src/modules/homeassistant/commands/execute-script-command.ts
similarity index 93%
rename from src/modules/homeassistant/commands/execute-script-command.js
rename to src/modules/homeassistant/commands/execute-script-command.ts
index c8e2a2e..56f786c 100644
--- a/src/modules/homeassistant/commands/execute-script-command.js
+++ b/src/modules/homeassistant/commands/execute-script-command.ts
@@ -9,6 +9,8 @@ import { Action } from '@/modules/homeassistant/actions/action'
  * This enhancement enables more dynamic and context-sensitive operations within HomeAssistant.
  */
 export class ExecuteScriptCommand extends Command {
+  sequence: Action[]
+
   /**
    * Constructs a CallExecuteScriptCommand instance.
    *
@@ -16,7 +18,7 @@ export class ExecuteScriptCommand extends Command {
    * @param {Action[]} [actions=[]] - Array of ScriptCommand instances. Optional, defaults to empty.
    * @throws {TypeError} if actions is not an array or has non-Action elements.
    */
-  constructor(requestId, actions = []) {
+  constructor(requestId: number, actions: Action[] = []) {
     super(requestId, 'execute_script')
 
     if (!Array.isArray(actions)) {
diff --git a/src/modules/homeassistant/commands/get-services-command.js b/src/modules/homeassistant/commands/get-services-command.ts
similarity index 92%
rename from src/modules/homeassistant/commands/get-services-command.js
rename to src/modules/homeassistant/commands/get-services-command.ts
index 0141041..9b155ef 100644
--- a/src/modules/homeassistant/commands/get-services-command.js
+++ b/src/modules/homeassistant/commands/get-services-command.ts
@@ -9,7 +9,7 @@ export class GetServicesCommand extends Command {
    * Constructs a GetServicesCommand instance.*
    * @param {number} requestId - The unique identifier for the command request.
    */
-  constructor(requestId) {
+  constructor(requestId: number) {
     super(requestId, 'get_services')
   }
 }
diff --git a/src/modules/homeassistant/commands/get-states-command.js b/src/modules/homeassistant/commands/get-states-command.ts
similarity index 92%
rename from src/modules/homeassistant/commands/get-states-command.js
rename to src/modules/homeassistant/commands/get-states-command.ts
index d40e331..bf5ad12 100644
--- a/src/modules/homeassistant/commands/get-states-command.js
+++ b/src/modules/homeassistant/commands/get-states-command.ts
@@ -9,7 +9,7 @@ export class GetStatesCommand extends Command {
    * Constructs a GetStatesCommand instance.
    * @param {number} requestId - The unique identifier for the command request.
    */
-  constructor(requestId) {
+  constructor(requestId: number) {
     super(requestId, 'get_states')
   }
 }
diff --git a/src/modules/homeassistant/commands/subscribe-events-command.js b/src/modules/homeassistant/commands/subscribe-events-command.ts
similarity index 89%
rename from src/modules/homeassistant/commands/subscribe-events-command.js
rename to src/modules/homeassistant/commands/subscribe-events-command.ts
index 420dd2d..4488c20 100644
--- a/src/modules/homeassistant/commands/subscribe-events-command.js
+++ b/src/modules/homeassistant/commands/subscribe-events-command.ts
@@ -5,11 +5,13 @@ import { Command } from '@/modules/homeassistant/commands/command'
  * subscription to event types in HomeAssistant.
  */
 export class SubscribeEventsCommand extends Command {
+  event_type: string
+
   /**
    * Constructs a SubscribeEventCommand instance.
    * @param {number} requestId - The unique identifier for the command request.
    */
-  constructor(requestId) {
+  constructor(requestId: number) {
     super(requestId, 'subscribe_events')
     this.event_type = 'state_changed'
   }
diff --git a/src/modules/homeassistant/homeassistant.js b/src/modules/homeassistant/homeassistant.ts
similarity index 56%
rename from src/modules/homeassistant/homeassistant.js
rename to src/modules/homeassistant/homeassistant.ts
index a151695..d5ace96 100644
--- a/src/modules/homeassistant/homeassistant.js
+++ b/src/modules/homeassistant/homeassistant.ts
@@ -3,9 +3,39 @@ import { ExecuteScriptCommand } from '@/modules/homeassistant/commands/execute-s
 import { SubscribeEventsCommand } from '@/modules/homeassistant/commands/subscribe-events-command'
 import { GetStatesCommand } from '@/modules/homeassistant/commands/get-states-command'
 import { GetServicesCommand } from '@/modules/homeassistant/commands/get-services-command'
+import { Command } from '@/modules/homeassistant/commands/command'
+
+export interface StateMessage {
+  entity_id: string
+  last_updated: string
+  last_changed: string
+  state: string
+  attributes: {
+    icon: string
+    friendly_name: string
+    device_class: string
+    last_updated: string
+    last_changed: string
+    rgb_color: number[]
+  }
+}
 
 export class Homeassistant {
-  constructor(url, accessToken, onReady, onError, onClose) {
+  requests: Map<unknown, (data: unknown) => void>
+  requestIdSequence: number
+  websocket: WebSocket
+  accessToken: string
+  onReady: () => void
+  onError: (message: string) => void
+  lastFullSync: number | null
+
+  constructor(
+    url: string,
+    accessToken: string,
+    onReady: () => void,
+    onError: (message: string) => void,
+    onClose: (ev: CloseEvent) => void
+  ) {
     this.requests = new Map()
     this.requestIdSequence = 1
     this.websocket = new WebSocket(url)
@@ -18,6 +48,7 @@ export class Homeassistant {
       this.onError('Failed to connect to ' + url)
     }
     this.websocket.onclose = onClose
+    this.lastFullSync = null
   }
 
   close() {
@@ -27,8 +58,16 @@ export class Homeassistant {
     }
   }
 
-  handleMessage(msg) {
-    let messageData = JSON.parse(msg.data)
+  handleMessage(msg: MessageEvent) {
+    const messageData: {
+      type: string
+      id: unknown
+      success: unknown
+      error: { message: string }
+      result: unknown
+      event: unknown
+      message: string
+    } = JSON.parse(msg.data)
 
     switch (messageData.type) {
       case 'auth_required':
@@ -39,12 +78,12 @@ export class Homeassistant {
           throw messageData.error.message
         }
         if (this.requests.has(messageData.id)) {
-          this.requests.get(messageData.id)(messageData.result)
+          this.requests.get(messageData.id)!(messageData.result)
         }
         break
       case 'event':
         if (this.requests.has(messageData.id)) {
-          this.requests.get(messageData.id)(messageData.event)
+          this.requests.get(messageData.id)!(messageData.event)
         }
         break
       case 'auth_ok':
@@ -66,7 +105,7 @@ export class Homeassistant {
   }
 
   sendAuthentication() {
-    let authMessage = {
+    const authMessage = {
       type: 'auth',
       access_token: this.accessToken
     }
@@ -74,36 +113,49 @@ export class Homeassistant {
     this.websocket.send(JSON.stringify(authMessage))
   }
 
-  getStatesDebounced(callback) {
+  getStatesDebounced(callback: (data: StateMessage[]) => void) {
     if (!this.lastFullSync || Date.now() - this.lastFullSync > 2000) {
       this.lastFullSync = Date.now()
       this.getStates(callback)
     }
   }
 
-  getStates(callback) {
-    let getStatesCommand = new GetStatesCommand(this.nextRequestId())
+  getStates(callback: (data: StateMessage[]) => void) {
+    const getStatesCommand = new GetStatesCommand(this.nextRequestId())
     this.sendCommand(getStatesCommand, callback)
   }
 
-  getServices(callback) {
-    let getServicesCommand = new GetServicesCommand(this.nextRequestId())
+  getServices(callback: (data: object) => void) {
+    const getServicesCommand = new GetServicesCommand(this.nextRequestId())
     this.sendCommand(getServicesCommand, callback)
   }
 
-  subscribeEvents(callback) {
-    let subscribeEventCommand = new SubscribeEventsCommand(this.nextRequestId())
+  subscribeEvents(
+    callback: (event: {
+      data: {
+        new_state: StateMessage
+      }
+    }) => void
+  ) {
+    const subscribeEventCommand = new SubscribeEventsCommand(this.nextRequestId())
     this.sendCommand(subscribeEventCommand, callback)
   }
 
-  callService(service, domain, entity_id = null, serviceData = null, callback = null) {
-    let executeScriptCmd = new ExecuteScriptCommand(this.nextRequestId(), [
+  callService(
+    service: string,
+    domain: string,
+    entity_id: unknown | null = null,
+    serviceData = null,
+    callback: (data: unknown) => void = () => {}
+  ) {
+    const executeScriptCmd = new ExecuteScriptCommand(this.nextRequestId(), [
       new ServiceAction(domain, service, entity_id ? [entity_id] : null, serviceData || {})
     ])
     this.sendCommand(executeScriptCmd, callback)
   }
 
-  sendCommand(command, callback) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  sendCommand(command: Command, callback: (data: any) => void) {
     if (callback) {
       this.requests.set(command.id, callback)
     }
diff --git a/src/modules/pi/entity.js b/src/modules/pi/entity.ts
similarity index 51%
rename from src/modules/pi/entity.js
rename to src/modules/pi/entity.ts
index f9f9f97..ad041a2 100644
--- a/src/modules/pi/entity.js
+++ b/src/modules/pi/entity.ts
@@ -1,10 +1,10 @@
 export class Entity {
-  domain
-  name
-  title
-  entityId
+  domain: string
+  name: string
+  title: string
+  entityId: string
 
-  constructor(domain, name, title) {
+  constructor(domain: string, name: string, title: string) {
     this.domain = domain
     this.name = name
     this.title = title
diff --git a/src/modules/pi/service.js b/src/modules/pi/service.ts
similarity index 65%
rename from src/modules/pi/service.js
rename to src/modules/pi/service.ts
index eb034be..3685b9a 100644
--- a/src/modules/pi/service.js
+++ b/src/modules/pi/service.ts
@@ -7,7 +7,14 @@ export class Service {
   target
   serviceId
 
-  constructor(domain, name, title, description, dataFields, target) {
+  constructor(
+    domain: string,
+    name: string,
+    title: string,
+    description: string,
+    dataFields: unknown,
+    target: { entity: unknown }
+  ) {
     this.domain = domain
     this.name = name
     this.title = title
diff --git a/src/modules/plugin/entityConfigFactoryNg.js b/src/modules/plugin/entityConfigFactoryNg.ts
similarity index 64%
rename from src/modules/plugin/entityConfigFactoryNg.js
rename to src/modules/plugin/entityConfigFactoryNg.ts
index 9542417..6119b27 100644
--- a/src/modules/plugin/entityConfigFactoryNg.js
+++ b/src/modules/plugin/entityConfigFactoryNg.ts
@@ -1,7 +1,25 @@
+// @ts-expect-error ts-checker doesn't understand yaml imports
 import defaultDisplayConfiguration from '../../../public/config/default-display-config.yml'
 import axios from 'axios'
-import nunjucks from 'nunjucks'
+import { renderString } from 'nunjucks'
 import yaml from 'js-yaml'
+import type { StateMessage } from '@/modules/homeassistant/homeassistant'
+
+export interface RenderingConfig {
+  feedbackLayout: string | null
+  feedback: {
+    title: string
+    icon: string | null
+    value: string
+  } | null
+  icon: string | null
+  color: string | null
+  labelTemplates: string[] | null
+  customTitle: string | null
+  isAction: boolean
+  isMultiAction: boolean
+  rotationPercent: number
+}
 
 export class EntityConfigFactory {
   displayConfiguration = defaultDisplayConfiguration
@@ -21,10 +39,8 @@ export class EntityConfigFactory {
   /**
    * @param displayConfigurationURL : String
    */
-  constructor(displayConfigurationURL) {
-    axios.defaults.headers = {
-      'Cache-Control': 'public, max-age=86400'
-    }
+  constructor(displayConfigurationURL: string) {
+    axios.defaults.headers['Cache-Control'] = 'public, max-age=86400'
 
     if (displayConfigurationURL) {
       console.log(`Loading display configuration from ${displayConfigurationURL}`)
@@ -46,11 +62,17 @@ export class EntityConfigFactory {
    * @param displaySettings
    * @returns {{color: *, icon: *, labelTemplates: *}}
    */
-  determineConfig(domain, stateObject, displaySettings) {
+  determineConfig(
+    domain: string,
+    stateObject: StateMessage,
+    displaySettings: {
+      iconSettings: string
+    }
+  ) {
     const attributes = stateObject.attributes
     const deviceClass = attributes.device_class
 
-    let renderingConfig = this.getConfig(domain, stateObject, deviceClass)
+    const renderingConfig = this.getConfig(domain, stateObject, deviceClass)
 
     if (displaySettings.iconSettings === 'HIDE') {
       // Remove default if icon should not be rendered
@@ -62,7 +84,7 @@ export class EntityConfigFactory {
       // Use icon from home-assistant, if no default or preferred
       renderingConfig.icon = attributes.icon
     }
-    let rgbColor = attributes.rgb_color
+    const rgbColor = attributes.rgb_color
     if (rgbColor) {
       renderingConfig.color = this.rgbToHex(rgbColor[0], rgbColor[1], rgbColor[2])
     }
@@ -70,20 +92,24 @@ export class EntityConfigFactory {
     return renderingConfig
   }
 
-  getConfig(domain, stateObject, deviceClass) {
-    const resolvers = []
+  getConfig(
+    domain: string,
+    stateObject: { state: string },
+    deviceClass: string
+  ): Partial<RenderingConfig> {
+    const resolvers: object[] = []
     this.addResolverConfig(resolvers, stateObject.state, domain, deviceClass)
     resolvers.reverse()
 
-    const feedbackLayoutString = this.resolve('feedbackLayout', resolvers)
-    const feedbackValueString = this.resolve('feedback', resolvers)
-    const iconString = this.resolve('icon', resolvers)
-    const colorString = this.resolve('color', resolvers)
-    const labelTemplates = this.resolve('labelTemplates', resolvers)
+    const feedbackLayoutString = this.resolve('feedbackLayout', resolvers) as string | null
+    const feedbackValueString = this.resolve('feedback', resolvers) as string | null
+    const iconString = this.resolve('icon', resolvers) as string | null
+    const colorString = this.resolve('color', resolvers) as string | null
+    const labelTemplates = this.resolve('labelTemplates', resolvers) as string[] | null
 
     const feedbackLayout = this.render(feedbackLayoutString, stateObject)
     const renderedFeedback = this.render(feedbackValueString, stateObject)
-    const feedback = feedbackValueString ? JSON.parse(renderedFeedback) : {}
+    const feedback = feedbackValueString ? JSON.parse(renderedFeedback!) : {}
 
     const icon = this.render(iconString, stateObject)
     const color = this.render(colorString, stateObject)
@@ -97,13 +123,14 @@ export class EntityConfigFactory {
     }
   }
 
-  addResolverConfig(resolvers, state, domain, deviceClass) {
-    let config = this.displayConfiguration
+  addResolverConfig(resolvers: unknown[], state: string, domain: string, deviceClass: string) {
+    const config = this.displayConfiguration
 
-    const defaultConfig = {}
-    if (config._icon) defaultConfig.icon = config._icon
-    if (config._color) defaultConfig.color = config._color
-    if (config._labelTemplates) defaultConfig.labelTemplates = config._labelTemplates
+    const defaultConfig = {
+      icon: config._icon,
+      color: config._color,
+      labelTemplates: config._labelTemplates
+    }
     resolvers.push(defaultConfig)
 
     const defaultStateConfig = config._states?.[state]
@@ -125,9 +152,9 @@ export class EntityConfigFactory {
   /**
    * @returns String
    */
-  render(string, stateObject) {
+  render(string: string | null, stateObject: object) {
     if (string) {
-      let renderedString = nunjucks.renderString(string, stateObject)
+      const renderedString = renderString(string, stateObject)
       if (renderedString) {
         return renderedString.trim()
       }
@@ -135,15 +162,17 @@ export class EntityConfigFactory {
     return string
   }
 
-  resolve(prop, resolvers) {
+  resolve(prop: string, resolvers: object[]): object | null {
     for (const resolver of resolvers) {
       if (Object.hasOwn(resolver, prop)) {
+        // @ts-expect-error This is a dynamic property access, can't be typed in current implementation
         return resolver[prop]
       }
     }
+    return null
   }
 
-  rgbToHex(r, g, b) {
+  rgbToHex(r: number, g: number, b: number) {
     return '#' + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)
   }
 }
diff --git a/src/modules/plugin/svgUtils.js b/src/modules/plugin/svgUtils.ts
similarity index 71%
rename from src/modules/plugin/svgUtils.js
rename to src/modules/plugin/svgUtils.ts
index a4c244f..67cd209 100644
--- a/src/modules/plugin/svgUtils.js
+++ b/src/modules/plugin/svgUtils.ts
@@ -1,9 +1,23 @@
 import Snap from 'snapsvg-cjs'
-import { urlencode } from 'nunjucks/src/filters'
 import * as Mdi from '@mdi/js'
-import nunjucks from 'nunjucks'
+import { renderString } from 'nunjucks'
+import type { RenderingConfig } from '@/modules/plugin/entityConfigFactoryNg'
 
 export class SvgUtils {
+  private buttonRes: { width: number; height: number }
+  private halfRes: { width: number; height: number }
+  private readonly fontSize: number
+  private lineAttr: {
+    fill: string
+    'font-family': string
+    'font-weight': string
+    'font-size': string
+    'text-anchor': string
+    stroke: string
+    strokeWidth: number
+  }
+  private snap: Snap.Paper
+
   constructor(resolution = { width: 144, height: 144 }) {
     this.buttonRes = resolution
     this.halfRes = {
@@ -27,7 +41,13 @@ export class SvgUtils {
    * Renders a complete button image based on the given rendering-config.
    * @return string
    */
-  renderButtonSVG(renderingConfig, stateObject) {
+  renderButtonSVG(
+    renderingConfig: Partial<RenderingConfig>,
+    stateObject: {
+      attributes: object
+      state: unknown
+    }
+  ) {
     const buttonLabels = this.renderTemplates(renderingConfig.labelTemplates, {
       ...stateObject.attributes,
       ...{ state: stateObject.state }
@@ -45,26 +65,27 @@ export class SvgUtils {
    * Renders the given MDI as SVG.
    * @return string
    */
-  renderIconSVG(mdiIconName, iconColor) {
+  renderIconSVG(mdiIconName: string | null | undefined, iconColor: string) {
     return this.#generateIconSVG(mdiIconName, iconColor)
   }
 
-  renderTemplates(templates, values) {
+  renderTemplates(templates: string[] | null | undefined, values: object) {
     return templates
       ? templates
           .map((template) => (template ? template : ''))
-          .map((template) => nunjucks.renderString(template, values))
+          .map((template) => renderString(template, values))
       : []
   }
 
-  #generateIconSVG(mdiIconName, color) {
+  #generateIconSVG(mdiIconName: string | null | undefined, color: string) {
     let iconData = null
     if (mdiIconName) {
+      // @ts-expect-error dynamic import of icon based on name
       iconData = Mdi[this.#toPascalCase(mdiIconName)]
     }
 
     const iconSVG = this.snap.path(iconData)
-    iconSVG.attr('fill', color)
+    iconSVG.attr({ fill: color })
     const iconBBox = iconSVG.getBBox()
     const iconHeight = iconBBox.height
     const iconWidth = iconBBox.width
@@ -73,20 +94,27 @@ export class SvgUtils {
     const scaleFactor = Math.min(targetHeight / iconHeight, targetWidth / iconWidth)
     iconSVG.transform(`scale(${scaleFactor})`)
 
-    let outerSVG = this.snap.outerSVG()
+    const outerSVG = this.snap.outerSVG()
     this.snap.clear()
     return outerSVG
   }
 
-  #generateButtonSVG(labels, mdiIconName, iconColor, isAction = false, isMultiAction = false) {
+  #generateButtonSVG(
+    labels: string[],
+    mdiIconName: string | null | undefined,
+    iconColor: string | null | undefined,
+    isAction = false,
+    isMultiAction = false
+  ) {
     let iconData = null
     if (mdiIconName) {
+      // @ts-expect-error dynamic import of icon based on name
       iconData = Mdi[this.#toPascalCase(mdiIconName)]
     }
 
     if (iconData) {
       const iconSVG = this.snap.path(iconData)
-      iconSVG.attr('fill', iconColor)
+      iconSVG.attr({ fill: iconColor })
       const iconBBox = iconSVG.getBBox()
       const iconHeight = iconBBox.height
       const iconWidth = iconBBox.width
@@ -100,12 +128,12 @@ export class SvgUtils {
 
     if (isAction) {
       const color = isMultiAction ? '#3e89ff' : '#62ff65'
-      this.snap.circle(this.buttonRes.width - 1, 0, 15).attr('fill', color)
+      this.snap.circle(this.buttonRes.width - 1, 0, 15).attr({ fill: color })
     }
 
     let currentLineNumber = 0
     for (let i = 0; i < labels.length; i++) {
-      let lines = labels[i].split('\n')
+      const lines = labels[i].split('\n')
       for (let i = currentLineNumber; i < lines.length + currentLineNumber; i++) {
         this.#drawText(lines[i - currentLineNumber], i)
       }
@@ -120,13 +148,13 @@ export class SvgUtils {
     // this.snap.line(0, this.halfRes / 2, this.buttonRes, this.halfRes / 2).attr("stroke", "#FFFFFF")
     // this.snap.line(0, this.halfRes * 1.5, this.buttonRes, this.halfRes * 1.5).attr("stroke", "#FFFFFF")
 
-    let outerSVG = this.snap.outerSVG()
+    const outerSVG = this.snap.outerSVG()
     this.snap.clear()
     return outerSVG
   }
 
-  #drawText(text, lineNr) {
-    const escapedText = urlencode(text)
+  #drawText(text: string, lineNr: number) {
+    const escapedText = encodeURIComponent(text)
     const quarterHeight = this.buttonRes.height / 4
     this.snap
       .text(
@@ -138,13 +166,13 @@ export class SvgUtils {
       .transform(`translateX(${this.halfRes.width})`)
   }
 
-  #toPascalCase = (iconName) => {
+  #toPascalCase = (iconName: string) => {
     const iconNameRaw = iconName.substring(4)
     const iconNamePascalCase = iconNameRaw.replace(/(^\w|-\w)/g, this.#clearAndUpper)
     return 'mdi' + iconNamePascalCase
   }
 
-  #clearAndUpper = (text) => {
+  #clearAndUpper = (text: string) => {
     return text.replace(/-/, '').toUpperCase()
   }
 }
diff --git a/src/pi/main.js b/src/pi/main.ts
similarity index 75%
rename from src/pi/main.js
rename to src/pi/main.ts
index 3492857..ff941bc 100644
--- a/src/pi/main.js
+++ b/src/pi/main.ts
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import PiComponent from '@/components/PiComponent.vue'
 import '../scss/styles.scss'
-// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import * as bootstrap from 'bootstrap'
 
 createApp(PiComponent).mount('#app')
diff --git a/src/plugin/main.js b/src/plugin/main.ts
similarity index 100%
rename from src/plugin/main.js
rename to src/plugin/main.ts
diff --git a/src/vite/RestartStreamDeck.js b/src/vite/RestartStreamDeck.ts
similarity index 82%
rename from src/vite/RestartStreamDeck.js
rename to src/vite/RestartStreamDeck.ts
index befb3d9..65ac6d2 100644
--- a/src/vite/RestartStreamDeck.js
+++ b/src/vite/RestartStreamDeck.ts
@@ -1,6 +1,7 @@
 import { exec } from 'node:child_process'
+import { type Plugin } from 'vite'
 
-export default function RestartStreamDeck() {
+export default function RestartStreamDeck(): Plugin {
   return {
     name: 'streamdeck-restart-once',
     apply: 'build',
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..ec35331
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["node"]
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..66b5e57
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..066c4df
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,18 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
diff --git a/vite.config.js b/vite.config.ts
similarity index 93%
rename from vite.config.js
rename to vite.config.ts
index 2ab1b09..77ade36 100644
--- a/vite.config.js
+++ b/vite.config.ts
@@ -4,7 +4,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import ViteYaml from '@modyfi/vite-plugin-yaml'
 import path from 'path'
-import RestartStreamDeck from './src/vite/RestartStreamDeck.js'
+import RestartStreamDeck from './src/vite/RestartStreamDeck'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)