From 7e0cbb60b4e9a4038b357cfba4f9f0c13e833ca8 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 2 Jan 2022 06:00:02 -0800
Subject: [PATCH] Major frontend code cleanup (#452)

Many large changes, including:
- TypeScript enums are now string unions throughout
- Strong type-checking throughout the TS and Vue codebase
- Vue component props now all specify `as PropType<...>`
- Usage of annotated return types on all functions
- Sorting of JS import statements
- Explicit usage of Vue bind attribute function call arguments (`@click="foo"` is now `@click=(e) => foo(e)`)
- Much improved code quality related to the color picker
- Consistent camelCase Vue bind and v-model attributes
- Consistent Vue HTML attribute strings with single quotes
- Bug fix and clarity improvement with incorrect hint class parameters
- Empty Vue component objects like `props: {}` and `components: {}` removed
---
 frontend/.eslintrc.js                         |  53 +++
 frontend/src/App.vue                          |  14 +-
 frontend/src/components/panels/Document.vue   |  95 +++--
 frontend/src/components/panels/LayerTree.vue  |  69 ++--
 frontend/src/components/panels/Minimap.vue    |   5 +-
 frontend/src/components/panels/Properties.vue |   5 +-
 .../components/widgets/buttons/IconButton.vue |  14 +-
 .../widgets/buttons/PopoverButton.vue         |  21 +-
 .../components/widgets/buttons/TextButton.vue |  16 +-
 .../widgets/floating-menus/ColorPicker.vue    | 221 +++++------
 .../widgets/floating-menus/DialogModal.vue    |  14 +-
 .../widgets/floating-menus/FloatingMenu.vue   |  48 +--
 .../widgets/floating-menus/MenuList.vue       |  30 +-
 .../widgets/inputs/CheckboxInput.vue          |  10 +-
 .../widgets/inputs/DropdownInput.vue          |  20 +-
 .../widgets/inputs/MenuBarInput.vue           |  57 ++-
 .../components/widgets/inputs/NumberInput.vue |  59 ++-
 .../widgets/inputs/OptionalInput.vue          |   7 +-
 .../components/widgets/inputs/RadioInput.vue  |   2 +-
 .../widgets/inputs/ShelfItemInput.vue         |   9 +-
 .../widgets/inputs/SwatchPairInput.vue        |  68 ++--
 .../components/widgets/labels/IconLabel.vue   | 361 +++++++++---------
 .../components/widgets/labels/TextLabel.vue   |   7 +-
 .../widgets/labels/UserInputLabel.vue         |  65 +---
 .../widgets/options/ToolOptions.vue           |  41 +-
 .../components/widgets/rulers/CanvasRuler.vue |  30 +-
 .../scrollbars/PersistentScrollbar.vue        |  34 +-
 .../widgets/separators/Separator.vue          |  17 +-
 frontend/src/components/window/MainWindow.vue |  15 +-
 .../window/status-bar/StatusBar.vue           |   6 +-
 .../components/window/title-bar/TitleBar.vue  |  28 +-
 .../window/title-bar/WindowButtonsMac.vue     |   4 +-
 .../window/title-bar/WindowButtonsWeb.vue     |   2 +-
 .../window/title-bar/WindowButtonsWindows.vue |   4 +-
 .../window/title-bar/WindowTitle.vue          |   4 +-
 frontend/src/components/workspace/Panel.vue   |  39 +-
 .../src/components/workspace/Workspace.vue    |   4 +-
 frontend/src/dispatcher/js-dispatcher.ts      |   6 +-
 frontend/src/dispatcher/js-messages.ts        |  46 ++-
 frontend/src/lifetime/auto-save.ts            |  11 +-
 frontend/src/lifetime/errors.ts               |   8 +-
 frontend/src/lifetime/input.ts                |  47 +--
 frontend/src/main.ts                          |   2 +-
 frontend/src/state/dialog.ts                  |  23 +-
 frontend/src/state/documents.ts               |  21 +-
 frontend/src/state/fullscreen.ts              |   9 +-
 frontend/src/state/wasm-loader.ts             |  13 +-
 frontend/src/utilities/color.ts               |  79 ++--
 frontend/src/utilities/files.ts               |   4 +-
 frontend/src/utilities/math.ts                |   2 +-
 frontend/src/utilities/strip-indents.ts       |   2 +-
 .../widgets => utilities}/widgets.ts          |  15 +-
 frontend/vue.config.js                        |   2 +-
 53 files changed, 842 insertions(+), 946 deletions(-)
 rename frontend/src/{components/widgets => utilities}/widgets.ts (89%)

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index ddb7572817..358fe5ae78 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -73,9 +73,54 @@ module.exports = {
 		"@typescript-eslint/no-use-before-define": "off",
 		"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
 		"@typescript-eslint/no-loss-of-precision": "off", // TODO: Remove this line after upgrading to eslint 7.1 or greater
+		"@typescript-eslint/explicit-function-return-type": ["error"],
 
 		// Import plugin config (used to intelligently validate module import statements)
 		"import/prefer-default-export": "off",
+		"import/no-relative-packages": "error",
+		"import/order": [
+			"error",
+			{
+				alphabetize: {
+					order: "asc",
+					caseInsensitive: true,
+				},
+				warnOnUnassignedImports: true,
+				"newlines-between": "always-and-inside-groups",
+				pathGroups: [
+					{
+						pattern: "**/*.vue",
+						group: "unknown",
+						position: "after",
+					},
+					{
+						pattern: "**/assets/12px-solid/*.svg",
+						group: "unknown",
+						position: "after",
+					},
+					{
+						pattern: "**/assets/16px-solid/*.svg",
+						group: "unknown",
+						position: "after",
+					},
+					{
+						pattern: "**/assets/16px-two-tone/*.svg",
+						group: "unknown",
+						position: "after",
+					},
+					{
+						pattern: "**/assets/24px-full-color/*.svg",
+						group: "unknown",
+						position: "after",
+					},
+					{
+						pattern: "**/assets/24px-two-tone/*.svg",
+						group: "unknown",
+						position: "after",
+					},
+				],
+			},
+		],
 
 		// Prettier plugin config (used to enforce HTML, CSS, and JS formatting styles as an ESLint plugin, where fixes are reported to ESLint to be applied when linting)
 		"prettier-vue/prettier": [
@@ -90,4 +135,12 @@ module.exports = {
 		// Vue plugin config (used to validate Vue single-file components)
 		"vue/multi-word-component-names": "off",
 	},
+	overrides: [
+		{
+			files: ["*.js"],
+			rules: {
+				"@typescript-eslint/explicit-function-return-type": ["off"],
+			},
+		},
+	],
 };
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 9ee7b9df98..77d472ad97 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -221,16 +221,16 @@ img {
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { DialogState, createDialogState } from "@/state/dialog";
+import { createAutoSaveManager } from "@/lifetime/auto-save";
+import { initErrorHandling } from "@/lifetime/errors";
+import { createInputManager, InputManager } from "@/lifetime/input";
+import { createDialogState, DialogState } from "@/state/dialog";
 import { createDocumentsState, DocumentsState } from "@/state/documents";
 import { createFullscreenState, FullscreenState } from "@/state/fullscreen";
-
-import MainWindow from "@/components/window/MainWindow.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import { createEditorState, EditorState } from "@/state/wasm-loader";
-import { createInputManager, InputManager } from "@/lifetime/input";
-import { initErrorHandling } from "@/lifetime/errors";
-import { createAutoSaveManager } from "@/lifetime/auto-save";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import MainWindow from "@/components/window/MainWindow.vue";
 
 // Vue injects don't play well with TypeScript, and all injects will show up as `any`. As a workaround, we can define these types.
 declare module "@vue/runtime-core" {
diff --git a/frontend/src/components/panels/Document.vue b/frontend/src/components/panels/Document.vue
index 5348e227a2..bef8f4c8e1 100644
--- a/frontend/src/components/panels/Document.vue
+++ b/frontend/src/components/panels/Document.vue
@@ -4,35 +4,35 @@
 			<div class="left side">
 				<DropdownInput :menuEntries="documentModeEntries" v-model:selectedIndex="documentModeSelectionIndex" :drawIcon="true" />
 
-				<Separator :type="SeparatorType.Section" />
+				<Separator :type="'Section'" />
 
 				<ToolOptions :activeTool="activeTool" :activeToolOptions="activeToolOptions" />
 			</div>
 			<div class="spacer"></div>
 			<div class="right side">
-				<OptionalInput v-model:checked="snappingEnabled" @update:checked="setSnap" :icon="'Snapping'" title="Snapping" />
+				<OptionalInput v-model:checked="snappingEnabled" @update:checked="(newStatus) => setSnap(newStatus)" :icon="'Snapping'" title="Snapping" />
 				<PopoverButton>
 					<h3>Snapping</h3>
 					<p>The contents of this popover menu are coming soon</p>
 				</PopoverButton>
 
-				<Separator :type="SeparatorType.Unrelated" />
+				<Separator :type="'Unrelated'" />
 
-				<OptionalInput v-model:checked="gridEnabled" @update:checked="dialog.comingSoon(318)" :icon="'Grid'" title="Grid" />
+				<OptionalInput v-model:checked="gridEnabled" @update:checked="() => dialog.comingSoon(318)" :icon="'Grid'" title="Grid" />
 				<PopoverButton>
 					<h3>Grid</h3>
 					<p>The contents of this popover menu are coming soon</p>
 				</PopoverButton>
 
-				<Separator :type="SeparatorType.Unrelated" />
+				<Separator :type="'Unrelated'" />
 
-				<OptionalInput v-model:checked="overlaysEnabled" @update:checked="dialog.comingSoon(99)" :icon="'Overlays'" title="Overlays" />
+				<OptionalInput v-model:checked="overlaysEnabled" @update:checked="() => dialog.comingSoon(99)" :icon="'Overlays'" title="Overlays" />
 				<PopoverButton>
 					<h3>Overlays</h3>
 					<p>The contents of this popover menu are coming soon</p>
 				</PopoverButton>
 
-				<Separator :type="SeparatorType.Unrelated" />
+				<Separator :type="'Unrelated'" />
 
 				<RadioInput :entries="viewModeEntries" v-model:selectedIndex="viewModeIndex" class="combined-after" />
 				<PopoverButton>
@@ -40,27 +40,27 @@
 					<p>The contents of this popover menu are coming soon</p>
 				</PopoverButton>
 
-				<Separator :type="SeparatorType.Section" />
+				<Separator :type="'Section'" />
 
-				<NumberInput @update:value="setRotation" v-model:value="documentRotation" :incrementFactor="15" :unit="`°`" />
+				<NumberInput @update:value="(newRotation) => setRotation(newRotation)" v-model:value="documentRotation" :incrementFactor="15" :unit="'°'" />
 
-				<Separator :type="SeparatorType.Section" />
+				<Separator :type="'Section'" />
 
-				<IconButton :action="() => this.$refs.zoom.onIncrement(IncrementDirection.Increase)" :icon="'ZoomIn'" :size="24" title="Zoom In" />
-				<IconButton :action="() => this.$refs.zoom.onIncrement(IncrementDirection.Decrease)" :icon="'ZoomOut'" :size="24" title="Zoom Out" />
+				<IconButton :action="() => this.$refs.zoom.onIncrement('Increase')" :icon="'ZoomIn'" :size="24" title="Zoom In" />
+				<IconButton :action="() => this.$refs.zoom.onIncrement('Decrease')" :icon="'ZoomOut'" :size="24" title="Zoom Out" />
 				<IconButton :action="() => this.$refs.zoom.updateValue(100)" :icon="'ZoomReset'" :size="24" title="Zoom to 100%" />
 
-				<Separator :type="SeparatorType.Related" />
+				<Separator :type="'Related'" />
 
 				<NumberInput
 					v-model:value="documentZoom"
-					@update:value="setCanvasZoom"
+					@update:value="(newZoom) => setCanvasZoom(newZoom)"
 					:min="0.000001"
 					:max="1000000"
-					:incrementBehavior="IncrementBehavior.Callback"
+					:incrementBehavior="'Callback'"
 					:incrementCallbackIncrease="increaseCanvasZoom"
 					:incrementCallbackDecrease="decreaseCanvasZoom"
-					:unit="`%`"
+					:unit="'%'"
 					:displayDecimalPlaces="4"
 					ref="zoom"
 				/>
@@ -74,13 +74,13 @@
 					<ShelfItemInput icon="LayoutNavigateTool" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" :action="() => selectTool('Navigate')" />
 					<ShelfItemInput icon="LayoutEyedropperTool" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" :action="() => selectTool('Eyedropper')" />
 
-					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
+					<Separator :type="'Section'" :direction="'Vertical'" />
 
 					<ShelfItemInput icon="ParametricTextTool" title="Text Tool (T)" :active="activeTool === 'Text'" :action="() => dialog.comingSoon(153) && selectTool('Text')" />
 					<ShelfItemInput icon="ParametricFillTool" title="Fill Tool (F)" :active="activeTool === 'Fill'" :action="() => selectTool('Fill')" />
 					<ShelfItemInput icon="ParametricGradientTool" title="Gradient Tool (H)" :active="activeTool === 'Gradient'" :action="() => dialog.comingSoon() && selectTool('Gradient')" />
 
-					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
+					<Separator :type="'Section'" :direction="'Vertical'" />
 
 					<ShelfItemInput icon="RasterBrushTool" title="Brush Tool (B)" :active="activeTool === 'Brush'" :action="() => dialog.comingSoon() && selectTool('Brush')" />
 					<ShelfItemInput icon="RasterHealTool" title="Heal Tool (J)" :active="activeTool === 'Heal'" :action="() => dialog.comingSoon() && selectTool('Heal')" />
@@ -89,7 +89,7 @@
 					<ShelfItemInput icon="RasterBlurSharpenTool" title="Detail Tool (D)" :active="activeTool === 'BlurSharpen'" :action="() => dialog.comingSoon() && selectTool('BlurSharpen')" />
 					<ShelfItemInput icon="RasterRelightTool" title="Relight Tool (O)" :active="activeTool === 'Relight'" :action="() => dialog.comingSoon() && selectTool('Relight')" />
 
-					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
+					<Separator :type="'Section'" :direction="'Vertical'" />
 
 					<ShelfItemInput icon="VectorPathTool" title="Path Tool (A)" :active="activeTool === 'Path'" :action="() => selectTool('Path')" />
 					<ShelfItemInput icon="VectorPenTool" title="Pen Tool (P)" :active="activeTool === 'Pen'" :action="() => selectTool('Pen')" />
@@ -111,11 +111,11 @@
 			</LayoutCol>
 			<LayoutCol :class="'viewport'">
 				<LayoutRow :class="'bar-area'">
-					<CanvasRuler :origin="rulerOrigin.x" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="RulerDirection.Horizontal" :class="'top-ruler'" />
+					<CanvasRuler :origin="rulerOrigin.x" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Horizontal'" :class="'top-ruler'" />
 				</LayoutRow>
 				<LayoutRow :class="'canvas-area'">
 					<LayoutCol :class="'bar-area'">
-						<CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="RulerDirection.Vertical" />
+						<CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Vertical'" />
 					</LayoutCol>
 					<LayoutCol :class="'canvas-area'">
 						<div class="canvas" ref="canvas">
@@ -125,22 +125,22 @@
 					</LayoutCol>
 					<LayoutCol :class="'bar-area'">
 						<PersistentScrollbar
-							:direction="ScrollbarDirection.Vertical"
+							:direction="'Vertical'"
 							:handlePosition="scrollbarPos.y"
-							@update:handlePosition="translateCanvasY"
+							@update:handlePosition="(newValue) => translateCanvasY(newValue)"
 							v-model:handleLength="scrollbarSize.y"
-							@pressTrack="pageY"
+							@pressTrack="(delta) => pageY(delta)"
 							:class="'right-scrollbar'"
 						/>
 					</LayoutCol>
 				</LayoutRow>
 				<LayoutRow :class="'bar-area'">
 					<PersistentScrollbar
-						:direction="ScrollbarDirection.Horizontal"
+						:direction="'Horizontal'"
 						:handlePosition="scrollbarPos.x"
-						@update:handlePosition="translateCanvasX"
+						@update:handlePosition="(newValue) => translateCanvasX(newValue)"
 						v-model:handleLength="scrollbarSize.x"
-						@pressTrack="pageX"
+						@pressTrack="(delta) => pageX(delta)"
 						:class="'bottom-scrollbar'"
 					/>
 				</LayoutRow>
@@ -247,24 +247,22 @@
 import { defineComponent } from "vue";
 
 import { UpdateArtwork, UpdateOverlays, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/dispatcher/js-messages";
-import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
-import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
-import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
-import ShelfItemInput from "@/components/widgets/inputs/ShelfItemInput.vue";
-import Separator from "@/components/widgets/separators/Separator.vue";
-import PersistentScrollbar, { ScrollbarDirection } from "@/components/widgets/scrollbars/PersistentScrollbar.vue";
-import CanvasRuler, { RulerDirection } from "@/components/widgets/rulers/CanvasRuler.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
-import RadioInput, { RadioEntries } from "@/components/widgets/inputs/RadioInput.vue";
-import NumberInput, { IncrementDirection, IncrementBehavior } from "@/components/widgets/inputs/NumberInput.vue";
-import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
-import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
-import ToolOptions from "@/components/widgets/options/ToolOptions.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
+import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
+import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
+import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
+import RadioInput, { RadioEntries } from "@/components/widgets/inputs/RadioInput.vue";
+import ShelfItemInput from "@/components/widgets/inputs/ShelfItemInput.vue";
+import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
+import ToolOptions from "@/components/widgets/options/ToolOptions.vue";
+import CanvasRuler from "@/components/widgets/rulers/CanvasRuler.vue";
+import PersistentScrollbar from "@/components/widgets/scrollbars/PersistentScrollbar.vue";
+import Separator from "@/components/widgets/separators/Separator.vue";
 
 export default defineComponent({
 	inject: ["editor", "dialog"],
@@ -368,14 +366,14 @@ export default defineComponent({
 		const documentModeEntries: SectionsOfMenuListEntries = [
 			[
 				{ label: "Design Mode", icon: "ViewportDesignMode" },
-				{ label: "Select Mode", icon: "ViewportSelectMode", action: () => this.dialog.comingSoon(330) },
-				{ label: "Guide Mode", icon: "ViewportGuideMode", action: () => this.dialog.comingSoon(331) },
+				{ label: "Select Mode", icon: "ViewportSelectMode", action: (): void => this.dialog.comingSoon(330) },
+				{ label: "Guide Mode", icon: "ViewportGuideMode", action: (): void => this.dialog.comingSoon(331) },
 			],
 		];
 		const viewModeEntries: RadioEntries = [
-			{ value: "normal", icon: "ViewModeNormal", tooltip: "View Mode: Normal", action: () => this.setViewMode("Normal") },
-			{ value: "outline", icon: "ViewModeOutline", tooltip: "View Mode: Outline", action: () => this.setViewMode("Outline") },
-			{ value: "pixels", icon: "ViewModePixels", tooltip: "View Mode: Pixels", action: () => this.dialog.comingSoon(320) },
+			{ value: "normal", icon: "ViewModeNormal", tooltip: "View Mode: Normal", action: (): void => this.setViewMode("Normal") },
+			{ value: "outline", icon: "ViewModeOutline", tooltip: "View Mode: Outline", action: (): void => this.setViewMode("Outline") },
+			{ value: "pixels", icon: "ViewModePixels", tooltip: "View Mode: Pixels", action: (): void => this.dialog.comingSoon(320) },
 		];
 
 		return {
@@ -400,13 +398,6 @@ export default defineComponent({
 			rulerOrigin: { x: 0, y: 0 },
 			rulerSpacing: 100,
 			rulerInterval: 100,
-			IncrementBehavior,
-			IncrementDirection,
-			MenuDirection,
-			SeparatorDirection,
-			ScrollbarDirection,
-			RulerDirection,
-			SeparatorType,
 		};
 	},
 	components: {
diff --git a/frontend/src/components/panels/LayerTree.vue b/frontend/src/components/panels/LayerTree.vue
index d7df123c3e..7f08c00779 100644
--- a/frontend/src/components/panels/LayerTree.vue
+++ b/frontend/src/components/panels/LayerTree.vue
@@ -1,13 +1,27 @@
 <template>
 	<LayoutCol :class="'layer-tree-panel'">
 		<LayoutRow :class="'options-bar'">
-			<DropdownInput v-model:selectedIndex="blendModeSelectedIndex" @update:selectedIndex="setLayerBlendMode" :menuEntries="blendModeEntries" :disabled="blendModeDropdownDisabled" />
+			<DropdownInput
+				v-model:selectedIndex="blendModeSelectedIndex"
+				@update:selectedIndex="(newSelectedIndex) => setLayerBlendMode(newSelectedIndex)"
+				:menuEntries="blendModeEntries"
+				:disabled="blendModeDropdownDisabled"
+			/>
 
-			<Separator :type="SeparatorType.Related" />
+			<Separator :type="'Related'" />
 
-			<NumberInput v-model:value="opacity" @update:value="setLayerOpacity" :min="0" :max="100" :unit="`%`" :displayDecimalPlaces="2" :label="'Opacity'" :disabled="opacityNumberInputDisabled" />
+			<NumberInput
+				v-model:value="opacity"
+				@update:value="(newOpacity) => setLayerOpacity(newOpacity)"
+				:min="0"
+				:max="100"
+				:unit="'%'"
+				:displayDecimalPlaces="2"
+				:label="'Opacity'"
+				:disabled="opacityNumberInputDisabled"
+			/>
 
-			<Separator :type="SeparatorType.Related" />
+			<Separator :type="'Related'" />
 
 			<PopoverButton>
 				<h3>Compositing Options</h3>
@@ -15,7 +29,7 @@
 			</PopoverButton>
 		</LayoutRow>
 		<LayoutRow :class="'layer-tree scrollable-y'">
-			<LayoutCol :class="'list'" ref="layerTreeList" @click="deselectAllLayers" @dragover="updateLine($event)" @dragend="drop()">
+			<LayoutCol :class="'list'" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="updateLine($event)" @dragend="drop()">
 				<div class="layer-row" v-for="(layer, index) in layers" :key="layer.path">
 					<div class="layer-visibility">
 						<IconButton
@@ -26,7 +40,7 @@
 						/>
 					</div>
 					<button
-						v-if="layer.layer_type === LayerTypeOptions.Folder"
+						v-if="layer.layer_type === 'Folder'"
 						class="node-connector"
 						:class="{ expanded: layer.layer_metadata.expanded }"
 						@click.stop="handleNodeConnectorClick(layer.path)"
@@ -46,7 +60,7 @@
 					>
 						<div class="layer-thumbnail" v-html="layer.thumbnail"></div>
 						<div class="layer-type-icon">
-							<IconLabel v-if="layer.layer_type === LayerTypeOptions.Folder" :icon="'NodeTypeFolder'" title="Folder" />
+							<IconLabel v-if="layer.layer_type === 'Folder'" :icon="'NodeTypeFolder'" title="Folder" />
 							<IconLabel v-else :icon="'NodeTypePath'" title="Path" />
 						</div>
 						<div class="layer-name">
@@ -228,19 +242,17 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { BlendMode, DisplayFolderTreeStructure, UpdateLayer, LayerPanelEntry, LayerTypeOptions } from "@/dispatcher/js-messages";
-import { SeparatorType } from "@/components/widgets/widgets";
+import { BlendMode, DisplayFolderTreeStructure, UpdateLayer, LayerPanelEntry } from "@/dispatcher/js-messages";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
-import Separator from "@/components/widgets/separators/Separator.vue";
-import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
-import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
-import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
+import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
+import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
+import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import Separator from "@/components/widgets/separators/Separator.vue";
 
 const blendModeEntries: SectionsOfMenuListEntries<BlendMode> = [
 	[{ label: "Normal", value: "Normal" }],
@@ -301,13 +313,10 @@ export default defineComponent({
 			selectionRangeEndLayer: undefined as undefined | LayerPanelEntry,
 			opacity: 100,
 			draggingData: undefined as undefined | { path: BigUint64Array; above: boolean; nearestPath: BigUint64Array; insertLine: HTMLDivElement },
-			MenuDirection,
-			SeparatorType,
-			LayerTypeOptions,
 		};
 	},
 	methods: {
-		layerIndent(layer: LayerPanelEntry): string {
+		layerIndent(layer: LayerPanelEntry) {
 			return `${(layer.path.length - 1) * 16}px`;
 		},
 		async toggleLayerVisibility(path: BigUint64Array) {
@@ -316,14 +325,12 @@ export default defineComponent({
 		async handleNodeConnectorClick(path: BigUint64Array) {
 			this.editor.instance.toggle_layer_expansion(path);
 		},
-		async setLayerBlendMode() {
-			const blendMode = this.blendModeEntries.flat()[this.blendModeSelectedIndex].value;
-			if (blendMode) {
-				this.editor.instance.set_blend_mode_for_selected_layers(blendMode);
-			}
+		async setLayerBlendMode(newSelectedIndex: number) {
+			const blendMode = this.blendModeEntries.flat()[newSelectedIndex].value;
+			if (blendMode) this.editor.instance.set_blend_mode_for_selected_layers(blendMode);
 		},
-		async setLayerOpacity() {
-			this.editor.instance.set_opacity_for_selected_layers(this.opacity);
+		async setLayerOpacity(newOpacity: number) {
+			this.editor.instance.set_opacity_for_selected_layers(newOpacity);
 		},
 		async selectLayer(clickedLayer: LayerPanelEntry, ctrl: boolean, shift: boolean) {
 			this.editor.instance.select_layer(clickedLayer.path, ctrl, shift);
@@ -377,7 +384,7 @@ export default defineComponent({
 					}
 				}
 				// Inserting below current row
-				else if (distance > -closest && distance > -RANGE_TO_INSERT_WITHIN_BOTTOM_FOLDER_NOT_ROOT && distance < 0 && layer.layer_type !== LayerTypeOptions.Folder) {
+				else if (distance > -closest && distance > -RANGE_TO_INSERT_WITHIN_BOTTOM_FOLDER_NOT_ROOT && distance < 0 && layer.layer_type !== "Folder") {
 					closest = -distance;
 					nearestPath = layer.path;
 					if (child.parentNode && child.parentNode.nextSibling) {
@@ -491,7 +498,8 @@ export default defineComponent({
 		this.editor.dispatcher.subscribeJsMessage(DisplayFolderTreeStructure, (displayFolderTreeStructure) => {
 			const path = [] as bigint[];
 			this.layers = [] as LayerPanelEntry[];
-			function recurse(folder: DisplayFolderTreeStructure, layers: LayerPanelEntry[], cache: Map<string, LayerPanelEntry>) {
+
+			const recurse = (folder: DisplayFolderTreeStructure, layers: LayerPanelEntry[], cache: Map<string, LayerPanelEntry>): void => {
 				folder.children.forEach((item) => {
 					// TODO: fix toString
 					path.push(BigInt(item.layerId.toString()));
@@ -500,7 +508,8 @@ export default defineComponent({
 					if (item.children.length >= 1) recurse(item, layers, cache);
 					path.pop();
 				});
-			}
+			};
+
 			recurse(displayFolderTreeStructure, this.layers, this.layerCache);
 		});
 
diff --git a/frontend/src/components/panels/Minimap.vue b/frontend/src/components/panels/Minimap.vue
index fdd88d3382..0763d62cd8 100644
--- a/frontend/src/components/panels/Minimap.vue
+++ b/frontend/src/components/panels/Minimap.vue
@@ -7,8 +7,5 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({
-	components: {},
-	props: {},
-});
+export default defineComponent({});
 </script>
diff --git a/frontend/src/components/panels/Properties.vue b/frontend/src/components/panels/Properties.vue
index fdd88d3382..0763d62cd8 100644
--- a/frontend/src/components/panels/Properties.vue
+++ b/frontend/src/components/panels/Properties.vue
@@ -7,8 +7,5 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({
-	components: {},
-	props: {},
-});
+export default defineComponent({});
 </script>
diff --git a/frontend/src/components/widgets/buttons/IconButton.vue b/frontend/src/components/widgets/buttons/IconButton.vue
index d5f174f743..4a0eec3f74 100644
--- a/frontend/src/components/widgets/buttons/IconButton.vue
+++ b/frontend/src/components/widgets/buttons/IconButton.vue
@@ -1,5 +1,5 @@
 <template>
-	<button class="icon-button" :class="`size-${String(size)}`" @click="(e) => action(e)">
+	<button class="icon-button" :class="`size-${size}`" @click="(e) => action(e)">
 		<IconLabel :icon="icon" />
 	</button>
 </template>
@@ -57,16 +57,16 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import IconLabel, { IconName, IconSize } from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	props: {
-		action: { type: Function, required: true },
-		icon: { type: String, required: true },
-		size: { type: Number, required: true },
-		gapAfter: { type: Boolean, default: false },
+		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
+		icon: { type: String as PropType<IconName>, required: true },
+		size: { type: Number as PropType<IconSize>, required: true },
+		gapAfter: { type: Boolean as PropType<boolean>, default: false },
 	},
 	components: { IconLabel },
 });
diff --git a/frontend/src/components/widgets/buttons/PopoverButton.vue b/frontend/src/components/widgets/buttons/PopoverButton.vue
index 66c5098e43..8905504fb7 100644
--- a/frontend/src/components/widgets/buttons/PopoverButton.vue
+++ b/frontend/src/components/widgets/buttons/PopoverButton.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="popover-button">
 		<IconButton :action="handleClick" :icon="icon" :size="16" data-hover-menu-spawner />
-		<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Bottom" ref="floatingMenu">
+		<FloatingMenu :type="'Popover'" :direction="'Bottom'" ref="floatingMenu">
 			<slot></slot>
 		</FloatingMenu>
 	</div>
@@ -47,15 +47,12 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
+import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
-export enum PopoverButtonIcon {
-	"DropdownArrow" = "DropdownArrow",
-	"VerticalEllipsis" = "VerticalEllipsis",
-}
+export type PopoverButtonIcon = "DropdownArrow" | "VerticalEllipsis";
 
 export default defineComponent({
 	components: {
@@ -63,8 +60,8 @@ export default defineComponent({
 		IconButton,
 	},
 	props: {
-		action: { type: Function, required: false },
-		icon: { type: String, default: PopoverButtonIcon.DropdownArrow },
+		action: { type: Function as PropType<() => void>, required: false },
+		icon: { type: String as PropType<PopoverButtonIcon>, default: "DropdownArrow" },
 	},
 	methods: {
 		handleClick() {
@@ -73,11 +70,5 @@ export default defineComponent({
 			if (this.action) this.action();
 		},
 	},
-	data() {
-		return {
-			MenuDirection,
-			MenuType,
-		};
-	},
 });
 </script>
diff --git a/frontend/src/components/widgets/buttons/TextButton.vue b/frontend/src/components/widgets/buttons/TextButton.vue
index 7da0e453a9..257e4ef02a 100644
--- a/frontend/src/components/widgets/buttons/TextButton.vue
+++ b/frontend/src/components/widgets/buttons/TextButton.vue
@@ -1,5 +1,5 @@
 <template>
-	<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="action">
+	<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="(e) => action(e)">
 		<TextLabel>{{ label }}</TextLabel>
 	</button>
 </template>
@@ -49,18 +49,18 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
 export default defineComponent({
 	props: {
-		action: { type: Function, required: true },
-		label: { type: String, required: true },
-		emphasized: { type: Boolean, default: false },
-		disabled: { type: Boolean, default: false },
-		minWidth: { type: Number, default: 0 },
-		gapAfter: { type: Boolean, default: false },
+		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
+		label: { type: String as PropType<string>, required: true },
+		emphasized: { type: Boolean as PropType<boolean>, default: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+		minWidth: { type: Number as PropType<number>, default: 0 },
+		gapAfter: { type: Boolean as PropType<boolean>, default: false },
 	},
 	components: { TextLabel },
 });
diff --git a/frontend/src/components/widgets/floating-menus/ColorPicker.vue b/frontend/src/components/widgets/floating-menus/ColorPicker.vue
index 2b68e1fdd3..6e55218bfe 100644
--- a/frontend/src/components/widgets/floating-menus/ColorPicker.vue
+++ b/frontend/src/components/widgets/floating-menus/ColorPicker.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="color-picker">
-		<div class="saturation-picker" ref="saturationPicker" data-picker-action="MoveSaturation" @pointerdown="onPointerDown">
+		<div class="saturation-picker" ref="saturationPicker" @pointerdown="(e) => onPointerDown(e)">
 			<div ref="saturationCursor" class="selection-circle"></div>
 		</div>
-		<div class="hue-picker" ref="huePicker" data-picker-action="MoveHue" @pointerdown="onPointerDown">
+		<div class="hue-picker" ref="huePicker" @pointerdown="(e) => onPointerDown(e)">
 			<div ref="hueCursor" class="selection-pincers"></div>
 		</div>
-		<div class="opacity-picker" ref="opacityPicker" data-picker-action="MoveOpacity" @pointerdown="onPointerDown">
+		<div class="opacity-picker" ref="opacityPicker" @pointerdown="(e) => onPointerDown(e)">
 			<div ref="opacityCursor" class="selection-pincers"></div>
 		</div>
 	</div>
@@ -117,43 +117,28 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import { hsvToRgb, rgbToHsv, isRGB } from "@/utilities/color";
+import { RGBA } from "@/dispatcher/js-messages";
+import { hsvaToRgba, rgbaToHsva } from "@/utilities/color";
 import { clamp } from "@/utilities/math";
 
-const enum ColorPickerState {
-	Idle = "Idle",
-	MoveHue = "MoveHue",
-	MoveOpacity = "MoveOpacity",
-	MoveSaturation = "MoveSaturation",
-}
+type ColorPickerState = "Idle" | "MoveHue" | "MoveOpacity" | "MoveSaturation";
+
+// TODO: Clean up the fundamental code design in this file to simplify it and use better practices.
+// TODO: Such as removing the `picker*` data variables and reducing the number of functions which call each other in weird, non-obvious ways.
 
 export default defineComponent({
-	components: {},
 	props: {
-		color: { type: Object, required: true },
+		color: { type: Object as PropType<RGBA>, required: true },
 	},
 	data() {
 		return {
-			state: ColorPickerState.Idle,
-			// Disable proxy on this object
-			// https://v3.vuejs.org/api/options-data.html#data-2
-			// eslint-disable-next-line vue/no-reserved-keys
-			_: {
-				colorPicker: {
-					color: { h: 0, s: 0, v: 0, a: 1 },
-					hue: {
-						rect: { width: 0, height: 0, top: 0, left: 0 },
-					},
-					opacity: {
-						rect: { width: 0, height: 0, top: 0, left: 0 },
-					},
-					saturation: {
-						rect: { width: 0, height: 0, top: 0, left: 0 },
-					},
-				},
-			},
+			state: "Idle" as ColorPickerState,
+			pickerHSVA: { h: 0, s: 0, v: 0, a: 1 },
+			pickerHueRect: { width: 0, height: 0, top: 0, left: 0 },
+			pickerOpacityRect: { width: 0, height: 0, top: 0, left: 0 },
+			pickerSaturationRect: { width: 0, height: 0, top: 0, left: 0 },
 		};
 	},
 	mounted() {
@@ -171,116 +156,122 @@ export default defineComponent({
 			document.removeEventListener("pointermove", this.onPointerMove);
 			document.removeEventListener("pointerup", this.onPointerUp);
 		},
-		getRef<T>(name: string) {
-			return this.$refs[name] as T;
-		},
 		onPointerDown(e: PointerEvent) {
-			if (!(e.currentTarget instanceof Element)) return;
-			const picker = e.currentTarget.getAttribute("data-picker-action");
-			this.state = (() => {
-				switch (picker) {
-					case "MoveHue":
-						return ColorPickerState.MoveHue;
-					case "MoveOpacity":
-						return ColorPickerState.MoveOpacity;
-					case "MoveSaturation":
-						return ColorPickerState.MoveSaturation;
-					default:
-						return ColorPickerState.Idle;
-				}
-			})();
+			if (!(e.currentTarget instanceof HTMLElement)) return;
 
-			if (this.state !== ColorPickerState.Idle) {
-				this.addEvents();
-				this.updateRects();
-				this.onPointerMove(e);
+			if ((this.$refs.saturationPicker as HTMLElement).contains(e.currentTarget)) {
+				this.state = "MoveSaturation";
+			} else if ((this.$refs.huePicker as HTMLElement).contains(e.currentTarget)) {
+				this.state = "MoveHue";
+			} else if ((this.$refs.opacityPicker as HTMLElement).contains(e.currentTarget)) {
+				this.state = "MoveOpacity";
+			} else {
+				this.state = "Idle";
 			}
+
+			if (this.state === "Idle") return;
+
+			this.addEvents();
+			this.updateRects();
+			this.onPointerMove(e);
 		},
 		onPointerMove(e: PointerEvent) {
-			const { colorPicker } = this.$data._;
-
-			if (this.state === ColorPickerState.MoveHue) {
-				this.setHuePosition(e.clientY - colorPicker.hue.rect.top);
-			} else if (this.state === ColorPickerState.MoveOpacity) {
-				this.setOpacityPosition(e.clientY - colorPicker.opacity.rect.top);
-			} else if (this.state === ColorPickerState.MoveSaturation) {
-				this.setSaturationPosition(e.clientX - colorPicker.saturation.rect.left, e.clientY - colorPicker.saturation.rect.top);
+			switch (this.state) {
+				case "MoveHue":
+					this.setHueCursorPosition(e.clientY - this.pickerHueRect.top);
+					break;
+				case "MoveOpacity":
+					this.setOpacityCursorPosition(e.clientY - this.pickerOpacityRect.top);
+					break;
+				case "MoveSaturation":
+					this.setSaturationCursorPosition(e.clientX - this.pickerSaturationRect.left, e.clientY - this.pickerSaturationRect.top);
+					break;
+				default:
+					return;
 			}
 
-			if (this.state !== ColorPickerState.Idle) {
-				this.updateHue();
-				this.$emit("update:color", hsvToRgb(colorPicker.color));
-			}
+			this.updateHue();
+			// The `color` prop's watcher calls `this.updateColor()`
+			this.$emit("update:color", hsvaToRgba(this.pickerHSVA));
 		},
 		onPointerUp() {
-			if (this.state !== ColorPickerState.Idle) {
-				this.state = ColorPickerState.Idle;
-				this.removeEvents();
-			}
+			if (this.state === "Idle") return;
+
+			this.state = "Idle";
+			this.removeEvents();
 		},
 		updateRects() {
-			const { colorPicker } = this.$data._;
-
-			const saturationPicker = this.getRef<HTMLElement>("saturationPicker");
+			// Saturation
+			const saturationPicker = this.$refs.saturationPicker as HTMLElement;
 			const saturation = saturationPicker.getBoundingClientRect();
-			colorPicker.saturation.rect.width = saturation.width;
-			colorPicker.saturation.rect.height = saturation.height;
-			colorPicker.saturation.rect.left = saturation.left;
-			colorPicker.saturation.rect.top = saturation.top;
 
-			const huePicker = this.getRef<HTMLElement>("huePicker");
+			this.pickerSaturationRect.width = saturation.width;
+			this.pickerSaturationRect.height = saturation.height;
+			this.pickerSaturationRect.left = saturation.left;
+			this.pickerSaturationRect.top = saturation.top;
+
+			// Hue
+			const huePicker = this.$refs.huePicker as HTMLElement;
 			const hue = huePicker.getBoundingClientRect();
-			colorPicker.hue.rect.width = hue.width;
-			colorPicker.hue.rect.height = hue.height;
-			colorPicker.hue.rect.left = hue.left;
-			colorPicker.hue.rect.top = hue.top;
 
-			const opacityPicker = this.getRef<HTMLElement>("opacityPicker");
+			this.pickerHueRect.width = hue.width;
+			this.pickerHueRect.height = hue.height;
+			this.pickerHueRect.left = hue.left;
+			this.pickerHueRect.top = hue.top;
+
+			// Opacity
+			const opacityPicker = this.$refs.opacityPicker as HTMLElement;
 			const opacity = opacityPicker.getBoundingClientRect();
-			colorPicker.opacity.rect.width = opacity.width;
-			colorPicker.opacity.rect.height = opacity.height;
-			colorPicker.opacity.rect.left = opacity.left;
-			colorPicker.opacity.rect.top = opacity.top;
+
+			this.pickerOpacityRect.width = opacity.width;
+			this.pickerOpacityRect.height = opacity.height;
+			this.pickerOpacityRect.left = opacity.left;
+			this.pickerOpacityRect.top = opacity.top;
 		},
-		setSaturationPosition(x: number, y: number) {
-			const { colorPicker } = this.$data._;
-			const saturationCursor = this.getRef<HTMLElement>("saturationCursor");
-			const saturationPosition = [clamp(x, 0, colorPicker.saturation.rect.width), clamp(y, 0, colorPicker.saturation.rect.height)];
-			saturationCursor.style.transform = `translate(${saturationPosition[0]}px, ${saturationPosition[1]}px)`;
-			colorPicker.color.s = saturationPosition[0] / colorPicker.saturation.rect.width;
-			colorPicker.color.v = (1 - saturationPosition[1] / colorPicker.saturation.rect.height) * 255;
+		setSaturationCursorPosition(x: number, y: number) {
+			const saturationPositionX = clamp(x, 0, this.pickerSaturationRect.width);
+			const saturationPositionY = clamp(y, 0, this.pickerSaturationRect.height);
+
+			const saturationCursor = this.$refs.saturationCursor as HTMLElement;
+			saturationCursor.style.transform = `translate(${saturationPositionX}px, ${saturationPositionY}px)`;
+
+			this.pickerHSVA.s = saturationPositionX / this.pickerSaturationRect.width;
+			this.pickerHSVA.v = (1 - saturationPositionY / this.pickerSaturationRect.height) * 255;
 		},
-		setHuePosition(y: number) {
-			const { colorPicker } = this.$data._;
-			const hueCursor = this.getRef<HTMLElement>("hueCursor");
-			const huePosition = clamp(y, 0, colorPicker.hue.rect.height);
+		setHueCursorPosition(y: number) {
+			const huePosition = clamp(y, 0, this.pickerHueRect.height);
+
+			const hueCursor = this.$refs.hueCursor as HTMLElement;
 			hueCursor.style.transform = `translateY(${huePosition}px)`;
-			colorPicker.color.h = clamp(1 - huePosition / colorPicker.hue.rect.height);
+
+			this.pickerHSVA.h = clamp(1 - huePosition / this.pickerHueRect.height);
 		},
-		setOpacityPosition(y: number) {
-			const { colorPicker } = this.$data._;
-			const opacityCursor = this.getRef<HTMLElement>("opacityCursor");
-			const opacityPosition = clamp(y, 0, colorPicker.opacity.rect.height);
+		setOpacityCursorPosition(y: number) {
+			const opacityPosition = clamp(y, 0, this.pickerOpacityRect.height);
+
+			const opacityCursor = this.$refs.opacityCursor as HTMLElement;
 			opacityCursor.style.transform = `translateY(${opacityPosition}px)`;
-			colorPicker.color.a = clamp(1 - opacityPosition / colorPicker.opacity.rect.height);
+
+			this.pickerHSVA.a = clamp(1 - opacityPosition / this.pickerOpacityRect.height);
 		},
 		updateHue() {
-			const { colorPicker } = this.$data._;
-			let color = hsvToRgb({ h: colorPicker.color.h, s: 1, v: 255, a: 1 });
-			this.$el.style.setProperty("--saturation-picker-hue", `rgb(${color.r}, ${color.g}, ${color.b})`);
-			color = hsvToRgb(colorPicker.color);
-			this.$el.style.setProperty("--opacity-picker-color", `rgb(${color.r}, ${color.g}, ${color.b})`);
+			const hsva = hsvaToRgba({ h: this.pickerHSVA.h, s: 1, v: 255, a: 1 });
+			const rgba = hsvaToRgba(this.pickerHSVA);
+
+			this.$el.style.setProperty("--saturation-picker-hue", `rgb(${hsva.r}, ${hsva.g}, ${hsva.b})`);
+			this.$el.style.setProperty("--opacity-picker-color", `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})`);
 		},
 		updateColor() {
-			if (this.state !== ColorPickerState.Idle) return;
-			const { color } = this;
-			if (!isRGB(color)) return;
-			const { colorPicker } = this.$data._;
-			colorPicker.color = rgbToHsv(color);
+			if (this.state !== "Idle") return;
+
+			this.pickerHSVA = rgbaToHsva(this.color);
+
 			this.updateRects();
-			this.setSaturationPosition(colorPicker.color.s * colorPicker.saturation.rect.width, (1 - colorPicker.color.v / 255) * colorPicker.saturation.rect.height);
-			this.setOpacityPosition((1 - colorPicker.color.a) * colorPicker.opacity.rect.height);
-			this.setHuePosition((1 - colorPicker.color.h) * colorPicker.hue.rect.height);
+
+			this.setSaturationCursorPosition(this.pickerHSVA.s * this.pickerSaturationRect.width, (1 - this.pickerHSVA.v / 255) * this.pickerSaturationRect.height);
+			this.setOpacityCursorPosition((1 - this.pickerHSVA.a) * this.pickerOpacityRect.height);
+			this.setHueCursorPosition((1 - this.pickerHSVA.h) * this.pickerHueRect.height);
+
 			this.updateHue();
 		},
 	},
diff --git a/frontend/src/components/widgets/floating-menus/DialogModal.vue b/frontend/src/components/widgets/floating-menus/DialogModal.vue
index a5c335c0c0..61281ee9cc 100644
--- a/frontend/src/components/widgets/floating-menus/DialogModal.vue
+++ b/frontend/src/components/widgets/floating-menus/DialogModal.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="dialog-modal">
-		<FloatingMenu :type="MenuType.Dialog" :direction="MenuDirection.Center">
+		<FloatingMenu :type="'Dialog'" :direction="'Center'">
 			<LayoutRow>
 				<LayoutCol :class="'icon-column'">
 					<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
@@ -79,12 +79,12 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
-import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import TextButton from "@/components/widgets/buttons/TextButton.vue";
+import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
-import TextButton from "@/components/widgets/buttons/TextButton.vue";
 
 export default defineComponent({
 	inject: ["dialog"],
@@ -101,11 +101,5 @@ export default defineComponent({
 			this.dialog.dismissDialog();
 		},
 	},
-	data() {
-		return {
-			MenuDirection,
-			MenuType,
-		};
-	},
 });
 </script>
diff --git a/frontend/src/components/widgets/floating-menus/FloatingMenu.vue b/frontend/src/components/widgets/floating-menus/FloatingMenu.vue
index 5d1fe02e5c..67166d49c6 100644
--- a/frontend/src/components/widgets/floating-menus/FloatingMenu.vue
+++ b/frontend/src/components/widgets/floating-menus/FloatingMenu.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="floating-menu" :class="[direction.toLowerCase(), type.toLowerCase()]" v-if="open || type === MenuType.Dialog" ref="floatingMenu">
-		<div class="tail" v-if="type === MenuType.Popover"></div>
+	<div class="floating-menu" :class="[direction.toLowerCase(), type.toLowerCase()]" v-if="open || type === 'Dialog'" ref="floatingMenu">
+		<div class="tail" v-if="type === 'Popover'"></div>
 		<div class="floating-menu-container" ref="floatingMenuContainer">
 			<div class="floating-menu-content" :class="{ 'scrollable-y': scrollable }" ref="floatingMenuContent" :style="floatingMenuContentStyle">
 				<slot></slot>
@@ -177,36 +177,20 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-export enum MenuDirection {
-	Top = "Top",
-	Bottom = "Bottom",
-	Left = "Left",
-	Right = "Right",
-	TopLeft = "TopLeft",
-	TopRight = "TopRight",
-	BottomLeft = "BottomLeft",
-	BottomRight = "BottomRight",
-	Center = "Center",
-}
-
-export enum MenuType {
-	Popover = "Popover",
-	Dropdown = "Dropdown",
-	Dialog = "Dialog",
-}
+export type MenuDirection = "Top" | "Bottom" | "Left" | "Right" | "TopLeft" | "TopRight" | "BottomLeft" | "BottomRight" | "Center";
+export type MenuType = "Popover" | "Dropdown" | "Dialog";
 
 const POINTER_STRAY_DISTANCE = 100;
 
 export default defineComponent({
-	components: {},
 	props: {
-		direction: { type: String, default: MenuDirection.Bottom },
-		type: { type: String, required: true },
-		windowEdgeMargin: { type: Number, default: 6 },
-		minWidth: { type: Number, default: 0 },
-		scrollable: { type: Boolean, default: false },
+		direction: { type: String as PropType<MenuDirection>, default: "Bottom" },
+		type: { type: String as PropType<MenuType>, required: true },
+		windowEdgeMargin: { type: Number as PropType<number>, default: 6 },
+		minWidth: { type: Number as PropType<number>, default: 0 },
+		scrollable: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		const containerResizeObserver = new ResizeObserver((entries) => {
@@ -218,8 +202,6 @@ export default defineComponent({
 			open: false,
 			pointerStillDown: false,
 			containerResizeObserver,
-			MenuDirection,
-			MenuType,
 		};
 	},
 	updated() {
@@ -235,8 +217,8 @@ export default defineComponent({
 		let zeroedBorderDirection1: Edge | undefined;
 		let zeroedBorderDirection2: Edge | undefined;
 
-		if (this.direction === MenuDirection.Top || this.direction === MenuDirection.Bottom) {
-			zeroedBorderDirection1 = this.direction === MenuDirection.Top ? "Bottom" : "Top";
+		if (this.direction === "Top" || this.direction === "Bottom") {
+			zeroedBorderDirection1 = this.direction === "Top" ? "Bottom" : "Top";
 
 			if (floatingMenuBounds.left - this.windowEdgeMargin <= workspaceBounds.left) {
 				floatingMenuContent.style.left = `${this.windowEdgeMargin}px`;
@@ -249,8 +231,8 @@ export default defineComponent({
 			}
 		}
 
-		if (this.direction === MenuDirection.Left || this.direction === MenuDirection.Right) {
-			zeroedBorderDirection2 = this.direction === MenuDirection.Left ? "Right" : "Left";
+		if (this.direction === "Left" || this.direction === "Right") {
+			zeroedBorderDirection2 = this.direction === "Left" ? "Right" : "Left";
 
 			if (floatingMenuBounds.top - this.windowEdgeMargin <= workspaceBounds.top) {
 				floatingMenuContent.style.top = `${this.windowEdgeMargin}px`;
@@ -264,7 +246,7 @@ export default defineComponent({
 		}
 
 		// Remove the rounded corner from where the tail perfectly meets the corner
-		if (this.type === MenuType.Popover && this.windowEdgeMargin === 6 && zeroedBorderDirection1 && zeroedBorderDirection2) {
+		if (this.type === "Popover" && this.windowEdgeMargin === 6 && zeroedBorderDirection1 && zeroedBorderDirection2) {
 			switch (`${zeroedBorderDirection1}${zeroedBorderDirection2}`) {
 				case "TopLeft":
 					floatingMenuContent.style.borderTopLeftRadius = "0";
diff --git a/frontend/src/components/widgets/floating-menus/MenuList.vue b/frontend/src/components/widgets/floating-menus/MenuList.vue
index d90778c2da..ecf567bbc6 100644
--- a/frontend/src/components/widgets/floating-menus/MenuList.vue
+++ b/frontend/src/components/widgets/floating-menus/MenuList.vue
@@ -1,7 +1,7 @@
 <template>
-	<FloatingMenu :class="'menu-list'" :direction="direction" :type="MenuType.Dropdown" ref="floatingMenu" :windowEdgeMargin="0" :scrollable="scrollable" data-hover-menu-keep-open>
+	<FloatingMenu :class="'menu-list'" :direction="direction" :type="'Dropdown'" ref="floatingMenu" :windowEdgeMargin="0" :scrollable="scrollable" data-hover-menu-keep-open>
 		<template v-for="(section, sectionIndex) in menuEntries" :key="sectionIndex">
-			<Separator :type="SeparatorType.List" :direction="SeparatorDirection.Vertical" v-if="sectionIndex > 0" />
+			<Separator :type="'List'" :direction="'Vertical'" v-if="sectionIndex > 0" />
 			<div
 				v-for="(entry, entryIndex) in section"
 				:key="entryIndex"
@@ -26,7 +26,7 @@
 
 				<MenuList
 					v-if="entry.children"
-					:direction="MenuDirection.TopRight"
+					:direction="'TopRight'"
 					:menuEntries="entry.children"
 					v-bind="{ defaultAction, minWidth, drawIcon, scrollable }"
 					:ref="(ref) => setEntryRefs(entry, ref)"
@@ -132,13 +132,11 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
-
-import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
-import Separator from "@/components/widgets/separators/Separator.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import FloatingMenu, { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
+import Separator from "@/components/widgets/separators/Separator.vue";
 
 export type MenuListEntries<Value = string> = MenuListEntry<Value>[];
 export type SectionsOfMenuListEntries<Value = string> = MenuListEntries<Value>[];
@@ -162,13 +160,13 @@ const KEYBOARD_LOCK_SWITCH_BROWSER = "This hotkey is reserved by the browser, bu
 const MenuList = defineComponent({
 	inject: ["fullscreen"],
 	props: {
-		direction: { type: String as PropType<MenuDirection>, default: MenuDirection.Bottom },
+		direction: { type: String as PropType<MenuDirection>, default: "Bottom" },
 		menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
 		activeEntry: { type: Object as PropType<MenuListEntry>, required: false },
-		defaultAction: { type: Function as PropType<() => void | undefined>, required: false },
-		minWidth: { type: Number, default: 0 },
-		drawIcon: { type: Boolean, default: false },
-		scrollable: { type: Boolean, default: false },
+		defaultAction: { type: Function as PropType<() => void>, required: false },
+		minWidth: { type: Number as PropType<number>, default: 0 },
+		drawIcon: { type: Boolean as PropType<boolean>, default: false },
+		scrollable: { type: Boolean as PropType<boolean>, default: false },
 	},
 	methods: {
 		setEntryRefs(menuEntry: MenuListEntry, ref: typeof FloatingMenu) {
@@ -231,7 +229,7 @@ const MenuList = defineComponent({
 					// Restore open/closed state if it was forced open for measurement
 					if (!initiallyOpen) floatingMenu.setClosed();
 
-					this.$emit("width-changed", width);
+					this.$emit("widthChanged", width);
 				});
 			});
 		},
@@ -265,10 +263,6 @@ const MenuList = defineComponent({
 	data() {
 		return {
 			keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER,
-			SeparatorDirection,
-			SeparatorType,
-			MenuDirection,
-			MenuType,
 		};
 	},
 	components: {
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.vue b/frontend/src/components/widgets/inputs/CheckboxInput.vue
index 14a42b1a68..9d7c0b1aff 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.vue
+++ b/frontend/src/components/widgets/inputs/CheckboxInput.vue
@@ -80,9 +80,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import IconLabel, { IconName } from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	data() {
@@ -96,9 +96,9 @@ export default defineComponent({
 		},
 	},
 	props: {
-		checked: { type: Boolean, required: true },
-		icon: { type: String, default: "Checkmark" },
-		outlineStyle: { type: Boolean, default: false },
+		checked: { type: Boolean as PropType<boolean>, required: true },
+		icon: { type: String as PropType<IconName>, default: "Checkmark" },
+		outlineStyle: { type: Boolean as PropType<boolean>, default: false },
 	},
 	components: { IconLabel },
 });
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.vue b/frontend/src/components/widgets/inputs/DropdownInput.vue
index 43f73958cc..eee69e47d8 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.vue
+++ b/frontend/src/components/widgets/inputs/DropdownInput.vue
@@ -1,16 +1,16 @@
 <template>
 	<div class="dropdown-input">
-		<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px`, disabled: 'disabled' }" @click="clickDropdownBox" data-hover-menu-spawner>
+		<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px`, disabled: 'disabled' }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
 			<IconLabel :class="'dropdown-icon'" :icon="activeEntry.icon" v-if="activeEntry.icon" />
 			<span>{{ activeEntry.label }}</span>
 			<IconLabel :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
 		</div>
 		<MenuList
-			v-model:active-entry="activeEntry"
-			@update:activeEntry="activeEntryChanged"
-			@width-changed="onWidthChanged"
+			v-model:activeEntry="activeEntry"
+			@update:activeEntry="(newActiveEntry) => activeEntryChanged(newActiveEntry)"
+			@widthChanged="(newWidth) => onWidthChanged(newWidth)"
 			:menuEntries="menuEntries"
-			:direction="MenuDirection.Bottom"
+			:direction="'Bottom'"
 			:drawIcon="drawIcon"
 			:scrollable="true"
 			ref="menuList"
@@ -90,21 +90,19 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
-import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	props: {
 		menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
-		selectedIndex: { type: Number, required: true },
-		drawIcon: { type: Boolean, default: false },
-		disabled: { type: Boolean, default: false },
+		selectedIndex: { type: Number as PropType<number>, required: true },
+		drawIcon: { type: Boolean as PropType<boolean>, default: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		return {
 			activeEntry: this.menuEntries.flat()[this.selectedIndex],
-			MenuDirection,
 			minWidth: 0,
 		};
 	},
diff --git a/frontend/src/components/widgets/inputs/MenuBarInput.vue b/frontend/src/components/widgets/inputs/MenuBarInput.vue
index 62494eeab6..1f2e9263a7 100644
--- a/frontend/src/components/widgets/inputs/MenuBarInput.vue
+++ b/frontend/src/components/widgets/inputs/MenuBarInput.vue
@@ -10,7 +10,7 @@
 				<IconLabel :icon="entry.icon" v-if="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
 			</div>
-			<MenuList :menuEntries="entry.children" :direction="MenuDirection.Bottom" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" />
+			<MenuList :menuEntries="entry.children" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" />
 		</div>
 	</div>
 </template>
@@ -53,12 +53,11 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import { ApplicationPlatform } from "@/components/window/MainWindow.vue";
-import MenuList, { MenuListEntry, MenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
-import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import { EditorState } from "@/state/wasm-loader";
 
+import MenuList, { MenuListEntry, MenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+
 function makeMenuEntries(editor: EditorState): MenuListEntries {
 	return [
 		{
@@ -66,8 +65,8 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 			ref: undefined,
 			children: [
 				[
-					{ label: "New", icon: "File", shortcut: ["KeyControl", "KeyN"], shortcutRequiresLock: true, action: async () => editor.instance.new_document() },
-					{ label: "Open…", shortcut: ["KeyControl", "KeyO"], action: async () => editor.instance.open_document() },
+					{ label: "New", icon: "File", shortcut: ["KeyControl", "KeyN"], shortcutRequiresLock: true, action: async (): Promise<void> => editor.instance.new_document() },
+					{ label: "Open…", shortcut: ["KeyControl", "KeyO"], action: async (): Promise<void> => editor.instance.open_document() },
 					{
 						label: "Open Recent",
 						shortcut: ["KeyControl", "KeyShift", "KeyO"],
@@ -84,18 +83,18 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 					},
 				],
 				[
-					{ label: "Close", shortcut: ["KeyControl", "KeyW"], shortcutRequiresLock: true, action: async () => editor.instance.close_active_document_with_confirmation() },
-					{ label: "Close All", shortcut: ["KeyControl", "KeyAlt", "KeyW"], action: async () => editor.instance.close_all_documents_with_confirmation() },
+					{ label: "Close", shortcut: ["KeyControl", "KeyW"], shortcutRequiresLock: true, action: async (): Promise<void> => editor.instance.close_active_document_with_confirmation() },
+					{ label: "Close All", shortcut: ["KeyControl", "KeyAlt", "KeyW"], action: async (): Promise<void> => editor.instance.close_all_documents_with_confirmation() },
 				],
 				[
-					{ label: "Save", shortcut: ["KeyControl", "KeyS"], action: async () => editor.instance.save_document() },
-					{ label: "Save As…", shortcut: ["KeyControl", "KeyShift", "KeyS"], action: async () => editor.instance.save_document() },
+					{ label: "Save", shortcut: ["KeyControl", "KeyS"], action: async (): Promise<void> => editor.instance.save_document() },
+					{ label: "Save As…", shortcut: ["KeyControl", "KeyShift", "KeyS"], action: async (): Promise<void> => editor.instance.save_document() },
 					{ label: "Save All", shortcut: ["KeyControl", "KeyAlt", "KeyS"] },
 					{ label: "Auto-Save", checkbox: true, checked: true },
 				],
 				[
 					{ label: "Import…", shortcut: ["KeyControl", "KeyI"] },
-					{ label: "Export…", shortcut: ["KeyControl", "KeyE"], action: async () => editor.instance.export_document() },
+					{ label: "Export…", shortcut: ["KeyControl", "KeyE"], action: async (): Promise<void> => editor.instance.export_document() },
 				],
 				[{ label: "Quit", shortcut: ["KeyControl", "KeyQ"] }],
 			],
@@ -105,13 +104,13 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 			ref: undefined,
 			children: [
 				[
-					{ label: "Undo", shortcut: ["KeyControl", "KeyZ"], action: async () => editor.instance.undo() },
-					{ label: "Redo", shortcut: ["KeyControl", "KeyShift", "KeyZ"], action: async () => editor.instance.redo() },
+					{ label: "Undo", shortcut: ["KeyControl", "KeyZ"], action: async (): Promise<void> => editor.instance.undo() },
+					{ label: "Redo", shortcut: ["KeyControl", "KeyShift", "KeyZ"], action: async (): Promise<void> => editor.instance.redo() },
 				],
 				[
-					{ label: "Cut", shortcut: ["KeyControl", "KeyX"], action: async () => editor.instance.cut() },
-					{ label: "Copy", icon: "Copy", shortcut: ["KeyControl", "KeyC"], action: async () => editor.instance.copy() },
-					{ label: "Paste", icon: "Paste", shortcut: ["KeyControl", "KeyV"], action: async () => editor.instance.paste() },
+					{ label: "Cut", shortcut: ["KeyControl", "KeyX"], action: async (): Promise<void> => editor.instance.cut() },
+					{ label: "Copy", icon: "Copy", shortcut: ["KeyControl", "KeyC"], action: async (): Promise<void> => editor.instance.copy() },
+					{ label: "Paste", icon: "Paste", shortcut: ["KeyControl", "KeyV"], action: async (): Promise<void> => editor.instance.paste() },
 				],
 			],
 		},
@@ -120,8 +119,8 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 			ref: undefined,
 			children: [
 				[
-					{ label: "Select All", shortcut: ["KeyControl", "KeyA"], action: async () => editor.instance.select_all_layers() },
-					{ label: "Deselect All", shortcut: ["KeyControl", "KeyAlt", "KeyA"], action: async () => editor.instance.deselect_all_layers() },
+					{ label: "Select All", shortcut: ["KeyControl", "KeyA"], action: async (): Promise<void> => editor.instance.select_all_layers() },
+					{ label: "Deselect All", shortcut: ["KeyControl", "KeyAlt", "KeyA"], action: async (): Promise<void> => editor.instance.deselect_all_layers() },
 					{
 						label: "Order",
 						children: [
@@ -129,14 +128,14 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 								{
 									label: "Raise To Front",
 									shortcut: ["KeyControl", "KeyShift", "KeyLeftBracket"],
-									action: async () => editor.instance.reorder_selected_layers(editor.rawWasm.i32_max()),
+									action: async (): Promise<void> => editor.instance.reorder_selected_layers(editor.rawWasm.i32_max()),
 								},
-								{ label: "Raise", shortcut: ["KeyControl", "KeyRightBracket"], action: async () => editor.instance.reorder_selected_layers(1) },
-								{ label: "Lower", shortcut: ["KeyControl", "KeyLeftBracket"], action: async () => editor.instance.reorder_selected_layers(-1) },
+								{ label: "Raise", shortcut: ["KeyControl", "KeyRightBracket"], action: async (): Promise<void> => editor.instance.reorder_selected_layers(1) },
+								{ label: "Lower", shortcut: ["KeyControl", "KeyLeftBracket"], action: async (): Promise<void> => editor.instance.reorder_selected_layers(-1) },
 								{
 									label: "Lower to Back",
 									shortcut: ["KeyControl", "KeyShift", "KeyRightBracket"],
-									action: async () => editor.instance.reorder_selected_layers(editor.rawWasm.i32_min()),
+									action: async (): Promise<void> => editor.instance.reorder_selected_layers(editor.rawWasm.i32_min()),
 								},
 							],
 						],
@@ -158,12 +157,12 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 			label: "Help",
 			ref: undefined,
 			children: [
-				[{ label: "About Graphite", action: async () => editor.instance.request_about_graphite_dialog() }],
+				[{ label: "About Graphite", action: async (): Promise<void> => editor.instance.request_about_graphite_dialog() }],
 				[
-					{ label: "Report a Bug", action: () => window.open("https://github.com/GraphiteEditor/Graphite/issues/new", "_blank") },
-					{ label: "Visit on GitHub", action: () => window.open("https://github.com/GraphiteEditor/Graphite", "_blank") },
+					{ label: "Report a Bug", action: (): unknown => window.open("https://github.com/GraphiteEditor/Graphite/issues/new", "_blank") },
+					{ label: "Visit on GitHub", action: (): unknown => window.open("https://github.com/GraphiteEditor/Graphite", "_blank") },
 				],
-				[{ label: "Debug: Panic (DANGER)", action: async () => editor.rawWasm.intentional_panic() }],
+				[{ label: "Debug: Panic (DANGER)", action: async (): Promise<void> => editor.rawWasm.intentional_panic() }],
 			],
 		},
 	];
@@ -186,10 +185,8 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			ApplicationPlatform,
 			menuEntries: makeMenuEntries(this.editor),
-			MenuDirection,
-			comingSoon: () => this.dialog.comingSoon(),
+			comingSoon: (): void => this.dialog.comingSoon(),
 		};
 	},
 	components: {
diff --git a/frontend/src/components/widgets/inputs/NumberInput.vue b/frontend/src/components/widgets/inputs/NumberInput.vue
index d3cca9ee25..516bb97fbe 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.vue
+++ b/frontend/src/components/widgets/inputs/NumberInput.vue
@@ -12,8 +12,8 @@
 			:disabled="disabled"
 		/>
 		<label v-if="label" :for="`number-input-${id}`">{{ label }}</label>
-		<button v-if="!Number.isNaN(value)" class="arrow left" @click="onIncrement(IncrementDirection.Decrease)"></button>
-		<button v-if="!Number.isNaN(value)" class="arrow right" @click="onIncrement(IncrementDirection.Increase)"></button>
+		<button v-if="!Number.isNaN(value)" class="arrow left" @click="onIncrement('Decrease')"></button>
+		<button v-if="!Number.isNaN(value)" class="arrow right" @click="onIncrement('Increase')"></button>
 	</div>
 </template>
 
@@ -152,40 +152,29 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-export enum IncrementBehavior {
-	Add = "Add",
-	Multiply = "Multiply",
-	Callback = "Callback",
-	None = "None",
-}
-
-export enum IncrementDirection {
-	Decrease = "Decrease",
-	Increase = "Increase",
-}
+export type IncrementBehavior = "Add" | "Multiply" | "Callback" | "None";
+export type IncrementDirection = "Decrease" | "Increase";
 
 export default defineComponent({
-	components: {},
 	props: {
-		value: { type: Number, required: true },
-		min: { type: Number, required: false },
-		max: { type: Number, required: false },
-		incrementBehavior: { type: String as PropType<IncrementBehavior>, default: IncrementBehavior.Add },
-		incrementFactor: { type: Number, default: 1 },
-		incrementCallbackIncrease: { type: Function, required: false },
-		incrementCallbackDecrease: { type: Function, required: false },
-		isInteger: { type: Boolean, default: false },
-		unit: { type: String, default: "" },
-		unitIsHiddenWhenEditing: { type: Boolean, default: true },
-		displayDecimalPlaces: { type: Number, default: 3 },
-		label: { type: String, required: false },
-		disabled: { type: Boolean, default: false },
+		value: { type: Number as PropType<number>, required: true },
+		min: { type: Number as PropType<number>, required: false },
+		max: { type: Number as PropType<number>, required: false },
+		incrementBehavior: { type: String as PropType<IncrementBehavior>, default: "Add" },
+		incrementFactor: { type: Number as PropType<number>, default: 1 },
+		incrementCallbackIncrease: { type: Function as PropType<() => void>, required: false },
+		incrementCallbackDecrease: { type: Function as PropType<() => void>, required: false },
+		isInteger: { type: Boolean as PropType<boolean>, default: false },
+		unit: { type: String as PropType<string>, default: "" },
+		unitIsHiddenWhenEditing: { type: Boolean as PropType<boolean>, default: true },
+		displayDecimalPlaces: { type: Number as PropType<number>, default: 3 },
+		label: { type: String as PropType<string>, required: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		return {
 			text: `${this.value}${this.unit}`,
 			editing: false,
-			IncrementDirection,
 			id: `${Math.random()}`.substring(2),
 		};
 	},
@@ -225,19 +214,19 @@ export default defineComponent({
 			if (Number.isNaN(this.value)) return;
 
 			switch (this.incrementBehavior) {
-				case IncrementBehavior.Add: {
-					const directionAddend = direction === IncrementDirection.Increase ? this.incrementFactor : -this.incrementFactor;
+				case "Add": {
+					const directionAddend = direction === "Increase" ? this.incrementFactor : -this.incrementFactor;
 					this.updateValue(this.value + directionAddend);
 					break;
 				}
-				case IncrementBehavior.Multiply: {
-					const directionMultiplier = direction === IncrementDirection.Increase ? this.incrementFactor : 1 / this.incrementFactor;
+				case "Multiply": {
+					const directionMultiplier = direction === "Increase" ? this.incrementFactor : 1 / this.incrementFactor;
 					this.updateValue(this.value * directionMultiplier);
 					break;
 				}
-				case IncrementBehavior.Callback: {
-					if (direction === IncrementDirection.Increase && this.incrementCallbackIncrease) this.incrementCallbackIncrease();
-					if (direction === IncrementDirection.Decrease && this.incrementCallbackDecrease) this.incrementCallbackDecrease();
+				case "Callback": {
+					if (direction === "Increase" && this.incrementCallbackIncrease) this.incrementCallbackIncrease();
+					if (direction === "Decrease" && this.incrementCallbackDecrease) this.incrementCallbackDecrease();
 					break;
 				}
 				default:
diff --git a/frontend/src/components/widgets/inputs/OptionalInput.vue b/frontend/src/components/widgets/inputs/OptionalInput.vue
index da286490af..c9f9bb6d71 100644
--- a/frontend/src/components/widgets/inputs/OptionalInput.vue
+++ b/frontend/src/components/widgets/inputs/OptionalInput.vue
@@ -34,14 +34,15 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
+import { IconName } from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	props: {
-		checked: { type: Boolean, required: true },
-		icon: { type: String, default: "Checkmark" },
+		checked: { type: Boolean as PropType<boolean>, required: true },
+		icon: { type: String as PropType<IconName>, default: "Checkmark" },
 	},
 	components: {
 		CheckboxInput,
diff --git a/frontend/src/components/widgets/inputs/RadioInput.vue b/frontend/src/components/widgets/inputs/RadioInput.vue
index c7768fa2ff..e78b7f7abf 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.vue
+++ b/frontend/src/components/widgets/inputs/RadioInput.vue
@@ -85,7 +85,7 @@ export type RadioEntries = RadioEntryData[];
 export default defineComponent({
 	props: {
 		entries: { type: Array as PropType<RadioEntries>, required: true },
-		selectedIndex: { type: Number, required: true },
+		selectedIndex: { type: Number as PropType<number>, required: true },
 	},
 	methods: {
 		handleEntryClick(menuEntry: RadioEntryData) {
diff --git a/frontend/src/components/widgets/inputs/ShelfItemInput.vue b/frontend/src/components/widgets/inputs/ShelfItemInput.vue
index 50e2dd936b..57a34d0d5b 100644
--- a/frontend/src/components/widgets/inputs/ShelfItemInput.vue
+++ b/frontend/src/components/widgets/inputs/ShelfItemInput.vue
@@ -29,16 +29,17 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
+import { IconName } from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	components: { IconButton },
 	props: {
-		icon: { type: String, required: true },
-		action: { type: Function, required: true },
-		active: { type: Boolean, default: false },
+		icon: { type: String as PropType<IconName>, required: true },
+		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
+		active: { type: Boolean as PropType<boolean>, default: false },
 	},
 });
 </script>
diff --git a/frontend/src/components/widgets/inputs/SwatchPairInput.vue b/frontend/src/components/widgets/inputs/SwatchPairInput.vue
index 852e7784c1..8b1472868e 100644
--- a/frontend/src/components/widgets/inputs/SwatchPairInput.vue
+++ b/frontend/src/components/widgets/inputs/SwatchPairInput.vue
@@ -1,15 +1,15 @@
 <template>
 	<div class="swatch-pair">
 		<div class="secondary swatch">
-			<button @click="clickSecondarySwatch" ref="secondaryButton" data-hover-menu-spawner></button>
-			<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Right" horizontal ref="secondarySwatchFloatingMenu">
-				<ColorPicker @update:color="secondaryColorChanged" :color="secondaryColor" />
+			<button @click="() => clickSecondarySwatch()" ref="secondaryButton" data-hover-menu-spawner></button>
+			<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="secondarySwatchFloatingMenu">
+				<ColorPicker @update:color="(color) => secondaryColorChanged(color)" :color="secondaryColor" />
 			</FloatingMenu>
 		</div>
 		<div class="primary swatch">
-			<button @click="clickPrimarySwatch" ref="primaryButton" data-hover-menu-spawner></button>
-			<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Right" horizontal ref="primarySwatchFloatingMenu">
-				<ColorPicker @update:color="primaryColorChanged" :color="primaryColor" />
+			<button @click="() => clickPrimarySwatch()" ref="primaryButton" data-hover-menu-spawner></button>
+			<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="primarySwatchFloatingMenu">
+				<ColorPicker @update:color="(color) => primaryColorChanged(color)" :color="primaryColor" />
 			</FloatingMenu>
 		</div>
 	</div>
@@ -68,11 +68,11 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { rgbToDecimalRgb, RGB } from "@/utilities/color";
+import { RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages";
+import { rgbaToDecimalRgba } from "@/utilities/color";
 
 import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
-import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
-import { UpdateWorkingColors } from "@/dispatcher/js-messages";
+import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
 export default defineComponent({
 	inject: ["editor"],
@@ -80,70 +80,56 @@ export default defineComponent({
 		FloatingMenu,
 		ColorPicker,
 	},
-	props: {},
 	methods: {
 		clickPrimarySwatch() {
-			this.getRef<typeof FloatingMenu>("primarySwatchFloatingMenu").setOpen();
-			this.getRef<typeof FloatingMenu>("secondarySwatchFloatingMenu").setClosed();
+			(this.$refs.primarySwatchFloatingMenu as typeof FloatingMenu).setOpen();
+			(this.$refs.secondarySwatchFloatingMenu as typeof FloatingMenu).setClosed();
 		},
-
 		clickSecondarySwatch() {
-			this.getRef<typeof FloatingMenu>("secondarySwatchFloatingMenu").setOpen();
-			this.getRef<typeof FloatingMenu>("primarySwatchFloatingMenu").setClosed();
+			(this.$refs.secondarySwatchFloatingMenu as typeof FloatingMenu).setOpen();
+			(this.$refs.primarySwatchFloatingMenu as typeof FloatingMenu).setClosed();
 		},
-
-		getRef<T>(name: string) {
-			return this.$refs[name] as T;
-		},
-
-		primaryColorChanged(color: RGB) {
+		primaryColorChanged(color: RGBA) {
 			this.primaryColor = color;
 			this.updatePrimaryColor();
 		},
-
-		secondaryColorChanged(color: RGB) {
+		secondaryColorChanged(color: RGBA) {
 			this.secondaryColor = color;
 			this.updateSecondaryColor();
 		},
-
 		async updatePrimaryColor() {
 			let color = this.primaryColor;
-			const button = this.getRef<HTMLButtonElement>("primaryButton");
+			const button = this.$refs.primaryButton as HTMLButtonElement;
 			button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
 
-			color = rgbToDecimalRgb(this.primaryColor);
+			color = rgbaToDecimalRgba(this.primaryColor);
 			this.editor.instance.update_primary_color(color.r, color.g, color.b, color.a);
 		},
-
 		async updateSecondaryColor() {
 			let color = this.secondaryColor;
-			const button = this.getRef<HTMLButtonElement>("secondaryButton");
+			const button = this.$refs.secondaryButton as HTMLButtonElement;
 			button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
 
-			color = rgbToDecimalRgb(this.secondaryColor);
+			color = rgbaToDecimalRgba(this.secondaryColor);
 			this.editor.instance.update_secondary_color(color.r, color.g, color.b, color.a);
 		},
 	},
 	data() {
 		return {
-			MenuDirection,
-			MenuType,
-			primaryColor: { r: 0, g: 0, b: 0, a: 1 },
-			secondaryColor: { r: 255, g: 255, b: 255, a: 1 },
+			primaryColor: { r: 0, g: 0, b: 0, a: 1 } as RGBA,
+			secondaryColor: { r: 255, g: 255, b: 255, a: 1 } as RGBA,
 		};
 	},
 	mounted() {
 		this.editor.dispatcher.subscribeJsMessage(UpdateWorkingColors, (updateWorkingColors) => {
-			const { primary, secondary } = updateWorkingColors;
+			this.primaryColor = updateWorkingColors.primary.toRgba();
+			this.secondaryColor = updateWorkingColors.secondary.toRgba();
 
-			this.primaryColor = primary.toRgba();
-			this.secondaryColor = secondary.toRgba();
+			const primaryButton = this.$refs.primaryButton as HTMLButtonElement;
+			primaryButton.style.setProperty("--swatch-color", updateWorkingColors.primary.toRgbaCSS());
 
-			const primaryButton = this.getRef<HTMLButtonElement>("primaryButton");
-			primaryButton.style.setProperty("--swatch-color", primary.toRgbaCSS());
-
-			const secondaryButton = this.getRef<HTMLButtonElement>("secondaryButton");
-			secondaryButton.style.setProperty("--swatch-color", secondary.toRgbaCSS());
+			const secondaryButton = this.$refs.secondaryButton as HTMLButtonElement;
+			secondaryButton.style.setProperty("--swatch-color", updateWorkingColors.secondary.toRgbaCSS());
 		});
 
 		this.updatePrimaryColor();
diff --git a/frontend/src/components/widgets/labels/IconLabel.vue b/frontend/src/components/widgets/labels/IconLabel.vue
index 101490f3b2..37284575f7 100644
--- a/frontend/src/components/widgets/labels/IconLabel.vue
+++ b/frontend/src/components/widgets/labels/IconLabel.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="icon-label" :class="`size-${String(icons[icon].size)}`">
+	<div class="icon-label" :class="`size-${icons[icon].size}`">
 		<component :is="icon" />
 	</div>
 </template>
@@ -28,81 +28,19 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-
-import LayoutSelectTool from "@/../assets/24px-two-tone/layout-select-tool.svg";
-import LayoutCropTool from "@/../assets/24px-two-tone/layout-crop-tool.svg";
-import LayoutNavigateTool from "@/../assets/24px-two-tone/layout-navigate-tool.svg";
-import LayoutEyedropperTool from "@/../assets/24px-two-tone/layout-eyedropper-tool.svg";
-import ParametricTextTool from "@/../assets/24px-two-tone/parametric-text-tool.svg";
-import ParametricFillTool from "@/../assets/24px-two-tone/parametric-fill-tool.svg";
-import ParametricGradientTool from "@/../assets/24px-two-tone/parametric-gradient-tool.svg";
-import RasterBrushTool from "@/../assets/24px-two-tone/raster-brush-tool.svg";
-import RasterHealTool from "@/../assets/24px-two-tone/raster-heal-tool.svg";
-import RasterCloneTool from "@/../assets/24px-two-tone/raster-clone-tool.svg";
-import RasterPatchTool from "@/../assets/24px-two-tone/raster-patch-tool.svg";
-import RasterBlurSharpenTool from "@/../assets/24px-two-tone/raster-detail-tool.svg";
-import RasterRelightTool from "@/../assets/24px-two-tone/raster-relight-tool.svg";
-import VectorPathTool from "@/../assets/24px-two-tone/vector-path-tool.svg";
-import VectorPenTool from "@/../assets/24px-two-tone/vector-pen-tool.svg";
-import VectorFreehandTool from "@/../assets/24px-two-tone/vector-freehand-tool.svg";
-import VectorSplineTool from "@/../assets/24px-two-tone/vector-spline-tool.svg";
-import VectorLineTool from "@/../assets/24px-two-tone/vector-line-tool.svg";
-import VectorRectangleTool from "@/../assets/24px-two-tone/vector-rectangle-tool.svg";
-import VectorEllipseTool from "@/../assets/24px-two-tone/vector-ellipse-tool.svg";
-import VectorShapeTool from "@/../assets/24px-two-tone/vector-shape-tool.svg";
-
-import AlignLeft from "@/../assets/16px-solid/align-left.svg";
-import AlignHorizontalCenter from "@/../assets/16px-solid/align-horizontal-center.svg";
-import AlignRight from "@/../assets/16px-solid/align-right.svg";
-import AlignTop from "@/../assets/16px-solid/align-top.svg";
-import AlignVerticalCenter from "@/../assets/16px-solid/align-vertical-center.svg";
-import AlignBottom from "@/../assets/16px-solid/align-bottom.svg";
-import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
-import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
-import BooleanUnion from "@/../assets/16px-solid/boolean-union.svg";
-import BooleanSubtractFront from "@/../assets/16px-solid/boolean-subtract-front.svg";
-import BooleanSubtractBack from "@/../assets/16px-solid/boolean-subtract-back.svg";
-import BooleanIntersect from "@/../assets/16px-solid/boolean-intersect.svg";
-import BooleanDifference from "@/../assets/16px-solid/boolean-difference.svg";
-import ZoomReset from "@/../assets/16px-solid/zoom-reset.svg";
-import ZoomIn from "@/../assets/16px-solid/zoom-in.svg";
-import ZoomOut from "@/../assets/16px-solid/zoom-out.svg";
-import ViewModeNormal from "@/../assets/16px-solid/view-mode-normal.svg";
-import ViewModeOutline from "@/../assets/16px-solid/view-mode-outline.svg";
-import ViewModePixels from "@/../assets/16px-solid/view-mode-pixels.svg";
-import EyeVisible from "@/../assets/16px-solid/eye-visible.svg";
-import EyeHidden from "@/../assets/16px-solid/eye-hidden.svg";
-import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
-import File from "@/../assets/16px-solid/file.svg";
-import Copy from "@/../assets/16px-solid/copy.svg";
-import Paste from "@/../assets/16px-solid/paste.svg";
-import ViewportDesignMode from "@/../assets/16px-solid/viewport-design-mode.svg";
-import ViewportSelectMode from "@/../assets/16px-solid/viewport-select-mode.svg";
-import ViewportGuideMode from "@/../assets/16px-solid/viewport-guide-mode.svg";
+import { DefineComponent, defineComponent, PropType } from "vue";
 
 import Checkmark from "@/../assets/12px-solid/checkmark.svg";
-import Link from "@/../assets/12px-solid/link.svg";
-import Grid from "@/../assets/12px-solid/grid.svg";
-import Overlays from "@/../assets/12px-solid/overlays.svg";
-import Snapping from "@/../assets/12px-solid/snapping.svg";
-import Info from "@/../assets/12px-solid/info.svg";
-import Warning from "@/../assets/12px-solid/warning.svg";
-import Swap from "@/../assets/12px-solid/swap.svg";
-import ResetColors from "@/../assets/12px-solid/reset-colors.svg";
-import DropdownArrow from "@/../assets/12px-solid/dropdown-arrow.svg";
-import VerticalEllipsis from "@/../assets/12px-solid/vertical-ellipsis.svg";
 import CloseX from "@/../assets/12px-solid/close-x.svg";
+import DropdownArrow from "@/../assets/12px-solid/dropdown-arrow.svg";
 import FullscreenEnter from "@/../assets/12px-solid/fullscreen-enter.svg";
 import FullscreenExit from "@/../assets/12px-solid/fullscreen-exit.svg";
-import WindowButtonWinMinimize from "@/../assets/12px-solid/window-button-win-minimize.svg";
-import WindowButtonWinMaximize from "@/../assets/12px-solid/window-button-win-maximize.svg";
-import WindowButtonWinRestoreDown from "@/../assets/12px-solid/window-button-win-restore-down.svg";
-import WindowButtonWinClose from "@/../assets/12px-solid/window-button-win-close.svg";
-import KeyboardArrowUp from "@/../assets/12px-solid/keyboard-arrow-up.svg";
-import KeyboardArrowRight from "@/../assets/12px-solid/keyboard-arrow-right.svg";
+import Grid from "@/../assets/12px-solid/grid.svg";
+import Info from "@/../assets/12px-solid/info.svg";
 import KeyboardArrowDown from "@/../assets/12px-solid/keyboard-arrow-down.svg";
 import KeyboardArrowLeft from "@/../assets/12px-solid/keyboard-arrow-left.svg";
+import KeyboardArrowRight from "@/../assets/12px-solid/keyboard-arrow-right.svg";
+import KeyboardArrowUp from "@/../assets/12px-solid/keyboard-arrow-up.svg";
 import KeyboardBackspace from "@/../assets/12px-solid/keyboard-backspace.svg";
 import KeyboardCommand from "@/../assets/12px-solid/keyboard-command.svg";
 import KeyboardEnter from "@/../assets/12px-solid/keyboard-enter.svg";
@@ -110,124 +48,199 @@ import KeyboardOption from "@/../assets/12px-solid/keyboard-option.svg";
 import KeyboardShift from "@/../assets/12px-solid/keyboard-shift.svg";
 import KeyboardSpace from "@/../assets/12px-solid/keyboard-space.svg";
 import KeyboardTab from "@/../assets/12px-solid/keyboard-tab.svg";
+import Link from "@/../assets/12px-solid/link.svg";
+import Overlays from "@/../assets/12px-solid/overlays.svg";
+import ResetColors from "@/../assets/12px-solid/reset-colors.svg";
+import Snapping from "@/../assets/12px-solid/snapping.svg";
+import Swap from "@/../assets/12px-solid/swap.svg";
+import VerticalEllipsis from "@/../assets/12px-solid/vertical-ellipsis.svg";
+import Warning from "@/../assets/12px-solid/warning.svg";
+import WindowButtonWinClose from "@/../assets/12px-solid/window-button-win-close.svg";
+import WindowButtonWinMaximize from "@/../assets/12px-solid/window-button-win-maximize.svg";
+import WindowButtonWinMinimize from "@/../assets/12px-solid/window-button-win-minimize.svg";
+import WindowButtonWinRestoreDown from "@/../assets/12px-solid/window-button-win-restore-down.svg";
+
+import AlignBottom from "@/../assets/16px-solid/align-bottom.svg";
+import AlignHorizontalCenter from "@/../assets/16px-solid/align-horizontal-center.svg";
+import AlignLeft from "@/../assets/16px-solid/align-left.svg";
+import AlignRight from "@/../assets/16px-solid/align-right.svg";
+import AlignTop from "@/../assets/16px-solid/align-top.svg";
+import AlignVerticalCenter from "@/../assets/16px-solid/align-vertical-center.svg";
+import BooleanDifference from "@/../assets/16px-solid/boolean-difference.svg";
+import BooleanIntersect from "@/../assets/16px-solid/boolean-intersect.svg";
+import BooleanSubtractBack from "@/../assets/16px-solid/boolean-subtract-back.svg";
+import BooleanSubtractFront from "@/../assets/16px-solid/boolean-subtract-front.svg";
+import BooleanUnion from "@/../assets/16px-solid/boolean-union.svg";
+import Copy from "@/../assets/16px-solid/copy.svg";
+import EyeHidden from "@/../assets/16px-solid/eye-hidden.svg";
+import EyeVisible from "@/../assets/16px-solid/eye-visible.svg";
+import File from "@/../assets/16px-solid/file.svg";
+import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
+import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
+import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
+import Paste from "@/../assets/16px-solid/paste.svg";
+import ViewModeNormal from "@/../assets/16px-solid/view-mode-normal.svg";
+import ViewModeOutline from "@/../assets/16px-solid/view-mode-outline.svg";
+import ViewModePixels from "@/../assets/16px-solid/view-mode-pixels.svg";
+import ViewportDesignMode from "@/../assets/16px-solid/viewport-design-mode.svg";
+import ViewportGuideMode from "@/../assets/16px-solid/viewport-guide-mode.svg";
+import ViewportSelectMode from "@/../assets/16px-solid/viewport-select-mode.svg";
+import ZoomIn from "@/../assets/16px-solid/zoom-in.svg";
+import ZoomOut from "@/../assets/16px-solid/zoom-out.svg";
+import ZoomReset from "@/../assets/16px-solid/zoom-reset.svg";
 
-import MouseHintNone from "@/../assets/16px-two-tone/mouse-hint-none.svg";
-import MouseHintLmb from "@/../assets/16px-two-tone/mouse-hint-lmb.svg";
-import MouseHintRmb from "@/../assets/16px-two-tone/mouse-hint-rmb.svg";
-import MouseHintMmb from "@/../assets/16px-two-tone/mouse-hint-mmb.svg";
-import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.svg";
-import MouseHintScrollDown from "@/../assets/16px-two-tone/mouse-hint-scroll-down.svg";
 import MouseHintDrag from "@/../assets/16px-two-tone/mouse-hint-drag.svg";
 import MouseHintLmbDrag from "@/../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
-import MouseHintRmbDrag from "@/../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
+import MouseHintLmb from "@/../assets/16px-two-tone/mouse-hint-lmb.svg";
 import MouseHintMmbDrag from "@/../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
+import MouseHintMmb from "@/../assets/16px-two-tone/mouse-hint-mmb.svg";
+import MouseHintNone from "@/../assets/16px-two-tone/mouse-hint-none.svg";
+import MouseHintRmbDrag from "@/../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
+import MouseHintRmb from "@/../assets/16px-two-tone/mouse-hint-rmb.svg";
+import MouseHintScrollDown from "@/../assets/16px-two-tone/mouse-hint-scroll-down.svg";
+import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.svg";
 
-import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
 import NodeTypeFolder from "@/../assets/24px-full-color/node-type-folder.svg";
+import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
 
-const icons = {
-	LayoutSelectTool: { component: LayoutSelectTool, size: 24 },
-	LayoutCropTool: { component: LayoutCropTool, size: 24 },
-	LayoutNavigateTool: { component: LayoutNavigateTool, size: 24 },
-	LayoutEyedropperTool: { component: LayoutEyedropperTool, size: 24 },
-	ParametricTextTool: { component: ParametricTextTool, size: 24 },
-	ParametricFillTool: { component: ParametricFillTool, size: 24 },
-	ParametricGradientTool: { component: ParametricGradientTool, size: 24 },
-	RasterBrushTool: { component: RasterBrushTool, size: 24 },
-	RasterHealTool: { component: RasterHealTool, size: 24 },
-	RasterCloneTool: { component: RasterCloneTool, size: 24 },
-	RasterPatchTool: { component: RasterPatchTool, size: 24 },
-	RasterBlurSharpenTool: { component: RasterBlurSharpenTool, size: 24 },
-	RasterRelightTool: { component: RasterRelightTool, size: 24 },
-	VectorPathTool: { component: VectorPathTool, size: 24 },
-	VectorPenTool: { component: VectorPenTool, size: 24 },
-	VectorFreehandTool: { component: VectorFreehandTool, size: 24 },
-	VectorSplineTool: { component: VectorSplineTool, size: 24 },
-	VectorLineTool: { component: VectorLineTool, size: 24 },
-	VectorRectangleTool: { component: VectorRectangleTool, size: 24 },
-	VectorEllipseTool: { component: VectorEllipseTool, size: 24 },
-	VectorShapeTool: { component: VectorShapeTool, size: 24 },
-	AlignLeft: { component: AlignLeft, size: 16 },
-	AlignHorizontalCenter: { component: AlignHorizontalCenter, size: 16 },
-	AlignRight: { component: AlignRight, size: 16 },
-	AlignTop: { component: AlignTop, size: 16 },
-	AlignVerticalCenter: { component: AlignVerticalCenter, size: 16 },
-	AlignBottom: { component: AlignBottom, size: 16 },
-	FlipHorizontal: { component: FlipHorizontal, size: 16 },
-	FlipVertical: { component: FlipVertical, size: 16 },
-	BooleanUnion: { component: BooleanUnion, size: 16 },
-	BooleanSubtractFront: { component: BooleanSubtractFront, size: 16 },
-	BooleanSubtractBack: { component: BooleanSubtractBack, size: 16 },
-	BooleanIntersect: { component: BooleanIntersect, size: 16 },
-	BooleanDifference: { component: BooleanDifference, size: 16 },
-	ZoomReset: { component: ZoomReset, size: 16 },
-	ZoomIn: { component: ZoomIn, size: 16 },
-	ZoomOut: { component: ZoomOut, size: 16 },
-	ViewModeNormal: { component: ViewModeNormal, size: 16 },
-	ViewModeOutline: { component: ViewModeOutline, size: 16 },
-	ViewModePixels: { component: ViewModePixels, size: 16 },
-	EyeVisible: { component: EyeVisible, size: 16 },
-	EyeHidden: { component: EyeHidden, size: 16 },
-	GraphiteLogo: { component: GraphiteLogo, size: 16 },
-	File: { component: File, size: 16 },
-	Copy: { component: Copy, size: 16 },
-	Paste: { component: Paste, size: 16 },
-	ViewportDesignMode: { component: ViewportDesignMode, size: 16 },
-	ViewportSelectMode: { component: ViewportSelectMode, size: 16 },
-	ViewportGuideMode: { component: ViewportGuideMode, size: 16 },
-	Checkmark: { component: Checkmark, size: 12 },
-	Link: { component: Link, size: 12 },
-	Grid: { component: Grid, size: 12 },
-	Overlays: { component: Overlays, size: 12 },
-	Snapping: { component: Snapping, size: 12 },
-	Info: { component: Info, size: 12 },
-	Warning: { component: Warning, size: 12 },
-	Swap: { component: Swap, size: 12 },
-	ResetColors: { component: ResetColors, size: 12 },
-	DropdownArrow: { component: DropdownArrow, size: 12 },
-	VerticalEllipsis: { component: VerticalEllipsis, size: 12 },
-	CloseX: { component: CloseX, size: 12 },
-	FullscreenEnter: { component: FullscreenEnter, size: 12 },
-	FullscreenExit: { component: FullscreenExit, size: 12 },
-	WindowButtonWinMinimize: { component: WindowButtonWinMinimize, size: 12 },
-	WindowButtonWinMaximize: { component: WindowButtonWinMaximize, size: 12 },
-	WindowButtonWinRestoreDown: { component: WindowButtonWinRestoreDown, size: 12 },
-	WindowButtonWinClose: { component: WindowButtonWinClose, size: 12 },
-	KeyboardArrowUp: { component: KeyboardArrowUp, size: 12 },
-	KeyboardArrowRight: { component: KeyboardArrowRight, size: 12 },
-	KeyboardArrowDown: { component: KeyboardArrowDown, size: 12 },
-	KeyboardArrowLeft: { component: KeyboardArrowLeft, size: 12 },
-	KeyboardBackspace: { component: KeyboardBackspace, size: 12 },
-	KeyboardCommand: { component: KeyboardCommand, size: 12 },
-	KeyboardEnter: { component: KeyboardEnter, size: 12 },
-	KeyboardOption: { component: KeyboardOption, size: 12 },
-	KeyboardShift: { component: KeyboardShift, size: 12 },
-	KeyboardSpace: { component: KeyboardSpace, size: 12 },
-	KeyboardTab: { component: KeyboardTab, size: 12 },
-	MouseHintNone: { component: MouseHintNone, size: 16 },
-	MouseHintLmb: { component: MouseHintLmb, size: 16 },
-	MouseHintRmb: { component: MouseHintRmb, size: 16 },
-	MouseHintMmb: { component: MouseHintMmb, size: 16 },
-	MouseHintScrollUp: { component: MouseHintScrollUp, size: 16 },
-	MouseHintScrollDown: { component: MouseHintScrollDown, size: 16 },
-	MouseHintDrag: { component: MouseHintDrag, size: 16 },
-	MouseHintLmbDrag: { component: MouseHintLmbDrag, size: 16 },
-	MouseHintRmbDrag: { component: MouseHintRmbDrag, size: 16 },
-	MouseHintMmbDrag: { component: MouseHintMmbDrag, size: 16 },
-	NodeTypePath: { component: NodeTypePath, size: 24 },
-	NodeTypeFolder: { component: NodeTypeFolder, size: 24 },
+import LayoutCropTool from "@/../assets/24px-two-tone/layout-crop-tool.svg";
+import LayoutEyedropperTool from "@/../assets/24px-two-tone/layout-eyedropper-tool.svg";
+import LayoutNavigateTool from "@/../assets/24px-two-tone/layout-navigate-tool.svg";
+import LayoutSelectTool from "@/../assets/24px-two-tone/layout-select-tool.svg";
+import ParametricFillTool from "@/../assets/24px-two-tone/parametric-fill-tool.svg";
+import ParametricGradientTool from "@/../assets/24px-two-tone/parametric-gradient-tool.svg";
+import ParametricTextTool from "@/../assets/24px-two-tone/parametric-text-tool.svg";
+import RasterBrushTool from "@/../assets/24px-two-tone/raster-brush-tool.svg";
+import RasterCloneTool from "@/../assets/24px-two-tone/raster-clone-tool.svg";
+import RasterBlurSharpenTool from "@/../assets/24px-two-tone/raster-detail-tool.svg";
+import RasterHealTool from "@/../assets/24px-two-tone/raster-heal-tool.svg";
+import RasterPatchTool from "@/../assets/24px-two-tone/raster-patch-tool.svg";
+import RasterRelightTool from "@/../assets/24px-two-tone/raster-relight-tool.svg";
+import VectorEllipseTool from "@/../assets/24px-two-tone/vector-ellipse-tool.svg";
+import VectorFreehandTool from "@/../assets/24px-two-tone/vector-freehand-tool.svg";
+import VectorLineTool from "@/../assets/24px-two-tone/vector-line-tool.svg";
+import VectorPathTool from "@/../assets/24px-two-tone/vector-path-tool.svg";
+import VectorPenTool from "@/../assets/24px-two-tone/vector-pen-tool.svg";
+import VectorRectangleTool from "@/../assets/24px-two-tone/vector-rectangle-tool.svg";
+import VectorShapeTool from "@/../assets/24px-two-tone/vector-shape-tool.svg";
+import VectorSplineTool from "@/../assets/24px-two-tone/vector-spline-tool.svg";
+
+export type IconName = keyof typeof ICON_LIST;
+export type IconSize = 12 | 16 | 24 | 32;
+
+const size12: IconSize = 12;
+const size16: IconSize = 16;
+const size24: IconSize = 24;
+// const size32: IconSize = 32;
+
+const ICON_LIST = {
+	Checkmark: { component: Checkmark, size: size12 },
+	CloseX: { component: CloseX, size: size12 },
+	DropdownArrow: { component: DropdownArrow, size: size12 },
+	FullscreenEnter: { component: FullscreenEnter, size: size12 },
+	FullscreenExit: { component: FullscreenExit, size: size12 },
+	Grid: { component: Grid, size: size12 },
+	Info: { component: Info, size: size12 },
+	KeyboardArrowDown: { component: KeyboardArrowDown, size: size12 },
+	KeyboardArrowLeft: { component: KeyboardArrowLeft, size: size12 },
+	KeyboardArrowRight: { component: KeyboardArrowRight, size: size12 },
+	KeyboardArrowUp: { component: KeyboardArrowUp, size: size12 },
+	KeyboardBackspace: { component: KeyboardBackspace, size: size12 },
+	KeyboardCommand: { component: KeyboardCommand, size: size12 },
+	KeyboardEnter: { component: KeyboardEnter, size: size12 },
+	KeyboardOption: { component: KeyboardOption, size: size12 },
+	KeyboardShift: { component: KeyboardShift, size: size12 },
+	KeyboardSpace: { component: KeyboardSpace, size: size12 },
+	KeyboardTab: { component: KeyboardTab, size: size12 },
+	Link: { component: Link, size: size12 },
+	Overlays: { component: Overlays, size: size12 },
+	ResetColors: { component: ResetColors, size: size12 },
+	Snapping: { component: Snapping, size: size12 },
+	Swap: { component: Swap, size: size12 },
+	VerticalEllipsis: { component: VerticalEllipsis, size: size12 },
+	Warning: { component: Warning, size: size12 },
+	WindowButtonWinClose: { component: WindowButtonWinClose, size: size12 },
+	WindowButtonWinMaximize: { component: WindowButtonWinMaximize, size: size12 },
+	WindowButtonWinMinimize: { component: WindowButtonWinMinimize, size: size12 },
+	WindowButtonWinRestoreDown: { component: WindowButtonWinRestoreDown, size: size12 },
+
+	AlignBottom: { component: AlignBottom, size: size16 },
+	AlignHorizontalCenter: { component: AlignHorizontalCenter, size: size16 },
+	AlignLeft: { component: AlignLeft, size: size16 },
+	AlignRight: { component: AlignRight, size: size16 },
+	AlignTop: { component: AlignTop, size: size16 },
+	AlignVerticalCenter: { component: AlignVerticalCenter, size: size16 },
+	BooleanDifference: { component: BooleanDifference, size: size16 },
+	BooleanIntersect: { component: BooleanIntersect, size: size16 },
+	BooleanSubtractBack: { component: BooleanSubtractBack, size: size16 },
+	BooleanSubtractFront: { component: BooleanSubtractFront, size: size16 },
+	BooleanUnion: { component: BooleanUnion, size: size16 },
+	Copy: { component: Copy, size: size16 },
+	EyeHidden: { component: EyeHidden, size: size16 },
+	EyeVisible: { component: EyeVisible, size: size16 },
+	File: { component: File, size: size16 },
+	FlipHorizontal: { component: FlipHorizontal, size: size16 },
+	FlipVertical: { component: FlipVertical, size: size16 },
+	GraphiteLogo: { component: GraphiteLogo, size: size16 },
+	Paste: { component: Paste, size: size16 },
+	ViewModeNormal: { component: ViewModeNormal, size: size16 },
+	ViewModeOutline: { component: ViewModeOutline, size: size16 },
+	ViewModePixels: { component: ViewModePixels, size: size16 },
+	ViewportDesignMode: { component: ViewportDesignMode, size: size16 },
+	ViewportGuideMode: { component: ViewportGuideMode, size: size16 },
+	ViewportSelectMode: { component: ViewportSelectMode, size: size16 },
+	ZoomIn: { component: ZoomIn, size: size16 },
+	ZoomOut: { component: ZoomOut, size: size16 },
+	ZoomReset: { component: ZoomReset, size: size16 },
+
+	MouseHintDrag: { component: MouseHintDrag, size: size16 },
+	MouseHintLmbDrag: { component: MouseHintLmbDrag, size: size16 },
+	MouseHintLmb: { component: MouseHintLmb, size: size16 },
+	MouseHintMmbDrag: { component: MouseHintMmbDrag, size: size16 },
+	MouseHintMmb: { component: MouseHintMmb, size: size16 },
+	MouseHintNone: { component: MouseHintNone, size: size16 },
+	MouseHintRmbDrag: { component: MouseHintRmbDrag, size: size16 },
+	MouseHintRmb: { component: MouseHintRmb, size: size16 },
+	MouseHintScrollDown: { component: MouseHintScrollDown, size: size16 },
+	MouseHintScrollUp: { component: MouseHintScrollUp, size: size16 },
+
+	NodeTypeFolder: { component: NodeTypeFolder, size: size24 },
+	NodeTypePath: { component: NodeTypePath, size: size24 },
+
+	LayoutCropTool: { component: LayoutCropTool, size: size24 },
+	LayoutEyedropperTool: { component: LayoutEyedropperTool, size: size24 },
+	LayoutNavigateTool: { component: LayoutNavigateTool, size: size24 },
+	LayoutSelectTool: { component: LayoutSelectTool, size: size24 },
+	ParametricFillTool: { component: ParametricFillTool, size: size24 },
+	ParametricGradientTool: { component: ParametricGradientTool, size: size24 },
+	ParametricTextTool: { component: ParametricTextTool, size: size24 },
+	RasterBrushTool: { component: RasterBrushTool, size: size24 },
+	RasterCloneTool: { component: RasterCloneTool, size: size24 },
+	RasterBlurSharpenTool: { component: RasterBlurSharpenTool, size: size24 },
+	RasterHealTool: { component: RasterHealTool, size: size24 },
+	RasterPatchTool: { component: RasterPatchTool, size: size24 },
+	RasterRelightTool: { component: RasterRelightTool, size: size24 },
+	VectorEllipseTool: { component: VectorEllipseTool, size: size24 },
+	VectorFreehandTool: { component: VectorFreehandTool, size: size24 },
+	VectorLineTool: { component: VectorLineTool, size: size24 },
+	VectorPathTool: { component: VectorPathTool, size: size24 },
+	VectorPenTool: { component: VectorPenTool, size: size24 },
+	VectorRectangleTool: { component: VectorRectangleTool, size: size24 },
+	VectorShapeTool: { component: VectorShapeTool, size: size24 },
+	VectorSplineTool: { component: VectorSplineTool, size: size24 },
 };
-
-const components = Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component]));
+const icons: Record<IconName, { component: DefineComponent; size: IconSize }> = ICON_LIST;
 
 export default defineComponent({
+	components: Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
 	props: {
-		icon: { type: String, required: true },
-		gapAfter: { type: Boolean, default: false },
+		icon: { type: String as PropType<IconName>, required: true },
+		gapAfter: { type: Boolean as PropType<boolean>, default: false },
 	},
-	components,
 	data() {
-		return { icons };
+		return {
+			icons,
+		};
 	},
 });
 </script>
diff --git a/frontend/src/components/widgets/labels/TextLabel.vue b/frontend/src/components/widgets/labels/TextLabel.vue
index cc2717914b..6c9095575d 100644
--- a/frontend/src/components/widgets/labels/TextLabel.vue
+++ b/frontend/src/components/widgets/labels/TextLabel.vue
@@ -20,13 +20,12 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
-	components: {},
 	props: {
-		bold: { type: Boolean, default: false },
-		italic: { type: Boolean, default: false },
+		bold: { type: Boolean as PropType<boolean>, default: false },
+		italic: { type: Boolean as PropType<boolean>, default: false },
 	},
 });
 </script>
diff --git a/frontend/src/components/widgets/labels/UserInputLabel.vue b/frontend/src/components/widgets/labels/UserInputLabel.vue
index 0a9006396f..fb2b674e4f 100644
--- a/frontend/src/components/widgets/labels/UserInputLabel.vue
+++ b/frontend/src/components/widgets/labels/UserInputLabel.vue
@@ -10,7 +10,7 @@
 			</template>
 		</template>
 		<span class="input-mouse" v-if="inputMouse">
-			<IconLabel :icon="mouseMovementIcon(inputMouse)" />
+			<IconLabel :icon="`MouseHint${inputMouse}`" />
 		</span>
 		<span class="hint-text" v-if="hasSlotContent">
 			<slot></slot>
@@ -95,28 +95,17 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
+
+import { HintInfo } from "@/dispatcher/js-messages";
 
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
-export enum MouseInputInteraction {
-	"None" = "None",
-	"Lmb" = "Lmb",
-	"Rmb" = "Rmb",
-	"Mmb" = "Mmb",
-	"ScrollUp" = "ScrollUp",
-	"ScrollDown" = "ScrollDown",
-	"Drag" = "Drag",
-	"LmbDrag" = "LmbDrag",
-	"RmbDrag" = "RmbDrag",
-	"MmbDrag" = "MmbDrag",
-}
-
 export default defineComponent({
 	components: { IconLabel },
 	props: {
-		inputKeys: { type: Array, default: () => [] },
-		inputMouse: { type: String },
+		inputKeys: { type: Array as PropType<HintInfo["key_groups"]>, default: () => [] },
+		inputMouse: { type: String as PropType<HintInfo["mouse"]>, default: null },
 	},
 	computed: {
 		hasSlotContent(): boolean {
@@ -173,50 +162,14 @@ export default defineComponent({
 			let result;
 
 			// Letters and numbers
-			if (/^[A-Z0-9]$/.test(text)) {
-				result = text;
-			}
+			if (/^[A-Z0-9]$/.test(text)) result = text;
 			// Abbreviated names
-			else if (text in textMap) {
-				result = textMap[text];
-			}
+			else if (text in textMap) result = textMap[text];
 			// Other
-			else {
-				result = text;
-			}
+			else result = text;
 
 			return { text: result, icon: null, width: `width-${(result || " ").length * 8 + 8}` };
 		},
-		mouseMovementIcon(mouseInputInteraction: MouseInputInteraction) {
-			switch (mouseInputInteraction) {
-				case MouseInputInteraction.Lmb:
-					return "MouseHintLmb";
-				case MouseInputInteraction.Rmb:
-					return "MouseHintRmb";
-				case MouseInputInteraction.Mmb:
-					return "MouseHintMmb";
-				case MouseInputInteraction.ScrollUp:
-					return "MouseHintScrollUp";
-				case MouseInputInteraction.ScrollDown:
-					return "MouseHintScrollDown";
-				case MouseInputInteraction.Drag:
-					return "MouseHintDrag";
-				case MouseInputInteraction.LmbDrag:
-					return "MouseHintLmbDrag";
-				case MouseInputInteraction.RmbDrag:
-					return "MouseHintRmbDrag";
-				case MouseInputInteraction.MmbDrag:
-					return "MouseHintMmbDrag";
-				default:
-				case MouseInputInteraction.None:
-					return "MouseHintNone";
-			}
-		},
-	},
-	data() {
-		return {
-			MouseInputInteraction,
-		};
 	},
 });
 </script>
diff --git a/frontend/src/components/widgets/options/ToolOptions.vue b/frontend/src/components/widgets/options/ToolOptions.vue
index 07c98dfd73..0c8ee88d56 100644
--- a/frontend/src/components/widgets/options/ToolOptions.vue
+++ b/frontend/src/components/widgets/options/ToolOptions.vue
@@ -31,17 +31,19 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { WidgetRow, SeparatorType, IconButtonWidget } from "@/components/widgets/widgets";
+import { WidgetRow, IconButtonWidget } from "@/utilities/widgets";
 
-import Separator from "@/components/widgets/separators/Separator.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
+import Separator from "@/components/widgets/separators/Separator.vue";
+
+export type ToolName = "Select" | "Shape" | "Line" | "Pen";
 
 export default defineComponent({
 	inject: ["editor", "dialog"],
 	props: {
-		activeTool: { type: String },
+		activeTool: { type: String as PropType<ToolName> },
 		activeToolOptions: { type: Object as PropType<Record<string, object>> },
 	},
 	methods: {
@@ -54,11 +56,15 @@ export default defineComponent({
 		},
 		// Traverses the given path and returns the direct parent of the option
 		getRecordContainingOption(optionPath: string[]): Record<string, number> {
-			const allButLast = optionPath.slice(0, -1);
+			// TODO: Formalize types and avoid casting with `as`
 			let currentRecord = this.activeToolOptions as Record<string, object | number>;
-			[this.activeTool || "", ...allButLast].forEach((attr) => {
+
+			const allButLastOptions = optionPath.slice(0, -1);
+			[this.activeTool || "", ...allButLastOptions].forEach((attr) => {
+				// Dig into the tree in each loop iteration
 				currentRecord = currentRecord[attr] as Record<string, object | number>;
 			});
+
 			return currentRecord as Record<string, number>;
 		},
 		// Traverses the given path into the active tool's option struct, and sets the value at the path tail
@@ -88,19 +94,19 @@ export default defineComponent({
 		},
 	},
 	data() {
-		const toolOptionsWidgets: Record<string, WidgetRow> = {
+		const toolOptionsWidgets: Record<ToolName, WidgetRow> = {
 			Select: [
 				{ kind: "IconButton", message: { Align: ["X", "Min"] }, tooltip: "Align Left", props: { icon: "AlignLeft", size: 24 } },
 				{ kind: "IconButton", message: { Align: ["X", "Center"] }, tooltip: "Align Horizontal Center", props: { icon: "AlignHorizontalCenter", size: 24 } },
 				{ kind: "IconButton", message: { Align: ["X", "Max"] }, tooltip: "Align Right", props: { icon: "AlignRight", size: 24 } },
 
-				{ kind: "Separator", props: { type: SeparatorType.Unrelated } },
+				{ kind: "Separator", props: { type: "Unrelated" } },
 
 				{ kind: "IconButton", message: { Align: ["Y", "Min"] }, tooltip: "Align Top", props: { icon: "AlignTop", size: 24 } },
 				{ kind: "IconButton", message: { Align: ["Y", "Center"] }, tooltip: "Align Vertical Center", props: { icon: "AlignVerticalCenter", size: 24 } },
 				{ kind: "IconButton", message: { Align: ["Y", "Max"] }, tooltip: "Align Bottom", props: { icon: "AlignBottom", size: 24 } },
 
-				{ kind: "Separator", props: { type: SeparatorType.Related } },
+				{ kind: "Separator", props: { type: "Related" } },
 
 				{
 					kind: "PopoverButton",
@@ -111,12 +117,12 @@ export default defineComponent({
 					props: {},
 				},
 
-				{ kind: "Separator", props: { type: SeparatorType.Section } },
+				{ kind: "Separator", props: { type: "Section" } },
 
 				{ kind: "IconButton", message: "FlipHorizontal", tooltip: "Flip Horizontal", props: { icon: "FlipHorizontal", size: 24 } },
 				{ kind: "IconButton", message: "FlipVertical", tooltip: "Flip Vertical", props: { icon: "FlipVertical", size: 24 } },
 
-				{ kind: "Separator", props: { type: SeparatorType.Related } },
+				{ kind: "Separator", props: { type: "Related" } },
 
 				{
 					kind: "PopoverButton",
@@ -127,15 +133,15 @@ export default defineComponent({
 					props: {},
 				},
 
-				{ kind: "Separator", props: { type: SeparatorType.Section } },
+				{ kind: "Separator", props: { type: "Section" } },
 
-				{ kind: "IconButton", tooltip: "Boolean Union", callback: () => this.dialog.comingSoon(197), props: { icon: "BooleanUnion", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Subtract Front", callback: () => this.dialog.comingSoon(197), props: { icon: "BooleanSubtractFront", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Subtract Back", callback: () => this.dialog.comingSoon(197), props: { icon: "BooleanSubtractBack", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Intersect", callback: () => this.dialog.comingSoon(197), props: { icon: "BooleanIntersect", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Difference", callback: () => this.dialog.comingSoon(197), props: { icon: "BooleanDifference", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Union", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanUnion", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Subtract Front", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanSubtractFront", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Subtract Back", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanSubtractBack", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Intersect", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanIntersect", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Difference", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanDifference", size: 24 } },
 
-				{ kind: "Separator", props: { type: SeparatorType.Related } },
+				{ kind: "Separator", props: { type: "Related" } },
 
 				{
 					kind: "PopoverButton",
@@ -153,7 +159,6 @@ export default defineComponent({
 
 		return {
 			toolOptionsWidgets,
-			SeparatorType,
 		};
 	},
 	components: {
diff --git a/frontend/src/components/widgets/rulers/CanvasRuler.vue b/frontend/src/components/widgets/rulers/CanvasRuler.vue
index 2776e27cf3..d22ddc95e1 100644
--- a/frontend/src/components/widgets/rulers/CanvasRuler.vue
+++ b/frontend/src/components/widgets/rulers/CanvasRuler.vue
@@ -50,29 +50,26 @@ const MAJOR_MARK_THICKNESS = 16;
 const MEDIUM_MARK_THICKNESS = 6;
 const MINOR_MARK_THICKNESS = 3;
 
-export enum RulerDirection {
-	"Horizontal" = "Horizontal",
-	"Vertical" = "Vertical",
-}
+export type RulerDirection = "Horizontal" | "Vertical";
 
 // Apparently the modulo operator in js does not work properly.
-const mod = (n: number, m: number) => {
-	const remain = n % m;
-	return Math.floor(remain >= 0 ? remain : remain + m);
+const mod = (n: number, m: number): number => {
+	const remainder = n % m;
+	return Math.floor(remainder >= 0 ? remainder : remainder + m);
 };
 
 export default defineComponent({
 	props: {
-		direction: { type: String as PropType<RulerDirection>, default: RulerDirection.Vertical },
-		origin: { type: Number, required: true },
-		numberInterval: { type: Number, required: true },
-		majorMarkSpacing: { type: Number, required: true },
-		mediumDivisions: { type: Number, default: 5 },
-		minorDivisions: { type: Number, default: 2 },
+		direction: { type: String as PropType<RulerDirection>, default: "Vertical" },
+		origin: { type: Number as PropType<number>, required: true },
+		numberInterval: { type: Number as PropType<number>, required: true },
+		majorMarkSpacing: { type: Number as PropType<number>, required: true },
+		mediumDivisions: { type: Number as PropType<number>, default: 5 },
+		minorDivisions: { type: Number as PropType<number>, default: 2 },
 	},
 	computed: {
 		svgPath(): string {
-			const isVertical = this.direction === RulerDirection.Vertical;
+			const isVertical = this.direction === "Vertical";
 			const lineDirection = isVertical ? "H" : "V";
 
 			const offsetStart = mod(this.origin, this.majorMarkSpacing);
@@ -98,7 +95,7 @@ export default defineComponent({
 			return dPathAttribute;
 		},
 		svgTexts(): { transform: string; text: number }[] {
-			const isVertical = this.direction === RulerDirection.Vertical;
+			const isVertical = this.direction === "Vertical";
 
 			const offsetStart = mod(this.origin, this.majorMarkSpacing);
 			const shiftedOffsetStart = offsetStart - this.majorMarkSpacing;
@@ -128,7 +125,7 @@ export default defineComponent({
 			if (!this.$refs.rulerRef) return;
 
 			const rulerElement = this.$refs.rulerRef as HTMLElement;
-			const isVertical = this.direction === RulerDirection.Vertical;
+			const isVertical = this.direction === "Vertical";
 
 			const newLength = isVertical ? rulerElement.clientHeight : rulerElement.clientWidth;
 			const roundedUp = (Math.floor(newLength / this.majorMarkSpacing) + 1) * this.majorMarkSpacing;
@@ -152,7 +149,6 @@ export default defineComponent({
 		return {
 			rulerLength: 0,
 			svgBounds: { width: "0px", height: "0px" },
-			RulerDirection,
 		};
 	},
 });
diff --git a/frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue b/frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue
index 6b3d89e6fc..7668843df3 100644
--- a/frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue
+++ b/frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="persistent-scrollbar" :class="direction.toLowerCase()">
 		<button class="arrow decrease" @pointerdown="changePosition(-50)"></button>
-		<div class="scroll-track" ref="scrollTrack" @pointerdown="grabArea">
-			<div class="scroll-thumb" @pointerdown="grabHandle" :class="{ dragging }" ref="handle" :style="[thumbStart, thumbEnd, sides]"></div>
+		<div class="scroll-track" ref="scrollTrack" @pointerdown="(e) => grabArea(e)">
+			<div class="scroll-thumb" @pointerdown="(e) => grabHandle(e)" :class="{ dragging }" ref="handle" :style="[thumbStart, thumbEnd, sides]"></div>
 		</div>
 		<button class="arrow increase" @click="changePosition(50)"></button>
 	</div>
@@ -110,44 +110,40 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+export type ScrollbarDirection = "Horizontal" | "Vertical";
+
 // Linear Interpolation
-const lerp = (x: number, y: number, a: number) => x * (1 - a) + y * a;
+const lerp = (x: number, y: number, a: number): number => x * (1 - a) + y * a;
 
 // Convert the position of the handle (0-1) to the position on the track (0-1).
 // This includes the 1/2 handle length gap of the possible handle positionson each side so the end of the handle doesn't go off the track.
-const handleToTrack = (handleLen: number, handlePos: number) => lerp(handleLen / 2, 1 - handleLen / 2, handlePos);
+const handleToTrack = (handleLen: number, handlePos: number): number => lerp(handleLen / 2, 1 - handleLen / 2, handlePos);
 
-const pointerPosition = (direction: ScrollbarDirection, e: PointerEvent) => (direction === ScrollbarDirection.Vertical ? e.clientY : e.clientX);
-
-export enum ScrollbarDirection {
-	"Horizontal" = "Horizontal",
-	"Vertical" = "Vertical",
-}
+const pointerPosition = (direction: ScrollbarDirection, e: PointerEvent): number => (direction === "Vertical" ? e.clientY : e.clientX);
 
 export default defineComponent({
 	props: {
-		direction: { type: String as PropType<ScrollbarDirection>, default: ScrollbarDirection.Vertical },
-		handlePosition: { type: Number, default: 0.5 },
-		handleLength: { type: Number, default: 0.5 },
+		direction: { type: String as PropType<ScrollbarDirection>, default: "Vertical" },
+		handlePosition: { type: Number as PropType<number>, default: 0.5 },
+		handleLength: { type: Number as PropType<number>, default: 0.5 },
 	},
 	computed: {
 		thumbStart(): { left: string } | { top: string } {
 			const start = handleToTrack(this.handleLength, this.handlePosition) - this.handleLength / 2;
 
-			return this.direction === ScrollbarDirection.Vertical ? { top: `${start * 100}%` } : { left: `${start * 100}%` };
+			return this.direction === "Vertical" ? { top: `${start * 100}%` } : { left: `${start * 100}%` };
 		},
 		thumbEnd(): { right: string } | { bottom: string } {
 			const end = 1 - handleToTrack(this.handleLength, this.handlePosition) - this.handleLength / 2;
 
-			return this.direction === ScrollbarDirection.Vertical ? { bottom: `${end * 100}%` } : { right: `${end * 100}%` };
+			return this.direction === "Vertical" ? { bottom: `${end * 100}%` } : { right: `${end * 100}%` };
 		},
 		sides(): { left: string; right: string } | { top: string; bottom: string } {
-			return this.direction === ScrollbarDirection.Vertical ? { left: "0%", right: "0%" } : { top: "0%", bottom: "0%" };
+			return this.direction === "Vertical" ? { left: "0%", right: "0%" } : { top: "0%", bottom: "0%" };
 		},
 	},
 	data() {
 		return {
-			ScrollbarDirection,
 			dragging: false,
 			pointerPos: 0,
 		};
@@ -159,11 +155,11 @@ export default defineComponent({
 	methods: {
 		trackLength(): number {
 			const track = this.$refs.scrollTrack as HTMLElement;
-			return this.direction === ScrollbarDirection.Vertical ? track.clientHeight - this.handleLength : track.clientWidth;
+			return this.direction === "Vertical" ? track.clientHeight - this.handleLength : track.clientWidth;
 		},
 		trackOffset(): number {
 			const track = this.$refs.scrollTrack as HTMLElement;
-			return this.direction === ScrollbarDirection.Vertical ? track.getBoundingClientRect().top : track.getBoundingClientRect().left;
+			return this.direction === "Vertical" ? track.getBoundingClientRect().top : track.getBoundingClientRect().left;
 		},
 		clampHandlePosition(newPos: number) {
 			const clampedPosition = Math.min(Math.max(newPos, 0), 1);
diff --git a/frontend/src/components/widgets/separators/Separator.vue b/frontend/src/components/widgets/separators/Separator.vue
index e40fce6ccd..76f7bba31f 100644
--- a/frontend/src/components/widgets/separators/Separator.vue
+++ b/frontend/src/components/widgets/separators/Separator.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="separator" :class="[direction.toLowerCase(), type.toLowerCase()]">
-		<div v-if="[SeparatorType.Section, SeparatorType.List].includes(type)"></div>
+		<div v-if="['Section', 'List'].includes(type)"></div>
 	</div>
 </template>
 
@@ -69,21 +69,14 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
+import { SeparatorDirection, SeparatorType } from "@/utilities/widgets";
 
 export default defineComponent({
-	components: {},
 	props: {
-		direction: { type: String, default: SeparatorDirection.Horizontal },
-		type: { type: String, default: SeparatorType.Unrelated },
-	},
-	data() {
-		return {
-			SeparatorDirection,
-			SeparatorType,
-		};
+		direction: { type: String as PropType<SeparatorDirection>, default: "Horizontal" },
+		type: { type: String as PropType<SeparatorType>, default: "Unrelated" },
 	},
 });
 </script>
diff --git a/frontend/src/components/window/MainWindow.vue b/frontend/src/components/window/MainWindow.vue
index 54b2664df4..aa7b5e749a 100644
--- a/frontend/src/components/window/MainWindow.vue
+++ b/frontend/src/components/window/MainWindow.vue
@@ -39,18 +39,13 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import TitleBar from "@/components/window/title-bar/TitleBar.vue";
-import StatusBar from "@/components/window/status-bar/StatusBar.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import StatusBar from "@/components/window/status-bar/StatusBar.vue";
+import TitleBar from "@/components/window/title-bar/TitleBar.vue";
 import Workspace from "@/components/workspace/Workspace.vue";
 
-export enum ApplicationPlatform {
-	"Windows" = "Windows",
-	"Mac" = "Mac",
-	"Linux" = "Linux",
-	"Web" = "Web",
-}
+export type ApplicationPlatform = "Windows" | "Mac" | "Linux" | "Web";
 
 export default defineComponent({
 	components: {
@@ -62,7 +57,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			platform: ApplicationPlatform.Web,
+			platform: "Web" as ApplicationPlatform,
 			maximized: true,
 		};
 	},
diff --git a/frontend/src/components/window/status-bar/StatusBar.vue b/frontend/src/components/window/status-bar/StatusBar.vue
index 62b0b42fe6..4844354c33 100644
--- a/frontend/src/components/window/status-bar/StatusBar.vue
+++ b/frontend/src/components/window/status-bar/StatusBar.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="status-bar">
 		<template v-for="(hintGroup, index) in hintData" :key="hintGroup">
-			<Separator :type="SeparatorType.Section" v-if="index !== 0" />
+			<Separator :type="'Section'" v-if="index !== 0" />
 			<template v-for="hint in hintGroup" :key="hint">
 				<span v-if="hint.plus" class="plus">+</span>
 				<UserInputLabel :inputMouse="hint.mouse" :inputKeys="hint.key_groups">{{ hint.label }}</UserInputLabel>
@@ -35,11 +35,10 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { SeparatorType } from "@/components/widgets/widgets";
+import { HintData, UpdateInputHints } from "@/dispatcher/js-messages";
 
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
 import Separator from "@/components/widgets/separators/Separator.vue";
-import { HintData, UpdateInputHints } from "@/dispatcher/js-messages";
 
 export default defineComponent({
 	inject: ["editor"],
@@ -49,7 +48,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			SeparatorType,
 			hintData: [] as HintData,
 		};
 	},
diff --git a/frontend/src/components/window/title-bar/TitleBar.vue b/frontend/src/components/window/title-bar/TitleBar.vue
index 079d7ef1bf..1a09d03f2a 100644
--- a/frontend/src/components/window/title-bar/TitleBar.vue
+++ b/frontend/src/components/window/title-bar/TitleBar.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="header-third">
-		<WindowButtonsMac :maximized="maximized" v-if="platform === ApplicationPlatform.Mac" />
-		<MenuBarInput v-if="platform !== ApplicationPlatform.Mac" />
+		<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
+		<MenuBarInput v-if="platform !== 'Mac'" />
 	</div>
 	<div class="header-third">
 		<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
 	</div>
 	<div class="header-third">
-		<WindowButtonsWindows :maximized="maximized" v-if="platform === ApplicationPlatform.Windows || platform === ApplicationPlatform.Linux" />
-		<WindowButtonsWeb :maximized="maximized" v-if="platform === ApplicationPlatform.Web" />
+		<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
+		<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
 	</div>
 </template>
 
@@ -32,25 +32,21 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import WindowTitle from "@/components/window/title-bar/WindowTitle.vue";
-import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.vue";
+import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
 import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.vue";
 import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.vue";
-import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
-import { ApplicationPlatform } from "@/components/window/MainWindow.vue";
+import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.vue";
+import WindowTitle from "@/components/window/title-bar/WindowTitle.vue";
+
+export type Platform = "Windows" | "Mac" | "Linux" | "Web";
 
 export default defineComponent({
 	inject: ["documents"],
 	props: {
-		platform: { type: String, required: true },
-		maximized: { type: Boolean, required: true },
-	},
-	data() {
-		return {
-			ApplicationPlatform,
-		};
+		platform: { type: String as PropType<Platform>, required: true },
+		maximized: { type: Boolean as PropType<boolean>, required: true },
 	},
 	computed: {
 		activeDocumentDisplayName() {
diff --git a/frontend/src/components/window/title-bar/WindowButtonsMac.vue b/frontend/src/components/window/title-bar/WindowButtonsMac.vue
index c9dcac660a..a3036fed2a 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsMac.vue
+++ b/frontend/src/components/window/title-bar/WindowButtonsMac.vue
@@ -35,11 +35,11 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
 	props: {
-		maximized: { type: Boolean, default: false },
+		maximized: { type: Boolean as PropType<boolean>, default: false },
 	},
 });
 </script>
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWeb.vue b/frontend/src/components/window/title-bar/WindowButtonsWeb.vue
index 45a601bb20..2c5334c848 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWeb.vue
+++ b/frontend/src/components/window/title-bar/WindowButtonsWeb.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="window-buttons-web" @click="handleClick" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
+	<div class="window-buttons-web" @click="(e) => handleClick(e)" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
 		<TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel>
 		<IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
 	</div>
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWindows.vue b/frontend/src/components/window/title-bar/WindowButtonsWindows.vue
index aa3ba881c8..c9dca69e69 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWindows.vue
+++ b/frontend/src/components/window/title-bar/WindowButtonsWindows.vue
@@ -38,14 +38,14 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	components: { IconLabel },
 	props: {
-		maximized: { type: Boolean, default: false },
+		maximized: { type: Boolean as PropType<boolean>, default: false },
 	},
 });
 </script>
diff --git a/frontend/src/components/window/title-bar/WindowTitle.vue b/frontend/src/components/window/title-bar/WindowTitle.vue
index 2fb1b97e83..de1acb5045 100644
--- a/frontend/src/components/window/title-bar/WindowTitle.vue
+++ b/frontend/src/components/window/title-bar/WindowTitle.vue
@@ -14,11 +14,11 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
 	props: {
-		title: { type: String, required: true },
+		title: { type: String as PropType<string>, required: true },
 	},
 });
 </script>
diff --git a/frontend/src/components/workspace/Panel.vue b/frontend/src/components/workspace/Panel.vue
index ae4d1a2055..d53c7002d5 100644
--- a/frontend/src/components/workspace/Panel.vue
+++ b/frontend/src/components/workspace/Panel.vue
@@ -14,7 +14,7 @@
 					<IconButton :action="(e) => e.stopPropagation() || (closeAction && closeAction(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
 				</div>
 			</div>
-			<PopoverButton :icon="PopoverButtonIcon.VerticalEllipsis">
+			<PopoverButton :icon="'VerticalEllipsis'">
 				<h3>Panel Options</h3>
 				<p>The contents of this popover menu are coming soon</p>
 			</PopoverButton>
@@ -155,37 +155,32 @@
 import { defineComponent, PropType } from "vue";
 
 import Document from "@/components/panels/Document.vue";
-import Properties from "@/components/panels/Properties.vue";
 import LayerTree from "@/components/panels/LayerTree.vue";
 import Minimap from "@/components/panels/Minimap.vue";
+import Properties from "@/components/panels/Properties.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import PopoverButton, { PopoverButtonIcon } from "@/components/widgets/buttons/PopoverButton.vue";
-import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
+import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
+
+const components = {
+	Document,
+	Properties,
+	LayerTree,
+	Minimap,
+	IconButton,
+	PopoverButton,
+};
 
 export default defineComponent({
 	inject: ["documents"],
-	components: {
-		Document,
-		Properties,
-		LayerTree,
-		Minimap,
-		IconButton,
-		PopoverButton,
-	},
+	components,
 	props: {
-		tabMinWidths: { type: Boolean, default: false },
-		tabCloseButtons: { type: Boolean, default: false },
+		tabMinWidths: { type: Boolean as PropType<boolean>, default: false },
+		tabCloseButtons: { type: Boolean as PropType<boolean>, default: false },
 		tabLabels: { type: Array as PropType<string[]>, required: true },
-		tabActiveIndex: { type: Number, required: true },
-		panelType: { type: String, required: true },
+		tabActiveIndex: { type: Number as PropType<number>, required: true },
+		panelType: { type: String as PropType<keyof typeof components>, required: true },
 		clickAction: { type: Function as PropType<(index: number) => void>, required: false },
 		closeAction: { type: Function as PropType<(index: number) => void>, required: false },
 	},
-	data() {
-		return {
-			PopoverButtonIcon,
-			MenuDirection,
-		};
-	},
 });
 </script>
diff --git a/frontend/src/components/workspace/Workspace.vue b/frontend/src/components/workspace/Workspace.vue
index 0406b106e0..eec1eed2d0 100644
--- a/frontend/src/components/workspace/Workspace.vue
+++ b/frontend/src/components/workspace/Workspace.vue
@@ -67,10 +67,10 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import Panel from "@/components/workspace/Panel.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import DialogModal from "@/components/widgets/floating-menus/DialogModal.vue";
+import Panel from "@/components/workspace/Panel.vue";
 
 export default defineComponent({
 	inject: ["documents", "dialog", "editor"],
diff --git a/frontend/src/dispatcher/js-dispatcher.ts b/frontend/src/dispatcher/js-dispatcher.ts
index c5c0d567ff..9ec3ced1c7 100644
--- a/frontend/src/dispatcher/js-dispatcher.ts
+++ b/frontend/src/dispatcher/js-dispatcher.ts
@@ -1,4 +1,5 @@
 import { plainToInstance } from "class-transformer";
+
 import { JsMessageType, messageConstructors, JsMessage } from "@/dispatcher/js-messages";
 import type { RustEditorInstance, WasmInstance } from "@/state/wasm-loader";
 
@@ -10,14 +11,15 @@ type JsMessageCallbackMap = {
 	[message: string]: JsMessageCallback<any> | undefined;
 };
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createJsDispatcher() {
 	const subscriptions: JsMessageCallbackMap = {};
 
-	const subscribeJsMessage = <T extends JsMessage, Args extends unknown[]>(messageType: new (...args: Args) => T, callback: JsMessageCallback<T>) => {
+	const subscribeJsMessage = <T extends JsMessage, Args extends unknown[]>(messageType: new (...args: Args) => T, callback: JsMessageCallback<T>): void => {
 		subscriptions[messageType.name] = callback;
 	};
 
-	const handleJsMessage = (messageType: JsMessageType, messageData: Record<string, unknown>, wasm: WasmInstance, instance: RustEditorInstance) => {
+	const handleJsMessage = (messageType: JsMessageType, messageData: Record<string, unknown>, wasm: WasmInstance, instance: RustEditorInstance): void => {
 		const messageConstructor = messageConstructors[messageType];
 		if (!messageConstructor) {
 			// eslint-disable-next-line no-console
diff --git a/frontend/src/dispatcher/js-messages.ts b/frontend/src/dispatcher/js-messages.ts
index 8cd6a6a11d..95534db6b8 100644
--- a/frontend/src/dispatcher/js-messages.ts
+++ b/frontend/src/dispatcher/js-messages.ts
@@ -30,7 +30,7 @@ export abstract class DocumentDetails {
 
 	readonly id!: BigInt | string;
 
-	get displayName() {
+	get displayName(): string {
 		return `${this.name}${this.is_saved ? "" : "*"}`;
 	}
 }
@@ -44,25 +44,43 @@ export class UpdateOpenDocumentsList extends JsMessage {
 	readonly open_documents!: FrontendDocumentDetails[];
 }
 
-export type HintData = HintInfo[][];
-
 export class UpdateInputHints extends JsMessage {
 	@Type(() => HintInfo)
 	readonly hint_data!: HintData;
 }
 
-export type KeysGroup = string[];
+export type HintData = HintGroup[];
+
+export type HintGroup = HintInfo[];
 
 export class HintInfo {
-	readonly keys!: string[];
+	readonly key_groups!: KeysGroup[];
 
-	readonly mouse!: KeysGroup | null;
+	readonly mouse!: MouseMotion | null;
 
 	readonly label!: string;
 
 	readonly plus!: boolean;
 }
 
+export type KeysGroup = string[]; // Array of Rust enum `Key`
+
+export type MouseMotion = string;
+
+export type RGBA = {
+	r: number;
+	g: number;
+	b: number;
+	a: number;
+};
+
+export type HSVA = {
+	h: number;
+	s: number;
+	v: number;
+	a: number;
+};
+
 const To255Scale = Transform(({ value }) => value * 255);
 export class Color {
 	@To255Scale
@@ -76,11 +94,11 @@ export class Color {
 
 	readonly alpha!: number;
 
-	toRgba() {
+	toRgba(): RGBA {
 		return { r: this.red, g: this.green, b: this.blue, a: this.alpha };
 	}
 
-	toRgbaCSS() {
+	toRgbaCSS(): string {
 		const { r, g, b, a } = this.toRgba();
 		return `rgba(${r}, ${g}, ${b}, ${a})`;
 	}
@@ -296,17 +314,7 @@ export class LayerMetadata {
 	selected!: boolean;
 }
 
-export const LayerTypeOptions = {
-	Folder: "Folder",
-	Shape: "Shape",
-	Circle: "Circle",
-	Rect: "Rect",
-	Line: "Line",
-	PolyLine: "PolyLine",
-	Ellipse: "Ellipse",
-} as const;
-
-export type LayerType = typeof LayerTypeOptions[keyof typeof LayerTypeOptions];
+export type LayerType = "Folder" | "Shape" | "Circle" | "Rect" | "Line" | "PolyLine" | "Ellipse";
 
 export class IndexedDbDocumentDetails extends DocumentDetails {
 	@Transform(({ value }: { value: BigInt }) => value.toString())
diff --git a/frontend/src/lifetime/auto-save.ts b/frontend/src/lifetime/auto-save.ts
index 0097833b6b..34e7c4e812 100644
--- a/frontend/src/lifetime/auto-save.ts
+++ b/frontend/src/lifetime/auto-save.ts
@@ -10,23 +10,24 @@ const GRAPHITE_AUTO_SAVE_ORDER_KEY = "auto-save-documents-order";
 const databaseConnection: Promise<IDBDatabase> = new Promise((resolve) => {
 	const dbOpenRequest = indexedDB.open(GRAPHITE_INDEXED_DB_NAME, GRAPHITE_INDEXED_DB_VERSION);
 
-	dbOpenRequest.onupgradeneeded = () => {
+	dbOpenRequest.onupgradeneeded = (): void => {
 		const db = dbOpenRequest.result;
 		if (!db.objectStoreNames.contains(GRAPHITE_AUTO_SAVE_STORE)) {
 			db.createObjectStore(GRAPHITE_AUTO_SAVE_STORE, { keyPath: "details.id" });
 		}
 	};
 
-	dbOpenRequest.onerror = () => {
+	dbOpenRequest.onerror = (): void => {
 		// eslint-disable-next-line no-console
 		console.error("Graphite IndexedDb error:", dbOpenRequest.error);
 	};
 
-	dbOpenRequest.onsuccess = () => {
+	dbOpenRequest.onsuccess = (): void => {
 		resolve(dbOpenRequest.result);
 	};
 });
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createAutoSaveManager(editor: EditorState, documents: DocumentsState) {
 	const openAutoSavedDocuments = async (): Promise<void> => {
 		const db = await databaseConnection;
@@ -34,7 +35,7 @@ export function createAutoSaveManager(editor: EditorState, documents: DocumentsS
 		const request = transaction.objectStore(GRAPHITE_AUTO_SAVE_STORE).getAll();
 
 		return new Promise((resolve) => {
-			request.onsuccess = () => {
+			request.onsuccess = (): void => {
 				const previouslySavedDocuments: AutoSaveDocument[] = request.result;
 
 				const documentOrder: string[] = JSON.parse(window.localStorage.getItem(GRAPHITE_AUTO_SAVE_ORDER_KEY) || "[]");
@@ -48,7 +49,7 @@ export function createAutoSaveManager(editor: EditorState, documents: DocumentsS
 		});
 	};
 
-	const storeDocumentOrder = () => {
+	const storeDocumentOrder = (): void => {
 		// Make sure to store as string since JSON does not play nice with BigInt
 		const documentOrder = documents.state.documents.map((doc) => doc.id.toString());
 		window.localStorage.setItem(GRAPHITE_AUTO_SAVE_ORDER_KEY, JSON.stringify(documentOrder));
diff --git a/frontend/src/lifetime/errors.ts b/frontend/src/lifetime/errors.ts
index e136f35408..4d64696330 100644
--- a/frontend/src/lifetime/errors.ts
+++ b/frontend/src/lifetime/errors.ts
@@ -1,10 +1,10 @@
-import { DialogState } from "@/state/dialog";
-import { TextButtonWidget } from "@/components/widgets/widgets";
 import { DisplayError, DisplayPanic } from "@/dispatcher/js-messages";
+import { DialogState } from "@/state/dialog";
 import { EditorState } from "@/state/wasm-loader";
 import { stripIndents } from "@/utilities/strip-indents";
+import { TextButtonWidget } from "@/utilities/widgets";
 
-export function initErrorHandling(editor: EditorState, dialogState: DialogState) {
+export function initErrorHandling(editor: EditorState, dialogState: DialogState): void {
 	// Graphite error dialog
 	editor.dispatcher.subscribeJsMessage(DisplayError, (displayError) => {
 		const okButton: TextButtonWidget = {
@@ -49,7 +49,7 @@ export function initErrorHandling(editor: EditorState, dialogState: DialogState)
 	});
 }
 
-function githubUrl(panicDetails: string) {
+function githubUrl(panicDetails: string): string {
 	const url = new URL("https://github.com/GraphiteEditor/Graphite/issues/new");
 
 	const body = stripIndents`
diff --git a/frontend/src/lifetime/input.ts b/frontend/src/lifetime/input.ts
index 4beb12d22e..6befe70ab6 100644
--- a/frontend/src/lifetime/input.ts
+++ b/frontend/src/lifetime/input.ts
@@ -1,6 +1,6 @@
 import { DialogState } from "@/state/dialog";
-import { FullscreenState } from "@/state/fullscreen";
 import { DocumentsState } from "@/state/documents";
+import { FullscreenState } from "@/state/fullscreen";
 import { EditorState } from "@/state/wasm-loader";
 
 type EventName = keyof HTMLElementEventMap | keyof WindowEventHandlersEventMap;
@@ -9,20 +9,21 @@ interface EventListenerTarget {
 	removeEventListener: typeof window.removeEventListener;
 }
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createInputManager(editor: EditorState, container: HTMLElement, dialog: DialogState, document: DocumentsState, fullscreen: FullscreenState) {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const listeners: { target: EventListenerTarget; eventName: EventName; action: (event: any) => void; options?: boolean | AddEventListenerOptions }[] = [
-		{ target: window, eventName: "resize", action: () => onWindowResize(container) },
-		{ target: window, eventName: "beforeunload", action: (e) => onBeforeUnload(e) },
-		{ target: window.document, eventName: "contextmenu", action: (e) => e.preventDefault() },
-		{ target: window.document, eventName: "fullscreenchange", action: () => fullscreen.fullscreenModeChanged() },
-		{ target: window, eventName: "keyup", action: (e) => onKeyUp(e) },
-		{ target: window, eventName: "keydown", action: (e) => onKeyDown(e) },
-		{ target: window, eventName: "pointermove", action: (e) => onPointerMove(e) },
-		{ target: window, eventName: "pointerdown", action: (e) => onPointerDown(e) },
-		{ target: window, eventName: "pointerup", action: (e) => onPointerUp(e) },
-		{ target: window, eventName: "mousedown", action: (e) => onMouseDown(e) },
-		{ target: window, eventName: "wheel", action: (e) => onMouseScroll(e), options: { passive: false } },
+		{ target: window, eventName: "resize", action: (): void => onWindowResize(container) },
+		{ target: window, eventName: "beforeunload", action: (e: BeforeUnloadEvent): void => onBeforeUnload(e) },
+		{ target: window.document, eventName: "contextmenu", action: (e: MouseEvent): void => e.preventDefault() },
+		{ target: window.document, eventName: "fullscreenchange", action: (): void => fullscreen.fullscreenModeChanged() },
+		{ target: window, eventName: "keyup", action: (e: KeyboardEvent): void => onKeyUp(e) },
+		{ target: window, eventName: "keydown", action: (e: KeyboardEvent): void => onKeyDown(e) },
+		{ target: window, eventName: "pointermove", action: (e: PointerEvent): void => onPointerMove(e) },
+		{ target: window, eventName: "pointerdown", action: (e: PointerEvent): void => onPointerDown(e) },
+		{ target: window, eventName: "pointerup", action: (e: PointerEvent): void => onPointerUp(e) },
+		{ target: window, eventName: "mousedown", action: (e: MouseEvent): void => onMouseDown(e) },
+		{ target: window, eventName: "wheel", action: (e: WheelEvent): void => onMouseScroll(e), options: { passive: false } },
 	];
 
 	let viewportPointerInteractionOngoing = false;
@@ -60,7 +61,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 		return true;
 	};
 
-	const onKeyDown = (e: KeyboardEvent) => {
+	const onKeyDown = (e: KeyboardEvent): void => {
 		const key = getLatinKey(e);
 		if (!key) return;
 
@@ -82,7 +83,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 		}
 	};
 
-	const onKeyUp = (e: KeyboardEvent) => {
+	const onKeyUp = (e: KeyboardEvent): void => {
 		const key = getLatinKey(e);
 		if (!key) return;
 
@@ -95,14 +96,14 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 
 	// Pointer events
 
-	const onPointerMove = (e: PointerEvent) => {
+	const onPointerMove = (e: PointerEvent): void => {
 		if (!e.buttons) viewportPointerInteractionOngoing = false;
 
 		const modifiers = makeModifiersBitfield(e);
 		editor.instance.on_mouse_move(e.clientX, e.clientY, e.buttons, modifiers);
 	};
 
-	const onPointerDown = (e: PointerEvent) => {
+	const onPointerDown = (e: PointerEvent): void => {
 		const { target } = e;
 		const inCanvas = target instanceof Element && target.closest(".canvas");
 		const inDialog = target instanceof Element && target.closest(".dialog-modal .floating-menu-content");
@@ -121,7 +122,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 		}
 	};
 
-	const onPointerUp = (e: PointerEvent) => {
+	const onPointerUp = (e: PointerEvent): void => {
 		if (!e.buttons) viewportPointerInteractionOngoing = false;
 
 		const modifiers = makeModifiersBitfield(e);
@@ -130,13 +131,13 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 
 	// Mouse events
 
-	const onMouseDown = (e: MouseEvent) => {
+	const onMouseDown = (e: MouseEvent): void => {
 		// Block middle mouse button auto-scroll mode (the circlar widget that appears and allows quick scrolling by moving the cursor above or below it)
 		// This has to be in `mousedown`, not `pointerdown`, to avoid blocking Vue's middle click detection on HTML elements
 		if (e.button === 1) e.preventDefault();
 	};
 
-	const onMouseScroll = (e: WheelEvent) => {
+	const onMouseScroll = (e: WheelEvent): void => {
 		const { target } = e;
 		const inCanvas = target instanceof Element && target.closest(".canvas");
 
@@ -155,7 +156,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 
 	// Window events
 
-	const onWindowResize = (container: HTMLElement) => {
+	const onWindowResize = (container: HTMLElement): void => {
 		const viewports = Array.from(container.querySelectorAll(".canvas"));
 		const boundsOfViewports = viewports.map((canvas) => {
 			const bounds = canvas.getBoundingClientRect();
@@ -168,7 +169,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 		if (boundsOfViewports.length > 0) editor.instance.bounds_of_viewports(data);
 	};
 
-	const onBeforeUnload = (e: BeforeUnloadEvent) => {
+	const onBeforeUnload = (e: BeforeUnloadEvent): void => {
 		const activeDocument = document.state.documents[document.state.activeDocumentIndex];
 		if (!activeDocument.is_saved) editor.instance.trigger_auto_save(activeDocument.id);
 
@@ -187,11 +188,11 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 
 	// Event bindings
 
-	const addListeners = () => {
+	const addListeners = (): void => {
 		listeners.forEach(({ target, eventName, action, options }) => target.addEventListener(eventName, action, options));
 	};
 
-	const removeListeners = () => {
+	const removeListeners = (): void => {
 		listeners.forEach(({ target, eventName, action }) => target.removeEventListener(eventName, action));
 	};
 
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 154ea9bbdd..d83d00cc0f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -9,7 +9,7 @@ import { initWasm } from "@/state/wasm-loader";
 
 import App from "@/App.vue";
 
-(async () => {
+(async (): Promise<void> => {
 	// Initialize the WASM editor backend
 	await initWasm();
 
diff --git a/frontend/src/state/dialog.ts b/frontend/src/state/dialog.ts
index eabc98e2f8..34fbad031e 100644
--- a/frontend/src/state/dialog.ts
+++ b/frontend/src/state/dialog.ts
@@ -1,10 +1,11 @@
 import { reactive, readonly } from "vue";
 
-import { TextButtonWidget } from "@/components/widgets/widgets";
-import { EditorState } from "@/state/wasm-loader";
 import { DisplayAboutGraphiteDialog } from "@/dispatcher/js-messages";
+import { EditorState } from "@/state/wasm-loader";
 import { stripIndents } from "@/utilities/strip-indents";
+import { TextButtonWidget } from "@/utilities/widgets";
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDialogState(editor: EditorState) {
 	const state = reactive({
 		visible: false,
@@ -14,7 +15,7 @@ export function createDialogState(editor: EditorState) {
 		buttons: [] as TextButtonWidget[],
 	});
 
-	const createDialog = (icon: string, heading: string, details: string, buttons: TextButtonWidget[]) => {
+	const createDialog = (icon: string, heading: string, details: string, buttons: TextButtonWidget[]): void => {
 		state.visible = true;
 		state.icon = icon;
 		state.heading = heading;
@@ -22,11 +23,11 @@ export function createDialogState(editor: EditorState) {
 		state.buttons = buttons;
 	};
 
-	const dismissDialog = () => {
+	const dismissDialog = (): void => {
 		state.visible = false;
 	};
 
-	const submitDialog = () => {
+	const submitDialog = (): void => {
 		const firstEmphasizedButton = state.buttons.find((button) => button.props.emphasized && button.callback);
 		if (firstEmphasizedButton) {
 			// If statement satisfies TypeScript
@@ -38,7 +39,7 @@ export function createDialogState(editor: EditorState) {
 		return state.visible;
 	};
 
-	const comingSoon = (issueNumber?: number) => {
+	const comingSoon = (issueNumber?: number): void => {
 		const bugMessage = `— but you can help add it!\nSee issue #${issueNumber} on GitHub.`;
 		const details = `This feature is not implemented yet${issueNumber ? bugMessage : ""}`;
 
@@ -58,7 +59,7 @@ export function createDialogState(editor: EditorState) {
 		createDialog("Warning", "Coming soon", details, buttons);
 	};
 
-	const onAboutHandler = () => {
+	const onAboutHandler = (): void => {
 		const date = new Date(process.env.VUE_APP_COMMIT_DATE || "");
 		const dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 		const timeString = `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
@@ -80,22 +81,22 @@ export function createDialogState(editor: EditorState) {
 		const buttons: TextButtonWidget[] = [
 			{
 				kind: "TextButton",
-				callback: () => window.open("https://www.graphite.design", "_blank"),
+				callback: (): unknown => window.open("https://www.graphite.design", "_blank"),
 				props: { label: "Website", emphasized: false, minWidth: 0 },
 			},
 			{
 				kind: "TextButton",
-				callback: () => window.open("https://github.com/GraphiteEditor/Graphite/graphs/contributors", "_blank"),
+				callback: (): unknown => window.open("https://github.com/GraphiteEditor/Graphite/graphs/contributors", "_blank"),
 				props: { label: "Credits", emphasized: false, minWidth: 0 },
 			},
 			{
 				kind: "TextButton",
-				callback: () => window.open("https://raw.githubusercontent.com/GraphiteEditor/Graphite/master/LICENSE.txt", "_blank"),
+				callback: (): unknown => window.open("https://raw.githubusercontent.com/GraphiteEditor/Graphite/master/LICENSE.txt", "_blank"),
 				props: { label: "License", emphasized: false, minWidth: 0 },
 			},
 			{
 				kind: "TextButton",
-				callback: () => window.open("/third-party-licenses.txt", "_blank"),
+				callback: (): unknown => window.open("/third-party-licenses.txt", "_blank"),
 				props: { label: "Third-Party Licenses", emphasized: false, minWidth: 0 },
 			},
 		];
diff --git a/frontend/src/state/documents.ts b/frontend/src/state/documents.ts
index b48dd30811..a929db8f9c 100644
--- a/frontend/src/state/documents.ts
+++ b/frontend/src/state/documents.ts
@@ -1,9 +1,6 @@
 /* eslint-disable max-classes-per-file */
 import { reactive, readonly } from "vue";
 
-import { DialogState } from "@/state/dialog";
-import { download, upload } from "@/utilities/files";
-import { EditorState } from "@/state/wasm-loader";
 import {
 	DisplayConfirmationToCloseAllDocuments,
 	DisplayConfirmationToCloseDocument,
@@ -14,7 +11,11 @@ import {
 	SetActiveDocument,
 	UpdateOpenDocumentsList,
 } from "@/dispatcher/js-messages";
+import { DialogState } from "@/state/dialog";
+import { EditorState } from "@/state/wasm-loader";
+import { download, upload } from "@/utilities/files";
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDocumentsState(editor: EditorState, dialogState: DialogState) {
 	const state = reactive({
 		unsaved: false,
@@ -22,7 +23,7 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 		activeDocumentIndex: 0,
 	});
 
-	const closeDocumentWithConfirmation = async (documentId: BigInt) => {
+	const closeDocumentWithConfirmation = async (documentId: BigInt): Promise<void> => {
 		// Assume we receive a correct document_id
 		const targetDocument = state.documents.find((doc) => doc.id === documentId) as FrontendDocumentDetails;
 		const tabLabel = targetDocument.displayName;
@@ -31,7 +32,7 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 		dialogState.createDialog("File", "Save changes before closing?", tabLabel, [
 			{
 				kind: "TextButton",
-				callback: async () => {
+				callback: async (): Promise<void> => {
 					editor.instance.save_document();
 					dialogState.dismissDialog();
 				},
@@ -39,7 +40,7 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 			},
 			{
 				kind: "TextButton",
-				callback: async () => {
+				callback: async (): Promise<void> => {
 					editor.instance.close_document(targetDocument.id);
 					dialogState.dismissDialog();
 				},
@@ -47,7 +48,7 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 			},
 			{
 				kind: "TextButton",
-				callback: async () => {
+				callback: async (): Promise<void> => {
 					dialogState.dismissDialog();
 				},
 				props: { label: "Cancel", minWidth: 96 },
@@ -55,11 +56,11 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 		]);
 	};
 
-	const closeAllDocumentsWithConfirmation = () => {
+	const closeAllDocumentsWithConfirmation = (): void => {
 		dialogState.createDialog("Copy", "Close all documents?", "Unsaved work will be lost!", [
 			{
 				kind: "TextButton",
-				callback: () => {
+				callback: (): void => {
 					editor.instance.close_all_documents();
 					dialogState.dismissDialog();
 				},
@@ -67,7 +68,7 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 			},
 			{
 				kind: "TextButton",
-				callback: () => {
+				callback: (): void => {
 					dialogState.dismissDialog();
 				},
 				props: { label: "Cancel", minWidth: 96 },
diff --git a/frontend/src/state/fullscreen.ts b/frontend/src/state/fullscreen.ts
index 630bb02498..a56c0ea640 100644
--- a/frontend/src/state/fullscreen.ts
+++ b/frontend/src/state/fullscreen.ts
@@ -1,12 +1,13 @@
 import { reactive, readonly } from "vue";
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createFullscreenState() {
 	const state = reactive({
 		windowFullscreen: false,
 		keyboardLocked: false,
 	});
 
-	const fullscreenModeChanged = () => {
+	const fullscreenModeChanged = (): void => {
 		state.windowFullscreen = Boolean(document.fullscreenElement);
 		if (!state.windowFullscreen) state.keyboardLocked = false;
 	};
@@ -15,7 +16,7 @@ export function createFullscreenState() {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const keyboardLockApiSupported: Readonly<boolean> = "keyboard" in navigator && "lock" in (navigator as any).keyboard;
 
-	const enterFullscreen = async () => {
+	const enterFullscreen = async (): Promise<void> => {
 		await document.documentElement.requestFullscreen();
 
 		if (keyboardLockApiSupported) {
@@ -26,11 +27,11 @@ export function createFullscreenState() {
 	};
 
 	// eslint-disable-next-line class-methods-use-this
-	const exitFullscreen = async () => {
+	const exitFullscreen = async (): Promise<void> => {
 		await document.exitFullscreen();
 	};
 
-	const toggleFullscreen = async () => {
+	const toggleFullscreen = async (): Promise<void> => {
 		if (state.windowFullscreen) await exitFullscreen();
 		else await enterFullscreen();
 	};
diff --git a/frontend/src/state/wasm-loader.ts b/frontend/src/state/wasm-loader.ts
index f369141b08..dcad403e7b 100644
--- a/frontend/src/state/wasm-loader.ts
+++ b/frontend/src/state/wasm-loader.ts
@@ -7,7 +7,7 @@ export type WasmInstance = typeof import("@/../wasm/pkg");
 export type RustEditorInstance = InstanceType<WasmInstance["JsEditorHandle"]>;
 
 let wasmImport: WasmInstance | null = null;
-export async function initWasm() {
+export async function initWasm(): Promise<void> {
 	if (wasmImport !== null) return;
 
 	// Separating in two lines satisfies typescript when used below
@@ -32,7 +32,7 @@ function panicProxy<T extends object>(module: T): T {
 			// Special handling to wrap the return of a constructor in the proxy
 			const isClass = isFunction && /^\s*class\s+/.test(targetValue.toString());
 			if (isClass) {
-				return function (...args: unknown[]) {
+				return function (...args: unknown[]): unknown {
 					// eslint-disable-next-line new-cap
 					const result = new targetValue(...args);
 					return panicProxy(result);
@@ -40,7 +40,7 @@ function panicProxy<T extends object>(module: T): T {
 			}
 
 			// Replace the original function with a wrapper function that runs the original in a try-catch block
-			return function (...args: unknown[]) {
+			return function (...args: unknown[]): unknown {
 				let result;
 				try {
 					// @ts-expect-error TypeScript does not know what `this` is, since it should be able to be anything
@@ -57,16 +57,17 @@ function panicProxy<T extends object>(module: T): T {
 	return new Proxy<T>(module, proxyHandler);
 }
 
-function getWasmInstance() {
+function getWasmInstance(): WasmInstance {
 	if (wasmImport) return wasmImport;
 	throw new Error("Editor WASM backend was not initialized at application startup");
 }
 
-export function createEditorState() {
+type CreateEditorStateType = { dispatcher: ReturnType<typeof createJsDispatcher>; rawWasm: WasmInstance; instance: RustEditorInstance };
+export function createEditorState(): CreateEditorStateType {
 	const dispatcher = createJsDispatcher();
 	const rawWasm = getWasmInstance();
 
-	const rustCallback = (messageType: JsMessageType, data: Record<string, unknown>) => {
+	const rustCallback = (messageType: JsMessageType, data: Record<string, unknown>): void => {
 		dispatcher.handleJsMessage(messageType, data, rawWasm, instance);
 	};
 
diff --git a/frontend/src/utilities/color.ts b/frontend/src/utilities/color.ts
index 03434e749d..422f9d7808 100644
--- a/frontend/src/utilities/color.ts
+++ b/frontend/src/utilities/color.ts
@@ -1,44 +1,36 @@
-export interface RGB {
-	r: number;
-	g: number;
-	b: number;
-	a: number;
-}
+import { HSVA, RGBA } from "@/dispatcher/js-messages";
 
-export interface HSV {
-	h: number;
-	s: number;
-	v: number;
-	a: number;
-}
+export function hsvaToRgba(hsva: HSVA): RGBA {
+	const { h, s, v, a } = hsva;
+
+	const hue = h * 6;
+	const hueIntegerPart = Math.floor(hue);
+	const hueFractionalPart = hue - hueIntegerPart;
+	const hueIntegerMod6 = hueIntegerPart % 6;
 
-export function hsvToRgb(hsv: HSV): RGB {
-	let { h } = hsv;
-	const { s, v } = hsv;
-	h *= 6;
-	const i = Math.floor(h);
-	const f = h - i;
 	const p = v * (1 - s);
-	const q = v * (1 - f * s);
-	const t = v * (1 - (1 - f) * s);
-	const mod = i % 6;
-	const r = Math.round([v, q, p, p, t, v][mod]);
-	const g = Math.round([t, v, v, q, p, p][mod]);
-	const b = Math.round([p, p, t, v, v, q][mod]);
-	return { r, g, b, a: hsv.a };
+	const q = v * (1 - hueFractionalPart * s);
+	const t = v * (1 - (1 - hueFractionalPart) * s);
+
+	const r = Math.round([v, q, p, p, t, v][hueIntegerMod6]);
+	const g = Math.round([t, v, v, q, p, p][hueIntegerMod6]);
+	const b = Math.round([p, p, t, v, v, q][hueIntegerMod6]);
+
+	return { r, g, b, a };
 }
 
-export function rgbToHsv(rgb: RGB) {
-	const { r, g, b } = rgb;
+export function rgbaToHsva(rgba: RGBA): HSVA {
+	const { r, g, b, a } = rgba;
+
 	const max = Math.max(r, g, b);
 	const min = Math.min(r, g, b);
+
 	const d = max - min;
 	const s = max === 0 ? 0 : d / max;
 	const v = max;
+
 	let h = 0;
-	if (max === min) {
-		h = 0;
-	} else {
+	if (max !== min) {
 		switch (max) {
 			case r:
 				h = (g - b) / d + (g < b ? 6 : 0);
@@ -53,27 +45,14 @@ export function rgbToHsv(rgb: RGB) {
 		}
 		h /= 6;
 	}
-	return { h, s, v, a: rgb.a };
+
+	return { h, s, v, a };
 }
 
-export function rgbToDecimalRgb(rgb: RGB) {
-	const r = rgb.r / 255;
-	const g = rgb.g / 255;
-	const b = rgb.b / 255;
-	return { r, g, b, a: rgb.a };
-}
+export function rgbaToDecimalRgba(rgba: RGBA): RGBA {
+	const r = rgba.r / 255;
+	const g = rgba.g / 255;
+	const b = rgba.b / 255;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isRGB(data: any): data is RGB {
-	if (typeof data !== "object" || data === null) return false;
-	return (
-		typeof data.r === "number" &&
-		!Number.isNaN(data.r) &&
-		typeof data.g === "number" &&
-		!Number.isNaN(data.g) &&
-		typeof data.b === "number" &&
-		!Number.isNaN(data.b) &&
-		typeof data.a === "number" &&
-		!Number.isNaN(data.a)
-	);
+	return { r, g, b, a: rgba.a };
 }
diff --git a/frontend/src/utilities/files.ts b/frontend/src/utilities/files.ts
index 0d5eb471ec..cd0f2df93b 100644
--- a/frontend/src/utilities/files.ts
+++ b/frontend/src/utilities/files.ts
@@ -1,4 +1,4 @@
-export function download(filename: string, fileData: string) {
+export function download(filename: string, fileData: string): void {
 	const type = filename.endsWith(".svg") ? "image/svg+xml;charset=utf-8" : "text/plain;charset=utf-8";
 	const blob = new Blob([fileData], { type });
 	const url = URL.createObjectURL(blob);
@@ -11,7 +11,7 @@ export function download(filename: string, fileData: string) {
 	element.click();
 }
 
-export async function upload(acceptedEextensions: string) {
+export async function upload(acceptedEextensions: string): Promise<{ filename: string; content: string }> {
 	return new Promise<{ filename: string; content: string }>((resolve, _) => {
 		const element = document.createElement("input");
 		element.type = "file";
diff --git a/frontend/src/utilities/math.ts b/frontend/src/utilities/math.ts
index 5c8eea2681..b157970334 100644
--- a/frontend/src/utilities/math.ts
+++ b/frontend/src/utilities/math.ts
@@ -1,3 +1,3 @@
-export function clamp(value: number, min = 0, max = 1) {
+export function clamp(value: number, min = 0, max = 1): number {
 	return Math.max(min, Math.min(value, max));
 }
diff --git a/frontend/src/utilities/strip-indents.ts b/frontend/src/utilities/strip-indents.ts
index fff328b21e..fa911496a8 100644
--- a/frontend/src/utilities/strip-indents.ts
+++ b/frontend/src/utilities/strip-indents.ts
@@ -1,4 +1,4 @@
-export function stripIndents(stringPieces: TemplateStringsArray, ...substitutions: unknown[]) {
+export function stripIndents(stringPieces: TemplateStringsArray, ...substitutions: unknown[]): string {
 	const interleavedSubstitutions = stringPieces.flatMap((stringPiece, index) => [stringPiece, substitutions[index] !== undefined ? substitutions[index] : ""]);
 	const stringLines = interleavedSubstitutions.join("").split("\n");
 
diff --git a/frontend/src/components/widgets/widgets.ts b/frontend/src/utilities/widgets.ts
similarity index 89%
rename from frontend/src/components/widgets/widgets.ts
rename to frontend/src/utilities/widgets.ts
index 0608ff9f7b..0ebe61784c 100644
--- a/frontend/src/components/widgets/widgets.ts
+++ b/frontend/src/utilities/widgets.ts
@@ -74,6 +74,9 @@ export interface NumberInputProps {
 }
 
 // Separator
+export type SeparatorDirection = "Horizontal" | "Vertical";
+export type SeparatorType = "Related" | "Unrelated" | "Section" | "List";
+
 export interface SeparatorWidget {
 	kind: "Separator";
 	props: SeparatorProps;
@@ -83,15 +86,3 @@ export interface SeparatorProps {
 	direction?: SeparatorDirection;
 	type?: SeparatorType;
 }
-
-export enum SeparatorDirection {
-	"Horizontal" = "Horizontal",
-	"Vertical" = "Vertical",
-}
-
-export enum SeparatorType {
-	"Related" = "Related",
-	"Unrelated" = "Unrelated",
-	"Section" = "Section",
-	"List" = "List",
-}
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index d7f5fb2e7a..a3112eff47 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires, no-console */
-const path = require("path");
 const { execSync, spawnSync } = require("child_process");
+const path = require("path");
 
 const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 const LicenseCheckerWebpackPlugin = require("license-checker-webpack-plugin");