Prefix all type imports with the 'type' keyword where appropriate

frontend/.eslintrc.js

@@ -74,6 +74,7 @@ module.exports = {
 		"@typescript-eslint/no-use-before-define": "off",
 		"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", ignoreRestSiblings: true }],
 		"@typescript-eslint/explicit-function-return-type": ["error"],
+		"@typescript-eslint/consistent-type-imports": "error",
 
 		// Import plugin config (used to intelligently validate module import statements)
 		"import/prefer-default-export": "off",

frontend/src/App.vue

@@ -224,14 +224,14 @@ import { createInputManager } from "@/io-managers/input";
 import { createLocalizationManager } from "@/io-managers/localization";
 import { createPanicManager } from "@/io-managers/panic";
 import { createPersistenceManager } from "@/io-managers/persistence";
-import { createDialogState, DialogState } from "@/state-providers/dialog";
+import { createDialogState, type DialogState } from "@/state-providers/dialog";
-import { createFontsState, FontsState } from "@/state-providers/fonts";
+import { createFontsState, type FontsState } from "@/state-providers/fonts";
-import { createFullscreenState, FullscreenState } from "@/state-providers/fullscreen";
+import { createFullscreenState, type FullscreenState } from "@/state-providers/fullscreen";
-import { createPanelsState, PanelsState } from "@/state-providers/panels";
+import { createPanelsState, type PanelsState } from "@/state-providers/panels";
-import { createPortfolioState, PortfolioState } from "@/state-providers/portfolio";
+import { createPortfolioState, type PortfolioState } from "@/state-providers/portfolio";
-import { createWorkspaceState, WorkspaceState } from "@/state-providers/workspace";
+import { createWorkspaceState, type WorkspaceState } from "@/state-providers/workspace";
 import { operatingSystem } from "@/utility-functions/platform";
-import { createEditor, Editor } from "@/wasm-communication/editor";
+import { createEditor, type Editor } from "@/wasm-communication/editor";
 
 import MainWindow from "@/components/window/MainWindow.vue";
 

frontend/src/components/floating-menus/ColorPicker.vue

@@ -116,11 +116,11 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import { hsvaToRgba, rgbaToHsva } from "@/utility-functions/color";
 import { clamp } from "@/utility-functions/math";
-import { RGBA } from "@/wasm-communication/messages";
+import { type RGBA } from "@/wasm-communication/messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -298,8 +298,8 @@ export default defineComponent({
 		},
 	},
 	components: {
-		LayoutRow,
 		LayoutCol,
+		LayoutRow,
 	},
 });
 </script>

frontend/src/components/floating-menus/DialogModal.vue

@@ -77,14 +77,6 @@ import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
 
 export default defineComponent({
 	inject: ["dialog"],
-	components: {
-		LayoutRow,
-		LayoutCol,
-		FloatingMenu,
-		IconLabel,
-		TextButton,
-		WidgetLayout,
-	},
 	methods: {
 		dismiss() {
 			this.dialog.dismissDialog();
@@ -96,5 +88,13 @@ export default defineComponent({
 		const emphasizedOrFirstButton = (element?.querySelector("[data-emphasized]") as HTMLButtonElement | null) || element?.querySelector("[data-text-button]");
 		emphasizedOrFirstButton?.focus();
 	},
+	components: {
+		FloatingMenu,
+		IconLabel,
+		LayoutCol,
+		LayoutRow,
+		TextButton,
+		WidgetLayout,
+	},
 });
 </script>

frontend/src/components/floating-menus/FloatingMenu.vue

@@ -175,7 +175,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, nextTick, PropType } from "vue";
+import { defineComponent, nextTick, type PropType } from "vue";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 

frontend/src/components/floating-menus/MenuList.vue

@@ -158,11 +158,11 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import type { MenuListEntry } from "@/wasm-communication/messages";
+import { type MenuListEntry } from "@/wasm-communication/messages";
 
-import FloatingMenu, { MenuDirection } from "@/components/floating-menus/FloatingMenu.vue";
+import FloatingMenu, { type MenuDirection } from "@/components/floating-menus/FloatingMenu.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@@ -340,11 +340,11 @@ const MenuList = defineComponent({
 	},
 	components: {
 		FloatingMenu,
-		Separator,
 		IconLabel,
-		UserInputLabel,
-		LayoutRow,
 		LayoutCol,
+		LayoutRow,
+		Separator,
+		UserInputLabel,
 	},
 });
 export default MenuList;

frontend/src/components/layout/LayoutCol.vue

@@ -19,7 +19,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 export default defineComponent({
 	props: {

frontend/src/components/layout/LayoutRow.vue

@@ -19,7 +19,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 export default defineComponent({
 	props: {

frontend/src/components/panels/Document.vue

@@ -225,15 +225,15 @@ import { defineComponent, nextTick } from "vue";
 
 import { textInputCleanup } from "@/utility-functions/keyboard-entry";
 import {
-	UpdateDocumentModeLayout,
-	UpdateToolOptionsLayout,
-	UpdateToolShelfLayout,
-	UpdateWorkingColorsLayout,
 	defaultWidgetLayout,
-	UpdateDocumentBarLayout,
+	type DisplayEditableTextbox,
-	DisplayEditableTextbox,
+	type MouseCursorIcon,
-	MouseCursorIcon,
+	type UpdateDocumentBarLayout,
-	XY,
+	type UpdateDocumentModeLayout,
+	type UpdateToolOptionsLayout,
+	type UpdateToolShelfLayout,
+	type UpdateWorkingColorsLayout,
+	type XY,
 } from "@/wasm-communication/messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
@@ -437,10 +437,10 @@ export default defineComponent({
 		};
 	},
 	components: {
-		LayoutRow,
-		LayoutCol,
-		PersistentScrollbar,
 		CanvasRuler,
+		LayoutCol,
+		LayoutRow,
+		PersistentScrollbar,
 		WidgetLayout,
 	},
 });

frontend/src/components/panels/LayerTree.vue

@@ -268,7 +268,7 @@
 import { defineComponent, nextTick } from "vue";
 
 import { platformIsMac } from "@/utility-functions/platform";
-import { defaultWidgetLayout, UpdateDocumentLayerTreeStructure, UpdateDocumentLayerDetails, UpdateLayerTreeOptionsLayout, LayerPanelEntry } from "@/wasm-communication/messages";
+import { type LayerPanelEntry, defaultWidgetLayout, UpdateDocumentLayerDetails, UpdateDocumentLayerTreeStructure, UpdateLayerTreeOptionsLayout } from "@/wasm-communication/messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -507,11 +507,11 @@ export default defineComponent({
 		});
 	},
 	components: {
-		LayoutRow,
-		LayoutCol,
-		WidgetLayout,
 		IconButton,
 		IconLabel,
+		LayoutCol,
+		LayoutRow,
+		WidgetLayout,
 	},
 });
 </script>

frontend/src/components/panels/NodeGraph.vue

@@ -476,9 +476,9 @@ export default defineComponent({
 		this.createWirePath(outputPort2, inputPort2, true, false);
 	},
 	components: {
-		LayoutRow,
-		LayoutCol,
 		IconLabel,
+		LayoutCol,
+		LayoutRow,
 		TextLabel,
 	},
 });

frontend/src/components/panels/Properties.vue

@@ -46,7 +46,6 @@ import { defaultWidgetLayout, UpdatePropertyPanelOptionsLayout, UpdatePropertyPa
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
-
 import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
 
 export default defineComponent({
@@ -67,9 +66,9 @@ export default defineComponent({
 		});
 	},
 	components: {
-		WidgetLayout,
-		LayoutRow,
 		LayoutCol,
+		LayoutRow,
+		WidgetLayout,
 	},
 });
 </script>

frontend/src/components/widgets/WidgetLayout.vue

@@ -16,9 +16,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { isWidgetColumn, isWidgetRow, isWidgetSection, LayoutGroup, WidgetLayout } from "@/wasm-communication/messages";
+import { isWidgetColumn, isWidgetRow, isWidgetSection, type LayoutGroup, type WidgetLayout } from "@/wasm-communication/messages";
 
 import WidgetSection from "@/components/widgets/groups/WidgetSection.vue";
 import WidgetRow from "@/components/widgets/WidgetRow.vue";

frontend/src/components/widgets/WidgetRow.vue

@@ -71,9 +71,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { WidgetColumn, WidgetRow, isWidgetColumn, isWidgetRow } from "@/wasm-communication/messages";
+import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@/wasm-communication/messages";
 
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";

frontend/src/components/widgets/buttons/IconButton.vue

@@ -61,9 +61,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName, IconSize } from "@/utility-functions/icons";
+import { type IconName, type IconSize } from "@/utility-functions/icons";
 
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 

frontend/src/components/widgets/buttons/PopoverButton.vue

@@ -47,20 +47,15 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName } from "@/utility-functions/icons";
+import { type IconName } from "@/utility-functions/icons";
 
 import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 
 export default defineComponent({
-	components: {
-		FloatingMenu,
-		IconButton,
-		LayoutRow,
-	},
 	props: {
 		icon: { type: String as PropType<IconName>, default: "DropdownArrow" },
 
@@ -79,5 +74,10 @@ export default defineComponent({
 			this.action?.();
 		},
 	},
+	components: {
+		FloatingMenu,
+		IconButton,
+		LayoutRow,
+	},
 });
 </script>

frontend/src/components/widgets/buttons/TextButton.vue

@@ -63,9 +63,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName } from "@/utility-functions/icons";
+import { type IconName } from "@/utility-functions/icons";
 
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";

frontend/src/components/widgets/groups/WidgetSection.vue

@@ -70,9 +70,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { isWidgetRow, isWidgetSection, LayoutGroup, WidgetSection as WidgetSectionFromJsMessages } from "@/wasm-communication/messages";
+import { isWidgetRow, isWidgetSection, type LayoutGroup, type WidgetSection as WidgetSectionFromJsMessages } from "@/wasm-communication/messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -106,8 +106,8 @@ const WidgetSection = defineComponent({
 	components: {
 		LayoutCol,
 		LayoutRow,
-		TextLabel,
 		Separator,
+		TextLabel,
 		WidgetRow,
 	},
 });

frontend/src/components/widgets/inputs/CheckboxInput.vue

@@ -57,9 +57,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName } from "@/utility-functions/icons";
+import { type IconName } from "@/utility-functions/icons";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";

frontend/src/components/widgets/inputs/ColorInput.vue

@@ -68,9 +68,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { RGBA } from "@/wasm-communication/messages";
+import { type RGBA } from "@/wasm-communication/messages";
 
 import ColorPicker from "@/components/floating-menus/ColorPicker.vue";
 import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
@@ -159,12 +159,12 @@ export default defineComponent({
 		},
 	},
 	components: {
-		TextInput,
 		ColorPicker,
-		LayoutRow,
 		FloatingMenu,
-		Separator,
+		LayoutRow,
 		OptionalInput,
+		Separator,
+		TextInput,
 	},
 });
 </script>

frontend/src/components/widgets/inputs/DropdownInput.vue

@@ -97,9 +97,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType, toRaw } from "vue";
+import { defineComponent, type PropType, toRaw } from "vue";
 
-import { MenuListEntry } from "@/wasm-communication/messages";
+import { type MenuListEntry } from "@/wasm-communication/messages";
 
 import MenuList from "@/components/floating-menus/MenuList.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -161,8 +161,8 @@ export default defineComponent({
 	},
 	components: {
 		IconLabel,
-		MenuList,
 		LayoutRow,
+		MenuList,
 	},
 });
 </script>

frontend/src/components/widgets/inputs/FieldInput.vue

@@ -115,7 +115,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import { platformIsMac } from "@/utility-functions/platform";
 

frontend/src/components/widgets/inputs/FontInput.vue

@@ -69,13 +69,13 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, nextTick, PropType } from "vue";
+import { defineComponent, nextTick, type PropType } from "vue";
 
-import { MenuListEntry } from "@/wasm-communication/messages";
+import { type MenuListEntry } from "@/wasm-communication/messages";
 
-import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
+import type FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
 import MenuList from "@/components/floating-menus/MenuList.vue";
-import LayoutCol from "@/components/layout/LayoutCol.vue";
+import type LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
@@ -175,8 +175,8 @@ export default defineComponent({
 		},
 	},
 	components: {
-		LayoutRow,
 		IconLabel,
+		LayoutRow,
 		MenuList,
 	},
 });

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -68,7 +68,7 @@
 import { defineComponent } from "vue";
 
 import { platformIsMac } from "@/utility-functions/platform";
-import { MenuBarEntry, UpdateMenuBarLayout, MenuListEntry, KeyRaw, KeysGroup } from "@/wasm-communication/messages";
+import { type KeyRaw, type KeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@/wasm-communication/messages";
 
 import MenuList from "@/components/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";

frontend/src/components/widgets/inputs/NumberInput.vue

@@ -85,9 +85,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IncrementBehavior } from "@/wasm-communication/messages";
+import { type IncrementBehavior } from "@/wasm-communication/messages";
 
 import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
 

frontend/src/components/widgets/inputs/OptionalInput.vue

@@ -35,9 +35,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName } from "@/utility-functions/icons";
+import { type IconName } from "@/utility-functions/icons";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";

frontend/src/components/widgets/inputs/RadioInput.vue

@@ -62,9 +62,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { RadioEntries, RadioEntryData } from "@/wasm-communication/messages";
+import { type RadioEntries, type RadioEntryData } from "@/wasm-communication/messages";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@@ -86,8 +86,8 @@ export default defineComponent({
 	},
 	components: {
 		IconLabel,
-		TextLabel,
 		LayoutRow,
+		TextLabel,
 	},
 });
 </script>

frontend/src/components/widgets/inputs/SwatchPairInput.vue

@@ -66,10 +66,10 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import { rgbaToDecimalRgba } from "@/utility-functions/color";
-import { type RGBA, Color } from "@/wasm-communication/messages";
+import { type RGBA, type Color } from "@/wasm-communication/messages";
 
 import ColorPicker from "@/components/floating-menus/ColorPicker.vue";
 import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
@@ -78,12 +78,6 @@ import LayoutRow from "@/components/layout/LayoutRow.vue";
 
 export default defineComponent({
 	inject: ["editor"],
-	components: {
-		FloatingMenu,
-		ColorPicker,
-		LayoutRow,
-		LayoutCol,
-	},
 	props: {
 		primary: { type: Object as PropType<Color>, required: true },
 		secondary: { type: Object as PropType<Color>, required: true },
@@ -112,5 +106,11 @@ export default defineComponent({
 			this.editor.instance.updateSecondaryColor(newColor.r, newColor.g, newColor.b, newColor.a);
 		},
 	},
+	components: {
+		ColorPicker,
+		FloatingMenu,
+		LayoutCol,
+		LayoutRow,
+	},
 });
 </script>

frontend/src/components/widgets/inputs/TextAreaInput.vue

@@ -17,7 +17,7 @@
 <style lang="scss"></style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
 

frontend/src/components/widgets/inputs/TextInput.vue

@@ -21,7 +21,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
 

frontend/src/components/widgets/labels/IconLabel.vue

@@ -33,9 +33,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName, IconStyle, icons, iconComponents } from "@/utility-functions/icons";
+import { type IconName, type IconStyle, ICONS, ICON_COMPONENTS } from "@/utility-functions/icons";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 
@@ -46,7 +46,7 @@ export default defineComponent({
 	},
 	computed: {
 		iconSizeClass(): string {
-			return `size-${icons[this.icon].size}`;
+			return `size-${ICONS[this.icon].size}`;
 		},
 		iconStyleClass(): string {
 			if (!this.iconStyle || this.iconStyle === "Normal") return "";
@@ -55,7 +55,7 @@ export default defineComponent({
 	},
 	components: {
 		LayoutRow,
-		...iconComponents,
+		...ICON_COMPONENTS,
 	},
 });
 </script>

frontend/src/components/widgets/labels/Separator.vue

@@ -73,9 +73,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { SeparatorDirection, SeparatorType } from "@/wasm-communication/messages";
+import { type SeparatorDirection, type SeparatorType } from "@/wasm-communication/messages";
 
 export default defineComponent({
 	props: {

frontend/src/components/widgets/labels/TextLabel.vue

@@ -30,7 +30,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 export default defineComponent({
 	props: {

frontend/src/components/widgets/labels/UserInputLabel.vue

@@ -130,11 +130,11 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { IconName } from "@/utility-functions/icons";
+import { type IconName } from "@/utility-functions/icons";
 import { platformIsMac } from "@/utility-functions/platform";
-import { KeyRaw, KeysGroup, Key, MouseMotion } from "@/wasm-communication/messages";
+import { type KeyRaw, type KeysGroup, type Key, type MouseMotion } from "@/wasm-communication/messages";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";

frontend/src/components/widgets/metrics/CanvasRuler.vue

@@ -43,7 +43,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 const RULER_THICKNESS = 16;
 const MAJOR_MARK_THICKNESS = 16;

frontend/src/components/widgets/metrics/PersistentScrollbar.vue

@@ -107,7 +107,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 export type ScrollbarDirection = "Horizontal" | "Vertical";
 

frontend/src/components/window/MainWindow.vue

@@ -27,17 +27,17 @@ import Workspace from "@/components/window/workspace/Workspace.vue";
 export type ApplicationPlatform = "Windows" | "Mac" | "Linux" | "Web";
 
 export default defineComponent({
-	components: {
-		LayoutCol,
-		TitleBar,
-		Workspace,
-		StatusBar,
-	},
 	data() {
 		return {
 			platform: "Web" as ApplicationPlatform,
 			maximized: true,
 		};
 	},
+	components: {
+		LayoutCol,
+		StatusBar,
+		TitleBar,
+		Workspace,
+	},
 });
 </script>

frontend/src/components/window/status-bar/StatusBar.vue

@@ -49,7 +49,7 @@
 import { defineComponent } from "vue";
 
 import { platformIsMac } from "@/utility-functions/platform";
-import { HintData, HintInfo, KeysGroup, UpdateInputHints } from "@/wasm-communication/messages";
+import { type HintData, type HintInfo, type KeysGroup, UpdateInputHints } from "@/wasm-communication/messages";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import Separator from "@/components/widgets/labels/Separator.vue";
@@ -74,9 +74,9 @@ export default defineComponent({
 		});
 	},
 	components: {
-		UserInputLabel,
-		Separator,
 		LayoutRow,
+		Separator,
+		UserInputLabel,
 	},
 });
 </script>

frontend/src/components/window/title-bar/TitleBar.vue

@@ -38,7 +38,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
@@ -64,12 +64,12 @@ export default defineComponent({
 		},
 	},
 	components: {
+		LayoutRow,
 		MenuBarInput,
-		WindowTitle,
-		WindowButtonsWindows,
 		WindowButtonsMac,
 		WindowButtonsWeb,
-		LayoutRow,
+		WindowButtonsWindows,
+		WindowTitle,
 	},
 });
 </script>

frontend/src/components/window/title-bar/WindowButtonsMac.vue

@@ -39,7 +39,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 

frontend/src/components/window/title-bar/WindowButtonsWeb.vue

@@ -52,8 +52,8 @@ export default defineComponent({
 	},
 	components: {
 		IconLabel,
-		TextLabel,
 		LayoutRow,
+		TextLabel,
 	},
 });
 </script>

frontend/src/components/window/title-bar/WindowButtonsWindows.vue

@@ -38,18 +38,18 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
+	props: {
+		maximized: { type: Boolean as PropType<boolean>, default: false },
+	},
 	components: {
 		IconLabel,
 		LayoutRow,
 	},
-	props: {
-		maximized: { type: Boolean as PropType<boolean>, default: false },
-	},
 });
 </script>

frontend/src/components/window/title-bar/WindowTitle.vue

@@ -14,7 +14,7 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 

frontend/src/components/window/workspace/Panel.vue

@@ -209,11 +209,11 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import { platformIsMac } from "@/utility-functions/platform";
 
-import { KeysGroup, Key } from "@/wasm-communication/messages";
+import { type KeysGroup, type Key } from "@/wasm-communication/messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -228,7 +228,7 @@ import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
 
-const panelComponents = {
+const PANEL_COMPONENTS = {
 	Document,
 	IconButton,
 	LayerTree,
@@ -237,7 +237,7 @@ const panelComponents = {
 	Properties,
 	TextButton,
 };
-type PanelTypes = keyof typeof panelComponents;
+type PanelTypes = keyof typeof PANEL_COMPONENTS;
 
 export default defineComponent({
 	inject: ["editor"],
@@ -269,12 +269,12 @@ export default defineComponent({
 		},
 	},
 	components: {
+		IconLabel,
 		LayoutCol,
 		LayoutRow,
-		IconLabel,
 		TextLabel,
 		UserInputLabel,
-		...panelComponents,
+		...PANEL_COMPONENTS,
 	},
 });
 </script>

frontend/src/components/window/workspace/Workspace.vue

@@ -75,12 +75,6 @@ const MIN_PANEL_SIZE = 100;
 
 export default defineComponent({
 	inject: ["workspace", "portfolio", "dialog", "editor"],
-	components: {
-		LayoutRow,
-		LayoutCol,
-		Panel,
-		DialogModal,
-	},
 	computed: {
 		activeDocumentIndex() {
 			return this.portfolio.state.activeDocumentIndex;
@@ -142,5 +136,11 @@ export default defineComponent({
 			newActiveTab.scrollIntoView();
 		},
 	},
+	components: {
+		DialogModal,
+		LayoutCol,
+		LayoutRow,
+		Panel,
+	},
 });
 </script>

frontend/src/io-managers/blob.ts

@@ -1,4 +1,4 @@
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
 import { UpdateImageData } from "@/wasm-communication/messages";
 
 export function createBlobManager(editor: Editor): void {

frontend/src/io-managers/clipboard.ts

@@ -1,4 +1,4 @@
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
 import { TriggerTextCopy } from "@/wasm-communication/messages";
 
 export function createClipboardManager(editor: Editor): void {

frontend/src/io-managers/hyperlinks.ts

@@ -1,4 +1,4 @@
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
 import { TriggerVisitLink } from "@/wasm-communication/messages";
 
 export function createHyperlinkManager(editor: Editor): void {

frontend/src/io-managers/input.ts

@@ -1,10 +1,10 @@
-import { DialogState } from "@/state-providers/dialog";
+import { type DialogState } from "@/state-providers/dialog";
-import { FullscreenState } from "@/state-providers/fullscreen";
+import { type FullscreenState } from "@/state-providers/fullscreen";
-import { PortfolioState } from "@/state-providers/portfolio";
+import { type PortfolioState } from "@/state-providers/portfolio";
 import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode } from "@/utility-functions/keyboard-entry";
 import { platformIsMac } from "@/utility-functions/platform";
 import { stripIndents } from "@/utility-functions/strip-indents";
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
 import { TriggerPaste } from "@/wasm-communication/messages";
 
 type EventName = keyof HTMLElementEventMap | keyof WindowEventHandlersEventMap | "modifyinputfield";

frontend/src/io-managers/localization.ts

@@ -1,4 +1,4 @@
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
 import { TriggerAboutGraphiteLocalizedCommitDate } from "@/wasm-communication/messages";
 
 export function createLocalizationManager(editor: Editor): void {

frontend/src/io-managers/panic.ts

@@ -1,10 +1,10 @@
-import { TextButtonWidget } from "@/components/widgets/buttons/TextButton";
+import { type TextButtonWidget } from "@/components/widgets/buttons/TextButton";
-import { DialogState } from "@/state-providers/dialog";
+import { type DialogState } from "@/state-providers/dialog";
-import { IconName } from "@/utility-functions/icons";
+import { type IconName } from "@/utility-functions/icons";
 import { browserVersion, operatingSystem } from "@/utility-functions/platform";
 import { stripIndents } from "@/utility-functions/strip-indents";
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
-import { DisplayDialogPanic, Widget, WidgetLayout } from "@/wasm-communication/messages";
+import { type WidgetLayout, Widget, DisplayDialogPanic } from "@/wasm-communication/messages";
 
 export function createPanicManager(editor: Editor, dialogState: DialogState): void {
 	// Code panic dialog and console error

frontend/src/io-managers/persistence.ts

@@ -1,6 +1,6 @@
-import { PortfolioState } from "@/state-providers/portfolio";
+import { type PortfolioState } from "@/state-providers/portfolio";
 import { stripIndents } from "@/utility-functions/strip-indents";
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
 import { TriggerIndexedDbWriteDocument, TriggerIndexedDbRemoveDocument } from "@/wasm-communication/messages";
 
 const GRAPHITE_INDEXED_DB_VERSION = 2;

frontend/src/state-providers/dialog.ts

@@ -1,9 +1,9 @@
 import { reactive, readonly } from "vue";
 
-import { TextButtonWidget } from "@/components/widgets/buttons/TextButton";
+import { type TextButtonWidget } from "@/components/widgets/buttons/TextButton";
-import { IconName } from "@/utility-functions/icons";
+import { type IconName } from "@/utility-functions/icons";
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
-import { defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails, WidgetLayout } from "@/wasm-communication/messages";
+import { defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails, type WidgetLayout } from "@/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDialogState(editor: Editor) {

frontend/src/state-providers/fonts.ts

@@ -1,6 +1,6 @@
 import { reactive } from "vue";
 
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
 import { TriggerFontLoad } from "@/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type

frontend/src/state-providers/fullscreen.ts

@@ -1,6 +1,6 @@
 import { reactive, readonly } from "vue";
 
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createFullscreenState(_: Editor) {

frontend/src/state-providers/panels.ts

@@ -1,6 +1,6 @@
 import { nextTick, reactive, readonly } from "vue";
 
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
 import {
 	DisplayEditableTextbox,
 	DisplayRemoveEditableTextbox,

frontend/src/state-providers/portfolio.ts

@@ -2,8 +2,16 @@
 import { reactive, readonly } from "vue";
 
 import { download, downloadBlob, upload } from "@/utility-functions/files";
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
-import { TriggerFileDownload, TriggerRasterDownload, FrontendDocumentDetails, TriggerOpenDocument, TriggerImport, UpdateActiveDocument, UpdateOpenDocumentsList } from "@/wasm-communication/messages";
+import {
+	type FrontendDocumentDetails,
+	TriggerFileDownload,
+	TriggerImport,
+	TriggerOpenDocument,
+	TriggerRasterDownload,
+	UpdateActiveDocument,
+	UpdateOpenDocumentsList,
+} from "@/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createPortfolioState(editor: Editor) {

frontend/src/state-providers/workspace.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-classes-per-file */
 import { reactive, readonly } from "vue";
 
-import { Editor } from "@/wasm-communication/editor";
+import { type Editor } from "@/wasm-communication/editor";
 import { UpdateNodeGraphVisibility } from "@/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type

frontend/src/utility-functions/color.ts

@@ -1,4 +1,4 @@
-import { HSVA, RGBA } from "@/wasm-communication/messages";
+import { type HSVA, type RGBA } from "@/wasm-communication/messages";
 
 export function hsvaToRgba(hsva: HSVA): RGBA {
 	const { h, s, v, a } = hsva;

frontend/src/utility-functions/icons.ts

@@ -251,10 +251,10 @@ const ICON_LIST = {
 } as const;
 
 // Exported icons and types
-export const icons: IconDefinitionType<typeof ICON_LIST> = ICON_LIST;
+export const ICONS: IconDefinitionType<typeof ICON_LIST> = ICON_LIST;
-export const iconComponents = Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component]));
+export const ICON_COMPONENTS = Object.fromEntries(Object.entries(ICONS).map(([name, data]) => [name, data.component]));
 
-export type IconName = keyof typeof icons;
+export type IconName = keyof typeof ICONS;
 export type IconSize = null | 12 | 16 | 24 | 32;
 export type IconStyle = "Normal" | "Node";
 

frontend/src/wasm-communication/editor.ts

@@ -1,8 +1,9 @@
+import type WasmBindgenPackage from "@/../wasm/pkg";
 import { panicProxy } from "@/utility-functions/panic-proxy";
-import { JsMessageType } from "@/wasm-communication/messages";
+import { type JsMessageType } from "@/wasm-communication/messages";
-import { createSubscriptionRouter, SubscriptionRouter } from "@/wasm-communication/subscription-router";
+import { createSubscriptionRouter, type SubscriptionRouter } from "@/wasm-communication/subscription-router";
 
-export type WasmRawInstance = typeof import("@/../wasm/pkg");
+export type WasmRawInstance = typeof WasmBindgenPackage;
 export type WasmEditorInstance = InstanceType<WasmRawInstance["JsEditorHandle"]>;
 export type Editor = Readonly<ReturnType<typeof createEditor>>;
 

frontend/src/wasm-communication/messages.ts

@@ -2,8 +2,8 @@
 
 import { Transform, Type, plainToClass } from "class-transformer";
 
-import type { IconName, IconSize, IconStyle } from "@/utility-functions/icons";
+import { type IconName, type IconSize, type IconStyle } from "@/utility-functions/icons";
-import type { WasmEditorInstance, WasmRawInstance } from "@/wasm-communication/editor";
+import { type WasmEditorInstance, type WasmRawInstance } from "@/wasm-communication/editor";
 
 import type MenuList from "@/components/floating-menus/MenuList.vue";
 

frontend/src/wasm-communication/subscription-router.ts

@@ -1,7 +1,7 @@
 import { plainToInstance } from "class-transformer";
 
-import type { WasmEditorInstance, WasmRawInstance } from "@/wasm-communication/editor";
+import { type WasmEditorInstance, type WasmRawInstance } from "@/wasm-communication/editor";
-import { JsMessageType, messageMakers, JsMessage } from "@/wasm-communication/messages";
+import { type JsMessageType, messageMakers, type JsMessage } from "@/wasm-communication/messages";
 
 type JsMessageCallback<T extends JsMessage> = (messageData: T) => void;
 type JsMessageCallbackMap = {