From 5ec8aaa31d0bf832a4359f232be0e3b5dc657b3f Mon Sep 17 00:00:00 2001
From: Christian Authmann <8371862+cauthmann@users.noreply.github.com>
Date: Mon, 20 Dec 2021 07:37:19 +0100
Subject: [PATCH] Rework wasm initialization and reduce global state (#379)

* wasm: do the async initialization only once

This allows the rest of the app to access wasm synchronously.

This allows removing of a global.

* provide the wasm via vue provide/inject.

There's still code directly accessing the wasm. That will be changed later.

* MenuBarInput: use injected wasm instead of the global instance

* Let the App handle event listeners

* move stateful modules into state/

* state/fullscreen: create per instance

* App: load the initial document list on mount.
This got lost a few commits ago. Now it's back.

* state/dialog: create per instance

* util/input: remove dependency on global dialog instance

* state/documents: create per instance

* reponse-handler: move into EditorWasm

* comingSoon: move into dialog

* wasm: allow instantiating multiple editors

* input handlers: do not look at canvases outside the mounted App

* input: listen on the container instead of the window when possible

* - removed proxy from wasm-loader
- integrated with js-dispatcher
- state functions to classes
- integrated some upstream changes

* fix errors caused by merge

* Getting closer:
- added global state to track all instances
- fix fullscreen close trigger
- wasm-loader is statefull
- panic across instanes

* - fix outline while using editor
- removed circular import rule
- added editorInstance to js message constructor

* - changed input handler to a class
- still need a better way of handeling it in App.vue

* - fixed single instance of inputManager to weakmap

* - fix no-explicit-any in a few places
- removed global state from input.ts

* simplified two long lines

* removed global state

* removed $data from App

* add mut self to functions in api.rs

* Update Workspace.vue

remove outdated import

* fixed missing import

* Changes throughout code review; note this causes some bugs to be fixed in a later commit

* PR review round 1

* - fix coming soon bugs
- changed folder structure

* moved declaration to .d.ts

* - changed from classes to functions
- moved decs back to app.vue

* removed need to export js function to rust

* changed folder structure

* fixed indentation breaking multiline strings

* Fix eslint rule to whitelist @/../

* Simplify strip-indents implementation

* replace type assertions with better annotations or proper runtime checks

* Small tweaks and code rearranging improvements after second code review pass

* maybe fix mouse events

* Add back preventDefault for mouse scroll

* code review round 2

* Comment improvements

* -removed runtime checks
- fixed layers not showing

* - extened proxy to cover classes
- stopped multiple panics from logging
- Stop wasm-bindgen from mut ref counting our struct

* cleaned up messageConstructors exports

* Fix input and fullscreen regressions

Co-authored-by: Max Fisher <maxmfishernj@gmail.com>
Co-authored-by: mfish33 <32677537+mfish33@users.noreply.github.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
---
 Cargo.lock                                    |   1 +
 editor/src/document/layer_panel.rs            |   4 +-
 frontend/.eslintrc.js                         |   1 +
 frontend/public/index.html                    |   3 +-
 frontend/src/App.vue                          |  56 +-
 frontend/src/TwoViewTest.vue                  |  20 +
 frontend/src/components/panels/Document.vue   | 125 ++-
 frontend/src/components/panels/LayerTree.vue  |  23 +-
 .../widgets/floating-menus/DialogModal.vue    |  16 +-
 .../widgets/floating-menus/MenuList.vue       |   5 +-
 .../widgets/inputs/MenuBarInput.vue           | 199 +++--
 .../widgets/inputs/SwatchPairInput.vue        |  13 +-
 .../widgets/options/ToolOptions.vue           |  22 +-
 .../components/window/title-bar/TitleBar.vue  |   7 +-
 .../window/title-bar/WindowButtonsWeb.vue     |  14 +-
 frontend/src/components/workspace/Panel.vue   |  11 +-
 .../src/components/workspace/Workspace.vue    |  11 +-
 frontend/src/dispatcher/js-dispatcher.ts      |  58 ++
 .../{utilities => dispatcher}/js-messages.ts  |  51 +-
 frontend/src/lifetime/errors.ts               | 140 +++
 frontend/src/lifetime/input.ts                | 178 ++++
 frontend/src/main.ts                          |  33 +-
 frontend/src/state/dialog.ts                  | 118 +++
 frontend/src/state/documents.ts               | 136 +++
 frontend/src/state/fullscreen.ts              |  47 +
 frontend/src/state/wasm-loader.ts             |  76 ++
 frontend/src/utilities/dialog.ts              |  37 -
 frontend/src/utilities/dialogs.ts             |  49 --
 frontend/src/utilities/documents.ts           | 127 ---
 frontend/src/utilities/errors.ts              | 157 ----
 frontend/src/utilities/fullscreen.ts          |  37 -
 frontend/src/utilities/input.ts               | 145 ---
 .../js-message-dispatcher-binding.ts          |   4 -
 .../src/utilities/js-message-dispatcher.ts    |  95 --
 frontend/src/utilities/panic-proxy.ts         |  32 -
 frontend/src/utilities/strip-indents.ts       |  12 +
 frontend/wasm/Cargo.toml                      |   1 +
 frontend/wasm/src/api.rs                      | 823 +++++++++---------
 frontend/wasm/src/lib.rs                      |  49 +-
 39 files changed, 1524 insertions(+), 1412 deletions(-)
 create mode 100644 frontend/src/TwoViewTest.vue
 create mode 100644 frontend/src/dispatcher/js-dispatcher.ts
 rename frontend/src/{utilities => dispatcher}/js-messages.ts (79%)
 create mode 100644 frontend/src/lifetime/errors.ts
 create mode 100644 frontend/src/lifetime/input.ts
 create mode 100644 frontend/src/state/dialog.ts
 create mode 100644 frontend/src/state/documents.ts
 create mode 100644 frontend/src/state/fullscreen.ts
 create mode 100644 frontend/src/state/wasm-loader.ts
 delete mode 100644 frontend/src/utilities/dialog.ts
 delete mode 100644 frontend/src/utilities/dialogs.ts
 delete mode 100644 frontend/src/utilities/documents.ts
 delete mode 100644 frontend/src/utilities/errors.ts
 delete mode 100644 frontend/src/utilities/fullscreen.ts
 delete mode 100644 frontend/src/utilities/input.ts
 delete mode 100644 frontend/src/utilities/js-message-dispatcher-binding.ts
 delete mode 100644 frontend/src/utilities/js-message-dispatcher.ts
 delete mode 100644 frontend/src/utilities/panic-proxy.ts
 create mode 100644 frontend/src/utilities/strip-indents.ts

diff --git a/Cargo.lock b/Cargo.lock
index 5843d923..82f2eb93 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -126,6 +126,7 @@ version = "0.1.0"
 dependencies = [
  "graphite-editor",
  "graphite-graphene",
+ "js-sys",
  "log",
  "serde",
  "wasm-bindgen",
diff --git a/editor/src/document/layer_panel.rs b/editor/src/document/layer_panel.rs
index ad1e5693..b4300713 100644
--- a/editor/src/document/layer_panel.rs
+++ b/editor/src/document/layer_panel.rs
@@ -141,8 +141,8 @@ impl Serialize for RawBuffer {
 		S: serde::Serializer,
 	{
 		let mut buffer = serializer.serialize_struct("Buffer", 2)?;
-		buffer.serialize_field("ptr", &(self.0.as_ptr() as usize))?;
-		buffer.serialize_field("len", &(self.0.len()))?;
+		buffer.serialize_field("pointer", &(self.0.as_ptr() as usize))?;
+		buffer.serialize_field("length", &(self.0.len()))?;
 		buffer.end()
 	}
 }
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index dbba170e..12285f52 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -65,6 +65,7 @@ module.exports = {
 		"no-bitwise": "off",
 		"no-shadow": "off",
 		"no-use-before-define": "off",
+		"no-restricted-imports": ["error", { patterns: [".*", "!@/*"] }],
 
 		// TypeScript plugin config
 		"@typescript-eslint/indent": ["error", "tab", { SwitchCase: 1 }],
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 070dff8f..2b1e8eb7 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -17,7 +17,8 @@
 
 <body>
 	<noscript>JavaScript is required</noscript>
-	<div id="app"></div>
+	<!-- tabindex is used to allow the app to have focus while inside of it -->
+	<div id="app" tabindex="0"></div>
 </body>
 
 </html>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index fd8aa014..ffeafc50 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -71,6 +71,7 @@ body,
 	background: var(--color-2-mildblack);
 	user-select: none;
 	overscroll-behavior: none;
+	outline: none;
 }
 
 html,
@@ -220,23 +221,52 @@ img {
 <script lang="ts">
 import { defineComponent } from "vue";
 
-// State providers
-import dialog from "@/utilities/dialog";
-import documents from "@/utilities/documents";
-import fullscreen from "@/utilities/fullscreen";
+import { DialogState, createDialogState } 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";
+
+// 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" {
+	interface ComponentCustomProperties {
+		dialog: DialogState;
+		documents: DocumentsState;
+		fullscreen: FullscreenState;
+		editor: EditorState;
+		// This must be set to optional because there is a time in the lifecycle of the component where inputManager is undefined.
+		// That's because we initialize inputManager in `mounted()` rather than `data()` since the div hasn't been created yet.
+		inputManger?: InputManager;
+	}
+}
 
 export default defineComponent({
-	provide: {
-		dialog,
-		documents,
-		fullscreen,
+	provide() {
+		return {
+			editor: this.editor,
+			dialog: this.dialog,
+			documents: this.documents,
+			fullscreen: this.fullscreen,
+		};
 	},
 	data() {
+		const editor = createEditorState();
+		const dialog = createDialogState(editor);
+		const documents = createDocumentsState(editor, dialog);
+		const fullscreen = createFullscreenState();
+		initErrorHandling(editor, dialog);
+
 		return {
+			editor,
+			dialog,
+			documents,
+			fullscreen,
 			showUnsupportedModal: !("BigInt64Array" in window),
+			inputManager: undefined as undefined | InputManager,
 		};
 	},
 	methods: {
@@ -244,6 +274,16 @@ export default defineComponent({
 			this.showUnsupportedModal = false;
 		},
 	},
+	mounted() {
+		this.inputManager = createInputManager(this.editor, this.$el.parentElement, this.dialog, this.documents, this.fullscreen);
+	},
+	beforeUnmount() {
+		const { inputManager } = this;
+		if (inputManager) inputManager.removeListeners();
+
+		const { editor } = this;
+		editor.instance.free();
+	},
 	components: { MainWindow, LayoutRow },
 });
 </script>
diff --git a/frontend/src/TwoViewTest.vue b/frontend/src/TwoViewTest.vue
new file mode 100644
index 00000000..9c3a0659
--- /dev/null
+++ b/frontend/src/TwoViewTest.vue
@@ -0,0 +1,20 @@
+<template>
+	<div style="display: flex">
+		<div tabindex="0" style="width: 50%; outline: none">
+			<App />
+		</div>
+		<div tabindex="0" style="width: 50%; outline: none">
+			<App />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import App from "@/App.vue";
+
+export default defineComponent({
+	components: { App },
+});
+</script>
diff --git a/frontend/src/components/panels/Document.vue b/frontend/src/components/panels/Document.vue
index 68a4d17f..97444b89 100644
--- a/frontend/src/components/panels/Document.vue
+++ b/frontend/src/components/panels/Document.vue
@@ -18,7 +18,7 @@
 
 				<Separator :type="SeparatorType.Unrelated" />
 
-				<OptionalInput v-model:checked="gridEnabled" @update:checked="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>
@@ -26,7 +26,7 @@
 
 				<Separator :type="SeparatorType.Unrelated" />
 
-				<OptionalInput v-model:checked="overlaysEnabled" @update:checked="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>
@@ -70,31 +70,31 @@
 			<LayoutCol :class="'shelf'">
 				<div class="tools scrollable-y">
 					<ShelfItemInput icon="LayoutSelectTool" title="Select Tool (V)" :active="activeTool === 'Select'" :action="() => selectTool('Select')" />
-					<ShelfItemInput icon="LayoutCropTool" title="Crop Tool" :active="activeTool === 'Crop'" :action="() => comingSoon(289) && selectTool('Crop')" />
-					<ShelfItemInput icon="LayoutNavigateTool" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" :action="() => comingSoon(155) && selectTool('Navigate')" />
+					<ShelfItemInput icon="LayoutCropTool" title="Crop Tool" :active="activeTool === 'Crop'" :action="() => dialog.comingSoon(289) && selectTool('Crop')" />
+					<ShelfItemInput icon="LayoutNavigateTool" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" :action="() => dialog.comingSoon(155) && selectTool('Navigate')" />
 					<ShelfItemInput icon="LayoutEyedropperTool" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" :action="() => selectTool('Eyedropper')" />
 
 					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
 
-					<ShelfItemInput icon="ParametricTextTool" title="Text Tool (T)" :active="activeTool === 'Text'" :action="() => comingSoon(153) && selectTool('Text')" />
+					<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="() => comingSoon() && selectTool('Gradient')" />
+					<ShelfItemInput icon="ParametricGradientTool" title="Gradient Tool (H)" :active="activeTool === 'Gradient'" :action="() => dialog.comingSoon() && selectTool('Gradient')" />
 
 					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
 
-					<ShelfItemInput icon="RasterBrushTool" title="Brush Tool (B)" :active="activeTool === 'Brush'" :action="() => comingSoon() && selectTool('Brush')" />
-					<ShelfItemInput icon="RasterHealTool" title="Heal Tool (J)" :active="activeTool === 'Heal'" :action="() => comingSoon() && selectTool('Heal')" />
-					<ShelfItemInput icon="RasterCloneTool" title="Clone Tool (C)" :active="activeTool === 'Clone'" :action="() => comingSoon() && selectTool('Clone')" />
-					<ShelfItemInput icon="RasterPatchTool" title="Patch Tool" :active="activeTool === 'Patch'" :action="() => comingSoon() && selectTool('Patch')" />
-					<ShelfItemInput icon="RasterBlurSharpenTool" title="Detail Tool (D)" :active="activeTool === 'BlurSharpen'" :action="() => comingSoon() && selectTool('BlurSharpen')" />
-					<ShelfItemInput icon="RasterRelightTool" title="Relight Tool (O)" :active="activeTool === 'Relight'" :action="() => comingSoon() && selectTool('Relight')" />
+					<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')" />
+					<ShelfItemInput icon="RasterCloneTool" title="Clone Tool (C)" :active="activeTool === 'Clone'" :action="() => dialog.comingSoon() && selectTool('Clone')" />
+					<ShelfItemInput icon="RasterPatchTool" title="Patch Tool" :active="activeTool === 'Patch'" :action="() => dialog.comingSoon() && selectTool('Patch')" />
+					<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" />
 
 					<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')" />
-					<ShelfItemInput icon="VectorFreehandTool" title="Freehand Tool (N)" :active="activeTool === 'Freehand'" :action="() => comingSoon() && selectTool('Freehand')" />
-					<ShelfItemInput icon="VectorSplineTool" title="Spline Tool" :active="activeTool === 'Spline'" :action="() => comingSoon() && selectTool('Spline')" />
+					<ShelfItemInput icon="VectorFreehandTool" title="Freehand Tool (N)" :active="activeTool === 'Freehand'" :action="() => dialog.comingSoon() && selectTool('Freehand')" />
+					<ShelfItemInput icon="VectorSplineTool" title="Spline Tool" :active="activeTool === 'Spline'" :action="() => dialog.comingSoon() && selectTool('Spline')" />
 					<ShelfItemInput icon="VectorLineTool" title="Line Tool (L)" :active="activeTool === 'Line'" :action="() => selectTool('Line')" />
 					<ShelfItemInput icon="VectorRectangleTool" title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" :action="() => selectTool('Rectangle')" />
 					<ShelfItemInput icon="VectorEllipseTool" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" :action="() => selectTool('Ellipse')" />
@@ -238,11 +238,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { subscribeJsMessage } from "@/utilities/js-message-dispatcher";
-import { UpdateCanvas, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/utilities/js-messages";
+import { UpdateCanvas, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/dispatcher/js-messages";
 import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
-import { comingSoon } from "@/utilities/errors";
-import { panicProxy } from "@/utilities/panic-proxy";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
@@ -261,27 +258,13 @@ 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";
 
-const wasm = import("@/../wasm/pkg").then(panicProxy);
-
-const documentModeEntries: SectionsOfMenuListEntries = [
-	[
-		{ label: "Design Mode", icon: "ViewportDesignMode" },
-		{ label: "Select Mode", icon: "ViewportSelectMode", action: () => comingSoon(330) },
-		{ label: "Guide Mode", icon: "ViewportGuideMode", action: () => comingSoon(331) },
-	],
-];
-const viewModeEntries: RadioEntries = [
-	{ value: "normal", icon: "ViewModeNormal", tooltip: "View Mode: Normal" },
-	{ value: "outline", icon: "ViewModeOutline", tooltip: "View Mode: Outline", action: () => comingSoon(319) },
-	{ value: "pixels", icon: "ViewModePixels", tooltip: "View Mode: Pixels", action: () => comingSoon(320) },
-];
-
 export default defineComponent({
+	inject: ["editor", "dialog"],
 	methods: {
-		async setSnap(newStatus: boolean) {
-			(await wasm).set_snapping(newStatus);
+		setSnap(newStatus: boolean) {
+			this.editor.instance.set_snapping(newStatus);
 		},
-		async viewportResize() {
+		viewportResize() {
 			const canvas = this.$refs.canvas as HTMLElement;
 			// Get the width and height rounded up to the nearest even number because resizing is centered and dividing an odd number by 2 for centering causes antialiasing
 			let width = Math.ceil(parseFloat(getComputedStyle(canvas).width));
@@ -292,73 +275,73 @@ export default defineComponent({
 			this.canvasSvgWidth = `${width}px`;
 			this.canvasSvgHeight = `${height}px`;
 		},
-		async setCanvasZoom(newZoom: number) {
-			(await wasm).set_canvas_zoom(newZoom / 100);
+		setCanvasZoom(newZoom: number) {
+			this.editor.instance.set_canvas_zoom(newZoom / 100);
 		},
-		async increaseCanvasZoom() {
-			(await wasm).increase_canvas_zoom();
+		increaseCanvasZoom() {
+			this.editor.instance.increase_canvas_zoom();
 		},
-		async decreaseCanvasZoom() {
-			(await wasm).decrease_canvas_zoom();
+		decreaseCanvasZoom() {
+			this.editor.instance.decrease_canvas_zoom();
 		},
-		async setRotation(newRotation: number) {
-			(await wasm).set_rotation(newRotation * (Math.PI / 180));
+		setRotation(newRotation: number) {
+			this.editor.instance.set_rotation(newRotation * (Math.PI / 180));
 		},
-		async translateCanvasX(newValue: number) {
+		translateCanvasX(newValue: number) {
 			const delta = newValue - this.scrollbarPos.x;
 			this.scrollbarPos.x = newValue;
-			(await wasm).translate_canvas(-delta * this.scrollbarMultiplier.x, 0);
+			this.editor.instance.translate_canvas(-delta * this.scrollbarMultiplier.x, 0);
 		},
-		async translateCanvasY(newValue: number) {
+		translateCanvasY(newValue: number) {
 			const delta = newValue - this.scrollbarPos.y;
 			this.scrollbarPos.y = newValue;
-			(await wasm).translate_canvas(0, -delta * this.scrollbarMultiplier.y);
+			this.editor.instance.translate_canvas(0, -delta * this.scrollbarMultiplier.y);
 		},
-		async pageX(delta: number) {
+		pageX(delta: number) {
 			const move = delta < 0 ? 1 : -1;
-			(await wasm).translate_canvas_by_fraction(move, 0);
+			this.editor.instance.translate_canvas_by_fraction(move, 0);
 		},
-		async pageY(delta: number) {
+		pageY(delta: number) {
 			const move = delta < 0 ? 1 : -1;
-			(await wasm).translate_canvas_by_fraction(0, move);
+			this.editor.instance.translate_canvas_by_fraction(0, move);
 		},
-		async selectTool(toolName: string) {
-			(await wasm).select_tool(toolName);
+		selectTool(toolName: string) {
+			this.editor.instance.select_tool(toolName);
 		},
-		async swapWorkingColors() {
-			(await wasm).swap_colors();
+		swapWorkingColors() {
+			this.editor.instance.swap_colors();
 		},
-		async resetWorkingColors() {
-			(await wasm).reset_colors();
+		resetWorkingColors() {
+			this.editor.instance.reset_colors();
 		},
 	},
 	mounted() {
-		subscribeJsMessage(UpdateCanvas, (updateCanvas) => {
+		this.editor.dispatcher.subscribeJsMessage(UpdateCanvas, (updateCanvas) => {
 			this.viewportSvg = updateCanvas.document;
 		});
 
-		subscribeJsMessage(UpdateScrollbars, (updateScrollbars) => {
+		this.editor.dispatcher.subscribeJsMessage(UpdateScrollbars, (updateScrollbars) => {
 			this.scrollbarPos = updateScrollbars.position;
 			this.scrollbarSize = updateScrollbars.size;
 			this.scrollbarMultiplier = updateScrollbars.multiplier;
 		});
 
-		subscribeJsMessage(UpdateRulers, (updateRulers) => {
+		this.editor.dispatcher.subscribeJsMessage(UpdateRulers, (updateRulers) => {
 			this.rulerOrigin = updateRulers.origin;
 			this.rulerSpacing = updateRulers.spacing;
 			this.rulerInterval = updateRulers.interval;
 		});
 
-		subscribeJsMessage(SetActiveTool, (setActiveTool) => {
+		this.editor.dispatcher.subscribeJsMessage(SetActiveTool, (setActiveTool) => {
 			this.activeTool = setActiveTool.tool_name;
 			this.activeToolOptions = setActiveTool.tool_options;
 		});
 
-		subscribeJsMessage(SetCanvasZoom, (setCanvasZoom) => {
+		this.editor.dispatcher.subscribeJsMessage(SetCanvasZoom, (setCanvasZoom) => {
 			this.documentZoom = setCanvasZoom.new_zoom * 100;
 		});
 
-		subscribeJsMessage(SetCanvasRotation, (setCanvasRotation) => {
+		this.editor.dispatcher.subscribeJsMessage(SetCanvasRotation, (setCanvasRotation) => {
 			const newRotation = setCanvasRotation.new_radians * (180 / Math.PI);
 			this.documentRotation = (360 + (newRotation % 360)) % 360;
 		});
@@ -367,6 +350,19 @@ export default defineComponent({
 		window.addEventListener("DOMContentLoaded", this.viewportResize);
 	},
 	data() {
+		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) },
+			],
+		];
+		const viewModeEntries: RadioEntries = [
+			{ value: "normal", icon: "ViewModeNormal", tooltip: "View Mode: Normal" },
+			{ value: "outline", icon: "ViewModeOutline", tooltip: "View Mode: Outline", action: () => this.dialog.comingSoon(319) },
+			{ value: "pixels", icon: "ViewModePixels", tooltip: "View Mode: Pixels", action: () => this.dialog.comingSoon(320) },
+		];
+
 		return {
 			viewportSvg: "",
 			canvasSvgWidth: "100%",
@@ -395,7 +391,6 @@ export default defineComponent({
 			ScrollbarDirection,
 			RulerDirection,
 			SeparatorType,
-			comingSoon,
 		};
 	},
 	components: {
diff --git a/frontend/src/components/panels/LayerTree.vue b/frontend/src/components/panels/LayerTree.vue
index 77bfdfe6..ac717e55 100644
--- a/frontend/src/components/panels/LayerTree.vue
+++ b/frontend/src/components/panels/LayerTree.vue
@@ -197,9 +197,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { subscribeJsMessage } from "@/utilities/js-message-dispatcher";
-import { BlendMode, DisplayFolderTreeStructure, UpdateLayer, LayerPanelEntry, LayerTypeOptions } from "@/utilities/js-messages";
-import { panicProxy } from "@/utilities/panic-proxy";
+import { BlendMode, DisplayFolderTreeStructure, UpdateLayer, LayerPanelEntry, LayerTypeOptions } from "@/dispatcher/js-messages";
 import { SeparatorType } from "@/components/widgets/widgets";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -213,8 +211,6 @@ import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 
-const wasm = import("@/../wasm/pkg").then(panicProxy);
-
 const blendModeEntries: SectionsOfMenuListEntries<BlendMode> = [
 	[{ label: "Normal", value: "Normal" }],
 	[
@@ -255,6 +251,7 @@ const blendModeEntries: SectionsOfMenuListEntries<BlendMode> = [
 ];
 
 export default defineComponent({
+	inject: ["editor"],
 	data() {
 		return {
 			blendModeEntries,
@@ -278,19 +275,19 @@ export default defineComponent({
 			return `${(layer.path.length - 1) * 16}px`;
 		},
 		async toggleLayerVisibility(path: BigUint64Array) {
-			(await wasm).toggle_layer_visibility(path);
+			this.editor.instance.toggle_layer_visibility(path);
 		},
 		async handleNodeConnectorClick(path: BigUint64Array) {
-			(await wasm).toggle_layer_expansion(path);
+			this.editor.instance.toggle_layer_expansion(path);
 		},
 		async setLayerBlendMode() {
 			const blendMode = this.blendModeEntries.flat()[this.blendModeSelectedIndex].value;
 			if (blendMode) {
-				(await wasm).set_blend_mode_for_selected_layers(blendMode);
+				this.editor.instance.set_blend_mode_for_selected_layers(blendMode);
 			}
 		},
 		async setLayerOpacity() {
-			(await wasm).set_opacity_for_selected_layers(this.opacity);
+			this.editor.instance.set_opacity_for_selected_layers(this.opacity);
 		},
 		async handleControlClick(clickedLayer: LayerPanelEntry) {
 			const index = this.layers.indexOf(clickedLayer);
@@ -330,7 +327,7 @@ export default defineComponent({
 			this.selectionRangeStartLayer = undefined;
 			this.selectionRangeEndLayer = undefined;
 
-			(await wasm).deselect_all_layers();
+			this.editor.instance.deselect_all_layers();
 		},
 		async fillSelectionRange(start: LayerPanelEntry, end: LayerPanelEntry, selected = true) {
 			const startIndex = this.layers.findIndex((layer) => layer.path.join() === start.path.join());
@@ -363,7 +360,7 @@ export default defineComponent({
 				}
 				i += 1;
 			});
-			(await wasm).select_layers(output);
+			this.editor.instance.select_layers(output);
 		},
 		setBlendModeForSelectedLayers() {
 			const selected = this.layers.filter((layer) => layer.layer_data.selected);
@@ -407,7 +404,7 @@ export default defineComponent({
 		},
 	},
 	mounted() {
-		subscribeJsMessage(DisplayFolderTreeStructure, (displayFolderTreeStructure) => {
+		this.editor.dispatcher.subscribeJsMessage(DisplayFolderTreeStructure, (displayFolderTreeStructure) => {
 			const path = [] as bigint[];
 			this.layers = [] as LayerPanelEntry[];
 			function recurse(folder: DisplayFolderTreeStructure, layers: LayerPanelEntry[], cache: Map<string, LayerPanelEntry>) {
@@ -423,7 +420,7 @@ export default defineComponent({
 			recurse(displayFolderTreeStructure, this.layers, this.layerCache);
 		});
 
-		subscribeJsMessage(UpdateLayer, (updateLayer) => {
+		this.editor.dispatcher.subscribeJsMessage(UpdateLayer, (updateLayer) => {
 			const targetPath = updateLayer.data.path;
 			const targetLayer = updateLayer.data;
 
diff --git a/frontend/src/components/widgets/floating-menus/DialogModal.vue b/frontend/src/components/widgets/floating-menus/DialogModal.vue
index a5bf0242..a5c335c0 100644
--- a/frontend/src/components/widgets/floating-menus/DialogModal.vue
+++ b/frontend/src/components/widgets/floating-menus/DialogModal.vue
@@ -3,14 +3,14 @@
 		<FloatingMenu :type="MenuType.Dialog" :direction="MenuDirection.Center">
 			<LayoutRow>
 				<LayoutCol :class="'icon-column'">
-					<!-- `dialog.icon` class exists to provide special sizing in CSS to specific icons -->
-					<IconLabel :icon="dialog.icon" :class="dialog.icon.toLowerCase()" />
+					<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
+					<IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" />
 				</LayoutCol>
 				<LayoutCol :class="'main-column'">
-					<TextLabel :bold="true" :class="'heading'">{{ dialog.heading }}</TextLabel>
-					<TextLabel :class="'details'">{{ dialog.details }}</TextLabel>
-					<LayoutRow :class="'buttons-row'" v-if="dialog.buttons.length > 0">
-						<TextButton v-for="(button, index) in dialog.buttons" :key="index" :title="button.tooltip" :action="button.callback" v-bind="button.props" />
+					<TextLabel :bold="true" :class="'heading'">{{ dialog.state.heading }}</TextLabel>
+					<TextLabel :class="'details'">{{ dialog.state.details }}</TextLabel>
+					<LayoutRow :class="'buttons-row'" v-if="dialog.state.buttons.length > 0">
+						<TextButton v-for="(button, index) in dialog.state.buttons" :key="index" :title="button.tooltip" :action="button.callback" v-bind="button.props" />
 					</LayoutRow>
 				</LayoutCol>
 			</LayoutRow>
@@ -79,8 +79,6 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { dismissDialog } from "@/utilities/dialog";
-
 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";
@@ -100,7 +98,7 @@ export default defineComponent({
 	},
 	methods: {
 		dismiss() {
-			dismissDialog();
+			this.dialog.dismissDialog();
 		},
 	},
 	data() {
diff --git a/frontend/src/components/widgets/floating-menus/MenuList.vue b/frontend/src/components/widgets/floating-menus/MenuList.vue
index af489ec0..4c67870e 100644
--- a/frontend/src/components/widgets/floating-menus/MenuList.vue
+++ b/frontend/src/components/widgets/floating-menus/MenuList.vue
@@ -18,7 +18,7 @@
 
 				<span class="entry-label">{{ entry.label }}</span>
 
-				<IconLabel v-if="entry.shortcutRequiresLock && !fullscreen.keyboardLocked" :icon="'Info'" :title="keyboardLockInfoMessage" />
+				<IconLabel v-if="entry.shortcutRequiresLock && !fullscreen.state.keyboardLocked" :icon="'Info'" :title="keyboardLockInfoMessage" />
 				<UserInputLabel v-else-if="entry.shortcut && entry.shortcut.length" :inputKeys="[entry.shortcut]" />
 
 				<div class="submenu-arrow" v-if="entry.children && entry.children.length"></div>
@@ -132,7 +132,6 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { keyboardLockApiSupported } from "@/utilities/fullscreen";
 import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
 
 import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
@@ -265,7 +264,7 @@ const MenuList = defineComponent({
 	},
 	data() {
 		return {
-			keyboardLockInfoMessage: keyboardLockApiSupported() ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER,
+			keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER,
 			SeparatorDirection,
 			SeparatorType,
 			MenuDirection,
diff --git a/frontend/src/components/widgets/inputs/MenuBarInput.vue b/frontend/src/components/widgets/inputs/MenuBarInput.vue
index a5d46e20..24785823 100644
--- a/frontend/src/components/widgets/inputs/MenuBarInput.vue
+++ b/frontend/src/components/widgets/inputs/MenuBarInput.vue
@@ -53,117 +53,116 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { comingSoon } from "@/utilities/errors";
-import { panicProxy } from "@/utilities/panic-proxy";
-
 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";
 
-const wasm = import("@/../wasm/pkg").then(panicProxy);
-
-const menuEntries: MenuListEntries = [
-	{
-		label: "File",
-		ref: undefined,
-		children: [
-			[
-				{ label: "New", icon: "File", shortcut: ["Ctrl", "N"], shortcutRequiresLock: true, action: async () => (await wasm).new_document() },
-				{ label: "Open…", shortcut: ["Ctrl", "O"], action: async () => (await wasm).open_document() },
-				{
-					label: "Open Recent",
-					shortcut: ["Ctrl", "⇧", "O"],
-					children: [
-						[{ label: "Reopen Last Closed", shortcut: ["Ctrl", "⇧", "T"], shortcutRequiresLock: true }, { label: "Clear Recently Opened" }],
-						[
-							{ label: "Some Recent File.gdd" },
-							{ label: "Another Recent File.gdd" },
-							{ label: "An Older File.gdd" },
-							{ label: "Some Other Older File.gdd" },
-							{ label: "Yet Another Older File.gdd" },
+function makeMenuEntries(editor: EditorState): MenuListEntries {
+	return [
+		{
+			label: "File",
+			ref: undefined,
+			children: [
+				[
+					{ label: "New", icon: "File", shortcut: ["Ctrl", "N"], shortcutRequiresLock: true, action: async () => editor.instance.new_document() },
+					{ label: "Open…", shortcut: ["Ctrl", "O"], action: async () => editor.instance.open_document() },
+					{
+						label: "Open Recent",
+						shortcut: ["Ctrl", "⇧", "O"],
+						children: [
+							[{ label: "Reopen Last Closed", shortcut: ["Ctrl", "⇧", "T"], shortcutRequiresLock: true }, { label: "Clear Recently Opened" }],
+							[
+								{ label: "Some Recent File.gdd" },
+								{ label: "Another Recent File.gdd" },
+								{ label: "An Older File.gdd" },
+								{ label: "Some Other Older File.gdd" },
+								{ label: "Yet Another Older File.gdd" },
+							],
 						],
-					],
-				},
+					},
+				],
+				[
+					{ label: "Close", shortcut: ["Ctrl", "W"], shortcutRequiresLock: true, action: async () => editor.instance.close_active_document_with_confirmation() },
+					{ label: "Close All", shortcut: ["Ctrl", "Alt", "W"], action: async () => editor.instance.close_all_documents_with_confirmation() },
+				],
+				[
+					{ label: "Save", shortcut: ["Ctrl", "S"], action: async () => editor.instance.save_document() },
+					{ label: "Save As…", shortcut: ["Ctrl", "⇧", "S"], action: async () => editor.instance.save_document() },
+					{ label: "Save All", shortcut: ["Ctrl", "Alt", "S"] },
+					{ label: "Auto-Save", checkbox: true, checked: true },
+				],
+				[
+					{ label: "Import…", shortcut: ["Ctrl", "I"] },
+					{ label: "Export…", shortcut: ["Ctrl", "E"], action: async () => editor.instance.export_document() },
+				],
+				[{ label: "Quit", shortcut: ["Ctrl", "Q"] }],
 			],
-			[
-				{ label: "Close", shortcut: ["Ctrl", "W"], shortcutRequiresLock: true, action: async () => (await wasm).close_active_document_with_confirmation() },
-				{ label: "Close All", shortcut: ["Ctrl", "Alt", "W"], action: async () => (await wasm).close_all_documents_with_confirmation() },
+		},
+		{
+			label: "Edit",
+			ref: undefined,
+			children: [
+				[
+					{ label: "Undo", shortcut: ["Ctrl", "Z"], action: async () => editor.instance.undo() },
+					{ label: "Redo", shortcut: ["Ctrl", "⇧", "Z"], action: async () => editor.instance.redo() },
+				],
+				[
+					{ label: "Cut", shortcut: ["Ctrl", "X"] },
+					{ label: "Copy", icon: "Copy", shortcut: ["Ctrl", "C"] },
+					{ label: "Paste", icon: "Paste", shortcut: ["Ctrl", "V"] },
+				],
 			],
-			[
-				{ label: "Save", shortcut: ["Ctrl", "S"], action: async () => (await wasm).save_document() },
-				{ label: "Save As…", shortcut: ["Ctrl", "⇧", "S"], action: async () => (await wasm).save_document() },
-				{ label: "Save All", shortcut: ["Ctrl", "Alt", "S"] },
-				{ label: "Auto-Save", checkbox: true, checked: true },
-			],
-			[
-				{ label: "Import…", shortcut: ["Ctrl", "I"] },
-				{ label: "Export…", shortcut: ["Ctrl", "E"], action: async () => (await wasm).export_document() },
-			],
-			[{ label: "Quit", shortcut: ["Ctrl", "Q"] }],
-		],
-	},
-	{
-		label: "Edit",
-		ref: undefined,
-		children: [
-			[
-				{ label: "Undo", shortcut: ["Ctrl", "Z"], action: async () => (await wasm).undo() },
-				{ label: "Redo", shortcut: ["Ctrl", "⇧", "Z"], action: async () => (await wasm).redo() },
-			],
-			[
-				{ label: "Cut", shortcut: ["Ctrl", "X"] },
-				{ label: "Copy", icon: "Copy", shortcut: ["Ctrl", "C"] },
-				{ label: "Paste", icon: "Paste", shortcut: ["Ctrl", "V"] },
-			],
-		],
-	},
-	{
-		label: "Layer",
-		ref: undefined,
-		children: [
-			[
-				{ label: "Select All", shortcut: ["Ctrl", "A"], action: async () => (await wasm).select_all_layers() },
-				{ label: "Deselect All", shortcut: ["Ctrl", "Alt", "A"], action: async () => (await wasm).deselect_all_layers() },
-				{
-					label: "Order",
-					children: [
-						[
-							{ label: "Raise To Front", shortcut: ["Ctrl", "Shift", "]"], action: async () => (await wasm).reorder_selected_layers((await wasm).i32_max()) },
-							{ label: "Raise", shortcut: ["Ctrl", "]"], action: async () => (await wasm).reorder_selected_layers(1) },
-							{ label: "Lower", shortcut: ["Ctrl", "["], action: async () => (await wasm).reorder_selected_layers(-1) },
-							{ label: "Lower to Back", shortcut: ["Ctrl", "Shift", "["], action: async () => (await wasm).reorder_selected_layers((await wasm).i32_min()) },
+		},
+		{
+			label: "Layer",
+			ref: undefined,
+			children: [
+				[
+					{ label: "Select All", shortcut: ["Ctrl", "A"], action: async () => editor.instance.select_all_layers() },
+					{ label: "Deselect All", shortcut: ["Ctrl", "Alt", "A"], action: async () => editor.instance.deselect_all_layers() },
+					{
+						label: "Order",
+						children: [
+							[
+								{ label: "Raise To Front", shortcut: ["Ctrl", "Shift", "]"], action: async () => editor.instance.reorder_selected_layers(editor.rawWasm.i32_max()) },
+								{ label: "Raise", shortcut: ["Ctrl", "]"], action: async () => editor.instance.reorder_selected_layers(1) },
+								{ label: "Lower", shortcut: ["Ctrl", "["], action: async () => editor.instance.reorder_selected_layers(-1) },
+								{ label: "Lower to Back", shortcut: ["Ctrl", "Shift", "["], action: async () => editor.instance.reorder_selected_layers(editor.rawWasm.i32_min()) },
+							],
 						],
-					],
-				},
+					},
+				],
 			],
-		],
-	},
-	{
-		label: "Document",
-		ref: undefined,
-		children: [[{ label: "Menu entries coming soon" }]],
-	},
-	{
-		label: "View",
-		ref: undefined,
-		children: [[{ label: "Menu entries coming soon" }]],
-	},
-	{
-		label: "Help",
-		ref: undefined,
-		children: [
-			[{ label: "About Graphite", action: async () => (await wasm).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: "Document",
+			ref: undefined,
+			children: [[{ label: "Menu entries coming soon" }]],
+		},
+		{
+			label: "View",
+			ref: undefined,
+			children: [[{ label: "Menu entries coming soon" }]],
+		},
+		{
+			label: "Help",
+			ref: undefined,
+			children: [
+				[{ label: "About Graphite", action: async () => 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: "Debug: Panic (DANGER)", action: async () => editor.rawWasm.intentional_panic() }],
 			],
-			[{ label: "Debug: Panic (DANGER)", action: async () => (await wasm).intentional_panic() }],
-		],
-	},
-];
+		},
+	];
+}
 
 export default defineComponent({
+	inject: ["editor", "dialog"],
 	methods: {
 		setEntryRefs(menuEntry: MenuListEntry, ref: typeof MenuList) {
 			if (ref) menuEntry.ref = ref;
@@ -180,9 +179,9 @@ export default defineComponent({
 	data() {
 		return {
 			ApplicationPlatform,
-			menuEntries,
+			menuEntries: makeMenuEntries(this.editor),
 			MenuDirection,
-			comingSoon,
+			comingSoon: () => this.dialog.comingSoon(),
 		};
 	},
 	components: {
diff --git a/frontend/src/components/widgets/inputs/SwatchPairInput.vue b/frontend/src/components/widgets/inputs/SwatchPairInput.vue
index 59ad5734..852e7784 100644
--- a/frontend/src/components/widgets/inputs/SwatchPairInput.vue
+++ b/frontend/src/components/widgets/inputs/SwatchPairInput.vue
@@ -69,16 +69,13 @@
 import { defineComponent } from "vue";
 
 import { rgbToDecimalRgb, RGB } from "@/utilities/color";
-import { panicProxy } from "@/utilities/panic-proxy";
-import { subscribeJsMessage } from "@/utilities/js-message-dispatcher";
-import { UpdateWorkingColors } from "@/utilities/js-messages";
 
 import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
 import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
-
-const wasm = import("@/../wasm/pkg").then(panicProxy);
+import { UpdateWorkingColors } from "@/dispatcher/js-messages";
 
 export default defineComponent({
+	inject: ["editor"],
 	components: {
 		FloatingMenu,
 		ColorPicker,
@@ -115,7 +112,7 @@ export default defineComponent({
 			button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
 
 			color = rgbToDecimalRgb(this.primaryColor);
-			(await wasm).update_primary_color(color.r, color.g, color.b, color.a);
+			this.editor.instance.update_primary_color(color.r, color.g, color.b, color.a);
 		},
 
 		async updateSecondaryColor() {
@@ -124,7 +121,7 @@ export default defineComponent({
 			button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
 
 			color = rgbToDecimalRgb(this.secondaryColor);
-			(await wasm).update_secondary_color(color.r, color.g, color.b, color.a);
+			this.editor.instance.update_secondary_color(color.r, color.g, color.b, color.a);
 		},
 	},
 	data() {
@@ -136,7 +133,7 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-		subscribeJsMessage(UpdateWorkingColors, (updateWorkingColors) => {
+		this.editor.dispatcher.subscribeJsMessage(UpdateWorkingColors, (updateWorkingColors) => {
 			const { primary, secondary } = updateWorkingColors;
 
 			this.primaryColor = primary.toRgba();
diff --git a/frontend/src/components/widgets/options/ToolOptions.vue b/frontend/src/components/widgets/options/ToolOptions.vue
index 22cd28f0..07c98dfd 100644
--- a/frontend/src/components/widgets/options/ToolOptions.vue
+++ b/frontend/src/components/widgets/options/ToolOptions.vue
@@ -31,8 +31,6 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { comingSoon } from "@/utilities/errors";
-import { panicProxy } from "@/utilities/panic-proxy";
 import { WidgetRow, SeparatorType, IconButtonWidget } from "@/components/widgets/widgets";
 
 import Separator from "@/components/widgets/separators/Separator.vue";
@@ -40,9 +38,8 @@ import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
 
-const wasm = import("@/../wasm/pkg").then(panicProxy);
-
 export default defineComponent({
+	inject: ["editor", "dialog"],
 	props: {
 		activeTool: { type: String },
 		activeToolOptions: { type: Object as PropType<Record<string, object>> },
@@ -50,10 +47,10 @@ export default defineComponent({
 	methods: {
 		async updateToolOptions(path: string[], newValue: number) {
 			this.setToolOption(path, newValue);
-			(await wasm).set_tool_options(this.activeTool || "", this.activeToolOptions);
+			this.editor.instance.set_tool_options(this.activeTool || "", this.activeToolOptions);
 		},
 		async sendToolMessage(message: string | object) {
-			(await wasm).send_tool_message(this.activeTool || "", message);
+			this.editor.instance.send_tool_message(this.activeTool || "", message);
 		},
 		// Traverses the given path and returns the direct parent of the option
 		getRecordContainingOption(optionPath: string[]): Record<string, number> {
@@ -87,7 +84,7 @@ export default defineComponent({
 				return;
 			}
 
-			comingSoon();
+			this.dialog.comingSoon();
 		},
 	},
 	data() {
@@ -132,11 +129,11 @@ export default defineComponent({
 
 				{ kind: "Separator", props: { type: SeparatorType.Section } },
 
-				{ kind: "IconButton", tooltip: "Boolean Union", callback: () => comingSoon(197), props: { icon: "BooleanUnion", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Subtract Front", callback: () => comingSoon(197), props: { icon: "BooleanSubtractFront", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Subtract Back", callback: () => comingSoon(197), props: { icon: "BooleanSubtractBack", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Intersect", callback: () => comingSoon(197), props: { icon: "BooleanIntersect", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Difference", callback: () => comingSoon(197), props: { icon: "BooleanDifference", size: 24 } },
+				{ 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: "Separator", props: { type: SeparatorType.Related } },
 
@@ -157,7 +154,6 @@ export default defineComponent({
 		return {
 			toolOptionsWidgets,
 			SeparatorType,
-			comingSoon,
 		};
 	},
 	components: {
diff --git a/frontend/src/components/window/title-bar/TitleBar.vue b/frontend/src/components/window/title-bar/TitleBar.vue
index 28f74f61..079d7ef1 100644
--- a/frontend/src/components/window/title-bar/TitleBar.vue
+++ b/frontend/src/components/window/title-bar/TitleBar.vue
@@ -4,7 +4,7 @@
 		<MenuBarInput v-if="platform !== ApplicationPlatform.Mac" />
 	</div>
 	<div class="header-third">
-		<WindowTitle :title="`${documents.documents[documents.activeDocumentIndex].displayName} - Graphite`" />
+		<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
 	</div>
 	<div class="header-third">
 		<WindowButtonsWindows :maximized="maximized" v-if="platform === ApplicationPlatform.Windows || platform === ApplicationPlatform.Linux" />
@@ -52,6 +52,11 @@ export default defineComponent({
 			ApplicationPlatform,
 		};
 	},
+	computed: {
+		activeDocumentDisplayName() {
+			return this.documents.state.documents[this.documents.state.activeDocumentIndex].displayName;
+		},
+	},
 	components: {
 		MenuBarInput,
 		WindowTitle,
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWeb.vue b/frontend/src/components/window/title-bar/WindowButtonsWeb.vue
index c657ab24..45a601bb 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWeb.vue
+++ b/frontend/src/components/window/title-bar/WindowButtonsWeb.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="window-buttons-web" @click="handleClick" :title="fullscreen.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
+	<div class="window-buttons-web" @click="handleClick" :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.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
+		<IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
 	</div>
 </template>
 
@@ -33,24 +33,20 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import fullscreen, { keyboardLockApiSupported, enterFullscreen, exitFullscreen } from "@/utilities/fullscreen";
-
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
-const canUseKeyboardLock = keyboardLockApiSupported();
-
 export default defineComponent({
 	inject: ["fullscreen"],
 	methods: {
 		async handleClick() {
-			if (fullscreen.windowFullscreen) exitFullscreen();
-			else enterFullscreen();
+			if (this.fullscreen.state.windowFullscreen) this.fullscreen.exitFullscreen();
+			else this.fullscreen.enterFullscreen();
 		},
 	},
 	computed: {
 		requestFullscreenHotkeys() {
-			return canUseKeyboardLock && !fullscreen.keyboardLocked;
+			return this.fullscreen.keyboardLockApiSupported && !this.fullscreen.state.keyboardLocked;
 		},
 	},
 	components: {
diff --git a/frontend/src/components/workspace/Panel.vue b/frontend/src/components/workspace/Panel.vue
index a5a53860..fd4bf79d 100644
--- a/frontend/src/components/workspace/Panel.vue
+++ b/frontend/src/components/workspace/Panel.vue
@@ -10,17 +10,17 @@
 					@click.middle="
 						(e) => {
 							e.stopPropagation();
-							closeDocumentWithConfirmation(tabIndex);
+							documents.closeDocumentWithConfirmation(tabIndex);
 						}
 					"
-					@click="panelType === 'Document' && selectDocument(tabIndex)"
+					@click="panelType === 'Document' && documents.selectDocument(tabIndex)"
 				>
 					<span>{{ tabLabel }}</span>
 					<IconButton
 						:action="
 							(e) => {
 								e.stopPropagation();
-								closeDocumentWithConfirmation(tabIndex);
+								documents.closeDocumentWithConfirmation(tabIndex);
 							}
 						"
 						:icon="'CloseX'"
@@ -169,8 +169,6 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { selectDocument, closeDocumentWithConfirmation } from "@/utilities/documents";
-
 import Document from "@/components/panels/Document.vue";
 import Properties from "@/components/panels/Properties.vue";
 import LayerTree from "@/components/panels/LayerTree.vue";
@@ -180,6 +178,7 @@ import PopoverButton, { PopoverButtonIcon } from "@/components/widgets/buttons/P
 import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
 export default defineComponent({
+	inject: ["documents"],
 	components: {
 		Document,
 		Properties,
@@ -197,8 +196,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			selectDocument,
-			closeDocumentWithConfirmation,
 			PopoverButtonIcon,
 			MenuDirection,
 		};
diff --git a/frontend/src/components/workspace/Workspace.vue b/frontend/src/components/workspace/Workspace.vue
index 285ef465..a2391f58 100644
--- a/frontend/src/components/workspace/Workspace.vue
+++ b/frontend/src/components/workspace/Workspace.vue
@@ -5,8 +5,8 @@
 				:panelType="'Document'"
 				:tabCloseButtons="true"
 				:tabMinWidths="true"
-				:tabLabels="documents.documents.map((doc) => doc.displayName)"
-				:tabActiveIndex="documents.activeDocumentIndex"
+				:tabLabels="documents.state.documents.map((doc) => doc.displayName)"
+				:tabActiveIndex="documents.state.activeDocumentIndex"
 				ref="documentsPanel"
 			/>
 		</LayoutCol>
@@ -25,7 +25,7 @@
 			</LayoutRow> -->
 		</LayoutCol>
 	</LayoutRow>
-	<DialogModal v-if="dialog.visible" />
+	<DialogModal v-if="dialog.state.visible" />
 </template>
 
 <style lang="scss">
@@ -55,8 +55,6 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import "@/utilities/dialogs";
-
 import Panel from "@/components/workspace/Panel.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
@@ -75,8 +73,7 @@ export default defineComponent({
 	},
 	computed: {
 		activeDocumentIndex() {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			return (this as any).documents.activeDocumentIndex;
+			return this.documents.state.activeDocumentIndex;
 		},
 	},
 	watch: {
diff --git a/frontend/src/dispatcher/js-dispatcher.ts b/frontend/src/dispatcher/js-dispatcher.ts
new file mode 100644
index 00000000..b9db4e9a
--- /dev/null
+++ b/frontend/src/dispatcher/js-dispatcher.ts
@@ -0,0 +1,58 @@
+import { plainToInstance } from "class-transformer";
+import { JsMessageType, messageConstructors, JsMessage } from "@/dispatcher/js-messages";
+import type { RustEditorInstance, WasmInstance } from "@/state/wasm-loader";
+
+type JsMessageCallback<T extends JsMessage> = (messageData: T) => void;
+type JsMessageCallbackMap = {
+	// Don't know a better way of typing this since it can be any subclass of JsMessage
+	// The functions interacting with this map are strongly typed though around JsMessage
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	[message: string]: JsMessageCallback<any> | undefined;
+};
+
+export function createJsDispatcher() {
+	const subscriptions: JsMessageCallbackMap = {};
+
+	const subscribeJsMessage = <T extends JsMessage, Args extends unknown[]>(messageType: new (...args: Args) => T, callback: JsMessageCallback<T>) => {
+		subscriptions[messageType.name] = callback;
+	};
+
+	const handleJsMessage = (messageType: JsMessageType, messageData: Record<string, unknown>, wasm: WasmInstance, instance: RustEditorInstance) => {
+		const messageConstructor = messageConstructors[messageType];
+		if (!messageConstructor) {
+			// eslint-disable-next-line no-console
+			console.error(`Received a frontend message of type "${messageType}" but but was not able to parse the data.`);
+			return;
+		}
+
+		// Messages with non-empty data are provided by wasm-bindgen as an object with one key as the message name, like: { NameOfThisMessage: { ... } }
+		// Messages with empty data are provided by wasm-bindgen as a string with the message name, like: "NameOfThisMessage"
+		const unwrappedMessageData = messageData[messageType] || {};
+
+		const isJsMessageConstructor = (fn: typeof messageConstructor): fn is typeof JsMessage => {
+			return "jsMessageMarker" in fn;
+		};
+		let message: JsMessage;
+		if (isJsMessageConstructor(messageConstructor)) {
+			message = plainToInstance(messageConstructor, unwrappedMessageData);
+		} else {
+			message = messageConstructor(unwrappedMessageData, wasm, instance);
+		}
+
+		// It is ok to use constructor.name even with minification since it is used consistently with registerHandler
+		const callback = subscriptions[message.constructor.name];
+
+		if (callback && message) {
+			callback(message);
+		} else if (message) {
+			// eslint-disable-next-line no-console
+			console.error(`Received a frontend message of type "${messageType}" but no handler was registered for it from the client.`);
+		}
+	};
+
+	return {
+		subscribeJsMessage,
+		handleJsMessage,
+	};
+}
+export type JsDispatcher = ReturnType<typeof createJsDispatcher>;
diff --git a/frontend/src/utilities/js-messages.ts b/frontend/src/dispatcher/js-messages.ts
similarity index 79%
rename from frontend/src/utilities/js-messages.ts
rename to frontend/src/dispatcher/js-messages.ts
index 1fd8228b..a2b8420c 100644
--- a/frontend/src/utilities/js-messages.ts
+++ b/frontend/src/dispatcher/js-messages.ts
@@ -1,9 +1,10 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable camelcase */
 /* eslint-disable max-classes-per-file */
 
 import { Transform, Type } from "class-transformer";
 
+import type { RustEditorInstance, WasmInstance } from "@/state/wasm-loader";
+
 export class JsMessage {
 	// The marker provides a way to check if an object is a sub-class constructor for a jsMessage.
 	static readonly jsMessageMarker = true;
@@ -124,19 +125,25 @@ export class DisplayFolderTreeStructure extends JsMessage {
 		super();
 	}
 }
-export function newDisplayFolderTreeStructure(input: any): DisplayFolderTreeStructure {
-	const { ptr, len } = input.data_buffer;
-	const wasmMemoryBuffer = (window as any).wasmMemory().buffer;
+
+interface DataBuffer {
+	pointer: number;
+	length: number;
+}
+
+export function newDisplayFolderTreeStructure(input: { data_buffer: DataBuffer }, wasm: WasmInstance): DisplayFolderTreeStructure {
+	const { pointer, length } = input.data_buffer;
+	const wasmMemoryBuffer = wasm.wasm_memory().buffer;
 
 	// Decode the folder structure encoding
-	const encoding = new DataView(wasmMemoryBuffer, ptr, len);
+	const encoding = new DataView(wasmMemoryBuffer, pointer, length);
 
 	// The structure section indicates how to read through the upcoming layer list and assign depths to each layer
 	const structureSectionLength = Number(encoding.getBigUint64(0, true));
-	const structureSectionMsbSigned = new DataView(wasmMemoryBuffer, ptr + 8, structureSectionLength * 8);
+	const structureSectionMsbSigned = new DataView(wasmMemoryBuffer, pointer + 8, structureSectionLength * 8);
 
 	// The layer IDs section lists each layer ID sequentially in the tree, as it will show up in the panel
-	const layerIdsSection = new DataView(wasmMemoryBuffer, ptr + 8 + structureSectionLength * 8);
+	const layerIdsSection = new DataView(wasmMemoryBuffer, pointer + 8 + structureSectionLength * 8);
 
 	let layersEncountered = 0;
 	let currentFolder = new DisplayFolderTreeStructure(BigInt(-1), []);
@@ -189,7 +196,7 @@ export class SetCanvasRotation extends JsMessage {
 	readonly new_radians!: number;
 }
 
-function newPath(input: any): BigUint64Array {
+function newPath(input: number[][]): BigUint64Array {
 	// eslint-disable-next-line
 	const u32CombinedPairs = input.map((n: number[]) => BigInt((BigInt(n[0]) << BigInt(32)) | BigInt(n[1])));
 	return new BigUint64Array(u32CombinedPairs);
@@ -252,3 +259,31 @@ export const LayerTypeOptions = {
 } as const;
 
 export type LayerType = typeof LayerTypeOptions[keyof typeof LayerTypeOptions];
+
+// Any is used since the type of the object should be known from the rust side
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type JSMessageFactory = (data: any, wasm: WasmInstance, instance: RustEditorInstance) => JsMessage;
+type MessageMaker = typeof JsMessage | JSMessageFactory;
+
+export const messageConstructors: Record<string, MessageMaker> = {
+	UpdateCanvas,
+	UpdateScrollbars,
+	UpdateRulers,
+	ExportDocument,
+	SaveDocument,
+	OpenDocumentBrowse,
+	DisplayFolderTreeStructure: newDisplayFolderTreeStructure,
+	UpdateLayer,
+	SetActiveTool,
+	SetActiveDocument,
+	UpdateOpenDocumentsList,
+	UpdateWorkingColors,
+	SetCanvasZoom,
+	SetCanvasRotation,
+	DisplayError,
+	DisplayPanic,
+	DisplayConfirmationToCloseDocument,
+	DisplayConfirmationToCloseAllDocuments,
+	DisplayAboutGraphiteDialog,
+} as const;
+export type JsMessageType = keyof typeof messageConstructors;
diff --git a/frontend/src/lifetime/errors.ts b/frontend/src/lifetime/errors.ts
new file mode 100644
index 00000000..e136f354
--- /dev/null
+++ b/frontend/src/lifetime/errors.ts
@@ -0,0 +1,140 @@
+import { DialogState } from "@/state/dialog";
+import { TextButtonWidget } from "@/components/widgets/widgets";
+import { DisplayError, DisplayPanic } from "@/dispatcher/js-messages";
+import { EditorState } from "@/state/wasm-loader";
+import { stripIndents } from "@/utilities/strip-indents";
+
+export function initErrorHandling(editor: EditorState, dialogState: DialogState) {
+	// Graphite error dialog
+	editor.dispatcher.subscribeJsMessage(DisplayError, (displayError) => {
+		const okButton: TextButtonWidget = {
+			kind: "TextButton",
+			callback: async () => dialogState.dismissDialog(),
+			props: { label: "OK", emphasized: true, minWidth: 96 },
+		};
+		const buttons = [okButton];
+
+		dialogState.createDialog("Warning", displayError.title, displayError.description, buttons);
+	});
+
+	// Code panic dialog and console error
+	editor.dispatcher.subscribeJsMessage(DisplayPanic, (displayPanic) => {
+		// `Error.stackTraceLimit` is only available in V8/Chromium
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		(Error as any).stackTraceLimit = Infinity;
+		const stackTrace = new Error().stack || "";
+		const panicDetails = `${displayPanic.panic_info}\n\n${stackTrace}`;
+
+		// eslint-disable-next-line no-console
+		console.error(panicDetails);
+
+		const reloadButton: TextButtonWidget = {
+			kind: "TextButton",
+			callback: async () => window.location.reload(),
+			props: { label: "Reload", emphasized: true, minWidth: 96 },
+		};
+		const copyErrorLogButton: TextButtonWidget = {
+			kind: "TextButton",
+			callback: async () => navigator.clipboard.writeText(panicDetails),
+			props: { label: "Copy Error Log", emphasized: false, minWidth: 96 },
+		};
+		const reportOnGithubButton: TextButtonWidget = {
+			kind: "TextButton",
+			callback: async () => window.open(githubUrl(panicDetails), "_blank"),
+			props: { label: "Report Bug", emphasized: false, minWidth: 96 },
+		};
+		const buttons = [reloadButton, copyErrorLogButton, reportOnGithubButton];
+
+		dialogState.createDialog("Warning", displayPanic.title, displayPanic.description, buttons);
+	});
+}
+
+function githubUrl(panicDetails: string) {
+	const url = new URL("https://github.com/GraphiteEditor/Graphite/issues/new");
+
+	const body = stripIndents`
+		**Describe the Crash**
+		Explain clearly what you were doing when the crash occurred.
+
+		**Steps To Reproduce**
+		Describe precisely how the crash occurred, step by step, starting with a new editor window.
+		1. Open the Graphite Editor at https://editor.graphite.design
+		2. 
+		3. 
+		4. 
+		5. 
+
+		**Additional Details**
+		Provide any further information or context that you think would be helpful in fixing the issue. Screenshots or video can be linked or attached to this issue.
+
+		**Browser and OS**
+		${browserVersion()}, ${operatingSystem()}
+
+		**Stack Trace**
+		Copied from the crash dialog in the Graphite Editor:
+
+		\`\`\`
+		${panicDetails}
+		\`\`\`
+		`;
+
+	const fields = {
+		title: "[Crash Report] ",
+		body,
+		labels: ["Crash"].join(","),
+		projects: [].join(","),
+		milestone: "",
+		assignee: "",
+		template: "",
+	};
+
+	Object.entries(fields).forEach(([field, value]) => {
+		if (value) url.searchParams.set(field, value);
+	});
+
+	return url.toString();
+}
+
+function browserVersion(): string {
+	const agent = window.navigator.userAgent;
+	let match = agent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+
+	if (/trident/i.test(match[1])) {
+		const browser = /\brv[ :]+(\d+)/g.exec(agent) || [];
+		return `IE ${browser[1] || ""}`.trim();
+	}
+
+	if (match[1] === "Chrome") {
+		let browser = agent.match(/\bEdg\/(\d+)/);
+		if (browser !== null) return `Edge (Chromium) ${browser[1]}`;
+
+		browser = agent.match(/\bOPR\/(\d+)/);
+		if (browser !== null) return `Opera ${browser[1]}`;
+	}
+
+	match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, "-?"];
+
+	const browser = agent.match(/version\/(\d+)/i);
+	if (browser !== null) match.splice(1, 1, browser[1]);
+
+	return `${match[0]} ${match[1]}`;
+}
+
+function operatingSystem(): string {
+	const osTable: Record<string, string> = {
+		"Windows NT 10": "Windows 10 or 11",
+		"Windows NT 6.3": "Windows 8.1",
+		"Windows NT 6.2": "Windows 8",
+		"Windows NT 6.1": "Windows 7",
+		"Windows NT 6.0": "Windows Vista",
+		"Windows NT 5.1": "Windows XP",
+		"Windows NT 5.0": "Windows 2000",
+		Mac: "Mac",
+		X11: "Unix",
+		Linux: "Linux",
+		Unknown: "YOUR OPERATING SYSTEM",
+	};
+
+	const userAgentOS = Object.keys(osTable).find((key) => window.navigator.userAgent.includes(key));
+	return osTable[userAgentOS || "Unknown"];
+}
diff --git a/frontend/src/lifetime/input.ts b/frontend/src/lifetime/input.ts
new file mode 100644
index 00000000..95d1eb24
--- /dev/null
+++ b/frontend/src/lifetime/input.ts
@@ -0,0 +1,178 @@
+import { DialogState } from "@/state/dialog";
+import { FullscreenState } from "@/state/fullscreen";
+import { DocumentsState } from "@/state/documents";
+import { EditorState } from "@/state/wasm-loader";
+
+type EventName = keyof HTMLElementEventMap | keyof WindowEventHandlersEventMap;
+interface EventListenerTarget {
+	addEventListener: typeof window.addEventListener;
+	removeEventListener: typeof window.removeEventListener;
+}
+
+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: "mousemove", action: (e) => onMouseMove(e) },
+		{ target: window, eventName: "mousedown", action: (e) => onMouseDown(e) },
+		{ target: window, eventName: "mouseup", action: (e) => onMouseUp(e) },
+		{ target: window, eventName: "wheel", action: (e) => onMouseScroll(e), options: { passive: false } },
+	];
+
+	let viewportMouseInteractionOngoing = false;
+
+	const shouldRedirectKeyboardEventToBackend = (e: KeyboardEvent): boolean => {
+		// Don't redirect user input from text entry into HTML elements
+		const { target } = e;
+		if (target instanceof HTMLElement && (target.nodeName === "INPUT" || target.nodeName === "TEXTAREA" || target.isContentEditable)) return false;
+
+		// Don't redirect when a modal is covering the workspace
+		if (dialog.dialogIsVisible()) return false;
+
+		// Don't redirect a fullscreen request
+		if (e.key.toLowerCase() === "f11" && e.type === "keydown" && !e.repeat) {
+			e.preventDefault();
+			fullscreen.toggleFullscreen();
+			return false;
+		}
+
+		// Don't redirect a reload request
+		if (e.key.toLowerCase() === "f5") return false;
+
+		// Don't redirect debugging tools
+		if (e.key.toLowerCase() === "f12") return false;
+		if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "c") return false;
+		if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "i") return false;
+		if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "j") return false;
+
+		// Redirect to the backend
+		return true;
+	};
+
+	const onKeyDown = (e: KeyboardEvent) => {
+		if (shouldRedirectKeyboardEventToBackend(e)) {
+			e.preventDefault();
+			const modifiers = makeModifiersBitfield(e);
+			editor.instance.on_key_down(e.key, modifiers);
+			return;
+		}
+
+		if (dialog.dialogIsVisible()) {
+			if (e.key === "Escape") dialog.dismissDialog();
+			if (e.key === "Enter") {
+				dialog.submitDialog();
+
+				// Prevent the Enter key from acting like a click on the last clicked button, which might reopen the dialog
+				e.preventDefault();
+			}
+		}
+	};
+
+	const onKeyUp = (e: KeyboardEvent) => {
+		if (shouldRedirectKeyboardEventToBackend(e)) {
+			e.preventDefault();
+			const modifiers = makeModifiersBitfield(e);
+			editor.instance.on_key_up(e.key, modifiers);
+		}
+	};
+
+	const onMouseMove = (e: MouseEvent) => {
+		if (!e.buttons) viewportMouseInteractionOngoing = false;
+
+		const modifiers = makeModifiersBitfield(e);
+		editor.instance.on_mouse_move(e.clientX, e.clientY, e.buttons, modifiers);
+	};
+
+	const onMouseDown = (e: MouseEvent) => {
+		const { target } = e;
+		const inCanvas = target instanceof Element && target.closest(".canvas");
+		const inDialog = target instanceof Element && target.closest(".dialog-modal .floating-menu-content");
+
+		// Block middle mouse button auto-scroll mode
+		if (e.button === 1) e.preventDefault();
+
+		if (dialog.dialogIsVisible() && !inDialog) {
+			dialog.dismissDialog();
+			e.preventDefault();
+			e.stopPropagation();
+		}
+
+		if (inCanvas) viewportMouseInteractionOngoing = true;
+
+		if (viewportMouseInteractionOngoing) {
+			const modifiers = makeModifiersBitfield(e);
+			editor.instance.on_mouse_down(e.clientX, e.clientY, e.buttons, modifiers);
+		}
+	};
+
+	const onMouseUp = (e: MouseEvent) => {
+		if (!e.buttons) viewportMouseInteractionOngoing = false;
+
+		const modifiers = makeModifiersBitfield(e);
+		editor.instance.on_mouse_up(e.clientX, e.clientY, e.buttons, modifiers);
+	};
+
+	const onMouseScroll = (e: WheelEvent) => {
+		const { target } = e;
+		const inCanvas = target instanceof Element && target.closest(".canvas");
+
+		const horizontalScrollableElement = target instanceof Element && target.closest(".scrollable-x");
+		if (horizontalScrollableElement && e.deltaY !== 0) {
+			horizontalScrollableElement.scrollTo(horizontalScrollableElement.scrollLeft + e.deltaY, 0);
+			return;
+		}
+
+		if (inCanvas) {
+			e.preventDefault();
+			const modifiers = makeModifiersBitfield(e);
+			editor.instance.on_mouse_scroll(e.clientX, e.clientY, e.buttons, e.deltaX, e.deltaY, e.deltaZ, modifiers);
+		}
+	};
+
+	const onWindowResize = (container: HTMLElement) => {
+		const viewports = Array.from(container.querySelectorAll(".canvas"));
+		const boundsOfViewports = viewports.map((canvas) => {
+			const bounds = canvas.getBoundingClientRect();
+			return [bounds.left, bounds.top, bounds.right, bounds.bottom];
+		});
+
+		const flattened = boundsOfViewports.flat();
+		const data = Float64Array.from(flattened);
+
+		if (boundsOfViewports.length > 0) editor.instance.bounds_of_viewports(data);
+	};
+
+	const onBeforeUnload = (e: BeforeUnloadEvent) => {
+		const allDocumentsSaved = document.state.documents.reduce((acc, doc) => acc && doc.isSaved, true);
+		if (!allDocumentsSaved) {
+			e.returnValue = "Unsaved work will be lost if the web browser tab is closed. Close anyway?";
+			e.preventDefault();
+		}
+	};
+
+	const addListeners = () => {
+		listeners.forEach(({ target, eventName, action, options }) => target.addEventListener(eventName, action, options));
+	};
+
+	const removeListeners = () => {
+		listeners.forEach(({ target, eventName, action }) => target.removeEventListener(eventName, action));
+	};
+
+	// Run on creation
+	addListeners();
+	onWindowResize(container);
+
+	return {
+		removeListeners,
+	};
+}
+export type InputManager = ReturnType<typeof createInputManager>;
+
+export function makeModifiersBitfield(e: MouseEvent | KeyboardEvent): number {
+	return Number(e.ctrlKey) | (Number(e.shiftKey) << 1) | (Number(e.altKey) << 2);
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 75d61279..154ea9bb 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -4,38 +4,15 @@
 import "reflect-metadata";
 import { createApp } from "vue";
 
-import { fullscreenModeChanged } from "@/utilities/fullscreen";
-import { onKeyUp, onKeyDown, onMouseMove, onMouseDown, onMouseUp, onMouseScroll, onWindowResize, onBeforeUnload } from "@/utilities/input";
-import "@/utilities/errors";
-import App from "@/App.vue";
-import { panicProxy } from "@/utilities/panic-proxy";
+import "@/lifetime/errors";
+import { initWasm } from "@/state/wasm-loader";
 
-const wasm = import("@/../wasm/pkg").then(panicProxy);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(window as any).wasmMemory = undefined;
+import App from "@/App.vue";
 
 (async () => {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	(window as any).wasmMemory = (await wasm).wasm_memory;
+	// Initialize the WASM editor backend
+	await initWasm();
 
 	// Initialize the Vue application
 	createApp(App).mount("#app");
-
-	// Bind global browser events
-	window.addEventListener("resize", onWindowResize);
-	onWindowResize();
-
-	window.addEventListener("beforeunload", onBeforeUnload);
-
-	document.addEventListener("contextmenu", (e) => e.preventDefault());
-	document.addEventListener("fullscreenchange", () => fullscreenModeChanged());
-
-	window.addEventListener("keyup", onKeyUp);
-	window.addEventListener("keydown", onKeyDown);
-
-	window.addEventListener("mousemove", onMouseMove);
-	window.addEventListener("mousedown", onMouseDown);
-	window.addEventListener("mouseup", onMouseUp);
-
-	window.addEventListener("wheel", onMouseScroll, { passive: false });
 })();
diff --git a/frontend/src/state/dialog.ts b/frontend/src/state/dialog.ts
new file mode 100644
index 00000000..eabc98e2
--- /dev/null
+++ b/frontend/src/state/dialog.ts
@@ -0,0 +1,118 @@
+import { reactive, readonly } from "vue";
+
+import { TextButtonWidget } from "@/components/widgets/widgets";
+import { EditorState } from "@/state/wasm-loader";
+import { DisplayAboutGraphiteDialog } from "@/dispatcher/js-messages";
+import { stripIndents } from "@/utilities/strip-indents";
+
+export function createDialogState(editor: EditorState) {
+	const state = reactive({
+		visible: false,
+		icon: "",
+		heading: "",
+		details: "",
+		buttons: [] as TextButtonWidget[],
+	});
+
+	const createDialog = (icon: string, heading: string, details: string, buttons: TextButtonWidget[]) => {
+		state.visible = true;
+		state.icon = icon;
+		state.heading = heading;
+		state.details = details;
+		state.buttons = buttons;
+	};
+
+	const dismissDialog = () => {
+		state.visible = false;
+	};
+
+	const submitDialog = () => {
+		const firstEmphasizedButton = state.buttons.find((button) => button.props.emphasized && button.callback);
+		if (firstEmphasizedButton) {
+			// If statement satisfies TypeScript
+			if (firstEmphasizedButton.callback) firstEmphasizedButton.callback();
+		}
+	};
+
+	const dialogIsVisible = (): boolean => {
+		return state.visible;
+	};
+
+	const comingSoon = (issueNumber?: number) => {
+		const bugMessage = `— but you can help add it!\nSee issue #${issueNumber} on GitHub.`;
+		const details = `This feature is not implemented yet${issueNumber ? bugMessage : ""}`;
+
+		const okButton: TextButtonWidget = {
+			kind: "TextButton",
+			callback: async () => dismissDialog(),
+			props: { label: "OK", emphasized: true, minWidth: 96 },
+		};
+		const issueButton: TextButtonWidget = {
+			kind: "TextButton",
+			callback: async () => window.open(`https://github.com/GraphiteEditor/Graphite/issues/${issueNumber}`, "_blank"),
+			props: { label: `Issue #${issueNumber}`, minWidth: 96 },
+		};
+		const buttons = [okButton];
+		if (issueNumber) buttons.push(issueButton);
+
+		createDialog("Warning", "Coming soon", details, buttons);
+	};
+
+	const onAboutHandler = () => {
+		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")}`;
+		const timezoneName = Intl.DateTimeFormat(undefined, { timeZoneName: "long" })
+			.formatToParts(new Date())
+			.find((part) => part.type === "timeZoneName");
+		const timezoneNameString = timezoneName && timezoneName.value;
+
+		const hash = (process.env.VUE_APP_COMMIT_HASH || "").substring(0, 12);
+
+		const details = stripIndents`
+			Release Series: ${process.env.VUE_APP_RELEASE_SERIES}
+
+			Date: ${dateString} ${timeString} ${timezoneNameString}
+			Hash: ${hash}
+			Branch: ${process.env.VUE_APP_COMMIT_BRANCH}
+			`;
+
+		const buttons: TextButtonWidget[] = [
+			{
+				kind: "TextButton",
+				callback: () => 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"),
+				props: { label: "Credits", emphasized: false, minWidth: 0 },
+			},
+			{
+				kind: "TextButton",
+				callback: () => 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"),
+				props: { label: "Third-Party Licenses", emphasized: false, minWidth: 0 },
+			},
+		];
+
+		createDialog("GraphiteLogo", "Graphite", details, buttons);
+	};
+
+	// Run on creation
+	editor.dispatcher.subscribeJsMessage(DisplayAboutGraphiteDialog, () => onAboutHandler());
+
+	return {
+		state: readonly(state),
+		createDialog,
+		dismissDialog,
+		submitDialog,
+		dialogIsVisible,
+		comingSoon,
+	};
+}
+export type DialogState = ReturnType<typeof createDialogState>;
diff --git a/frontend/src/state/documents.ts b/frontend/src/state/documents.ts
new file mode 100644
index 00000000..7bcbaabe
--- /dev/null
+++ b/frontend/src/state/documents.ts
@@ -0,0 +1,136 @@
+/* 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,
+	ExportDocument,
+	OpenDocumentBrowse,
+	SaveDocument,
+	SetActiveDocument,
+	UpdateOpenDocumentsList,
+} from "@/dispatcher/js-messages";
+
+class DocumentSaveState {
+	readonly displayName: string;
+
+	constructor(readonly name: string, readonly isSaved: boolean) {
+		this.displayName = `${name}${isSaved ? "" : "*"}`;
+	}
+}
+
+export function createDocumentsState(editor: EditorState, dialogState: DialogState) {
+	const state = reactive({
+		unsaved: false,
+		documents: [] as DocumentSaveState[],
+		activeDocumentIndex: 0,
+	});
+
+	const selectDocument = (tabIndex: number) => {
+		editor.instance.select_document(tabIndex);
+	};
+
+	const closeDocumentWithConfirmation = (tabIndex: number) => {
+		// Close automatically if it's already saved, no confirmation is needed
+		const targetDocument = state.documents[tabIndex];
+		if (targetDocument.isSaved) {
+			editor.instance.close_document(tabIndex);
+			return;
+		}
+
+		// Switch to the document that's being prompted to close
+		selectDocument(tabIndex);
+
+		// Show the close confirmation prompt
+		dialogState.createDialog("File", "Save changes before closing?", targetDocument.displayName, [
+			{
+				kind: "TextButton",
+				callback: () => {
+					editor.instance.save_document();
+					dialogState.dismissDialog();
+				},
+				props: { label: "Save", emphasized: true, minWidth: 96 },
+			},
+			{
+				kind: "TextButton",
+				callback: () => {
+					editor.instance.close_document(tabIndex);
+					dialogState.dismissDialog();
+				},
+				props: { label: "Discard", minWidth: 96 },
+			},
+			{
+				kind: "TextButton",
+				callback: () => {
+					dialogState.dismissDialog();
+				},
+				props: { label: "Cancel", minWidth: 96 },
+			},
+		]);
+	};
+
+	const closeAllDocumentsWithConfirmation = () => {
+		dialogState.createDialog("Copy", "Close all documents?", "Unsaved work will be lost!", [
+			{
+				kind: "TextButton",
+				callback: () => {
+					editor.instance.close_all_documents();
+					dialogState.dismissDialog();
+				},
+				props: { label: "Discard All", minWidth: 96 },
+			},
+			{
+				kind: "TextButton",
+				callback: () => {
+					dialogState.dismissDialog();
+				},
+				props: { label: "Cancel", minWidth: 96 },
+			},
+		]);
+	};
+
+	// Set up message subscriptions on creation
+	editor.dispatcher.subscribeJsMessage(UpdateOpenDocumentsList, (updateOpenDocumentList) => {
+		state.documents = updateOpenDocumentList.open_documents.map(({ name, isSaved }) => new DocumentSaveState(name, isSaved));
+	});
+
+	editor.dispatcher.subscribeJsMessage(SetActiveDocument, (setActiveDocument) => {
+		state.activeDocumentIndex = setActiveDocument.document_index;
+	});
+
+	editor.dispatcher.subscribeJsMessage(DisplayConfirmationToCloseDocument, (displayConfirmationToCloseDocument) => {
+		closeDocumentWithConfirmation(displayConfirmationToCloseDocument.document_index);
+	});
+
+	editor.dispatcher.subscribeJsMessage(DisplayConfirmationToCloseAllDocuments, () => {
+		closeAllDocumentsWithConfirmation();
+	});
+
+	editor.dispatcher.subscribeJsMessage(OpenDocumentBrowse, async () => {
+		const extension = editor.rawWasm.file_save_suffix();
+		const data = await upload(extension);
+		editor.instance.open_document_file(data.filename, data.content);
+	});
+
+	editor.dispatcher.subscribeJsMessage(ExportDocument, (exportDocument) => {
+		download(exportDocument.name, exportDocument.document);
+	});
+
+	editor.dispatcher.subscribeJsMessage(SaveDocument, (saveDocument) => {
+		download(saveDocument.name, saveDocument.document);
+	});
+
+	// Get the initial documents
+	editor.instance.get_open_documents_list();
+
+	return {
+		state: readonly(state),
+		selectDocument,
+		closeDocumentWithConfirmation,
+		closeAllDocumentsWithConfirmation,
+	};
+}
+export type DocumentsState = ReturnType<typeof createDocumentsState>;
diff --git a/frontend/src/state/fullscreen.ts b/frontend/src/state/fullscreen.ts
new file mode 100644
index 00000000..630bb024
--- /dev/null
+++ b/frontend/src/state/fullscreen.ts
@@ -0,0 +1,47 @@
+import { reactive, readonly } from "vue";
+
+export function createFullscreenState() {
+	const state = reactive({
+		windowFullscreen: false,
+		keyboardLocked: false,
+	});
+
+	const fullscreenModeChanged = () => {
+		state.windowFullscreen = Boolean(document.fullscreenElement);
+		if (!state.windowFullscreen) state.keyboardLocked = false;
+	};
+
+	// Experimental Keyboard API: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/keyboard
+	// 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 () => {
+		await document.documentElement.requestFullscreen();
+
+		if (keyboardLockApiSupported) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			await (navigator as any).keyboard.lock(["ControlLeft", "ControlRight"]);
+			state.keyboardLocked = true;
+		}
+	};
+
+	// eslint-disable-next-line class-methods-use-this
+	const exitFullscreen = async () => {
+		await document.exitFullscreen();
+	};
+
+	const toggleFullscreen = async () => {
+		if (state.windowFullscreen) await exitFullscreen();
+		else await enterFullscreen();
+	};
+
+	return {
+		state: readonly(state),
+		keyboardLockApiSupported,
+		enterFullscreen,
+		exitFullscreen,
+		toggleFullscreen,
+		fullscreenModeChanged,
+	};
+}
+export type FullscreenState = ReturnType<typeof createFullscreenState>;
diff --git a/frontend/src/state/wasm-loader.ts b/frontend/src/state/wasm-loader.ts
new file mode 100644
index 00000000..b8aff5a4
--- /dev/null
+++ b/frontend/src/state/wasm-loader.ts
@@ -0,0 +1,76 @@
+/* eslint-disable func-names */
+
+import { createJsDispatcher } from "@/dispatcher/js-dispatcher";
+import { JsMessageType } from "@/dispatcher/js-messages";
+
+export type WasmInstance = typeof import("@/../wasm/pkg");
+export type RustEditorInstance = InstanceType<WasmInstance["Editor"]>;
+
+let wasmImport: WasmInstance | null = null;
+export async function initWasm() {
+	if (wasmImport !== null) return;
+
+	wasmImport = await import("@/../wasm/pkg").then(panicProxy);
+}
+
+// This works by proxying every function call wrapping a try-catch block to filter out redundant and confusing
+// `RuntimeError: unreachable` exceptions sent to the console
+function panicProxy<T extends object>(module: T): T {
+	const proxyHandler = {
+		get(target: T, propKey: string | symbol, receiver: unknown): unknown {
+			const targetValue = Reflect.get(target, propKey, receiver);
+
+			// Keep the original value being accessed if it isn't a function
+			const isFunction = typeof targetValue === "function";
+			if (!isFunction) return targetValue;
+
+			// 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[]) {
+					// eslint-disable-next-line new-cap
+					const result = new targetValue(...args);
+					return panicProxy(result);
+				};
+			}
+
+			// Replace the original function with a wrapper function that runs the original in a try-catch block
+			return function (...args: unknown[]) {
+				let result;
+				try {
+					// @ts-expect-error TypeScript does not know what `this` is, since it should be able to be anything
+					result = targetValue.apply(this, args);
+				} catch (err) {
+					// Suppress `unreachable` WebAssembly.RuntimeError exceptions
+					if (!`${err}`.startsWith("RuntimeError: unreachable")) throw err;
+				}
+				return result;
+			};
+		},
+	};
+
+	return new Proxy<T>(module, proxyHandler);
+}
+
+function getWasmInstance() {
+	if (wasmImport) return wasmImport;
+	throw new Error("Editor WASM backend was not initialized at application startup");
+}
+
+export function createEditorState() {
+	const dispatcher = createJsDispatcher();
+	const rawWasm = getWasmInstance();
+
+	const rustCallback = (messageType: JsMessageType, data: Record<string, unknown>) => {
+		dispatcher.handleJsMessage(messageType, data, rawWasm, instance);
+	};
+
+	const instance = new rawWasm.Editor(rustCallback);
+
+	return {
+		dispatcher,
+		rawWasm,
+		instance,
+	};
+}
+export type EditorState = Readonly<ReturnType<typeof createEditorState>>;
diff --git a/frontend/src/utilities/dialog.ts b/frontend/src/utilities/dialog.ts
deleted file mode 100644
index 4921c6ed..00000000
--- a/frontend/src/utilities/dialog.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { reactive, readonly } from "vue";
-
-import { TextButtonWidget } from "@/components/widgets/widgets";
-
-const state = reactive({
-	visible: false,
-	icon: "",
-	heading: "",
-	details: "",
-	buttons: [] as TextButtonWidget[],
-});
-
-export function createDialog(icon: string, heading: string, details: string, buttons: TextButtonWidget[]) {
-	state.visible = true;
-	state.icon = icon;
-	state.heading = heading;
-	state.details = details;
-	state.buttons = buttons;
-}
-
-export function dismissDialog() {
-	state.visible = false;
-}
-
-export function submitDialog() {
-	const firstEmphasizedButton = state.buttons.find((button) => button.props.emphasized && button.callback);
-	if (firstEmphasizedButton) {
-		// If statement satisfies TypeScript
-		if (firstEmphasizedButton.callback) firstEmphasizedButton.callback();
-	}
-}
-
-export function dialogIsVisible(): boolean {
-	return state.visible;
-}
-
-export default readonly(state);
diff --git a/frontend/src/utilities/dialogs.ts b/frontend/src/utilities/dialogs.ts
deleted file mode 100644
index fb00b584..00000000
--- a/frontend/src/utilities/dialogs.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { subscribeJsMessage } from "@/utilities/js-message-dispatcher";
-import { DisplayAboutGraphiteDialog } from "@/utilities/js-messages";
-import { createDialog } from "@/utilities/dialog";
-import { TextButtonWidget } from "@/components/widgets/widgets";
-
-subscribeJsMessage(DisplayAboutGraphiteDialog, () => {
-	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")}`;
-	const timezoneName = Intl.DateTimeFormat(undefined, { timeZoneName: "long" })
-		.formatToParts(new Date())
-		.find((part) => part.type === "timeZoneName");
-	const timezoneNameString = timezoneName && timezoneName.value;
-
-	const hash = (process.env.VUE_APP_COMMIT_HASH || "").substring(0, 12);
-
-	const details = `
-Release Series: ${process.env.VUE_APP_RELEASE_SERIES}
-
-Date: ${dateString} ${timeString} ${timezoneNameString}
-Hash: ${hash}
-Branch: ${process.env.VUE_APP_COMMIT_BRANCH}
-`.trim();
-
-	const buttons: TextButtonWidget[] = [
-		{
-			kind: "TextButton",
-			callback: () => 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"),
-			props: { label: "Credits", emphasized: false, minWidth: 0 },
-		},
-		{
-			kind: "TextButton",
-			callback: () => 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"),
-			props: { label: "Third-Party Licenses", emphasized: false, minWidth: 0 },
-		},
-	];
-
-	createDialog("GraphiteLogo", "Graphite", details, buttons);
-});
diff --git a/frontend/src/utilities/documents.ts b/frontend/src/utilities/documents.ts
deleted file mode 100644
index da4f320f..00000000
--- a/frontend/src/utilities/documents.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import { reactive, readonly } from "vue";
-
-import { createDialog, dismissDialog } from "@/utilities/dialog";
-import { subscribeJsMessage } from "@/utilities/js-message-dispatcher";
-import {
-	DisplayConfirmationToCloseAllDocuments,
-	SetActiveDocument,
-	UpdateOpenDocumentsList,
-	DisplayConfirmationToCloseDocument,
-	ExportDocument,
-	SaveDocument,
-	OpenDocumentBrowse,
-} from "@/utilities/js-messages";
-import { download, upload } from "@/utilities/files";
-import { panicProxy } from "@/utilities/panic-proxy";
-
-const wasm = import("@/../wasm/pkg").then(panicProxy);
-
-class DocumentState {
-	readonly displayName: string;
-
-	constructor(readonly name: string, readonly isSaved: boolean) {
-		this.displayName = `${name}${isSaved ? "" : "*"}`;
-	}
-}
-
-const state = reactive({
-	documents: [] as DocumentState[],
-	activeDocumentIndex: 0,
-});
-
-export async function selectDocument(tabIndex: number) {
-	(await wasm).select_document(tabIndex);
-}
-
-export async function closeDocumentWithConfirmation(tabIndex: number) {
-	const targetDocument = state.documents[tabIndex];
-	if (targetDocument.isSaved) {
-		(await wasm).close_document(tabIndex);
-		return;
-	}
-
-	// Show the document is being prompted to close
-	await selectDocument(tabIndex);
-
-	const tabLabel = targetDocument.displayName;
-
-	createDialog("File", "Save changes before closing?", tabLabel, [
-		{
-			kind: "TextButton",
-			callback: async () => {
-				(await wasm).save_document();
-				dismissDialog();
-			},
-			props: { label: "Save", emphasized: true, minWidth: 96 },
-		},
-		{
-			kind: "TextButton",
-			callback: async () => {
-				(await wasm).close_document(tabIndex);
-				dismissDialog();
-			},
-			props: { label: "Discard", minWidth: 96 },
-		},
-		{
-			kind: "TextButton",
-			callback: async () => {
-				dismissDialog();
-			},
-			props: { label: "Cancel", minWidth: 96 },
-		},
-	]);
-}
-
-export async function closeAllDocumentsWithConfirmation() {
-	createDialog("Copy", "Close all documents?", "Unsaved work will be lost!", [
-		{
-			kind: "TextButton",
-			callback: async () => {
-				(await wasm).close_all_documents();
-				dismissDialog();
-			},
-			props: { label: "Discard All", minWidth: 96 },
-		},
-		{
-			kind: "TextButton",
-			callback: async () => {
-				dismissDialog();
-			},
-			props: { label: "Cancel", minWidth: 96 },
-		},
-	]);
-}
-
-export default readonly(state);
-
-subscribeJsMessage(UpdateOpenDocumentsList, (updateOpenDocumentList) => {
-	state.documents = updateOpenDocumentList.open_documents.map(({ name, isSaved }) => new DocumentState(name, isSaved));
-});
-
-subscribeJsMessage(SetActiveDocument, (setActiveDocument) => {
-	state.activeDocumentIndex = setActiveDocument.document_index;
-});
-
-subscribeJsMessage(DisplayConfirmationToCloseDocument, (displayConfirmationToCloseDocument) => {
-	closeDocumentWithConfirmation(displayConfirmationToCloseDocument.document_index);
-});
-
-subscribeJsMessage(DisplayConfirmationToCloseAllDocuments, () => {
-	closeAllDocumentsWithConfirmation();
-});
-
-subscribeJsMessage(OpenDocumentBrowse, async () => {
-	const extension = (await wasm).file_save_suffix();
-	const data = await upload(extension);
-	(await wasm).open_document_file(data.filename, data.content);
-});
-
-subscribeJsMessage(ExportDocument, (exportDocument) => {
-	download(exportDocument.name, exportDocument.document);
-});
-
-subscribeJsMessage(SaveDocument, (saveDocument) => {
-	download(saveDocument.name, saveDocument.document);
-});
-
-(async () => (await wasm).get_open_documents_list())();
diff --git a/frontend/src/utilities/errors.ts b/frontend/src/utilities/errors.ts
deleted file mode 100644
index f84daf3c..00000000
--- a/frontend/src/utilities/errors.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import { createDialog, dismissDialog } from "@/utilities/dialog";
-import { TextButtonWidget } from "@/components/widgets/widgets";
-import { subscribeJsMessage } from "@/utilities/js-message-dispatcher";
-import { DisplayError, DisplayPanic } from "@/utilities/js-messages";
-
-// Coming soon dialog
-export function comingSoon(issueNumber?: number) {
-	const bugMessage = `— but you can help add it!\nSee issue #${issueNumber} on GitHub.`;
-	const details = `This feature is not implemented yet${issueNumber ? bugMessage : ""}`;
-
-	const okButton: TextButtonWidget = {
-		kind: "TextButton",
-		callback: async () => dismissDialog(),
-		props: { label: "OK", emphasized: true, minWidth: 96 },
-	};
-	const issueButton: TextButtonWidget = {
-		kind: "TextButton",
-		callback: async () => window.open(`https://github.com/GraphiteEditor/Graphite/issues/${issueNumber}`, "_blank"),
-		props: { label: `Issue #${issueNumber}`, minWidth: 96 },
-	};
-	const buttons = [okButton];
-	if (issueNumber) buttons.push(issueButton);
-
-	createDialog("Warning", "Coming soon", details, buttons);
-}
-
-// Graphite error dialog
-subscribeJsMessage(DisplayError, (displayError) => {
-	const okButton: TextButtonWidget = {
-		kind: "TextButton",
-		callback: async () => dismissDialog(),
-		props: { label: "OK", emphasized: true, minWidth: 96 },
-	};
-	const buttons = [okButton];
-
-	createDialog("Warning", displayError.title, displayError.description, buttons);
-});
-
-// Code panic dialog and console error
-subscribeJsMessage(DisplayPanic, (displayPanic) => {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	(Error as any).stackTraceLimit = Infinity;
-	const stackTrace = new Error().stack || "";
-	const panicDetails = `${displayPanic.panic_info}\n\n${stackTrace}`;
-
-	// eslint-disable-next-line no-console
-	console.error(panicDetails);
-
-	const reloadButton: TextButtonWidget = {
-		kind: "TextButton",
-		callback: async () => window.location.reload(),
-		props: { label: "Reload", emphasized: true, minWidth: 96 },
-	};
-	const copyErrorLogButton: TextButtonWidget = {
-		kind: "TextButton",
-		callback: async () => navigator.clipboard.writeText(panicDetails),
-		props: { label: "Copy Error Log", emphasized: false, minWidth: 96 },
-	};
-	const reportOnGithubButton: TextButtonWidget = {
-		kind: "TextButton",
-		callback: async () => window.open(githubUrl(panicDetails), "_blank"),
-		props: { label: "Report Bug", emphasized: false, minWidth: 96 },
-	};
-	const buttons = [reloadButton, copyErrorLogButton, reportOnGithubButton];
-
-	createDialog("Warning", displayPanic.title, displayPanic.description, buttons);
-});
-
-function githubUrl(panicDetails: string) {
-	const url = new URL("https://github.com/GraphiteEditor/Graphite/issues/new");
-
-	const body = `
-**Describe the Crash**
-Explain clearly what you were doing when the crash occurred.
-
-**Steps To Reproduce**
-Describe precisely how the crash occurred, step by step, starting with a new editor window.
-1. Open the Graphite Editor at https://editor.graphite.design
-2. 
-3. 
-4. 
-5. 
-
-**Additional Details**
-Provide any further information or context that you think would be helpful in fixing the issue. Screenshots or video can be linked or attached to this issue.
-
-**Browser and OS**
-${browserVersion()}, ${operatingSystem()}
-
-**Stack Trace**
-Copied from the crash dialog in the Graphite Editor:
-
-\`\`\`
-${panicDetails}
-\`\`\`
-`.trim();
-
-	const fields = {
-		title: "[Crash Report] ",
-		body,
-		labels: ["Crash"].join(","),
-		projects: [].join(","),
-		milestone: "",
-		assignee: "",
-		template: "",
-	};
-
-	Object.entries(fields).forEach(([field, value]) => {
-		if (value) url.searchParams.set(field, value);
-	});
-
-	return url.toString();
-}
-
-function browserVersion(): string {
-	const agent = window.navigator.userAgent;
-	let match = agent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
-
-	if (/trident/i.test(match[1])) {
-		const browser = /\brv[ :]+(\d+)/g.exec(agent) || [];
-		return `IE ${browser[1] || ""}`.trim();
-	}
-
-	if (match[1] === "Chrome") {
-		let browser = agent.match(/\bEdg\/(\d+)/);
-		if (browser !== null) return `Edge (Chromium) ${browser[1]}`;
-
-		browser = agent.match(/\bOPR\/(\d+)/);
-		if (browser !== null) return `Opera ${browser[1]}`;
-	}
-
-	match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, "-?"];
-
-	const browser = agent.match(/version\/(\d+)/i);
-	if (browser !== null) match.splice(1, 1, browser[1]);
-
-	return `${match[0]} ${match[1]}`;
-}
-
-function operatingSystem(): string {
-	const osTable: Record<string, string> = {
-		"Windows NT 10": "Windows 10 or 11",
-		"Windows NT 6.3": "Windows 8.1",
-		"Windows NT 6.2": "Windows 8",
-		"Windows NT 6.1": "Windows 7",
-		"Windows NT 6.0": "Windows Vista",
-		"Windows NT 5.1": "Windows XP",
-		"Windows NT 5.0": "Windows 2000",
-		Mac: "Mac",
-		X11: "Unix",
-		Linux: "Linux",
-		Unknown: "YOUR OPERATING SYSTEM",
-	};
-
-	const userAgentOS = Object.keys(osTable).find((key) => window.navigator.userAgent.includes(key));
-	return osTable[userAgentOS || "Unknown"];
-}
diff --git a/frontend/src/utilities/fullscreen.ts b/frontend/src/utilities/fullscreen.ts
deleted file mode 100644
index 744e0a7b..00000000
--- a/frontend/src/utilities/fullscreen.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { reactive, readonly } from "vue";
-
-const state = reactive({
-	windowFullscreen: false,
-	keyboardLocked: false,
-});
-
-export function fullscreenModeChanged() {
-	state.windowFullscreen = Boolean(document.fullscreenElement);
-	if (!state.windowFullscreen) state.keyboardLocked = false;
-}
-
-export function keyboardLockApiSupported(): boolean {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	return "keyboard" in navigator && "lock" in (navigator as any).keyboard;
-}
-
-export async function enterFullscreen() {
-	await document.documentElement.requestFullscreen();
-
-	if (keyboardLockApiSupported()) {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		await (navigator as any).keyboard.lock(["ControlLeft", "ControlRight"]);
-		state.keyboardLocked = true;
-	}
-}
-
-export async function exitFullscreen() {
-	await document.exitFullscreen();
-}
-
-export async function toggleFullscreen() {
-	if (state.windowFullscreen) await exitFullscreen();
-	else await enterFullscreen();
-}
-
-export default readonly(state);
diff --git a/frontend/src/utilities/input.ts b/frontend/src/utilities/input.ts
deleted file mode 100644
index e588619f..00000000
--- a/frontend/src/utilities/input.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { toggleFullscreen } from "@/utilities/fullscreen";
-import { dialogIsVisible, dismissDialog, submitDialog } from "@/utilities/dialog";
-import { panicProxy } from "@/utilities/panic-proxy";
-import documents from "@/utilities/documents";
-
-const wasm = import("@/../wasm/pkg").then(panicProxy);
-
-let viewportMouseInteractionOngoing = false;
-
-// Keyboard events
-
-function shouldRedirectKeyboardEventToBackend(e: KeyboardEvent): boolean {
-	// Don't redirect user input from text entry into HTML elements
-	const target = e.target as HTMLElement;
-	if (target.nodeName === "INPUT" || target.nodeName === "TEXTAREA" || target.isContentEditable) return false;
-
-	// Don't redirect when a modal is covering the workspace
-	if (dialogIsVisible()) return false;
-
-	// Don't redirect a fullscreen request
-	if (e.key.toLowerCase() === "f11" && e.type === "keydown" && !e.repeat) {
-		e.preventDefault();
-		toggleFullscreen();
-		return false;
-	}
-
-	// Don't redirect a reload request
-	if (e.key.toLowerCase() === "f5") return false;
-
-	// Don't redirect debugging tools
-	if (e.key.toLowerCase() === "f12") return false;
-	if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "c") return false;
-	if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "i") return false;
-	if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "j") return false;
-
-	// Redirect to the backend
-	return true;
-}
-
-export async function onKeyDown(e: KeyboardEvent) {
-	if (shouldRedirectKeyboardEventToBackend(e)) {
-		e.preventDefault();
-		const modifiers = makeModifiersBitfield(e);
-		(await wasm).on_key_down(e.key, modifiers);
-		return;
-	}
-
-	if (dialogIsVisible()) {
-		if (e.key === "Escape") dismissDialog();
-		if (e.key === "Enter") {
-			submitDialog();
-
-			// Prevent the Enter key from acting like a click on the last clicked button, which might reopen the dialog
-			e.preventDefault();
-		}
-	}
-}
-
-export async function onKeyUp(e: KeyboardEvent) {
-	if (shouldRedirectKeyboardEventToBackend(e)) {
-		e.preventDefault();
-		const modifiers = makeModifiersBitfield(e);
-		(await wasm).on_key_up(e.key, modifiers);
-	}
-}
-
-// Mouse events
-
-export async function onMouseMove(e: MouseEvent) {
-	if (!e.buttons) viewportMouseInteractionOngoing = false;
-
-	const modifiers = makeModifiersBitfield(e);
-	(await wasm).on_mouse_move(e.clientX, e.clientY, e.buttons, modifiers);
-}
-
-export async function onMouseDown(e: MouseEvent) {
-	const target = e.target && (e.target as HTMLElement);
-	const inCanvas = target && target.closest(".canvas");
-	const inDialog = target && target.closest(".dialog-modal .floating-menu-content");
-
-	// Block middle mouse button auto-scroll mode
-	if (e.button === 1) e.preventDefault();
-
-	if (dialogIsVisible() && !inDialog) {
-		dismissDialog();
-		e.preventDefault();
-		e.stopPropagation();
-	}
-
-	if (inCanvas) viewportMouseInteractionOngoing = true;
-
-	if (viewportMouseInteractionOngoing) {
-		const modifiers = makeModifiersBitfield(e);
-		(await wasm).on_mouse_down(e.clientX, e.clientY, e.buttons, modifiers);
-	}
-}
-
-export async function onMouseUp(e: MouseEvent) {
-	if (!e.buttons) viewportMouseInteractionOngoing = false;
-
-	const modifiers = makeModifiersBitfield(e);
-	(await wasm).on_mouse_up(e.clientX, e.clientY, e.buttons, modifiers);
-}
-
-export async function onMouseScroll(e: WheelEvent) {
-	const target = e.target && (e.target as HTMLElement);
-	const inCanvas = target && target.closest(".canvas");
-
-	const horizontalScrollableElement = e.target instanceof Element && e.target.closest(".scrollable-x");
-	if (horizontalScrollableElement && e.deltaY !== 0) {
-		horizontalScrollableElement.scrollTo(horizontalScrollableElement.scrollLeft + e.deltaY, 0);
-		return;
-	}
-
-	if (inCanvas) {
-		e.preventDefault();
-		const modifiers = makeModifiersBitfield(e);
-		(await wasm).on_mouse_scroll(e.clientX, e.clientY, e.buttons, e.deltaX, e.deltaY, e.deltaZ, modifiers);
-	}
-}
-
-export async function onWindowResize() {
-	const viewports = Array.from(document.querySelectorAll(".canvas"));
-	const boundsOfViewports = viewports.map((canvas) => {
-		const bounds = canvas.getBoundingClientRect();
-		return [bounds.left, bounds.top, bounds.right, bounds.bottom];
-	});
-
-	const flattened = boundsOfViewports.flat();
-	const data = Float64Array.from(flattened);
-
-	if (boundsOfViewports.length > 0) (await wasm).bounds_of_viewports(data);
-}
-
-export function onBeforeUnload(event: BeforeUnloadEvent) {
-	const allDocumentsSaved = documents.documents.reduce((acc, doc) => doc.isSaved && acc, true);
-	if (!allDocumentsSaved) {
-		event.returnValue = "Unsaved work will be lost if the web browser tab is closed. Close anyway?";
-		event.preventDefault();
-	}
-}
-
-export function makeModifiersBitfield(e: MouseEvent | KeyboardEvent): number {
-	return Number(e.ctrlKey) | (Number(e.shiftKey) << 1) | (Number(e.altKey) << 2);
-}
diff --git a/frontend/src/utilities/js-message-dispatcher-binding.ts b/frontend/src/utilities/js-message-dispatcher-binding.ts
deleted file mode 100644
index c6b3b942..00000000
--- a/frontend/src/utilities/js-message-dispatcher-binding.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// This file is instantiated by wasm-bindgen in `/frontend/wasm/src/lib.rs` and re-exports the `handleJsMessage` function to
-// provide access to the global copy of `js-message-dispatcher.ts` with its shared state, not an isolated duplicate with empty state
-
-export { handleJsMessage } from "@/utilities/js-message-dispatcher";
diff --git a/frontend/src/utilities/js-message-dispatcher.ts b/frontend/src/utilities/js-message-dispatcher.ts
deleted file mode 100644
index bed4c47c..00000000
--- a/frontend/src/utilities/js-message-dispatcher.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { plainToInstance } from "class-transformer";
-import {
-	JsMessage,
-	DisplayConfirmationToCloseAllDocuments,
-	DisplayConfirmationToCloseDocument,
-	DisplayError,
-	DisplayPanic,
-	ExportDocument,
-	newDisplayFolderTreeStructure as DisplayFolderTreeStructure,
-	OpenDocumentBrowse,
-	SaveDocument,
-	SetActiveDocument,
-	SetActiveTool,
-	SetCanvasRotation,
-	SetCanvasZoom,
-	UpdateCanvas,
-	UpdateOpenDocumentsList,
-	UpdateRulers,
-	UpdateScrollbars,
-	UpdateWorkingColors,
-	UpdateLayer,
-	DisplayAboutGraphiteDialog,
-} from "@/utilities/js-messages";
-
-const messageConstructors = {
-	UpdateCanvas,
-	UpdateScrollbars,
-	UpdateRulers,
-	ExportDocument,
-	SaveDocument,
-	OpenDocumentBrowse,
-	DisplayFolderTreeStructure,
-	UpdateLayer,
-	SetActiveTool,
-	SetActiveDocument,
-	UpdateOpenDocumentsList,
-	UpdateWorkingColors,
-	SetCanvasZoom,
-	SetCanvasRotation,
-	DisplayError,
-	DisplayPanic,
-	DisplayConfirmationToCloseDocument,
-	DisplayConfirmationToCloseAllDocuments,
-	DisplayAboutGraphiteDialog,
-} as const;
-type JsMessageType = keyof typeof messageConstructors;
-
-type JsMessageCallback<T extends JsMessage> = (messageData: T) => void;
-type JsMessageCallbackMap = {
-	[message: string]: JsMessageCallback<any> | undefined;
-};
-
-type Constructs<T> = new (...args: any[]) => T;
-type ConstructsJsMessage = Constructs<JsMessage> & typeof JsMessage;
-
-const subscriptions = {} as JsMessageCallbackMap;
-
-export function subscribeJsMessage<T extends JsMessage>(messageType: Constructs<T>, callback: JsMessageCallback<T>) {
-	subscriptions[messageType.name] = callback;
-}
-
-export function handleJsMessage(messageType: JsMessageType, messageData: any) {
-	const messageConstructor = messageConstructors[messageType];
-	if (!messageConstructor) {
-		// eslint-disable-next-line no-console
-		console.error(`Received a frontend message of type "${messageType}" but but was not able to parse the data.`);
-		return;
-	}
-
-	// Messages with non-empty data are provided by wasm-bindgen as an object with one key as the message name, like: { NameOfThisMessage: { ... } }
-	// Messages with empty data are provided by wasm-bindgen as a string with the message name, like: "NameOfThisMessage"
-	const unwrappedMessageData = messageData[messageType] || {};
-
-	const isJsMessageConstructor = (fn: ConstructsJsMessage | ((data: any) => JsMessage)): fn is ConstructsJsMessage => {
-		return (fn as ConstructsJsMessage).jsMessageMarker !== undefined;
-	};
-	let message: JsMessage;
-	if (isJsMessageConstructor(messageConstructor)) {
-		message = plainToInstance(messageConstructor, unwrappedMessageData);
-	} else {
-		message = messageConstructor(unwrappedMessageData);
-	}
-
-	// It is ok to use constructor.name even with minification since it is used consistently with registerHandler
-	const callback = subscriptions[message.constructor.name];
-
-	if (callback && message) {
-		callback(message);
-	} else if (message) {
-		// eslint-disable-next-line no-console
-		console.error(`Received a frontend message of type "${messageType}" but no handler was registered for it from the client.`);
-	}
-}
diff --git a/frontend/src/utilities/panic-proxy.ts b/frontend/src/utilities/panic-proxy.ts
deleted file mode 100644
index 67e954cf..00000000
--- a/frontend/src/utilities/panic-proxy.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any, func-names */
-
-// Import this function and chain it on all `wasm` imports like: const wasm = import("@/../wasm/pkg").then(panicProxy);
-// This works by proxying every function call wrapping a try-catch block to filter out redundant and confusing `RuntimeError: unreachable` exceptions sent to the console
-export function panicProxy<T extends object>(module: T): T {
-	const proxyHandler = {
-		get(target: T, propKey: string | symbol, receiver: any): any {
-			const targetValue = Reflect.get(target, propKey, receiver);
-
-			// Keep the original value being accessed if it isn't a function or it is a class
-			// TODO: Figure out how to also wrap class constructor functions instead of skipping them for now
-			const isFunction = typeof targetValue === "function";
-			const isClass = isFunction && /^\s*class\s+/.test(targetValue.toString());
-			if (!isFunction || isClass) return targetValue;
-
-			// Replace the original function with a wrapper function that runs the original in a try-catch block
-			return function (...args: any) {
-				let result;
-				try {
-					// @ts-expect-error TypeScript does not know what `this` is, since it should be able to be anything
-					result = targetValue.apply(this, args);
-				} catch (err: any) {
-					// Suppress `unreachable` WebAssembly.RuntimeError exceptions
-					if (!`${err}`.startsWith("RuntimeError: unreachable")) throw err;
-				}
-				return result;
-			};
-		},
-	};
-
-	return new Proxy<T>(module, proxyHandler);
-}
diff --git a/frontend/src/utilities/strip-indents.ts b/frontend/src/utilities/strip-indents.ts
new file mode 100644
index 00000000..fff328b2
--- /dev/null
+++ b/frontend/src/utilities/strip-indents.ts
@@ -0,0 +1,12 @@
+export function stripIndents(stringPieces: TemplateStringsArray, ...substitutions: unknown[]) {
+	const interleavedSubstitutions = stringPieces.flatMap((stringPiece, index) => [stringPiece, substitutions[index] !== undefined ? substitutions[index] : ""]);
+	const stringLines = interleavedSubstitutions.join("").split("\n");
+
+	const visibleLineTabPrefixLengths = stringLines.map((line) => (line.match(/\S/) ? (line.match(/^(\t*)/) || [])[1].length : Infinity));
+	const commonTabPrefixLength = Math.min(...visibleLineTabPrefixLengths);
+
+	const linesWithoutCommonTabPrefix = stringLines.map((line) => line.substring(commonTabPrefixLength));
+	const multiLineString = linesWithoutCommonTabPrefix.join("\n");
+
+	return multiLineString.trim();
+}
diff --git a/frontend/wasm/Cargo.toml b/frontend/wasm/Cargo.toml
index 78973609..abcaa2a4 100644
--- a/frontend/wasm/Cargo.toml
+++ b/frontend/wasm/Cargo.toml
@@ -19,6 +19,7 @@ graphene = { path = "../../graphene", package = "graphite-graphene" }
 log = "0.4"
 serde = { version = "1.0", features = ["derive"] }
 wasm-bindgen = { version = "0.2.73", features = ["serde-serialize"] }
+js-sys = "0.3.55"
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3.22"
diff --git a/frontend/wasm/src/api.rs b/frontend/wasm/src/api.rs
index a3074662..036a2479 100644
--- a/frontend/wasm/src/api.rs
+++ b/frontend/wasm/src/api.rs
@@ -2,427 +2,446 @@
 // It serves as a thin wrapper over the editor backend API that relies
 // on the dispatcher messaging system and more complex Rust data types.
 
-use crate::dispatch;
+use std::cell::{Cell, UnsafeCell};
+
 use crate::helpers::Error;
 use crate::type_translators::{translate_blend_mode, translate_key, translate_tool_type};
+use crate::EDITOR_HAS_CRASHED;
 use editor::consts::FILE_SAVE_SUFFIX;
 use editor::input::input_preprocessor::ModifierKeys;
 use editor::input::mouse::{EditorMouseState, ScrollDelta, ViewportBounds};
+use editor::message_prelude::*;
 use editor::misc::EditorError;
 use editor::tool::{tool_options::ToolOptions, tools, ToolType};
+use editor::Color;
 use editor::LayerId;
-use editor::{message_prelude::*, Color};
 use wasm_bindgen::prelude::*;
 
-/// Intentionally panic for testing purposes
+// To avoid wasm-bindgen from checking mutable reference issues using WasmRefCell
+// we must make all methods take a non mutable reference to self. Not doing this creates
+// an issue when rust calls into JS which calls back to rust in the same call stack.
 #[wasm_bindgen]
-pub fn intentional_panic() {
-	panic!();
+pub struct Editor {
+	editor: UnsafeCell<editor::Editor>,
+	instance_received_crashed: Cell<bool>,
+	handle_response: js_sys::Function,
 }
 
+#[wasm_bindgen]
+impl Editor {
+	#[wasm_bindgen(constructor)]
+	pub fn new(handle_response: js_sys::Function) -> Editor {
+		Editor {
+			editor: UnsafeCell::new(editor::Editor::new()),
+			instance_received_crashed: Cell::new(false),
+			handle_response,
+		}
+	}
+
+	// Sends a message to the dispatcher in the Editor Backend
+	fn dispatch<T: Into<Message>>(&self, message: T) {
+		// Process no further messages after a crash to avoid spamming the console
+		let has_crashed = EDITOR_HAS_CRASHED.with(|crash_state| crash_state.borrow().clone());
+		if let Some(message) = has_crashed {
+			if !self.instance_received_crashed.get() {
+				self.handle_response(message);
+				self.instance_received_crashed.set(true);
+			}
+			return;
+		}
+
+		let editor = unsafe { self.editor.get().as_mut().unwrap() };
+		// Dispatch the message and receive a vector of FrontendMessage responses
+		let responses = editor.handle_message(message.into());
+		for response in responses.into_iter() {
+			// Send each FrontendMessage to the JavaScript frontend
+			self.handle_response(response);
+		}
+	}
+
+	// Sends a FrontendMessage to JavaScript
+	fn handle_response(&self, message: FrontendMessage) {
+		let message_type = message.to_discriminant().local_name();
+		let message_data = JsValue::from_serde(&message).expect("Failed to serialize FrontendMessage");
+
+		let js_return_value = self.handle_response.call2(&JsValue::null(), &JsValue::from(message_type), &message_data);
+
+		if let Err(error) = js_return_value {
+			log::error!(
+				"While handling FrontendMessage \"{:?}\", JavaScript threw an error: {:?}",
+				message.to_discriminant().local_name(),
+				error,
+			)
+		}
+	}
+
+	/// Modify the currently selected tool in the document state store
+	pub fn select_tool(&self, tool: String) -> Result<(), JsValue> {
+		match translate_tool_type(&tool) {
+			Some(tool) => {
+				let message = ToolMessage::ActivateTool(tool);
+				self.dispatch(message);
+
+				Ok(())
+			}
+			None => Err(Error::new(&format!("Couldn't select {} because it was not recognized as a valid tool", tool)).into()),
+		}
+	}
+
+	/// Update the options for a given tool
+	pub fn set_tool_options(&self, tool: String, options: &JsValue) -> Result<(), JsValue> {
+		match options.into_serde::<ToolOptions>() {
+			Ok(options) => match translate_tool_type(&tool) {
+				Some(tool) => {
+					let message = ToolMessage::SetToolOptions(tool, options);
+					self.dispatch(message);
+
+					Ok(())
+				}
+				None => Err(Error::new(&format!("Couldn't set options for {} because it was not recognized as a valid tool", tool)).into()),
+			},
+			Err(err) => Err(Error::new(&format!("Invalid JSON for ToolOptions: {}", err)).into()),
+		}
+	}
+
+	/// Send a message to a given tool
+	pub fn send_tool_message(&self, tool: String, message: &JsValue) -> Result<(), JsValue> {
+		let tool_message = match translate_tool_type(&tool) {
+			Some(tool) => match tool {
+				ToolType::Select => match message.into_serde::<tools::select::SelectMessage>() {
+					Ok(select_message) => Ok(ToolMessage::Select(select_message)),
+					Err(err) => Err(Error::new(&format!("Invalid message for {}: {}", tool, err)).into()),
+				},
+				_ => Err(Error::new(&format!("Tool message sending not implemented for {}", tool)).into()),
+			},
+			None => Err(Error::new(&format!("Couldn't send message for {} because it was not recognized as a valid tool", tool)).into()),
+		};
+
+		match tool_message {
+			Ok(message) => {
+				self.dispatch(message);
+
+				Ok(())
+			}
+			Err(err) => Err(err),
+		}
+	}
+
+	pub fn select_document(&self, document: usize) {
+		let message = DocumentsMessage::SelectDocument(document);
+		self.dispatch(message);
+	}
+
+	pub fn get_open_documents_list(&self) {
+		let message = DocumentsMessage::UpdateOpenDocumentsList;
+		self.dispatch(message);
+	}
+
+	pub fn new_document(&self) {
+		let message = DocumentsMessage::NewDocument;
+		self.dispatch(message);
+	}
+
+	pub fn open_document(&self) {
+		let message = DocumentsMessage::OpenDocument;
+		self.dispatch(message);
+	}
+
+	pub fn open_document_file(&self, name: String, content: String) {
+		let message = DocumentsMessage::OpenDocumentFile(name, content);
+		self.dispatch(message);
+	}
+
+	pub fn save_document(&self) {
+		let message = DocumentMessage::SaveDocument;
+		self.dispatch(message);
+	}
+
+	pub fn close_document(&self, document: usize) {
+		let message = DocumentsMessage::CloseDocument(document);
+		self.dispatch(message);
+	}
+
+	pub fn close_all_documents(&self) {
+		let message = DocumentsMessage::CloseAllDocuments;
+		self.dispatch(message);
+	}
+
+	pub fn close_active_document_with_confirmation(&self) {
+		let message = DocumentsMessage::CloseActiveDocumentWithConfirmation;
+		self.dispatch(message);
+	}
+
+	pub fn close_all_documents_with_confirmation(&self) {
+		let message = DocumentsMessage::CloseAllDocumentsWithConfirmation;
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen]
+	pub fn request_about_graphite_dialog(&self) {
+		let message = DocumentsMessage::RequestAboutGraphiteDialog;
+		self.dispatch(message);
+	}
+
+	/// Send new bounds when document panel viewports get resized or moved within the editor
+	/// [left, top, right, bottom]...
+	#[wasm_bindgen]
+	pub fn bounds_of_viewports(&self, bounds_of_viewports: &[f64]) {
+		let chunked: Vec<_> = bounds_of_viewports.chunks(4).map(ViewportBounds::from_slice).collect();
+
+		let message = InputPreprocessorMessage::BoundsOfViewports(chunked);
+		self.dispatch(message);
+	}
+
+	/// Mouse movement within the screenspace bounds of the viewport
+	pub fn on_mouse_move(&self, x: f64, y: f64, mouse_keys: u8, modifiers: u8) {
+		let editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
+
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		let message = InputPreprocessorMessage::MouseMove(editor_mouse_state, modifier_keys);
+		self.dispatch(message);
+	}
+
+	/// Mouse scrolling within the screenspace bounds of the viewport
+	pub fn on_mouse_scroll(&self, x: f64, y: f64, mouse_keys: u8, wheel_delta_x: i32, wheel_delta_y: i32, wheel_delta_z: i32, modifiers: u8) {
+		let mut editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
+		editor_mouse_state.scroll_delta = ScrollDelta::new(wheel_delta_x, wheel_delta_y, wheel_delta_z);
+
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		let message = InputPreprocessorMessage::MouseScroll(editor_mouse_state, modifier_keys);
+		self.dispatch(message);
+	}
+
+	/// A mouse button depressed within screenspace the bounds of the viewport
+	pub fn on_mouse_down(&self, x: f64, y: f64, mouse_keys: u8, modifiers: u8) {
+		let editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
+
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		let message = InputPreprocessorMessage::MouseDown(editor_mouse_state, modifier_keys);
+		self.dispatch(message);
+	}
+
+	/// A mouse button released
+	pub fn on_mouse_up(&self, x: f64, y: f64, mouse_keys: u8, modifiers: u8) {
+		let editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
+
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		let message = InputPreprocessorMessage::MouseUp(editor_mouse_state, modifier_keys);
+		self.dispatch(message);
+	}
+
+	/// A keyboard button depressed within screenspace the bounds of the viewport
+	pub fn on_key_down(&self, name: String, modifiers: u8) {
+		let key = translate_key(&name);
+		let modifiers = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		log::trace!("Key down {:?}, name: {}, modifiers: {:?}", key, name, modifiers);
+
+		let message = InputPreprocessorMessage::KeyDown(key, modifiers);
+		self.dispatch(message);
+	}
+
+	/// A keyboard button released
+	pub fn on_key_up(&self, name: String, modifiers: u8) {
+		let key = translate_key(&name);
+		let modifiers = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		log::trace!("Key up {:?}, name: {}, modifiers: {:?}", key, name, modifiers);
+
+		let message = InputPreprocessorMessage::KeyUp(key, modifiers);
+		self.dispatch(message);
+	}
+
+	/// Update primary color
+	pub fn update_primary_color(&self, red: f32, green: f32, blue: f32, alpha: f32) -> Result<(), JsValue> {
+		let primary_color = match Color::from_rgbaf32(red, green, blue, alpha) {
+			Some(color) => color,
+			None => return Err(Error::new("Invalid color").into()),
+		};
+
+		let message = ToolMessage::SelectPrimaryColor(primary_color);
+		self.dispatch(message);
+
+		Ok(())
+	}
+
+	/// Update secondary color
+	pub fn update_secondary_color(&self, red: f32, green: f32, blue: f32, alpha: f32) -> Result<(), JsValue> {
+		let secondary_color = match Color::from_rgbaf32(red, green, blue, alpha) {
+			Some(color) => color,
+			None => return Err(Error::new("Invalid color").into()),
+		};
+
+		let message = ToolMessage::SelectSecondaryColor(secondary_color);
+		self.dispatch(message);
+
+		Ok(())
+	}
+
+	/// Swap primary and secondary color
+	pub fn swap_colors(&self) {
+		let message = ToolMessage::SwapColors;
+		self.dispatch(message);
+	}
+
+	/// Reset primary and secondary colors to their defaults
+	pub fn reset_colors(&self) {
+		let message = ToolMessage::ResetColors;
+		self.dispatch(message);
+	}
+
+	/// Undo history one step
+	pub fn undo(&self) {
+		let message = DocumentMessage::Undo;
+		self.dispatch(message);
+	}
+
+	/// Redo history one step
+	pub fn redo(&self) {
+		let message = DocumentMessage::Redo;
+		self.dispatch(message);
+	}
+
+	/// Select all layers
+	pub fn select_all_layers(&self) {
+		let message = DocumentMessage::SelectAllLayers;
+		self.dispatch(message);
+	}
+
+	/// Deselect all layers
+	pub fn deselect_all_layers(&self) {
+		let message = DocumentMessage::DeselectAllLayers;
+		self.dispatch(message);
+	}
+
+	/// Reorder selected layer
+	pub fn reorder_selected_layers(&self, delta: i32) {
+		let message = DocumentMessage::ReorderSelectedLayers(delta);
+		self.dispatch(message);
+	}
+
+	/// Set the blend mode for the selected layers
+	pub fn set_blend_mode_for_selected_layers(&self, blend_mode_svg_style_name: String) -> Result<(), JsValue> {
+		let blend_mode = translate_blend_mode(blend_mode_svg_style_name.as_str());
+
+		match blend_mode {
+			Some(mode) => {
+				let message = DocumentMessage::SetBlendModeForSelectedLayers(mode);
+				self.dispatch(message);
+
+				Ok(())
+			}
+			None => Err(Error::new(&EditorError::Misc("UnknownBlendMode".to_string()).to_string()).into()),
+		}
+	}
+
+	/// Set the opacity for the selected layers
+	pub fn set_opacity_for_selected_layers(&self, opacity_percent: f64) {
+		let message = DocumentMessage::SetOpacityForSelectedLayers(opacity_percent / 100.);
+		self.dispatch(message);
+	}
+
+	/// Export the document
+	pub fn export_document(&self) {
+		let message = DocumentMessage::ExportDocument;
+		self.dispatch(message);
+	}
+
+	/// Set snapping disabled / enabled
+	pub fn set_snapping(&self, new_status: bool) {
+		let message = DocumentMessage::SetSnapping(new_status);
+		self.dispatch(message);
+	}
+
+	/// Sets the zoom to the value
+	pub fn set_canvas_zoom(&self, new_zoom: f64) {
+		let message = MovementMessage::SetCanvasZoom(new_zoom);
+		self.dispatch(message);
+	}
+
+	/// Zoom in to the next step
+	pub fn increase_canvas_zoom(&self) {
+		let message = MovementMessage::IncreaseCanvasZoom;
+		self.dispatch(message);
+	}
+
+	/// Zoom out to the next step
+	pub fn decrease_canvas_zoom(&self) {
+		let message = MovementMessage::DecreaseCanvasZoom;
+		self.dispatch(message);
+	}
+
+	/// Sets the rotation to the new value (in radians)
+	pub fn set_rotation(&self, new_radians: f64) {
+		let message = MovementMessage::SetCanvasRotation(new_radians);
+		self.dispatch(message);
+	}
+
+	/// Translates document (in viewport coords)
+	pub fn translate_canvas(&self, delta_x: f64, delta_y: f64) {
+		let message = MovementMessage::TranslateCanvas((delta_x, delta_y).into());
+		self.dispatch(message);
+	}
+
+	/// Translates document (in viewport coords)
+	pub fn translate_canvas_by_fraction(&self, delta_x: f64, delta_y: f64) {
+		let message = MovementMessage::TranslateCanvasByViewportFraction((delta_x, delta_y).into());
+		self.dispatch(message);
+	}
+
+	/// Update the list of selected layers. The layer paths have to be stored in one array and are separated by LayerId::MAX
+	pub fn select_layers(&self, paths: Vec<LayerId>) {
+		let paths = paths.split(|id| *id == LayerId::MAX).map(|path| path.to_vec()).collect();
+
+		let message = DocumentMessage::SetSelectedLayers(paths);
+		self.dispatch(message);
+	}
+
+	/// Toggle visibility of a layer from the layer list
+	pub fn toggle_layer_visibility(&self, path: Vec<LayerId>) {
+		let message = DocumentMessage::ToggleLayerVisibility(path);
+		self.dispatch(message);
+	}
+
+	/// Toggle expansions state of a layer from the layer list
+	pub fn toggle_layer_expansion(&self, path: Vec<LayerId>) {
+		let message = DocumentMessage::ToggleLayerExpansion(path);
+		self.dispatch(message);
+	}
+
+	/// Renames a layer from the layer list
+	pub fn rename_layer(&self, path: Vec<LayerId>, new_name: String) {
+		let message = DocumentMessage::RenameLayer(path, new_name);
+		self.dispatch(message);
+	}
+
+	/// Deletes a layer from the layer list
+	pub fn delete_layer(&self, path: Vec<LayerId>) {
+		let message = DocumentMessage::DeleteLayer(path);
+		self.dispatch(message);
+	}
+
+	/// Requests the backend to add a layer to the layer list
+	pub fn add_folder(&self, path: Vec<LayerId>) {
+		let message = DocumentMessage::CreateFolder(path);
+		self.dispatch(message);
+	}
+}
+
+/// Access a handle to WASM memory
 #[wasm_bindgen]
 pub fn wasm_memory() -> JsValue {
 	wasm_bindgen::memory()
 }
 
-/// Modify the currently selected tool in the document state store
+/// Intentionally panic for debugging purposes
 #[wasm_bindgen]
-pub fn select_tool(tool: String) -> Result<(), JsValue> {
-	match translate_tool_type(&tool) {
-		Some(tool) => {
-			let message = ToolMessage::ActivateTool(tool);
-			dispatch(message);
-
-			Ok(())
-		}
-		None => Err(Error::new(&format!("Couldn't select {} because it was not recognized as a valid tool", tool)).into()),
-	}
-}
-
-/// Update the options for a given tool
-#[wasm_bindgen]
-pub fn set_tool_options(tool: String, options: &JsValue) -> Result<(), JsValue> {
-	match options.into_serde::<ToolOptions>() {
-		Ok(options) => match translate_tool_type(&tool) {
-			Some(tool) => {
-				let message = ToolMessage::SetToolOptions(tool, options);
-				dispatch(message);
-
-				Ok(())
-			}
-			None => Err(Error::new(&format!("Couldn't set options for {} because it was not recognized as a valid tool", tool)).into()),
-		},
-		Err(err) => Err(Error::new(&format!("Invalid JSON for ToolOptions: {}", err)).into()),
-	}
-}
-
-/// Send a message to a given tool
-#[wasm_bindgen]
-pub fn send_tool_message(tool: String, message: &JsValue) -> Result<(), JsValue> {
-	let tool_message = match translate_tool_type(&tool) {
-		Some(tool) => match tool {
-			ToolType::Select => match message.into_serde::<tools::select::SelectMessage>() {
-				Ok(select_message) => Ok(ToolMessage::Select(select_message)),
-				Err(err) => Err(Error::new(&format!("Invalid message for {}: {}", tool, err)).into()),
-			},
-			_ => Err(Error::new(&format!("Tool message sending not implemented for {}", tool)).into()),
-		},
-		None => Err(Error::new(&format!("Couldn't send message for {} because it was not recognized as a valid tool", tool)).into()),
-	};
-
-	match tool_message {
-		Ok(message) => {
-			dispatch(message);
-
-			Ok(())
-		}
-		Err(err) => Err(err),
-	}
-}
-
-#[wasm_bindgen]
-pub fn select_document(document: usize) {
-	let message = DocumentsMessage::SelectDocument(document);
-	dispatch(message);
-}
-
-#[wasm_bindgen]
-pub fn get_open_documents_list() {
-	let message = DocumentsMessage::UpdateOpenDocumentsList;
-	dispatch(message);
-}
-
-#[wasm_bindgen]
-pub fn new_document() {
-	let message = DocumentsMessage::NewDocument;
-	dispatch(message);
-}
-
-#[wasm_bindgen]
-pub fn open_document() {
-	let message = DocumentsMessage::OpenDocument;
-	dispatch(message);
-}
-
-#[wasm_bindgen]
-pub fn open_document_file(name: String, content: String) {
-	let message = DocumentsMessage::OpenDocumentFile(name, content);
-	dispatch(message);
-}
-
-#[wasm_bindgen]
-pub fn save_document() {
-	let message = DocumentMessage::SaveDocument;
-	dispatch(message);
-}
-
-#[wasm_bindgen]
-pub fn close_document(document: usize) {
-	let message = DocumentsMessage::CloseDocument(document);
-	dispatch(message);
-}
-
-#[wasm_bindgen]
-pub fn close_all_documents() {
-	let message = DocumentsMessage::CloseAllDocuments;
-	dispatch(message);
-}
-
-#[wasm_bindgen]
-pub fn close_active_document_with_confirmation() {
-	let message = DocumentsMessage::CloseActiveDocumentWithConfirmation;
-	dispatch(message);
-}
-
-#[wasm_bindgen]
-pub fn close_all_documents_with_confirmation() {
-	let message = DocumentsMessage::CloseAllDocumentsWithConfirmation;
-	dispatch(message);
-}
-
-#[wasm_bindgen]
-pub fn request_about_graphite_dialog() {
-	let message = DocumentsMessage::RequestAboutGraphiteDialog;
-	dispatch(message);
-}
-
-/// Send new bounds when document panel viewports get resized or moved within the editor
-/// [left, top, right, bottom]...
-#[wasm_bindgen]
-pub fn bounds_of_viewports(bounds_of_viewports: &[f64]) {
-	let chunked: Vec<_> = bounds_of_viewports.chunks(4).map(ViewportBounds::from_slice).collect();
-
-	let message = InputPreprocessorMessage::BoundsOfViewports(chunked);
-	dispatch(message);
-}
-
-/// Mouse movement within the screenspace bounds of the viewport
-#[wasm_bindgen]
-pub fn on_mouse_move(x: f64, y: f64, mouse_keys: u8, modifiers: u8) {
-	let editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
-
-	let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
-
-	let message = InputPreprocessorMessage::MouseMove(editor_mouse_state, modifier_keys);
-	dispatch(message);
-}
-
-/// Mouse scrolling within the screenspace bounds of the viewport
-#[wasm_bindgen]
-pub fn on_mouse_scroll(x: f64, y: f64, mouse_keys: u8, wheel_delta_x: i32, wheel_delta_y: i32, wheel_delta_z: i32, modifiers: u8) {
-	let mut editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
-	editor_mouse_state.scroll_delta = ScrollDelta::new(wheel_delta_x, wheel_delta_y, wheel_delta_z);
-
-	let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
-
-	let message = InputPreprocessorMessage::MouseScroll(editor_mouse_state, modifier_keys);
-	dispatch(message);
-}
-
-/// A mouse button depressed within screenspace the bounds of the viewport
-#[wasm_bindgen]
-pub fn on_mouse_down(x: f64, y: f64, mouse_keys: u8, modifiers: u8) {
-	let editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
-
-	let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
-
-	let message = InputPreprocessorMessage::MouseDown(editor_mouse_state, modifier_keys);
-	dispatch(message);
-}
-
-/// A mouse button released
-#[wasm_bindgen]
-pub fn on_mouse_up(x: f64, y: f64, mouse_keys: u8, modifiers: u8) {
-	let editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
-
-	let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
-
-	let message = InputPreprocessorMessage::MouseUp(editor_mouse_state, modifier_keys);
-	dispatch(message);
-}
-
-/// A keyboard button depressed within screenspace the bounds of the viewport
-#[wasm_bindgen]
-pub fn on_key_down(name: String, modifiers: u8) {
-	let key = translate_key(&name);
-	let modifiers = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
-
-	log::trace!("Key down {:?}, name: {}, modifiers: {:?}", key, name, modifiers);
-
-	let message = InputPreprocessorMessage::KeyDown(key, modifiers);
-	dispatch(message);
-}
-
-/// A keyboard button released
-#[wasm_bindgen]
-pub fn on_key_up(name: String, modifiers: u8) {
-	let key = translate_key(&name);
-	let modifiers = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
-
-	log::trace!("Key up {:?}, name: {}, modifiers: {:?}", key, name, modifiers);
-
-	let message = InputPreprocessorMessage::KeyUp(key, modifiers);
-	dispatch(message);
-}
-
-/// Update primary color
-#[wasm_bindgen]
-pub fn update_primary_color(red: f32, green: f32, blue: f32, alpha: f32) -> Result<(), JsValue> {
-	let primary_color = match Color::from_rgbaf32(red, green, blue, alpha) {
-		Some(color) => color,
-		None => return Err(Error::new("Invalid color").into()),
-	};
-
-	let message = ToolMessage::SelectPrimaryColor(primary_color);
-	dispatch(message);
-
-	Ok(())
-}
-
-/// Update secondary color
-#[wasm_bindgen]
-pub fn update_secondary_color(red: f32, green: f32, blue: f32, alpha: f32) -> Result<(), JsValue> {
-	let secondary_color = match Color::from_rgbaf32(red, green, blue, alpha) {
-		Some(color) => color,
-		None => return Err(Error::new("Invalid color").into()),
-	};
-
-	let message = ToolMessage::SelectSecondaryColor(secondary_color);
-	dispatch(message);
-
-	Ok(())
-}
-
-/// Swap primary and secondary color
-#[wasm_bindgen]
-pub fn swap_colors() {
-	let message = ToolMessage::SwapColors;
-	dispatch(message);
-}
-
-/// Reset primary and secondary colors to their defaults
-#[wasm_bindgen]
-pub fn reset_colors() {
-	let message = ToolMessage::ResetColors;
-	dispatch(message);
-}
-
-/// Undo history one step
-#[wasm_bindgen]
-pub fn undo() {
-	let message = DocumentMessage::Undo;
-	dispatch(message);
-}
-
-/// Redo history one step
-#[wasm_bindgen]
-pub fn redo() {
-	let message = DocumentMessage::Redo;
-	dispatch(message);
-}
-
-/// Select all layers
-#[wasm_bindgen]
-pub fn select_all_layers() {
-	let message = DocumentMessage::SelectAllLayers;
-	dispatch(message);
-}
-
-/// Deselect all layers
-#[wasm_bindgen]
-pub fn deselect_all_layers() {
-	let message = DocumentMessage::DeselectAllLayers;
-	dispatch(message);
-}
-
-/// Reorder selected layer
-#[wasm_bindgen]
-pub fn reorder_selected_layers(delta: i32) {
-	let message = DocumentMessage::ReorderSelectedLayers(delta);
-	dispatch(message);
-}
-
-/// Set the blend mode for the selected layers
-#[wasm_bindgen]
-pub fn set_blend_mode_for_selected_layers(blend_mode_svg_style_name: String) -> Result<(), JsValue> {
-	let blend_mode = translate_blend_mode(blend_mode_svg_style_name.as_str());
-
-	match blend_mode {
-		Some(mode) => {
-			let message = DocumentMessage::SetBlendModeForSelectedLayers(mode);
-			dispatch(message);
-
-			Ok(())
-		}
-		None => Err(Error::new(&EditorError::Misc("UnknownBlendMode".to_string()).to_string()).into()),
-	}
-}
-
-/// Set the opacity for the selected layers
-#[wasm_bindgen]
-pub fn set_opacity_for_selected_layers(opacity_percent: f64) {
-	let message = DocumentMessage::SetOpacityForSelectedLayers(opacity_percent / 100.);
-	dispatch(message);
-}
-
-/// Export the document
-#[wasm_bindgen]
-pub fn export_document() {
-	let message = DocumentMessage::ExportDocument;
-	dispatch(message);
-}
-
-/// Set snapping disabled / enabled
-#[wasm_bindgen]
-pub fn set_snapping(new_status: bool) {
-	let message = DocumentMessage::SetSnapping(new_status);
-	dispatch(message);
-}
-
-/// Sets the zoom to the value
-#[wasm_bindgen]
-pub fn set_canvas_zoom(new_zoom: f64) {
-	let message = MovementMessage::SetCanvasZoom(new_zoom);
-	dispatch(message);
-}
-
-/// Zoom in to the next step
-#[wasm_bindgen]
-pub fn increase_canvas_zoom() {
-	let message = MovementMessage::IncreaseCanvasZoom;
-	dispatch(message);
-}
-
-/// Zoom out to the next step
-#[wasm_bindgen]
-pub fn decrease_canvas_zoom() {
-	let message = MovementMessage::DecreaseCanvasZoom;
-	dispatch(message);
-}
-
-/// Sets the rotation to the new value (in radians)
-#[wasm_bindgen]
-pub fn set_rotation(new_radians: f64) {
-	let message = MovementMessage::SetCanvasRotation(new_radians);
-	dispatch(message);
-}
-
-/// Translates document (in viewport coords)
-#[wasm_bindgen]
-pub fn translate_canvas(delta_x: f64, delta_y: f64) {
-	let message = MovementMessage::TranslateCanvas((delta_x, delta_y).into());
-	dispatch(message);
-}
-
-/// Translates document (in viewport coords)
-#[wasm_bindgen]
-pub fn translate_canvas_by_fraction(delta_x: f64, delta_y: f64) {
-	let message = MovementMessage::TranslateCanvasByViewportFraction((delta_x, delta_y).into());
-	dispatch(message);
-}
-
-/// Update the list of selected layers. The layer paths have to be stored in one array and are separated by LayerId::MAX
-#[wasm_bindgen]
-pub fn select_layers(paths: Vec<LayerId>) {
-	let paths = paths.split(|id| *id == LayerId::MAX).map(|path| path.to_vec()).collect();
-
-	let message = DocumentMessage::SetSelectedLayers(paths);
-	dispatch(message);
-}
-
-/// Toggle visibility of a layer from the layer list
-#[wasm_bindgen]
-pub fn toggle_layer_visibility(path: Vec<LayerId>) {
-	let message = DocumentMessage::ToggleLayerVisibility(path);
-	dispatch(message);
-}
-
-/// Toggle expansions state of a layer from the layer list
-#[wasm_bindgen]
-pub fn toggle_layer_expansion(path: Vec<LayerId>) {
-	let message = DocumentMessage::ToggleLayerExpansion(path);
-	dispatch(message);
-}
-
-/// Renames a layer from the layer list
-#[wasm_bindgen]
-pub fn rename_layer(path: Vec<LayerId>, new_name: String) {
-	let message = DocumentMessage::RenameLayer(path, new_name);
-	dispatch(message);
-}
-
-/// Deletes a layer from the layer list
-#[wasm_bindgen]
-pub fn delete_layer(path: Vec<LayerId>) {
-	let message = DocumentMessage::DeleteLayer(path);
-	dispatch(message);
-}
-
-/// Requests the backend to add a layer to the layer list
-#[wasm_bindgen]
-pub fn add_folder(path: Vec<LayerId>) {
-	let message = DocumentMessage::CreateFolder(path);
-	dispatch(message);
+pub fn intentional_panic() {
+	panic!();
 }
 
 /// Get the constant FILE_SAVE_SUFFIX
diff --git a/frontend/wasm/src/lib.rs b/frontend/wasm/src/lib.rs
index ba938194..572c873c 100644
--- a/frontend/wasm/src/lib.rs
+++ b/frontend/wasm/src/lib.rs
@@ -3,17 +3,15 @@ mod helpers;
 pub mod logging;
 pub mod type_translators;
 
-use editor::{message_prelude::*, Editor};
+use editor::message_prelude::FrontendMessage;
 use logging::WasmLog;
 use std::cell::RefCell;
 use std::panic;
-use std::sync::atomic::AtomicBool;
 use wasm_bindgen::prelude::*;
 
-// Set up the persistent editor backend state (the thread_local macro provides a way to initialize static variables with non-constant functions)
-thread_local! { pub static EDITOR_STATE: RefCell<Editor> = RefCell::new(Editor::new()); }
+// Set up the persistent editor backend state
 static LOGGER: WasmLog = WasmLog;
-static EDITOR_HAS_CRASHED: AtomicBool = AtomicBool::new(false);
+thread_local! { pub static EDITOR_HAS_CRASHED: RefCell<Option<FrontendMessage>> = RefCell::new(None); }
 
 // Initialize the backend
 #[wasm_bindgen(start)]
@@ -30,44 +28,5 @@ fn panic_hook(info: &panic::PanicInfo) {
 	let title = "The editor crashed — sorry about that".to_string();
 	let description = "An internal error occurred. Reload the editor to continue. Please report this by filing an issue on GitHub.".to_string();
 
-	handle_response(FrontendMessage::DisplayPanic { panic_info, title, description });
-
-	EDITOR_HAS_CRASHED.store(true, std::sync::atomic::Ordering::SeqCst);
-}
-
-// Sends a message to the dispatcher in the Editor Backend
-fn dispatch<T: Into<Message>>(message: T) {
-	// Process no further messages after a crash to avoid spamming the console
-	if EDITOR_HAS_CRASHED.load(std::sync::atomic::Ordering::SeqCst) {
-		return;
-	}
-
-	// Dispatch the message and receive a vector of FrontendMessage responses
-	let responses = EDITOR_STATE.with(|state| state.try_borrow_mut().ok().map(|mut state| state.handle_message(message.into())));
-	for response in responses.unwrap_or_default().into_iter() {
-		// Send each FrontendMessage to the JavaScript frontend
-		handle_response(response);
-	}
-}
-
-// Sends a FrontendMessage to JavaScript
-fn handle_response(message: FrontendMessage) {
-	let message_type = message.to_discriminant().local_name();
-	let message_data = JsValue::from_serde(&message).expect("Failed to serialize FrontendMessage");
-
-	let js_return_value = handleJsMessage(message_type, message_data);
-	if let Err(error) = js_return_value {
-		log::error!(
-			"While handling FrontendMessage \"{:?}\", JavaScript threw an error: {:?}",
-			message.to_discriminant().local_name(),
-			error,
-		)
-	}
-}
-
-// The JavaScript function to call into with each FrontendMessage
-#[wasm_bindgen(module = "/../src/utilities/js-message-dispatcher-binding.ts")]
-extern "C" {
-	#[wasm_bindgen(catch)]
-	fn handleJsMessage(responseType: String, responseData: JsValue) -> Result<(), JsValue>;
+	EDITOR_HAS_CRASHED.with(|crash_status| crash_status.borrow_mut().replace(FrontendMessage::DisplayPanic { panic_info, title, description }));
 }