From 833682c58c8fa07348cf49638926a13dbc8e8457 Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Thu, 15 Feb 2024 13:57:17 +0100
Subject: [PATCH 1/6] ci: added eslint checks for ui

---
 .github/workflows/ci-ui.yml                   |  17 +
 ui/.eslintrc.js                               |  19 +-
 ui/package-lock.json                          | 846 ++++++++----------
 ui/package.json                               |  12 +-
 ui/src/ambientTypes.ts                        |   4 +-
 ui/src/builder/BuilderApp.vue                 |  40 +-
 ui/src/builder/BuilderComponentShortcuts.vue  |  27 +-
 ui/src/builder/BuilderEditor.vue              | 123 ++-
 ui/src/builder/BuilderFieldsAlign.vue         |  16 +-
 ui/src/builder/BuilderFieldsColor.vue         |  22 +-
 ui/src/builder/BuilderFieldsKeyValue.vue      |  61 +-
 ui/src/builder/BuilderFieldsObject.vue        |   7 +-
 ui/src/builder/BuilderFieldsPadding.vue       | 260 ++++--
 ui/src/builder/BuilderFieldsShadow.vue        |  48 +-
 ui/src/builder/BuilderFieldsText.vue          |  14 +-
 ui/src/builder/BuilderFieldsWidth.vue         | 124 ++-
 ui/src/builder/BuilderHeader.vue              |  10 +-
 ui/src/builder/BuilderInstanceTracker.vue     |   6 +-
 ui/src/builder/BuilderModal.vue               |  12 +-
 ui/src/builder/BuilderSelect.vue              | 218 +++--
 ui/src/builder/BuilderSettings.vue            |  20 +-
 ui/src/builder/BuilderSettingsBinding.vue     |  10 +-
 ui/src/builder/BuilderSettingsHandlers.vue    |  52 +-
 ui/src/builder/BuilderSettingsProperties.vue  |  34 +-
 ui/src/builder/BuilderSettingsVisibility.vue  |  22 +-
 ui/src/builder/BuilderSidebarToolbar.vue      |  23 +-
 ui/src/builder/BuilderSidebarTree.vue         |  51 +-
 ui/src/builder/BuilderStateExplorer.vue       |  18 +-
 .../BuilderStateExplorerTreeBranch.vue        | 117 +--
 ui/src/builder/BuilderSwitcher.vue            |  11 +-
 ui/src/builder/BuilderTreeBranch.vue          |  41 +-
 ui/src/builder/builderManager.ts              |   6 +-
 ui/src/builder/useComponentActions.ts         |  76 +-
 ui/src/builder/useDragDropComponent.ts        |  22 +-
 ui/src/core/index.ts                          |  61 +-
 ui/src/core/loadExtensions.ts                 |  52 +-
 ui/src/core/parsing.ts                        |  50 +-
 ui/src/core/templateMap.ts                    |   7 +-
 ui/src/core/typeHierarchy.ts                  |  17 +-
 ui/src/core_components/CoreButton.vue         |  29 +-
 ui/src/core_components/CoreColumn.vue         |  17 +-
 ui/src/core_components/CoreColumns.vue        |   2 +-
 ui/src/core_components/CoreDataframe.vue      |  30 +-
 ui/src/core_components/CoreHeader.vue         |   6 +-
 ui/src/core_components/CoreHeading.vue        |   8 +-
 .../core_components/CoreHorizontalStack.vue   |   6 +-
 ui/src/core_components/CoreHtml.vue           |   6 +-
 ui/src/core_components/CoreIFrame.vue         |  50 +-
 ui/src/core_components/CoreIcon.vue           |  26 +-
 ui/src/core_components/CoreImage.vue          |   5 +-
 ui/src/core_components/CoreMessage.vue        |  10 +-
 ui/src/core_components/CoreMetric.vue         |  10 +-
 ui/src/core_components/CorePage.vue           |   2 +-
 ui/src/core_components/CorePagination.vue     | 183 ++--
 ui/src/core_components/CorePlotlyGraph.vue    |  33 +-
 ui/src/core_components/CoreRepeater.vue       |  10 +-
 ui/src/core_components/CoreRoot.vue           |  84 +-
 ui/src/core_components/CoreSection.vue        |   6 +-
 ui/src/core_components/CoreSidebar.vue        |   2 +-
 ui/src/core_components/CoreTab.vue            |  17 +-
 ui/src/core_components/CoreText.vue           |  12 +-
 ui/src/core_components/CoreTimer.vue          |   7 +-
 ui/src/core_components/CoreVegaLiteChart.vue  |   5 +-
 ui/src/core_components/CoreWebcamCapture.vue  |  14 +-
 ui/src/core_components/base/BaseSelect.vue    |  45 +-
 .../input/CoreCheckboxInput.vue               |  11 +-
 .../core_components/input/CoreDateInput.vue   |  12 +-
 .../input/CoreDropdownInput.vue               |  12 +-
 .../core_components/input/CoreFileInput.vue   |  89 +-
 .../input/CoreMultiselectInput.vue            |  39 +-
 .../core_components/input/CoreNumberInput.vue |  46 +-
 .../core_components/input/CoreRadioInput.vue  |  15 +-
 .../core_components/input/CoreSelectInput.vue |  35 +-
 .../core_components/input/CoreSliderInput.vue |  12 +-
 .../core_components/input/CoreTextInput.vue   |  22 +-
 .../input/CoreTextareaInput.vue               |  20 +-
 ui/src/custom_components/BubbleMessage.vue    |  47 +-
 .../BubbleMessageAdvanced.vue                 | 251 +++---
 ui/src/custom_components/index.ts             |  11 +-
 ui/src/injectionKeys.ts                       |   2 +-
 ui/src/main.ts                                |  21 +-
 ui/src/renderer/ChildlessPlaceholder.vue      |   6 +-
 ui/src/renderer/ComponentProxy.vue            | 103 ++-
 ui/src/renderer/ComponentRenderer.vue         |   2 +-
 ui/src/renderer/LoadingSymbol.vue             |  15 +-
 ui/src/renderer/RendererNotifications.vue     |  12 +-
 ui/src/renderer/sharedStyleFields.ts          |   5 +-
 ui/src/renderer/useEvaluator.ts               |  49 +-
 ui/src/renderer/useFormValueBroker.ts         |  22 +-
 ui/src/streamsyncTypes.ts                     |   6 +-
 ui/vite-env.d.ts                              |   2 +-
 ui/vite.config.js                             |   4 +-
 92 files changed, 2209 insertions(+), 1863 deletions(-)
 create mode 100644 .github/workflows/ci-ui.yml

diff --git a/.github/workflows/ci-ui.yml b/.github/workflows/ci-ui.yml
new file mode 100644
index 000000000..a8e035901
--- /dev/null
+++ b/.github/workflows/ci-ui.yml
@@ -0,0 +1,17 @@
+name: ci-ui
+
+on: [ push, pull_request ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+      - run: npm i
+        working-directory: ./ui
+      - run: npm run lint:ci
+        working-directory: ./ui
diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
index 24161f908..d7fd9298c 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -1,24 +1,27 @@
 module.exports = {
 	rules: {
-		indent: ["error", "tab"],
+		indent: "off",
+		"no-unused-vars": "warn",
+		"@typescript-eslint/no-unused-vars": "warn",
+		"@typescript-eslint/no-explicit-any": "warn",
+		"@typescript-eslint/ban-types": "warn",
 		"prettier/prettier": [2, { useTabs: true }],
 	},
 	parser: "vue-eslint-parser",
 	parserOptions: {
-	  parser: "@typescript-eslint/parser",
-	  ecmaVersion: 2020,
-	  sourceType: "module",
+		parser: "@typescript-eslint/parser",
+		ecmaVersion: 2020,
+		sourceType: "module",
 	},
 	root: true,
 	extends: [
 		"plugin:@typescript-eslint/recommended",
-		"plugin:vue/vue3-essential",
-		"prettier/@typescript-eslint",
+		"plugin:vue/vue3-recommended",
 		"eslint:recommended",
 		"@vue/eslint-config-prettier",
-		"prettier/vue",
+		"prettier",
 	],
-	plugins: ["prettier", "@typescript-eslint"],
+	plugins: ["prettier", "@typescript-eslint", "vue"],
 	env: {
 		node: true,
 	},
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 1b6cc0f9b..c5e8dff95 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -25,11 +25,14 @@
 			"devDependencies": {
 				"@rushstack/eslint-patch": "^1.2.0",
 				"@types/marked": "^5.0.1",
+				"@typescript-eslint/eslint-plugin": "7.0.1",
 				"@vitejs/plugin-vue": "^4.2.1",
 				"@vue/eslint-config-prettier": "^8.0.0",
 				"eslint": "^8.39.0",
+				"eslint-config-prettier": "9.1.0",
+				"eslint-plugin-prettier": "5.1.3",
 				"eslint-plugin-vue": "^9.11.0",
-				"prettier": "^3.0.1",
+				"prettier": "3.2.5",
 				"vite": "^4.4.9",
 				"vite-plugin-monaco-editor": "^1.1.0",
 				"volar-service-vetur": "latest"
@@ -485,9 +488,9 @@
 			}
 		},
 		"node_modules/@eslint/eslintrc": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
-			"integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+			"integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
 			"dev": true,
 			"dependencies": {
 				"ajv": "^6.12.4",
@@ -508,22 +511,22 @@
 			}
 		},
 		"node_modules/@eslint/js": {
-			"version": "8.47.0",
-			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.47.0.tgz",
-			"integrity": "sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==",
+			"version": "8.56.0",
+			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
+			"integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
 			"dev": true,
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
 		"node_modules/@humanwhocodes/config-array": {
-			"version": "0.11.10",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
-			"integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==",
+			"version": "0.11.14",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+			"integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
 			"dev": true,
 			"dependencies": {
-				"@humanwhocodes/object-schema": "^1.2.1",
-				"debug": "^4.1.1",
+				"@humanwhocodes/object-schema": "^2.0.2",
+				"debug": "^4.3.1",
 				"minimatch": "^3.0.5"
 			},
 			"engines": {
@@ -544,9 +547,9 @@
 			}
 		},
 		"node_modules/@humanwhocodes/object-schema": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-			"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz",
+			"integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
 			"dev": true
 		},
 		"node_modules/@jridgewell/sourcemap-codec": {
@@ -600,19 +603,11 @@
 				"node": ">= 8"
 			}
 		},
-		"node_modules/@pkgr/utils": {
-			"version": "2.4.2",
-			"resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz",
-			"integrity": "sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==",
+		"node_modules/@pkgr/core": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+			"integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
 			"dev": true,
-			"dependencies": {
-				"cross-spawn": "^7.0.3",
-				"fast-glob": "^3.3.0",
-				"is-glob": "^4.0.3",
-				"open": "^9.1.0",
-				"picocolors": "^1.0.0",
-				"tslib": "^2.6.0"
-			},
 			"engines": {
 				"node": "^12.20.0 || ^14.18.0 || >=16.0.0"
 			},
@@ -656,6 +651,12 @@
 			"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.4.tgz",
 			"integrity": "sha512-MHmwBtCb7OCv1DSivz2UNJXPGU/1btAWRKlqJ2saEhVJkpkvqHMMaOpKg0v4sAbDWSQekHGvPVMM8nQ+Jen03Q=="
 		},
+		"node_modules/@types/json-schema": {
+			"version": "7.0.15",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+			"dev": true
+		},
 		"node_modules/@types/marked": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.1.tgz",
@@ -672,6 +673,233 @@
 			"resolved": "https://registry.npmjs.org/@types/pad-left/-/pad-left-2.1.1.tgz",
 			"integrity": "sha512-Xd22WCRBydkGSApl5Bw0PhAOHKSVjNL3E3AwzKaps96IMraPqy5BvZIsBVK6JLwdybUzjHnuWVwpDd0JjTfHXA=="
 		},
+		"node_modules/@types/semver": {
+			"version": "7.5.7",
+			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.7.tgz",
+			"integrity": "sha512-/wdoPq1QqkSj9/QOeKkFquEuPzQbHTWAMPH/PaUMB+JuR31lXhlWXRZ52IpfDYVlDOUBvX09uBrPwxGT1hjNBg==",
+			"dev": true
+		},
+		"node_modules/@typescript-eslint/eslint-plugin": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.0.1.tgz",
+			"integrity": "sha512-OLvgeBv3vXlnnJGIAgCLYKjgMEU+wBGj07MQ/nxAaON+3mLzX7mJbhRYrVGiVvFiXtwFlkcBa/TtmglHy0UbzQ==",
+			"dev": true,
+			"dependencies": {
+				"@eslint-community/regexpp": "^4.5.1",
+				"@typescript-eslint/scope-manager": "7.0.1",
+				"@typescript-eslint/type-utils": "7.0.1",
+				"@typescript-eslint/utils": "7.0.1",
+				"@typescript-eslint/visitor-keys": "7.0.1",
+				"debug": "^4.3.4",
+				"graphemer": "^1.4.0",
+				"ignore": "^5.2.4",
+				"natural-compare": "^1.4.0",
+				"semver": "^7.5.4",
+				"ts-api-utils": "^1.0.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"@typescript-eslint/parser": "^7.0.0",
+				"eslint": "^8.56.0"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/parser": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.0.1.tgz",
+			"integrity": "sha512-8GcRRZNzaHxKzBPU3tKtFNing571/GwPBeCvmAUw0yBtfE2XVd0zFKJIMSWkHJcPQi0ekxjIts6L/rrZq5cxGQ==",
+			"dev": true,
+			"peer": true,
+			"dependencies": {
+				"@typescript-eslint/scope-manager": "7.0.1",
+				"@typescript-eslint/types": "7.0.1",
+				"@typescript-eslint/typescript-estree": "7.0.1",
+				"@typescript-eslint/visitor-keys": "7.0.1",
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^8.56.0"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/scope-manager": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.0.1.tgz",
+			"integrity": "sha512-v7/T7As10g3bcWOOPAcbnMDuvctHzCFYCG/8R4bK4iYzdFqsZTbXGln0cZNVcwQcwewsYU2BJLay8j0/4zOk4w==",
+			"dev": true,
+			"dependencies": {
+				"@typescript-eslint/types": "7.0.1",
+				"@typescript-eslint/visitor-keys": "7.0.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/type-utils": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.0.1.tgz",
+			"integrity": "sha512-YtT9UcstTG5Yqy4xtLiClm1ZpM/pWVGFnkAa90UfdkkZsR1eP2mR/1jbHeYp8Ay1l1JHPyGvoUYR6o3On5Nhmw==",
+			"dev": true,
+			"dependencies": {
+				"@typescript-eslint/typescript-estree": "7.0.1",
+				"@typescript-eslint/utils": "7.0.1",
+				"debug": "^4.3.4",
+				"ts-api-utils": "^1.0.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^8.56.0"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/types": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.0.1.tgz",
+			"integrity": "sha512-uJDfmirz4FHib6ENju/7cz9SdMSkeVvJDK3VcMFvf/hAShg8C74FW+06MaQPODHfDJp/z/zHfgawIJRjlu0RLg==",
+			"dev": true,
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.0.1.tgz",
+			"integrity": "sha512-SO9wHb6ph0/FN5OJxH4MiPscGah5wjOd0RRpaLvuBv9g8565Fgu0uMySFEPqwPHiQU90yzJ2FjRYKGrAhS1xig==",
+			"dev": true,
+			"dependencies": {
+				"@typescript-eslint/types": "7.0.1",
+				"@typescript-eslint/visitor-keys": "7.0.1",
+				"debug": "^4.3.4",
+				"globby": "^11.1.0",
+				"is-glob": "^4.0.3",
+				"minimatch": "9.0.3",
+				"semver": "^7.5.4",
+				"ts-api-utils": "^1.0.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"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,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+			"version": "9.0.3",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+			"integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+			"dev": true,
+			"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": "7.0.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.0.1.tgz",
+			"integrity": "sha512-oe4his30JgPbnv+9Vef1h48jm0S6ft4mNwi9wj7bX10joGn07QRfqIqFHoMiajrtoU88cIhXf8ahwgrcbNLgPA==",
+			"dev": true,
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.4.0",
+				"@types/json-schema": "^7.0.12",
+				"@types/semver": "^7.5.0",
+				"@typescript-eslint/scope-manager": "7.0.1",
+				"@typescript-eslint/types": "7.0.1",
+				"@typescript-eslint/typescript-estree": "7.0.1",
+				"semver": "^7.5.4"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^8.56.0"
+			}
+		},
+		"node_modules/@typescript-eslint/visitor-keys": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.0.1.tgz",
+			"integrity": "sha512-hwAgrOyk++RTXrP4KzCg7zB2U0xt7RUU0ZdMSCsqF3eKUwkdXUMyTb0qdCuji7VIbcpG62kKTU9M1J1c9UpFBw==",
+			"dev": true,
+			"dependencies": {
+				"@typescript-eslint/types": "7.0.1",
+				"eslint-visitor-keys": "^3.4.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@ungap/structured-clone": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+			"dev": true
+		},
 		"node_modules/@vitejs/plugin-vue": {
 			"version": "4.2.3",
 			"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz",
@@ -751,6 +979,18 @@
 				"prettier": ">= 3.0.0"
 			}
 		},
+		"node_modules/@vue/eslint-config-prettier/node_modules/eslint-config-prettier": {
+			"version": "8.10.0",
+			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz",
+			"integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==",
+			"dev": true,
+			"bin": {
+				"eslint-config-prettier": "bin/cli.js"
+			},
+			"peerDependencies": {
+				"eslint": ">=7.0.0"
+			}
+		},
 		"node_modules/@vue/reactivity": {
 			"version": "3.3.4",
 			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
@@ -917,39 +1157,27 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/array-union": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+			"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/balanced-match": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
 			"dev": true
 		},
-		"node_modules/big-integer": {
-			"version": "1.6.51",
-			"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
-			"integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.6"
-			}
-		},
 		"node_modules/boolbase": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
 			"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
 			"dev": true
 		},
-		"node_modules/bplist-parser": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
-			"integrity": "sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==",
-			"dev": true,
-			"dependencies": {
-				"big-integer": "^1.6.44"
-			},
-			"engines": {
-				"node": ">= 5.10.0"
-			}
-		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -981,21 +1209,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/bundle-name": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
-			"integrity": "sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==",
-			"dev": true,
-			"dependencies": {
-				"run-applescript": "^5.0.0"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/call-bind": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -1399,52 +1612,6 @@
 			"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
 			"dev": true
 		},
-		"node_modules/default-browser": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",
-			"integrity": "sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==",
-			"dev": true,
-			"dependencies": {
-				"bundle-name": "^3.0.0",
-				"default-browser-id": "^3.0.0",
-				"execa": "^7.1.1",
-				"titleize": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=14.16"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/default-browser-id": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
-			"integrity": "sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==",
-			"dev": true,
-			"dependencies": {
-				"bplist-parser": "^0.2.0",
-				"untildify": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/define-lazy-prop": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
-			"integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
-			"dev": true,
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/delaunator": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
@@ -1462,6 +1629,18 @@
 				"node": ">=0.3.1"
 			}
 		},
+		"node_modules/dir-glob": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+			"integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+			"dev": true,
+			"dependencies": {
+				"path-type": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/doctrine": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1538,18 +1717,19 @@
 			}
 		},
 		"node_modules/eslint": {
-			"version": "8.47.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.47.0.tgz",
-			"integrity": "sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==",
+			"version": "8.56.0",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz",
+			"integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.2.0",
 				"@eslint-community/regexpp": "^4.6.1",
-				"@eslint/eslintrc": "^2.1.2",
-				"@eslint/js": "^8.47.0",
-				"@humanwhocodes/config-array": "^0.11.10",
+				"@eslint/eslintrc": "^2.1.4",
+				"@eslint/js": "8.56.0",
+				"@humanwhocodes/config-array": "^0.11.13",
 				"@humanwhocodes/module-importer": "^1.0.1",
 				"@nodelib/fs.walk": "^1.2.8",
+				"@ungap/structured-clone": "^1.2.0",
 				"ajv": "^6.12.4",
 				"chalk": "^4.0.0",
 				"cross-spawn": "^7.0.2",
@@ -1592,9 +1772,9 @@
 			}
 		},
 		"node_modules/eslint-config-prettier": {
-			"version": "8.10.0",
-			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz",
-			"integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==",
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+			"integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
 			"dev": true,
 			"bin": {
 				"eslint-config-prettier": "bin/cli.js"
@@ -1604,23 +1784,24 @@
 			}
 		},
 		"node_modules/eslint-plugin-prettier": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz",
-			"integrity": "sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w==",
+			"version": "5.1.3",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz",
+			"integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==",
 			"dev": true,
 			"dependencies": {
 				"prettier-linter-helpers": "^1.0.0",
-				"synckit": "^0.8.5"
+				"synckit": "^0.8.6"
 			},
 			"engines": {
 				"node": "^14.18.0 || >=16.0.0"
 			},
 			"funding": {
-				"url": "https://opencollective.com/prettier"
+				"url": "https://opencollective.com/eslint-plugin-prettier"
 			},
 			"peerDependencies": {
 				"@types/eslint": ">=8.0.0",
 				"eslint": ">=8.0.0",
+				"eslint-config-prettier": "*",
 				"prettier": ">=3.0.0"
 			},
 			"peerDependenciesMeta": {
@@ -1840,29 +2021,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/execa": {
-			"version": "7.2.0",
-			"resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
-			"integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
-			"dev": true,
-			"dependencies": {
-				"cross-spawn": "^7.0.3",
-				"get-stream": "^6.0.1",
-				"human-signals": "^4.3.0",
-				"is-stream": "^3.0.0",
-				"merge-stream": "^2.0.0",
-				"npm-run-path": "^5.1.0",
-				"onetime": "^6.0.0",
-				"signal-exit": "^3.0.7",
-				"strip-final-newline": "^3.0.0"
-			},
-			"engines": {
-				"node": "^14.18.0 || ^16.14.0 || >=18.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/sindresorhus/execa?sponsor=1"
-			}
-		},
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2051,18 +2209,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/get-stream": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-			"dev": true,
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/glob": {
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2096,9 +2242,9 @@
 			}
 		},
 		"node_modules/globals": {
-			"version": "13.21.0",
-			"resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
-			"integrity": "sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==",
+			"version": "13.24.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+			"integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
 			"dev": true,
 			"dependencies": {
 				"type-fest": "^0.20.2"
@@ -2110,6 +2256,26 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/globby": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+			"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+			"dev": true,
+			"dependencies": {
+				"array-union": "^2.1.0",
+				"dir-glob": "^3.0.1",
+				"fast-glob": "^3.2.9",
+				"ignore": "^5.2.0",
+				"merge2": "^1.4.1",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/graphemer": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -2175,15 +2341,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/human-signals": {
-			"version": "4.3.1",
-			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
-			"integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=14.18.0"
-			}
-		},
 		"node_modules/iconv-lite": {
 			"version": "0.6.3",
 			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -2265,21 +2422,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/is-docker": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
-			"integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
-			"dev": true,
-			"bin": {
-				"is-docker": "cli.js"
-			},
-			"engines": {
-				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/is-expression": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
@@ -2331,24 +2473,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/is-inside-container": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
-			"integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
-			"dev": true,
-			"dependencies": {
-				"is-docker": "^3.0.0"
-			},
-			"bin": {
-				"is-inside-container": "cli.js"
-			},
-			"engines": {
-				"node": ">=14.16"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/is-number": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -2383,45 +2507,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/is-stream": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
-			"integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
-			"dev": true,
-			"engines": {
-				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/is-wsl": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-			"dev": true,
-			"dependencies": {
-				"is-docker": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/is-wsl/node_modules/is-docker": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-			"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-			"dev": true,
-			"bin": {
-				"is-docker": "cli.js"
-			},
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/isexe": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2549,12 +2634,6 @@
 				"node": ">= 16"
 			}
 		},
-		"node_modules/merge-stream": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-			"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-			"dev": true
-		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2577,18 +2656,6 @@
 				"node": ">=8.6"
 			}
 		},
-		"node_modules/mimic-fn": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
-			"integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
-			"dev": true,
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/minimatch": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2675,33 +2742,6 @@
 				}
 			}
 		},
-		"node_modules/npm-run-path": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
-			"integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
-			"dev": true,
-			"dependencies": {
-				"path-key": "^4.0.0"
-			},
-			"engines": {
-				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/npm-run-path/node_modules/path-key": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
-			"integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/nth-check": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -2732,39 +2772,6 @@
 				"wrappy": "1"
 			}
 		},
-		"node_modules/onetime": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
-			"integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
-			"dev": true,
-			"dependencies": {
-				"mimic-fn": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/open": {
-			"version": "9.1.0",
-			"resolved": "https://registry.npmjs.org/open/-/open-9.1.0.tgz",
-			"integrity": "sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==",
-			"dev": true,
-			"dependencies": {
-				"default-browser": "^4.0.0",
-				"define-lazy-prop": "^3.0.0",
-				"is-inside-container": "^1.0.0",
-				"is-wsl": "^2.2.0"
-			},
-			"engines": {
-				"node": ">=14.16"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/optionator": {
 			"version": "0.9.3",
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -2868,6 +2875,15 @@
 			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
 			"dev": true
 		},
+		"node_modules/path-type": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/picocolors": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -2940,9 +2956,9 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz",
-			"integrity": "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==",
+			"version": "3.2.5",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+			"integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
 			"dev": true,
 			"bin": {
 				"prettier": "bin/prettier.cjs"
@@ -2984,9 +3000,9 @@
 			}
 		},
 		"node_modules/punycode": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-			"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
 			"dev": true,
 			"engines": {
 				"node": ">=6"
@@ -3113,110 +3129,6 @@
 				"fsevents": "~2.3.2"
 			}
 		},
-		"node_modules/run-applescript": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-5.0.0.tgz",
-			"integrity": "sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==",
-			"dev": true,
-			"dependencies": {
-				"execa": "^5.0.0"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/run-applescript/node_modules/execa": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-			"dev": true,
-			"dependencies": {
-				"cross-spawn": "^7.0.3",
-				"get-stream": "^6.0.0",
-				"human-signals": "^2.1.0",
-				"is-stream": "^2.0.0",
-				"merge-stream": "^2.0.0",
-				"npm-run-path": "^4.0.1",
-				"onetime": "^5.1.2",
-				"signal-exit": "^3.0.3",
-				"strip-final-newline": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sindresorhus/execa?sponsor=1"
-			}
-		},
-		"node_modules/run-applescript/node_modules/human-signals": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-			"dev": true,
-			"engines": {
-				"node": ">=10.17.0"
-			}
-		},
-		"node_modules/run-applescript/node_modules/is-stream": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/run-applescript/node_modules/mimic-fn": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-			"dev": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/run-applescript/node_modules/npm-run-path": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-			"dev": true,
-			"dependencies": {
-				"path-key": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/run-applescript/node_modules/onetime": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-			"dev": true,
-			"dependencies": {
-				"mimic-fn": "^2.1.0"
-			},
-			"engines": {
-				"node": ">=6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/run-applescript/node_modules/strip-final-newline": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-			"integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-			"dev": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
 		"node_modules/run-parallel": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -3285,11 +3197,14 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/signal-exit": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-			"dev": true
+		"node_modules/slash": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
 		},
 		"node_modules/source-map-js": {
 			"version": "1.0.2",
@@ -3334,18 +3249,6 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/strip-final-newline": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
-			"integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
-			"dev": true,
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/strip-json-comments": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -3382,13 +3285,13 @@
 			}
 		},
 		"node_modules/synckit": {
-			"version": "0.8.5",
-			"resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz",
-			"integrity": "sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==",
+			"version": "0.8.8",
+			"resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
+			"integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
 			"dev": true,
 			"dependencies": {
-				"@pkgr/utils": "^2.3.1",
-				"tslib": "^2.5.0"
+				"@pkgr/core": "^0.1.0",
+				"tslib": "^2.6.2"
 			},
 			"engines": {
 				"node": "^14.18.0 || >=16.0.0"
@@ -3433,18 +3336,6 @@
 			"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
 			"dev": true
 		},
-		"node_modules/titleize": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
-			"integrity": "sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3480,10 +3371,22 @@
 			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
 			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
 		},
+		"node_modules/ts-api-utils": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.2.1.tgz",
+			"integrity": "sha512-RIYA36cJn2WiH9Hy77hdF9r7oEwxAtB/TS9/S4Qd90Ap4z5FSiin5zEiTL44OII1Y3IIlEvxwxFUVgrHSZ/UpA==",
+			"dev": true,
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.2.0"
+			}
+		},
 		"node_modules/tslib": {
-			"version": "2.6.1",
-			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
-			"integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
 		},
 		"node_modules/tslint": {
 			"version": "6.1.3",
@@ -3621,15 +3524,6 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/untildify": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
-			"integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
 		"node_modules/uri-js": {
 			"version": "4.4.1",
 			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/ui/package.json b/ui/package.json
index 91deb24b7..7fc5df4c0 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -5,7 +5,8 @@
 		"dev": "vite",
 		"build": "vite build",
 		"preview": "vite preview --port 5050",
-		"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+		"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path ../.gitignore",
+		"lint:ci": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path ../.gitignore",
 		"custom.dev": "vite --config vite.config.custom.js",
 		"custom.build": "vite build --config vite.config.custom.js"
 	},
@@ -27,13 +28,16 @@
 	"devDependencies": {
 		"@rushstack/eslint-patch": "^1.2.0",
 		"@types/marked": "^5.0.1",
+		"@typescript-eslint/eslint-plugin": "7.0.1",
 		"@vitejs/plugin-vue": "^4.2.1",
-		"volar-service-vetur": "latest",
 		"@vue/eslint-config-prettier": "^8.0.0",
 		"eslint": "^8.39.0",
+		"eslint-config-prettier": "9.1.0",
+		"eslint-plugin-prettier": "5.1.3",
 		"eslint-plugin-vue": "^9.11.0",
-		"prettier": "^3.0.1",
+		"prettier": "3.2.5",
 		"vite": "^4.4.9",
-		"vite-plugin-monaco-editor": "^1.1.0"
+		"vite-plugin-monaco-editor": "^1.1.0",
+		"volar-service-vetur": "latest"
 	}
 }
diff --git a/ui/src/ambientTypes.ts b/ui/src/ambientTypes.ts
index ed070319a..12449a20a 100644
--- a/ui/src/ambientTypes.ts
+++ b/ui/src/ambientTypes.ts
@@ -1,6 +1,4 @@
-import {
-	StreamsyncComponentDefinition,
-} from "./streamsyncTypes";
+import { StreamsyncComponentDefinition } from "./streamsyncTypes";
 
 declare module "marked";
 declare module "vue" {
diff --git a/ui/src/builder/BuilderApp.vue b/ui/src/builder/BuilderApp.vue
index 8a9c64c5c..dd98d6c83 100644
--- a/ui/src/builder/BuilderApp.vue
+++ b/ui/src/builder/BuilderApp.vue
@@ -2,7 +2,7 @@
 	<div class="BuilderApp" tabindex="-1">
 		<div class="mainGrid">
 			<BuilderHeader class="builderHeader"></BuilderHeader>
-			<div class="sidebar" v-if="builderMode !== 'preview'">
+			<div v-if="builderMode !== 'preview'" class="sidebar">
 				<BuilderSidebar></BuilderSidebar>
 			</div>
 			<div
@@ -20,11 +20,11 @@
 								ssbm.isSelectionActive() &&
 								!ssbm.isSettingsBarCollapsed(),
 						}"
-						v-on:dragover="handleRendererDragover"
-						v-on:dragstart="handleRendererDragStart"
-						v-on:dragend="handleRendererDragEnd"
-						v-on:drop="handleRendererDrop"
-						v-on:click.capture="handleRendererClick"
+						@dragover="handleRendererDragover"
+						@dragstart="handleRendererDragStart"
+						@dragend="handleRendererDragEnd"
+						@drop="handleRendererDrop"
+						@click.capture="handleRendererClick"
 					>
 					</ComponentRenderer>
 				</div>
@@ -34,9 +34,9 @@
 						<div
 							v-if="ssbm.isSelectionActive()"
 							class="settingsHiderTab"
-							v-on:click="
+							@click="
 								ssbm.setSettingsBarCollapsed(
-									!ssbm.isSettingsBarCollapsed()
+									!ssbm.isSettingsBarCollapsed(),
 								)
 							"
 						>
@@ -50,17 +50,17 @@
 							></i>
 						</div>
 						<div
+							v-if="ssbm.isSelectionActive()"
+							:key="selectedId ?? 'noneSelected'"
 							class="settingsBar"
 							:class="{
 								collapsed: ssbm.isSettingsBarCollapsed(),
 							}"
-							:key="selectedId ?? 'noneSelected'"
-							v-if="ssbm.isSelectionActive()"
 						>
 							<BuilderSettings></BuilderSettings>
 						</div>
 
-						<div class="codeBar" v-show="builderMode == 'code'">
+						<div v-show="builderMode == 'code'" class="codeBar">
 							<BuilderEditor></BuilderEditor>
 						</div>
 					</div>
@@ -71,14 +71,14 @@
 
 		<template v-if="builderMode !== 'preview'">
 			<BuilderInstanceTracker
-				class="shortcutsTracker"
 				v-if="ssbm.isSelectionActive()"
 				:key="selectedInstancePath"
+				class="shortcutsTracker"
 				:instance-path="selectedInstancePath"
 				:vertical-offset-pixels="-48"
 				data-streamsync-cage
-				v-on:dragstart="handleRendererDragStart"
-				v-on:dragend="handleRendererDragEnd"
+				@dragstart="handleRendererDragStart"
+				@dragend="handleRendererDragEnd"
 			>
 				<BuilderComponentShortcuts
 					draggable="true"
@@ -88,24 +88,24 @@
 			</BuilderInstanceTracker>
 			<template v-if="candidateId && !isCandidacyConfirmed">
 				<BuilderInstanceTracker
+					:key="candidateInstancePath"
 					class="insertionOverlayTracker"
 					:is-off-bounds-allowed="true"
-					:key="candidateInstancePath"
 					:instance-path="candidateInstancePath"
 					:match-size="true"
 				>
 					<BuilderInsertionOverlay></BuilderInsertionOverlay>
 				</BuilderInstanceTracker>
 				<BuilderInstanceTracker
-					class="insertionLabelTracker"
 					:key="candidateInstancePath"
+					class="insertionLabelTracker"
 					:instance-path="candidateInstancePath"
 					:vertical-offset-pixels="-48"
 				>
 					<BuilderInsertionLabel>
 						{{
 							ss.getComponentDefinition(
-								ss.getComponentById(candidateId).type
+								ss.getComponentById(candidateId).type,
 							).name
 						}}
 					</BuilderInsertionLabel>
@@ -252,7 +252,7 @@ function handleRendererClick(ev: PointerEvent): void {
 	if (builderMode.value === "preview") return;
 
 	const targetEl: HTMLElement = (ev.target as HTMLElement).closest(
-		"[data-streamsync-id]"
+		"[data-streamsync-id]",
 	);
 	if (!targetEl) return;
 	const targetId = targetEl.dataset.streamsyncId;
@@ -267,7 +267,7 @@ const handleRendererDragStart = (ev: DragEvent) => {
 	if (builderMode.value === "preview") return;
 
 	const targetEl: HTMLElement = (ev.target as HTMLElement).closest(
-		"[data-streamsync-id]"
+		"[data-streamsync-id]",
 	);
 
 	const componentId = targetEl.dataset.streamsyncId;
@@ -275,7 +275,7 @@ const handleRendererDragStart = (ev: DragEvent) => {
 
 	ev.dataTransfer.setData(
 		`application/json;streamsync=${type},${componentId}`,
-		"{}"
+		"{}",
 	);
 };
 
diff --git a/ui/src/builder/BuilderComponentShortcuts.vue b/ui/src/builder/BuilderComponentShortcuts.vue
index 4aaea035f..372d2b698 100644
--- a/ui/src/builder/BuilderComponentShortcuts.vue
+++ b/ui/src/builder/BuilderComponentShortcuts.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
-		class="BuilderComponentShortcuts"
 		v-if="shortcutsInfo"
+		class="BuilderComponentShortcuts"
 		:data-streamsync-id="componentId"
 	>
 		<div class="type">
@@ -14,7 +14,7 @@
 				:class="{
 					enabled: shortcutsInfo?.isAddEnabled,
 				}"
-				v-on:click="
+				@click="
 					shortcutsInfo?.isAddEnabled
 						? (isAddMode = !isAddMode)
 						: undefined
@@ -28,7 +28,7 @@
 				:class="{
 					enabled: shortcutsInfo?.isMoveUpEnabled,
 				}"
-				v-on:click="
+				@click="
 					shortcutsInfo?.isMoveUpEnabled
 						? moveComponentUp(componentId)
 						: undefined
@@ -42,7 +42,7 @@
 				:class="{
 					enabled: shortcutsInfo?.isMoveDownEnabled,
 				}"
-				v-on:click="
+				@click="
 					shortcutsInfo?.isMoveDownEnabled
 						? moveComponentDown(componentId)
 						: undefined
@@ -57,7 +57,7 @@
 				:class="{
 					enabled: shortcutsInfo?.isCutEnabled,
 				}"
-				v-on:click="
+				@click="
 					shortcutsInfo?.isCutEnabled
 						? cutComponent(componentId)
 						: undefined
@@ -71,7 +71,7 @@
 				:class="{
 					enabled: shortcutsInfo?.isCopyEnabled,
 				}"
-				v-on:click="
+				@click="
 					shortcutsInfo?.isCopyEnabled
 						? copyComponent(componentId)
 						: undefined
@@ -85,7 +85,7 @@
 				:class="{
 					enabled: shortcutsInfo?.isPasteEnabled,
 				}"
-				v-on:click="
+				@click="
 					shortcutsInfo?.isPasteEnabled
 						? pasteComponent(componentId)
 						: undefined
@@ -99,7 +99,7 @@
 				:class="{
 					enabled: shortcutsInfo?.isGoToParentEnabled,
 				}"
-				v-on:click="
+				@click="
 					shortcutsInfo?.isGoToParentEnabled
 						? goToParent(componentId, instancePath)
 						: undefined
@@ -113,7 +113,7 @@
 				:class="{
 					enabled: shortcutsInfo?.isDeleteEnabled,
 				}"
-				v-on:click="
+				@click="
 					shortcutsInfo?.isDeleteEnabled
 						? removeComponentSubtree(componentId)
 						: undefined
@@ -128,11 +128,12 @@
 					type="text"
 					list="validChildrenTypes"
 					placeholder="Component..."
-					v-on:change="addComponent"
+					@change="addComponent"
 				/>
 				<datalist id="validChildrenTypes">
 					<option
 						v-for="(definition, type) in validChildrenTypes"
+						:key="type"
 						:value="definition.name"
 					>
 						{{ definition.name }}
@@ -209,7 +210,7 @@ function addComponent(event: Event) {
 		([type, definition]) => {
 			if (definition.name == definitionName) return true;
 			return false;
-		}
+		},
 	);
 	if (matchingTypes.length == 0) return;
 	const type = matchingTypes[0][0];
@@ -221,7 +222,7 @@ function reprocessShorcutsInfo(): void {
 	const component = ss.getComponentById(componentId.value);
 	if (!component) return;
 	const { up: isMoveUpEnabled, down: isMoveDownEnabled } = getEnabledMoves(
-		componentId.value
+		componentId.value,
 	);
 	shortcutsInfo.value = {
 		isAddEnabled: ss.getContainableTypes(componentId.value).length > 0,
@@ -242,7 +243,7 @@ watch(
 		if (typeof newPosition == "undefined" || newPosition === null) return;
 		reprocessShorcutsInfo();
 	},
-	{ flush: "post" }
+	{ flush: "post" },
 );
 
 const modifierKeyName = isPlatformMac() ? "⌘ Cmd" : "Ctrl";
diff --git a/ui/src/builder/BuilderEditor.vue b/ui/src/builder/BuilderEditor.vue
index ba1bf25c2..1eb4ff4cc 100644
--- a/ui/src/builder/BuilderEditor.vue
+++ b/ui/src/builder/BuilderEditor.vue
@@ -1,31 +1,55 @@
 <template>
-	<div class="BuilderEditor" ref="builderEditor" :class="{
-		dark: theme == 'vs-dark',
-		light: theme == 'vs-light',
-		activeLog: isLogActive,
-	}">
+	<div
+		ref="builderEditor"
+		class="BuilderEditor"
+		:class="{
+			dark: theme == 'vs-dark',
+			light: theme == 'vs-light',
+			activeLog: isLogActive,
+		}"
+	>
 		<div class="editor">
 			<div class="windowBar">
 				<div class="icon"><i class="ri-code-line ri-lg"></i></div>
 				<div class="title">Code Editor</div>
-				<button class="windowAction" tabindex="0" :title="(theme == 'vs-light' ? 'Dark' : 'Light') + ' theme'"
-					v-on:click="toggleTheme">
-					<i class="ri-sun-line ri-lg" v-show="theme == 'vs-dark'"></i>
-					<i class="ri-moon-line ri-lg" v-show="theme == 'vs-light'"></i>
+				<button
+					class="windowAction"
+					tabindex="0"
+					:title="(theme == 'vs-light' ? 'Dark' : 'Light') + ' theme'"
+					@click="toggleTheme"
+				>
+					<i
+						v-show="theme == 'vs-dark'"
+						class="ri-sun-line ri-lg"
+					></i>
+					<i
+						v-show="theme == 'vs-light'"
+						class="ri-moon-line ri-lg"
+					></i>
 				</button>
 			</div>
 			<div class="codeActions">
-				<button v-on:click="save" :disabled="editorDisabled" :title="`Save and run (${modifierKeyName}+s)`">
+				<button
+					:disabled="editorDisabled"
+					:title="`Save and run (${modifierKeyName}+s)`"
+					@click="save"
+				>
 					<i class="ri-save-line"></i>{{ "Save and run" }}
 				</button>
-				<div class="statusMessage" v-if="statusMessage">
-					<div class="statusOk ok" v-if="statusMessage.ok === true">
+				<div v-if="statusMessage" class="statusMessage">
+					<div v-if="statusMessage.ok === true" class="statusOk ok">
 						<i class="ri-check-line"></i>
 					</div>
-					<div class="statusOk notOk" v-else-if="statusMessage.ok === false">
+					<div
+						v-else-if="statusMessage.ok === false"
+						class="statusOk notOk"
+					>
 						<i class="ri-error-warning-line"></i>
 					</div>
-					<div class="statusOk processing" v-else-if="statusMessage.ok === 'processing'">
+					<div
+						v-else-if="statusMessage.ok === 'processing'"
+						class="statusOk processing"
+					>
 						<i class="ri-loader-3-line"></i>
 					</div>
 					{{ statusMessage.message }}
@@ -39,35 +63,62 @@
 				<div class="title">
 					Log <span class="countLabel">{{ logEntries.length }}</span>
 				</div>
-				<button class="windowAction" tabindex="0" title="Clear log" v-on:click="ssbm.clearLogEntries">
+				<button
+					class="windowAction"
+					tabindex="0"
+					title="Clear log"
+					@click="ssbm.clearLogEntries"
+				>
 					<i class="ri-delete-bin-line"></i>
 				</button>
-				<button class="windowAction" tabindex="0" v-on:click="toggleLog"
-					:title="(isLogActive ? 'Hide' : 'Show') + ` log (${modifierKeyName}+j)`">
-					<i class="ri-arrow-drop-up-line ri-lg" v-show="!isLogActive"></i>
-					<i class="ri-arrow-drop-down-line ri-lg" v-show="isLogActive"></i>
+				<button
+					class="windowAction"
+					tabindex="0"
+					:title="
+						(isLogActive ? 'Hide' : 'Show') +
+						` log (${modifierKeyName}+j)`
+					"
+					@click="toggleLog"
+				>
+					<i
+						v-show="!isLogActive"
+						class="ri-arrow-drop-up-line ri-lg"
+					></i>
+					<i
+						v-show="isLogActive"
+						class="ri-arrow-drop-down-line ri-lg"
+					></i>
 				</button>
 			</div>
-			<div class="entryContainer" v-if="isLogActive">
-				<div class="entry" v-for="logEntry in logEntries">
+			<div v-if="isLogActive" class="entryContainer">
+				<div
+					v-for="(logEntry, index) in logEntries"
+					:key="index"
+					class="entry"
+				>
 					<div class="icon" :class="logEntry.type">
-						<i :class="logEntryTypeIcon[logEntry.type]" class="ri-xl"></i>
+						<i
+							:class="logEntryTypeIcon[logEntry.type]"
+							class="ri-xl"
+						></i>
 					</div>
 					<div class="content">
 						<div class="header">
-							<span class="title">{{ logEntry.title
-							}}{{
-	logEntry.repeated > 0
-	? ` · Repeated ${logEntry.repeated} times`
-	: ""
-}}</span>
+							<span class="title"
+								>{{ logEntry.title
+								}}{{
+									logEntry.repeated > 0
+										? ` · Repeated ${logEntry.repeated} times`
+										: ""
+								}}</span
+							>
 							<span class="time">{{
 								logEntry.timestampReceived.toLocaleTimeString()
 							}}</span>
 						</div>
 						<div class="message">
 							{{ logEntry.message }}
-							<div class="codeContainer" v-if="logEntry.code">
+							<div v-if="logEntry.code" class="codeContainer">
 								<code>{{ logEntry.code }}</code>
 							</div>
 						</div>
@@ -104,10 +155,14 @@ const editorDisabled: Ref<boolean> = ref(false);
 let editor: monaco.editor.IStandaloneCodeEditor = null;
 const modifierKeyName = isPlatformMac() ? "⌘ Cmd" : "Ctrl";
 
-const theme: Ref<string> = ref(localStorage.getItem("currentTheme") || "vs-light");
+const theme: Ref<string> = ref(
+	localStorage.getItem("currentTheme") || "vs-light",
+);
 
 const isLogActive: Ref<boolean> = ref(ssbm.getLogEntryCount() > 0);
-const sessionTimestamp: ComputedRef<number> = computed(() => ss.getSessionTimestamp());
+const sessionTimestamp: ComputedRef<number> = computed(() =>
+	ss.getSessionTimestamp(),
+);
 
 type StatusMessage = {
 	ok: boolean | "processing";
@@ -137,7 +192,7 @@ function handleKeydown(ev: KeyboardEvent) {
 		save();
 		return;
 	}
-	
+
 	if (ev.key === "j" && isModifierKeyActive) {
 		ev.preventDefault();
 		toggleLog();
@@ -172,7 +227,7 @@ watch(
 	() => ss.getRunCode(),
 	(newRunCode) => {
 		editor.getModel().setValue(newRunCode);
-	}
+	},
 );
 
 watch(
@@ -182,7 +237,7 @@ watch(
 		nextTick(() => {
 			editor.layout();
 		});
-	}
+	},
 );
 
 watch(sessionTimestamp, () => {
diff --git a/ui/src/builder/BuilderFieldsAlign.vue b/ui/src/builder/BuilderFieldsAlign.vue
index 6b21edd45..f5e34afe2 100644
--- a/ui/src/builder/BuilderFieldsAlign.vue
+++ b/ui/src/builder/BuilderFieldsAlign.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="BuilderFieldsAlign" tabindex="-1" ref="rootEl">
+	<div ref="rootEl" class="BuilderFieldsAlign" tabindex="-1">
 		<div class="chipStackContainer">
 			<div class="chipStack">
 				<button
@@ -34,21 +34,21 @@
 			</div>
 		</div>
 
-		<div class="main" v-if="mode == 'pick' || mode == 'css'">
-			<div class="pickerContainer" v-if="mode == 'pick'">
+		<div v-if="mode == 'pick' || mode == 'css'" class="main">
+			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
-					:defaultValue="subMode"
+					:default-value="subMode"
 					:options="selectOptions"
 					@select="handleInputSelect"
 				/>
 			</div>
 
 			<input
-				type="text"
+				v-if="mode == 'css'"
 				ref="freehandInputEl"
+				type="text"
 				:value="component.content[fieldKey]"
 				@input="handleInputCss"
-				v-if="mode == 'css'"
 			/>
 		</div>
 	</div>
@@ -85,8 +85,11 @@ enum SubMode {
 	hleft = "start",
 	hcenter = "center",
 	hright = "end",
+	// eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
 	vtop = "start",
+	// eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
 	vcenter = "center",
+	// eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
 	vbottom = "end",
 }
 
@@ -164,6 +167,7 @@ const component = computed(() => ss.getComponentById(componentId.value));
 const subModes: ComputedRef<SubModes> = computed(() => {
 	if (direction.value == "vertical") return verticalSubmodes;
 	if (direction.value == "horizontal") return horizontalSubmodes;
+	return verticalSubmodes;
 });
 
 const selectOptions = computed(() => {
diff --git a/ui/src/builder/BuilderFieldsColor.vue b/ui/src/builder/BuilderFieldsColor.vue
index 89b5267d0..3a31744d1 100644
--- a/ui/src/builder/BuilderFieldsColor.vue
+++ b/ui/src/builder/BuilderFieldsColor.vue
@@ -1,12 +1,12 @@
 <template>
-	<div class="BuilderFieldsColor" tabindex="-1" ref="rootEl">
+	<div ref="rootEl" class="BuilderFieldsColor" tabindex="-1">
 		<div class="chipStackContainer">
 			<div class="chipStack">
 				<button
 					class="chip"
 					tabindex="0"
 					:class="{ active: mode == 'default' }"
-					v-on:click="
+					@click="
 						() => {
 							setMode('default');
 							setContentValue(component.id, fieldKey, undefined);
@@ -19,7 +19,7 @@
 					class="chip"
 					tabindex="0"
 					:class="{ active: mode == 'css' }"
-					v-on:click="setMode('css')"
+					@click="setMode('css')"
 				>
 					CSS
 				</button>
@@ -27,29 +27,29 @@
 					class="chip"
 					:class="{ active: mode == 'pick' }"
 					tabindex="0"
-					v-on:click="setMode('pick')"
+					@click="setMode('pick')"
 				>
 					Pick
 				</button>
 			</div>
 		</div>
 
-		<div class="main" v-if="mode == 'pick' || mode == 'css'">
-			<div class="pickerContainer" v-if="mode == 'pick'">
+		<div v-if="mode == 'pick' || mode == 'css'" class="main">
+			<div v-if="mode == 'pick'" class="pickerContainer">
 				<input
 					ref="pickerEl"
 					type="color"
 					:value="component.content[fieldKey]"
-					v-on:input="handleInput"
+					@input="handleInput"
 				/>
 			</div>
 
 			<input
-				type="text"
+				v-if="mode == 'css'"
 				ref="freehandInputEl"
+				type="text"
 				:value="component.content[fieldKey]"
-				v-on:input="handleInput"
-				v-if="mode == 'css'"
+				@input="handleInput"
 			/>
 		</div>
 	</div>
@@ -124,7 +124,7 @@ const handleInput = (ev: Event) =>
 	setContentValue(
 		component.value.id,
 		fieldKey.value,
-		(ev.target as HTMLInputElement).value
+		(ev.target as HTMLInputElement).value,
 	);
 
 onMounted(() => {
diff --git a/ui/src/builder/BuilderFieldsKeyValue.vue b/ui/src/builder/BuilderFieldsKeyValue.vue
index d83d57844..105c9ac0f 100644
--- a/ui/src/builder/BuilderFieldsKeyValue.vue
+++ b/ui/src/builder/BuilderFieldsKeyValue.vue
@@ -1,12 +1,12 @@
 <template>
-	<div class="BuilderFieldsOptions" tabindex="-1" ref="rootEl">
+	<div ref="rootEl" class="BuilderFieldsOptions" tabindex="-1">
 		<div class="chipStackContainer">
 			<div class="chipStack">
 				<button
 					class="chip"
 					:class="{ active: mode == 'assisted' }"
 					tabindex="0"
-					v-on:click="setMode('assisted')"
+					@click="setMode('assisted')"
 				>
 					Static List
 				</button>
@@ -14,7 +14,7 @@
 					class="chip"
 					tabindex="0"
 					:class="{ active: mode == 'freehand' }"
-					v-on:click="setMode('freehand')"
+					@click="setMode('freehand')"
 				>
 					JSON
 				</button>
@@ -25,12 +25,13 @@
 			<div class="staticList">
 				<div
 					v-for="(entryValue, entryKey) in assistedEntries"
+					:key="entryKey"
 					class="entry"
 				>
 					<div>{{ entryKey }} &middot; {{ entryValue }}</div>
 					<button
 						variant="subtle"
-						v-on:click="removeAssistedEntry(entryKey)"
+						@click="removeAssistedEntry(entryKey)"
 					>
 						<i class="ri-delete-bin-line"></i>
 					</button>
@@ -38,19 +39,19 @@
 			</div>
 			<div class="formAdd">
 				<input
-					type="text"
 					ref="assistedKeyEl"
 					v-model="formAdd.key"
+					type="text"
 					placeholder="Type a key..."
-					v-on:keydown.enter="addAssistedEntry"
+					@keydown.enter="addAssistedEntry"
 				/>
 				<input
-					type="text"
 					v-model="formAdd.value"
+					type="text"
 					placeholder="Type a value..."
-					v-on:keydown.enter="addAssistedEntry"
+					@keydown.enter="addAssistedEntry"
 				/>
-				<button v-on:click="addAssistedEntry">
+				<button @click="addAssistedEntry">
 					<i class="ri-add-line"></i>Add
 				</button>
 			</div>
@@ -66,7 +67,16 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, Ref, ref, toRefs, inject, computed, watch } from "vue";
+import {
+	nextTick,
+	onMounted,
+	Ref,
+	ref,
+	toRefs,
+	inject,
+	computed,
+	watch,
+} from "vue";
 import { Component } from "../streamsyncTypes";
 import BuilderFieldsObject from "./BuilderFieldsObject.vue";
 import { useComponentActions } from "./useComponentActions";
@@ -123,7 +133,7 @@ const handleSwitchToAssisted = () => {
 		component.value.content[fieldKey.value] = JSON.stringify(
 			assistedEntries.value,
 			null,
-			2
+			2,
 		);
 	}
 };
@@ -135,7 +145,7 @@ const addAssistedEntry = () => {
 	setContentValue(
 		component.value.id,
 		fieldKey.value,
-		JSON.stringify(assistedEntries.value, null, 2)
+		JSON.stringify(assistedEntries.value, null, 2),
 	);
 	formAdd.value = { key: "", value: "" };
 	assistedKeyEl.value.focus();
@@ -152,24 +162,27 @@ const removeAssistedEntry = (key: string) => {
 	setContentValue(
 		component.value.id,
 		fieldKey.value,
-		JSON.stringify(assistedEntries.value, null, 2)
+		JSON.stringify(assistedEntries.value, null, 2),
 	);
 };
 
 /**
  * Watcher for external mutations (like undo/redo).
  */
-watch(() => component.value?.content[fieldKey.value], async (currentValue) => {
-	if (!component.value) return;
-	let parsedValue: any;
-
-	try {
-		parsedValue = JSON.parse(currentValue);
-		assistedEntries.value = parsedValue;
-	} catch {
-		// If parsing fails, preserve the previous assistedEntries value
-	}
-});
+watch(
+	() => component.value?.content[fieldKey.value],
+	async (currentValue) => {
+		if (!component.value) return;
+		let parsedValue: any;
+
+		try {
+			parsedValue = JSON.parse(currentValue);
+			assistedEntries.value = parsedValue;
+		} catch {
+			// If parsing fails, preserve the previous assistedEntries value
+		}
+	},
+);
 
 onMounted(async () => {
 	const currentValue = component.value.content[fieldKey.value];
diff --git a/ui/src/builder/BuilderFieldsObject.vue b/ui/src/builder/BuilderFieldsObject.vue
index cd34c00a7..2271f4f60 100644
--- a/ui/src/builder/BuilderFieldsObject.vue
+++ b/ui/src/builder/BuilderFieldsObject.vue
@@ -1,14 +1,17 @@
 <template>
 	<textarea
-		class="BuilderFieldsObject"
 		v-capture-tabs
+		class="BuilderFieldsObject"
 		variant="code"
 		:value="component.content[fieldKey]"
-		v-on:input="(ev:Event) => formatAndSetContentValue((ev.target as HTMLInputElement).value)"
 		autocorrect="off"
 		autocomplete="off"
 		spellcheck="false"
 		:placeholder="templateField.default"
+		@input="
+			(ev: Event) =>
+				formatAndSetContentValue((ev.target as HTMLInputElement).value)
+		"
 	></textarea>
 </template>
 
diff --git a/ui/src/builder/BuilderFieldsPadding.vue b/ui/src/builder/BuilderFieldsPadding.vue
index 51885c197..7dcd35f5d 100644
--- a/ui/src/builder/BuilderFieldsPadding.vue
+++ b/ui/src/builder/BuilderFieldsPadding.vue
@@ -1,12 +1,12 @@
 <template>
-	<div class="BuilderFieldsPadding" tabindex="-1" ref="rootEl">
+	<div ref="rootEl" class="BuilderFieldsPadding" tabindex="-1">
 		<div class="chipStackContainer">
 			<div class="chipStack">
 				<button
 					class="chip"
 					tabindex="0"
 					:class="{ active: mode == 'default' }"
-					v-on:click="
+					@click="
 						() => {
 							setMode('default');
 							setContentValue(component.id, fieldKey, undefined);
@@ -19,7 +19,7 @@
 					class="chip"
 					tabindex="0"
 					:class="{ active: mode == 'css' }"
-					v-on:click="setMode('css')"
+					@click="setMode('css')"
 				>
 					CSS
 				</button>
@@ -27,64 +27,98 @@
 					class="chip"
 					:class="{ active: mode == 'pick' }"
 					tabindex="0"
-					v-on:click="setMode('pick')"
+					@click="setMode('pick')"
 				>
 					Pick
 				</button>
 			</div>
 		</div>
 
-		<div class="main" v-if="mode == 'pick' || mode == 'css'">
-			<div class="pickerContainer" v-if="mode == 'pick'">
-				<BuilderSelect :defaultValue=subMode :options=selectOptions @select="handleInputSelect"/>
+		<div v-if="mode == 'pick' || mode == 'css'" class="main">
+			<div v-if="mode == 'pick'" class="pickerContainer">
+				<BuilderSelect
+					:default-value="subMode"
+					:options="selectOptions"
+					@select="handleInputSelect"
+				/>
 				<div v-if="subMode == SubMode.all_sides" class="row">
 					<i class="ico ico-padding-4-side"></i>
-					<input type="text" :value="valuePadding[0]" v-on:input="handleInputs($event, subMode)" ref="fixedEl"	/>
+					<input
+						ref="fixedEl"
+						type="text"
+						:value="valuePadding[0]"
+						@input="handleInputs($event, subMode)"
+					/>
 					<div>px</div>
 				</div>
 				<div v-if="subMode == SubMode.xy_sides">
 					<div class="row">
 						<i class="ico ico-padding-x-side"></i>
-						<input type="text" :value=valuePadding[0] v-on:input="handleInputs($event, subMode, 'x')" ref="fixedEl"	/>
+						<input
+							ref="fixedEl"
+							type="text"
+							:value="valuePadding[0]"
+							@input="handleInputs($event, subMode, 'x')"
+						/>
 						<div>px</div>
 					</div>
 					<div class="row">
 						<i class="ico ico-padding-y-side"></i>
-						<input type="text" :value=valuePadding[2] v-on:input="handleInputs($event, subMode, 'y')"	/>
+						<input
+							type="text"
+							:value="valuePadding[2]"
+							@input="handleInputs($event, subMode, 'y')"
+						/>
 						<div>px</div>
 					</div>
 				</div>
 				<div v-if="subMode == SubMode.per_side">
 					<div class="row">
 						<i class="ico ico-padding-left-side"></i>
-						<input type="text" :value="valuePadding[0]" v-on:input="handleInputs($event, subMode, 'left')" ref="fixedEl"	/>
+						<input
+							ref="fixedEl"
+							type="text"
+							:value="valuePadding[0]"
+							@input="handleInputs($event, subMode, 'left')"
+						/>
 						<div>px</div>
 					</div>
 					<div class="row">
 						<i class="ico ico-padding-right-side"></i>
-						<input type="text" :value="valuePadding[1]" v-on:input="handleInputs($event, subMode, 'right')"	/>
+						<input
+							type="text"
+							:value="valuePadding[1]"
+							@input="handleInputs($event, subMode, 'right')"
+						/>
 						<div>px</div>
 					</div>
 					<div class="row">
 						<i class="ico ico-padding-top-side"></i>
-						<input type="text" :value="valuePadding[2]" v-on:input="handleInputs($event, subMode, 'top')"	/>
+						<input
+							type="text"
+							:value="valuePadding[2]"
+							@input="handleInputs($event, subMode, 'top')"
+						/>
 						<div>px</div>
 					</div>
 					<div class="row">
 						<i class="ico ico-padding-bottom-side"></i>
-						<input type="text" :value="valuePadding[3]" v-on:input="handleInputs($event, subMode, 'bottom')"	/>
+						<input
+							type="text"
+							:value="valuePadding[3]"
+							@input="handleInputs($event, subMode, 'bottom')"
+						/>
 						<div>px</div>
 					</div>
 				</div>
-
 			</div>
 
 			<input
-				type="text"
+				v-if="mode == 'css'"
 				ref="freehandInputEl"
+				type="text"
 				:value="component.content[fieldKey]"
-				v-on:input="handleInputCss"
-				v-if="mode == 'css'"
+				@input="handleInputCss"
 			/>
 		</div>
 	</div>
@@ -105,7 +139,7 @@ import { Component } from "../streamsyncTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
-import {languages} from "monaco-editor";
+import { languages } from "monaco-editor";
 import css = languages.css;
 
 const ss = inject(injectionKeys.core);
@@ -125,12 +159,43 @@ enum SubMode {
 	per_side = "Per side",
 }
 
-const subModes: Array<{key: SubMode, label: string, match: (v: string) => boolean, default: () => string, icon?: string}> = [
-	{'key': SubMode.all_sides, label: 'All sides', match: (v) => v.split(' ').length == 1 && v.endsWith('px'), default: () => rawPadding.value ? rawPadding.value[0] : '0px'},
-	{'key': SubMode.xy_sides, label: 'XY sides', match: (v) => v.split(' ').length == 2  && v.endsWith('px'), default: () => rawPadding.value ? rawPadding.value[2] + ' ' + rawPadding.value[0]  : '0px 0px'},
-	{'key': SubMode.per_side, label: 'Per side', match: (v) => v.split(' ').length == 4  && v.endsWith('px'), default: () => rawPadding.value ? [rawPadding.value[3], rawPadding.value[1], rawPadding.value[2], rawPadding.value[0]].join(' ') : '0px 0px 0px 0px'},
-]
-
+const subModes: Array<{
+	key: SubMode;
+	label: string;
+	match: (v: string) => boolean;
+	default: () => string;
+	icon?: string;
+}> = [
+	{
+		key: SubMode.all_sides,
+		label: "All sides",
+		match: (v) => v.split(" ").length == 1 && v.endsWith("px"),
+		default: () => (rawPadding.value ? rawPadding.value[0] : "0px"),
+	},
+	{
+		key: SubMode.xy_sides,
+		label: "XY sides",
+		match: (v) => v.split(" ").length == 2 && v.endsWith("px"),
+		default: () =>
+			rawPadding.value
+				? rawPadding.value[2] + " " + rawPadding.value[0]
+				: "0px 0px",
+	},
+	{
+		key: SubMode.per_side,
+		label: "Per side",
+		match: (v) => v.split(" ").length == 4 && v.endsWith("px"),
+		default: () =>
+			rawPadding.value
+				? [
+						rawPadding.value[3],
+						rawPadding.value[1],
+						rawPadding.value[2],
+						rawPadding.value[0],
+					].join(" ")
+				: "0px 0px 0px 0px",
+	},
+];
 
 const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	pick: pickerEl,
@@ -153,60 +218,69 @@ const selectOptions = computed(() => {
 });
 
 const subMode = computed(() => {
-	const value = component.value.content[fieldKey.value]
+	const value = component.value.content[fieldKey.value];
 	for (const k in subModes) {
 		if (value && subModes[k].match(value)) {
-			return subModes[k].key
+			return subModes[k].key;
 		}
 	}
 
-	return null
-})
+	return null;
+});
 
 const valueCss = computed(() => {
-	const value = component.value.content[fieldKey.value]
+	const value = component.value.content[fieldKey.value];
 	if (!value) {
-		return ''
+		return "";
 	} else {
-		return value
+		return value;
 	}
-})
-
+});
 
 const valuePadding = computed(() => {
-	const values = rawPadding.value
+	const values = rawPadding.value;
 	if (!values) {
-		return ["0", "0", "0", "0"]
+		return ["0", "0", "0", "0"];
 	} else {
 		return [
-				values[0].substring(0, values[0].length - 2),
-				values[1].substring(0, values[1].length - 2),
-				values[2].substring(0, values[2].length - 2),
-				values[3].substring(0, values[3].length - 2),
-		]
+			values[0].substring(0, values[0].length - 2),
+			values[1].substring(0, values[1].length - 2),
+			values[2].substring(0, values[2].length - 2),
+			values[3].substring(0, values[3].length - 2),
+		];
 	}
-})
+});
 
 /**
  * Returns the padding value as an array of 4 values, or null if the value is not valid
  */
 const rawPadding = computed(() => {
-	const value = component.value.content[fieldKey.value]
+	const value = component.value.content[fieldKey.value];
 	if (!value) {
-		return null
+		return null;
 	} else {
-		const values = value.split(' ')
-		if (values.length == 1 && values[0].endsWith('px')) {
-			return [values[0], values[0], values[0], values[0]]
-		} else if (values.length == 2 && values[0].endsWith('px') && values[0].endsWith('px')) {
-			return [values[1], values[1], values[0], values[0]]
-		} else if (values.length == 4 && values[0].endsWith('px') && values[1].endsWith('px') && values[2].endsWith('px') && values[3].endsWith('px')) {
-			return [values[3], values[1], values[0], values[2]]
+		const values = value.split(" ");
+		if (values.length == 1 && values[0].endsWith("px")) {
+			return [values[0], values[0], values[0], values[0]];
+		} else if (
+			values.length == 2 &&
+			values[0].endsWith("px") &&
+			values[0].endsWith("px")
+		) {
+			return [values[1], values[1], values[0], values[0]];
+		} else if (
+			values.length == 4 &&
+			values[0].endsWith("px") &&
+			values[1].endsWith("px") &&
+			values[2].endsWith("px") &&
+			values[3].endsWith("px")
+		) {
+			return [values[3], values[1], values[0], values[2]];
 		}
 	}
 
 	return null;
-})
+});
 
 const getInitialMode = (): Mode => {
 	if (!valueCss.value) {
@@ -215,7 +289,7 @@ const getInitialMode = (): Mode => {
 
 	for (const k in subModes) {
 		if (subModes[k].match(valueCss.value)) {
-			return "pick"
+			return "pick";
 		}
 	}
 
@@ -245,77 +319,69 @@ const handleInputSelect = (select: string) => {
 		if (subModes[k].key == select) {
 			const value = subModes[k].default();
 			component.value.content[fieldKey.value] = value;
-			setContentValue(
-					component.value.id,
-					fieldKey.value,
-					value
-			);
+			setContentValue(component.value.id, fieldKey.value, value);
 		}
 	}
 
 	nextTick(() => {
 		fixedEl.value.focus();
 	});
-}
+};
 
 const handleInputCss = (ev: Event) => {
 	setContentValue(
-			component.value.id,
-			fieldKey.value,
-			(ev.target as HTMLInputElement).value
-	)
-}
+		component.value.id,
+		fieldKey.value,
+		(ev.target as HTMLInputElement).value,
+	);
+};
 
 const handleInputs = (ev: Event, subMode: SubMode, inputType?: string) => {
-	const value = (ev.target as HTMLInputElement).value
-	const cssValue = component.value.content[fieldKey.value]
+	const value = (ev.target as HTMLInputElement).value;
+	const cssValue = component.value.content[fieldKey.value];
 
 	if (subMode == SubMode.all_sides) {
-		setContentValue(
-				component.value.id,
-				fieldKey.value,
-				value + 'px'
-		)
+		setContentValue(component.value.id, fieldKey.value, value + "px");
 	} else if (subMode == SubMode.xy_sides) {
-		const partCssValues = cssValue.split(' ')
-		if (inputType == 'x') {
-			partCssValues[1] = value + 'px'
-		} else if (inputType == 'y') {
-			partCssValues[0] = value + 'px'
+		const partCssValues = cssValue.split(" ");
+		if (inputType == "x") {
+			partCssValues[1] = value + "px";
+		} else if (inputType == "y") {
+			partCssValues[0] = value + "px";
 		}
 
 		setContentValue(
-				component.value.id,
-				fieldKey.value,
-				partCssValues.join(' ')
-		)
+			component.value.id,
+			fieldKey.value,
+			partCssValues.join(" "),
+		);
 	} else if (subMode == SubMode.per_side) {
-		const partCssValues = cssValue.split(' ')
-		if (inputType == 'top') {
-			partCssValues[0] = value + 'px'
-		} else if (inputType == 'right') {
-			partCssValues[1] = value + 'px'
-		} else if (inputType == 'bottom') {
-			partCssValues[2] = value + 'px'
-		} else if (inputType == 'left') {
-			partCssValues[3] = value + 'px'
+		const partCssValues = cssValue.split(" ");
+		if (inputType == "top") {
+			partCssValues[0] = value + "px";
+		} else if (inputType == "right") {
+			partCssValues[1] = value + "px";
+		} else if (inputType == "bottom") {
+			partCssValues[2] = value + "px";
+		} else if (inputType == "left") {
+			partCssValues[3] = value + "px";
 		}
 
 		setContentValue(
-				component.value.id,
-				fieldKey.value,
-				partCssValues.join(' ')
-		)
+			component.value.id,
+			fieldKey.value,
+			partCssValues.join(" "),
+		);
 	}
-}
+};
 
 const handleInputXYsides = (ev: Event) => {
 	setContentValue(
 		component.value.id,
 		fieldKey.value,
-		(ev.target as HTMLInputElement).value + 'px'
-	)
-}
+		(ev.target as HTMLInputElement).value + "px",
+	);
+};
 
 onMounted(() => {
 	rootEl.value.addEventListener("focus", autofocus);
diff --git a/ui/src/builder/BuilderFieldsShadow.vue b/ui/src/builder/BuilderFieldsShadow.vue
index 46a7b4ed5..4ccadd0d1 100644
--- a/ui/src/builder/BuilderFieldsShadow.vue
+++ b/ui/src/builder/BuilderFieldsShadow.vue
@@ -1,12 +1,12 @@
 <template>
-	<div class="BuilderFieldsShadow" tabindex="-1" ref="rootEl">
+	<div ref="rootEl" class="BuilderFieldsShadow" tabindex="-1">
 		<div class="chipStackContainer">
 			<div class="chipStack">
 				<button
 					class="chip"
 					tabindex="0"
 					:class="{ active: mode == 'default' }"
-					v-on:click="
+					@click="
 						() => {
 							setMode('default');
 							setContentValue(component.id, fieldKey, undefined);
@@ -19,7 +19,7 @@
 					class="chip"
 					tabindex="0"
 					:class="{ active: mode == 'css' }"
-					v-on:click="setMode('css')"
+					@click="setMode('css')"
 				>
 					CSS
 				</button>
@@ -27,77 +27,77 @@
 					class="chip"
 					:class="{ active: mode == 'pick' }"
 					tabindex="0"
-					v-on:click="setMode('pick')"
+					@click="setMode('pick')"
 				>
 					Pick
 				</button>
 			</div>
 		</div>
 
-		<div class="main" v-if="mode == 'pick' || mode == 'css'">
-			<div class="pickerContainer" v-if="mode == 'pick'">
+		<div v-if="mode == 'pick' || mode == 'css'" class="main">
+			<div v-if="mode == 'pick'" class="pickerContainer">
 				<div class="param">
 					<div class="header">
 						<div class="name">Offset X</div>
-						<div class="value" v-show="parsedValue?.offsetX">
+						<div v-show="parsedValue?.offsetX" class="value">
 							{{ parsedValue?.offsetX }}px
 						</div>
 					</div>
 					<input
+						ref="paramOffsetXEl"
 						type="range"
 						min="0"
 						max="32"
 						:value="parsedValue?.offsetX"
-						v-on:input="handleInput"
-						ref="paramOffsetXEl"
+						@input="handleInput"
 					/>
 				</div>
 				<div class="param">
 					<div class="header">
 						<div class="name">Offset Y</div>
-						<div class="value" v-show="parsedValue?.offsetY">
+						<div v-show="parsedValue?.offsetY" class="value">
 							{{ parsedValue?.offsetY }}px
 						</div>
 					</div>
 					<input
+						ref="paramOffsetYEl"
 						type="range"
 						min="0"
 						max="32"
 						:value="parsedValue?.offsetY"
-						v-on:input="handleInput"
-						ref="paramOffsetYEl"
+						@input="handleInput"
 					/>
 				</div>
 				<div class="param">
 					<div class="header">
 						<div class="name">Blur radius</div>
-						<div class="value" v-show="parsedValue?.blurRadius">
+						<div v-show="parsedValue?.blurRadius" class="value">
 							{{ parsedValue?.blurRadius }}px
 						</div>
 					</div>
 					<input
+						ref="paramBlurRadiusEl"
 						type="range"
 						min="0"
 						max="32"
 						:value="parsedValue?.blurRadius"
-						v-on:input="handleInput"
-						ref="paramBlurRadiusEl"
+						@input="handleInput"
 					/>
 				</div>
 				<div class="param">
 					<div class="header">
 						<div class="name">Spread radius</div>
-						<div class="value" v-show="parsedValue?.spreadRadius">
+						<div v-show="parsedValue?.spreadRadius" class="value">
 							{{ parsedValue?.spreadRadius }}px
 						</div>
 					</div>
 					<input
+						ref="paramSpreadRadiusEl"
 						type="range"
 						min="-16"
 						max="32"
 						:value="parsedValue?.spreadRadius"
-						v-on:input="handleInput"
-						ref="paramSpreadRadiusEl"
+						@input="handleInput"
 					/>
 				</div>
 				<div class="param">
@@ -108,17 +108,17 @@
 						ref="paramColorEl"
 						type="color"
 						:value="parsedValue?.color"
-						v-on:input="handleInput"
+						@input="handleInput"
 					/>
 				</div>
 			</div>
 
 			<input
-				type="text"
+				v-if="mode == 'css'"
 				ref="freehandInputEl"
+				type="text"
 				:value="component.content[fieldKey]"
-				v-on:input="handleCSSInput"
-				v-if="mode == 'css'"
+				@input="handleCSSInput"
 			/>
 		</div>
 	</div>
@@ -167,7 +167,7 @@ const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => ss.getComponentById(componentId.value));
 
 const boxShadowRegex =
-	/^(?<offsetX>[0-9]+)px (?<offsetY>[0-9]+)px (?<blurRadius>[0-9]+)px (?<spreadRadius>[0-9\-]+)px (?<color>#[A-Fa-f0-9]{6})$/;
+	/^(?<offsetX>[0-9]+)px (?<offsetY>[0-9]+)px (?<blurRadius>[0-9]+)px (?<spreadRadius>[0-9-]+)px (?<color>#[A-Fa-f0-9]{6})$/;
 
 const getInitialMode = (): Mode => {
 	const value = component.value.content[fieldKey.value];
@@ -209,7 +209,7 @@ const handleCSSInput = (ev: Event) => {
 	setContentValue(
 		component.value.id,
 		fieldKey.value,
-		(ev.target as HTMLInputElement).value
+		(ev.target as HTMLInputElement).value,
 	);
 };
 
diff --git a/ui/src/builder/BuilderFieldsText.vue b/ui/src/builder/BuilderFieldsText.vue
index 296dbe455..5b775b785 100644
--- a/ui/src/builder/BuilderFieldsText.vue
+++ b/ui/src/builder/BuilderFieldsText.vue
@@ -1,13 +1,15 @@
 <template>
 	<div class="BuilderFieldsText">
 		<template
-			v-if="!templateField.control || templateField.control == FieldControl.Text"
+			v-if="
+				!templateField.control ||
+				templateField.control == FieldControl.Text
+			"
 		>
 			<input
 				type="text"
 				:value="component.content[fieldKey]"
 				class="content"
-				v-on:input="handleInput"
 				autocorrect="off"
 				autocomplete="off"
 				spellcheck="false"
@@ -17,13 +19,15 @@
 						? `list-${componentId}-${fieldKey}`
 						: undefined
 				"
+				@input="handleInput"
 			/>
 			<datalist
-				:id="`list-${componentId}-${fieldKey}`"
 				v-if="templateField.options"
+				:id="`list-${componentId}-${fieldKey}`"
 			>
 				<option
 					v-for="(option, optionKey) in templateField.options"
+					:key="optionKey"
 					:value="optionKey"
 				>
 					<template
@@ -39,11 +43,11 @@
 				v-capture-tabs
 				class="content"
 				:value="component.content[fieldKey]"
-				v-on:input="handleInput"
 				:placeholder="templateField?.default"
 				autocorrect="off"
 				autocomplete="off"
 				spellcheck="false"
+				@input="handleInput"
 			>
 			</textarea>
 		</template>
@@ -76,7 +80,7 @@ const handleInput = (ev: Event) => {
 	setContentValue(
 		component.value.id,
 		fieldKey.value,
-		(ev.target as HTMLInputElement).value
+		(ev.target as HTMLInputElement).value,
 	);
 };
 </script>
diff --git a/ui/src/builder/BuilderFieldsWidth.vue b/ui/src/builder/BuilderFieldsWidth.vue
index 61bb79316..bac16cce4 100644
--- a/ui/src/builder/BuilderFieldsWidth.vue
+++ b/ui/src/builder/BuilderFieldsWidth.vue
@@ -1,12 +1,12 @@
 <template>
-	<div class="BuilderFieldsWidth" tabindex="-1" ref="rootEl">
+	<div ref="rootEl" class="BuilderFieldsWidth" tabindex="-1">
 		<div class="chipStackContainer">
 			<div class="chipStack">
 				<button
 					class="chip"
 					tabindex="0"
 					:class="{ active: mode == 'default' }"
-					v-on:click="
+					@click="
 						() => {
 							setMode('default');
 							setContentValue(component.id, fieldKey, undefined);
@@ -19,7 +19,7 @@
 					class="chip"
 					tabindex="0"
 					:class="{ active: mode == 'css' }"
-					v-on:click="setMode('css')"
+					@click="setMode('css')"
 				>
 					CSS
 				</button>
@@ -27,29 +27,37 @@
 					class="chip"
 					:class="{ active: mode == 'pick' }"
 					tabindex="0"
-					v-on:click="setMode('pick')"
+					@click="setMode('pick')"
 				>
 					Pick
 				</button>
 			</div>
 		</div>
 
-		<div class="main" v-if="mode == 'pick' || mode == 'css'">
-			<div class="pickerContainer" v-if="mode == 'pick'">
-				<BuilderSelect :defaultValue=subMode :options=selectOptions @select="handleInputSelect"/>
+		<div v-if="mode == 'pick' || mode == 'css'" class="main">
+			<div v-if="mode == 'pick'" class="pickerContainer">
+				<BuilderSelect
+					:default-value="subMode"
+					:options="selectOptions"
+					@select="handleInputSelect"
+				/>
 				<div v-if="subMode == SubMode.fixed" class="fixedContainer">
-					<input type="text" :value="valuePickFixed" v-on:input="handleInputFixed" ref="fixedEl"	/>
+					<input
+						ref="fixedEl"
+						type="text"
+						:value="valuePickFixed"
+						@input="handleInputFixed"
+					/>
 					<div>px</div>
 				</div>
-
 			</div>
 
 			<input
-				type="text"
+				v-if="mode == 'css'"
 				ref="freehandInputEl"
+				type="text"
 				:value="component.content[fieldKey]"
-				v-on:input="handleInputCss"
-				v-if="mode == 'css'"
+				@input="handleInputCss"
 			/>
 		</div>
 	</div>
@@ -88,12 +96,32 @@ enum SubMode {
 	full = "full",
 }
 
-const subModes: Array<{key: SubMode, label: string, match: (v: string) => boolean, default: string, icon?: string}> = [
-	{'key': SubMode.fixed, label: 'Fixed', match: (v) => v.endsWith('px'), default: '160px'},
-	{'key': SubMode.fit_content, label: 'Fit Content', match: (v) => v == 'fit-content', default: 'fit-content'},
-	{'key': SubMode.full, label: 'Full', match: (v) => v == '100%', default: '100%'},
-]
-
+const subModes: Array<{
+	key: SubMode;
+	label: string;
+	match: (v: string) => boolean;
+	default: string;
+	icon?: string;
+}> = [
+	{
+		key: SubMode.fixed,
+		label: "Fixed",
+		match: (v) => v.endsWith("px"),
+		default: "160px",
+	},
+	{
+		key: SubMode.fit_content,
+		label: "Fit Content",
+		match: (v) => v == "fit-content",
+		default: "fit-content",
+	},
+	{
+		key: SubMode.full,
+		label: "Full",
+		match: (v) => v == "100%",
+		default: "100%",
+	},
+];
 
 const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	pick: pickerEl,
@@ -111,40 +139,44 @@ const component = computed(() => ss.getComponentById(componentId.value));
 
 const selectOptions = computed(() => {
 	return subModes.map((m) => {
-		return { value: m.key, label: m.label, icon: "ri-split-cells-horizontal" };
+		return {
+			value: m.key,
+			label: m.label,
+			icon: "ri-split-cells-horizontal",
+		};
 	});
 });
 
 const subMode = computed(() => {
-	const value = component.value.content[fieldKey.value]
+	const value = component.value.content[fieldKey.value];
 	for (const k in subModes) {
 		if (value && subModes[k].match(value)) {
-			return subModes[k].key
+			return subModes[k].key;
 		}
 	}
 
-	return null
-})
+	return null;
+});
 
 const valueCss = computed(() => {
-	const value = component.value.content[fieldKey.value]
+	const value = component.value.content[fieldKey.value];
 	if (!value) {
-		return ''
+		return "";
 	} else {
-		return value
+		return value;
 	}
-})
+});
 
 const valuePickFixed = computed(() => {
-	const value = component.value.content[fieldKey.value]
+	const value = component.value.content[fieldKey.value];
 	if (!value) {
-		return null
-	} else if (value.endsWith('px')) {
-		return value.substring(0, value.length - 2)
+		return null;
+	} else if (value.endsWith("px")) {
+		return value.substring(0, value.length - 2);
 	}
 
-	return null
-})
+	return null;
+});
 
 const getInitialMode = (): Mode => {
 	if (!valueCss.value) {
@@ -153,7 +185,7 @@ const getInitialMode = (): Mode => {
 
 	for (const k in subModes) {
 		if (subModes[k].match(valueCss.value)) {
-			return "pick"
+			return "pick";
 		}
 	}
 
@@ -183,11 +215,7 @@ const handleInputSelect = (select: string) => {
 		if (subModes[k].key == select) {
 			const value = subModes[k].default;
 			component.value.content[fieldKey.value] = value;
-			setContentValue(
-					component.value.id,
-					fieldKey.value,
-					value
-			);
+			setContentValue(component.value.id, fieldKey.value, value);
 		}
 	}
 
@@ -196,23 +224,23 @@ const handleInputSelect = (select: string) => {
 			fixedEl.value.focus();
 		});
 	}
-}
+};
 
 const handleInputCss = (ev: Event) => {
 	setContentValue(
-			component.value.id,
-			fieldKey.value,
-			(ev.target as HTMLInputElement).value
-	)
-}
+		component.value.id,
+		fieldKey.value,
+		(ev.target as HTMLInputElement).value,
+	);
+};
 
 const handleInputFixed = (ev: Event) => {
 	setContentValue(
 		component.value.id,
 		fieldKey.value,
-		(ev.target as HTMLInputElement).value + 'px'
-	)
-}
+		(ev.target as HTMLInputElement).value + "px",
+	);
+};
 
 onMounted(() => {
 	rootEl.value.addEventListener("focus", autofocus);
diff --git a/ui/src/builder/BuilderHeader.vue b/ui/src/builder/BuilderHeader.vue
index e32b3f278..b9d5029b7 100644
--- a/ui/src/builder/BuilderHeader.vue
+++ b/ui/src/builder/BuilderHeader.vue
@@ -18,33 +18,33 @@
 		<div class="undoRedo">
 			<button
 				class="undo"
-				v-on:click="undo()"
 				:title="
 					undoRedoSnapshot.isUndoAvailable
 						? `Undo ${undoRedoSnapshot.undoDesc}`
 						: 'Nothing to undo'
 				"
 				:disabled="!undoRedoSnapshot.isUndoAvailable"
+				@click="undo()"
 			>
 				<i class="ri-arrow-go-back-line"></i>
 				Undo
 			</button>
 			<button
 				class="redo"
-				v-on:click="redo()"
 				:title="
 					undoRedoSnapshot.isRedoAvailable
 						? `Redo ${undoRedoSnapshot.redoDesc}`
 						: 'Nothing to redo'
 				"
 				:disabled="!undoRedoSnapshot.isRedoAvailable"
+				@click="redo()"
 			>
 				<i class="ri-arrow-go-forward-line"></i>
 				Redo
 			</button>
 		</div>
 		<div>
-			<button v-on:click="showStateExplorer">
+			<button @click="showStateExplorer">
 				<i class="ri-eye-line"></i>View state
 			</button>
 			<BuilderModal
@@ -59,11 +59,11 @@
 		<div class="gap"></div>
 		<div
 			class="syncHealth"
-			v-on:click="animate"
 			:class="ss.syncHealth.value"
 			:title="syncHealthStatus()"
+			@click="animate"
 		>
-			<i class="ri-refresh-line ri-lg icon" ref="syncHealthIcon"></i
+			<i ref="syncHealthIcon" class="ri-refresh-line ri-lg icon"></i
 			><span v-if="ss.syncHealth.value == 'offline'">Offline</span>
 		</div>
 	</div>
diff --git a/ui/src/builder/BuilderInstanceTracker.vue b/ui/src/builder/BuilderInstanceTracker.vue
index c88dee43e..3956e6913 100644
--- a/ui/src/builder/BuilderInstanceTracker.vue
+++ b/ui/src/builder/BuilderInstanceTracker.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="BuilderInstanceTracker" :style="rootStyle" ref="rootEl">
+	<div ref="rootEl" class="BuilderInstanceTracker" :style="rootStyle">
 		<slot></slot>
 	</div>
 </template>
@@ -49,7 +49,7 @@ const trackElement = (el: HTMLElement) => {
 		trackerX = Math.max(rendererX, trackerX); // Left boundary
 		trackerX = Math.min(
 			rendererX + rendererWidth - contentsWidth,
-			trackerX
+			trackerX,
 		); // Right boundary
 		trackerY = Math.max(MIN_TOP_PX, trackerY); // Top boundary
 		trackerY = Math.min(bodyHeight - contentsHeight, trackerY); // Bottom boundary
@@ -65,7 +65,7 @@ const trackElement = (el: HTMLElement) => {
 
 const triggerTrack = () => {
 	let el: HTMLElement = document.querySelector(
-		`.ComponentRenderer [data-streamsync-instance-path="${instancePath.value}"]`
+		`.ComponentRenderer [data-streamsync-instance-path="${instancePath.value}"]`,
 	);
 	scheduleNextTrigger();
 	if (!el) return;
diff --git a/ui/src/builder/BuilderModal.vue b/ui/src/builder/BuilderModal.vue
index 08c2071bb..146f47b7a 100644
--- a/ui/src/builder/BuilderModal.vue
+++ b/ui/src/builder/BuilderModal.vue
@@ -1,13 +1,14 @@
+<!-- eslint-disable @typescript-eslint/ban-types -->
 <template>
 	<Teleport to="#modal">
-		<div class="BuilderModal" v-on:keydown="handleKeydown" tabindex="-1">
+		<div class="BuilderModal" tabindex="-1" @keydown="handleKeydown">
 			<div class="main">
 				<div class="titleContainer">
 					<i v-if="icon" :class="`ri-${icon}-line`" class="ri-lg"></i>
 					<h2>{{ modalTitle }}</h2>
 					<button
 						:title="closeAction?.desc ?? 'Close'"
-						v-on:click="closeAction.fn"
+						@click="closeAction.fn"
 					>
 						<i class="ri-close-line ri-lg"></i>
 					</button>
@@ -15,10 +16,11 @@
 				<div class="slotContainer">
 					<slot></slot>
 				</div>
-				<div class="actionContainer" v-if="menuActions?.length > 0">
+				<div v-if="menuActions?.length > 0" class="actionContainer">
 					<button
-						v-for="action in menuActions"
-						v-on:click="action.fn"
+						v-for="(action, index) in menuActions"
+						:key="index"
+						@click="action.fn"
 					>
 						{{ action.desc }}
 					</button>
diff --git a/ui/src/builder/BuilderSelect.vue b/ui/src/builder/BuilderSelect.vue
index 22d6db290..f2681cf3b 100644
--- a/ui/src/builder/BuilderSelect.vue
+++ b/ui/src/builder/BuilderSelect.vue
@@ -1,58 +1,46 @@
-Usage:
-
-```js
-// icon is using https://remixicon.com
-const options = [
-	{ value: "auto", label: "Default" },
-	{ value: "fit-content", label: "Fit content", icon: "ri-split-cells-horizontal" },
-];
-
-const select = (value: string) => {
-	console.log(value);
-};
-```
-
-```
-<BuilderSelect
-	:options="options"
-	@select="select" />
-```
-
-```
-<BuilderSelect
-	:options="options"
-	defaultValue="fit-content"
-	@select="select" />
-```
-
-You can specify a default icon from https://remixicon.com
-
-```
+Usage: ```js // icon is using https://remixicon.com const options = [ { value:
+"auto", label: "Default" }, { value: "fit-content", label: "Fit content", icon:
+"ri-split-cells-horizontal" }, ]; const select = (value: string) => {
+console.log(value); }; ``` ```
+<BuilderSelect :options="options" @select="select" />
+``` ```
+<BuilderSelect :options="options" defaultValue="fit-content" @select="select" />
+``` You can specify a default icon from https://remixicon.com ```
 <BuilderSelect
 	:options="options"
 	defaultValue="fit-content"
 	defaultIcon="ri-expand-up-down-fill"
-	@select="select" />
+	@select="select"
+/>
 ```
 
 <template>
 	<!-- inspired from https://andrejgajdos.com/custom-select-dropdown -->
-	<div class="selectWrapper" v-on:click="open">
-		<div class="select" ref="selectEl">
+	<div class="selectWrapper" @click="open">
+		<div ref="selectEl" class="select">
 			<div class="selectTrigger">
 				<div class="selectContent">
 					<div v-if="currentLabel != null" class="flexRow">
-						<div><i :class=currentIcon></i></div>
-						<div>{{currentLabel}}</div>
+						<div><i :class="currentIcon"></i></div>
+						<div>{{ currentLabel }}</div>
 					</div>
 				</div>
-				<div class="selectArrow"><i class="ri-arrow-down-s-fill"></i></div>
+				<div class="selectArrow">
+					<i class="ri-arrow-down-s-fill"></i>
+				</div>
 			</div>
 			<div class="selectOptions">
-				<div class="selectOption" v-for="option in compOptions" :data-value="option.value" @click="select" :class="option.class">
+				<div
+					v-for="option in compOptions"
+					:key="option.value"
+					class="selectOption"
+					:data-value="option.value"
+					:class="option.class"
+					@click="select"
+				>
 					<div class="flexRow">
-						<div><i :class=option.icon></i></div>
-						<div>{{option.label}}</div>
+						<div><i :class="option.icon"></i></div>
+						<div>{{ option.label }}</div>
 					</div>
 				</div>
 			</div>
@@ -61,12 +49,12 @@ You can specify a default icon from https://remixicon.com
 </template>
 
 <script setup lang="ts">
-import {computed, ref, Ref} from "vue";
+import { computed, ref, Ref } from "vue";
 
 const selectEl: Ref<HTMLElement> = ref(null);
 
 const props = defineProps<{
-	options?: Array<{ value: string; label: string; icon?: string}>;
+	options?: Array<{ value: string; label: string; icon?: string }>;
 	defaultValue?: string;
 	defaultIcon?: string;
 }>();
@@ -74,134 +62,136 @@ const props = defineProps<{
 let currentValue = ref(props.defaultValue);
 
 const currentLabel = computed(() => {
-	const option = props.options.find((option) => option.value == currentValue.value);
-	return option ? option.label : '';
+	const option = props.options.find(
+		(option) => option.value == currentValue.value,
+	);
+	return option ? option.label : "";
 });
 
 const currentIcon = computed(() => {
-	const defaultIcon = props.defaultIcon ? props.defaultIcon : 'ri-empty';
-	const option = props.options.find((option) => option.value == currentValue.value);
+	const defaultIcon = props.defaultIcon ? props.defaultIcon : "ri-empty";
+	const option = props.options.find(
+		(option) => option.value == currentValue.value,
+	);
 	return option && option.icon ? option.icon : defaultIcon;
 });
 
-const emit = defineEmits(['select'])
+const emit = defineEmits(["select"]);
 
 let compOptions = computed(() => {
 	const options_list = props.options.map((option) => {
-		let new_option = {...option, class: ""}
-		if (new_option.value == currentValue) {
+		let new_option = { ...option, class: "" };
+		if (new_option.value == currentValue.value) {
 			new_option.class = "selected";
-			new_option.icon = new_option.icon? new_option.icon : 'ri-empty'
+			new_option.icon = new_option.icon ? new_option.icon : "ri-empty";
 		} else {
 			new_option.class = "";
-			new_option.icon = new_option.icon? new_option.icon : 'ri-empty'
+			new_option.icon = new_option.icon ? new_option.icon : "ri-empty";
 		}
-		return new_option
-	})
+		return new_option;
+	});
 
-	return options_list
-})
+	return options_list;
+});
 
 const open = () => {
-	selectEl.value.classList.toggle('open');
-}
+	selectEl.value.classList.toggle("open");
+};
 
 const select = (event) => {
-	const value = event.currentTarget.getAttribute('data-value');
+	const value = event.currentTarget.getAttribute("data-value");
 	currentValue.value = value;
-	emit('select', value);
-}
-
+	emit("select", value);
+};
 </script>
 
 <style scoped>
 @import "./ico.css";
 
 .selectWrapper {
-    position: relative;
-    user-select: none;
-    width: 100%;
+	position: relative;
+	user-select: none;
+	width: 100%;
 }
 
 .select {
-    position: relative;
-    display: flex;
-    flex-direction: column;
+	position: relative;
+	display: flex;
+	flex-direction: column;
 }
 
 .selectTrigger {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px;
-    font-weight: 400;
-    color: #3b3b3b;
-    height: 32px;
-    background: #ffffff;
-    cursor: pointer;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px;
+	font-weight: 400;
+	color: #3b3b3b;
+	height: 32px;
+	background: #ffffff;
+	cursor: pointer;
 }
 
 .selectOptions {
-    position: absolute;
-    display: block;
-    top: 100%;
-    left: 0;
-    right: 0;
-    border: 1px solid #394a6d;
-    background: #fff;
-    transition: all 0.2s;
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    z-index: 2;
+	position: absolute;
+	display: block;
+	top: 100%;
+	left: 0;
+	right: 0;
+	border: 1px solid #394a6d;
+	background: #fff;
+	transition: all 0.2s;
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+	z-index: 2;
 }
 
 .select.open .selectOptions {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: all;
+	opacity: 1;
+	visibility: visible;
+	pointer-events: all;
 }
 
 .selectOption {
-    position: relative;
-    display: block;
-    padding: 8px;
-    font-weight: 400;
-    color: #000000e6;
-    cursor: pointer;
-    transition: all 0.2s;
+	position: relative;
+	display: block;
+	padding: 8px;
+	font-weight: 400;
+	color: #000000e6;
+	cursor: pointer;
+	transition: all 0.2s;
 }
 
 .selectOption:hover {
-    cursor: pointer;
-    background-color: #000000b3;
-    color: #fff
+	cursor: pointer;
+	background-color: #000000b3;
+	color: #fff;
 }
 
 .selected {
-    background-color: #000000b3;
-    color: #fff
+	background-color: #000000b3;
+	color: #fff;
 }
 
 .selectArrow {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-weight: 300;
-    color: #000000e6;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-weight: 300;
+	color: #000000e6;
 }
 
-
 .flexRow {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
+	display: flex;
+	flex-direction: row;
+	gap: 8px;
 }
 
 .ri-empty {
 	display: block;
 	width: 12px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/builder/BuilderSettings.vue b/ui/src/builder/BuilderSettings.vue
index 7a05c5855..0d9f37aa7 100644
--- a/ui/src/builder/BuilderSettings.vue
+++ b/ui/src/builder/BuilderSettings.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="BuilderSettings" v-if="ssbm.isSelectionActive()">
+	<div v-if="ssbm.isSelectionActive()" class="BuilderSettings">
 		<div class="windowBar">
 			<div class="icon">
 				<i class="ri-settings-3-line ri-lg"></i>
@@ -8,32 +8,32 @@
 				{{ componentDefinition.name }}
 			</div>
 			<button
+				v-if="description || docsString"
 				class="windowAction"
 				tabindex="0"
-				v-on:click="toggleDocs"
-				v-if="description || docsString"
 				:title="(docsActive ? 'Hide' : 'Show') + ' inline docs'"
+				@click="toggleDocs"
 			>
 				<i class="ri-question-line ri-lg"></i>
-				<i class="ri-arrow-drop-up-line ri-lg" v-if="docsActive"></i>
-				<i class="ri-arrow-drop-down-line ri-lg" v-else></i>
+				<i v-if="docsActive" class="ri-arrow-drop-up-line ri-lg"></i>
+				<i v-else class="ri-arrow-drop-down-line ri-lg"></i>
 			</button>
 			<button
 				class="windowAction"
 				tabindex="0"
-				v-on:click="closeSettings"
 				title="Close (Esc)"
+				@click="closeSettings"
 			>
 				<i class="ri-close-line ri-lg"></i>
 			</button>
 		</div>
 
-		<div class="docs" v-if="docsActive">
+		<div v-if="docsActive" class="docs">
 			<div v-if="description">{{ description }}</div>
 			<div
 				v-if="docsString"
-				class="markdown"
 				v-dompurify-html="generateUnsanitisedMarkdownHtml()"
+				class="markdown"
 			></div>
 		</div>
 
@@ -87,8 +87,8 @@ const toggleDocs = () => {
 
 const isBindable = computed(() =>
 	Object.values(componentDefinition.value?.events ?? {}).some(
-		(e) => e.bindable
-	)
+		(e) => e.bindable,
+	),
 );
 
 const description = computed(() => {
diff --git a/ui/src/builder/BuilderSettingsBinding.vue b/ui/src/builder/BuilderSettingsBinding.vue
index 15975b0c0..7b8f9a203 100644
--- a/ui/src/builder/BuilderSettingsBinding.vue
+++ b/ui/src/builder/BuilderSettingsBinding.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="BuilderSettingsBinding" v-if="ssbm.isSelectionActive()">
+	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsBinding">
 		<div class="sectionTitle">
 			<i class="ri-links-line ri-xl"></i>
 			<h3>Binding</h3>
@@ -9,10 +9,16 @@
 				<span class="name">State element</span>
 				<input
 					:value="component.binding?.stateRef"
-					v-on:input="(ev:Event) => setBinding(component.id, (ev.target as HTMLInputElement).value)"
 					type="text"
 					class="content"
 					placeholder="my_var"
+					@input="
+						(ev: Event) =>
+							setBinding(
+								component.id,
+								(ev.target as HTMLInputElement).value,
+							)
+					"
 				/>
 				<div class="desc">
 					Links this component to a state element, in a two-way
diff --git a/ui/src/builder/BuilderSettingsHandlers.vue b/ui/src/builder/BuilderSettingsHandlers.vue
index 729973676..9d6a32834 100644
--- a/ui/src/builder/BuilderSettingsHandlers.vue
+++ b/ui/src/builder/BuilderSettingsHandlers.vue
@@ -1,14 +1,14 @@
 <template>
-	<div class="BuilderSettingsHandlers" v-if="ssbm.isSelectionActive()">
+	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsHandlers">
 		<div class="sectionTitle">
 			<i class="ri-flashlight-line ri-xl"></i>
 			<h3>Events</h3>
 		</div>
 		<div class="list">
 			<div
-				class="fieldWrapper"
 				v-for="(eventInfo, eventType) in recognisedEvents"
 				:key="eventType"
+				class="fieldWrapper"
 			>
 				<div class="columns">
 					<div class="fieldWrapperMain">
@@ -16,26 +16,26 @@
 						<select
 							class="content"
 							:value="component.handlers?.[eventType]"
-							v-on:input="handleHandlerChange($event, eventType)"
+							@input="handleHandlerChange($event, eventType)"
 						>
 							<option
+								key="No handler"
 								value=""
 								:selected="!component.handlers?.[eventType]"
-								key="No handler"
 							>
 								(No handler)
 							</option>
 							<option
+								v-for="userFunction in userFunctions"
 								:key="userFunction.name"
 								:value="userFunction.name"
-								v-for="userFunction in userFunctions"
 							>
 								{{ userFunction.name }}
 							</option>
 							<option
+								v-for="pageKey in pageKeys"
 								:key="`$goToPage_${pageKey}`"
 								:value="`$goToPage_${pageKey}`"
-								v-for="pageKey in pageKeys"
 							>
 								Go to page "{{ pageKey }}"
 							</option>
@@ -52,15 +52,15 @@
 					<div class="fieldActions">
 						<button
 							v-if="getStubCode(eventType)"
-							v-on:click="showStub(eventType)"
 							variant="subtle"
 							title="Show event handler stub"
+							@click="showStub(eventType)"
 						>
 							<i class="ri-question-line ri-lg"></i>
 						</button>
 					</div>
 				</div>
-				<div class="desc" v-if="eventInfo?.desc">
+				<div v-if="eventInfo?.desc" class="desc">
 					{{ eventInfo.desc }}
 				</div>
 			</div>
@@ -78,15 +78,15 @@
 			<div class="codeContainer">
 				<code v-dompurify-html="stubModal.highlightedCodeHtml"> </code>
 			</div>
-			<button v-on:click="copyToClipboard(stubModal.code)">
+			<button @click="copyToClipboard(stubModal.code)">
 				<i class="ri-file-copy-line ri-lg"></i>
 				Copy code to clipboard
 			</button>
 		</BuilderModal>
 		<div class="customHandler">
 			<button
-				v-on:click="showCustomHandlerModal"
 				title="Add a custom event handler"
+				@click="showCustomHandlerModal"
 			>
 				<i class="ri-add-line ri-lg"></i>Add custom handler
 			</button>
@@ -101,14 +101,15 @@
 						<div class="fieldWrapperMain">
 							<span class="name">Event type</span>
 							<input
+								v-model="customHandlerModal.eventType"
 								class="content"
 								type="text"
-								v-model="customHandlerModal.eventType"
 								list="commonEventTypes"
 							/>
 							<datalist id="commonEventTypes">
 								<option
 									v-for="commonEventType in commonEventTypes"
+									:key="commonEventType"
 									:value="commonEventType"
 								>
 									{{ commonEventType }}
@@ -122,20 +123,20 @@
 							<span class="name">Handler function</span>
 						</div>
 						<select
-							class="content"
 							v-model="customHandlerModal.handlerFunctionName"
+							class="content"
 						>
 							<option
+								v-for="userFunction in userFunctions"
 								:key="userFunction.name"
 								:value="userFunction.name"
-								v-for="userFunction in userFunctions"
 							>
 								{{ userFunction.name }}
 							</option>
 							<option
+								v-for="pageKey in pageKeys"
 								:key="`$goToPage_${pageKey}`"
 								:value="`$goToPage_${pageKey}`"
-								v-for="pageKey in pageKeys"
 							>
 								Go to page "{{ pageKey }}"
 							</option>
@@ -146,7 +147,7 @@
 					</div>
 				</div>
 
-				<button v-on:click="addCustomEventHandler()">
+				<button @click="addCustomEventHandler()">
 					<i class="ri-add-line ri-lg"></i>
 					Add
 				</button>
@@ -170,19 +171,20 @@ const ssbm = inject(injectionKeys.builderManager);
 const { setHandlerValue } = useComponentActions(ss, ssbm);
 const component = computed(() => ss.getComponentById(ssbm.getSelectedId()));
 
-const recognisedEvents:ComputedRef<StreamsyncComponentDefinition['events']> = computed(() => {
-	const { type } = component.value;
-	const { events: supportedEvents } = ss.getComponentDefinition(type);
+const recognisedEvents: ComputedRef<StreamsyncComponentDefinition["events"]> =
+	computed(() => {
+		const { type } = component.value;
+		const { events: supportedEvents } = ss.getComponentDefinition(type);
 
-	const recEvents = { ...supportedEvents };
+		const recEvents = { ...supportedEvents };
 
-	Object.keys({ ...component.value.handlers }).forEach((eventType) => {
-		if (recEvents[eventType]) return;
-		recEvents[eventType] = { desc: "Custom event" };
-	});
+		Object.keys({ ...component.value.handlers }).forEach((eventType) => {
+			if (recEvents[eventType]) return;
+			recEvents[eventType] = { desc: "Custom event" };
+		});
 
-	return recEvents;
-});
+		return recEvents;
+	});
 
 const userFunctions = computed(() => ss.getUserFunctions());
 const pageKeys = computed(() => ss.getPageKeys());
diff --git a/ui/src/builder/BuilderSettingsProperties.vue b/ui/src/builder/BuilderSettingsProperties.vue
index f952584a2..cb0345603 100644
--- a/ui/src/builder/BuilderSettingsProperties.vue
+++ b/ui/src/builder/BuilderSettingsProperties.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
-		class="BuilderSettingsProperties"
 		v-if="ssbm.isSelectionActive() && fields"
+		class="BuilderSettingsProperties"
 	>
 		<div class="sectionTitle">
 			<i class="ri-equalizer-line ri-xl"></i>
@@ -10,12 +10,12 @@
 		<div>
 			<div
 				v-for="propertyCategory in fieldCategories"
-				class="propertyCategory"
 				:key="propertyCategory"
+				class="propertyCategory"
 			>
 				<div
-					class="title"
 					v-if="fieldsByCategory[propertyCategory].length > 0"
+					class="title"
 				>
 					<h4>{{ propertyCategory }}</h4>
 				</div>
@@ -31,82 +31,82 @@
 							}}<span class="type"> : {{ fieldValue.type }}</span>
 						</div>
 						<BuilderFieldsColor
+							v-if="fieldValue.type == FieldType.Color"
 							class="content"
 							:field-key="fieldKey"
 							:component-id="selectedComponent.id"
-							v-if="fieldValue.type == FieldType.Color"
 						></BuilderFieldsColor>
 
 						<BuilderFieldsShadow
+							v-if="fieldValue.type == FieldType.Shadow"
 							class="content"
 							:field-key="fieldKey"
 							:component-id="selectedComponent.id"
-							v-if="fieldValue.type == FieldType.Shadow"
 						></BuilderFieldsShadow>
 
 						<BuilderFieldsKeyValue
+							v-if="fieldValue.type == FieldType.KeyValue"
 							class="content"
 							:field-key="fieldKey"
 							:component-id="selectedComponent.id"
-							v-if="fieldValue.type == FieldType.KeyValue"
 						></BuilderFieldsKeyValue>
 
 						<BuilderFieldsText
+							v-if="fieldValue.type == FieldType.Text"
 							:field-key="fieldKey"
 							:component-id="selectedComponent.id"
-							v-if="fieldValue.type == FieldType.Text"
 						></BuilderFieldsText>
 
 						<BuilderFieldsText
+							v-if="fieldValue.type == FieldType.Number"
 							:field-key="fieldKey"
 							:component-id="selectedComponent.id"
-							v-if="fieldValue.type == FieldType.Number"
 						></BuilderFieldsText>
 
 						<BuilderFieldsText
+							v-if="fieldValue.type == FieldType.IdKey"
 							:field-key="fieldKey"
 							:component-id="selectedComponent.id"
-							v-if="fieldValue.type == FieldType.IdKey"
 						></BuilderFieldsText>
 
 						<BuilderFieldsObject
+							v-if="fieldValue.type == FieldType.Object"
 							class="content"
 							:field-key="fieldKey"
 							:component-id="selectedComponent.id"
-							v-if="fieldValue.type == FieldType.Object"
 						></BuilderFieldsObject>
 
 						<BuilderFieldsWidth
+							v-if="fieldValue.type == FieldType.Width"
 							class="content"
 							:field-key="fieldKey"
 							:component-id="selectedComponent.id"
-							v-if="fieldValue.type == FieldType.Width"
 						></BuilderFieldsWidth>
 
 						<BuilderFieldsAlign
+							v-if="fieldValue.type == FieldType.HAlign"
 							class="content"
 							direction="horizontal"
 							:field-key="fieldKey"
 							:component-id="selectedComponent.id"
-							v-if="fieldValue.type == FieldType.HAlign"
 						></BuilderFieldsAlign>
 
 						<BuilderFieldsAlign
+							v-if="fieldValue.type == FieldType.VAlign"
 							class="content"
 							direction="vertical"
 							:field-key="fieldKey"
 							:component-id="selectedComponent.id"
-							v-if="fieldValue.type == FieldType.VAlign"
 						></BuilderFieldsAlign>
 
 						<BuilderFieldsPadding
+							v-if="fieldValue.type == FieldType.Padding"
 							class="content"
 							:field-key="fieldKey"
 							:component-id="selectedComponent.id"
-							v-if="fieldValue.type == FieldType.Padding"
 						></BuilderFieldsPadding>
 
-						<div class="desc" v-if="fieldValue.desc">
+						<div v-if="fieldValue.desc" class="desc">
 							{{ fieldValue.desc }}
 						</div>
 					</div>
@@ -150,10 +150,10 @@ const fieldsByCategory = computed(() => {
 		[FieldCategory.General]: entries.filter(
 			([_, fieldValue]) =>
 				!fieldValue.category ||
-				fieldValue.category == FieldCategory.General
+				fieldValue.category == FieldCategory.General,
 		),
 		[FieldCategory.Style]: entries.filter(
-			([_, fieldValue]) => fieldValue.category == FieldCategory.Style
+			([_, fieldValue]) => fieldValue.category == FieldCategory.Style,
 		),
 	};
 	return result;
diff --git a/ui/src/builder/BuilderSettingsVisibility.vue b/ui/src/builder/BuilderSettingsVisibility.vue
index 25dc49b59..13594fb66 100644
--- a/ui/src/builder/BuilderSettingsVisibility.vue
+++ b/ui/src/builder/BuilderSettingsVisibility.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="BuilderSettingsVisibility" v-if="ssbm.isSelectionActive()">
+	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsVisibility">
 		<div class="sectionTitle">
 			<i class="ri-eye-line ri-xl"></i>
 			<h3>Visibility</h3>
@@ -13,40 +13,46 @@
 							typeof component.visible == 'undefined' ||
 							component.visible === true,
 					}"
-					v-on:click="() => setVisibleValue(component.id, true)"
+					@click="() => setVisibleValue(component.id, true)"
 				>
 					Yes
 				</div>
 				<div
 					class="chip"
 					:class="{ active: component.visible === false }"
-					v-on:click="() => setVisibleValue(component.id, false)"
+					@click="() => setVisibleValue(component.id, false)"
 				>
 					No
 				</div>
 				<div
 					class="chip"
 					:class="{ active: typeof component.visible === 'string' }"
-					v-on:click="() => setVisibleValue(component.id, '')"
+					@click="() => setVisibleValue(component.id, '')"
 				>
 					Custom
 				</div>
 			</div>
 			<div
-				class="fieldWrapper"
 				v-if="typeof component.visible === 'string'"
+				class="fieldWrapper"
 			>
 				<span class="name">Visibility value</span>
 				<input
 					:value="component.visible"
-					v-on:input="(ev:Event) => setVisibleValue(component.id, (ev.target as HTMLInputElement).value)"
 					type="text"
 					class="content"
 					placeholder="my_visibility_state_value"
+					@input="
+						(ev: Event) =>
+							setVisibleValue(
+								component.id,
+								(ev.target as HTMLInputElement).value,
+							)
+					"
 				/>
 				<div class="desc">
-					Reference a state or context element that will evaluate to true or
-					false. Reference the element directly, i.e. use
+					Reference a state or context element that will evaluate to
+					true or false. Reference the element directly, i.e. use
 					"my_var" instead of "@{my_var}".
 				</div>
 			</div>
diff --git a/ui/src/builder/BuilderSidebarToolbar.vue b/ui/src/builder/BuilderSidebarToolbar.vue
index f5d0fb9ea..7795d53ba 100644
--- a/ui/src/builder/BuilderSidebarToolbar.vue
+++ b/ui/src/builder/BuilderSidebarToolbar.vue
@@ -9,13 +9,18 @@
 				v-for="(categoryData, category) in categoriesData"
 				:key="category"
 			>
-				<div class="category" v-if="categoryData.isVisible !== false">
+				<div v-if="categoryData.isVisible !== false" class="category">
 					<div class="title">
 						<i :class="categoryData.icon ?? 'ri-question-line'"></i>
 						<h4>{{ category }}</h4>
 
-						<div class="drop-arrow" v-on:click="toggleCollapseCategory(category)">
-							<i class="ri-xl" :class="
+						<div
+							class="drop-arrow"
+							@click="toggleCollapseCategory(category)"
+						>
+							<i
+								class="ri-xl"
+								:class="
 									categoryData.isCollapsed
 										? 'ri-arrow-drop-down-line'
 										: 'ri-arrow-drop-up-line'
@@ -24,7 +29,7 @@
 						</div>
 					</div>
 
-					<div class="components" v-show="!categoryData.isCollapsed">
+					<div v-show="!categoryData.isCollapsed" class="components">
 						<div
 							v-for="(
 								definition, type
@@ -34,8 +39,8 @@
 							:title="definition.description"
 							draggable="true"
 							:data-component-type="type"
-							v-on:dragend="handleDragEnd($event)"
-							v-on:dragstart="handleDragStart($event, type)"
+							@dragend="handleDragEnd($event)"
+							@dragstart="handleDragStart($event, type)"
 						>
 							{{ definition.name ?? type }}
 							<i
@@ -67,7 +72,7 @@ type CategoryData = {
 	icon?: string;
 };
 
-const categoriesData:Ref<Record<string, CategoryData>> = ref({
+const categoriesData: Ref<Record<string, CategoryData>> = ref({
 	Root: {
 		isVisible: false,
 	},
@@ -94,8 +99,8 @@ const categoriesData:Ref<Record<string, CategoryData>> = ref({
 });
 
 function toggleCollapseCategory(categoryId: string) {
-	const categoryData = categoriesData.value[categoryId]; 
-	categoryData.isCollapsed = !categoryData.isCollapsed; 
+	const categoryData = categoriesData.value[categoryId];
+	categoryData.isCollapsed = !categoryData.isCollapsed;
 }
 
 const definitionsByDisplayCategory = computed(() => {
diff --git a/ui/src/builder/BuilderSidebarTree.vue b/ui/src/builder/BuilderSidebarTree.vue
index 97cd90698..5fb32b3f3 100644
--- a/ui/src/builder/BuilderSidebarTree.vue
+++ b/ui/src/builder/BuilderSidebarTree.vue
@@ -1,39 +1,52 @@
 <template>
 	<div class="BuilderSidebarTree">
-		<div class="sectionTitle" v-if="!isSearchActive">
+		<div v-if="!isSearchActive" class="sectionTitle">
 			<i class="ri-node-tree ri-xl"></i>
 			<h3>Component Tree</h3>
 			<i
-				v-on:click="toggleSearch"
 				class="ri-search-line ri-xl searchIcon"
 				title="Search"
+				@click="toggleSearch"
 			></i>
 		</div>
-		<div class="sectionTitle" v-if="isSearchActive">
-			<input type="text" placeholder="Search..." v-model="searchQuery" ref="searchInput" />
+		<div v-if="isSearchActive" class="sectionTitle">
+			<input
+				ref="searchInput"
+				v-model="searchQuery"
+				type="text"
+				placeholder="Search..."
+			/>
 			<i
-				v-on:click="goToPreviousMatch"
 				class="ri-arrow-left-s-line ri-xl searchIcon"
 				:class="{ disabled: !matchAvailable }"
-				:title="matchAvailable ? `Go to match ${previousMatchIndex+1} of ${matchingComponents.length}` : `Previous match`"
+				:title="
+					matchAvailable
+						? `Go to match ${previousMatchIndex + 1} of ${matchingComponents.length}`
+						: `Previous match`
+				"
+				@click="goToPreviousMatch"
 			></i>
 			<i
-				v-on:click="goToNextMatch"
 				class="ri-arrow-right-s-line ri-xl searchIcon"
 				:class="{ disabled: !matchAvailable }"
-				:title="matchAvailable ? `Go to match ${nextMatchIndex+1} of ${matchingComponents.length}` : `Next match`"
-				></i>
+				:title="
+					matchAvailable
+						? `Go to match ${nextMatchIndex + 1} of ${matchingComponents.length}`
+						: `Next match`
+				"
+				@click="goToNextMatch"
+			></i>
 			<i
-				v-on:click="toggleSearch"
 				class="ri-close-line ri-xl searchIcon"
 				title="Close"
+				@click="toggleSearch"
 			></i>
 		</div>
-		<div class="components" ref="componentTree">
+		<div ref="componentTree" class="components">
 			<div
-				class="selector"
 				v-for="component in rootComponents"
 				:key="component.id"
+				class="selector"
 			>
 				<BuilderTreeBranch
 					:component-id="component.id"
@@ -42,7 +55,7 @@
 			</div>
 		</div>
 		<div class="addPage">
-			<button v-on:click="addPage">
+			<button @click="addPage">
 				<i class="ri-add-line"></i>Add Page
 			</button>
 		</div>
@@ -63,7 +76,7 @@ const ssbm = inject(injectionKeys.builderManager);
 const { createAndInsertComponent, goToComponentParentPage } =
 	useComponentActions(ss, ssbm);
 
-const searchInput:Ref<HTMLInputElement> = ref(null);
+const searchInput: Ref<HTMLInputElement> = ref(null);
 const isSearchActive: Ref<boolean> = ref(false);
 const searchQuery: Ref<string> = ref(null);
 const matchIndex: Ref<number> = ref(-1);
@@ -108,7 +121,7 @@ async function selectMatch() {
 
 const previousMatchIndex = computed(() => {
 	if (!matchAvailable.value) return -1;
-	let i = matchIndex.value-1;
+	let i = matchIndex.value - 1;
 	if (i < 0) {
 		i = matchingComponents.value.length - 1;
 	}
@@ -117,7 +130,7 @@ const previousMatchIndex = computed(() => {
 
 const nextMatchIndex = computed(() => {
 	if (!matchAvailable.value) return -1;
-	let i = matchIndex.value+1;
+	let i = matchIndex.value + 1;
 	if (i > matchingComponents.value.length - 1) {
 		i = 0;
 	}
@@ -125,7 +138,7 @@ const nextMatchIndex = computed(() => {
 });
 
 function goToPreviousMatch() {
-	matchIndex.value = previousMatchIndex.value;	
+	matchIndex.value = previousMatchIndex.value;
 	selectMatch();
 }
 
@@ -147,8 +160,8 @@ watch(matchingComponents, () => {
 	matchIndex.value = -1;
 });
 
-const matchAvailable: ComputedRef<boolean> = computed(() => 
-	matchingComponents.value?.length > 0
+const matchAvailable: ComputedRef<boolean> = computed(
+	() => matchingComponents.value?.length > 0,
 );
 
 async function addPage() {
diff --git a/ui/src/builder/BuilderStateExplorer.vue b/ui/src/builder/BuilderStateExplorer.vue
index cb32d7fd6..1c146c42d 100644
--- a/ui/src/builder/BuilderStateExplorer.vue
+++ b/ui/src/builder/BuilderStateExplorer.vue
@@ -1,20 +1,20 @@
 <template>
-    <div class="BuilderStateExplorer">
-        <BuilderStateExplorerTreeBranch :root-accessors="[]"></BuilderStateExplorerTreeBranch>
-    </div>
+	<div class="BuilderStateExplorer">
+		<BuilderStateExplorerTreeBranch
+			:root-accessors="[]"
+		></BuilderStateExplorerTreeBranch>
+	</div>
 </template>
 
 <script setup lang="ts">
-import BuilderStateExplorerTreeBranch from './BuilderStateExplorerTreeBranch.vue';
-
+import BuilderStateExplorerTreeBranch from "./BuilderStateExplorerTreeBranch.vue";
 </script>
 
 <style scoped>
 @import "./sharedStyles.css";
 
 .BuilderStateExplorer {
-    max-height: 70vh;
-    overflow-y: auto;
+	max-height: 70vh;
+	overflow-y: auto;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/builder/BuilderStateExplorerTreeBranch.vue b/ui/src/builder/BuilderStateExplorerTreeBranch.vue
index b85fd89d5..0a6503488 100644
--- a/ui/src/builder/BuilderStateExplorerTreeBranch.vue
+++ b/ui/src/builder/BuilderStateExplorerTreeBranch.vue
@@ -2,45 +2,53 @@
 	<div class="BuilderStateExplorerTreeBranch">
 		<template v-if="isRootValueObject">
 			<div
-				class="toggleChildren"
-				v-on:click="toggleChildrenVisible"
 				v-if="rootAccessors.length > 0"
+				class="toggleChildren"
+				@click="toggleChildrenVisible"
 			>
 				<i
-					class="ri-arrow-drop-up-line ri-lg"
 					v-if="areChildrenVisible"
+					class="ri-arrow-drop-up-line ri-lg"
 				></i>
 				<i
-					class="ri-arrow-drop-down-line ri-lg"
 					v-if="!areChildrenVisible"
+					class="ri-arrow-drop-down-line ri-lg"
 				></i>
 				{{ rootAccessors.at(-1) }}
 			</div>
-			<div class="children" v-if="areChildrenVisible">
+			<div v-if="areChildrenVisible" class="children">
 				<template v-if="rootValue">
-                    <div v-for="childKey in sortedChildrenKeys">
-                        <BuilderStateExplorerTreeBranch
-                            :root-accessors="[...rootAccessors, childKey]"
-                        ></BuilderStateExplorerTreeBranch>
-				    </div>
-                </template>
-                <div v-else>
-                    <em>No state elements found.</em>
-                </div>
+					<div v-for="childKey in sortedChildrenKeys" :key="childKey">
+						<BuilderStateExplorerTreeBranch
+							:root-accessors="[...rootAccessors, childKey]"
+						></BuilderStateExplorerTreeBranch>
+					</div>
+				</template>
+				<div v-else>
+					<em>No state elements found.</em>
+				</div>
 			</div>
 		</template>
-		<div class="valueContainer" v-else>
-            {{ rootAccessors.at(-1) }}
-            <span class="stateValueType"> : {{ rootValueType }}</span>
-            <span class="stateValue">{{ displayableRootValue }}</span>
-            <span class="spacer"></span>
-			<button class="action" title="Copy reference to clipboard" v-on:click="copyReferenceToClipboard()">
+		<div v-else class="valueContainer">
+			{{ rootAccessors.at(-1) }}
+			<span class="stateValueType"> : {{ rootValueType }}</span>
+			<span class="stateValue">{{ displayableRootValue }}</span>
+			<span class="spacer"></span>
+			<button
+				class="action"
+				title="Copy reference to clipboard"
+				@click="copyReferenceToClipboard()"
+			>
 				<i class="ri-braces-line ri-nd"></i>
 			</button>
-			<button class="action" title="Copy contents to clipboard" v-on:click="copyContentsToClipboard()">
+			<button
+				class="action"
+				title="Copy contents to clipboard"
+				@click="copyContentsToClipboard()"
+			>
 				<i class="ri-file-copy-2-line ri-nd"></i>
 			</button>
-        </div>
+		</div>
 	</div>
 </template>
 
@@ -71,37 +79,35 @@ function getStateValue(accessors: string[]) {
 }
 
 const rootValue = computed(() => {
-    return getStateValue(rootAccessors.value);
+	return getStateValue(rootAccessors.value);
 });
 
 function isStateObject(v: any) {
-    return typeof v == "object" 
-    && v !== null
-    && !Array.isArray(v);
+	return typeof v == "object" && v !== null && !Array.isArray(v);
 }
 
 const isRootValueObject = computed(() => {
 	const v = rootValue.value;
-    return isStateObject(v);
+	return isStateObject(v);
 });
 
 const sortedChildrenKeys = computed(() => {
-    if (!isRootValueObject.value) return [];
-    const keys = Object.keys(rootValue.value);
-    keys.sort((a, b) => {
-        const aValue = getStateValue([...rootAccessors.value, a]);
-        const bValue = getStateValue([...rootAccessors.value, b]);
-        if (isStateObject(aValue) && !isStateObject(bValue)) return -1;
-        if (!isStateObject(aValue) && isStateObject(bValue)) return 1;
-        return a > b ? 1 : -1;
-    });
-    return keys;
+	if (!isRootValueObject.value) return [];
+	const keys = Object.keys(rootValue.value);
+	keys.sort((a, b) => {
+		const aValue = getStateValue([...rootAccessors.value, a]);
+		const bValue = getStateValue([...rootAccessors.value, b]);
+		if (isStateObject(aValue) && !isStateObject(bValue)) return -1;
+		if (!isStateObject(aValue) && isStateObject(bValue)) return 1;
+		return a > b ? 1 : -1;
+	});
+	return keys;
 });
 
 const rootValueType = computed(() => {
-    const v = rootValue.value;
-    if (Array.isArray(v)) return "array";
-    return typeof rootValue.value;
+	const v = rootValue.value;
+	if (Array.isArray(v)) return "array";
+	return typeof rootValue.value;
 });
 
 const displayableRootValue = computed(() => {
@@ -118,15 +124,14 @@ function toggleChildrenVisible() {
 }
 
 function copyReferenceToClipboard() {
-    const stateRef = rootAccessors.value.join(".");
-    navigator.clipboard.writeText(stateRef);
+	const stateRef = rootAccessors.value.join(".");
+	navigator.clipboard.writeText(stateRef);
 }
 
 function copyContentsToClipboard() {
-    const content = rootValue.value?.toString();
-    navigator.clipboard.writeText(content);
+	const content = rootValue.value?.toString();
+	navigator.clipboard.writeText(content);
 }
-
 </script>
 
 <style scoped>
@@ -148,10 +153,10 @@ function copyContentsToClipboard() {
 	margin-left: v-bind('rootAccessors.length > 0 ? "16px" : "0"');
 }
 .valueContainer {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    white-space: nowrap;
+	display: flex;
+	gap: 4px;
+	align-items: center;
+	white-space: nowrap;
 }
 
 .stateValueType {
@@ -163,15 +168,15 @@ function copyContentsToClipboard() {
 	padding: 4px;
 	font-size: 0.7rem;
 	margin-left: 4px;
-    flex: 1 1 auto;
-    overflow: hidden;
+	flex: 1 1 auto;
+	overflow: hidden;
 }
 
 .action {
-    background-color: var(--builderBackgroundColor);
-    padding: 4px;
-    border-radius: 50%;
-    min-width: 16px;
-    min-height: 16px;
+	background-color: var(--builderBackgroundColor);
+	padding: 4px;
+	border-radius: 50%;
+	min-width: 16px;
+	min-height: 16px;
 }
 </style>
diff --git a/ui/src/builder/BuilderSwitcher.vue b/ui/src/builder/BuilderSwitcher.vue
index 861e7904b..af6edcddb 100644
--- a/ui/src/builder/BuilderSwitcher.vue
+++ b/ui/src/builder/BuilderSwitcher.vue
@@ -1,25 +1,22 @@
 <template>
 	<div class="BuilderSwitcher">
-		<div
-			v-on:click="selectOption('ui')"
-			:class="{ active: activeId == 'ui' }"
-		>
+		<div :class="{ active: activeId == 'ui' }" @click="selectOption('ui')">
 			<i class="ri-brush-line"></i>
 			User Interface
 		</div>
 		<div
-			v-on:click="selectOption('code')"
 			:class="{ active: activeId == 'code' }"
+			@click="selectOption('code')"
 		>
 			<i class="ri-code-line"></i>
 			Code
-			<span class="countLabel" v-show="logEntryCount > 0">{{
+			<span v-show="logEntryCount > 0" class="countLabel">{{
 				logEntryCount
 			}}</span>
 		</div>
 		<div
-			v-on:click="selectOption('preview')"
 			:class="{ active: activeId == 'preview' }"
+			@click="selectOption('preview')"
 		>
 			<i class="ri-pages-line"></i>
 			Preview
diff --git a/ui/src/builder/BuilderTreeBranch.vue b/ui/src/builder/BuilderTreeBranch.vue
index e01a89b39..90212ef2a 100644
--- a/ui/src/builder/BuilderTreeBranch.vue
+++ b/ui/src/builder/BuilderTreeBranch.vue
@@ -5,32 +5,32 @@
 			:class="{
 				selected: isSelected,
 				childless: childless,
-				matching: isMatching
+				matching: isMatching,
 			}"
-			v-on:click="selfSelectComponent"
-			v-on:keydown.enter="selfSelectComponent"
-			v-on:dragover="handleDragOver"
-			v-on:dragstart="handleDragStart"
-			v-on:dragend="handleDragEnd"
-			v-on:drop="handleDrop"
 			:title="summaryText"
 			:data-branch-component-id="componentId"
 			tabindex="0"
 			draggable="true"
+			@click="selfSelectComponent"
 			ref="rootEl"
+			@keydown.enter="selfSelectComponent"
+			@dragover="handleDragOver"
+			@dragstart="handleDragStart"
+			@dragend="handleDragEnd"
+			@drop="handleDrop"
 		>
 			<div
 				v-if="!childless"
 				class="toggleChildren"
-				v-on:click="toggleChildrenVisible"
+				@click="toggleChildrenVisible"
 			>
 				<i
-					class="ri-arrow-drop-up-line ri-lg"
 					v-if="childrenVisible"
+					class="ri-arrow-drop-up-line ri-lg"
 				></i>
 				<i
-					class="ri-arrow-drop-down-line ri-lg"
 					v-if="!childrenVisible"
+					class="ri-arrow-drop-down-line ri-lg"
 				></i>
 			</div>
 			<span class="type">{{ name }}</span>
@@ -41,15 +41,15 @@
 				&nbsp;&middot;&nbsp;<i class="ri-eye-off-line ri-lg"></i>
 			</template>
 
-			<span class="preview" v-if="previewText">
+			<span v-if="previewText" class="preview">
 				&nbsp;&middot;&nbsp;{{ previewText }}</span
 			>
 		</div>
-		<div class="children" v-if="childrenVisible && !childless">
+		<div v-if="childrenVisible && !childless" class="children">
 			<div
-				class="child"
 				v-for="childComponent in childrenComponents"
 				:key="childComponent.id"
+				class="child"
 			>
 				<BuilderTreeBranch
 					:component-id="childComponent.id"
@@ -72,8 +72,12 @@ import { useEvaluator } from "../renderer/useEvaluator";
 const ss = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 
-const { createAndInsertComponent, isParentViable, moveComponent, goToComponentParentPage } =
-	useComponentActions(ss, ssbm);
+const {
+	createAndInsertComponent,
+	isParentViable,
+	moveComponent,
+	goToComponentParentPage,
+} = useComponentActions(ss, ssbm);
 const { getComponentInfoFromDrag, removeInsertionCandidacy } =
 	useDragDropComponent(ss);
 const { isComponentVisible } = useEvaluator(ss);
@@ -93,7 +97,7 @@ const isSelectedBySelf = ref(false);
 const rootEl: Ref<HTMLElement> = ref(null);
 
 const componentDefinition = computed(() =>
-	ss.getComponentDefinition(component.value.type)
+	ss.getComponentDefinition(component.value.type),
 );
 
 const name = computed(() => {
@@ -112,7 +116,8 @@ const childless = computed(() => {
 });
 
 const isMatching = computed(() => {
-	if (matchingComponents.value?.some(c => c.id == componentId.value)) return true;
+	if (matchingComponents.value?.some((c) => c.id == componentId.value))
+		return true;
 	return false;
 });
 
@@ -201,7 +206,7 @@ const handleDragStart = (ev: DragEvent) => {
 	ssbm.setSelection(null);
 	ev.dataTransfer.setData(
 		`application/json;streamsync=${component.value.type},${component.value.id}`,
-		"{}"
+		"{}",
 	);
 };
 
diff --git a/ui/src/builder/builderManager.ts b/ui/src/builder/builderManager.ts
index c002ed76f..17374c420 100644
--- a/ui/src/builder/builderManager.ts
+++ b/ui/src/builder/builderManager.ts
@@ -247,13 +247,13 @@ export function generateBuilderManager() {
 	async function hashLogEntryContents(logEntry: LogEntryContents) {
 		const strData = JSON.stringify(logEntry);
 		let hash = 5981;
-		for (var i = 0; i < strData.length; i++) {
-			hash = ((hash << 5) + hash) + strData.charCodeAt(i);
+		for (let i = 0; i < strData.length; i++) {
+			hash = (hash << 5) + hash + strData.charCodeAt(i);
 		}
 		const hashStr = hash.toString(16).padStart(2, "0");
 		return hashStr;
 	}
-	
+
 	const handleLogEntry = async (logEntryContents: LogEntryContents) => {
 		const { type, title, message, code } = logEntryContents;
 		const fingerprint = await hashLogEntryContents(logEntryContents);
diff --git a/ui/src/builder/useComponentActions.ts b/ui/src/builder/useComponentActions.ts
index 58f32e2c3..8e7127978 100644
--- a/ui/src/builder/useComponentActions.ts
+++ b/ui/src/builder/useComponentActions.ts
@@ -8,7 +8,6 @@ import {
 } from "../streamsyncTypes";
 
 export function useComponentActions(ss: Core, ssbm: BuilderManager) {
-
 	function generateNewComponentId() {
 		const radix = 36;
 		let newId = "";
@@ -16,8 +15,8 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 		const randomArr = new Uint16Array(16);
 		window.crypto.getRandomValues(randomArr);
 
-		randomArr.forEach(n => {
-			newId += (n % radix).toString(radix)
+		randomArr.forEach((n) => {
+			newId += (n % radix).toString(radix);
 		});
 
 		return newId;
@@ -75,7 +74,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 		}
 
 		const nextSibling = positionfulSiblings.filter(
-			(c) => c.position == position + 1
+			(c) => c.position == position + 1,
 		)[0];
 
 		const transactionId = `move-down-${componentId}`;
@@ -101,7 +100,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	function moveComponent(
 		componentId: Component["id"],
 		newParentId: Component["id"],
-		newPosition?: number
+		newPosition?: number,
 	) {
 		const component = ss.getComponentById(componentId);
 		if (!component) return;
@@ -127,7 +126,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	function createComponent(
 		type: string,
 		parentId: Component["id"],
-		position?: number
+		position?: number,
 	) {
 		const newId = generateNewComponentId();
 		const definition = ss.getComponentDefinition(type);
@@ -161,7 +160,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	function createAndInsertComponent(
 		type: string,
 		parentId: Component["id"],
-		position?: number
+		position?: number,
 	): Component["id"] {
 		const component = createComponent(type, parentId, position);
 		const transactionId = `create-${component.id}`;
@@ -183,11 +182,11 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	 */
 	function repositionHigherSiblings(
 		componentId: Component["id"],
-		delta: number
+		delta: number,
 	) {
 		const component = ss.getComponentById(componentId);
 		const positionless = ss.getComponentDefinition(
-			component.type
+			component.type,
 		).positionless;
 		if (positionless) return;
 		const siblings = ss
@@ -195,7 +194,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 			.filter((c) => c.id !== componentId);
 		const higherSiblings = siblings.filter(
 			(siblingComponent) =>
-				siblingComponent.position >= component.position
+				siblingComponent.position >= component.position,
 		);
 		higherSiblings.map((c) => {
 			ssbm.registerPreMutation(c);
@@ -212,7 +211,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	 * @returns Subtree
 	 */
 	function getFlatComponentSubtree(
-		componentId: Component["id"]
+		componentId: Component["id"],
 	): Component[] {
 		const component = ss.getComponentById(componentId);
 		const subtree: Component[] = [];
@@ -258,7 +257,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	 */
 	function isParentViable(
 		childType: string,
-		parentId: Component["id"]
+		parentId: Component["id"],
 	): boolean {
 		const containableTypes = ss.getContainableTypes(parentId);
 		return containableTypes.includes(childType);
@@ -307,7 +306,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	 */
 	function goToParent(
 		targetId: Component["id"],
-		targetInstancePath?: string
+		targetInstancePath?: string,
 	) {
 		const targetComponent = ss.getComponentById(targetId);
 		if (!targetComponent) return;
@@ -354,7 +353,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 			.map((component) => {
 				const containableTypes = getContainableTypes(
 					componentMap,
-					component.parentId
+					component.parentId,
 				);
 				return containableTypes.includes(component.type);
 			})
@@ -390,7 +389,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 			const children = ss.getComponents(parentId);
 			const positionableChildren = children.filter((c) => {
 				const positionless = ss.getComponentDefinition(
-					c.type
+					c.type,
 				)?.positionless;
 				if (positionless) return false;
 				return true;
@@ -435,7 +434,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	 */
 	function getNewSubtreeWithRegeneratedIds(subtree: Component[]) {
 		const deepCopiedSubtree: Component[] = JSON.parse(
-			JSON.stringify(subtree)
+			JSON.stringify(subtree),
 		);
 		deepCopiedSubtree.forEach((c) => {
 			const newId = generateNewComponentId();
@@ -491,7 +490,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	 */
 	function pasteCutComponent(
 		targetParentId: Component["id"],
-		subtree: Component[]
+		subtree: Component[],
 	) {
 		// MUTATION
 
@@ -500,7 +499,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 		rootComponent.parentId = targetParentId;
 		rootComponent.position = getNextInsertionPosition(
 			targetParentId,
-			rootComponent.type
+			rootComponent.type,
 		);
 
 		const transactionId = `paste-cut-${targetParentId}`;
@@ -518,14 +517,14 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	 */
 	function pasteCopyComponent(
 		targetParentId: Component["id"],
-		subtree: Component[]
+		subtree: Component[],
 	) {
 		// Regenerate clipboard for future pastes
 
 		ssbm.setClipboard({
 			operation: ClipboardOperation.Copy,
 			jsonSubtree: JSON.stringify(
-				getNewSubtreeWithRegeneratedIds(subtree)
+				getNewSubtreeWithRegeneratedIds(subtree),
 			),
 		});
 
@@ -535,7 +534,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 		rootComponent.parentId = targetParentId;
 		rootComponent.position = getNextInsertionPosition(
 			targetParentId,
-			rootComponent.type
+			rootComponent.type,
 		);
 
 		const transactionId = `paste-copy-${targetParentId}`;
@@ -553,7 +552,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	 */
 	function getNextInsertionPosition(
 		targetParentId: Component["id"],
-		childType: Component["type"]
+		childType: Component["type"],
 	) {
 		const positionless = ss.getComponentDefinition(childType).positionless;
 		if (positionless) {
@@ -565,7 +564,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 		if (children.length > 0) {
 			const position = Math.max(
 				Math.max(...children.map((c: Component) => c.position)) + 1,
-				0
+				0,
 			);
 			return position;
 		} else {
@@ -611,7 +610,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 					ss.addComponent(JSON.parse(mutation.jsonPre));
 					return;
 				}
-			}
+			},
 		);
 		ss.sendComponentUpdate();
 	}
@@ -639,7 +638,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 					ss.deleteComponent(mutationId);
 					return;
 				}
-			}
+			},
 		);
 		ss.sendComponentUpdate();
 	}
@@ -650,7 +649,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	function setContentValue(
 		componentId: Component["id"],
 		fieldKey: string,
-		value: string
+		value: string,
 	) {
 		const component = ss.getComponentById(componentId);
 		if (!component) return;
@@ -670,7 +669,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	 */
 	function setVisibleValue(
 		componentId: Component["id"],
-		visible: Component["visible"]
+		visible: Component["visible"],
 	) {
 		const component = ss.getComponentById(componentId);
 		if (!component) return;
@@ -695,7 +694,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	function setBinding(
 		componentId: Component["id"],
 		stateRef: Component["binding"]["stateRef"],
-		targetEventType?: Component["binding"]["eventType"]
+		targetEventType?: Component["binding"]["eventType"],
 	) {
 		const component = ss.getComponentById(componentId);
 		if (!component) return;
@@ -706,10 +705,10 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 		} else {
 			const definition = ss.getComponentDefinition(component.type);
 			const events = Object.entries(definition.events).filter(
-				([eventType, event]) => event.bindable
+				([eventType, event]) => event.bindable,
 			);
 			const bindableEventTypes = events.map(
-				([eventType, event]) => eventType
+				([eventType, event]) => eventType,
 			);
 			eventType = bindableEventTypes?.[0];
 		}
@@ -739,7 +738,7 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 	function setHandlerValue(
 		componentId: Component["id"],
 		eventType: string,
-		userFunction: string
+		userFunction: string,
 	) {
 		const component = ss.getComponentById(componentId);
 		if (!component) return;
@@ -764,7 +763,9 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 		ss.sendComponentUpdate();
 	}
 
-	function getContainingPageId (componentId: Component["id"]): Component["id"] {
+	function getContainingPageId(
+		componentId: Component["id"],
+	): Component["id"] {
 		const component = ss.getComponentById(componentId);
 		if (!component || component.type == "root") return null;
 		if (component.type == "page") return componentId;
@@ -773,11 +774,12 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 
 	async function goToComponentParentPage(componentId: Component["id"]) {
 		const component = ss.getComponentById(componentId);
-		const componentDefinition = ss.getComponentDefinition(component.type)?.name;
+		const componentDefinition = ss.getComponentDefinition(
+			component.type,
+		)?.name;
 		if (!componentDefinition) return; // Unknown component, not rendered
-		ss.setActivePageId(getContainingPageId(componentId));		
-	};	
-	
+		ss.setActivePageId(getContainingPageId(componentId));
+	}
 
 	return {
 		moveComponent,
@@ -803,6 +805,6 @@ export function useComponentActions(ss: Core, ssbm: BuilderManager) {
 		isGoToParentAllowed,
 		getEnabledMoves,
 		goToParent,
-		goToComponentParentPage
+		goToComponentParentPage,
 	};
 }
diff --git a/ui/src/builder/useDragDropComponent.ts b/ui/src/builder/useDragDropComponent.ts
index b63950e6a..1d07b9384 100644
--- a/ui/src/builder/useDragDropComponent.ts
+++ b/ui/src/builder/useDragDropComponent.ts
@@ -46,7 +46,7 @@ export function useDragDropComponent(ss: Core) {
 
 		const cageEl = el.closest("[data-streamsync-cage]");
 		const startEl = cageEl ?? el;
-		let targetEl: HTMLElement = startEl.closest("[data-streamsync-id]");
+		const targetEl: HTMLElement = startEl.closest("[data-streamsync-id]");
 		if (!targetEl) return;
 		return targetEl.dataset.streamsyncId;
 	}
@@ -70,7 +70,7 @@ export function useDragDropComponent(ss: Core) {
 
 	function findSuitableParent(
 		targetId: Component["id"],
-		insertedType: Component["type"]
+		insertedType: Component["type"],
 	): Component["id"] {
 		const targetComponent = ss.getComponentById(targetId);
 		if (!targetComponent) return;
@@ -102,7 +102,7 @@ export function useDragDropComponent(ss: Core) {
 		const parentId = findSuitableParent(dropTargetId, draggedType);
 		if (!parentId || parentId == draggedId) return;
 		const parentComponentEl: HTMLElement = targetEl.closest(
-			`[data-streamsync-id="${parentId}"]`
+			`[data-streamsync-id="${parentId}"]`,
 		);
 		const parentComponentInstancePath =
 			parentComponentEl.dataset.streamsyncInstancePath;
@@ -132,7 +132,7 @@ export function useDragDropComponent(ss: Core) {
 		// If the user goes too far off the candidate, reject candidacy
 
 		const candidateEl: HTMLElement = document.querySelector(
-			`[data-streamsync-instance-path="${candidateInstancePath.value}"]`
+			`[data-streamsync-instance-path="${candidateInstancePath.value}"]`,
 		);
 		if (
 			getDistanceFromElement(ev.clientX, ev.clientY, candidateEl) >
@@ -145,7 +145,7 @@ export function useDragDropComponent(ss: Core) {
 		// Find nearest slot and its position
 
 		const slotEls = getSlotElementsOfCrackedContainer(
-			candidateInstancePath.value
+			candidateInstancePath.value,
 		);
 		if (slotEls.length == 0) return;
 
@@ -183,7 +183,7 @@ export function useDragDropComponent(ss: Core) {
 	function getSlotElementsOfCrackedContainer(instancePath: string) {
 		const el = getContainerInInstancePath(instancePath);
 		const slotEls: HTMLElement[] = Array.from(
-			el.querySelectorAll(`[data-streamsync-position]`)
+			el.querySelectorAll(`[data-streamsync-position]`),
 		);
 		return slotEls;
 	}
@@ -191,7 +191,7 @@ export function useDragDropComponent(ss: Core) {
 	function getNearestSlot(x: number, y: number, slotEls: HTMLElement[]) {
 		// Calculate distance from nearest vertex and sort
 
-		let slotsElsWithDistance = slotEls
+		const slotsElsWithDistance = slotEls
 			.map((el: HTMLElement) => {
 				return { el, distance: getDistanceFromElement(x, y, el) };
 			})
@@ -222,14 +222,14 @@ export function useDragDropComponent(ss: Core) {
 	}
 
 	function getContainerInInstancePath(instancePath: string): HTMLElement {
-		let rootEl: HTMLElement = document.querySelector(
-			`[data-streamsync-instance-path="${instancePath}"]`
+		const rootEl: HTMLElement = document.querySelector(
+			`[data-streamsync-instance-path="${instancePath}"]`,
 		);
 		if (rootEl.hasAttribute("data-streamsync-container")) {
 			return rootEl;
 		}
 		const containers = rootEl.querySelectorAll(
-			`[data-streamsync-container]`
+			`[data-streamsync-container]`,
 		);
 		for (let i = 0; i < containers.length; i++) {
 			const container = containers[i];
@@ -238,7 +238,7 @@ export function useDragDropComponent(ss: Core) {
 			// the container belongs to the component in question -not to a child.
 
 			const closestRootEl = container.closest(
-				"[data-streamsync-instance-path]"
+				"[data-streamsync-instance-path]",
 			);
 			if (closestRootEl == rootEl) {
 				return container as HTMLElement;
diff --git a/ui/src/core/index.ts b/ui/src/core/index.ts
index 55daec89b..69c5c3096 100644
--- a/ui/src/core/index.ts
+++ b/ui/src/core/index.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ref, Ref } from "vue";
 import {
 	Component,
@@ -20,19 +22,21 @@ const KEEP_ALIVE_DELAY_MS = 60000;
 
 export function generateCore() {
 	let sessionId: string = null;
-	let sessionTimestamp: Ref<number> = ref(null);
-	let mode: Ref<"run" | "edit"> = ref(null);
-	let runCode: Ref<string> = ref(null);
+	const sessionTimestamp: Ref<number> = ref(null);
+	const mode: Ref<"run" | "edit"> = ref(null);
+	const runCode: Ref<string> = ref(null);
 	const components: Ref<ComponentMap> = ref({});
 	const userFunctions: Ref<UserFunction[]> = ref([]);
 	const userState: Ref<Record<string, any>> = ref({});
 	let webSocket: WebSocket;
 	const syncHealth: Ref<"idle" | "connected" | "offline"> = ref("idle");
 	let frontendMessageCounter = 0;
-	const frontendMessageMap: Ref<Map<number, { callback?: Function }>> = ref(new Map());
+	const frontendMessageMap: Ref<Map<number, { callback?: Function }>> = ref(
+		new Map(),
+	);
 	let mailInbox: MailItem[] = [];
 	const mailSubscriptions: { mailType: string; fn: Function }[] = [];
-	let activePageId: Ref<Component["id"]> = ref(null);
+	const activePageId: Ref<Component["id"]> = ref(null);
 
 	function getFrontendMessageMap() {
 		return frontendMessageMap.value;
@@ -124,17 +128,17 @@ export function generateCore() {
 			Splits the key while respecting escaped dots.
 			For example, "files.myfile\.sh" will be split into ["files", "myfile.sh"] 
 			*/
-			
-			const mutationFlag = key.charAt(0)
+
+			const mutationFlag = key.charAt(0);
 			const accessor = parseAccessor(key.substring(1));
-			let lastElementIndex = accessor.length - 1
+			const lastElementIndex = accessor.length - 1;
 			let stateRef = userState.value;
-			
+
 			// Check if the accessor is meant for deletion.
-			const isDeletion = mutationFlag === '-';
-			
+			const isDeletion = mutationFlag === "-";
+
 			for (let i = 0; i < lastElementIndex; i++) {
-				let nextStateRef = stateRef?.[accessor[i]];
+				const nextStateRef = stateRef?.[accessor[i]];
 				if (typeof nextStateRef === "object" && nextStateRef !== null) {
 					stateRef = nextStateRef;
 				} else if (!isDeletion) {
@@ -143,7 +147,7 @@ export function generateCore() {
 					stateRef = stateRef[accessor[i]];
 				}
 			}
-	
+
 			if (isDeletion) {
 				// If it's a deletion operation, delete the property.
 				delete stateRef[accessor.at(-1)];
@@ -153,7 +157,6 @@ export function generateCore() {
 			}
 		});
 	}
-	
 
 	function clearFrontendMap() {
 		frontendMessageMap.value.forEach(({ callback }) => {
@@ -189,7 +192,10 @@ export function generateCore() {
 				webSocket.close();
 				initSession();
 				return;
-			} else if (message.messageType == "eventResponse" || message.messageType == "stateEnquiryResponse") {
+			} else if (
+				message.messageType == "eventResponse" ||
+				message.messageType == "stateEnquiryResponse"
+			) {
 				ingestMutations(message.payload?.mutations);
 				collateMail(message.payload?.mail);
 			}
@@ -279,8 +285,14 @@ export function generateCore() {
 		return eventPayload;
 	}
 
-	async function forwardEvent(event: Event, instancePath: InstancePath, includeEventPayload: boolean) {
-		const eventPayload = includeEventPayload ? getPayloadFromEvent(event) : null;
+	async function forwardEvent(
+		event: Event,
+		instancePath: InstancePath,
+		includeEventPayload: boolean,
+	) {
+		const eventPayload = includeEventPayload
+			? getPayloadFromEvent(event)
+			: null;
 		let callback: Function;
 
 		if (event instanceof CustomEvent) {
@@ -351,13 +363,18 @@ export function generateCore() {
 
 	function setupMessageFollowUp(trackingId: number) {
 		const INITIAL_FOLLOWUP_MS = 100;
-		const SUBSEQUENT_FOLLOWUPS_MS = 1000; 
+		const SUBSEQUENT_FOLLOWUPS_MS = 1000;
 
 		const checkIfStateEnquiryRequired = () => {
 			const isPending = frontendMessageMap.value.has(trackingId);
 			if (!isPending) return;
-			sendStateEnquiry(() => setTimeout(checkIfStateEnquiryRequired, SUBSEQUENT_FOLLOWUPS_MS));
-		}
+			sendStateEnquiry(() =>
+				setTimeout(
+					checkIfStateEnquiryRequired,
+					SUBSEQUENT_FOLLOWUPS_MS,
+				),
+			);
+		};
 		setTimeout(checkIfStateEnquiryRequired, INITIAL_FOLLOWUP_MS);
 	}
 
@@ -365,13 +382,13 @@ export function generateCore() {
 		type: string,
 		payload: object | (() => Promise<object>),
 		callback?: Function,
-		track = false
+		track = false,
 	) {
 		const trackingId = frontendMessageCounter++;
 		try {
 			if (callback || track) {
 				frontendMessageMap.value.set(trackingId, {
-					callback
+					callback,
 				});
 			}
 			if (track) {
diff --git a/ui/src/core/loadExtensions.ts b/ui/src/core/loadExtensions.ts
index 59cb8f07a..c1eb9faa2 100644
--- a/ui/src/core/loadExtensions.ts
+++ b/ui/src/core/loadExtensions.ts
@@ -3,37 +3,41 @@ import { registerComponentTemplate } from "./templateMap";
 const CUSTOM_COMPONENTS_GLOBAL_VAR = "StreamsyncCustomComponentTemplates";
 
 export async function loadExtensions(extensionPaths: string[]) {
-    await Promise.all(extensionPaths.map(async (path) => {
-        const lcPath = path.toLocaleLowerCase();
-        if (lcPath.endsWith(".js")) {
-            await importCustomComponentTemplate(path);
-        } else if (lcPath.endsWith(".css")) {
-            loadStylesheet(path);
-        }
-    }));
+	await Promise.all(
+		extensionPaths.map(async (path) => {
+			const lcPath = path.toLocaleLowerCase();
+			if (lcPath.endsWith(".js")) {
+				await importCustomComponentTemplate(path);
+			} else if (lcPath.endsWith(".css")) {
+				loadStylesheet(path);
+			}
+		}),
+	);
 }
 
 async function importCustomComponentTemplate(path: string) {
-    console.log(`Importing custom component templates at "${path}"...`);
-    await import(/* @vite-ignore */getRelativeExtensionsPath() + path);
-    Object.entries(window[CUSTOM_COMPONENTS_GLOBAL_VAR])?.forEach(([key, template]) => {
-        console.log(`Registering template for "${key}".`)
-        registerComponentTemplate(`custom_${key}`, template);
-    });	
+	console.log(`Importing custom component templates at "${path}"...`);
+	await import(/* @vite-ignore */ getRelativeExtensionsPath() + path);
+	Object.entries(window[CUSTOM_COMPONENTS_GLOBAL_VAR])?.forEach(
+		([key, template]) => {
+			console.log(`Registering template for "${key}".`);
+			registerComponentTemplate(`custom_${key}`, template);
+		},
+	);
 }
 
 function loadStylesheet(path: string) {
-    const el:HTMLLinkElement = document.createElement("link");
-    el.rel = "stylesheet";
-    el.href = getRelativeExtensionsPath() + path;
-    document.head.appendChild(el);
+	const el: HTMLLinkElement = document.createElement("link");
+	el.rel = "stylesheet";
+	el.href = getRelativeExtensionsPath() + path;
+	document.head.appendChild(el);
 }
 
 function getRelativeExtensionsPath() {
-    let pathname = window.location.pathname;
-    if (!pathname.endsWith("/")) {
-        pathname += "/";
-    }
+	let pathname = window.location.pathname;
+	if (!pathname.endsWith("/")) {
+		pathname += "/";
+	}
 
-    return `${pathname}extensions/`;
-}
\ No newline at end of file
+	return `${pathname}extensions/`;
+}
diff --git a/ui/src/core/parsing.ts b/ui/src/core/parsing.ts
index ce001f0ba..ed6133b46 100644
--- a/ui/src/core/parsing.ts
+++ b/ui/src/core/parsing.ts
@@ -1,33 +1,33 @@
 /**
  * Splits a flat state accessor e.g. "animals.dog" into an array ["animals", "dog"]
  * Dots can be escaped with backslash.
- * 
- * @param s 
+ *
+ * @param s
  */
-export function parseAccessor(s:string):string[] {
-    let currentItem = "";
-    const accessor = [];
-    let isEscaped = false;
+export function parseAccessor(s: string): string[] {
+	let currentItem = "";
+	const accessor = [];
+	let isEscaped = false;
 
-    // Avoided regex for speed and because Safari doesn't support negative lookbehind
+	// Avoided regex for speed and because Safari doesn't support negative lookbehind
 
-    for (let i = 0; i < s.length; i++) {
-        const currentChar = s[i];
-        if (currentChar === "." && !isEscaped) {
-            accessor.push(currentItem);
-            currentItem = "";
-            continue;
-        }
-        currentItem += currentChar;
-        if (currentChar === "\\") {
-            isEscaped = true;
-        } else {
-            isEscaped = false;
-        }
-    }
-    accessor.push(currentItem);
+	for (let i = 0; i < s.length; i++) {
+		const currentChar = s[i];
+		if (currentChar === "." && !isEscaped) {
+			accessor.push(currentItem);
+			currentItem = "";
+			continue;
+		}
+		currentItem += currentChar;
+		if (currentChar === "\\") {
+			isEscaped = true;
+		} else {
+			isEscaped = false;
+		}
+	}
+	accessor.push(currentItem);
 
-    const replacedAccessor = accessor.map(s => s.replaceAll("\\.", "."));
+	const replacedAccessor = accessor.map((s) => s.replaceAll("\\.", "."));
 
-    return replacedAccessor;
-}
\ No newline at end of file
+	return replacedAccessor;
+}
diff --git a/ui/src/core/templateMap.ts b/ui/src/core/templateMap.ts
index 63d330848..728d4922c 100644
--- a/ui/src/core/templateMap.ts
+++ b/ui/src/core/templateMap.ts
@@ -43,8 +43,6 @@ import CoreVideoPlayer from "../core_components/CoreVideoPlayer.vue";
 import { StreamsyncComponentDefinition } from "../streamsyncTypes";
 import { h } from "vue";
 
-
-
 const templateMap = {
 	root: CoreRoot,
 	page: CorePage,
@@ -88,19 +86,18 @@ const templateMap = {
 };
 
 if (STREAMSYNC_LIVE_CCT === "yes") {
-
 	/*
 	Assigns the components in custom_components to the template map,
 	allowing for live updates when developing custom component templates. 
 	*/
 
-	const liveCCT:Record<string, any> = (await import("../custom_components")).default;
+	const liveCCT: Record<string, any> = (await import("../custom_components"))
+		.default;
 	Object.entries(liveCCT).forEach(([componentType, template]) => {
 		templateMap[`custom_${componentType}`] = template;
 	});
 }
 
-
 function fallbackTemplate(type: string) {
 	const message = `Component type "${type}" not supported. If it's a custom component, please ensure it's been loaded.`;
 	return {
diff --git a/ui/src/core/typeHierarchy.ts b/ui/src/core/typeHierarchy.ts
index 2eacc5cbb..5b476c14b 100644
--- a/ui/src/core/typeHierarchy.ts
+++ b/ui/src/core/typeHierarchy.ts
@@ -1,9 +1,12 @@
 import { Component, ComponentMap } from "../streamsyncTypes";
-import { getComponentDefinition, getSupportedComponentTypes } from "./templateMap";
+import {
+	getComponentDefinition,
+	getSupportedComponentTypes,
+} from "./templateMap";
 
 function getDisallowedSet(
 	components: ComponentMap,
-	componentId: Component["id"]
+	componentId: Component["id"],
 ): Set<Component["type"]> {
 	const { type } = components[componentId];
 	const supportedTypes = getSupportedComponentTypes();
@@ -14,7 +17,7 @@ function getDisallowedSet(
 	const disallowedDefs = typesAndDefs.filter(
 		(tad) =>
 			tad.definition.allowedParentTypes &&
-			!tad.definition.allowedParentTypes.includes(type)
+			!tad.definition.allowedParentTypes.includes(type),
 	);
 	const disallowed = new Set(disallowedDefs.map((tad) => tad.type));
 
@@ -23,10 +26,12 @@ function getDisallowedSet(
 
 function getAllowedSet(
 	components: ComponentMap,
-	componentId: Component["id"]
+	componentId: Component["id"],
 ): Set<Component["type"]> {
 	const { type, parentId } = components[componentId];
-	const supportedTypes = getSupportedComponentTypes().filter(t => t !== "root");
+	const supportedTypes = getSupportedComponentTypes().filter(
+		(t) => t !== "root",
+	);
 	const { allowedChildrenTypes } = getComponentDefinition(type);
 	if (!allowedChildrenTypes) return new Set([]);
 
@@ -44,7 +49,7 @@ function getAllowedSet(
 
 export function getContainableTypes(
 	components: ComponentMap,
-	componentId: Component["id"]
+	componentId: Component["id"],
 ): Component["type"][] {
 	const allowed = Array.from(getAllowedSet(components, componentId));
 	const disallowed = Array.from(getDisallowedSet(components, componentId));
diff --git a/ui/src/core_components/CoreButton.vue b/ui/src/core_components/CoreButton.vue
index b60742a15..c56616cd2 100644
--- a/ui/src/core_components/CoreButton.vue
+++ b/ui/src/core_components/CoreButton.vue
@@ -1,5 +1,10 @@
 <template>
-	<button class="CoreButton" :aria-disabled="isDisabled" ref="rootEl" v-on:click="handleClick">
+	<button
+		ref="rootEl"
+		class="CoreButton"
+		:aria-disabled="isDisabled"
+		@click="handleClick"
+	>
 		<i
 			v-if="fields.icon.value"
 			:class="[`ri-${fields.icon.value}-line`, `ri-${fields.icon.value}`]"
@@ -60,7 +65,7 @@ export default {
 					yes: "Yes",
 					no: "No",
 				},
-				desc: "Disables all event handlers."
+				desc: "Disables all event handlers.",
 			},
 			buttonColor,
 			buttonTextColor,
@@ -72,7 +77,7 @@ export default {
 			},
 			buttonShadow,
 			separatorColor,
-			cssClasses
+			cssClasses,
 		},
 		previewField: "text",
 	},
@@ -82,21 +87,24 @@ export default {
 import { Ref, inject, ref } from "vue";
 import injectionKeys from "../injectionKeys";
 
-const rootEl:Ref<HTMLElement> = ref(null);
+const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
 const isDisabled = inject(injectionKeys.isDisabled);
 
-watch(fields.isDisabled, (newFieldValue: string) => {
-	isDisabled.value = newFieldValue == "yes";
-}, {
-	immediate: true
-});
+watch(
+	fields.isDisabled,
+	(newFieldValue: string) => {
+		isDisabled.value = newFieldValue == "yes";
+	},
+	{
+		immediate: true,
+	},
+);
 
 function handleClick(ev: MouseEvent) {
 	const ssEv = getClick(ev);
 	rootEl.value.dispatchEvent(ssEv);
 }
-
 </script>
 
 <style scoped>
@@ -116,5 +124,4 @@ function handleClick(ev: MouseEvent) {
 	opacity: 0.9;
 	filter: contrast(90%);
 }
-
 </style>
diff --git a/ui/src/core_components/CoreColumn.vue b/ui/src/core_components/CoreColumn.vue
index 8cfc3dd33..7afa54318 100644
--- a/ui/src/core_components/CoreColumn.vue
+++ b/ui/src/core_components/CoreColumn.vue
@@ -9,14 +9,14 @@
 			collapsed: isCollapsed,
 		}"
 	>
-		<div class="header" v-if="fields.title.value || isCollapsible">
-			<div class="titleContainer" v-if="!isCollapsed">
+		<div v-if="fields.title.value || isCollapsible" class="header">
+			<div v-if="!isCollapsed" class="titleContainer">
 				<h2 v-if="fields.title.value">{{ fields.title.value }}</h2>
 			</div>
 			<div
-				class="collapser"
-				v-on:click="toggleCollapsed"
 				v-if="isCollapsible"
+				class="collapser"
+				@click="toggleCollapsed"
 			>
 				<IconGen
 					class="collapserArrow"
@@ -24,16 +24,16 @@
 				></IconGen>
 			</div>
 		</div>
-		<div class="collapsedTitle" v-if="isCollapsed && fields.title.value">
+		<div v-if="isCollapsed && fields.title.value" class="collapsedTitle">
 			<div class="transformed">
 				<div class="content">{{ fields.title.value }}</div>
 			</div>
 		</div>
 		<BaseContainer
 			class="container"
-			:contentHAlign="fields.contentHAlign.value"
-			:contentVAlign="fields.contentVAlign.value"
-			:contentPadding="fields.contentPadding.value"
+			:content-h-align="fields.contentHAlign.value"
+			:content-v-align="fields.contentVAlign.value"
+			:content-padding="fields.contentPadding.value"
 		>
 			<slot></slot>
 		</BaseContainer>
@@ -168,6 +168,7 @@ const columnsData: ComputedRef<Ref> = computed(() => {
 		const columnsData = instanceData.at(i);
 		return columnsData;
 	}
+	return null;
 });
 
 const position = computed(() => ss.getComponentById(componentId)?.position);
diff --git a/ui/src/core_components/CoreColumns.vue b/ui/src/core_components/CoreColumns.vue
index a91add7d9..7ef68e39d 100644
--- a/ui/src/core_components/CoreColumns.vue
+++ b/ui/src/core_components/CoreColumns.vue
@@ -14,7 +14,7 @@ export default {
 		allowedChildrenTypes: ["column", "repeater", "separator"],
 		category: "Layout",
 		fields: {
-			cssClasses
+			cssClasses,
 		},
 	},
 };
diff --git a/ui/src/core_components/CoreDataframe.vue b/ui/src/core_components/CoreDataframe.vue
index e4f9c36f4..4b8c44513 100644
--- a/ui/src/core_components/CoreDataframe.vue
+++ b/ui/src/core_components/CoreDataframe.vue
@@ -1,27 +1,23 @@
 <template>
-	<div class="CoreDataframe" ref="rootEl">
-		<div class="tools" ref="toolsEl">
-			<div class="search" v-if="fields.enableSearch.value === 'yes'">
+	<div ref="rootEl" class="CoreDataframe">
+		<div ref="toolsEl" class="tools">
+			<div v-if="fields.enableSearch.value === 'yes'" class="search">
 				<i class="ri-search-line"></i>
 				<input
 					type="text"
-					v-on:change="handleSearchChange"
 					placeholder="Search..."
+					@change="handleSearchChange"
 				/>
 			</div>
 			<button
-				class="download"
-				v-on:click="download"
 				v-if="fields.enableDownload.value === 'yes'"
+				class="download"
+				@click="download"
 			>
 				<i class="ri-download-2-line"></i>
 			</button>
 		</div>
-		<div
-			class="gridContainer"
-			v-on:scroll="handleScroll"
-			ref="gridContainerEl"
-		>
+		<div ref="gridContainerEl" class="gridContainer" @scroll="handleScroll">
 			<div
 				class="grid"
 				:style="gridStyle"
@@ -41,13 +37,13 @@
 				</div>
 				<div
 					v-for="(columnName, columnPosition) in shownColumnNames"
+					:key="columnName"
 					:data-streamsync-grid-col="
 						columnPosition + (isIndexShown ? 1 : 0)
 					"
-					:key="columnName"
 					class="cell headerCell"
 					:style="gridHeadStyle"
-					v-on:click="handleSetOrder($event, columnName)"
+					@click="handleSetOrder($event, columnName)"
 				>
 					<div class="name">
 						{{ columnName }}
@@ -62,12 +58,12 @@
 						}"
 					>
 						<i
-							class="ri-arrow-down-line"
 							v-show="!orderSetting?.descending"
+							class="ri-arrow-down-line"
 						></i>
 						<i
-							class="ri-arrow-up-line"
 							v-show="orderSetting?.descending"
+							class="ri-arrow-up-line"
 						></i>
 					</div>
 					<div class="widthAdjuster"></div>
@@ -85,9 +81,9 @@
 						</template>
 					</div>
 					<div
-						class="cell"
-						v-for="(columnName, columnPosition) in shownColumnNames"
+						v-for="columnName in shownColumnNames"
 						:key="columnName"
+						class="cell"
 					>
 						{{ row[columnName] }}
 					</div>
diff --git a/ui/src/core_components/CoreHeader.vue b/ui/src/core_components/CoreHeader.vue
index 4672edce2..01a08e3cc 100644
--- a/ui/src/core_components/CoreHeader.vue
+++ b/ui/src/core_components/CoreHeader.vue
@@ -11,7 +11,11 @@
 
 <script lang="ts">
 import { FieldType } from "../streamsyncTypes";
-import { accentColor, cssClasses, emptinessColor } from "../renderer/sharedStyleFields";
+import {
+	accentColor,
+	cssClasses,
+	emptinessColor,
+} from "../renderer/sharedStyleFields";
 
 const description =
 	"A container component that typically contains the main navigation elements.";
diff --git a/ui/src/core_components/CoreHeading.vue b/ui/src/core_components/CoreHeading.vue
index dd95b6332..38848864e 100644
--- a/ui/src/core_components/CoreHeading.vue
+++ b/ui/src/core_components/CoreHeading.vue
@@ -1,8 +1,12 @@
 <template>
 	<div class="CoreHeading" :style="{ 'text-align': fields.alignment.value }">
 		<h1 v-if="fields.headingType.value == 'h1'">{{ fields.text.value }}</h1>
-		<h3 v-else-if="fields.headingType.value == 'h3'">{{ fields.text.value }}</h3>
-		<h4 v-else-if="fields.headingType.value == 'h4'">{{ fields.text.value }}</h4>
+		<h3 v-else-if="fields.headingType.value == 'h3'">
+			{{ fields.text.value }}
+		</h3>
+		<h4 v-else-if="fields.headingType.value == 'h4'">
+			{{ fields.text.value }}
+		</h4>
 		<h2 v-else>{{ fields.text.value }}</h2>
 	</div>
 </template>
diff --git a/ui/src/core_components/CoreHorizontalStack.vue b/ui/src/core_components/CoreHorizontalStack.vue
index a915aea22..99af12e4a 100644
--- a/ui/src/core_components/CoreHorizontalStack.vue
+++ b/ui/src/core_components/CoreHorizontalStack.vue
@@ -1,9 +1,9 @@
 <template>
 	<BaseContainer
 		class="CoreHorizontalStack"
-		:contentHAlign="fields.contentHAlign.value"
-		contentVAlign="center"
-		:contentPadding="fields.contentPadding.value"
+		:content-h-align="fields.contentHAlign.value"
+		content-v-align="center"
+		:content-padding="fields.contentPadding.value"
 		:is-horizontal="true"
 	>
 		<slot></slot>
diff --git a/ui/src/core_components/CoreHtml.vue b/ui/src/core_components/CoreHtml.vue
index adcd0ccbd..a3009f873 100644
--- a/ui/src/core_components/CoreHtml.vue
+++ b/ui/src/core_components/CoreHtml.vue
@@ -66,7 +66,9 @@ export default {
 		return () => {
 			let insideHtmlNode = undefined;
 			if (fields.htmlInside.value) {
-				insideHtmlNode = h("div", { innerHTML: fields.htmlInside.value })
+				insideHtmlNode = h("div", {
+					innerHTML: fields.htmlInside.value,
+				});
 			}
 			return h(
 				fields.element.value,
@@ -75,7 +77,7 @@ export default {
 					"data-streamsync-container": "",
 					style: fields.styles.value,
 				},
-				[slots.default({}), insideHtmlNode]
+				[slots.default({}), insideHtmlNode],
 			);
 		};
 	},
diff --git a/ui/src/core_components/CoreIFrame.vue b/ui/src/core_components/CoreIFrame.vue
index faeb2f7d7..a5229d4d0 100644
--- a/ui/src/core_components/CoreIFrame.vue
+++ b/ui/src/core_components/CoreIFrame.vue
@@ -1,11 +1,7 @@
 <template>
-	<div class="CoreIFrame" ref="rootEl">
-		<iframe
-      @load="handleLoad" 
-			:src="fields.src.value"
-			draggable="false"
-		/>
-    <div class="mask" />
+	<div ref="rootEl" class="CoreIFrame">
+		<iframe :src="fields.src.value" draggable="false" @load="handleLoad" />
+		<div class="mask" />
 	</div>
 </template>
 
@@ -30,7 +26,7 @@ export default {
 		fields: {
 			src: {
 				name: "Source",
-				default: '',
+				default: "",
 				desc: "A valid URL",
 				type: FieldType.Text,
 			},
@@ -50,7 +46,7 @@ export default {
 import { Ref, inject, ref } from "vue";
 import injectionKeys from "../injectionKeys";
 
-const rootEl:Ref<HTMLElement> = ref(null); 
+const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
 
 function handleLoad(ev) {
@@ -63,34 +59,34 @@ function handleLoad(ev) {
 @import "../renderer/sharedStyles.css";
 
 .CoreIFrame {
-  position: relative;
-  width: 100%;
-  height: 80vh;
+	position: relative;
+	width: 100%;
+	height: 80vh;
 }
 
-.CoreIFrame  iframe {
-  width: 100%;
-  height: 100%;
-  display: block;
-  margin: auto;
-  border: 1px solid var(--separatorColor);
+.CoreIFrame iframe {
+	width: 100%;
+	height: 100%;
+	display: block;
+	margin: auto;
+	border: 1px solid var(--separatorColor);
 }
 
 .CoreIFrame .mask {
-  pointer-events: none;
+	pointer-events: none;
 }
 
 .CoreIFrame.beingEdited .mask {
-  pointer-events: all;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0);
+	pointer-events: all;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0);
 }
 
 .CoreIFrame.beingEdited.selected .mask {
-  pointer-events: none;
+	pointer-events: none;
 }
 </style>
diff --git a/ui/src/core_components/CoreIcon.vue b/ui/src/core_components/CoreIcon.vue
index 0cd5aeafe..acafd05d4 100644
--- a/ui/src/core_components/CoreIcon.vue
+++ b/ui/src/core_components/CoreIcon.vue
@@ -1,16 +1,19 @@
 <template>
-<div class="icon">
-	<i
+	<div class="icon">
+		<i
 			v-if="fields.icon.value"
 			:class="[`ri-${fields.icon.value}-line`, `ri-${fields.icon.value}`]"
-			:style="{fontSize: `${fields.size.value}px`, color: fields.color.value}"
+			:style="{
+				fontSize: `${fields.size.value}px`,
+				color: fields.color.value,
+			}"
 		></i>
-</div>
+	</div>
 </template>
 
 <script lang="ts">
-import {FieldCategory, FieldType} from "../streamsyncTypes";
-import {cssClasses} from "../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { cssClasses } from "../renderer/sharedStyleFields";
 
 const docs = `
 Streamsync uses the library RemixIcon to display icons. To include an icon, check remixicon.com, find the icon's id (such as \`arrow-up\`)
@@ -28,21 +31,21 @@ export default {
 				type: FieldType.Text,
 				desc: `A RemixIcon id, such as "arrow-up".`,
 				category: FieldCategory.Style,
-				default: "square-line"
+				default: "square-line",
 			},
 			size: {
 				name: "Icon size",
 				type: FieldType.Number,
 				desc: `Icon size in px`,
 				category: FieldCategory.Style,
-				default: 14
+				default: 14,
 			},
 			color: {
 				name: "Icon color",
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
-			cssClasses
+			cssClasses,
 		},
 		previewField: "icon",
 	},
@@ -50,11 +53,10 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {inject} from "vue";
+import { inject } from "vue";
 import injectionKeys from "../injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
-
 </script>
 
 <style scoped>
@@ -64,4 +66,4 @@ const fields = inject(injectionKeys.evaluatedFields);
 	display: flex;
 	align-items: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/core_components/CoreImage.vue b/ui/src/core_components/CoreImage.vue
index 4fa88bed6..c965af919 100644
--- a/ui/src/core_components/CoreImage.vue
+++ b/ui/src/core_components/CoreImage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="CoreImage" :style="rootStyle" v-on:click="handleClick" ref="rootEl">
+	<div ref="rootEl" class="CoreImage" :style="rootStyle" @click="handleClick">
 		<img
 			:src="fields.src.value"
 			:alt="fields.caption.value"
@@ -94,7 +94,7 @@ export default {
 import { Ref, computed, inject, ref } from "vue";
 import injectionKeys from "../injectionKeys";
 
-const rootEl:Ref<HTMLElement> = ref(null); 
+const rootEl: Ref<HTMLElement> = ref(null);
 const ss = inject(injectionKeys.core);
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
@@ -121,7 +121,6 @@ function handleClick(ev: MouseEvent) {
 	const ssEv = getClick(ev);
 	rootEl.value.dispatchEvent(ssEv);
 }
-
 </script>
 
 <style scoped>
diff --git a/ui/src/core_components/CoreMessage.vue b/ui/src/core_components/CoreMessage.vue
index b4c55bfc3..116295c21 100644
--- a/ui/src/core_components/CoreMessage.vue
+++ b/ui/src/core_components/CoreMessage.vue
@@ -1,17 +1,17 @@
 <template>
 	<div
+		v-if="messageWithoutPrefix || isBeingEdited"
 		class="CoreMessage"
 		:style="rootStyle"
 		:class="severity"
-		v-if="messageWithoutPrefix || isBeingEdited"
 	>
 		<div class="messageBackground"></div>
-		<div class="message" v-if="messageWithoutPrefix">
-			<LoadingSymbol class="loadingSymbol" v-if="severity == 'loading'">
+		<div v-if="messageWithoutPrefix" class="message">
+			<LoadingSymbol v-if="severity == 'loading'" class="loadingSymbol">
 			</LoadingSymbol>
 			<span>{{ messageWithoutPrefix }}</span>
 		</div>
-		<div class="empty" v-else>
+		<div v-else class="empty">
 			<h2>Blank Message</h2>
 		</div>
 	</div>
@@ -87,7 +87,7 @@ export default {
 		},
 		previewField: "name",
 	},
-	components: {LoadingSymbol}
+	components: { LoadingSymbol },
 };
 </script>
 <script setup lang="ts">
diff --git a/ui/src/core_components/CoreMetric.vue b/ui/src/core_components/CoreMetric.vue
index 5bc9bbba0..6404416ad 100644
--- a/ui/src/core_components/CoreMetric.vue
+++ b/ui/src/core_components/CoreMetric.vue
@@ -1,20 +1,20 @@
 <template>
 	<div class="CoreMetric" :style="rootStyle">
-		<div class="name" v-if="fields.name.value">{{ fields.name.value }}</div>
-		<div class="description" v-if="fields.description.value">
+		<div v-if="fields.name.value" class="name">{{ fields.name.value }}</div>
+		<div v-if="fields.description.value" class="description">
 			{{ fields.description.value }}
 		</div>
 		<div class="value">{{ fields.metricValue.value }}</div>
-		<div class="note" v-if="noteWithoutPrefix">{{ noteWithoutPrefix }}</div>
+		<div v-if="noteWithoutPrefix" class="note">{{ noteWithoutPrefix }}</div>
 	</div>
 </template>
 
 <script lang="ts">
 import { FieldCategory, FieldType } from "../streamsyncTypes";
 import {
-cssClasses,
+	cssClasses,
 	primaryTextColor,
-	secondaryTextColor
+	secondaryTextColor,
 } from "../renderer/sharedStyleFields";
 
 const description =
diff --git a/ui/src/core_components/CorePage.vue b/ui/src/core_components/CorePage.vue
index b14c0a350..320a0f91c 100644
--- a/ui/src/core_components/CorePage.vue
+++ b/ui/src/core_components/CorePage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="CorePage" ref="rootEl">
+	<div ref="rootEl" class="CorePage">
 		<div class="sidebarContainer">
 			<slot
 				:component-filter="(c: Component) => c.type == 'sidebar'"
diff --git a/ui/src/core_components/CorePagination.vue b/ui/src/core_components/CorePagination.vue
index b22580f0f..5f17563fd 100644
--- a/ui/src/core_components/CorePagination.vue
+++ b/ui/src/core_components/CorePagination.vue
@@ -1,36 +1,68 @@
 <template>
-	<div class="pagination" ref="rootEl">
+	<div ref="rootEl" class="pagination">
 		<div class="pagination-left">
-			<div class="pagination-pagesize" v-show="pagesizeEnabled">
+			<div v-show="pagesizeEnabled" class="pagination-pagesize">
 				<select class="pagesize-select" @change="onPageSizeChange">
-					<option v-for="o in pageSizeOptions" :value="o.value" :selected="o.value == fields.pageSize.value">{{ o.label }}</option>
+					<option
+						v-for="o in pageSizeOptions"
+						:key="o.value"
+						:value="o.value"
+						:selected="o.value == fields.pageSize.value"
+					>
+						{{ o.label }}
+					</option>
 				</select>
 			</div>
 			<div class="pagination-description">
-				Showing <span class="bold">{{ firstItem }}</span> to <span class="bold">{{ lastItem }}</span> of <span class="bold">{{ totalItem }}</span> results
+				Showing <span class="bold">{{ firstItem }}</span> to
+				<span class="bold">{{ lastItem }}</span> of
+				<span class="bold">{{ totalItem }}</span> results
 			</div>
 		</div>
 		<div class="pagination-right">
 			<div class="pagination-picker">
-				<div class="paginationpicker-block ri-arrow-left-s-line" :class="{'paginationpicker-disabled': pagePreviousDisabled}" @click="jumpTo(fields.page.value - 1)"></div>
-				<template v-for="l in links">
-					<div v-if="l == '...'" class="paginationpicker-block paginationpicker-neutral">
+				<div
+					class="paginationpicker-block ri-arrow-left-s-line"
+					:class="{
+						'paginationpicker-disabled': pagePreviousDisabled,
+					}"
+					@click="jumpTo(fields.page.value - 1)"
+				></div>
+				<template v-for="(l, index) in links" :key="index">
+					<div
+						v-if="l == '...'"
+						class="paginationpicker-block paginationpicker-neutral"
+					>
 						{{ l }}
 					</div>
-					<div v-if="l != '...' && l != fields.page.value" class="paginationpicker-block" @click="jumpTo(l)">
+					<div
+						v-if="l != '...' && l != fields.page.value"
+						class="paginationpicker-block"
+						@click="jumpTo(l)"
+					>
 						{{ l }}
 					</div>
-					<div v-if="l == fields.page.value" class="paginationpicker-block paginationpicker-currentpage">
+					<div
+						v-if="l == fields.page.value"
+						class="paginationpicker-block paginationpicker-currentpage"
+					>
 						{{ l }}
 					</div>
 				</template>
-				<div class="paginationpicker-block ri-arrow-right-s-line" :class="{'paginationpicker-disabled': pageNextDisabled}" @click="jumpTo(fields.page.value + 1)"></div>
+				<div
+					class="paginationpicker-block ri-arrow-right-s-line"
+					:class="{ 'paginationpicker-disabled': pageNextDisabled }"
+					@click="jumpTo(fields.page.value + 1)"
+				></div>
 			</div>
-			<div class="pagination-jump" v-show="jumptoEnabled">
+			<div v-show="jumptoEnabled" class="pagination-jump">
 				<label>Jump to</label>
-				<input type="text" :value="fields.page.value" @input="onJumpTo"/>
+				<input
+					type="text"
+					:value="fields.page.value"
+					@input="onJumpTo"
+				/>
 			</div>
-
 		</div>
 	</div>
 </template>
@@ -48,7 +80,6 @@ def handle_page_change(state, payload):
     state["highlighted_members"] = {r.id: r for r in records}
 `;
 
-
 const onPageSizeChangeStub = `
 def handle_page_size_change(state, payload):
     state['pageSize'] = payload
@@ -56,7 +87,7 @@ def handle_page_size_change(state, payload):
     records = _load_records_from_db(start = state["page"] * state["pageSize"], limit = state["pageSize"])
     # update a repeater
     state["highlighted_members"] = {r.id: r for r in records}
-`
+`;
 
 export default {
 	streamsync: {
@@ -88,7 +119,7 @@ export default {
 				init: "",
 				default: "",
 				type: FieldType.Text,
-				desc: "A comma-separated list of page size options. If it's empty, the user can't change the page size. Set your default page size as the first option."
+				desc: "A comma-separated list of page size options. If it's empty, the user can't change the page size. Set your default page size as the first option.",
 			},
 			pageSizeShowAll: {
 				name: "Show All Option",
@@ -130,45 +161,59 @@ export default {
 			},
 			"ss-change-page-size": {
 				desc: "Fires when the user change the page size.",
-				stub: onPageSizeChangeStub.trim()
-			}
-		}
-	}
+				stub: onPageSizeChangeStub.trim(),
+			},
+		},
+	},
 };
 </script>
 
 <script setup lang="ts">
-import {Ref, inject, ref, computed, watch, onUnmounted, onMounted} from "vue";
+import { Ref, inject, ref, computed, watch, onUnmounted, onMounted } from "vue";
 import injectionKeys from "../injectionKeys";
-import {useFormValueBroker} from "../renderer/useFormValueBroker";
+import { useFormValueBroker } from "../renderer/useFormValueBroker";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const ss = inject(injectionKeys.core);
 const rootEl = ref(null);
 const instancePath = inject(injectionKeys.instancePath);
 
-const {formValue: pageValue, handleInput: handlePageInput } = useFormValueBroker(ss, instancePath, rootEl);
-const {formValue: pageSizeValue, handleInput: handlePageSizeInput } = useFormValueBroker(ss, instancePath, rootEl);
-const pagesizeEnabled = computed(() => fields.pageSizeOptions.value !== "" || fields.pageSizeShowAll.value === "yes");
+const { formValue: pageValue, handleInput: handlePageInput } =
+	useFormValueBroker(ss, instancePath, rootEl);
+const { formValue: pageSizeValue, handleInput: handlePageSizeInput } =
+	useFormValueBroker(ss, instancePath, rootEl);
+const pagesizeEnabled = computed(
+	() =>
+		fields.pageSizeOptions.value !== "" ||
+		fields.pageSizeShowAll.value === "yes",
+);
 const jumptoEnabled = computed(() => fields.jumpTo.value === "yes");
 
 const firstItem = computed(() => {
-	return (fields.page.value - 1) * (fields.pageSize.value) + 1
+	return (fields.page.value - 1) * fields.pageSize.value + 1;
 });
-const lastItem = computed(() => Math.min((fields.page.value) * fields.pageSize.value, fields.totalItems.value));
+const lastItem = computed(() =>
+	Math.min(
+		fields.page.value * fields.pageSize.value,
+		fields.totalItems.value,
+	),
+);
 const totalItem = computed(() => fields.totalItems.value);
-const totalPage = computed(() => Math.ceil(parseInt(fields.totalItems.value) / parseInt(fields.pageSize.value)));
-
+const totalPage = computed(() =>
+	Math.ceil(
+		parseInt(fields.totalItems.value) / parseInt(fields.pageSize.value),
+	),
+);
 
 const pageSizeOptions = computed(() => {
-	let options = []
-	const inputs = fields.pageSizeOptions.value.split(",")
+	let options = [];
+	const inputs = fields.pageSizeOptions.value.split(",");
 	for (const o in inputs) {
-		const n = parseInt(inputs[o], 10)
-		options.push({value: n, label:`${n} items`})
+		const n = parseInt(inputs[o], 10);
+		options.push({ value: n, label: `${n} items` });
 	}
 	if (fields.pageSizeShowAll.value === "yes") {
-		options.push({value: totalItem.value, label: "All items"})
+		options.push({ value: totalItem.value, label: "All items" });
 	}
 
 	return options;
@@ -189,55 +234,55 @@ const links = computed(() => {
 		links.push(1);
 		links.push(2);
 		links.push(3);
-		links.push("...")
-		links.push(totalPage.value - 2)
-		links.push(totalPage.value - 1)
-		links.push(totalPage.value)
+		links.push("...");
+		links.push(totalPage.value - 2);
+		links.push(totalPage.value - 1);
+		links.push(totalPage.value);
 	} else if (page == 3) {
 		links.push(1);
 		links.push(2);
 		links.push(3);
 		links.push(4);
-		links.push("...")
+		links.push("...");
 		// links.push(totalPage.value - 2)
-		links.push(totalPage.value - 1)
-		links.push(totalPage.value)
+		links.push(totalPage.value - 1);
+		links.push(totalPage.value);
 	} else if (page == 4) {
 		links.push(1);
 		links.push(2);
 		links.push(3);
 		links.push(4);
-		links.push(5)
-		links.push("...")
-		links.push(totalPage.value)
+		links.push(5);
+		links.push("...");
+		links.push(totalPage.value);
 	} else if (page == totalPage.value || page == totalPage.value - 1) {
 		links.push(1);
 		links.push(2);
 		links.push(3);
 		links.push("...");
-		links.push(totalPage.value - 2)
-		links.push(totalPage.value - 1)
-		links.push(totalPage.value)
-	}else if (page == totalPage.value - 2) {
+		links.push(totalPage.value - 2);
+		links.push(totalPage.value - 1);
+		links.push(totalPage.value);
+	} else if (page == totalPage.value - 2) {
 		links.push(1);
 		links.push(2);
 		links.push("...");
-		links.push(totalPage.value - 3)
-		links.push(totalPage.value - 2)
-		links.push(totalPage.value - 1)
-		links.push(totalPage.value)
+		links.push(totalPage.value - 3);
+		links.push(totalPage.value - 2);
+		links.push(totalPage.value - 1);
+		links.push(totalPage.value);
 	} else {
-		links.push(1)
-		links.push("...")
+		links.push(1);
+		links.push("...");
 		links.push(page - 1);
 		links.push(page);
 		links.push(page + 1);
 		links.push("...");
-		links.push(totalPage.value)
+		links.push(totalPage.value);
 	}
 
 	return links;
-})
+});
 
 /**
  * Disable the previous page button if the current page is the first page.
@@ -255,36 +300,30 @@ const pageNextDisabled = computed(() => {
 	return nextPage > totalPage.value;
 });
 
-
 const onJumpTo = (event) => {
 	if (event.target.value === "") {
 		return;
 	}
 
-
 	let page = parseInt(event.target.value);
 	if (page > totalPage.value) {
 		page = totalPage.value;
 	}
 
-	handlePageInput(page, 'ss-change-page')
+	handlePageInput(page, "ss-change-page");
 };
 
 const jumpTo = (page: number) => {
-	handlePageInput(page, 'ss-change-page')
-}
-
-
+	handlePageInput(page, "ss-change-page");
+};
 
 const onPageSizeChange = (event) => {
 	let pageSize = parseInt(event.target.value);
-	handlePageSizeInput(pageSize, 'ss-change-page-size')
+	handlePageSizeInput(pageSize, "ss-change-page-size");
 };
 
-
 watch(fields.page, () => {
 	// Disabled for now, I am waiting functions to manipulate Hash params from the URL
-
 	// if (fields.urlParam.value.trim() === "yes") {
 	// 	const searchURL = new URL(window.location);
 	// 	searchURL.searchParams.set("page", fields.page.value)
@@ -294,7 +333,6 @@ watch(fields.page, () => {
 
 watch(fields.pageSize, () => {
 	// Disabled for now, I am waiting functions to manipulate Hash params from the URL
-
 	// if (fields.urlParam.value.trim() === "yes") {
 	// 	const searchURL = new URL(window.location);
 	// 	searchURL.searchParams.set("pageSize", fields.pageSize.value)
@@ -306,9 +344,7 @@ onMounted(() => {
 	/**
 	 * On page load, get URL parameters and configure pagination.
 	 */
-
 	// Disabled for now, I am waiting functions to manipulate Hash params from the URL
-
 	// const searchURL = new URL(window.location);
 	//
 	// if (searchURL.searchParams.has("pageSize")) {
@@ -325,15 +361,13 @@ onMounted(() => {
 	// 		jumpTo(parseInt(page));
 	// 	}
 	// }
-})
+});
 
 onUnmounted(() => {
 	/**
 	 * When changing pages, eliminates URL parameters that are not useful on the next page.
 	 */
-
 	// Disabled for now, I am waiting functions to manipulate Hash params from the URL
-
 	// const searchURL = new URL(window.location);
 	// if (searchURL.searchParams.has("page")) {
 	// 	searchURL.searchParams.delete("page");
@@ -342,8 +376,7 @@ onUnmounted(() => {
 	// 	searchURL.searchParams.delete("pageSize");
 	// }
 	// window.history.replaceState({}, '', searchURL);
-})
-
+});
 </script>
 
 <style scoped>
@@ -430,4 +463,4 @@ onUnmounted(() => {
 .bold {
 	font-weight: bold;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/core_components/CorePlotlyGraph.vue b/ui/src/core_components/CorePlotlyGraph.vue
index 4f9dcc069..693688fb3 100644
--- a/ui/src/core_components/CorePlotlyGraph.vue
+++ b/ui/src/core_components/CorePlotlyGraph.vue
@@ -1,8 +1,5 @@
 <template>
-	<div
-		class="CorePlotlyGraph"
-		ref="rootEl"
-	>
+	<div ref="rootEl" class="CorePlotlyGraph">
 		<div ref="chartTargetEl" class="target"></div>
 	</div>
 </template>
@@ -85,15 +82,21 @@ function applyAutosize() {
 	chartTargetEl.value.style.height = "100%";
 }
 
-function bindPlotlyEvents () {
+function bindPlotlyEvents() {
 	// Plotly extends HTMLElement and adds an "on" property
 
-	// @ts-ignore
-	chartTargetEl.value.on("plotly_click", getPlotlyEventHandler("plotly-click"));
-	// @ts-ignore
-	chartTargetEl.value.on("plotly_selected", getPlotlyEventHandler("plotly-selected"));
-	// @ts-ignore
-	chartTargetEl.value.on("plotly_deselect", getPlotlyEventHandler("plotly-deselect"));
+	chartTargetEl.value.on(
+		"plotly_click",
+		getPlotlyEventHandler("plotly-click"),
+	);
+	chartTargetEl.value.on(
+		"plotly_selected",
+		getPlotlyEventHandler("plotly-selected"),
+	);
+	chartTargetEl.value.on(
+		"plotly_deselect",
+		getPlotlyEventHandler("plotly-deselect"),
+	);
 }
 
 function extractKeyInfoFromPoint(point: any) {
@@ -108,10 +111,10 @@ function extractKeyInfoFromPoint(point: any) {
 		lat: point.lat,
 		lon: point.lon,
 		xaxis: {
-			anchor: point.xaxis?.anchor
+			anchor: point.xaxis?.anchor,
 		},
 		yaxis: {
-			anchor: point.yaxis?.anchor
+			anchor: point.yaxis?.anchor,
 		},
 	};
 }
@@ -120,7 +123,9 @@ function getPlotlyEventHandler(eventType: string) {
 	return (plotlyEventData: any) => {
 		const event = new CustomEvent(eventType, {
 			detail: {
-				payload: plotlyEventData?.points?.map((p:any) => extractKeyInfoFromPoint(p))
+				payload: plotlyEventData?.points?.map((p: any) =>
+					extractKeyInfoFromPoint(p),
+				),
 			},
 		});
 		rootEl.value.dispatchEvent(event);
diff --git a/ui/src/core_components/CoreRepeater.vue b/ui/src/core_components/CoreRepeater.vue
index c2c20afab..93d5315bd 100644
--- a/ui/src/core_components/CoreRepeater.vue
+++ b/ui/src/core_components/CoreRepeater.vue
@@ -45,7 +45,7 @@ export default {
 		const componentId = inject(injectionKeys.componentId);
 		const fields = inject(injectionKeys.evaluatedFields);
 		const renderProxiedComponent = inject(
-			injectionKeys.renderProxiedComponent
+			injectionKeys.renderProxiedComponent,
 		);
 
 		const children = computed(() => ss.getComponents(componentId, true));
@@ -55,11 +55,11 @@ export default {
 			}
 
 			const repeatedChildrenVNodes = Object.values(
-				fields.repeaterObject.value
+				fields.repeaterObject.value,
 			).map((item, itemIndex) =>
 				children.value.map((childComponent) =>
-					renderProxiedComponent(childComponent.id, itemIndex)
-				)
+					renderProxiedComponent(childComponent.id, itemIndex),
+				),
 			);
 			return repeatedChildrenVNodes;
 		};
@@ -74,7 +74,7 @@ export default {
 				children.value.length == 0 ||
 					Object.keys(fields.repeaterObject.value).length == 0
 					? slots.default({})
-					: getRepeatedChildrenVNodes()
+					: getRepeatedChildrenVNodes(),
 			);
 		};
 	},
diff --git a/ui/src/core_components/CoreRoot.vue b/ui/src/core_components/CoreRoot.vue
index 31167631a..ee52b8ebd 100644
--- a/ui/src/core_components/CoreRoot.vue
+++ b/ui/src/core_components/CoreRoot.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="CoreRoot" data-streamsync-container ref="rootEl">
-		<template v-for="vnode in getChildrenVNodes()">
+	<div ref="rootEl" class="CoreRoot" data-streamsync-container>
+		<template v-for="(vnode, index) in getChildrenVNodes()" :key="index">
 			<component
 				:is="vnode"
 				v-if="vnode.key === `${activePageId}:0`"
@@ -70,24 +70,22 @@ export default {
 import { computed, inject, ref, Ref, watch, onBeforeMount } from "vue";
 import injectionKeys from "../injectionKeys";
 
-const importedModulesSpecifiers:Record<string, string> = {};
+const importedModulesSpecifiers: Record<string, string> = {};
 const ss = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const getChildrenVNodes = inject(injectionKeys.getChildrenVNodes);
 const rootEl: Ref<HTMLElement> = ref(null);
-const {isComponentVisible} = useEvaluator(ss);
+const { isComponentVisible } = useEvaluator(ss);
 
 const getFirstPageId = () => {
 	const pageComponents = ss.getComponents("root", true);
 	if (pageComponents.length == 0) return null;
-	const visiblePages = pageComponents.filter((c) =>
-		isComponentVisible(c.id)
-	);
+	const visiblePages = pageComponents.filter((c) => isComponentVisible(c.id));
 	if (visiblePages.length == 0) return null;
 	return visiblePages[0].id;
 };
 
-const hashRegex = /^((?<pageKey>[^\/]*))?(\/(?<routeVars>.*))?$/;
+const hashRegex = /^((?<pageKey>[^/]*))?(\/(?<routeVars>.*))?$/;
 const routeVarRegex = /^(?<key>[^=]+)=(?<value>.*)$/;
 const activePageId = computed(() => ss.getActivePageId() ?? getFirstPageId());
 
@@ -150,7 +148,7 @@ function setHash(parsedHash: ParsedHash) {
 
 				if (value === null) return null;
 				return `${encodeURIComponent(key)}=${encodeURIComponent(
-					value
+					value,
 				)}`;
 			})
 			.filter((segment) => segment)
@@ -185,36 +183,46 @@ function handleHashChange() {
 }
 
 async function importStylesheet(stylesheetKey: string, path: string) {
-	const existingEl = document.querySelector(`[data-streamsync-stylesheet-key="${stylesheetKey}"]`);
+	const existingEl = document.querySelector(
+		`[data-streamsync-stylesheet-key="${stylesheetKey}"]`,
+	);
 	existingEl?.remove();
 	const el = document.createElement("link");
 	el.dataset.streamsyncStylesheetKey = stylesheetKey;
-  el.setAttribute('href', path)
-  el.setAttribute("rel", "stylesheet");
-  document.head.appendChild(el);
+	el.setAttribute("href", path);
+	el.setAttribute("rel", "stylesheet");
+	document.head.appendChild(el);
 }
 
 async function importScript(scriptKey: string, path: string) {
-	const existingEl = document.querySelector(`[data-streamsync-script-key="${scriptKey}"]`);
+	const existingEl = document.querySelector(
+		`[data-streamsync-script-key="${scriptKey}"]`,
+	);
 	existingEl?.remove();
 	const el = document.createElement("script");
 	el.dataset.streamsyncScriptKey = scriptKey;
-  el.src = path;
-  el.setAttribute("rel", "modulepreload");
-  document.head.appendChild(el);
+	el.src = path;
+	el.setAttribute("rel", "modulepreload");
+	document.head.appendChild(el);
 }
 
 async function importModule(moduleKey: string, specifier: string) {
 	importedModulesSpecifiers[moduleKey] = specifier;
-	await import(/* @vite-ignore */specifier);
+	await import(/* @vite-ignore */ specifier);
 }
 
-async function handleFunctionCall(moduleKey: string, functionName: string, args: any[]) {
+async function handleFunctionCall(
+	moduleKey: string,
+	functionName: string,
+	args: any[],
+) {
 	const specifier = importedModulesSpecifiers[moduleKey];
-	const m = await import(/* @vite-ignore */specifier);
+	const m = await import(/* @vite-ignore */ specifier);
 
 	if (!m) {
-		console.warn(`The module with key "${moduleKey}" cannot be found. Please check that it has been imported.`);
+		console.warn(
+			`The module with key "${moduleKey}" cannot be found. Please check that it has been imported.`,
+		);
 		return;
 	}
 	m[functionName](...args);
@@ -233,7 +241,7 @@ function addMailSubscriptions() {
 			el.href = mailItem.data;
 			el.download = mailItem.fileName;
 			el.click();
-		}
+		},
 	);
 	ss.addMailSubscription("openUrl", (url: string) => {
 		const el = document.createElement("a");
@@ -249,31 +257,45 @@ function addMailSubscriptions() {
 		"routeVarsChange",
 		(routeVars: Record<string, string>) => {
 			changeRouteVarsInHash(routeVars);
-		}
+		},
 	);
 	ss.addMailSubscription(
 		"importStylesheet",
-		({stylesheetKey, path}:{stylesheetKey: string, path: string}) => {
+		({ stylesheetKey, path }: { stylesheetKey: string; path: string }) => {
 			importStylesheet(stylesheetKey, path);
-		}
+		},
 	);
 	ss.addMailSubscription(
 		"importScript",
-		({scriptKey, path}:{scriptKey: string, path: string}) => {
+		({ scriptKey, path }: { scriptKey: string; path: string }) => {
 			importScript(scriptKey, path);
-		}
+		},
 	);
 	ss.addMailSubscription(
 		"importModule",
-		({ moduleKey, specifier }:{moduleKey: string, specifier: string}) => {
+		({
+			moduleKey,
+			specifier,
+		}: {
+			moduleKey: string;
+			specifier: string;
+		}) => {
 			importModule(moduleKey, specifier);
-		}
+		},
 	);
 	ss.addMailSubscription(
 		"functionCall",
-		({ moduleKey, functionName, args }:{moduleKey: string, functionName: string, args: any[]}) => {
+		({
+			moduleKey,
+			functionName,
+			args,
+		}: {
+			moduleKey: string;
+			functionName: string;
+			args: any[];
+		}) => {
 			handleFunctionCall(moduleKey, functionName, args);
-		}
+		},
 	);
 }
 
diff --git a/ui/src/core_components/CoreSection.vue b/ui/src/core_components/CoreSection.vue
index a01a01b30..470aa135e 100644
--- a/ui/src/core_components/CoreSection.vue
+++ b/ui/src/core_components/CoreSection.vue
@@ -2,8 +2,8 @@
 	<section class="CoreSection">
 		<h2 v-if="fields.title.value">{{ fields.title.value }}</h2>
 		<BaseContainer
-			:contentHAlign="fields.contentHAlign.value"
-			:contentPadding="fields.contentPadding.value"
+			:content-h-align="fields.contentHAlign.value"
+			:content-padding="fields.contentPadding.value"
 		>
 			<slot></slot>
 		</BaseContainer>
@@ -54,7 +54,7 @@ export default {
 			buttonShadow,
 			contentPadding: {
 				...contentPadding,
-				default: "16px"
+				default: "16px",
 			},
 			contentHAlign,
 			cssClasses,
diff --git a/ui/src/core_components/CoreSidebar.vue b/ui/src/core_components/CoreSidebar.vue
index 332648c9b..142673f94 100644
--- a/ui/src/core_components/CoreSidebar.vue
+++ b/ui/src/core_components/CoreSidebar.vue
@@ -7,7 +7,7 @@
 		}"
 	>
 		<div class="collapserContainer">
-			<div class="collapser" v-on:click="toggleCollapsed">
+			<div class="collapser" @click="toggleCollapsed">
 				<IconGen
 					class="collapserArrow"
 					icon-key="collapseArrow"
diff --git a/ui/src/core_components/CoreTab.vue b/ui/src/core_components/CoreTab.vue
index 16f9db156..f68b90b3d 100644
--- a/ui/src/core_components/CoreTab.vue
+++ b/ui/src/core_components/CoreTab.vue
@@ -1,6 +1,5 @@
 <template>
 	<div
-		class="CoreTab"
 		v-show="
 			tabContainerDirectChildInstanceItem?.instanceNumber ==
 				TAB_BIT_INSTANCE_NUMBER ||
@@ -8,28 +7,29 @@
 				CONTENT_DISPLAYING_INSTANCE_NUMBER &&
 				isTabActive)
 		"
+		class="CoreTab"
 	>
 		<button
-			class="bit"
-			:class="{ active: isTabActive }"
 			v-if="
 				tabContainerDirectChildInstanceItem?.instanceNumber ==
 				TAB_BIT_INSTANCE_NUMBER
 			"
-			v-on:click="activateTab"
+			class="bit"
+			:class="{ active: isTabActive }"
 			tabindex="0"
+			@click="activateTab"
 		>
 			{{ fields.name.value }}
 		</button>
 		<BaseContainer
-			class="container"
 			v-if="
 				tabContainerDirectChildInstanceItem?.instanceNumber ==
 				CONTENT_DISPLAYING_INSTANCE_NUMBER
 			"
 			v-show="isTabActive"
-			:contentHAlign="fields.contentHAlign.value"
-			:contentPadding="fields.contentPadding.value"
+			class="container"
+			:content-h-align="fields.contentHAlign.value"
+			:content-padding="fields.contentPadding.value"
 		>
 			<slot></slot>
 		</BaseContainer>
@@ -80,7 +80,7 @@ export default {
 			},
 			contentPadding: {
 				...contentPadding,
-				default: "16px"
+				default: "16px",
 			},
 			contentHAlign,
 			cssClasses,
@@ -216,5 +216,4 @@ button.bit.active:focus {
 	color: var(--primaryTextColor);
 	border-bottom: 1px solid var(--accentColor);
 }
-
 </style>
diff --git a/ui/src/core_components/CoreText.vue b/ui/src/core_components/CoreText.vue
index 0b3c14b86..9ae6859f0 100644
--- a/ui/src/core_components/CoreText.vue
+++ b/ui/src/core_components/CoreText.vue
@@ -1,13 +1,15 @@
 <template>
-	<div class="CoreText" :style="rootStyle" ref="rootEl" v-on:click="handleClick">
+	<div ref="rootEl" class="CoreText" :style="rootStyle" @click="handleClick">
 		<template v-if="fields.useMarkdown.value == 'no'">
-			<div class="plainText" :style="contentStyle">{{ fields.text.value }}</div>
+			<div class="plainText" :style="contentStyle">
+				{{ fields.text.value }}
+			</div>
 		</template>
 		<template v-else-if="fields.useMarkdown.value == 'yes'">
 			<div
+				v-dompurify-html="unsanitisedMarkdownHtml"
 				class="markdown"
 				:style="contentStyle"
-				v-dompurify-html="unsanitisedMarkdownHtml"
 			></div>
 		</template>
 	</div>
@@ -15,7 +17,7 @@
 
 <script lang="ts">
 import { FieldCategory, FieldControl, FieldType } from "../streamsyncTypes";
-import {cssClasses, primaryTextColor} from "../renderer/sharedStyleFields";
+import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
 import { getClick } from "../renderer/syntheticEvents";
 
 const clickHandlerStub = `
@@ -80,7 +82,7 @@ import { marked } from "marked";
 import { Ref, computed, inject, ref } from "vue";
 import injectionKeys from "../injectionKeys";
 
-const rootEl:Ref<HTMLElement> = ref(null);
+const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
 const ss = inject(injectionKeys.core);
diff --git a/ui/src/core_components/CoreTimer.vue b/ui/src/core_components/CoreTimer.vue
index 0a97ca9bf..dd5062570 100644
--- a/ui/src/core_components/CoreTimer.vue
+++ b/ui/src/core_components/CoreTimer.vue
@@ -1,8 +1,8 @@
 <template>
 	<div
+		ref="rootEl"
 		class="CoreTimer"
 		:class="{ failing: isFailing }"
-		ref="rootEl"
 		:style="rootStyle"
 	></div>
 </template>
@@ -59,7 +59,6 @@ export default {
 import { computed, inject, nextTick, onMounted, Ref, ref, watch } from "vue";
 import injectionKeys from "../injectionKeys";
 
-
 const MIN_ANIMATION_RESET_MS = 500;
 const MIN_ANIMATION_DURATION_MS = 1000;
 const fields = inject(injectionKeys.evaluatedFields);
@@ -71,13 +70,13 @@ const isActive = computed(() => fields.isActive.value == "yes");
 const isFailing = ref(false);
 const componentId = inject(injectionKeys.componentId);
 const isTickHandlerSet = computed(
-	() => !!ss.getComponentById(componentId)?.handlers?.["ss-tick"]
+	() => !!ss.getComponentById(componentId)?.handlers?.["ss-tick"],
 );
 
 const rootStyle = computed(() => {
 	const animationDurationMs = Math.max(
 		intervalMs.value,
-		MIN_ANIMATION_DURATION_MS
+		MIN_ANIMATION_DURATION_MS,
 	);
 	return {
 		"animation-duration": `${animationDurationMs}ms`,
diff --git a/ui/src/core_components/CoreVegaLiteChart.vue b/ui/src/core_components/CoreVegaLiteChart.vue
index 4a212c1b0..cd95795bd 100644
--- a/ui/src/core_components/CoreVegaLiteChart.vue
+++ b/ui/src/core_components/CoreVegaLiteChart.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="CoreVegaLiteChart" ref="rootEl">
+	<div ref="rootEl" class="CoreVegaLiteChart">
 		<div ref="chartTargetEl" class="target"></div>
 	</div>
 </template>
@@ -78,7 +78,7 @@ watch(
 	(spec) => {
 		if (!spec) return;
 		renderChart();
-	}
+	},
 );
 
 onMounted(() => {
@@ -99,5 +99,4 @@ onMounted(() => {
 .target {
 	overflow: hidden;
 }
-
 </style>
diff --git a/ui/src/core_components/CoreWebcamCapture.vue b/ui/src/core_components/CoreWebcamCapture.vue
index c2f18df3a..e42748f7f 100644
--- a/ui/src/core_components/CoreWebcamCapture.vue
+++ b/ui/src/core_components/CoreWebcamCapture.vue
@@ -1,14 +1,14 @@
 <template>
-	<div class="CoreWebcamCapture" ref="rootEl">
-		<div class="main" v-show="isActive">
-			<video autoplay="true" ref="videoEl"></video>
+	<div ref="rootEl" class="CoreWebcamCapture">
+		<div v-show="isActive" class="main">
+			<video ref="videoEl" autoplay="true"></video>
 		</div>
 		<div class="actions">
-			<button v-if="refreshRate == 0" v-on:click="sendFrame">
+			<button v-if="refreshRate == 0" @click="sendFrame">
 				Capture image
 			</button>
 
-			<button v-on:click="toggleActive">
+			<button @click="toggleActive">
 				{{ isActive ? "Stop capture" : "Start webcam capture" }}
 			</button>
 			<select v-if="videoDevices?.length > 1" v-model="preferredDeviceId">
@@ -31,7 +31,7 @@ import {
 	buttonShadow,
 	buttonTextColor,
 	cssClasses,
-	separatorColor
+	separatorColor,
 } from "../renderer/sharedStyleFields";
 
 const description =
@@ -197,7 +197,7 @@ const startCapture = async (): Promise<void> => {
 			.catch((error) => {
 				console.error(
 					"An error occurred when trying to use the webcam.",
-					error
+					error,
 				);
 				reject();
 			});
diff --git a/ui/src/core_components/base/BaseSelect.vue b/ui/src/core_components/base/BaseSelect.vue
index 85b7876b8..5e7828202 100644
--- a/ui/src/core_components/base/BaseSelect.vue
+++ b/ui/src/core_components/base/BaseSelect.vue
@@ -1,23 +1,23 @@
 <template>
 	<div
-		class="BaseSelect"
 		ref="rootEl"
-		v-on:keydown="handleKeydown"
-		v-on:click="handleClick"
-		v-on:focusout="handleFocusOut"
+		class="BaseSelect"
 		tabindex="0"
 		:data-mode="mode"
+		:id="baseId"
 		:data-list-position="listPosition"
 		role="listbox"
-		:id="baseId"
 		:aria-activedescendant="
 			highlightedOffset
 				? `${baseId}-option-${highlightedOffset}`
 				: undefined
 		"
+		@keydown="handleKeydown"
+		@click="handleClick"
+		@focusout="handleFocusOut"
 	>
-		<div class="selectedOptions" ref="selectedOptionsEl">
-			<div class="placeholder" v-show="selectedOptions.length == 0">
+		<div ref="selectedOptionsEl" class="selectedOptions">
+			<div v-show="selectedOptions.length == 0" class="placeholder">
 				<template v-if="placeholder">{{ placeholder }}</template>
 				<template v-else-if="mode == 'multiple' && maximumCount > 0"
 					>Select up to {{ maximumCount }} option{{
@@ -32,9 +32,10 @@
 				>
 			</div>
 			<div
+				v-for="optionKey in selectedOptions"
+				:key="optionKey"
 				class="option"
 				:class="{ notFound: !options?.[optionKey] }"
-				v-for="optionKey in selectedOptions"
 				aria-selected="true"
 			>
 				<div v-if="options?.[optionKey]" class="desc" role="option">
@@ -47,38 +48,38 @@
 				<div
 					class="remove"
 					data-prevent-list="true"
-					v-on:click="removeItem(optionKey)"
 					aria-label="Remove"
+					@click="removeItem(optionKey)"
 				>
 					<i class="ri-close-line"></i>
 				</div>
 			</div>
 			<input
-				type="text"
+				ref="inputEl"
 				v-model="activeText"
-				v-on:keydown="handleInputKeydown"
-				v-on:blur="handleInputBlur"
+				type="text"
 				aria-autocomplete="none"
-				ref="inputEl"
 				tabindex="-1"
+				@keydown="handleInputKeydown"
+				@blur="handleInputBlur"
 			/>
 		</div>
-		<div class="list" ref="listEl" v-show="listPosition !== 'hidden'">
+		<div v-show="listPosition !== 'hidden'" ref="listEl" class="list">
 			<div
+				v-for="(option, optionKey, offset) in listOptions"
+				:id="`${baseId}-option-${offset}`"
+				:key="`${offset}-${optionKey}`"
 				class="option"
 				role="option"
 				:data-list-offset="offset"
 				data-prevent-list="true"
-				v-for="(option, optionKey, offset) in listOptions"
-				:key="`${offset}-${optionKey}`"
-				v-on:mousemove="highlightItem(offset)"
-				v-on:click="selectOption(optionKey)"
 				:class="{ highlighted: highlightedOffset == offset }"
-				:id="`${baseId}-option-${offset}`"
+				@mousemove="highlightItem(offset)"
+				@click="selectOption(optionKey)"
 			>
 				{{ option }}
 			</div>
-			<div class="empty" v-if="Object.keys(listOptions).length == 0">
+			<div v-if="Object.keys(listOptions).length == 0" class="empty">
 				<template v-if="mode == 'multiple' && isMaximumCountReached"
 					>Up to {{ maximumCount }} option{{
 						maximumCount > 1 ? "s" : ""
@@ -186,7 +187,9 @@ watch(highlightedOffset, () => {
 
 function emitChangeEvent() {
 	const optionKeys = Object.keys(options.value);
-	const validSelectedOptions = selectedOptions.value.filter(o => optionKeys.includes(o));
+	const validSelectedOptions = selectedOptions.value.filter((o) =>
+		optionKeys.includes(o),
+	);
 	emit("change", validSelectedOptions);
 }
 
diff --git a/ui/src/core_components/input/CoreCheckboxInput.vue b/ui/src/core_components/input/CoreCheckboxInput.vue
index d92b8a62d..2f0d665ab 100644
--- a/ui/src/core_components/input/CoreCheckboxInput.vue
+++ b/ui/src/core_components/input/CoreCheckboxInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="CoreCheckboxInput" ref="rootEl">
+	<div ref="rootEl" class="CoreCheckboxInput">
 		<div class="mainLabel">{{ fields.label.value }}</div>
 		<div
 			class="options"
@@ -8,9 +8,9 @@
 			}"
 		>
 			<div
-				class="option"
 				v-for="(option, optionKey) in fields.options.value"
 				:key="optionKey"
+				class="option"
 			>
 				<input
 					type="checkbox"
@@ -19,11 +19,11 @@
 							? formValue.includes(optionKey)
 							: false
 					"
-					v-on:input="
+					:value="optionKey"
+					@input="
 						($event) =>
 							handleInput(getCheckedKeys(), 'ss-options-change')
 					"
-					:value="optionKey"
 				/><label :for="`${flattenedInstancePath}-option-${optionKey}`">
 					{{ option }}
 				</label>
@@ -79,7 +79,7 @@ export default {
 				category: FieldCategory.Style,
 				desc: "Specify how to lay out the options.",
 			},
-			cssClasses
+			cssClasses,
 		},
 		events: {
 			"ss-options-change": {
@@ -116,7 +116,6 @@ function getCheckedKeys() {
 		.filter((el) => typeof el != "undefined");
 	return checkedValues;
 }
-
 </script>
 
 <style scoped>
diff --git a/ui/src/core_components/input/CoreDateInput.vue b/ui/src/core_components/input/CoreDateInput.vue
index 5a736f4e4..ce36ed1ec 100644
--- a/ui/src/core_components/input/CoreDateInput.vue
+++ b/ui/src/core_components/input/CoreDateInput.vue
@@ -1,12 +1,18 @@
 <template>
-	<div class="CoreDateInput" ref="rootEl">
+	<div ref="rootEl" class="CoreDateInput">
 		<div class="main">
 			<div class="inputContainer">
 				<label>{{ fields.label.value }}</label>
 				<input
 					type="date"
 					:value="formValue"
-					v-on:change="($event) => handleInput(($event.target as HTMLInputElement).value, 'ss-date-change')"
+					@change="
+						($event) =>
+							handleInput(
+								($event.target as HTMLInputElement).value,
+								'ss-date-change',
+							)
+					"
 				/>
 			</div>
 		</div>
@@ -38,7 +44,7 @@ export default {
 				init: "Input Label",
 				type: FieldType.Text,
 			},
-			cssClasses
+			cssClasses,
 		},
 		events: {
 			"ss-date-change": {
diff --git a/ui/src/core_components/input/CoreDropdownInput.vue b/ui/src/core_components/input/CoreDropdownInput.vue
index 1eee5ba57..d785532f5 100644
--- a/ui/src/core_components/input/CoreDropdownInput.vue
+++ b/ui/src/core_components/input/CoreDropdownInput.vue
@@ -1,10 +1,16 @@
 <template>
-	<div class="CoreDropdownInput" ref="rootEl">
+	<div ref="rootEl" class="CoreDropdownInput">
 		<label class="mainLabel">{{ fields.label.value }}</label>
 		<div class="selectContainer">
 			<select
 				:value="formValue"
-				v-on:input="($event) => handleInput(($event.target as HTMLInputElement).value, 'ss-option-change')"
+				@input="
+					($event) =>
+						handleInput(
+							($event.target as HTMLInputElement).value,
+							'ss-option-change',
+						)
+				"
 			>
 				<option
 					v-for="(option, optionKey) in fields.options.value"
@@ -51,7 +57,7 @@ export default {
 				type: FieldType.KeyValue,
 				default: JSON.stringify(defaultOptions, null, 2),
 			},
-			cssClasses
+			cssClasses,
 		},
 		events: {
 			"ss-option-change": {
diff --git a/ui/src/core_components/input/CoreFileInput.vue b/ui/src/core_components/input/CoreFileInput.vue
index 6d4c8c893..5814c885b 100644
--- a/ui/src/core_components/input/CoreFileInput.vue
+++ b/ui/src/core_components/input/CoreFileInput.vue
@@ -1,17 +1,22 @@
 <template>
-	<div class="CoreFileInput" ref="rootEl">
-		<div class="inputContainer" v-if="!processingFiles">
+	<div ref="rootEl" class="CoreFileInput">
+		<div v-if="!processingFiles" class="inputContainer">
 			<label>{{ fields.label.value }}</label>
 			<input
-				type="file"
 				ref="fileEl"
-				v-on:change="fileChange($event as InputEvent)"
+				type="file"
 				:multiple="allowMultipleFilesFlag"
+				@change="fileChange($event as InputEvent)"
 			/>
 		</div>
-		<div class="status" v-if="message || processingFiles">
-			<LoadingSymbol class="loadingSymbol" v-if="processingFiles"></LoadingSymbol>
-			<span v-if="processingFiles">Processing {{ processingFiles.join(", ") }}...</span>
+		<div v-if="message || processingFiles" class="status">
+			<LoadingSymbol
+				v-if="processingFiles"
+				class="loadingSymbol"
+			></LoadingSymbol>
+			<span v-if="processingFiles"
+				>Processing {{ processingFiles.join(", ") }}...</span
+			>
 			<span v-if="message">{{ message }}</span>
 		</div>
 	</div>
@@ -40,36 +45,36 @@ def onchange_handler(state, payload):
             file_handle.write(file_data)`.trim();
 
 export default {
-    streamsync: {
-        name: "File Input",
-        description,
-        category: "Input",
-        fields: {
-            label: {
-                name: "Label",
-                init: "Input Label",
-                type: FieldType.Text,
-            },
-            allowMultipleFiles: {
-                name: "Allow multiple files",
-                default: "no",
-                type: FieldType.Text,
-                options: {
-                    yes: "Yes",
-                    no: "No",
-                },
-            },
-            cssClasses
-        },
-        events: {
-            "ss-file-change": {
-                desc: "Capture changes to this control.",
-                stub: onChangeHandlerStub,
-                bindable: true,
-            },
-        },
-    },
-    components: { LoadingSymbol }
+	streamsync: {
+		name: "File Input",
+		description,
+		category: "Input",
+		fields: {
+			label: {
+				name: "Label",
+				init: "Input Label",
+				type: FieldType.Text,
+			},
+			allowMultipleFiles: {
+				name: "Allow multiple files",
+				default: "no",
+				type: FieldType.Text,
+				options: {
+					yes: "Yes",
+					no: "No",
+				},
+			},
+			cssClasses,
+		},
+		events: {
+			"ss-file-change": {
+				desc: "Capture changes to this control.",
+				stub: onChangeHandlerStub,
+				bindable: true,
+			},
+		},
+	},
+	components: { LoadingSymbol },
 };
 </script>
 
@@ -82,10 +87,10 @@ import { useFormValueBroker } from "../../renderer/useFormValueBroker";
 const fields = inject(injectionKeys.evaluatedFields);
 const rootEl: Ref<HTMLInputElement> = ref(null);
 const fileEl: Ref<HTMLInputElement> = ref(null);
-const message:Ref<string> = ref(null);
+const message: Ref<string> = ref(null);
 const ss = inject(injectionKeys.core);
 const instancePath = inject(injectionKeys.instancePath);
-const processingFiles:Ref<string[]> = ref(null);
+const processingFiles: Ref<string[]> = ref(null);
 
 const { formValue, handleInput } = useFormValueBroker(ss, instancePath, rootEl);
 
@@ -119,16 +124,16 @@ const fileChange = async (ev: InputEvent) => {
 					data: await encodeFile(f),
 				};
 				return fileItem;
-			})
+			}),
 		);
 		if (accumSize > MAX_FILE_SIZE) {
-			message.value = `Files are too big. Total size limit is ${ Math.floor((MAX_FILE_SIZE/Math.pow(1024, 2))) }mb.`; 
+			message.value = `Files are too big. Total size limit is ${Math.floor(MAX_FILE_SIZE / Math.pow(1024, 2))}mb.`;
 			return [];
 		}
 		return encodedFiles;
 	};
 
-	processingFiles.value = Array.from(el.files).map(file => file.name);
+	processingFiles.value = Array.from(el.files).map((file) => file.name);
 	formValue.value = getValue();
 
 	const customCallback = () => {
diff --git a/ui/src/core_components/input/CoreMultiselectInput.vue b/ui/src/core_components/input/CoreMultiselectInput.vue
index eb3821969..07b63195d 100644
--- a/ui/src/core_components/input/CoreMultiselectInput.vue
+++ b/ui/src/core_components/input/CoreMultiselectInput.vue
@@ -1,10 +1,20 @@
 <template>
-	<div class="CoreMultiselectInput" ref="rootEl">
-		<div class="labelContainer" v-if="fields.label.value || fields.label.value === 0">
+	<div ref="rootEl" class="CoreMultiselectInput">
+		<div
+			v-if="fields.label.value || fields.label.value === 0"
+			class="labelContainer"
+		>
 			<label>{{ fields.label.value }}</label>
 		</div>
-		<BaseSelect :base-id="flattenedInstancePath" :active-value="formValue" :options="options" :maximum-count="maximumCount"
-			mode="multiple" v-on:change="handleChange" :placeholder="fields.placeholder.value"></BaseSelect>
+		<BaseSelect
+			:base-id="flattenedInstancePath"
+			:active-value="formValue"
+			:options="options"
+			:maximum-count="maximumCount"
+			mode="multiple"
+			:placeholder="fields.placeholder.value"
+			@change="handleChange"
+		></BaseSelect>
 	</div>
 </template>
 
@@ -12,7 +22,15 @@
 import { computed, inject, Ref } from "vue";
 import { ref } from "vue";
 import { FieldCategory, FieldType } from "../../streamsyncTypes";
-import { accentColor, containerBackgroundColor, cssClasses, primaryTextColor, secondaryTextColor, selectedColor, separatorColor } from "../../renderer/sharedStyleFields";
+import {
+	accentColor,
+	containerBackgroundColor,
+	cssClasses,
+	primaryTextColor,
+	secondaryTextColor,
+	selectedColor,
+	separatorColor,
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A user input component that allows users to select multiple values from a searchable list of options.";
@@ -44,17 +62,17 @@ export default {
 			placeholder: {
 				name: "Placeholder",
 				desc: "Text to show when no options are selected.",
-				type: FieldType.Text
+				type: FieldType.Text,
 			},
 			maximumCount: {
 				name: "Maximum count",
 				desc: "The maximum allowable number of selected options. Set to zero for unlimited.",
 				type: FieldType.Number,
-				default: "0"
+				default: "0",
 			},
 			accentColor: {
 				...accentColor,
-				desc: "The colour of the chips created for each selected option."
+				desc: "The colour of the chips created for each selected option.",
 			},
 			chipTextColor: {
 				name: "Chip text",
@@ -62,11 +80,11 @@ export default {
 				default: "#ffffff",
 				desc: "The colour of the text in the chips.",
 				category: FieldCategory.Style,
-				applyStyleVariable: true
+				applyStyleVariable: true,
 			},
 			selectedColor: {
 				...selectedColor,
-				desc: "The colour of the highlighted item in the list."
+				desc: "The colour of the highlighted item in the list.",
 			},
 			primaryTextColor,
 			secondaryTextColor,
@@ -103,7 +121,6 @@ const { formValue, handleInput } = useFormValueBroker(ss, instancePath, rootEl);
 function handleChange(selectedOptions: string[]) {
 	handleInput(selectedOptions, "ss-options-change");
 }
-
 </script>
 
 <style scoped>
diff --git a/ui/src/core_components/input/CoreNumberInput.vue b/ui/src/core_components/input/CoreNumberInput.vue
index b0e16935e..e7f9ee62b 100644
--- a/ui/src/core_components/input/CoreNumberInput.vue
+++ b/ui/src/core_components/input/CoreNumberInput.vue
@@ -1,16 +1,28 @@
 <template>
-	<div class="CoreNumberInput" ref="rootEl">
+	<div ref="rootEl" class="CoreNumberInput">
 		<label>{{ fields.label.value }}</label>
 		<input
-			type="number"
 			ref="inputEl"
-			v-on:input="handleInputEvent"
-			v-on:change="handleChangeEvent"
+			type="number"
 			:value="formValue"
 			:placeholder="fields.placeholder.value"
-			:min="fields.minValue.value !== null ? fields.minValue.value : undefined"
-			:max="fields.maxValue.value !== null ? fields.maxValue.value : undefined"
-			:step="fields.valueStep.value !== null ? fields.valueStep.value : undefined"
+			:min="
+				fields.minValue.value !== null
+					? fields.minValue.value
+					: undefined
+			"
+			:max="
+				fields.maxValue.value !== null
+					? fields.maxValue.value
+					: undefined
+			"
+			:step="
+				fields.valueStep.value !== null
+					? fields.valueStep.value
+					: undefined
+			"
+			@input="handleInputEvent"
+			@change="handleChangeEvent"
 		/>
 	</div>
 </template>
@@ -47,19 +59,19 @@ export default {
 			minValue: {
 				name: "Minimum value",
 				type: FieldType.Number,
-				default: null
+				default: null,
 			},
 			maxValue: {
 				name: "Max value",
 				type: FieldType.Number,
-				default: null
+				default: null,
 			},
 			valueStep: {
 				name: "Step",
 				type: FieldType.Number,
-				default: "1"
+				default: "1",
 			},
-			cssClasses
+			cssClasses,
 		},
 		events: {
 			"ss-number-change": {
@@ -69,7 +81,7 @@ export default {
 			},
 			"ss-number-change-finish": {
 				desc: "Capture changes once this control has lost focus.",
-				stub: onChangeHandlerStub
+				stub: onChangeHandlerStub,
 			},
 		},
 	},
@@ -92,8 +104,8 @@ const { formValue, handleInput } = useFormValueBroker(ss, instancePath, rootEl);
 function enforceLimitsAndReturnValue() {
 	if (inputEl.value.value == "") return null;
 
-	let v:number = parseFloat(inputEl.value.value);
-	
+	let v: number = parseFloat(inputEl.value.value);
+
 	if (isNaN(v)) return v;
 	if (fields.minValue.value !== null && v < fields.minValue.value) {
 		v = fields.minValue.value;
@@ -109,16 +121,14 @@ function enforceLimitsAndReturnValue() {
 function handleInputEvent() {
 	const v = enforceLimitsAndReturnValue();
 	if (isNaN(v)) return;
-	handleInput(v, 'ss-number-change');
+	handleInput(v, "ss-number-change");
 }
 
 function handleChangeEvent() {
 	const v = enforceLimitsAndReturnValue();
 	if (isNaN(v)) return;
-	handleInput(v, 'ss-number-change-finish');
+	handleInput(v, "ss-number-change-finish");
 }
-
-
 </script>
 
 <style scoped>
diff --git a/ui/src/core_components/input/CoreRadioInput.vue b/ui/src/core_components/input/CoreRadioInput.vue
index 893385ab9..b562ee489 100644
--- a/ui/src/core_components/input/CoreRadioInput.vue
+++ b/ui/src/core_components/input/CoreRadioInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="CoreRadioInput" ref="rootEl">
+	<div ref="rootEl" class="CoreRadioInput">
 		<div class="main">
 			<div class="inputContainer">
 				<div class="mainLabel">{{ fields.label.value }}</div>
@@ -10,20 +10,20 @@
 					}"
 				>
 					<div
-						class="option"
 						v-for="(option, optionKey) in fields.options.value"
 						:key="optionKey"
+						class="option"
 					>
 						<input
+							:id="`${flattenedInstancePath}-option-${optionKey}`"
 							type="radio"
 							:checked="formValue === optionKey"
-							v-on:input="
+							:value="optionKey"
+							:name="`${flattenedInstancePath}-options`"
+							@input="
 								($event) =>
 									handleInput(optionKey, 'ss-option-change')
 							"
-							:value="optionKey"
-							:id="`${flattenedInstancePath}-option-${optionKey}`"
-							:name="`${flattenedInstancePath}-options`"
 						/><label
 							:for="`${flattenedInstancePath}-option-${optionKey}`"
 							>{{ option }}</label
@@ -81,7 +81,7 @@ export default {
 				category: FieldCategory.Style,
 				desc: "Specify how to lay out the options.",
 			},
-			cssClasses
+			cssClasses,
 		},
 		events: {
 			"ss-option-change": {
@@ -105,7 +105,6 @@ const ss = inject(injectionKeys.core);
 const instancePath = inject(injectionKeys.instancePath);
 
 const { formValue, handleInput } = useFormValueBroker(ss, instancePath, rootEl);
-
 </script>
 
 <style scoped>
diff --git a/ui/src/core_components/input/CoreSelectInput.vue b/ui/src/core_components/input/CoreSelectInput.vue
index 2c5944853..91f5aa801 100644
--- a/ui/src/core_components/input/CoreSelectInput.vue
+++ b/ui/src/core_components/input/CoreSelectInput.vue
@@ -1,10 +1,20 @@
 <template>
-	<div class="CoreSelectInput" ref="rootEl">
-		<div class="labelContainer" v-if="fields.label.value || fields.label.value === 0">
+	<div ref="rootEl" class="CoreSelectInput">
+		<div
+			v-if="fields.label.value || fields.label.value === 0"
+			class="labelContainer"
+		>
 			<label>{{ fields.label.value }}</label>
 		</div>
-		<BaseSelect :base-id="flattenedInstancePath" :active-value="formValue ? [formValue] : []" :options="options"
-			:maximum-count="1" mode="single" v-on:change="handleChange" :placeholder="fields.placeholder.value"></BaseSelect>
+		<BaseSelect
+			:base-id="flattenedInstancePath"
+			:active-value="formValue ? [formValue] : []"
+			:options="options"
+			:maximum-count="1"
+			mode="single"
+			:placeholder="fields.placeholder.value"
+			@change="handleChange"
+		></BaseSelect>
 	</div>
 </template>
 
@@ -12,7 +22,15 @@
 import { computed, inject, Ref } from "vue";
 import { ref } from "vue";
 import { FieldCategory, FieldType } from "../../streamsyncTypes";
-import { accentColor, containerBackgroundColor, cssClasses, primaryTextColor, secondaryTextColor, selectedColor, separatorColor } from "../../renderer/sharedStyleFields";
+import {
+	accentColor,
+	containerBackgroundColor,
+	cssClasses,
+	primaryTextColor,
+	secondaryTextColor,
+	selectedColor,
+	separatorColor,
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A user input component that allows users to select a single value from a searchable list of options.";
@@ -44,13 +62,13 @@ export default {
 			placeholder: {
 				name: "Placeholder",
 				desc: "Text to show when no options are selected.",
-				type: FieldType.Text
+				type: FieldType.Text,
 			},
 			maximumCount: {
 				name: "Maximum count",
 				desc: "The maximum allowable number of selected options. Set to zero for unlimited.",
 				type: FieldType.Number,
-				default: "0"
+				default: "0",
 			},
 			accentColor,
 			chipTextColor: {
@@ -59,7 +77,7 @@ export default {
 				default: "#ffffff",
 				desc: "The color of the text in the chips.",
 				category: FieldCategory.Style,
-				applyStyleVariable: true
+				applyStyleVariable: true,
 			},
 			selectedColor,
 			primaryTextColor,
@@ -97,7 +115,6 @@ function handleChange(selectedOptions: string[]) {
 	const selectedOption = selectedOptions?.[0] ?? null;
 	handleInput(selectedOption, "ss-option-change");
 }
-
 </script>
 
 <style scoped>
diff --git a/ui/src/core_components/input/CoreSliderInput.vue b/ui/src/core_components/input/CoreSliderInput.vue
index 6c8dce388..3b47e18b6 100644
--- a/ui/src/core_components/input/CoreSliderInput.vue
+++ b/ui/src/core_components/input/CoreSliderInput.vue
@@ -1,14 +1,20 @@
 <template>
-	<div class="CoreSliderInput" ref="rootEl">
+	<div ref="rootEl" class="CoreSliderInput">
 		<label>{{ fields.label.value }}</label>
 		<div class="inputArea">
 			<input
 				type="range"
 				:value="formValue"
-				v-on:input="($event) => handleInput(($event.target as HTMLInputElement).value, 'ss-number-change')"
 				:min="fields.minValue.value"
 				:max="fields.maxValue.value"
 				:step="fields.stepSize.value"
+				@input="
+					($event) =>
+						handleInput(
+							($event.target as HTMLInputElement).value,
+							'ss-number-change',
+						)
+				"
 			/>
 			<div class="valueContainer">
 				<h3>{{ formValue }}</h3>
@@ -60,7 +66,7 @@ export default {
 				default: "1",
 				init: "1",
 			},
-			cssClasses
+			cssClasses,
 		},
 		events: {
 			"ss-number-change": {
diff --git a/ui/src/core_components/input/CoreTextInput.vue b/ui/src/core_components/input/CoreTextInput.vue
index 4c7b9d353..9374b3f6f 100644
--- a/ui/src/core_components/input/CoreTextInput.vue
+++ b/ui/src/core_components/input/CoreTextInput.vue
@@ -1,13 +1,25 @@
 <template>
-	<div class="CoreTextInput" ref="rootEl">
+	<div ref="rootEl" class="CoreTextInput">
 		<label>{{ fields.label.value }}</label>
 		<input
 			:type="fields.passwordMode.value == 'yes' ? 'password' : 'text'"
 			:value="formValue"
-			v-on:input="($event) => handleInput(($event.target as HTMLInputElement).value, 'ss-change')"
-			v-on:change="($event) => handleInput(($event.target as HTMLInputElement).value, 'ss-change-finish')"
 			:placeholder="fields.placeholder.value"
 			aria-autocomplete="none"
+			@input="
+				($event) =>
+					handleInput(
+						($event.target as HTMLInputElement).value,
+						'ss-change',
+					)
+			"
+			@change="
+				($event) =>
+					handleInput(
+						($event.target as HTMLInputElement).value,
+						'ss-change-finish',
+					)
+			"
 		/>
 	</div>
 </template>
@@ -47,11 +59,11 @@ export default {
 				type: FieldType.Text,
 				options: {
 					no: "No",
-					yes: "Yes"
+					yes: "Yes",
 				},
 				category: FieldCategory.Style,
 			},
-			cssClasses
+			cssClasses,
 		},
 		events: {
 			"ss-change": {
diff --git a/ui/src/core_components/input/CoreTextareaInput.vue b/ui/src/core_components/input/CoreTextareaInput.vue
index 4a26be7f7..d7d6c786c 100644
--- a/ui/src/core_components/input/CoreTextareaInput.vue
+++ b/ui/src/core_components/input/CoreTextareaInput.vue
@@ -1,12 +1,24 @@
 <template>
-	<div class="CoreTextareaInput" ref="rootEl">
+	<div ref="rootEl" class="CoreTextareaInput">
 		<label>{{ fields.label.value }}</label>
 		<textarea
 			:value="formValue"
-			v-on:input="($event) => handleInput(($event.target as HTMLTextAreaElement).value, 'ss-change')"
-			v-on:change="($event) => handleInput(($event.target as HTMLTextAreaElement).value, 'ss-change-finish')"
 			:placeholder="fields.placeholder.value"
 			:rows="fields.rows.value"
+			@input="
+				($event) =>
+					handleInput(
+						($event.target as HTMLTextAreaElement).value,
+						'ss-change',
+					)
+			"
+			@change="
+				($event) =>
+					handleInput(
+						($event.target as HTMLTextAreaElement).value,
+						'ss-change-finish',
+					)
+			"
 		></textarea>
 	</div>
 </template>
@@ -47,7 +59,7 @@ export default {
 				init: "5",
 				default: "5",
 			},
-			cssClasses
+			cssClasses,
 		},
 		events: {
 			"ss-change": {
diff --git a/ui/src/custom_components/BubbleMessage.vue b/ui/src/custom_components/BubbleMessage.vue
index 7b039abb4..18f1fe149 100644
--- a/ui/src/custom_components/BubbleMessage.vue
+++ b/ui/src/custom_components/BubbleMessage.vue
@@ -1,31 +1,31 @@
 <template>
 	<div class="BubbleMessage">
-        <div class="triangle"></div>
-        <div class="message">
-            <!-- Shows the current value of the field "text" -->
+		<div class="triangle"></div>
+		<div class="message">
+			<!-- Shows the current value of the field "text" -->
 
-            {{ fields.text.value }}
-        </div>
+			{{ fields.text.value }}
+		</div>
 	</div>
 </template>
 
 <script lang="ts">
-export default {    
-    streamsync: {
+export default {
+	streamsync: {
 		name: "Bubble Message",
 		description: "Shows a message in the shape of a speech bubble.",
 		category: "Content",
-		
-        // Fields will be editable via Streamsync Builder
-        
-        fields: {
+
+		// Fields will be editable via Streamsync Builder
+
+		fields: {
 			text: {
 				name: "Text",
 				type: FieldType.Text,
 			},
 		},
 
-        // Preview field is used in the Component Tree
+		// Preview field is used in the Component Tree
 
 		previewField: "text",
 	},
@@ -42,30 +42,27 @@ will be available using the evaluatedFields injection symbol.
 */
 
 const fields = inject(injectionKeys.evaluatedFields);
-
 </script>
 
 <style scoped>
-
 .BubbleMessage {
 	width: fit-content;
 	max-width: 100%;
 	display: flex;
-    position: relative;
-    background: white;
+	position: relative;
+	background: white;
 }
 
 .triangle {
-    flex: 0 0 auto;
-    border-left: 12px solid white;
-    border-top: 12px solid #f0f0f0;
+	flex: 0 0 auto;
+	border-left: 12px solid white;
+	border-top: 12px solid #f0f0f0;
 }
 
 .message {
-    flex: 1 0 auto;
-    background: #f0f0f0;
-    border-radius: 0 12px 12px 12px;
-    padding: 16px;
+	flex: 1 0 auto;
+	background: #f0f0f0;
+	border-radius: 0 12px 12px 12px;
+	padding: 16px;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/custom_components/BubbleMessageAdvanced.vue b/ui/src/custom_components/BubbleMessageAdvanced.vue
index 5d1c253b3..6017a6555 100644
--- a/ui/src/custom_components/BubbleMessageAdvanced.vue
+++ b/ui/src/custom_components/BubbleMessageAdvanced.vue
@@ -1,25 +1,28 @@
 <template>
-	<div class="BubbleMessage" :class="{ 'rightOriented': fields.orientation.value == 'right' }" ref="rootEl">
-        <div class="triangle"></div>
-        <div class="message">
-            <!-- Shows the current value of the field "text" -->
-            <div class="text">
-                {{ fields.text.value }}
-            </div>
-            <div class="actions">
-                <div class="action" v-on:click="emitPinEvent">
-                    <i class="ri-pushpin-line"></i>
-                </div>
-                <div class="action" v-on:click="emitFlagEvent">
-                    <i class="ri-flag-line"></i>
-                </div>
-            </div>
-        </div>
+	<div
+		ref="rootEl"
+		class="BubbleMessage"
+		:class="{ rightOriented: fields.orientation.value == 'right' }"
+	>
+		<div class="triangle"></div>
+		<div class="message">
+			<!-- Shows the current value of the field "text" -->
+			<div class="text">
+				{{ fields.text.value }}
+			</div>
+			<div class="actions">
+				<div class="action" @click="emitPinEvent">
+					<i class="ri-pushpin-line"></i>
+				</div>
+				<div class="action" @click="emitFlagEvent">
+					<i class="ri-flag-line"></i>
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
 
 <script lang="ts">
-
 /*
 Define the Streamsync-specific information for the template.
 Consult the type StreamsyncComponentDefinition for an overview of all fields.
@@ -37,76 +40,82 @@ def handle_pin(state, payload):
 	state["pinned_message_id"] = payload`;
 
 const streamsync: StreamsyncComponentDefinition = {
-    name: "Bubble Message (Advanced)",
-    description: "Shows a message in the shape of a speech bubble.",
-    docs,
-    category: "Content",
-    
-    // Fields will be editable via Streamsync Builder
-    
-    fields: {
-        messageId: {
-            name: "Message id",
-            desc: "Unique id to identify the message when generating events.",
-            init: "a1",
-            type: FieldType.Text,
-        },
-        text: {
-            name: "Text",
-            desc: "The message to be displayed.",
-            default: "(Empty message)",
-            type: FieldType.Text,
-            control: FieldControl.Textarea // By default, the Text type uses a "Text" control
-        },
-        orientation: {
-            name: "Orientation",
-            category: FieldCategory.Style,
-            type: FieldType.Text,
-            options: { // Used for autocomplete
-                "left": "Pointing left",
-                "right": "Pointing right"
-            }
-        },
-        bubbleColor: {
-            name: "Bubble",
-            default: "#CFEFF3",
-            category: FieldCategory.Style,
-            type: FieldType.Color,
-            applyStyleVariable: true // Will be accessible via var(--bubbleColor)
-        },
-
-        // The following are standard style fields that are imported
-
-        primaryTextColor,
-        separatorColor,
-        containerBackgroundColor,
-        cssClasses
-    },
-
-    events: {
-        "pin-message": {
-            desc: "Emitted when the pin button is clicked.",
-            stub: pinMessageHandlerStub
-        },
-        "flag-message": {
-            desc: "Emitted when the flag button is clicked.",
-            stub: flagMessageHandlerStub
-        }
-    },
-
-    // Preview field is used in the Component Tree
-
-    previewField: "text",
-}
+	name: "Bubble Message (Advanced)",
+	description: "Shows a message in the shape of a speech bubble.",
+	docs,
+	category: "Content",
+
+	// Fields will be editable via Streamsync Builder
+
+	fields: {
+		messageId: {
+			name: "Message id",
+			desc: "Unique id to identify the message when generating events.",
+			init: "a1",
+			type: FieldType.Text,
+		},
+		text: {
+			name: "Text",
+			desc: "The message to be displayed.",
+			default: "(Empty message)",
+			type: FieldType.Text,
+			control: FieldControl.Textarea, // By default, the Text type uses a "Text" control
+		},
+		orientation: {
+			name: "Orientation",
+			category: FieldCategory.Style,
+			type: FieldType.Text,
+			options: {
+				// Used for autocomplete
+				left: "Pointing left",
+				right: "Pointing right",
+			},
+		},
+		bubbleColor: {
+			name: "Bubble",
+			default: "#CFEFF3",
+			category: FieldCategory.Style,
+			type: FieldType.Color,
+			applyStyleVariable: true, // Will be accessible via var(--bubbleColor)
+		},
+
+		// The following are standard style fields that are imported
+
+		primaryTextColor,
+		separatorColor,
+		containerBackgroundColor,
+		cssClasses,
+	},
+
+	events: {
+		"pin-message": {
+			desc: "Emitted when the pin button is clicked.",
+			stub: pinMessageHandlerStub,
+		},
+		"flag-message": {
+			desc: "Emitted when the flag button is clicked.",
+			stub: flagMessageHandlerStub,
+		},
+	},
+
+	// Preview field is used in the Component Tree
 
-export default {    
-    streamsync
+	previewField: "text",
+};
+
+export default {
+	streamsync,
 };
 </script>
 <script setup lang="ts">
-import { FieldCategory, FieldControl, FieldType, StreamsyncComponentDefinition } from "../streamsyncTypes";
+import {
+	FieldCategory,
+	FieldControl,
+	FieldType,
+	StreamsyncComponentDefinition,
+} from "../streamsyncTypes";
 import injectionKeys from "../injectionKeys";
-import { inject, computed, ref } from "vue";
+import { inject, computed, ref, Ref } from "vue";
 
 /* Standard style fields can be imported from "sharedStyleFields" 
 to avoid repetition. */
@@ -114,11 +123,11 @@ to avoid repetition. */
 import {
 	separatorColor,
 	cssClasses,
-    primaryTextColor,
-    containerBackgroundColor
+	primaryTextColor,
+	containerBackgroundColor,
 } from "../renderer/sharedStyleFields";
 
-const rootEl:Ref<HTMLElement> = ref(null); // Root element is used to fire events
+const rootEl: Ref<HTMLElement> = ref(null); // Root element is used to fire events
 
 /*
 The values for the fields defined earlier in the custom option
@@ -140,94 +149,90 @@ CustomEvent (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).
  * event, it'll be forwarded to the backend.
  */
 function emitFlagEvent() {
-
-    /*
+	/*
     When a custom event is caught, the "payload"
     property of the detail is used as payload. 
     */
 
-    const payload = messageId.value;
+	const payload = messageId.value;
 	const event = new CustomEvent("flag-message", {
 		detail: {
 			payload,
 		},
 	});
-    rootEl.value.dispatchEvent(event);
+	rootEl.value.dispatchEvent(event);
 }
 
 /**
  * Analog to emitFlagEvent, for "pin-message".
  */
 function emitPinEvent() {
-    const payload = messageId.value;
+	const payload = messageId.value;
 	const event = new CustomEvent("pin-message", {
 		detail: {
 			payload,
 		},
 	});
-    rootEl.value.dispatchEvent(event);
+	rootEl.value.dispatchEvent(event);
 }
-
 </script>
 
 <style scoped>
-
 .BubbleMessage {
 	width: fit-content;
 	max-width: 100%;
 	display: flex;
-    position: relative;
-    background: var(--containerBackgroundColor);
+	position: relative;
+	background: var(--containerBackgroundColor);
 }
 
 .triangle {
-    flex: 0 0 auto;
-    border-right: none;
-    border-bottom: none;
-    border-left: 12px solid var(--containerBackgroundColor);
-    border-top: 12px solid var(--bubbleColor);
+	flex: 0 0 auto;
+	border-right: none;
+	border-bottom: none;
+	border-left: 12px solid var(--containerBackgroundColor);
+	border-top: 12px solid var(--bubbleColor);
 }
 
 .rightOriented .triangle {
-    border-left: none;
-    border-bottom: none;
-    border-right: 12px solid var(--containerBackgroundColor);
-    border-top: 12px solid var(--bubbleColor);
-    order: 2;
+	border-left: none;
+	border-bottom: none;
+	border-right: 12px solid var(--containerBackgroundColor);
+	border-top: 12px solid var(--bubbleColor);
+	order: 2;
 }
 
 .message {
-    flex: 1 0 auto;
-    color: var(--primaryTextColor);
-    background: var(--bubbleColor);
-    border-radius: 0 12px 12px 12px;
-    min-width: 160px;
+	flex: 1 0 auto;
+	color: var(--primaryTextColor);
+	background: var(--bubbleColor);
+	border-radius: 0 12px 12px 12px;
+	min-width: 160px;
 }
 
 .rightOriented .message {
-    border-radius: 12px 0 12px 12px;
+	border-radius: 12px 0 12px 12px;
 }
 
 .actions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    justify-content: right;
-    padding: 8px;
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: right;
+	padding: 8px;
 }
 
 .action {
-    border-radius: 4px;
-    padding: 4px;
+	border-radius: 4px;
+	padding: 4px;
 }
 
 .action:hover {
-    background: var(--separatorColor);
+	background: var(--separatorColor);
 }
 
 .message .text {
-    border-bottom: 1px solid var(--separatorColor);
-    padding: 16px;
+	border-bottom: 1px solid var(--separatorColor);
+	padding: 16px;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/custom_components/index.ts b/ui/src/custom_components/index.ts
index 5154bc937..436ffd20a 100644
--- a/ui/src/custom_components/index.ts
+++ b/ui/src/custom_components/index.ts
@@ -1,12 +1,11 @@
-
 // Import the templates
 
-import BubbleMessage from './BubbleMessage.vue';
-import BubbleMessageAdvanced from './BubbleMessageAdvanced.vue';
+import BubbleMessage from "./BubbleMessage.vue";
+import BubbleMessageAdvanced from "./BubbleMessageAdvanced.vue";
 
 // Export an object with the ids and the templates as default
 
 export default {
-    "bubblemessage": BubbleMessage,
-    "bubblemessageadvanced": BubbleMessageAdvanced
-}
\ No newline at end of file
+	bubblemessage: BubbleMessage,
+	bubblemessageadvanced: BubbleMessageAdvanced,
+};
diff --git a/ui/src/injectionKeys.ts b/ui/src/injectionKeys.ts
index 547ec9d85..5604fd181 100644
--- a/ui/src/injectionKeys.ts
+++ b/ui/src/injectionKeys.ts
@@ -20,7 +20,7 @@ export default {
 	renderProxiedComponent: Symbol() as InjectionKey<
 		(
 			componentId: Component["id"],
-			instanceNumber?: InstancePathItem["instanceNumber"]
+			instanceNumber?: InstancePathItem["instanceNumber"],
 		) => VNode
 	>,
 	instancePath: Symbol() as InjectionKey<InstancePath>,
diff --git a/ui/src/main.ts b/ui/src/main.ts
index 44c32f72c..c5bbf5046 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -20,7 +20,7 @@ function setCaptureTabsDirective(app: App<Element>) {
 					"  ",
 					el.selectionStart,
 					el.selectionStart,
-					"end"
+					"end",
 				);
 			});
 		},
@@ -33,7 +33,6 @@ globalThis.vue = vue;
 globalThis.injectionKeys = injectionKeys;
 globalThis.core = ss;
 
-
 async function load() {
 	await ss.init();
 	const mode = ss.getMode();
@@ -46,8 +45,7 @@ async function load() {
 	console.log(`Mounting app in mode ${mode}...`);
 
 	const { default: componentRenderer } =
-		mode === "run" &&
-		(await import("./renderer/ComponentRenderer.vue"));
+		mode === "run" && (await import("./renderer/ComponentRenderer.vue"));
 	const { default: builderApp } =
 		mode === "edit" && (await import("./builder/BuilderApp.vue"));
 
@@ -61,10 +59,11 @@ async function load() {
 }
 
 console.log("Initialising Streamsync core...");
-load().then(async () => {
-	console.log("Core initialised.")
-})
-.catch((reason) => {
-	console.error("Core initialisation failed.", reason);
-	document.write(reason);
-});
+load()
+	.then(async () => {
+		console.log("Core initialised.");
+	})
+	.catch((reason) => {
+		console.error("Core initialisation failed.", reason);
+		document.write(reason);
+	});
diff --git a/ui/src/renderer/ChildlessPlaceholder.vue b/ui/src/renderer/ChildlessPlaceholder.vue
index c87c2c0ce..90421df44 100644
--- a/ui/src/renderer/ChildlessPlaceholder.vue
+++ b/ui/src/renderer/ChildlessPlaceholder.vue
@@ -4,7 +4,7 @@
 			<div class="title">
 				<h2>Empty {{ definition.name }}</h2>
 			</div>
-			<div class="message" v-if="message">
+			<div v-if="message" class="message">
 				{{ message }}
 			</div>
 		</div>
@@ -25,12 +25,12 @@ const props = defineProps<Props>();
 const { componentId } = toRefs(props);
 const component = computed(() => ss.getComponentById(componentId.value));
 const definition = computed(() =>
-	ss.getComponentDefinition(component.value.type)
+	ss.getComponentDefinition(component.value.type),
 );
 
 const typesToMessage = (
 	types: Component["type"][],
-	lastJoiner: "or" | "and"
+	lastJoiner: "or" | "and",
 ) => {
 	const definitions = types.map((type) => ss.getComponentDefinition(type));
 	const names = definitions.map((def) => def?.name);
diff --git a/ui/src/renderer/ComponentProxy.vue b/ui/src/renderer/ComponentProxy.vue
index c792cffb8..daf010aed 100644
--- a/ui/src/renderer/ComponentProxy.vue
+++ b/ui/src/renderer/ComponentProxy.vue
@@ -1,7 +1,12 @@
 <script lang="ts">
 import { Ref, computed, h, inject, provide, ref, watch } from "vue";
 import { getTemplate } from "../core/templateMap";
-import { Component, InstancePath, InstancePathItem, UserFunction } from "../streamsyncTypes";
+import {
+	Component,
+	InstancePath,
+	InstancePathItem,
+	UserFunction,
+} from "../streamsyncTypes";
 import ComponentProxy from "./ComponentProxy.vue";
 import { useEvaluator } from "./useEvaluator";
 import injectionKeys from "../injectionKeys";
@@ -23,10 +28,12 @@ export default {
 
 		const children = computed(() => ss.getComponents(componentId, true));
 		const isBeingEdited = computed(
-			() => !!ssbm && ssbm.getMode() != "preview"
+			() => !!ssbm && ssbm.getMode() != "preview",
 		);
 		const isDisabled = ref(false);
-		const userFunctions: Ref<UserFunction[]> = computed(() => ss.getUserFunctions());
+		const userFunctions: Ref<UserFunction[]> = computed(() =>
+			ss.getUserFunctions(),
+		);
 
 		const getChildlessPlaceholderVNode = (): VNode => {
 			if (children.value.length > 0) return;
@@ -37,7 +44,7 @@ export default {
 
 		const renderProxiedComponent = (
 			componentId: Component["id"],
-			instanceNumber: InstancePathItem["instanceNumber"] = 0
+			instanceNumber: InstancePathItem["instanceNumber"] = 0,
 		) => {
 			const vnode = h(ComponentProxy, {
 				componentId,
@@ -57,7 +64,7 @@ export default {
 		const getChildrenVNodes = (
 			instanceNumber: InstancePathItem["instanceNumber"] = 0,
 			componentFilter: (c: Component) => boolean = () => true,
-			positionlessSlot: boolean = false
+			positionlessSlot: boolean = false,
 		): VNode[] => {
 			const renderInsertionSlot = (position: number) => {
 				return h("div", {
@@ -72,7 +79,7 @@ export default {
 				.map((childComponent, childIndex) => {
 					const childVNode = renderProxiedComponent(
 						childComponent.id,
-						instanceNumber
+						instanceNumber,
 					);
 					return [
 						childVNode,
@@ -83,7 +90,7 @@ export default {
 				});
 
 			return [...(showSlots ? [renderInsertionSlot(0)] : [])].concat(
-				childrenVNodes.flat()
+				childrenVNodes.flat(),
 			);
 		};
 
@@ -120,32 +127,48 @@ export default {
 			() => ssbm?.getSelectedId() == componentId,
 			(isNowSelected) => {
 				isSelected.value = isNowSelected;
-			}
+			},
+		);
+		watch(
+			() => evaluatedFields,
+			() => {
+				isSelected.value = false;
+			},
+			{ deep: true },
 		);
-		watch(() => evaluatedFields, () => {
-			isSelected.value = false;
-		}, {deep: true});
 
 		const isChildless = computed(() => children.value.length == 0);
-		const isVisible = computed(() => isComponentVisible(componentId, instancePath));
+		const isVisible = computed(() =>
+			isComponentVisible(componentId, instancePath),
+		);
 
-		const getHandlerCallable = (handlerFunctionName: string, isBinding: boolean) => {
+		const getHandlerCallable = (
+			handlerFunctionName: string,
+			isBinding: boolean,
+		) => {
 			const isForwardable = !handlerFunctionName.startsWith("$");
 			if (isForwardable && !isBinding) {
 				return (ev: Event) => {
-
 					// Only include payload if there's a function waiting for it on the other side
 
-					let includePayload = false ;
+					let includePayload = false;
 
-					if (userFunctions.value.some(uf => uf.name == handlerFunctionName && uf.args.includes("payload"))) {
+					if (
+						userFunctions.value.some(
+							(uf) =>
+								uf.name == handlerFunctionName &&
+								uf.args.includes("payload"),
+						)
+					) {
 						includePayload = true;
 					}
 					ss.forwardEvent(ev, instancePath, includePayload);
-				}
+				};
 			}
 			if (handlerFunctionName.startsWith("$goToPage_")) {
-				const pageKey = handlerFunctionName.substring("$goToPage_".length);
+				const pageKey = handlerFunctionName.substring(
+					"$goToPage_".length,
+				);
 				return (ev: Event) => ss.setActivePageFromKey(pageKey);
 			}
 			return null;
@@ -156,20 +179,28 @@ export default {
 
 			// Handle event handlers
 
-			const handledEventTypes = Object.keys(component.value.handlers ?? {});
-			const boundEventTypes = component.value.binding ? [component.value.binding.eventType] : [];
-			const eventTypes = Array.from(new Set([...handledEventTypes, ...boundEventTypes]));
+			const handledEventTypes = Object.keys(
+				component.value.handlers ?? {},
+			);
+			const boundEventTypes = component.value.binding
+				? [component.value.binding.eventType]
+				: [];
+			const eventTypes = Array.from(
+				new Set([...handledEventTypes, ...boundEventTypes]),
+			);
 
-			eventTypes.forEach(eventType => {
+			eventTypes.forEach((eventType) => {
 				const eventKey = `on${eventType
-						.charAt(0)
-						.toUpperCase()}${eventType.slice(1)}`;
-				const isBinding = eventType === component.value.binding?.eventType;
+					.charAt(0)
+					.toUpperCase()}${eventType.slice(1)}`;
+				const isBinding =
+					eventType === component.value.binding?.eventType;
 				props[eventKey] = (ev: Event) => {
 					if (isBinding) {
 						ss.forwardEvent(ev, instancePath, true);
 					}
-					const handlerFunction = component.value.handlers?.[eventType]; 
+					const handlerFunction =
+						component.value.handlers?.[eventType];
 					if (handlerFunction) {
 						getHandlerCallable(handlerFunction, isBinding)?.(ev);
 					}
@@ -181,7 +212,7 @@ export default {
 
 		const fieldBasedStyleVars = computed(() => {
 			const fields = ss.getComponentDefinition(
-				component.value.type
+				component.value.type,
 			)?.fields;
 			if (!fields) return;
 			const styleVars = {};
@@ -196,14 +227,18 @@ export default {
 		const fieldBasedCssClasses = computed(() => {
 			const CSS_CLASSES_FIELD_KEY = "cssClasses";
 			const fields = ss.getComponentDefinition(
-				component.value.type
+				component.value.type,
 			)?.fields;
 			if (!fields) return;
-			if (!fields[CSS_CLASSES_FIELD_KEY] || !evaluatedFields[CSS_CLASSES_FIELD_KEY]) return;
-			const cssStr:string = evaluatedFields[CSS_CLASSES_FIELD_KEY].value;
-			const cssClassesArr = cssStr?.split(" ").map(s => s.trim());
+			if (
+				!fields[CSS_CLASSES_FIELD_KEY] ||
+				!evaluatedFields[CSS_CLASSES_FIELD_KEY]
+			)
+				return;
+			const cssStr: string = evaluatedFields[CSS_CLASSES_FIELD_KEY].value;
+			const cssClassesArr = cssStr?.split(" ").map((s) => s.trim());
 			const cssClasses = {};
-			cssClassesArr.forEach(key => {
+			cssClassesArr.forEach((key) => {
 				cssClasses[key] = true;
 			});
 			return cssClasses;
@@ -217,7 +252,7 @@ export default {
 					selected: isSelected.value,
 					disabled: isDisabled.value,
 					beingEdited: isBeingEdited.value,
-					...fieldBasedCssClasses.value
+					...fieldBasedCssClasses.value,
 				},
 				style: {
 					...fieldBasedStyleVars.value,
@@ -250,7 +285,7 @@ export default {
 				const vnodes = getChildrenVNodes(
 					instanceNumber,
 					componentFilter,
-					positionlessSlot
+					positionlessSlot,
 				);
 				return vnodes;
 			};
diff --git a/ui/src/renderer/ComponentRenderer.vue b/ui/src/renderer/ComponentRenderer.vue
index 362dc267b..0b52a9d78 100644
--- a/ui/src/renderer/ComponentRenderer.vue
+++ b/ui/src/renderer/ComponentRenderer.vue
@@ -62,7 +62,7 @@ watch(
 	(appName: string) => {
 		updateTitle(appName);
 	},
-	{ immediate: true }
+	{ immediate: true },
 );
 
 function updateTitle(appName: string) {
diff --git a/ui/src/renderer/LoadingSymbol.vue b/ui/src/renderer/LoadingSymbol.vue
index d2e98ef72..51bab9b3e 100644
--- a/ui/src/renderer/LoadingSymbol.vue
+++ b/ui/src/renderer/LoadingSymbol.vue
@@ -1,14 +1,12 @@
 <template>
 	<div class="LoadingSymbol">
-        <div></div>
-    </div>
+		<div></div>
+	</div>
 </template>
 
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <style scoped>
-
 @keyframes spin {
 	0% {
 		transform: rotate(0);
@@ -24,14 +22,9 @@
 	height: 24px;
 	width: 24px;
 	background: var(--primaryTextColor);
-	background: linear-gradient(
-		90deg,
-		#f0f0f0 1%,
-		currentColor 50%
-	);
+	background: linear-gradient(90deg, #f0f0f0 1%, currentColor 50%);
 	animation: spin 1s linear infinite;
 	-webkit-mask-image: radial-gradient(12px, #0000 80%, #000);
 	mask-image: radial-gradient(12px, #0000 80%, #000);
 }
-
 </style>
diff --git a/ui/src/renderer/RendererNotifications.vue b/ui/src/renderer/RendererNotifications.vue
index 530a507a9..80b731203 100644
--- a/ui/src/renderer/RendererNotifications.vue
+++ b/ui/src/renderer/RendererNotifications.vue
@@ -1,24 +1,24 @@
 <template>
 	<div
-		class="RendererNotifications"
 		v-show="notifications.length > 0"
-		v-on:click="toggle"
+		class="RendererNotifications"
+		@click="toggle"
 	>
-		<div class="balloon" ref="balloon" title="Toggle notifications">
+		<div ref="balloon" class="balloon" title="Toggle notifications">
 			<i class="ri-notification-2-line ri-xl"></i>
 			<div class="counter">{{ notifications.length }}</div>
 		</div>
 		<div class="balloonFlash"></div>
-		<div class="main" v-show="isActive">
+		<div v-show="isActive" class="main">
 			<div class="clearContainer">
-				<button v-on:click="clearAll">
+				<button @click="clearAll">
 					<i class="ri-close-line"></i> Clear all
 				</button>
 			</div>
 			<div
-				class="notification"
 				v-for="(notification, notificationId) in notifications"
 				:key="notificationId"
+				class="notification"
 			>
 				<div class="icon" :class="notification.type">
 					<i class="ri-error-warning-fill ri-xl"></i>
diff --git a/ui/src/renderer/sharedStyleFields.ts b/ui/src/renderer/sharedStyleFields.ts
index 4507955e3..54caac2bb 100644
--- a/ui/src/renderer/sharedStyleFields.ts
+++ b/ui/src/renderer/sharedStyleFields.ts
@@ -76,14 +76,14 @@ export const selectedColor = {
 	type: FieldType.Color,
 	default: "rgba(210, 234, 244, 0.8)",
 	category: FieldCategory.Style,
-	applyStyleVariable: true
+	applyStyleVariable: true,
 };
 
 export const cssClasses = {
 	name: "Custom CSS classes",
 	type: FieldType.Text,
 	category: FieldCategory.Style,
-	desc: "CSS classes, separated by spaces. You can define classes in custom stylesheets."
+	desc: "CSS classes, separated by spaces. You can define classes in custom stylesheets.",
 };
 
 export const contentWidth = {
@@ -114,4 +114,3 @@ export const contentPadding = {
 	default: "0",
 	category: FieldCategory.Style,
 };
-
diff --git a/ui/src/renderer/useEvaluator.ts b/ui/src/renderer/useEvaluator.ts
index 99dc625e7..be5c56e4a 100644
--- a/ui/src/renderer/useEvaluator.ts
+++ b/ui/src/renderer/useEvaluator.ts
@@ -11,7 +11,7 @@ export function useEvaluator(ss: Core) {
 	 */
 	function parseExpression(
 		expr: string,
-		instancePath?: InstancePath
+		instancePath?: InstancePath,
 	): string[] {
 		let accessors = [],
 			s = "";
@@ -53,14 +53,13 @@ export function useEvaluator(ss: Core) {
 		return accessors;
 	}
 
-	function evaluateExpression(
-		expr: string,
-		instancePath?: InstancePath
-	) {
-		const contextData = instancePath ? getContextData(instancePath) : undefined;
+	function evaluateExpression(expr: string, instancePath?: InstancePath) {
+		const contextData = instancePath
+			? getContextData(instancePath)
+			: undefined;
 		let contextRef = contextData;
 		let stateRef = ss.getUserState();
-		let accessors = parseExpression(expr, instancePath);
+		const accessors = parseExpression(expr, instancePath);
 
 		for (let i = 0; i < accessors.length; i++) {
 			contextRef = contextRef?.[accessors[i]];
@@ -85,7 +84,7 @@ export function useEvaluator(ss: Core) {
 
 			const repeaterObject = evaluateField(
 				repeaterInstancePath,
-				"repeaterObject"
+				"repeaterObject",
 			);
 
 			if (!repeaterObject) continue;
@@ -93,11 +92,11 @@ export function useEvaluator(ss: Core) {
 			const repeaterEntries = Object.entries(repeaterObject);
 			const keyVariable = evaluateField(
 				repeaterInstancePath,
-				"keyVariable"
+				"keyVariable",
 			);
 			const valueVariable = evaluateField(
 				repeaterInstancePath,
-				"valueVariable"
+				"valueVariable",
 			);
 
 			context[keyVariable] = repeaterEntries[instanceNumber]?.[0];
@@ -109,7 +108,7 @@ export function useEvaluator(ss: Core) {
 
 	function evaluateTemplate(
 		template: string,
-		instancePath: InstancePath
+		instancePath: InstancePath,
 	): string {
 		if (template === undefined || template === null) return "";
 
@@ -130,14 +129,14 @@ export function useEvaluator(ss: Core) {
 				}
 
 				return exprValue.toString();
-			}
+			},
 		);
 
 		return evaluatedTemplate;
 	}
 
 	function getEvaluatedFields(
-		instancePath: InstancePath
+		instancePath: InstancePath,
 	): Record<string, ComputedRef<any>> {
 		const { componentId } = instancePath.at(-1);
 		const component = ss.getComponentById(componentId);
@@ -146,7 +145,9 @@ export function useEvaluator(ss: Core) {
 		const { fields } = ss.getComponentDefinition(component.type);
 		if (!fields) return;
 		Object.keys(fields).forEach((fieldKey) => {
-			evaluatedFields[fieldKey] = computed(() => evaluateField(instancePath, fieldKey));
+			evaluatedFields[fieldKey] = computed(() =>
+				evaluateField(instancePath, fieldKey),
+			);
 		});
 
 		return evaluatedFields;
@@ -162,9 +163,9 @@ export function useEvaluator(ss: Core) {
 		const evaluated = evaluateTemplate(contentValue, instancePath);
 		const fieldType = fields[fieldKey].type;
 		const isValueEmpty =
-		typeof evaluated == "undefined" ||
-		evaluated === null ||
-		evaluated === "";
+			typeof evaluated == "undefined" ||
+			evaluated === null ||
+			evaluated === "";
 		if (fieldType == FieldType.Object || fieldType == FieldType.KeyValue) {
 			if (!evaluated) {
 				return JSON.parse(defaultValue) ?? null;
@@ -178,9 +179,10 @@ export function useEvaluator(ss: Core) {
 			}
 			return parsedValue;
 		} else if (fieldType == FieldType.Number) {
-			const floatDefaultValue = defaultValue === null ? null : parseFloat(defaultValue);
+			const floatDefaultValue =
+				defaultValue === null ? null : parseFloat(defaultValue);
 			if (isValueEmpty) return floatDefaultValue ?? null;
-			
+
 			const n = parseFloat(evaluated);
 			if (typeof n === undefined || Number.isNaN(n))
 				return floatDefaultValue ?? null;
@@ -202,7 +204,7 @@ export function useEvaluator(ss: Core) {
 	 */
 	function isComponentVisible(
 		componentId: Component["id"],
-		instancePath?: InstancePath
+		instancePath?: InstancePath,
 	): boolean {
 		const component = ss.getComponentById(componentId);
 		if (!component) return;
@@ -210,13 +212,16 @@ export function useEvaluator(ss: Core) {
 		if (typeof component.visible === "undefined") return true;
 		if (component.visible === true) return true;
 		if (component.visible === false) return false;
-		const evaluated = evaluateExpression(component.visible as string, instancePath);
+		const evaluated = evaluateExpression(
+			component.visible as string,
+			instancePath,
+		);
 		return !!evaluated;
 	}
 
 	return {
 		getEvaluatedFields,
 		isComponentVisible,
-		evaluateExpression
+		evaluateExpression,
 	};
 }
diff --git a/ui/src/renderer/useFormValueBroker.ts b/ui/src/renderer/useFormValueBroker.ts
index 21a6964ff..6e4187a9c 100644
--- a/ui/src/renderer/useFormValueBroker.ts
+++ b/ui/src/renderer/useFormValueBroker.ts
@@ -20,7 +20,6 @@ export function useFormValueBroker(
 	const queuedEvent: Ref<{ eventValue: any; emitEventType: string }> =
 		ref(null);
 
-
 	const componentId = instancePath.at(-1).componentId;
 	const component = computed(() => ss.getComponentById(componentId));
 	const { evaluateExpression } = useEvaluator(ss);
@@ -28,7 +27,10 @@ export function useFormValueBroker(
 	function getBindingValue() {
 		const component = ss.getComponentById(componentId);
 		if (component?.binding?.stateRef) {
-			const value = evaluateExpression(component.binding.stateRef, instancePath);
+			const value = evaluateExpression(
+				component.binding.stateRef,
+				instancePath,
+			);
 			return value;
 		}
 		return;
@@ -42,7 +44,11 @@ export function useFormValueBroker(
 	 * @param emitEventType
 	 * @returns
 	 */
-	function handleInput(eventValue: any, emitEventType: string, customCallback?: Function) {
+	function handleInput(
+		eventValue: any,
+		emitEventType: string,
+		customCallback?: Function,
+	) {
 		formValue.value = eventValue;
 
 		const isHandlerSet = component.value.handlers?.[emitEventType];
@@ -68,10 +74,10 @@ export function useFormValueBroker(
 			if (queuedEvent.value) {
 				handleInput(
 					queuedEvent.value.eventValue,
-					queuedEvent.value.emitEventType
+					queuedEvent.value.emitEventType,
 				);
-				queuedEvent.value = null;	
-			};
+				queuedEvent.value = null;
+			}
 			customCallback?.();
 		};
 
@@ -90,7 +96,7 @@ export function useFormValueBroker(
 			if (isBusy.value) return;
 			formValue.value = value;
 		},
-		{ immediate: true }
+		{ immediate: true },
 	);
 
 	watch(
@@ -100,7 +106,7 @@ export function useFormValueBroker(
 				formValue.value = "";
 			}
 		},
-		{ immediate: true }
+		{ immediate: true },
 	);
 
 	return {
diff --git a/ui/src/streamsyncTypes.ts b/ui/src/streamsyncTypes.ts
index 1d1018e13..6d18f31c4 100644
--- a/ui/src/streamsyncTypes.ts
+++ b/ui/src/streamsyncTypes.ts
@@ -56,7 +56,7 @@ export type StreamsyncComponentDefinition = {
 			control?: FieldControl; // Which control (text, textarea, etc) to use if not the default for the type
 			options?: Record<string, string>; // List of values to be provided as autocomplete options
 			type: FieldType; // Data type for the field
-			category?: FieldCategory; // Category (Layout, Content, etc) 
+			category?: FieldCategory; // Category (Layout, Content, etc)
 			applyStyleVariable?: boolean; // Use the value of this field as a CSS variable
 		}
 	>;
@@ -68,7 +68,7 @@ export type StreamsyncComponentDefinition = {
 			bindable?: boolean; // Whether this event is used for value binding
 		}
 	>;
-	previewField?: string; // Which field to use for previewing in the Component Tree 
+	previewField?: string; // Which field to use for previewing in the Component Tree
 	positionless?: boolean; // Whether this type of component is positionless (like Sidebar)
 };
 
@@ -114,4 +114,4 @@ export type ComponentMap = Record<Component["id"], Component>;
  */
 export type MailItem = { type: string; payload: Record<string, string> };
 
-export type UserFunction = { name: string; args: string[]};
+export type UserFunction = { name: string; args: string[] };
diff --git a/ui/vite-env.d.ts b/ui/vite-env.d.ts
index 06a17507d..e4948c983 100644
--- a/ui/vite-env.d.ts
+++ b/ui/vite-env.d.ts
@@ -1 +1 @@
-declare const STREAMSYNC_LIVE_CCT: string
+declare const STREAMSYNC_LIVE_CCT: string;
diff --git a/ui/vite.config.js b/ui/vite.config.js
index 926c087f0..cd78deadb 100644
--- a/ui/vite.config.js
+++ b/ui/vite.config.js
@@ -9,7 +9,7 @@ export default defineConfig({
 	base: "./",
 	plugins: [vue(), monacoEditorPlugin({})],
 	define: {
-		"STREAMSYNC_LIVE_CCT": JSON.stringify("no")
+		STREAMSYNC_LIVE_CCT: JSON.stringify("no"),
 	},
 	build: {
 		outDir: "../src/streamsync/static",
@@ -17,7 +17,7 @@ export default defineConfig({
 	},
 	resolve: {
 		alias: {
-			"@": fileURLToPath(new URL("./src", import.meta.url))
+			"@": fileURLToPath(new URL("./src", import.meta.url)),
 		},
 	},
 	server: {

From 53861ffb8554e08b1324089e62ba105b87850248 Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Fri, 16 Feb 2024 11:15:49 +0100
Subject: [PATCH 2/6] chore: changes according to code review

---
 .github/workflows/ci-ui.yml                | 17 -----------------
 alfred/ci.py                               |  3 ++-
 alfred/npm.py                              |  7 ++++++-
 ui/src/builder/BuilderTreeBranch.vue       |  2 +-
 ui/src/core_components/base/BaseSelect.vue |  2 +-
 5 files changed, 10 insertions(+), 21 deletions(-)
 delete mode 100644 .github/workflows/ci-ui.yml

diff --git a/.github/workflows/ci-ui.yml b/.github/workflows/ci-ui.yml
deleted file mode 100644
index a8e035901..000000000
--- a/.github/workflows/ci-ui.yml
+++ /dev/null
@@ -1,17 +0,0 @@
-name: ci-ui
-
-on: [ push, pull_request ]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js 20.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20.x
-      - run: npm i
-        working-directory: ./ui
-      - run: npm run lint:ci
-        working-directory: ./ui
diff --git a/alfred/ci.py b/alfred/ci.py
index b91ddcb14..2789fbed5 100644
--- a/alfred/ci.py
+++ b/alfred/ci.py
@@ -7,6 +7,7 @@
 def ci():
     alfred.invoke_command("ci.mypy")
     alfred.invoke_command("ci.pytest")
+    alfred.invoke_command("npm.lint")
     alfred.invoke_command("npm.build")
 
 
@@ -18,4 +19,4 @@ def ci_mypy():
 @alfred.command("ci.pytest", help="run pytest on ./tests")
 def ci_test():
     os.chdir("tests")
-    alfred.run("pytest")
\ No newline at end of file
+    alfred.run("pytest")
diff --git a/alfred/npm.py b/alfred/npm.py
index c1d980e03..da94f37aa 100644
--- a/alfred/npm.py
+++ b/alfred/npm.py
@@ -1,6 +1,11 @@
 import alfred
 import os
 
+@alfred.command("npm.lint", help="lint check ui code")
+def npm_lint():
+    os.chdir("ui")
+    alfred.run("npm run lint:ci")
+
 @alfred.command("npm.build", help="build ui code")
 def npm_build():
     os.chdir("ui")
@@ -9,4 +14,4 @@ def npm_build():
 @alfred.command("npm.build_custom_components", help="build custom components")
 def ui_build_custom():
     os.chdir("ui")
-    alfred.run("npm run custom.build")
\ No newline at end of file
+    alfred.run("npm run custom.build")
diff --git a/ui/src/builder/BuilderTreeBranch.vue b/ui/src/builder/BuilderTreeBranch.vue
index 90212ef2a..4eba33455 100644
--- a/ui/src/builder/BuilderTreeBranch.vue
+++ b/ui/src/builder/BuilderTreeBranch.vue
@@ -1,6 +1,7 @@
 <template>
 	<div class="BuilderTreeBranch">
 		<div
+			ref="rootEl"
 			class="main"
 			:class="{
 				selected: isSelected,
@@ -12,7 +13,6 @@
 			tabindex="0"
 			draggable="true"
 			@click="selfSelectComponent"
-			ref="rootEl"
 			@keydown.enter="selfSelectComponent"
 			@dragover="handleDragOver"
 			@dragstart="handleDragStart"
diff --git a/ui/src/core_components/base/BaseSelect.vue b/ui/src/core_components/base/BaseSelect.vue
index 5e7828202..d58e7062a 100644
--- a/ui/src/core_components/base/BaseSelect.vue
+++ b/ui/src/core_components/base/BaseSelect.vue
@@ -1,10 +1,10 @@
 <template>
 	<div
+		:id="baseId"
 		ref="rootEl"
 		class="BaseSelect"
 		tabindex="0"
 		:data-mode="mode"
-		:id="baseId"
 		:data-list-position="listPosition"
 		role="listbox"
 		:aria-activedescendant="

From bb2edd3bf9ec367da9f949ecc04231bed0acdd5e Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Fri, 16 Feb 2024 11:30:01 +0100
Subject: [PATCH 3/6] chore: fix line endings on windows

---
 ui/.eslintrc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
index d7fd9298c..ff884680b 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -5,7 +5,7 @@ module.exports = {
 		"@typescript-eslint/no-unused-vars": "warn",
 		"@typescript-eslint/no-explicit-any": "warn",
 		"@typescript-eslint/ban-types": "warn",
-		"prettier/prettier": [2, { useTabs: true }],
+		"prettier/prettier": [2, { useTabs: true, endOfLine: "auto" }],
 	},
 	parser: "vue-eslint-parser",
 	parserOptions: {

From 24ed53b141060b158ed5bf2be15fa09d72c416be Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Fri, 16 Feb 2024 11:39:36 +0100
Subject: [PATCH 4/6] chore: added ci options for frontend and backend

---
 alfred/ci.py | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/alfred/ci.py b/alfred/ci.py
index 2789fbed5..753239baf 100644
--- a/alfred/ci.py
+++ b/alfred/ci.py
@@ -4,12 +4,15 @@
 
 
 @alfred.command("ci", help="continuous integration pipeline")
-def ci():
-    alfred.invoke_command("ci.mypy")
-    alfred.invoke_command("ci.pytest")
-    alfred.invoke_command("npm.lint")
-    alfred.invoke_command("npm.build")
-
+@alfred.option('--front', help="run for frontend only", is_flag=True, default=False)
+@alfred.option('--back', help="run for backend only", is_flag=True, default=False)
+def ci(front, back):
+    if back or (not front and not back):
+        alfred.invoke_command("ci.mypy")
+        alfred.invoke_command("ci.pytest")
+    if front or (not front and not back):
+        alfred.invoke_command("npm.lint")
+        alfred.invoke_command("npm.build")
 
 @alfred.command("ci.mypy", help="typing checking with mypy on ./src/streamsync")
 def ci_mypy():

From ea41322005bd2eafc4d9f22fa06f65b9ec100731 Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Fri, 16 Feb 2024 11:43:24 +0100
Subject: [PATCH 5/6] chore: added short name for alfred flags

---
 alfred/ci.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/alfred/ci.py b/alfred/ci.py
index 753239baf..da5ca0e55 100644
--- a/alfred/ci.py
+++ b/alfred/ci.py
@@ -4,8 +4,8 @@
 
 
 @alfred.command("ci", help="continuous integration pipeline")
-@alfred.option('--front', help="run for frontend only", is_flag=True, default=False)
-@alfred.option('--back', help="run for backend only", is_flag=True, default=False)
+@alfred.option('--front', '-f', help="run for frontend only", is_flag=True, default=False)
+@alfred.option('--back', '-b', help="run for backend only", is_flag=True, default=False)
 def ci(front, back):
     if back or (not front and not back):
         alfred.invoke_command("ci.mypy")

From d0e1b6ca8a86b5dfe0ab734b361c9d53e0735fee Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Mon, 19 Feb 2024 16:46:54 +0100
Subject: [PATCH 6/6] chore: fix eslint errors for new components

---
 .../core_components/embed/CoreGoogleMaps.vue  | 85 ++++++++++---------
 ui/src/core_components/embed/CoreIFrame.vue   | 28 +++---
 ui/src/core_components/embed/CorePDF.vue      | 50 ++++++-----
 3 files changed, 87 insertions(+), 76 deletions(-)

diff --git a/ui/src/core_components/embed/CoreGoogleMaps.vue b/ui/src/core_components/embed/CoreGoogleMaps.vue
index 0b50b944a..a0bd5d17f 100644
--- a/ui/src/core_components/embed/CoreGoogleMaps.vue
+++ b/ui/src/core_components/embed/CoreGoogleMaps.vue
@@ -1,19 +1,20 @@
 <template>
-	<div class="CoreGoogleMaps" ref="rootEl">
-		<div class="map" ref="mapEl" />
-    <div class="mask" />
+	<div ref="rootEl" class="CoreGoogleMaps">
+		<div ref="mapEl" class="map" />
+		<div class="mask" />
 	</div>
 </template>
 
 <script lang="ts">
+/* global google */
 import { FieldType } from "../../streamsyncTypes";
 import { cssClasses } from "../../renderer/sharedStyleFields";
 
-
-const description = "A component to embed a Google Map. It can be used to display a map with markers.";
+const description =
+	"A component to embed a Google Map. It can be used to display a map with markers.";
 
 const markersDefaultData = [
-	{lat: 37.79322359164316, lng: -122.39999318828129, name: "Marker"}
+	{ lat: 37.79322359164316, lng: -122.39999318828129, name: "Marker" },
 ];
 
 export default {
@@ -24,19 +25,19 @@ export default {
 		fields: {
 			apiKey: {
 				name: "API Key",
-				default: '',
+				default: "",
 				desc: "API Key from Google Cloud Console",
 				type: FieldType.Text,
 			},
 			mapId: {
 				name: "Map ID",
-				default: '',
+				default: "",
 				desc: "ID of map from Google Cloud Console, needed for markers",
 				type: FieldType.Text,
 			},
 			mapType: {
 				name: "Map type",
-				default: 'roadmap',
+				default: "roadmap",
 				type: FieldType.Text,
 				desc: "One of 'roadmap', 'satellite', 'hybrid' or 'terrain'",
 			},
@@ -78,21 +79,23 @@ export default {
 <script setup lang="ts">
 import { Ref, inject, ref, onMounted, watch, computed } from "vue";
 import injectionKeys from "../../injectionKeys";
-import { Loader } from "@googlemaps/js-api-loader"
+import { Loader } from "@googlemaps/js-api-loader";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const mapEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
-let map : google.maps.Map | null = null;
+let map: google.maps.Map | null = null;
 let markers = [];
 
-const center = computed<{ lat: number; lng: number; }>(() => ({ lat: fields.lat.value, lng: fields.lng.value }));;
-const mapType = computed(() => (
-	['roadmap', 'satellite', 'hybrid', 'terrain'].includes(fields.mapType.value) 
-		? fields.mapType.value 
-		: 'roadmap'
-));
-
+const center = computed<{ lat: number; lng: number }>(() => ({
+	lat: fields.lat.value,
+	lng: fields.lng.value,
+}));
+const mapType = computed(() =>
+	["roadmap", "satellite", "hybrid", "terrain"].includes(fields.mapType.value)
+		? fields.mapType.value
+		: "roadmap",
+);
 
 const initMap = async () => {
 	clearMarkers();
@@ -108,7 +111,7 @@ const initMap = async () => {
 		mapId: fields.mapId.value,
 	});
 
-	map.addListener('click', (e: any) => {
+	map.addListener("click", (e: any) => {
 		const event = new CustomEvent("gmap-click", {
 			detail: {
 				payload: e.latLng.toJSON(),
@@ -118,14 +121,20 @@ const initMap = async () => {
 	});
 
 	buildMarkers();
-}
+};
 
 const buildMarkers = async () => {
 	if (!fields.mapId.value) return;
 	if (!fields.markers.value) return;
-	const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
+	const { AdvancedMarkerElement } = (await google.maps.importLibrary(
+		"marker",
+	)) as google.maps.MarkerLibrary;
 	clearMarkers();
-	const markersData = fields.markers.value as ({ lat: number; lng: number; name: string; }[])
+	const markersData = fields.markers.value as {
+		lat: number;
+		lng: number;
+		name: string;
+	}[];
 	markersData.forEach((markerData) => {
 		const marker = new AdvancedMarkerElement({
 			position: {
@@ -138,7 +147,7 @@ const buildMarkers = async () => {
 
 		markers.push(marker);
 
-		marker.addListener('click', () => {
+		marker.addListener("click", () => {
 			const event = new CustomEvent("gmap-marker-click", {
 				detail: {
 					payload: markerData,
@@ -178,8 +187,6 @@ watch(mapType, async (newVal) => {
 watch(fields.markers, buildMarkers);
 watch(fields.apiKey, initMap);
 watch(fields.mapId, initMap);
-
-
 </script>
 
 <style scoped>
@@ -191,28 +198,28 @@ watch(fields.mapId, initMap);
 	height: 80vh;
 }
 
-.CoreGoogleMaps .map{
-  width: 100%;
-  height: 100%;
-  display: block;
-  margin: auto;
-  border: 1px solid var(--separatorColor);
+.CoreGoogleMaps .map {
+	width: 100%;
+	height: 100%;
+	display: block;
+	margin: auto;
+	border: 1px solid var(--separatorColor);
 }
 
 .CoreGoogleMaps .mask {
-  pointer-events: none;
+	pointer-events: none;
 }
 
 .CoreGoogleMaps.beingEdited .mask {
-  pointer-events: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+	pointer-events: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 }
 
 .CoreGoogleMaps.beingEdited.selected .mask {
-  pointer-events: none;
+	pointer-events: none;
 }
 </style>
diff --git a/ui/src/core_components/embed/CoreIFrame.vue b/ui/src/core_components/embed/CoreIFrame.vue
index 5c0eab4cb..3c6a911cd 100644
--- a/ui/src/core_components/embed/CoreIFrame.vue
+++ b/ui/src/core_components/embed/CoreIFrame.vue
@@ -65,15 +65,15 @@ function handleLoad() {
 }
 
 .CoreIFrame.beingEdited:not(.selected) iframe {
-    pointer-events: none;
+	pointer-events: none;
 }
 
-.CoreIFrame  iframe {
-  width: 100%;
-  height: 100%;
-  display: block;
-  margin: auto;
-  border: 1px solid var(--separatorColor);
+.CoreIFrame iframe {
+	width: 100%;
+	height: 100%;
+	display: block;
+	margin: auto;
+	border: 1px solid var(--separatorColor);
 }
 
 .CoreIFrame .mask {
@@ -81,13 +81,13 @@ function handleLoad() {
 }
 
 .CoreIFrame.beingEdited .mask {
-  pointer-events: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0);
+	pointer-events: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0);
 }
 
 .CoreIFrame.beingEdited.selected .mask {
diff --git a/ui/src/core_components/embed/CorePDF.vue b/ui/src/core_components/embed/CorePDF.vue
index f5b32a30a..2d4fdb15d 100644
--- a/ui/src/core_components/embed/CorePDF.vue
+++ b/ui/src/core_components/embed/CorePDF.vue
@@ -1,8 +1,14 @@
 <template>
 	<div class="CorePDF">
-		<object class="pdf" :data="fields.source.value" :key="fields.source.value" type="application/pdf">
+		<object
+			:key="fields.source.value"
+			class="pdf"
+			:data="fields.source.value"
+			type="application/pdf"
+		>
 			<p>
-				You're not authorised to embed in the browser or you don't have PDF plugin
+				You're not authorised to embed in the browser or you don't have
+				PDF plugin
 				<a :href="fields.source.value">download the PDF file. </a>
 			</p>
 		</object>
@@ -10,12 +16,11 @@
 	</div>
 </template>
 
-<script lang='ts'>
+<script lang="ts">
 import { FieldType } from "../../streamsyncTypes";
 import { cssClasses } from "../../renderer/sharedStyleFields";
 
-const description =
-	"A component to embed a PDF document.";
+const description = "A component to embed a PDF document.";
 
 export default {
 	streamsync: {
@@ -43,9 +48,9 @@ const fields = inject(injectionKeys.evaluatedFields);
 <style scoped>
 @import "../../renderer/sharedStyles.css";
 .CorePDF {
-  position: relative;
-  width: 100%;
-  height: 80vh;
+	position: relative;
+	width: 100%;
+	height: 80vh;
 }
 
 .CorePDF.beingEdited:not(.selected) object {
@@ -53,29 +58,28 @@ const fields = inject(injectionKeys.evaluatedFields);
 }
 
 .CorePDF .pdf {
-  width: 100%;
-  height: 100%;
-  display: block;
-  margin: auto;
-  border: 1px solid var(--separatorColor);
+	width: 100%;
+	height: 100%;
+	display: block;
+	margin: auto;
+	border: 1px solid var(--separatorColor);
 }
 
 .CorePDF .mask {
-  pointer-events: none;
+	pointer-events: none;
 }
 
 .CorePDF.beingEdited .mask {
-  pointer-events: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0);
+	pointer-events: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0);
 }
 
 .CorePDF.beingEdited.selected .mask {
-  pointer-events: none;
+	pointer-events: none;
 }
 </style>
-