From 1b4ac1aa57fbbfc18fb1c5c8a27c168748584889 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 8 Mar 2026 03:06:43 -0700
Subject: [PATCH 1/8] Clean up component setup/tear-down side effects

---
 frontend/src/components/Editor.svelte         |  2 +
 .../components/floating-menus/MenuList.svelte | 20 ++++++---
 .../src/components/layout/FloatingMenu.svelte | 19 ++++++--
 .../src/components/panels/Document.svelte     |  8 ++--
 .../widgets/inputs/NumberInput.svelte         | 40 ++++++++++++-----
 .../widgets/inputs/ScrollbarInput.svelte      |  6 ++-
 .../widgets/inputs/SpectrumInput.svelte       |  6 ++-
 frontend/src/state-providers/tooltip.ts       | 44 ++++++++++++-------
 8 files changed, 104 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte
index 0f14408298..d2f3a1ac3a 100644
--- a/frontend/src/components/Editor.svelte
+++ b/frontend/src/components/Editor.svelte
@@ -56,6 +56,8 @@
 	onDestroy(() => {
 		// Call the destructor for each manager
 		inputManagerDestructor();
+		// Clean up tooltip event listeners
+		tooltip.destroy();
 	});
 </script>
 
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index aeb196f736..d7f042f5d0 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -47,6 +47,7 @@
 	let reactiveEntries = entries;
 	let highlighted: MenuListEntry | undefined = activeEntry;
 	let virtualScrollingEntriesStart = 0;
+	let keydownListenerAdded = false;
 
 	// `watchOpen` is called only when `open` is changed from outside this component
 	$: watchOpen(open);
@@ -67,11 +68,13 @@
 	// TODO: The current approach is hacky and blocks the allowances for shortcuts like the key to open the browser's dev tools.
 	onMount(async () => {
 		await tick();
-		if (open && !inNestedMenuList()) addEventListener("keydown", keydown);
+		if (open && !inNestedMenuList() && !keydownListenerAdded) {
+			addEventListener("keydown", keydown);
+			keydownListenerAdded = true;
+		}
 	});
-	onDestroy(async () => {
-		await tick();
-		if (!inNestedMenuList()) removeEventListener("keydown", keydown);
+	onDestroy(() => {
+		removeEventListener("keydown", keydown);
 	});
 
 	function inNestedMenuList(): boolean {
@@ -129,8 +132,13 @@
 	}
 
 	function watchOpen(open: boolean) {
-		if (open && !inNestedMenuList()) addEventListener("keydown", keydown);
-		else if (!inNestedMenuList()) removeEventListener("keydown", keydown);
+		if (open && !inNestedMenuList() && !keydownListenerAdded) {
+			addEventListener("keydown", keydown);
+			keydownListenerAdded = true;
+		} else if (!open && !inNestedMenuList() && keydownListenerAdded) {
+			removeEventListener("keydown", keydown);
+			keydownListenerAdded = false;
+		}
 
 		highlighted = activeEntry;
 		dispatch("open", open);
diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte
index ba69a4bab0..4dece0b91e 100644
--- a/frontend/src/components/layout/FloatingMenu.svelte
+++ b/frontend/src/components/layout/FloatingMenu.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <script lang="ts">
-	import { onMount, afterUpdate, createEventDispatcher, tick } from "svelte";
+	import { onMount, onDestroy, afterUpdate, createEventDispatcher, tick } from "svelte";
 
 	import type { MenuDirection } from "@graphite/../wasm/pkg/graphite_wasm";
 	import { browserVersion } from "@graphite/utility-functions/platform";
@@ -54,9 +54,11 @@
 	// tell the floating menu content to use it as a min-width so the floating menu is at least the width of the parent element's floating menu spawner.
 	// This is the opposite concern of the natural width measurement system, which gets the natural width of the floating menu content in order for the
 	// spawner widget to optionally set its min-size to the floating menu's natural width.
-	let containerResizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+	const containerResizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
 		resizeObserverCallback(entries);
 	});
+
+	let dialogResizeObserver: ResizeObserver | undefined;
 	let wasOpen = open;
 	let measuringOngoing = false;
 	let measuringOngoingGuard = false;
@@ -134,7 +136,7 @@
 		// This solves antialiasing issues when the content isn't cleanly divisible by 2 and gets translated by (-50%, -50%) causing all its content to be blurry.
 		const floatingMenuContentDiv = floatingMenuContent?.div?.();
 		if (type === "Dialog" && floatingMenuContentDiv) {
-			const resizeObserver = new ResizeObserver((entries) => {
+			dialogResizeObserver = new ResizeObserver((entries) => {
 				entries.forEach((entry) => {
 					const existingWidth = Number(floatingMenuContentDiv.style.getPropertyValue("--even-integer-subpixel-expansion-x"));
 					const existingHeight = Number(floatingMenuContentDiv.style.getPropertyValue("--even-integer-subpixel-expansion-y"));
@@ -153,10 +155,19 @@
 					floatingMenuContentDiv.style.setProperty("--even-integer-subpixel-expansion-y", `${targetHeight - height}`);
 				});
 			});
-			resizeObserver.observe(floatingMenuContentDiv);
+			dialogResizeObserver.observe(floatingMenuContentDiv);
 		}
 	});
 
+	onDestroy(() => {
+		containerResizeObserver.disconnect();
+		dialogResizeObserver?.disconnect();
+		window.removeEventListener("pointermove", pointerMoveHandler);
+		window.removeEventListener("keydown", keyDownHandler);
+		window.removeEventListener("pointerdown", pointerDownHandler);
+		window.removeEventListener("pointerup", pointerUpHandler);
+	});
+
 	afterUpdate(() => {
 		// Gets the client bounds of the elements and apply relevant styles to them.
 		// TODO: Use DOM attribute bindings more whilst not causing recursive updates. Turning measuring on and off both causes the component to change,
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index 3dc412250e..737b7f3b64 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -74,6 +74,8 @@
 	let canvasHeight: number | undefined = undefined;
 
 	let devicePixelRatio: number | undefined;
+	let removeUpdatePixelRatio: (() => void) | undefined;
+	let viewportResizeObserver: ResizeObserver | undefined;
 
 	// Dimension is rounded up to the nearest even number because resizing is centered, and dividing an odd number by 2 for centering causes antialiasing
 	$: canvasWidthRoundedToEven = canvasWidth && (canvasWidth % 2 === 1 ? canvasWidth + 1 : canvasWidth);
@@ -436,7 +438,6 @@
 		// Not compatible with Safari:
 		// <https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#browser_compatibility>
 		// <https://bugs.webkit.org/show_bug.cgi?id=124862>
-		let removeUpdatePixelRatio: (() => void) | undefined = undefined;
 		const updatePixelRatio = () => {
 			removeUpdatePixelRatio?.();
 			const mediaQueryList = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
@@ -528,15 +529,16 @@
 		setupViewportResizeObserver(editor);
 
 		// Also observe the inner viewport for canvas sizing and ruler updates
-		const viewportResizeObserver = new ResizeObserver(() => {
+		viewportResizeObserver = new ResizeObserver(() => {
 			updateViewportInfo();
 		});
 		if (viewport) viewportResizeObserver.observe(viewport);
 	});
 
 	onDestroy(() => {
-		// Cleanup the viewport resize observer
 		cleanupViewportResizeObserver();
+		viewportResizeObserver?.disconnect();
+		removeUpdatePixelRatio?.();
 	});
 </script>
 
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index 3f5a71d74f..caf0c0a166 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -87,6 +87,8 @@
 	let shiftKeyDown = false;
 	// Track whether the Ctrl key is currently held down.
 	let ctrlKeyDown = false;
+	// Cleanup function for active drag interactions, called on destroy to prevent leaked listeners
+	let activeDragCleanup: (() => void) | undefined;
 
 	$: watchValue(value, unit);
 	$: sliderStepValue = isInteger ? (step === undefined ? 1 : step) : "any";
@@ -107,10 +109,21 @@
 		addEventListener("mousemove", trackShiftAndCtrl);
 	});
 	onDestroy(() => {
+		clearTimeout(repeatTimeout);
+
+		activeDragCleanup?.();
+
+		// Clean up any listeners related to tracking the Shift and Ctrl keys
 		removeEventListener("keydown", trackShiftAndCtrl);
 		removeEventListener("keyup", trackShiftAndCtrl);
 		removeEventListener("mousemove", trackShiftAndCtrl);
-		clearTimeout(repeatTimeout);
+
+		// Clean up any slider-related listeners that may be active
+		removeEventListener("mousedown", sliderAbortFromMousedown);
+		removeEventListener("keydown", sliderAbortFromMousedown);
+		removeEventListener("pointermove", sliderAbortFromDragging);
+		removeEventListener("keydown", sliderAbortFromDragging);
+		removeEventListener("keydown", incrementPressAbort);
 	});
 
 	// ===============================
@@ -333,10 +346,9 @@
 			alreadyActedGuard = true;
 
 			isDragging = true;
-			beginDrag(e);
 
-			removeEventListener("pointermove", onMove);
-			removeEventListener("pointerup", onUp);
+			activeDragCleanup?.();
+			beginDrag(e);
 		};
 		// If it's a mouseup, we'll begin editing the text field.
 		const onUp = () => {
@@ -346,11 +358,15 @@
 			isDragging = false;
 			self?.focus();
 
-			removeEventListener("pointermove", onMove);
-			removeEventListener("pointerup", onUp);
+			activeDragCleanup?.();
 		};
 		addEventListener("pointermove", onMove);
 		addEventListener("pointerup", onUp);
+		activeDragCleanup = () => {
+			removeEventListener("pointermove", onMove);
+			removeEventListener("pointerup", onUp);
+			activeDragCleanup = undefined;
+		};
 	}
 
 	function beginDrag(e: PointerEvent) {
@@ -449,16 +465,20 @@
 			cumulativeDragDelta = 0;
 
 			// Clean up the event listeners.
-			removeEventListener("pointerup", pointerUp);
-			removeEventListener("pointermove", pointerMove);
-			removeEventListener("pointerlockmove", pointerLockMove);
-			if (usePointerLock) document.removeEventListener("pointerlockchange", pointerLockChange);
+			activeDragCleanup?.();
 		};
 
 		addEventListener("pointerup", pointerUp);
 		addEventListener("pointermove", pointerMove);
 		addEventListener("pointerlockmove", pointerLockMove);
 		if (usePointerLock) document.addEventListener("pointerlockchange", pointerLockChange);
+		activeDragCleanup = () => {
+			removeEventListener("pointerup", pointerUp);
+			removeEventListener("pointermove", pointerMove);
+			removeEventListener("pointerlockmove", pointerLockMove);
+			if (usePointerLock) document.removeEventListener("pointerlockchange", pointerLockChange);
+			activeDragCleanup = undefined;
+		};
 	}
 
 	function pointerLockMoveUpdate(delta: number, slow: boolean, snapping: boolean, initialValue: number) {
diff --git a/frontend/src/components/widgets/inputs/ScrollbarInput.svelte b/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
index 99de85d703..4a0e3efc38 100644
--- a/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
+++ b/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher, onDestroy } from "svelte";
 
 	import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS, PRESS_REPEAT_INTERVAL_RAPID_MS } from "@graphite/io-managers/input";
 
@@ -187,6 +187,10 @@
 		if (e.key === "Escape") abortInteraction();
 	}
 
+	onDestroy(() => {
+		removeEvents();
+	});
+
 	function addEvents() {
 		window.addEventListener("pointerup", onPointerUp);
 		window.addEventListener("pointermove", onPointerMove);
diff --git a/frontend/src/components/widgets/inputs/SpectrumInput.svelte b/frontend/src/components/widgets/inputs/SpectrumInput.svelte
index cace7a6056..4def6f9c96 100644
--- a/frontend/src/components/widgets/inputs/SpectrumInput.svelte
+++ b/frontend/src/components/widgets/inputs/SpectrumInput.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-	import { createEventDispatcher, onDestroy } from "svelte";
+	import { createEventDispatcher, onMount, onDestroy } from "svelte";
 
 	import { evaluateGradientAtPosition } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Color, GradientStops } from "@graphite/../wasm/pkg/graphite_wasm";
@@ -338,7 +338,9 @@
 		document.removeEventListener("keydown", onKeyDown);
 	}
 
-	document.addEventListener("keydown", deleteStop);
+	onMount(() => {
+		document.addEventListener("keydown", deleteStop);
+	});
 	onDestroy(() => {
 		removeEvents();
 		document.removeEventListener("keydown", deleteStop);
diff --git a/frontend/src/state-providers/tooltip.ts b/frontend/src/state-providers/tooltip.ts
index 53d82d7be2..866414d078 100644
--- a/frontend/src/state-providers/tooltip.ts
+++ b/frontend/src/state-providers/tooltip.ts
@@ -26,7 +26,7 @@ export function createTooltipState(editor: Editor) {
 	let tooltipTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
 
 	// Listen for mouse movements onto tooltip-bearing HTML elements to track the future target of a tooltip
-	document.addEventListener("mouseover", (e) => {
+	const onMouseOver = (e: MouseEvent) => {
 		const element = (e.target instanceof Element && e.target.closest("[data-tooltip-label], [data-tooltip-description], [data-tooltip-shortcut]")) || undefined;
 
 		update((state) => {
@@ -34,10 +34,10 @@ export function createTooltipState(editor: Editor) {
 			state.element = element;
 			return state;
 		});
-	});
+	};
 
 	// Listen for mouse movements to schedule and position the tooltip, or hide it immediately upon further movement
-	document.addEventListener("mousemove", (e) => {
+	const onMouseMove = (e: MouseEvent) => {
 		// Hide the tooltip now that the cursor has moved
 		update((state) => {
 			state.visible = false;
@@ -60,14 +60,36 @@ export function createTooltipState(editor: Editor) {
 				return state;
 			});
 		}, SHOW_TOOLTIP_DELAY_MS);
-	});
+	};
 
 	// Hide tooltip and cancel any pending timeout when the mouse leaves the application window
-	document.addEventListener("mouseleave", () => {
+	const onMouseLeave = () => {
 		if (tooltipTimeout) clearTimeout(tooltipTimeout);
 		closeTooltip();
-	});
+	};
 
+	// Stop showing a tooltip if the user clicks or presses a key, and require the user to first move out of the element before it can re-appear
+	function closeTooltip() {
+		update((state) => {
+			state.visible = false;
+			state.element = undefined;
+			return state;
+		});
+	}
+
+	function destroy() {
+		if (tooltipTimeout) clearTimeout(tooltipTimeout);
+		document.removeEventListener("mouseover", onMouseOver);
+		document.removeEventListener("mousemove", onMouseMove);
+		document.removeEventListener("mouseleave", onMouseLeave);
+		document.removeEventListener("mousedown", closeTooltip);
+		document.removeEventListener("keydown", closeTooltip);
+		document.removeEventListener("wheel", closeTooltip);
+	}
+
+	document.addEventListener("mouseover", onMouseOver);
+	document.addEventListener("mousemove", onMouseMove);
+	document.addEventListener("mouseleave", onMouseLeave);
 	document.addEventListener("mousedown", closeTooltip);
 	document.addEventListener("keydown", closeTooltip);
 	document.addEventListener("wheel", closeTooltip);
@@ -91,17 +113,9 @@ export function createTooltipState(editor: Editor) {
 		});
 	});
 
-	// Stop showing a tooltip if the user clicks or presses a key, and require the user to first move out of the element before it can re-appear
-	function closeTooltip() {
-		update((state) => {
-			state.visible = false;
-			state.element = undefined;
-			return state;
-		});
-	}
-
 	return {
 		subscribe,
+		destroy,
 	};
 }
 export type TooltipState = ReturnType<typeof createTooltipState>;

From b1008eddd6e93932ce7f0ed96f8934a36eee3f77 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 8 Mar 2026 04:35:12 -0700
Subject: [PATCH 2/8] Clean up more component setup/tear-down side effects

---
 frontend/src/components/Editor.svelte         | 28 +++++++++++++------
 .../src/components/panels/Document.svelte     | 19 +++++++++++--
 .../widgets/inputs/NumberInput.svelte         | 15 ++++++++--
 .../src/components/window/StatusBar.svelte    |  7 ++++-
 .../src/components/window/TitleBar.svelte     |  6 +++-
 frontend/src/io-managers/clipboard.ts         |  8 +++++-
 frontend/src/io-managers/fonts.ts             |  7 ++++-
 frontend/src/io-managers/hyperlink.ts         |  6 +++-
 frontend/src/io-managers/input.ts             |  6 +++-
 frontend/src/io-managers/localization.ts      |  6 +++-
 frontend/src/io-managers/panic.ts             |  8 ++++--
 frontend/src/io-managers/persistence.ts       | 13 ++++++++-
 frontend/src/state-providers/app-window.ts    |  9 ++++++
 frontend/src/state-providers/dialog.ts        | 10 +++++++
 frontend/src/state-providers/document.ts      | 11 ++++++++
 frontend/src/state-providers/fullscreen.ts    |  5 ++++
 frontend/src/state-providers/node-graph.ts    | 22 +++++++++++++++
 frontend/src/state-providers/portfolio.ts     | 15 ++++++++++
 frontend/src/state-providers/tooltip.ts       |  5 ++++
 frontend/src/utility-functions/viewports.ts   | 22 ++++-----------
 20 files changed, 188 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte
index d2f3a1ac3a..4e0641a4ba 100644
--- a/frontend/src/components/Editor.svelte
+++ b/frontend/src/components/Editor.svelte
@@ -40,13 +40,13 @@
 	setContext("appWindow", appWindow);
 
 	// Initialize managers, which are isolated systems that subscribe to backend messages to link them to browser API functionality (like JS events, IndexedDB, etc.)
-	createClipboardManager(editor);
-	createHyperlinkManager(editor);
-	createLocalizationManager(editor);
-	createPanicManager(editor, dialog);
-	createPersistenceManager(editor, portfolio);
-	createFontsManager(editor);
-	let inputManagerDestructor = createInputManager(editor, dialog, portfolio, document, fullscreen);
+	const clipboardManagerDestructor = createClipboardManager(editor);
+	const hyperlinkManagerDestructor = createHyperlinkManager(editor);
+	const localizationManagerDestructor = createLocalizationManager(editor);
+	const panicManagerDestructor = createPanicManager(editor, dialog);
+	const persistenceManagerDestructor = createPersistenceManager(editor, portfolio);
+	const fontsManagerDestructor = createFontsManager(editor);
+	const inputManagerDestructor = createInputManager(editor, dialog, portfolio, document, fullscreen);
 
 	onMount(() => {
 		// Initialize certain setup tasks required by the editor backend to be ready for the user now that the frontend is ready
@@ -55,9 +55,21 @@
 
 	onDestroy(() => {
 		// Call the destructor for each manager
+		clipboardManagerDestructor();
+		hyperlinkManagerDestructor();
+		localizationManagerDestructor();
+		panicManagerDestructor();
+		persistenceManagerDestructor();
+		fontsManagerDestructor();
 		inputManagerDestructor();
-		// Clean up tooltip event listeners
+		// Clean up state provider subscriptions and event listeners
+		dialog.destroy();
 		tooltip.destroy();
+		document.destroy();
+		fullscreen.destroy();
+		nodeGraph.destroy();
+		portfolio.destroy();
+		appWindow.destroy();
 	});
 </script>
 
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index 737b7f3b64..45fb941bf2 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -10,7 +10,7 @@
 	import { pasteFile } from "@graphite/utility-functions/files";
 	import { textInputCleanup } from "@graphite/utility-functions/keyboard-entry";
 	import { rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
-	import { setupViewportResizeObserver, cleanupViewportResizeObserver } from "@graphite/utility-functions/viewports";
+	import { setupViewportResizeObserver } from "@graphite/utility-functions/viewports";
 
 	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
 	import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@graphite/components/floating-menus/EyedropperPreview.svelte";
@@ -76,6 +76,7 @@
 	let devicePixelRatio: number | undefined;
 	let removeUpdatePixelRatio: (() => void) | undefined;
 	let viewportResizeObserver: ResizeObserver | undefined;
+	let cleanupViewportResizeObserver: (() => void) | undefined;
 
 	// Dimension is rounded up to the nearest even number because resizing is centered, and dividing an odd number by 2 for centering causes antialiasing
 	$: canvasWidthRoundedToEven = canvasWidth && (canvasWidth % 2 === 1 ? canvasWidth + 1 : canvasWidth);
@@ -526,7 +527,7 @@
 
 		// Setup ResizeObserver for pixel-perfect viewport tracking with physical dimensions
 		// This must happen in onMount to ensure the viewport container element exists
-		setupViewportResizeObserver(editor);
+		cleanupViewportResizeObserver = setupViewportResizeObserver(editor);
 
 		// Also observe the inner viewport for canvas sizing and ruler updates
 		viewportResizeObserver = new ResizeObserver(() => {
@@ -536,9 +537,21 @@
 	});
 
 	onDestroy(() => {
-		cleanupViewportResizeObserver();
+		cleanupViewportResizeObserver?.();
 		viewportResizeObserver?.disconnect();
 		removeUpdatePixelRatio?.();
+
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateDocumentArtwork");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateEyedropperSamplingState");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateGradientStopColorPickerPosition");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateDocumentScrollbars");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateDocumentRulers");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateMouseCursor");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerTextCommit");
+		editor.subscriptions.unsubscribeFrontendMessage("DisplayEditableTextbox");
+		editor.subscriptions.unsubscribeFrontendMessage("DisplayEditableTextboxUpdateFontData");
+		editor.subscriptions.unsubscribeFrontendMessage("DisplayEditableTextboxTransform");
+		editor.subscriptions.unsubscribeFrontendMessage("DisplayRemoveEditableTextbox");
 	});
 </script>
 
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index caf0c0a166..dec0de773a 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -89,6 +89,10 @@
 	let ctrlKeyDown = false;
 	// Cleanup function for active drag interactions, called on destroy to prevent leaked listeners
 	let activeDragCleanup: (() => void) | undefined;
+	// Track the slider abort state for cleanup on destroy
+	let sliderResetAbortHandler: (() => void) | undefined;
+	let sliderAbortTimeout1: ReturnType<typeof setTimeout> | undefined;
+	let sliderAbortTimeout2: ReturnType<typeof setTimeout> | undefined;
 
 	$: watchValue(value, unit);
 	$: sliderStepValue = isInteger ? (step === undefined ? 1 : step) : "any";
@@ -110,6 +114,8 @@
 	});
 	onDestroy(() => {
 		clearTimeout(repeatTimeout);
+		clearTimeout(sliderAbortTimeout1);
+		clearTimeout(sliderAbortTimeout2);
 
 		activeDragCleanup?.();
 
@@ -124,6 +130,7 @@
 		removeEventListener("pointermove", sliderAbortFromDragging);
 		removeEventListener("keydown", sliderAbortFromDragging);
 		removeEventListener("keydown", incrementPressAbort);
+		if (sliderResetAbortHandler) removeEventListener("pointerup", sliderResetAbortHandler);
 	});
 
 	// ===============================
@@ -310,7 +317,7 @@
 		pressingArrow = false;
 		clearTimeout(repeatTimeout);
 		updateValue(initialValueBeforeDragging);
-		removeEventListener("keydown", onIncrementPointerUp);
+		removeEventListener("keydown", incrementPressAbort);
 	}
 
 	// =======================================
@@ -677,7 +684,7 @@
 
 		// End the user's drag by instantaneously disabling and re-enabling the range input element
 		if (inputRangeElement) inputRangeElement.disabled = true;
-		setTimeout(() => {
+		sliderAbortTimeout1 = setTimeout(() => {
 			if (inputRangeElement) inputRangeElement.disabled = false;
 		}, 0);
 
@@ -700,11 +707,13 @@
 			// dragging the slider, hitting Escape, then releasing the mouse button. This results in being transferred by `onSliderInput()` to the
 			// "Deciding" state when we should remain in the "Ready" state as set here. (For debugging, this can be visualized in CSS by
 			// recoloring the fake slider handle, which is shown in the "Deciding" state.)
-			setTimeout(() => (rangeSliderClickDragState = "Ready"), 0);
+			sliderAbortTimeout2 = setTimeout(() => (rangeSliderClickDragState = "Ready"), 0);
 
 			// Clean up the event listener that was used to call this function.
 			removeEventListener("pointerup", sliderResetAbort);
+			sliderResetAbortHandler = undefined;
 		};
+		sliderResetAbortHandler = sliderResetAbort;
 		addEventListener("pointerup", sliderResetAbort);
 
 		// Clean up the event listeners that were for tracking an abort while dragging the slider, now that we're no longer dragging it.
diff --git a/frontend/src/components/window/StatusBar.svelte b/frontend/src/components/window/StatusBar.svelte
index 75003e6f7e..a246d3ef2f 100644
--- a/frontend/src/components/window/StatusBar.svelte
+++ b/frontend/src/components/window/StatusBar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onMount } from "svelte";
+	import { getContext, onMount, onDestroy } from "svelte";
 
 	import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
@@ -24,6 +24,11 @@
 			statusBarInfoLayout = statusBarInfoLayout;
 		});
 	});
+
+	onDestroy(() => {
+		editor.subscriptions.unsubscribeLayoutUpdate("StatusBarHints");
+		editor.subscriptions.unsubscribeLayoutUpdate("StatusBarInfo");
+	});
 </script>
 
 <LayoutRow class="status-bar">
diff --git a/frontend/src/components/window/TitleBar.svelte b/frontend/src/components/window/TitleBar.svelte
index c7b7935093..052c17485d 100644
--- a/frontend/src/components/window/TitleBar.svelte
+++ b/frontend/src/components/window/TitleBar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onMount } from "svelte";
+	import { getContext, onMount, onDestroy } from "svelte";
 
 	import { isPlatformNative } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
@@ -31,6 +31,10 @@
 			menuBarLayout = menuBarLayout;
 		});
 	});
+
+	onDestroy(() => {
+		editor.subscriptions.unsubscribeLayoutUpdate("MenuBar");
+	});
 </script>
 
 <LayoutRow class="title-bar" styles={{ height: height + "px" }}>
diff --git a/frontend/src/io-managers/clipboard.ts b/frontend/src/io-managers/clipboard.ts
index af493ea7d9..f6da7a188a 100644
--- a/frontend/src/io-managers/clipboard.ts
+++ b/frontend/src/io-managers/clipboard.ts
@@ -1,6 +1,6 @@
 import type { Editor } from "@graphite/editor";
 
-export function createClipboardManager(editor: Editor) {
+export function createClipboardManager(editor: Editor): () => void {
 	// Subscribe to process backend event
 	editor.subscriptions.subscribeFrontendMessage("TriggerClipboardWrite", (data) => {
 		// If the Clipboard API is supported in the browser, copy text to the clipboard
@@ -12,6 +12,12 @@ export function createClipboardManager(editor: Editor) {
 	editor.subscriptions.subscribeFrontendMessage("TriggerSelectionWrite", async (data) => {
 		insertAtCaret(data.content);
 	});
+
+	return () => {
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerClipboardWrite");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionRead");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionWrite");
+	};
 }
 
 function readAtCaret(cut: boolean): string | undefined {
diff --git a/frontend/src/io-managers/fonts.ts b/frontend/src/io-managers/fonts.ts
index eafd09bc06..213f57234f 100644
--- a/frontend/src/io-managers/fonts.ts
+++ b/frontend/src/io-managers/fonts.ts
@@ -4,7 +4,7 @@ type ApiResponse = { family: string; variants: string[]; files: Record<string, s
 
 const FONT_LIST_API = "https://api.graphite.art/font-list";
 
-export function createFontsManager(editor: Editor) {
+export function createFontsManager(editor: Editor): () => void {
 	// Subscribe to process backend events
 	editor.subscriptions.subscribeFrontendMessage("TriggerFontCatalogLoad", async () => {
 		const response = await fetch(FONT_LIST_API);
@@ -40,4 +40,9 @@ export function createFontsManager(editor: Editor) {
 			console.error("Failed to load font:", error);
 		}
 	});
+
+	return () => {
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerFontCatalogLoad");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerFontDataLoad");
+	};
 }
diff --git a/frontend/src/io-managers/hyperlink.ts b/frontend/src/io-managers/hyperlink.ts
index 90055bd55c..b617c546b5 100644
--- a/frontend/src/io-managers/hyperlink.ts
+++ b/frontend/src/io-managers/hyperlink.ts
@@ -1,8 +1,12 @@
 import type { Editor } from "@graphite/editor";
 
-export function createHyperlinkManager(editor: Editor) {
+export function createHyperlinkManager(editor: Editor): () => void {
 	// Subscribe to process backend event
 	editor.subscriptions.subscribeFrontendMessage("TriggerVisitLink", async (data) => {
 		window.open(data.url, "_blank");
 	});
+
+	return () => {
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerVisitLink");
+	};
 }
diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index 3032398e34..0529f64960 100644
--- a/frontend/src/io-managers/input.ts
+++ b/frontend/src/io-managers/input.ts
@@ -508,7 +508,11 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
 	bindListeners();
 
 	// Return the destructor
-	return unbindListeners;
+	return () => {
+		unbindListeners();
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerClipboardRead");
+		editor.subscriptions.unsubscribeFrontendMessage("WindowPointerLockMove");
+	};
 }
 
 function targetIsTextField(target: EventTarget | HTMLElement | undefined): boolean {
diff --git a/frontend/src/io-managers/localization.ts b/frontend/src/io-managers/localization.ts
index 7142942cf4..85ea29c6b9 100644
--- a/frontend/src/io-managers/localization.ts
+++ b/frontend/src/io-managers/localization.ts
@@ -1,11 +1,15 @@
 import type { Editor } from "@graphite/editor";
 
-export function createLocalizationManager(editor: Editor) {
+export function createLocalizationManager(editor: Editor): () => void {
 	// Subscribe to process backend event
 	editor.subscriptions.subscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate", (data) => {
 		const localized = localizeTimestamp(data.commitDate);
 		editor.handle.requestAboutGraphiteDialogWithLocalizedCommitDate(localized.timestamp, localized.year);
 	});
+
+	return () => {
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate");
+	};
 }
 
 function localizeTimestamp(utc: string): { timestamp: string; year: string } {
diff --git a/frontend/src/io-managers/panic.ts b/frontend/src/io-managers/panic.ts
index da3cc1df3f..8e6f100654 100644
--- a/frontend/src/io-managers/panic.ts
+++ b/frontend/src/io-managers/panic.ts
@@ -3,7 +3,7 @@ import type { DialogState } from "@graphite/state-providers/dialog";
 import { browserVersion, operatingSystem } from "@graphite/utility-functions/platform";
 import { stripIndents } from "@graphite/utility-functions/strip-indents";
 
-export function createPanicManager(editor: Editor, dialogState: DialogState) {
+export function createPanicManager(editor: Editor, dialogState: DialogState): () => void {
 	// Code panic dialog and console error
 	editor.subscriptions.subscribeFrontendMessage("DisplayDialogPanic", (data) => {
 		// `Error.stackTraceLimit` is only available in V8/Chromium
@@ -16,6 +16,10 @@ export function createPanicManager(editor: Editor, dialogState: DialogState) {
 
 		dialogState.createCrashDialog(panicDetails);
 	});
+
+	return () => {
+		editor.subscriptions.unsubscribeFrontendMessage("DisplayDialogPanic");
+	};
 }
 
 export function githubUrl(panicDetails: string): string {
@@ -28,7 +32,7 @@ export function githubUrl(panicDetails: string): string {
 
 			**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.art
+			1. Open the Graphite editor at https://dev.graphite.art — IMPORTANT! Confirm you have tested in this development version. It may have already been fixed since the last stable release.
 			2. 
 			3. 
 			4. 
diff --git a/frontend/src/io-managers/persistence.ts b/frontend/src/io-managers/persistence.ts
index 45b725b925..bd15837a4d 100644
--- a/frontend/src/io-managers/persistence.ts
+++ b/frontend/src/io-managers/persistence.ts
@@ -7,7 +7,7 @@ import type { MessageBody } from "@graphite/subscription-router";
 
 const graphiteStore = createStore("graphite", "store");
 
-export function createPersistenceManager(editor: Editor, portfolio: PortfolioState) {
+export function createPersistenceManager(editor: Editor, portfolio: PortfolioState): () => void {
 	// DOCUMENTS
 
 	async function storeDocumentOrder() {
@@ -200,6 +200,17 @@ export function createPersistenceManager(editor: Editor, portfolio: PortfolioSta
 			await storeCurrentDocumentId(documentId);
 		}
 	});
+
+	return () => {
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerSavePreferences");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerLoadPreferences");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerPersistenceWriteDocument");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerPersistenceRemoveDocument");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerLoadFirstAutoSaveDocument");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerLoadRestAutoSaveDocuments");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerOpenLaunchDocuments");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerSaveActiveDocument");
+	};
 }
 
 export async function wipeDocuments() {
diff --git a/frontend/src/state-providers/app-window.ts b/frontend/src/state-providers/app-window.ts
index ff9ff04295..9cd5016612 100644
--- a/frontend/src/state-providers/app-window.ts
+++ b/frontend/src/state-providers/app-window.ts
@@ -50,8 +50,17 @@ export function createAppWindowState(editor: Editor) {
 		});
 	});
 
+	function destroy() {
+		editor.subscriptions.unsubscribeFrontendMessage("UpdatePlatform");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateMaximized");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateFullscreen");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateViewportHolePunch");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateUIScale");
+	}
+
 	return {
 		subscribe,
+		destroy,
 	};
 }
 export type AppWindowState = ReturnType<typeof createAppWindowState>;
diff --git a/frontend/src/state-providers/dialog.ts b/frontend/src/state-providers/dialog.ts
index a534c9321b..45ccd36f6a 100644
--- a/frontend/src/state-providers/dialog.ts
+++ b/frontend/src/state-providers/dialog.ts
@@ -96,10 +96,20 @@ export function createDialogState(editor: Editor) {
 		editor.handle.requestLicensesThirdPartyDialogWithLicenseText(licenseText);
 	});
 
+	function destroy() {
+		editor.subscriptions.unsubscribeFrontendMessage("DisplayDialog");
+		editor.subscriptions.unsubscribeFrontendMessage("DialogClose");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog");
+		editor.subscriptions.unsubscribeLayoutUpdate("DialogButtons");
+		editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn1");
+		editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn2");
+	}
+
 	return {
 		subscribe,
 		dismissDialog,
 		createCrashDialog,
+		destroy,
 	};
 }
 export type DialogState = ReturnType<typeof createDialogState>;
diff --git a/frontend/src/state-providers/document.ts b/frontend/src/state-providers/document.ts
index 3946e17291..cb8423667f 100644
--- a/frontend/src/state-providers/document.ts
+++ b/frontend/src/state-providers/document.ts
@@ -79,8 +79,19 @@ export function createDocumentState(editor: Editor) {
 		});
 	});
 
+	function destroy() {
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateGraphFadeArtwork");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateGraphViewOverlay");
+		editor.subscriptions.unsubscribeLayoutUpdate("ToolOptions");
+		editor.subscriptions.unsubscribeLayoutUpdate("DocumentBar");
+		editor.subscriptions.unsubscribeLayoutUpdate("ToolShelf");
+		editor.subscriptions.unsubscribeLayoutUpdate("WorkingColors");
+		editor.subscriptions.unsubscribeLayoutUpdate("NodeGraphControlBar");
+	}
+
 	return {
 		subscribe,
+		destroy,
 	};
 }
 export type DocumentState = ReturnType<typeof createDocumentState>;
diff --git a/frontend/src/state-providers/fullscreen.ts b/frontend/src/state-providers/fullscreen.ts
index aeac8b5646..8df7d10c87 100644
--- a/frontend/src/state-providers/fullscreen.ts
+++ b/frontend/src/state-providers/fullscreen.ts
@@ -52,12 +52,17 @@ export function createFullscreenState(editor: Editor) {
 		toggleFullscreen();
 	});
 
+	function destroy() {
+		editor.subscriptions.unsubscribeFrontendMessage("WindowFullscreen");
+	}
+
 	return {
 		subscribe,
 		fullscreenModeChanged,
 		enterFullscreen,
 		exitFullscreen,
 		toggleFullscreen,
+		destroy,
 	};
 }
 export type FullscreenState = ReturnType<typeof createFullscreenState>;
diff --git a/frontend/src/state-providers/node-graph.ts b/frontend/src/state-providers/node-graph.ts
index ae96b2c470..5bb29972d1 100644
--- a/frontend/src/state-providers/node-graph.ts
+++ b/frontend/src/state-providers/node-graph.ts
@@ -185,9 +185,31 @@ export function createNodeGraphState(editor: Editor) {
 		});
 	});
 
+	function destroy() {
+		editor.subscriptions.unsubscribeFrontendMessage("SendUIMetadata");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateBox");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateClickTargets");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateContextMenuInformation");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateImportReorderIndex");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateExportReorderIndex");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateImportsExports");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateInSelectedNetwork");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateLayerWidths");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphNodes");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateVisibleNodes");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphWires");
+		editor.subscriptions.unsubscribeFrontendMessage("ClearAllNodeGraphWires");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphSelection");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphTransform");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeThumbnail");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateWirePathInProgress");
+	}
+
 	return {
 		subscribe,
 		closeContextMenu,
+		destroy,
 	};
 }
 export type NodeGraphState = ReturnType<typeof createNodeGraphState>;
diff --git a/frontend/src/state-providers/portfolio.ts b/frontend/src/state-providers/portfolio.ts
index 5dd28ada2a..de26d78eb0 100644
--- a/frontend/src/state-providers/portfolio.ts
+++ b/frontend/src/state-providers/portfolio.ts
@@ -99,8 +99,23 @@ export function createPortfolioState(editor: Editor) {
 		});
 	});
 
+	function destroy() {
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateOpenDocumentsList");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateActiveDocument");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerFetchAndOpenDocument");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerOpen");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerImport");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerSaveDocument");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerSaveFile");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerExportImage");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateDataPanelState");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdatePropertiesPanelState");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateLayersPanelState");
+	}
+
 	return {
 		subscribe,
+		destroy,
 	};
 }
 export type PortfolioState = ReturnType<typeof createPortfolioState>;
diff --git a/frontend/src/state-providers/tooltip.ts b/frontend/src/state-providers/tooltip.ts
index 866414d078..f80d78d359 100644
--- a/frontend/src/state-providers/tooltip.ts
+++ b/frontend/src/state-providers/tooltip.ts
@@ -79,12 +79,17 @@ export function createTooltipState(editor: Editor) {
 
 	function destroy() {
 		if (tooltipTimeout) clearTimeout(tooltipTimeout);
+
 		document.removeEventListener("mouseover", onMouseOver);
 		document.removeEventListener("mousemove", onMouseMove);
 		document.removeEventListener("mouseleave", onMouseLeave);
 		document.removeEventListener("mousedown", closeTooltip);
 		document.removeEventListener("keydown", closeTooltip);
 		document.removeEventListener("wheel", closeTooltip);
+
+		editor.subscriptions.unsubscribeFrontendMessage("SendShortcutShiftClick");
+		editor.subscriptions.unsubscribeFrontendMessage("SendShortcutAltClick");
+		editor.subscriptions.unsubscribeFrontendMessage("SendShortcutFullscreen");
 	}
 
 	document.addEventListener("mouseover", onMouseOver);
diff --git a/frontend/src/utility-functions/viewports.ts b/frontend/src/utility-functions/viewports.ts
index 670f2b1bea..fc6d7b3603 100644
--- a/frontend/src/utility-functions/viewports.ts
+++ b/frontend/src/utility-functions/viewports.ts
@@ -1,20 +1,13 @@
 import type { Editor } from "@graphite/editor";
 
-let resizeObserver: ResizeObserver | undefined;
-
-export function setupViewportResizeObserver(editor: Editor) {
-	// Clean up existing observer if any
-	if (resizeObserver) {
-		resizeObserver.disconnect();
-	}
-
+export function setupViewportResizeObserver(editor: Editor): () => void {
 	const viewports = Array.from(window.document.querySelectorAll("[data-viewport-container]"));
-	if (viewports.length <= 0) return;
+	if (viewports.length <= 0) return () => {};
 
 	const viewport = viewports[0];
-	if (!(viewport instanceof HTMLElement)) return;
+	if (!(viewport instanceof HTMLElement)) return () => {};
 
-	resizeObserver = new ResizeObserver((entries) => {
+	const resizeObserver = new ResizeObserver((entries) => {
 		for (const entry of entries) {
 			const devicePixelRatio = window.devicePixelRatio || 1;
 
@@ -52,11 +45,8 @@ export function setupViewportResizeObserver(editor: Editor) {
 	});
 
 	resizeObserver.observe(viewport);
-}
 
-export function cleanupViewportResizeObserver() {
-	if (resizeObserver) {
+	return () => {
 		resizeObserver.disconnect();
-		resizeObserver = undefined;
-	}
+	};
 }

From 11b500857604ad9fdc6ad411ac840152e01bd1e1 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 8 Mar 2026 05:01:16 -0700
Subject: [PATCH 3/8] Remove nonfunctional debouncer

---
 .../src/components/widgets/WidgetSpan.svelte  |  5 ++--
 frontend/src/utility-functions/debounce.ts    | 30 -------------------
 2 files changed, 2 insertions(+), 33 deletions(-)
 delete mode 100644 frontend/src/utility-functions/debounce.ts

diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index 6a402b067e..43aba10b9b 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -4,7 +4,6 @@
 	import type { LayoutTarget, Widget, WidgetInstance } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
 	import { parseFillChoice } from "@graphite/utility-functions/colors";
-	import { debouncer } from "@graphite/utility-functions/debounce";
 
 	import NodeCatalog from "@graphite/components/floating-menus/NodeCatalog.svelte";
 	import BreadcrumbTrailButtons from "@graphite/components/widgets/buttons/BreadcrumbTrailButtons.svelte";
@@ -137,7 +136,7 @@
 			getProps: (props, index) => ({
 				...props,
 				$$events: {
-					value: (e: CustomEvent) => debouncer((value: unknown) => widgetValueCommitAndUpdate(index, value, false), { debounceTime: 120 }).debounceUpdateValue(e.detail),
+					value: (e: CustomEvent) => widgetValueCommitAndUpdate(index, e.detail, false),
 				},
 			}),
 		},
@@ -202,7 +201,7 @@
 				incrementCallbackIncrease: () => widgetValueCommitAndUpdate(index, "Increment", false),
 				incrementCallbackDecrease: () => widgetValueCommitAndUpdate(index, "Decrement", false),
 				$$events: {
-					value: (e: CustomEvent) => debouncer((value: unknown) => widgetValueUpdate(index, value, true)).debounceUpdateValue(e.detail),
+					value: (e: CustomEvent) => widgetValueUpdate(index, e.detail, true),
 					startHistoryTransaction: () => widgetValueCommit(index, props.value),
 				},
 			}),
diff --git a/frontend/src/utility-functions/debounce.ts b/frontend/src/utility-functions/debounce.ts
deleted file mode 100644
index 8eb8fa4076..0000000000
--- a/frontend/src/utility-functions/debounce.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export type Debouncer = ReturnType<typeof debouncer>;
-
-export type DebouncerOptions = {
-	debounceTime: number;
-};
-
-export function debouncer<T>(callFn: (value: T) => unknown, { debounceTime = 60 }: Partial<DebouncerOptions> = {}) {
-	let currentValue: T | undefined;
-	let recentlyUpdated: boolean = false;
-
-	const debounceEmitValue = () => {
-		recentlyUpdated = false;
-		if (currentValue === undefined) return;
-		debounceUpdateValue(currentValue);
-	};
-
-	const debounceUpdateValue = (newValue: T) => {
-		if (recentlyUpdated) {
-			currentValue = newValue;
-			return;
-		}
-
-		callFn(newValue);
-		recentlyUpdated = true;
-		currentValue = undefined;
-		setTimeout(debounceEmitValue, debounceTime);
-	};
-
-	return { debounceUpdateValue };
-}

From 08bebb20b843489a14afe6423d84340ca36b65ad Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 8 Mar 2026 16:20:15 -0700
Subject: [PATCH 4/8] Clean up even more component setup/tear-down side effects

---
 frontend/src/App.svelte                       |  3 +-
 .../floating-menus/EyedropperPreview.svelte   | 10 +++--
 .../components/floating-menus/MenuList.svelte |  5 ++-
 .../src/components/layout/FloatingMenu.svelte | 25 +++++++-----
 .../src/components/panels/Document.svelte     | 10 ++++-
 .../widgets/inputs/NumberInput.svelte         |  7 ++++
 .../widgets/labels/TextLabel.svelte           |  5 ++-
 .../src/components/window/Workspace.svelte    |  9 ++++-
 frontend/src/editor.ts                        | 11 +++++-
 frontend/src/io-managers/fonts.ts             | 39 ++++++++++++-------
 frontend/src/io-managers/panic.ts             |  2 +
 frontend/src/main.ts                          |  9 ++++-
 frontend/src/subscription-router.ts           | 24 +++++++-----
 13 files changed, 109 insertions(+), 50 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 6e98a39bc5..55ff5d4d9d 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -15,8 +15,7 @@
 	});
 
 	onDestroy(() => {
-		// Destroy the Wasm editor handle
-		editor?.handle.free();
+		editor?.destroy();
 	});
 </script>
 
diff --git a/frontend/src/components/floating-menus/EyedropperPreview.svelte b/frontend/src/components/floating-menus/EyedropperPreview.svelte
index e7d8744920..2457ceee35 100644
--- a/frontend/src/components/floating-menus/EyedropperPreview.svelte
+++ b/frontend/src/components/floating-menus/EyedropperPreview.svelte
@@ -12,10 +12,7 @@
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 
-	const temporaryCanvas = document.createElement("canvas");
-	temporaryCanvas.width = ZOOM_WINDOW_DIMENSIONS;
-	temporaryCanvas.height = ZOOM_WINDOW_DIMENSIONS;
-
+	let temporaryCanvas: HTMLCanvasElement | undefined;
 	let zoomPreviewCanvas: HTMLCanvasElement | undefined;
 
 	export let imageData: ImageData | undefined = undefined;
@@ -31,6 +28,11 @@
 		if (!zoomPreviewCanvas) return;
 		const context = zoomPreviewCanvas.getContext("2d");
 
+		if (!temporaryCanvas) {
+			temporaryCanvas = document.createElement("canvas");
+			temporaryCanvas.width = ZOOM_WINDOW_DIMENSIONS;
+			temporaryCanvas.height = ZOOM_WINDOW_DIMENSIONS;
+		}
 		const temporaryContext = temporaryCanvas.getContext("2d");
 
 		if (!imageData || !context || !temporaryContext) return;
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index d7f042f5d0..6c639f90ff 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -48,6 +48,7 @@
 	let highlighted: MenuListEntry | undefined = activeEntry;
 	let virtualScrollingEntriesStart = 0;
 	let keydownListenerAdded = false;
+	let destroyed = false;
 
 	// `watchOpen` is called only when `open` is changed from outside this component
 	$: watchOpen(open);
@@ -68,13 +69,15 @@
 	// TODO: The current approach is hacky and blocks the allowances for shortcuts like the key to open the browser's dev tools.
 	onMount(async () => {
 		await tick();
-		if (open && !inNestedMenuList() && !keydownListenerAdded) {
+		if (!destroyed && open && !inNestedMenuList() && !keydownListenerAdded) {
 			addEventListener("keydown", keydown);
 			keydownListenerAdded = true;
 		}
 	});
 	onDestroy(() => {
 		removeEventListener("keydown", keydown);
+		// Set the destroyed status in the closure kept by the awaited `tick()` in `onMount` in case that delayed run occurs after the component is destroyed
+		destroyed = true;
 	});
 
 	function inNestedMenuList(): boolean {
diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte
index 4dece0b91e..c3cd7932fb 100644
--- a/frontend/src/components/layout/FloatingMenu.svelte
+++ b/frontend/src/components/layout/FloatingMenu.svelte
@@ -81,16 +81,7 @@
 
 	// Called only when `open` is changed from outside this component
 	async function watchOpenChange(isOpen: boolean) {
-		// Mitigate a Safari rendering bug which clips the floating menu extending beyond a scrollable container.
-		// The bug is possibly related to <https://bugs.webkit.org/show_bug.cgi?id=160953>, but in our case it happens when `overflow` of a parent is `auto` rather than `hidden`.
-		if (browserVersion().toLowerCase().includes("safari")) {
-			const scrollable = self?.closest("[data-scrollable-x], [data-scrollable-y]");
-			if (scrollable instanceof HTMLElement) {
-				// The issue exists when the container is set to `overflow: auto` but fine when `overflow: hidden`. So this workaround temporarily sets
-				// the scrollable container to `overflow: hidden`, thus removing the scrollbars and ability to scroll until the floating menu is closed.
-				scrollable.style.overflow = isOpen ? "hidden" : "";
-			}
-		}
+		setSafariScrollableOverflow(isOpen);
 
 		// Switching from closed to open
 		if (isOpen && !wasOpen) {
@@ -131,6 +122,16 @@
 		wasOpen = isOpen;
 	}
 
+	// Mitigate a Safari rendering bug which clips the floating menu extending beyond a scrollable container. The bug is possibly related to
+	// <https://bugs.webkit.org/show_bug.cgi?id=160953>, but in our case it happens when `overflow` of a parent is `auto` rather than `hidden`.
+	// The issue exists when the container is set to `overflow: auto` but fine when `overflow: hidden`. So this workaround temporarily sets
+	// the scrollable container to `overflow: hidden`, thus removing the scrollbars and ability to scroll until the floating menu is closed.
+	function setSafariScrollableOverflow(hidden: boolean) {
+		if (!browserVersion().toLowerCase().includes("safari")) return;
+		const scrollable = self?.closest("[data-scrollable-x], [data-scrollable-y]");
+		if (scrollable instanceof HTMLElement) scrollable.style.overflow = hidden ? "hidden" : "";
+	}
+
 	onMount(() => {
 		// Measure the content and round up its width and height to the nearest even integer.
 		// This solves antialiasing issues when the content isn't cleanly divisible by 2 and gets translated by (-50%, -50%) causing all its content to be blurry.
@@ -166,6 +167,10 @@
 		window.removeEventListener("keydown", keyDownHandler);
 		window.removeEventListener("pointerdown", pointerDownHandler);
 		window.removeEventListener("pointerup", pointerUpHandler);
+		window.removeEventListener("click", clickHandlerCapture, true);
+
+		// Revert Safari overflow workaround if the menu was open when destroyed
+		if (open) setSafariScrollableOverflow(false);
 	});
 
 	afterUpdate(() => {
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index 45fb941bf2..165ec7afe8 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -77,6 +77,7 @@
 	let removeUpdatePixelRatio: (() => void) | undefined;
 	let viewportResizeObserver: ResizeObserver | undefined;
 	let cleanupViewportResizeObserver: (() => void) | undefined;
+	let addedFontFaces: FontFace[] = [];
 
 	// Dimension is rounded up to the nearest even number because resizing is centered, and dividing an odd number by 2 for centering causes antialiasing
 	$: canvasWidthRoundedToEven = canvasWidth && (canvasWidth % 2 === 1 ? canvasWidth + 1 : canvasWidth);
@@ -378,7 +379,9 @@
 
 		if (data.fontData.length > 0 && data.fontData.buffer instanceof ArrayBuffer) {
 			const fontView = new Uint8Array(data.fontData.buffer, data.fontData.byteOffset, data.fontData.byteLength);
-			window.document.fonts.add(new FontFace("text-font", fontView));
+			const face = new FontFace("text-font", fontView);
+			window.document.fonts.add(face);
+			addedFontFaces.push(face);
 			textInput.style.fontFamily = "text-font";
 		}
 
@@ -512,7 +515,9 @@
 
 			if (textInput && data.fontData.length > 0 && data.fontData.buffer instanceof ArrayBuffer) {
 				const fontView = new Uint8Array(data.fontData.buffer, data.fontData.byteOffset, data.fontData.byteLength);
-				window.document.fonts.add(new FontFace("text-font", fontView));
+				const face = new FontFace("text-font", fontView);
+				window.document.fonts.add(face);
+				addedFontFaces.push(face);
 				textInput.style.fontFamily = "text-font";
 			}
 		});
@@ -540,6 +545,7 @@
 		cleanupViewportResizeObserver?.();
 		viewportResizeObserver?.disconnect();
 		removeUpdatePixelRatio?.();
+		addedFontFaces.forEach((face) => window.document.fonts.delete(face));
 
 		editor.subscriptions.unsubscribeFrontendMessage("UpdateDocumentArtwork");
 		editor.subscriptions.unsubscribeFrontendMessage("UpdateEyedropperSamplingState");
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index dec0de773a..ef3a6d6164 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -119,6 +119,13 @@
 
 		activeDragCleanup?.();
 
+		// Exit pointer lock if active (non-Safari path)
+		if (document.pointerLockElement) document.exitPointerLock();
+
+		// Remove Safari cursor-hidden workaround class if present
+		const isSafari = browserVersion().toLowerCase().includes("safari");
+		if (isSafari) document.body.classList.remove("cursor-hidden");
+
 		// Clean up any listeners related to tracking the Shift and Ctrl keys
 		removeEventListener("keydown", trackShiftAndCtrl);
 		removeEventListener("keyup", trackShiftAndCtrl);
diff --git a/frontend/src/components/widgets/labels/TextLabel.svelte b/frontend/src/components/widgets/labels/TextLabel.svelte
index e0ac6c2e4b..558e16d578 100644
--- a/frontend/src/components/widgets/labels/TextLabel.svelte
+++ b/frontend/src/components/widgets/labels/TextLabel.svelte
@@ -62,7 +62,10 @@
 	}
 
 	onMount(() => watchForCheckbox(forCheckbox));
-	onDestroy(() => watchForCheckbox(undefined));
+	onDestroy(() => {
+		handlePointerLeave();
+		watchForCheckbox(undefined);
+	});
 </script>
 
 <label
diff --git a/frontend/src/components/window/Workspace.svelte b/frontend/src/components/window/Workspace.svelte
index 53c394ac5c..c40a7cd1d6 100644
--- a/frontend/src/components/window/Workspace.svelte
+++ b/frontend/src/components/window/Workspace.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from "svelte";
+	import { getContext, onDestroy } from "svelte";
 
 	import type { OpenDocument } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
@@ -24,6 +24,11 @@
 	let documentPanel: Panel | undefined;
 	let gutterResizeRestore: [number, number] | undefined = undefined;
 	let pointerCaptureId: number | undefined = undefined;
+	let activeResizeCleanup: (() => void) | undefined = undefined;
+
+	onDestroy(() => {
+		activeResizeCleanup?.();
+	});
 
 	$: documentPanel?.scrollTabIntoView($portfolio.activeDocumentIndex);
 
@@ -104,6 +109,7 @@
 			gutterResizeRestore = undefined;
 			if (pointerCaptureId) gutter.releasePointerCapture(pointerCaptureId);
 			removeListeners();
+			activeResizeCleanup = undefined;
 		};
 
 		const onMouseDown = (e: MouseEvent) => {
@@ -130,6 +136,7 @@
 		};
 
 		addListeners();
+		activeResizeCleanup = removeListeners;
 	}
 </script>
 
diff --git a/frontend/src/editor.ts b/frontend/src/editor.ts
index 5bc0b95167..dadcf81749 100644
--- a/frontend/src/editor.ts
+++ b/frontend/src/editor.ts
@@ -11,6 +11,7 @@ export type Editor = {
 	raw: WebAssembly.Memory;
 	handle: EditorHandle;
 	subscriptions: SubscriptionRouter;
+	destroy: () => void;
 };
 
 // `wasmImport` starts uninitialized because its initialization needs to occur asynchronously, and thus needs to occur by manually calling and awaiting `initWasm()`
@@ -52,13 +53,14 @@ export function createEditor(): Editor {
 	const subscriptions = createSubscriptionRouter();
 
 	// Check if the URL hash fragment has any demo artwork to be loaded
+	const demoArtworkAbortController = new AbortController();
 	(async () => {
 		const demoArtwork = window.location.hash.trim().match(/#demo\/(.*)/)?.[1];
 		if (!demoArtwork) return;
 
 		try {
 			const url = new URL(`/demo-artwork/${demoArtwork}.${handle.fileExtension()}`, document.location.href);
-			const data = await fetch(url);
+			const data = await fetch(url, { signal: demoArtworkAbortController.signal });
 			if (!data.ok) throw new Error();
 
 			const filename = url.pathname.split("/").pop() || "Untitled";
@@ -72,5 +74,10 @@ export function createEditor(): Editor {
 		}
 	})();
 
-	return { raw, handle, subscriptions };
+	function destroy() {
+		handle.free();
+		demoArtworkAbortController.abort();
+	}
+
+	return { raw, handle, subscriptions, destroy };
 }
diff --git a/frontend/src/io-managers/fonts.ts b/frontend/src/io-managers/fonts.ts
index 213f57234f..c7c73224a9 100644
--- a/frontend/src/io-managers/fonts.ts
+++ b/frontend/src/io-managers/fonts.ts
@@ -5,24 +5,31 @@ type ApiResponse = { family: string; variants: string[]; files: Record<string, s
 const FONT_LIST_API = "https://api.graphite.art/font-list";
 
 export function createFontsManager(editor: Editor): () => void {
+	const abortController = new AbortController();
+
 	// Subscribe to process backend events
 	editor.subscriptions.subscribeFrontendMessage("TriggerFontCatalogLoad", async () => {
-		const response = await fetch(FONT_LIST_API);
-		const fontListResponse: { items: ApiResponse } = await response.json();
-		const fontListData = fontListResponse.items;
-
-		const catalog = fontListData.map((font) => {
-			const styles = font.variants.map((variant) => {
-				const weight = variant === "regular" || variant === "italic" ? 400 : parseInt(variant, 10);
-				const italic = variant.endsWith("italic");
-				const url = font.files[variant].replace("http://", "https://");
-
-				return { weight, italic, url };
+		try {
+			const response = await fetch(FONT_LIST_API, { signal: abortController.signal });
+			const fontListResponse: { items: ApiResponse } = await response.json();
+			const fontListData = fontListResponse.items;
+
+			const catalog = fontListData.map((font) => {
+				const styles = font.variants.map((variant) => {
+					const weight = variant === "regular" || variant === "italic" ? 400 : parseInt(variant, 10);
+					const italic = variant.endsWith("italic");
+					const url = font.files[variant].replace("http://", "https://");
+
+					return { weight, italic, url };
+				});
+				return { name: font.family, styles };
 			});
-			return { name: font.family, styles };
-		});
 
-		editor.handle.onFontCatalogLoad(catalog);
+			editor.handle.onFontCatalogLoad(catalog);
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") return;
+			throw error;
+		}
 	});
 
 	editor.subscriptions.subscribeFrontendMessage("TriggerFontDataLoad", async (data) => {
@@ -30,18 +37,20 @@ export function createFontsManager(editor: Editor): () => void {
 
 		try {
 			if (!data.url) throw new Error("No URL provided for font data load");
-			const response = await fetch(data.url);
+			const response = await fetch(data.url, { signal: abortController.signal });
 			const buffer = await response.arrayBuffer();
 			const bytes = new Uint8Array(buffer);
 
 			editor.handle.onFontLoad(fontFamily, fontStyle, bytes);
 		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") return;
 			// eslint-disable-next-line no-console
 			console.error("Failed to load font:", error);
 		}
 	});
 
 	return () => {
+		abortController.abort();
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerFontCatalogLoad");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerFontDataLoad");
 	};
diff --git a/frontend/src/io-managers/panic.ts b/frontend/src/io-managers/panic.ts
index 8e6f100654..c3139ee320 100644
--- a/frontend/src/io-managers/panic.ts
+++ b/frontend/src/io-managers/panic.ts
@@ -7,8 +7,10 @@ export function createPanicManager(editor: Editor, dialogState: DialogState): ()
 	// Code panic dialog and console error
 	editor.subscriptions.subscribeFrontendMessage("DisplayDialogPanic", (data) => {
 		// `Error.stackTraceLimit` is only available in V8/Chromium
+		const previousStackTraceLimit = Error.stackTraceLimit;
 		Error.stackTraceLimit = Infinity;
 		const stackTrace = new Error().stack || "";
+		Error.stackTraceLimit = previousStackTraceLimit;
 		const panicDetails = `${data.panicInfo}${stackTrace ? `\n\n${stackTrace}` : ""}`;
 
 		// eslint-disable-next-line no-console
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 345e2ef455..0ff9253db5 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,9 +1,14 @@
 // This file is the browser's entry point for the JS bundle
 
-import { mount } from "svelte";
+import { mount, unmount } from "svelte";
 
 import App from "@graphite/App.svelte";
 
 document.body.setAttribute("data-app-container", "");
 
-export default mount(App, { target: document.body });
+const app = mount(App, { target: document.body });
+
+// Ensure the old component tree is properly torn down during HMR so all onDestroy hooks fire (which clean up IO managers, state providers, etc.)
+import.meta.hot?.dispose(() => unmount(app));
+
+export default app;
diff --git a/frontend/src/subscription-router.ts b/frontend/src/subscription-router.ts
index afef714b14..6ff010ef4c 100644
--- a/frontend/src/subscription-router.ts
+++ b/frontend/src/subscription-router.ts
@@ -12,23 +12,23 @@ export type MessageBody<T extends MessageName> = Extract<FrontendMessage, Record
 export function createSubscriptionRouter() {
 	// Callbacks are wrapped at subscription time to capture their type-specific data extraction in a closure,
 	// so the stored function has a uniform signature and the map doesn't need per-key generic value types.
-	const subscriptions: Partial<Record<MessageName, (taggedMessage: MessageMap) => void>> = {};
-	const layoutCallbacks: Partial<Record<LayoutTarget, (diffs: WidgetDiff[]) => void>> = {};
+	const subscriptions = new Map<MessageName, (taggedMessage: MessageMap) => void>();
+	const layoutCallbacks = new Map<LayoutTarget, (diffs: WidgetDiff[]) => void>();
 
 	const subscribeFrontendMessage = <T extends MessageName>(messageType: T, callback: (data: MessageMap[T]) => void) => {
-		subscriptions[messageType] = (taggedMessage: MessageMap) => callback(taggedMessage[messageType]);
+		subscriptions.set(messageType, (taggedMessage: MessageMap) => callback(taggedMessage[messageType]));
 	};
 
 	const unsubscribeFrontendMessage = (messageType: MessageName) => {
-		delete subscriptions[messageType];
+		subscriptions.delete(messageType);
 	};
 
 	const subscribeLayoutUpdate = (target: LayoutTarget, callback: (diffs: WidgetDiff[]) => void) => {
-		layoutCallbacks[target] = callback;
+		layoutCallbacks.set(target, callback);
 	};
 
 	const unsubscribeLayoutUpdate = (target: LayoutTarget) => {
-		delete layoutCallbacks[target];
+		layoutCallbacks.delete(target);
 	};
 
 	function normalizeMessage<T extends string | object>(message: T): ToMessageMap<T>;
@@ -52,7 +52,7 @@ export function createSubscriptionRouter() {
 		// Resolve the dispatch thunk, depending on whether this is a layout update or a regular message.
 		// UpdateLayout messages are dispatched to layout-specific callbacks based on the layout target.
 		// The thunk is re-evaluated on each retry because the callback may not be registered yet.
-		let getHandler: () => ((taggedMessage: MessageMap) => void) | undefined = () => subscriptions[messageType];
+		let getHandler: () => ((taggedMessage: MessageMap) => void) | undefined = () => subscriptions.get(messageType);
 
 		// Handle layout updates specially to route them to layout-specific callbacks and extract the diffs as the data to pass
 		let target: LayoutTarget | undefined;
@@ -61,7 +61,7 @@ export function createSubscriptionRouter() {
 			target = layoutTarget;
 
 			getHandler = () => {
-				const layoutCallback = layoutCallbacks[layoutTarget];
+				const layoutCallback = layoutCallbacks.get(layoutTarget);
 				if (!layoutCallback) return undefined;
 				return () => layoutCallback(diff);
 			};
@@ -75,10 +75,14 @@ export function createSubscriptionRouter() {
 
 			if (handler) {
 				handler(taggedMessage);
-			} else if (retries <= 3) {
+			}
+			// Try again on the next stack frame, if the retry limit hasn't been exceeded yet
+			else if (retries <= 3) {
 				retries += 1;
 				setTimeout(callCallback, 0);
-			} else {
+			}
+			// Guard against this firing after a teardown during HMR, if no handlers are registered anymore
+			else if (subscriptions.size + layoutCallbacks.size > 0) {
 				// eslint-disable-next-line no-console
 				console.error(`Received a frontend message of type ${messageType}${target ? ` (${target})` : ""} but no handler was registered for it from the client.`);
 			}

From 6f9779174ef725bb2790d80f94e9b1a194290f19 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 8 Mar 2026 20:39:14 -0700
Subject: [PATCH 5/8] Reuse backend state

---
 frontend/src/editor.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/editor.ts b/frontend/src/editor.ts
index dadcf81749..9d393e2332 100644
--- a/frontend/src/editor.ts
+++ b/frontend/src/editor.ts
@@ -14,8 +14,9 @@ export type Editor = {
 	destroy: () => void;
 };
 
-// `wasmImport` starts uninitialized because its initialization needs to occur asynchronously, and thus needs to occur by manually calling and awaiting `initWasm()`
-let wasmImport: WebAssembly.Memory | undefined;
+// `wasmImport` starts uninitialized because its initialization needs to occur asynchronously, and thus needs to occur by manually calling and awaiting `initWasm()`.
+// Preserved across HMR since WASM state persists in memory and cannot be re-initialized.
+let wasmImport: WebAssembly.Memory | undefined = import.meta.hot?.data?.wasmImport;
 
 // Should be called asynchronously before `createEditor()`.
 export async function initWasm() {
@@ -81,3 +82,12 @@ export function createEditor(): Editor {
 
 	return { raw, handle, subscriptions, destroy };
 }
+
+// WASM state persists in memory across JS module re-evaluation, so accept HMR updates
+// without propagation to prevent components from trying to re-initialize the editor
+if (import.meta.hot) {
+	import.meta.hot.dispose((data) => {
+		data.wasmImport = wasmImport;
+	});
+	import.meta.hot.accept();
+}

From 271894b7cbfcf75e5bb4b90ab4cb8a46defdb499 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 8 Mar 2026 23:30:02 -0700
Subject: [PATCH 6/8] Fix HMR for IO Managers and for State Providers

---
 frontend/src/components/Editor.svelte      |  3 ++-
 frontend/src/editor.ts                     | 13 +++----------
 frontend/src/io-managers/clipboard.ts      | 14 +++++++++++++-
 frontend/src/io-managers/fonts.ts          | 13 ++++++++++++-
 frontend/src/io-managers/hyperlink.ts      | 14 +++++++++++++-
 frontend/src/io-managers/input.ts          | 13 ++++++++++++-
 frontend/src/io-managers/localization.ts   | 13 ++++++++++++-
 frontend/src/io-managers/panic.ts          | 13 ++++++++++++-
 frontend/src/io-managers/persistence.ts    | 13 ++++++++++++-
 frontend/src/state-providers/app-window.ts |  3 +++
 frontend/src/state-providers/dialog.ts     |  3 +++
 frontend/src/state-providers/document.ts   |  3 +++
 frontend/src/state-providers/fullscreen.ts |  3 +++
 frontend/src/state-providers/node-graph.ts |  3 +++
 frontend/src/state-providers/portfolio.ts  |  3 +++
 frontend/src/state-providers/tooltip.ts    |  3 +++
 frontend/wasm/src/editor_api.rs            |  7 ++++++-
 frontend/wasm/src/lib.rs                   |  1 +
 18 files changed, 119 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte
index 4e0641a4ba..d9abd462ac 100644
--- a/frontend/src/components/Editor.svelte
+++ b/frontend/src/components/Editor.svelte
@@ -49,7 +49,8 @@
 	const inputManagerDestructor = createInputManager(editor, dialog, portfolio, document, fullscreen);
 
 	onMount(() => {
-		// Initialize certain setup tasks required by the editor backend to be ready for the user now that the frontend is ready
+		// Initialize certain setup tasks required by the editor backend to be ready for the user now that the frontend is ready.
+		// The backend handles idempotency, so this is safe to call again during HMR re-mounts.
 		editor.handle.initAfterFrontendReady();
 	});
 
diff --git a/frontend/src/editor.ts b/frontend/src/editor.ts
index 9d393e2332..b961b050f5 100644
--- a/frontend/src/editor.ts
+++ b/frontend/src/editor.ts
@@ -15,8 +15,7 @@ export type Editor = {
 };
 
 // `wasmImport` starts uninitialized because its initialization needs to occur asynchronously, and thus needs to occur by manually calling and awaiting `initWasm()`.
-// Preserved across HMR since WASM state persists in memory and cannot be re-initialized.
-let wasmImport: WebAssembly.Memory | undefined = import.meta.hot?.data?.wasmImport;
+let wasmImport: WebAssembly.Memory | undefined;
 
 // Should be called asynchronously before `createEditor()`.
 export async function initWasm() {
@@ -83,11 +82,5 @@ export function createEditor(): Editor {
 	return { raw, handle, subscriptions, destroy };
 }
 
-// WASM state persists in memory across JS module re-evaluation, so accept HMR updates
-// without propagation to prevent components from trying to re-initialize the editor
-if (import.meta.hot) {
-	import.meta.hot.dispose((data) => {
-		data.wasmImport = wasmImport;
-	});
-	import.meta.hot.accept();
-}
+// Wasm state can't be hot-replaced, so we tell Vite to do a full page reload when this module changes
+import.meta.hot?.accept(() => location.reload());
diff --git a/frontend/src/io-managers/clipboard.ts b/frontend/src/io-managers/clipboard.ts
index f6da7a188a..77732ecf5a 100644
--- a/frontend/src/io-managers/clipboard.ts
+++ b/frontend/src/io-managers/clipboard.ts
@@ -1,6 +1,11 @@
 import type { Editor } from "@graphite/editor";
 
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+
 export function createClipboardManager(editor: Editor): () => void {
+	currentArgs = [editor];
+
 	// Subscribe to process backend event
 	editor.subscriptions.subscribeFrontendMessage("TriggerClipboardWrite", (data) => {
 		// If the Clipboard API is supported in the browser, copy text to the clipboard
@@ -13,11 +18,12 @@ export function createClipboardManager(editor: Editor): () => void {
 		insertAtCaret(data.content);
 	});
 
-	return () => {
+	currentCleanup = () => {
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerClipboardWrite");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionRead");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionWrite");
 	};
+	return currentCleanup;
 }
 
 function readAtCaret(cut: boolean): string | undefined {
@@ -100,3 +106,9 @@ function insertAtCaret(text: string) {
 
 	element.dispatchEvent(new Event("input", { bubbles: true }));
 }
+
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createClipboardManager(...currentArgs);
+});
diff --git a/frontend/src/io-managers/fonts.ts b/frontend/src/io-managers/fonts.ts
index c7c73224a9..3f3e5c6d57 100644
--- a/frontend/src/io-managers/fonts.ts
+++ b/frontend/src/io-managers/fonts.ts
@@ -4,7 +4,11 @@ type ApiResponse = { family: string; variants: string[]; files: Record<string, s
 
 const FONT_LIST_API = "https://api.graphite.art/font-list";
 
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+
 export function createFontsManager(editor: Editor): () => void {
+	currentArgs = [editor];
 	const abortController = new AbortController();
 
 	// Subscribe to process backend events
@@ -49,9 +53,16 @@ export function createFontsManager(editor: Editor): () => void {
 		}
 	});
 
-	return () => {
+	currentCleanup = () => {
 		abortController.abort();
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerFontCatalogLoad");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerFontDataLoad");
 	};
+	return currentCleanup;
 }
+
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createFontsManager(...currentArgs);
+});
diff --git a/frontend/src/io-managers/hyperlink.ts b/frontend/src/io-managers/hyperlink.ts
index b617c546b5..83e195db9a 100644
--- a/frontend/src/io-managers/hyperlink.ts
+++ b/frontend/src/io-managers/hyperlink.ts
@@ -1,12 +1,24 @@
 import type { Editor } from "@graphite/editor";
 
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+
 export function createHyperlinkManager(editor: Editor): () => void {
+	currentArgs = [editor];
+
 	// Subscribe to process backend event
 	editor.subscriptions.subscribeFrontendMessage("TriggerVisitLink", async (data) => {
 		window.open(data.url, "_blank");
 	});
 
-	return () => {
+	currentCleanup = () => {
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerVisitLink");
 	};
+	return currentCleanup;
 }
+
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createHyperlinkManager(...currentArgs);
+});
diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index 0529f64960..2a13e885dd 100644
--- a/frontend/src/io-managers/input.ts
+++ b/frontend/src/io-managers/input.ts
@@ -28,7 +28,11 @@ type EventListenerTarget = {
 	removeEventListener: typeof window.removeEventListener;
 };
 
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor, DialogState, PortfolioState, DocumentState, FullscreenState] | undefined;
+
 export function createInputManager(editor: Editor, dialog: DialogState, portfolio: PortfolioState, document: DocumentState, fullscreen: FullscreenState): () => void {
+	currentArgs = [editor, dialog, portfolio, document, fullscreen];
 	const appElement = window.document.querySelector("[data-app-container]");
 	const app = appElement instanceof HTMLElement ? appElement : null;
 	app?.focus();
@@ -508,13 +512,20 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
 	bindListeners();
 
 	// Return the destructor
-	return () => {
+	currentCleanup = () => {
 		unbindListeners();
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerClipboardRead");
 		editor.subscriptions.unsubscribeFrontendMessage("WindowPointerLockMove");
 	};
+	return currentCleanup;
 }
 
 function targetIsTextField(target: EventTarget | HTMLElement | undefined): boolean {
 	return target instanceof HTMLElement && (target.nodeName === "INPUT" || target.nodeName === "TEXTAREA" || target.isContentEditable);
 }
+
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createInputManager(...currentArgs);
+});
diff --git a/frontend/src/io-managers/localization.ts b/frontend/src/io-managers/localization.ts
index 85ea29c6b9..c4ea1d5323 100644
--- a/frontend/src/io-managers/localization.ts
+++ b/frontend/src/io-managers/localization.ts
@@ -1,15 +1,20 @@
 import type { Editor } from "@graphite/editor";
 
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+
 export function createLocalizationManager(editor: Editor): () => void {
+	currentArgs = [editor];
 	// Subscribe to process backend event
 	editor.subscriptions.subscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate", (data) => {
 		const localized = localizeTimestamp(data.commitDate);
 		editor.handle.requestAboutGraphiteDialogWithLocalizedCommitDate(localized.timestamp, localized.year);
 	});
 
-	return () => {
+	currentCleanup = () => {
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate");
 	};
+	return currentCleanup;
 }
 
 function localizeTimestamp(utc: string): { timestamp: string; year: string } {
@@ -26,3 +31,9 @@ function localizeTimestamp(utc: string): { timestamp: string; year: string } {
 	const timezoneNameString = timezoneName?.value;
 	return { timestamp: `${dateString} ${timeString} ${timezoneNameString}`, year: String(date.getFullYear()) };
 }
+
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createLocalizationManager(...currentArgs);
+});
diff --git a/frontend/src/io-managers/panic.ts b/frontend/src/io-managers/panic.ts
index c3139ee320..8263965fdf 100644
--- a/frontend/src/io-managers/panic.ts
+++ b/frontend/src/io-managers/panic.ts
@@ -3,7 +3,11 @@ import type { DialogState } from "@graphite/state-providers/dialog";
 import { browserVersion, operatingSystem } from "@graphite/utility-functions/platform";
 import { stripIndents } from "@graphite/utility-functions/strip-indents";
 
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor, DialogState] | undefined;
+
 export function createPanicManager(editor: Editor, dialogState: DialogState): () => void {
+	currentArgs = [editor, dialogState];
 	// Code panic dialog and console error
 	editor.subscriptions.subscribeFrontendMessage("DisplayDialogPanic", (data) => {
 		// `Error.stackTraceLimit` is only available in V8/Chromium
@@ -19,9 +23,10 @@ export function createPanicManager(editor: Editor, dialogState: DialogState): ()
 		dialogState.createCrashDialog(panicDetails);
 	});
 
-	return () => {
+	currentCleanup = () => {
 		editor.subscriptions.unsubscribeFrontendMessage("DisplayDialogPanic");
 	};
+	return currentCleanup;
 }
 
 export function githubUrl(panicDetails: string): string {
@@ -82,3 +87,9 @@ export function githubUrl(panicDetails: string): string {
 	}
 	return urlString;
 }
+
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createPanicManager(...currentArgs);
+});
diff --git a/frontend/src/io-managers/persistence.ts b/frontend/src/io-managers/persistence.ts
index bd15837a4d..789f043890 100644
--- a/frontend/src/io-managers/persistence.ts
+++ b/frontend/src/io-managers/persistence.ts
@@ -7,7 +7,11 @@ import type { MessageBody } from "@graphite/subscription-router";
 
 const graphiteStore = createStore("graphite", "store");
 
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor, PortfolioState] | undefined;
+
 export function createPersistenceManager(editor: Editor, portfolio: PortfolioState): () => void {
+	currentArgs = [editor, portfolio];
 	// DOCUMENTS
 
 	async function storeDocumentOrder() {
@@ -201,7 +205,7 @@ export function createPersistenceManager(editor: Editor, portfolio: PortfolioSta
 		}
 	});
 
-	return () => {
+	currentCleanup = () => {
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerSavePreferences");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerLoadPreferences");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerPersistenceWriteDocument");
@@ -211,6 +215,7 @@ export function createPersistenceManager(editor: Editor, portfolio: PortfolioSta
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerOpenLaunchDocuments");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerSaveActiveDocument");
 	};
+	return currentCleanup;
 }
 
 export async function wipeDocuments() {
@@ -218,3 +223,9 @@ export async function wipeDocuments() {
 	await del("current_document_id", graphiteStore);
 	await del("documents", graphiteStore);
 }
+
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createPersistenceManager(...currentArgs);
+});
diff --git a/frontend/src/state-providers/app-window.ts b/frontend/src/state-providers/app-window.ts
index 9cd5016612..bc17bce9dc 100644
--- a/frontend/src/state-providers/app-window.ts
+++ b/frontend/src/state-providers/app-window.ts
@@ -64,3 +64,6 @@ export function createAppWindowState(editor: Editor) {
 	};
 }
 export type AppWindowState = ReturnType<typeof createAppWindowState>;
+
+// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
+import.meta.hot?.accept(() => location.reload());
diff --git a/frontend/src/state-providers/dialog.ts b/frontend/src/state-providers/dialog.ts
index 45ccd36f6a..e8a2ec9928 100644
--- a/frontend/src/state-providers/dialog.ts
+++ b/frontend/src/state-providers/dialog.ts
@@ -113,3 +113,6 @@ export function createDialogState(editor: Editor) {
 	};
 }
 export type DialogState = ReturnType<typeof createDialogState>;
+
+// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
+import.meta.hot?.accept(() => location.reload());
diff --git a/frontend/src/state-providers/document.ts b/frontend/src/state-providers/document.ts
index cb8423667f..7cba8a2c96 100644
--- a/frontend/src/state-providers/document.ts
+++ b/frontend/src/state-providers/document.ts
@@ -95,3 +95,6 @@ export function createDocumentState(editor: Editor) {
 	};
 }
 export type DocumentState = ReturnType<typeof createDocumentState>;
+
+// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
+import.meta.hot?.accept(() => location.reload());
diff --git a/frontend/src/state-providers/fullscreen.ts b/frontend/src/state-providers/fullscreen.ts
index 8df7d10c87..8cf12c9b0f 100644
--- a/frontend/src/state-providers/fullscreen.ts
+++ b/frontend/src/state-providers/fullscreen.ts
@@ -66,3 +66,6 @@ export function createFullscreenState(editor: Editor) {
 	};
 }
 export type FullscreenState = ReturnType<typeof createFullscreenState>;
+
+// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
+import.meta.hot?.accept(() => location.reload());
diff --git a/frontend/src/state-providers/node-graph.ts b/frontend/src/state-providers/node-graph.ts
index 5bb29972d1..543911f682 100644
--- a/frontend/src/state-providers/node-graph.ts
+++ b/frontend/src/state-providers/node-graph.ts
@@ -213,3 +213,6 @@ export function createNodeGraphState(editor: Editor) {
 	};
 }
 export type NodeGraphState = ReturnType<typeof createNodeGraphState>;
+
+// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
+import.meta.hot?.accept(() => location.reload());
diff --git a/frontend/src/state-providers/portfolio.ts b/frontend/src/state-providers/portfolio.ts
index de26d78eb0..59e65f57ce 100644
--- a/frontend/src/state-providers/portfolio.ts
+++ b/frontend/src/state-providers/portfolio.ts
@@ -119,3 +119,6 @@ export function createPortfolioState(editor: Editor) {
 	};
 }
 export type PortfolioState = ReturnType<typeof createPortfolioState>;
+
+// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
+import.meta.hot?.accept(() => location.reload());
diff --git a/frontend/src/state-providers/tooltip.ts b/frontend/src/state-providers/tooltip.ts
index f80d78d359..83ccec61e3 100644
--- a/frontend/src/state-providers/tooltip.ts
+++ b/frontend/src/state-providers/tooltip.ts
@@ -124,3 +124,6 @@ export function createTooltipState(editor: Editor) {
 	};
 }
 export type TooltipState = ReturnType<typeof createTooltipState>;
+
+// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
+import.meta.hot?.accept(() => location.reload());
diff --git a/frontend/wasm/src/editor_api.rs b/frontend/wasm/src/editor_api.rs
index e399e4c2d3..5ec5ed9da8 100644
--- a/frontend/wasm/src/editor_api.rs
+++ b/frontend/wasm/src/editor_api.rs
@@ -5,7 +5,7 @@
 // on the dispatcher messaging system and more complex Rust data types.
 //
 use crate::helpers::translate_key;
-use crate::{EDITOR_HANDLE, EDITOR_HAS_CRASHED, Error, MESSAGE_BUFFER, PANIC_DIALOG_MESSAGE_CALLBACK};
+use crate::{EDITOR_HANDLE, EDITOR_HAS_CRASHED, Error, FRONTEND_READY, MESSAGE_BUFFER, PANIC_DIALOG_MESSAGE_CALLBACK};
 use editor::consts::FILE_EXTENSION;
 use editor::messages::clipboard::utility_types::ClipboardContentRaw;
 use editor::messages::input_mapper::utility_types::input_keyboard::ModifierKeys;
@@ -189,6 +189,11 @@ impl EditorHandle {
 
 	#[wasm_bindgen(js_name = initAfterFrontendReady)]
 	pub fn init_after_frontend_ready(&self) {
+		// Enforce idempotency, so if this is called again during an HMR re-mount, we don't initialize the editor backend twice
+		if FRONTEND_READY.swap(true, Ordering::SeqCst) {
+			return;
+		}
+
 		#[cfg(feature = "native")]
 		crate::native_communication::initialize_native_communication();
 
diff --git a/frontend/wasm/src/lib.rs b/frontend/wasm/src/lib.rs
index 34c591fded..a1e5c057b5 100644
--- a/frontend/wasm/src/lib.rs
+++ b/frontend/wasm/src/lib.rs
@@ -16,6 +16,7 @@ use wasm_bindgen::prelude::*;
 
 // Set up the persistent editor backend state
 pub static EDITOR_HAS_CRASHED: AtomicBool = AtomicBool::new(false);
+pub static FRONTEND_READY: AtomicBool = AtomicBool::new(false);
 pub static NODE_GRAPH_ERROR_DISPLAYED: AtomicBool = AtomicBool::new(false);
 pub static LOGGER: WasmLog = WasmLog;
 

From 39b75baefe1759c46519213d8ea35d229966a143 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Mon, 9 Mar 2026 00:25:44 -0700
Subject: [PATCH 7/8] Rename IO Managers -> Managers and State Providers ->
 Stores

---
 frontend/src/{io-managers => managers}/clipboard.ts    | 0
 frontend/src/{io-managers => managers}/fonts.ts        | 0
 frontend/src/{io-managers => managers}/hyperlink.ts    | 0
 frontend/src/{io-managers => managers}/input.ts        | 0
 frontend/src/{io-managers => managers}/localization.ts | 0
 frontend/src/{io-managers => managers}/panic.ts        | 0
 frontend/src/{io-managers => managers}/persistence.ts  | 0
 frontend/src/{state-providers => stores}/app-window.ts | 0
 frontend/src/{state-providers => stores}/dialog.ts     | 0
 frontend/src/{state-providers => stores}/document.ts   | 0
 frontend/src/{state-providers => stores}/fullscreen.ts | 0
 frontend/src/{state-providers => stores}/node-graph.ts | 0
 frontend/src/{state-providers => stores}/portfolio.ts  | 0
 frontend/src/{state-providers => stores}/tooltip.ts    | 0
 14 files changed, 0 insertions(+), 0 deletions(-)
 rename frontend/src/{io-managers => managers}/clipboard.ts (100%)
 rename frontend/src/{io-managers => managers}/fonts.ts (100%)
 rename frontend/src/{io-managers => managers}/hyperlink.ts (100%)
 rename frontend/src/{io-managers => managers}/input.ts (100%)
 rename frontend/src/{io-managers => managers}/localization.ts (100%)
 rename frontend/src/{io-managers => managers}/panic.ts (100%)
 rename frontend/src/{io-managers => managers}/persistence.ts (100%)
 rename frontend/src/{state-providers => stores}/app-window.ts (100%)
 rename frontend/src/{state-providers => stores}/dialog.ts (100%)
 rename frontend/src/{state-providers => stores}/document.ts (100%)
 rename frontend/src/{state-providers => stores}/fullscreen.ts (100%)
 rename frontend/src/{state-providers => stores}/node-graph.ts (100%)
 rename frontend/src/{state-providers => stores}/portfolio.ts (100%)
 rename frontend/src/{state-providers => stores}/tooltip.ts (100%)

diff --git a/frontend/src/io-managers/clipboard.ts b/frontend/src/managers/clipboard.ts
similarity index 100%
rename from frontend/src/io-managers/clipboard.ts
rename to frontend/src/managers/clipboard.ts
diff --git a/frontend/src/io-managers/fonts.ts b/frontend/src/managers/fonts.ts
similarity index 100%
rename from frontend/src/io-managers/fonts.ts
rename to frontend/src/managers/fonts.ts
diff --git a/frontend/src/io-managers/hyperlink.ts b/frontend/src/managers/hyperlink.ts
similarity index 100%
rename from frontend/src/io-managers/hyperlink.ts
rename to frontend/src/managers/hyperlink.ts
diff --git a/frontend/src/io-managers/input.ts b/frontend/src/managers/input.ts
similarity index 100%
rename from frontend/src/io-managers/input.ts
rename to frontend/src/managers/input.ts
diff --git a/frontend/src/io-managers/localization.ts b/frontend/src/managers/localization.ts
similarity index 100%
rename from frontend/src/io-managers/localization.ts
rename to frontend/src/managers/localization.ts
diff --git a/frontend/src/io-managers/panic.ts b/frontend/src/managers/panic.ts
similarity index 100%
rename from frontend/src/io-managers/panic.ts
rename to frontend/src/managers/panic.ts
diff --git a/frontend/src/io-managers/persistence.ts b/frontend/src/managers/persistence.ts
similarity index 100%
rename from frontend/src/io-managers/persistence.ts
rename to frontend/src/managers/persistence.ts
diff --git a/frontend/src/state-providers/app-window.ts b/frontend/src/stores/app-window.ts
similarity index 100%
rename from frontend/src/state-providers/app-window.ts
rename to frontend/src/stores/app-window.ts
diff --git a/frontend/src/state-providers/dialog.ts b/frontend/src/stores/dialog.ts
similarity index 100%
rename from frontend/src/state-providers/dialog.ts
rename to frontend/src/stores/dialog.ts
diff --git a/frontend/src/state-providers/document.ts b/frontend/src/stores/document.ts
similarity index 100%
rename from frontend/src/state-providers/document.ts
rename to frontend/src/stores/document.ts
diff --git a/frontend/src/state-providers/fullscreen.ts b/frontend/src/stores/fullscreen.ts
similarity index 100%
rename from frontend/src/state-providers/fullscreen.ts
rename to frontend/src/stores/fullscreen.ts
diff --git a/frontend/src/state-providers/node-graph.ts b/frontend/src/stores/node-graph.ts
similarity index 100%
rename from frontend/src/state-providers/node-graph.ts
rename to frontend/src/stores/node-graph.ts
diff --git a/frontend/src/state-providers/portfolio.ts b/frontend/src/stores/portfolio.ts
similarity index 100%
rename from frontend/src/state-providers/portfolio.ts
rename to frontend/src/stores/portfolio.ts
diff --git a/frontend/src/state-providers/tooltip.ts b/frontend/src/stores/tooltip.ts
similarity index 100%
rename from frontend/src/state-providers/tooltip.ts
rename to frontend/src/stores/tooltip.ts

From a7587a4396ddd087925b66127cf26293a26a35d8 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Mon, 9 Mar 2026 02:54:56 -0700
Subject: [PATCH 8/8] Restructure and partially flatten managers/stores

---
 frontend/src/README.md                        |  22 +-
 frontend/src/components/Editor.svelte         |  89 ++---
 .../floating-menus/ColorPicker.svelte         |   9 +-
 .../components/floating-menus/Dialog.svelte   |  11 +-
 .../floating-menus/NodeCatalog.svelte         |   4 +-
 .../components/floating-menus/Tooltip.svelte  |   4 +-
 .../src/components/panels/Document.svelte     |   8 +-
 frontend/src/components/panels/Layers.svelte  |   8 +-
 frontend/src/components/views/Graph.svelte    |  17 +-
 .../widgets/inputs/CurveInput.svelte          |   5 +-
 .../widgets/inputs/NumberInput.svelte         |   2 +-
 .../widgets/inputs/ScrollbarInput.svelte      |   2 +-
 .../src/components/window/MainWindow.svelte   |  12 +-
 .../src/components/window/TitleBar.svelte     |  19 +-
 .../src/components/window/Workspace.svelte    |   4 +-
 frontend/src/managers/clipboard.ts            |  11 +-
 frontend/src/managers/fonts.ts                |  11 +-
 frontend/src/managers/hyperlink.ts            |  11 +-
 frontend/src/managers/input.ts                |  26 +-
 frontend/src/managers/localization.ts         |  12 +-
 frontend/src/managers/panic.ts                |  78 +----
 frontend/src/managers/persistence.ts          | 325 +++++++++---------
 frontend/src/stores/app-window.ts             |  48 ++-
 frontend/src/stores/dialog.ts                 | 116 ++++---
 frontend/src/stores/document.ts               |  57 +--
 frontend/src/stores/fullscreen.ts             | 111 +++---
 frontend/src/stores/node-graph.ts             | 123 ++++---
 frontend/src/stores/portfolio.ts              |  52 ++-
 frontend/src/stores/tooltip.ts                |  56 +--
 .../src/utility-functions/crash-report.ts     |  61 ++++
 frontend/src/utility-functions/math.ts        |   3 -
 frontend/src/utility-functions/platform.ts    |   6 +-
 32 files changed, 708 insertions(+), 615 deletions(-)
 create mode 100644 frontend/src/utility-functions/crash-report.ts
 delete mode 100644 frontend/src/utility-functions/math.ts

diff --git a/frontend/src/README.md b/frontend/src/README.md
index 7195b05372..46e25d223f 100644
--- a/frontend/src/README.md
+++ b/frontend/src/README.md
@@ -4,23 +4,21 @@
 
 Svelte components that build the Graphite editor GUI. These each contain a TypeScript section, a Svelte-templated HTML template section, and an SCSS stylesheet section. The aim is to avoid implementing much editor business logic here, just enough to make things interactive and communicate to the backend where the real business logic should occur.
 
-## I/O managers: `io-managers/`
+## Managers: `managers/`
 
-TypeScript files which manage the input/output of browser APIs and link this functionality with the editor backend. These files subscribe to backend events to execute JS APIs, and in response to these APIs or user interactions, they may call functions into the backend (defined in `/frontend/wasm/editor_api.rs`).
+TypeScript files which manage the input/output of browser APIs and link this functionality with the editor backend. These files subscribe to backend messages to execute JS APIs, and in response to these APIs or user interactions, they may call functions into the backend (defined in `/frontend/wasm/editor_api.rs`).
 
-Each I/O manager is a self-contained module where one instance is created in `Editor.svelte` when it's mounted to the DOM at app startup.
+Each manager module exports a factory function (e.g. `createClipboardManager(editor)`) that sets up message subscriptions and returns a `{ destroy }` object. In `Editor.svelte`, each manager is created at startup and its `destroy()` method is called on unmount to clean up subscriptions and side-effects (e.g. event listeners). Managers use self-accepting HMR to tear down and re-create with updated code during development.
 
-During development when HMR (hot-module replacement) occurs, these are also unmounted to clean up after themselves, so they can be mounted again with the updated code. Therefore, any side-effects that these managers cause (e.g. adding event listeners to the page) need a destructor function that cleans them up. The destructor function, when applicable, is returned by the module and automatically called in `Editor.svelte` on unmount.
+## Stores: `stores/`
 
-## State providers: `state-providers/`
+TypeScript files which provide reactive state to Svelte components. Each module persists a Svelte writable store at module level (surviving HMR via `import.meta.hot.data`) and exports a factory function (e.g. `createDialogStore(editor)`) that sets up backend message subscriptions and returns an object containing the store's `subscribe` method, any action methods for components to call, and a `destroy` method.
 
-TypeScript files which provide reactive state and importable functions to Svelte components. Each module defines a Svelte writable store `const { subscribe, update } = writable({ .. });` and exports the `subscribe` method from the module in the returned object. Other functions may also be defined in the module and exported after `subscribe`, which provide a way for Svelte components to call functions to manipulate the state.
+In `Editor.svelte`, each store is created and passed to Svelte's `setContext()`. Components access stores via `getContext<DialogStore>("dialog")` and use the `subscribe` method for reactive state and action methods (like `createCrashDialog()`) to trigger state changes.
 
-In `Editor.svelte`, an instance of each of these are given to Svelte's `setContext()` function. This allows any component to access the state provider instance using `const exampleStateProvider = getContext<ExampleStateProvider>("exampleStateProvider");`.
+## *Managers vs. stores*
 
-## *I/O managers vs. state providers*
-
-*Some state providers, similarly to I/O managers, may subscribe to backend events, call functions from `editor_api.rs` into the backend, and interact with browser APIs and user input. The difference is that state providers are meant to be made available to components via `getContext()` to use them for reactive state, while I/O managers are meant to be self-contained systems that operate for the lifetime of the application and aren't touched by Svelte components.*
+*Both managers and stores subscribe to backend messages and may interact with browser APIs. The difference is that stores expose reactive state to components via `setContext()`/`getContext()`, while managers are self-contained systems that operate for the lifetime of the application and aren't accessed by Svelte components.*
 
 ## Utility functions: `utility-functions/`
 
@@ -30,7 +28,7 @@ TypeScript files which define and `export` individual helper functions for use e
 
 Instantiates the Wasm and editor backend instances. The function `initWasm()` asynchronously constructs and initializes an instance of the Wasm bindings JS module provided by wasm-bindgen/wasm-pack. The function `createEditor()` constructs an instance of the editor backend. In theory there could be multiple editor instances sharing the same Wasm module instance. The function returns an object where `raw` is the Wasm memory, `handle` provides access to callable backend functions, and `subscriptions` is the subscription router (described below).
 
-`initWasm()` occurs in `main.ts` right before the Svelte application is mounted, then `createEditor()` is run in `Editor.svelte` during the Svelte app's creation. Similarly to the state providers described above, the editor is given via `setContext()` so other components can get it via `getContext` and call functions on `editor.handle` or `editor.subscriptions`.
+`initWasm()` occurs in `main.ts` right before the Svelte application is mounted, then `createEditor()` is run in `Editor.svelte` during the Svelte app's creation. Similarly to the stores described above, the editor is given via `setContext()` so other components can get it via `getContext` and call functions on `editor.handle` or `editor.subscriptions`.
 
 ## Subscription router: `subscription-router.ts`
 
@@ -42,7 +40,7 @@ The entry point for the Svelte application.
 
 ## Editor base instance: `Editor.svelte`
 
-This is where we define global CSS style rules, create/destroy the editor instance, construct/destruct the I/O managers, and construct and `setContext()` the state providers.
+This is where we define global CSS style rules, construct all stores and managers with the editor instance, set store contexts for component access, and clean up all `destroy()` methods on unmount.
 
 ## Global type augmentations: `global.d.ts`
 
diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte
index d9abd462ac..46e93952ab 100644
--- a/frontend/src/components/Editor.svelte
+++ b/frontend/src/components/Editor.svelte
@@ -2,20 +2,20 @@
 	import { onMount, onDestroy, setContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { createClipboardManager } from "@graphite/io-managers/clipboard";
-	import { createHyperlinkManager } from "@graphite/io-managers/hyperlink";
-	import { createInputManager } from "@graphite/io-managers/input";
-	import { createLocalizationManager } from "@graphite/io-managers/localization";
-	import { createPanicManager } from "@graphite/io-managers/panic";
-	import { createPersistenceManager } from "@graphite/io-managers/persistence";
-	import { createAppWindowState } from "@graphite/state-providers/app-window";
-	import { createDialogState } from "@graphite/state-providers/dialog";
-	import { createDocumentState } from "@graphite/state-providers/document";
-	import { createFontsManager } from "/src/io-managers/fonts";
-	import { createFullscreenState } from "@graphite/state-providers/fullscreen";
-	import { createNodeGraphState } from "@graphite/state-providers/node-graph";
-	import { createPortfolioState } from "@graphite/state-providers/portfolio";
-	import { createTooltipState } from "@graphite/state-providers/tooltip";
+	import { createClipboardManager } from "@graphite/managers/clipboard";
+	import { createFontsManager } from "@graphite/managers/fonts";
+	import { createHyperlinkManager } from "@graphite/managers/hyperlink";
+	import { createInputManager } from "@graphite/managers/input";
+	import { createLocalizationManager } from "@graphite/managers/localization";
+	import { createPanicManager } from "@graphite/managers/panic";
+	import { createPersistenceManager } from "@graphite/managers/persistence";
+	import { createAppWindowStore } from "@graphite/stores/app-window";
+	import { createDialogStore } from "@graphite/stores/dialog";
+	import { createDocumentStore } from "@graphite/stores/document";
+	import { createFullscreenStore } from "@graphite/stores/fullscreen";
+	import { createNodeGraphStore } from "@graphite/stores/node-graph";
+	import { createPortfolioStore } from "@graphite/stores/portfolio";
+	import { createTooltipStore } from "@graphite/stores/tooltip";
 
 	import MainWindow from "@graphite/components/window/MainWindow.svelte";
 
@@ -23,30 +23,26 @@
 	export let editor: Editor;
 	setContext("editor", editor);
 
-	// State provider systems
-	let dialog = createDialogState(editor);
-	setContext("dialog", dialog);
-	let tooltip = createTooltipState(editor);
-	setContext("tooltip", tooltip);
-	let document = createDocumentState(editor);
-	setContext("document", document);
-	let fullscreen = createFullscreenState(editor);
-	setContext("fullscreen", fullscreen);
-	let nodeGraph = createNodeGraphState(editor);
-	setContext("nodeGraph", nodeGraph);
-	let portfolio = createPortfolioState(editor);
-	setContext("portfolio", portfolio);
-	let appWindow = createAppWindowState(editor);
-	setContext("appWindow", appWindow);
-
-	// Initialize managers, which are isolated systems that subscribe to backend messages to link them to browser API functionality (like JS events, IndexedDB, etc.)
-	const clipboardManagerDestructor = createClipboardManager(editor);
-	const hyperlinkManagerDestructor = createHyperlinkManager(editor);
-	const localizationManagerDestructor = createLocalizationManager(editor);
-	const panicManagerDestructor = createPanicManager(editor, dialog);
-	const persistenceManagerDestructor = createPersistenceManager(editor, portfolio);
-	const fontsManagerDestructor = createFontsManager(editor);
-	const inputManagerDestructor = createInputManager(editor, dialog, portfolio, document, fullscreen);
+	const stores = {
+		dialog: createDialogStore(editor),
+		tooltip: createTooltipStore(editor),
+		document: createDocumentStore(editor),
+		fullscreen: createFullscreenStore(editor),
+		nodeGraph: createNodeGraphStore(editor),
+		portfolio: createPortfolioStore(editor),
+		appWindow: createAppWindowStore(editor),
+	};
+	Object.entries(stores).forEach(([key, store]) => setContext(key, store));
+
+	const managers = {
+		clipboard: createClipboardManager(editor),
+		hyperlink: createHyperlinkManager(editor),
+		localization: createLocalizationManager(editor),
+		panic: createPanicManager(editor),
+		persistence: createPersistenceManager(editor, stores.portfolio),
+		fonts: createFontsManager(editor),
+		input: createInputManager(editor, stores.dialog, stores.portfolio, stores.document, stores.fullscreen),
+	};
 
 	onMount(() => {
 		// Initialize certain setup tasks required by the editor backend to be ready for the user now that the frontend is ready.
@@ -55,22 +51,7 @@
 	});
 
 	onDestroy(() => {
-		// Call the destructor for each manager
-		clipboardManagerDestructor();
-		hyperlinkManagerDestructor();
-		localizationManagerDestructor();
-		panicManagerDestructor();
-		persistenceManagerDestructor();
-		fontsManagerDestructor();
-		inputManagerDestructor();
-		// Clean up state provider subscriptions and event listeners
-		dialog.destroy();
-		tooltip.destroy();
-		document.destroy();
-		fullscreen.destroy();
-		nodeGraph.destroy();
-		portfolio.destroy();
-		appWindow.destroy();
+		[...Object.values(stores), ...Object.values(managers)].forEach(({ destroy }) => destroy());
 	});
 </script>
 
diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte
index 8dee3b7881..ccc7edf0c6 100644
--- a/frontend/src/components/floating-menus/ColorPicker.svelte
+++ b/frontend/src/components/floating-menus/ColorPicker.svelte
@@ -3,7 +3,7 @@
 
 	import { isPlatformNative } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { FillChoice, MenuDirection, Color } from "@graphite/../wasm/pkg/graphite_wasm";
-	import type { TooltipState } from "@graphite/state-providers/tooltip";
+	import type { TooltipStore } from "@graphite/stores/tooltip";
 	import {
 		contrastingOutlineFactor,
 		fillChoiceColor,
@@ -22,7 +22,6 @@
 		gradientFirstColor,
 	} from "@graphite/utility-functions/colors";
 	import type { HSV, RGB } from "@graphite/utility-functions/colors";
-	import { clamp } from "@graphite/utility-functions/math";
 
 	import FloatingMenu, { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -57,7 +56,7 @@
 	];
 
 	const dispatch = createEventDispatcher<{ colorOrGradient: FillChoice; startHistoryTransaction: undefined; commitHistoryTransaction: undefined }>();
-	const tooltip = getContext<TooltipState>("tooltip");
+	const tooltip = getContext<TooltipStore>("tooltip");
 
 	export let colorOrGradient: FillChoice;
 	export let allowNone = false;
@@ -438,6 +437,10 @@
 		setOldHSVA(hsv.h, hsv.s, hsv.v, color.alpha, false);
 	}
 
+	function clamp(value: number, min = 0, max = 1): number {
+		return Math.max(min, Math.min(value, max));
+	}
+
 	export function div(): HTMLDivElement | undefined {
 		return self?.div();
 	}
diff --git a/frontend/src/components/floating-menus/Dialog.svelte b/frontend/src/components/floating-menus/Dialog.svelte
index b1150ad06c..3b1b45528a 100644
--- a/frontend/src/components/floating-menus/Dialog.svelte
+++ b/frontend/src/components/floating-menus/Dialog.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
 
-	import { githubUrl } from "@graphite/io-managers/panic";
-	import { wipeDocuments } from "@graphite/io-managers/persistence";
-
-	import type { DialogState } from "@graphite/state-providers/dialog";
+	import { wipeDocuments } from "@graphite/managers/persistence";
+	import type { DialogStore } from "@graphite/stores/dialog";
+	import { crashReportUrl } from "/src/utility-functions/crash-report";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -14,7 +13,7 @@
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
-	const dialog = getContext<DialogState>("dialog");
+	const dialog = getContext<DialogStore>("dialog");
 
 	let self: FloatingMenu | undefined;
 
@@ -43,7 +42,7 @@
 				<div class="widget-layout details">
 					<div class="widget-span row"><TextLabel bold={true}>The editor crashed — sorry about that</TextLabel></div>
 					<div class="widget-span row"><TextLabel>Please report this by filing an issue on GitHub:</TextLabel></div>
-					<div class="widget-span row"><TextButton label="Report Bug" icon="Warning" flush={true} action={() => window.open(githubUrl($dialog.panicDetails), "_blank")} /></div>
+					<div class="widget-span row"><TextButton label="Report Bug" icon="Warning" flush={true} action={() => window.open(crashReportUrl($dialog.panicDetails), "_blank")} /></div>
 					<div class="widget-span row"><TextLabel multiline={true}>Reload the editor to continue. If this occurs<br />immediately on repeated reloads, clear storage:</TextLabel></div>
 					<div class="widget-span row">
 						<TextButton
diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte
index a28cf976a5..43cc6a4b56 100644
--- a/frontend/src/components/floating-menus/NodeCatalog.svelte
+++ b/frontend/src/components/floating-menus/NodeCatalog.svelte
@@ -3,7 +3,7 @@
 	import { SvelteMap } from "svelte/reactivity";
 
 	import type { FrontendNodeType } from "@graphite/../wasm/pkg/graphite_wasm";
-	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
+	import type { NodeGraphStore } from "@graphite/stores/node-graph";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
@@ -11,7 +11,7 @@
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
 	const dispatch = createEventDispatcher<{ selectNodeType: string }>();
-	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
+	const nodeGraph = getContext<NodeGraphStore>("nodeGraph");
 
 	// Content
 	export let disabled = false;
diff --git a/frontend/src/components/floating-menus/Tooltip.svelte b/frontend/src/components/floating-menus/Tooltip.svelte
index 15696540b2..b8712d5c00 100644
--- a/frontend/src/components/floating-menus/Tooltip.svelte
+++ b/frontend/src/components/floating-menus/Tooltip.svelte
@@ -3,14 +3,14 @@
 
 	import type { LabeledShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { TooltipState } from "@graphite/state-providers/tooltip";
+	import type { TooltipStore } from "@graphite/stores/tooltip";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import ShortcutLabel from "@graphite/components/widgets/labels/ShortcutLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
-	const tooltip = getContext<TooltipState>("tooltip");
+	const tooltip = getContext<TooltipStore>("tooltip");
 	const editor = getContext<Editor>("editor");
 
 	let self: FloatingMenu | undefined;
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index 165ec7afe8..82ac7686a0 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -3,8 +3,8 @@
 
 	import type { Color, MenuDirection, MouseCursorIcon } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { AppWindowState } from "@graphite/state-providers/app-window";
-	import type { DocumentState } from "@graphite/state-providers/document";
+	import type { AppWindowStore } from "@graphite/stores/app-window";
+	import type { DocumentStore } from "@graphite/stores/document";
 	import type { MessageBody } from "@graphite/subscription-router";
 	import { fillChoiceColor, createColor } from "@graphite/utility-functions/colors";
 	import { pasteFile } from "@graphite/utility-functions/files";
@@ -27,8 +27,8 @@
 	let gradientStopPicker: ColorPicker | undefined;
 
 	const editor = getContext<Editor>("editor");
-	const appWindow = getContext<AppWindowState>("appWindow");
-	const document = getContext<DocumentState>("document");
+	const appWindow = getContext<AppWindowStore>("appWindow");
+	const document = getContext<DocumentStore>("document");
 
 	// Interactive text editing
 	let textInput: undefined | HTMLDivElement = undefined;
diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index 286b8a8384..03709fec0f 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -4,8 +4,8 @@
 
 	import type { LayerPanelEntry, LayerStructureEntry, Layout } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
-	import type { TooltipState } from "@graphite/state-providers/tooltip";
+	import type { NodeGraphStore } from "@graphite/stores/node-graph";
+	import type { TooltipStore } from "@graphite/stores/tooltip";
 	import { pasteFile } from "@graphite/utility-functions/files";
 	import { operatingSystem } from "@graphite/utility-functions/platform";
 	import { patchLayout } from "@graphite/utility-functions/widgets";
@@ -42,8 +42,8 @@
 	};
 
 	const editor = getContext<Editor>("editor");
-	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
-	const tooltip = getContext<TooltipState>("tooltip");
+	const nodeGraph = getContext<NodeGraphStore>("nodeGraph");
+	const tooltip = getContext<TooltipStore>("tooltip");
 
 	let list: LayoutCol | undefined;
 
diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte
index 646c621c8e..7668eb0b46 100644
--- a/frontend/src/components/views/Graph.svelte
+++ b/frontend/src/components/views/Graph.svelte
@@ -5,8 +5,9 @@
 
 	import type { FrontendGraphInput, FrontendGraphOutput, FrontendNode } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { DocumentState } from "@graphite/state-providers/document";
-	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
+	import type { DocumentStore } from "@graphite/stores/document";
+	import { closeContextMenu } from "@graphite/stores/node-graph";
+	import type { NodeGraphStore } from "@graphite/stores/node-graph";
 
 	import NodeCatalog from "@graphite/components/floating-menus/NodeCatalog.svelte";
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
@@ -20,8 +21,8 @@
 	const FADE_TRANSITION = { duration: 200, easing: cubicInOut };
 
 	const editor = getContext<Editor>("editor");
-	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
-	const documentState = getContext<DocumentState>("document");
+	const nodeGraph = getContext<NodeGraphStore>("nodeGraph");
+	const documentState = getContext<DocumentStore>("document");
 
 	let graph: HTMLDivElement | undefined;
 
@@ -29,7 +30,7 @@
 	$: gridDotRadius = 1 + Math.floor($nodeGraph.transform.scale - 0.5 + 0.001) / 2;
 
 	// Close the context menu when the graph view overlay is closed
-	$: if (!$documentState.graphViewOverlayOpen) nodeGraph.closeContextMenu();
+	$: if (!$documentState.graphViewOverlayOpen) closeContextMenu();
 
 	let inputElement: HTMLInputElement;
 	let hoveringImportIndex: number | undefined = undefined;
@@ -220,7 +221,7 @@
 						label="Merge Selected Nodes"
 						action={() => {
 							editor.handle.mergeSelectedNodes();
-							nodeGraph.closeContextMenu();
+							closeContextMenu();
 						}}
 						flush={true}
 					/>
@@ -231,7 +232,7 @@
 							if ($nodeGraph.contextMenuInformation?.contextMenuData.type === "ModifyNode") {
 								editor.handle.setToNodeOrLayer($nodeGraph.contextMenuInformation.contextMenuData.data.nodeId, currentlyIsNode);
 							}
-							nodeGraph.closeContextMenu();
+							closeContextMenu();
 						}}
 						disabled={!$nodeGraph.contextMenuInformation.contextMenuData.data.canBeLayer}
 						flush={true}
@@ -247,7 +248,7 @@
 								} else {
 									editor.handle.toggleLayerLock(nodeId);
 								}
-								nodeGraph.closeContextMenu();
+								closeContextMenu();
 							}}
 							flush={true}
 						/>
diff --git a/frontend/src/components/widgets/inputs/CurveInput.svelte b/frontend/src/components/widgets/inputs/CurveInput.svelte
index 9fc746ca2b..8fbcd27164 100644
--- a/frontend/src/components/widgets/inputs/CurveInput.svelte
+++ b/frontend/src/components/widgets/inputs/CurveInput.svelte
@@ -2,7 +2,6 @@
 	import { createEventDispatcher } from "svelte";
 
 	import type { Curve, CurveManipulatorGroup, ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
-	import { clamp } from "@graphite/utility-functions/math";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
@@ -185,6 +184,10 @@
 		dAttribute = recalculateSvgPath();
 		updateCurve();
 	}
+
+	function clamp(value: number, min = 0, max = 1): number {
+		return Math.max(min, Math.min(value, max));
+	}
 </script>
 
 <LayoutRow class="curve-input" {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index ef3a6d6164..1cabe6823f 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -4,7 +4,7 @@
 	import { evaluateMathExpression, isPlatformNative } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { NumberInputMode, NumberInputIncrementBehavior, ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS } from "@graphite/io-managers/input";
+	import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS } from "@graphite/managers/input";
 	import { browserVersion } from "@graphite/utility-functions/platform";
 
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
diff --git a/frontend/src/components/widgets/inputs/ScrollbarInput.svelte b/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
index 4a0e3efc38..c757ad7883 100644
--- a/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
+++ b/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, onDestroy } from "svelte";
 
-	import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS, PRESS_REPEAT_INTERVAL_RAPID_MS } from "@graphite/io-managers/input";
+	import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS, PRESS_REPEAT_INTERVAL_RAPID_MS } from "@graphite/managers/input";
 
 	const ARROW_CLICK_DISTANCE = 0.05;
 	const ARROW_REPEAT_DISTANCE = 0.01;
diff --git a/frontend/src/components/window/MainWindow.svelte b/frontend/src/components/window/MainWindow.svelte
index 252c417425..fae030d668 100644
--- a/frontend/src/components/window/MainWindow.svelte
+++ b/frontend/src/components/window/MainWindow.svelte
@@ -2,9 +2,9 @@
 	import { getContext } from "svelte";
 
 	import { isPlatformNative } from "@graphite/../wasm/pkg/graphite_wasm";
-	import type { AppWindowState } from "@graphite/state-providers/app-window";
-	import type { DialogState } from "@graphite/state-providers/dialog";
-	import type { TooltipState } from "@graphite/state-providers/tooltip";
+	import type { AppWindowStore } from "@graphite/stores/app-window";
+	import type { DialogStore } from "@graphite/stores/dialog";
+	import type { TooltipStore } from "@graphite/stores/tooltip";
 
 	import Dialog from "@graphite/components/floating-menus/Dialog.svelte";
 	import Tooltip from "@graphite/components/floating-menus/Tooltip.svelte";
@@ -14,9 +14,9 @@
 	import TitleBar from "@graphite/components/window/TitleBar.svelte";
 	import Workspace from "@graphite/components/window/Workspace.svelte";
 
-	const dialog = getContext<DialogState>("dialog");
-	const tooltip = getContext<TooltipState>("tooltip");
-	const appWindow = getContext<AppWindowState>("appWindow");
+	const dialog = getContext<DialogStore>("dialog");
+	const tooltip = getContext<TooltipStore>("tooltip");
+	const appWindow = getContext<AppWindowStore>("appWindow");
 </script>
 
 <LayoutCol class="main-window" classes={{ "viewport-hole-punch": $appWindow.viewportHolePunch }}>
diff --git a/frontend/src/components/window/TitleBar.svelte b/frontend/src/components/window/TitleBar.svelte
index 052c17485d..618057805e 100644
--- a/frontend/src/components/window/TitleBar.svelte
+++ b/frontend/src/components/window/TitleBar.svelte
@@ -4,19 +4,22 @@
 	import { isPlatformNative } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { AppWindowState } from "@graphite/state-providers/app-window";
-	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
-	import type { TooltipState } from "@graphite/state-providers/tooltip";
+	import type { AppWindowStore } from "@graphite/stores/app-window";
+	import { enterFullscreen, exitFullscreen } from "@graphite/stores/fullscreen";
+	import type { FullscreenStore } from "@graphite/stores/fullscreen";
+	import type { TooltipStore } from "@graphite/stores/tooltip";
 	import { patchLayout } from "@graphite/utility-functions/widgets";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
-	const appWindow = getContext<AppWindowState>("appWindow");
+	const keyboardLockApiSupported = navigator.keyboard !== undefined && "lock" in navigator.keyboard;
+
+	const appWindow = getContext<AppWindowStore>("appWindow");
 	const editor = getContext<Editor>("editor");
-	const fullscreen = getContext<FullscreenState>("fullscreen");
-	const tooltip = getContext<TooltipState>("tooltip");
+	const fullscreen = getContext<FullscreenStore>("fullscreen");
+	const tooltip = getContext<TooltipStore>("tooltip");
 
 	let menuBarLayout: Layout = [];
 
@@ -52,13 +55,13 @@
 			{#if showFullscreenButton}
 				<LayoutRow
 					tooltipLabel={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
-					tooltipDescription={$appWindow.platform === "Web" && $fullscreen.keyboardLockApiSupported
+					tooltipDescription={$appWindow.platform === "Web" && keyboardLockApiSupported
 						? "While fullscreen, keyboard shortcuts normally reserved by the browser become available."
 						: undefined}
 					tooltipShortcut={$tooltip.fullscreenShortcut}
 					on:click={() => {
 						if (isPlatformNative()) editor.handle.appWindowFullscreen();
-						else ($fullscreen.windowFullscreen ? fullscreen.exitFullscreen : fullscreen.enterFullscreen)();
+						else ($fullscreen.windowFullscreen ? exitFullscreen : enterFullscreen)();
 					}}
 				>
 					<IconLabel icon={isFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
diff --git a/frontend/src/components/window/Workspace.svelte b/frontend/src/components/window/Workspace.svelte
index c40a7cd1d6..9249300255 100644
--- a/frontend/src/components/window/Workspace.svelte
+++ b/frontend/src/components/window/Workspace.svelte
@@ -3,7 +3,7 @@
 
 	import type { OpenDocument } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { PortfolioState } from "@graphite/state-providers/portfolio";
+	import type { PortfolioStore } from "@graphite/stores/portfolio";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -42,7 +42,7 @@
 	});
 
 	const editor = getContext<Editor>("editor");
-	const portfolio = getContext<PortfolioState>("portfolio");
+	const portfolio = getContext<PortfolioStore>("portfolio");
 
 	function resizePanel(e: PointerEvent) {
 		const gutter = e.target;
diff --git a/frontend/src/managers/clipboard.ts b/frontend/src/managers/clipboard.ts
index 77732ecf5a..2656852653 100644
--- a/frontend/src/managers/clipboard.ts
+++ b/frontend/src/managers/clipboard.ts
@@ -3,7 +3,7 @@ import type { Editor } from "@graphite/editor";
 let currentCleanup: (() => void) | undefined;
 let currentArgs: [Editor] | undefined;
 
-export function createClipboardManager(editor: Editor): () => void {
+export function createClipboardManager(editor: Editor) {
 	currentArgs = [editor];
 
 	// Subscribe to process backend event
@@ -18,13 +18,16 @@ export function createClipboardManager(editor: Editor): () => void {
 		insertAtCaret(data.content);
 	});
 
-	currentCleanup = () => {
+	function destroy() {
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerClipboardWrite");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionRead");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionWrite");
-	};
-	return currentCleanup;
+	}
+
+	currentCleanup = destroy;
+	return { destroy };
 }
+export type ClipboardManager = ReturnType<typeof createClipboardManager>;
 
 function readAtCaret(cut: boolean): string | undefined {
 	const element = window.document.activeElement;
diff --git a/frontend/src/managers/fonts.ts b/frontend/src/managers/fonts.ts
index 3f3e5c6d57..01e571f19b 100644
--- a/frontend/src/managers/fonts.ts
+++ b/frontend/src/managers/fonts.ts
@@ -7,7 +7,7 @@ const FONT_LIST_API = "https://api.graphite.art/font-list";
 let currentCleanup: (() => void) | undefined;
 let currentArgs: [Editor] | undefined;
 
-export function createFontsManager(editor: Editor): () => void {
+export function createFontsManager(editor: Editor) {
 	currentArgs = [editor];
 	const abortController = new AbortController();
 
@@ -53,13 +53,16 @@ export function createFontsManager(editor: Editor): () => void {
 		}
 	});
 
-	currentCleanup = () => {
+	function destroy() {
 		abortController.abort();
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerFontCatalogLoad");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerFontDataLoad");
-	};
-	return currentCleanup;
+	}
+
+	currentCleanup = destroy;
+	return { destroy };
 }
+export type FontsManager = ReturnType<typeof createFontsManager>;
 
 // Self-accepting HMR: tear down the old instance and re-create with the new module's code
 import.meta.hot?.accept((newModule) => {
diff --git a/frontend/src/managers/hyperlink.ts b/frontend/src/managers/hyperlink.ts
index 83e195db9a..661aca4c16 100644
--- a/frontend/src/managers/hyperlink.ts
+++ b/frontend/src/managers/hyperlink.ts
@@ -3,7 +3,7 @@ import type { Editor } from "@graphite/editor";
 let currentCleanup: (() => void) | undefined;
 let currentArgs: [Editor] | undefined;
 
-export function createHyperlinkManager(editor: Editor): () => void {
+export function createHyperlinkManager(editor: Editor) {
 	currentArgs = [editor];
 
 	// Subscribe to process backend event
@@ -11,11 +11,14 @@ export function createHyperlinkManager(editor: Editor): () => void {
 		window.open(data.url, "_blank");
 	});
 
-	currentCleanup = () => {
+	function destroy() {
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerVisitLink");
-	};
-	return currentCleanup;
+	}
+
+	currentCleanup = destroy;
+	return { destroy };
 }
+export type HyperlinkManager = ReturnType<typeof createHyperlinkManager>;
 
 // Self-accepting HMR: tear down the old instance and re-create with the new module's code
 import.meta.hot?.accept((newModule) => {
diff --git a/frontend/src/managers/input.ts b/frontend/src/managers/input.ts
index 2a13e885dd..da3a3d1cee 100644
--- a/frontend/src/managers/input.ts
+++ b/frontend/src/managers/input.ts
@@ -2,10 +2,11 @@ import { get } from "svelte/store";
 
 import { isPlatformNative } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
-import type { DialogState } from "@graphite/state-providers/dialog";
-import type { DocumentState } from "@graphite/state-providers/document";
-import type { FullscreenState } from "@graphite/state-providers/fullscreen";
-import type { PortfolioState } from "@graphite/state-providers/portfolio";
+import type { DialogStore } from "@graphite/stores/dialog";
+import type { DocumentStore } from "@graphite/stores/document";
+import { fullscreenModeChanged, toggleFullscreen } from "@graphite/stores/fullscreen";
+import type { FullscreenStore } from "@graphite/stores/fullscreen";
+import type { PortfolioStore } from "@graphite/stores/portfolio";
 import { pasteFile } from "@graphite/utility-functions/files";
 import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode } from "@graphite/utility-functions/keyboard-entry";
 import { operatingSystem } from "@graphite/utility-functions/platform";
@@ -29,9 +30,9 @@ type EventListenerTarget = {
 };
 
 let currentCleanup: (() => void) | undefined;
-let currentArgs: [Editor, DialogState, PortfolioState, DocumentState, FullscreenState] | undefined;
+let currentArgs: [Editor, DialogStore, PortfolioStore, DocumentStore, FullscreenStore] | undefined;
 
-export function createInputManager(editor: Editor, dialog: DialogState, portfolio: PortfolioState, document: DocumentState, fullscreen: FullscreenState): () => void {
+export function createInputManager(editor: Editor, dialog: DialogStore, portfolio: PortfolioStore, document: DocumentStore, fullscreen: FullscreenStore) {
 	currentArgs = [editor, dialog, portfolio, document, fullscreen];
 	const appElement = window.document.querySelector("[data-app-container]");
 	const app = appElement instanceof HTMLElement ? appElement : null;
@@ -59,7 +60,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
 		{ target: window, eventName: "modifyinputfield", action: (e: CustomEvent) => onModifyInputField(e) },
 		{ target: window, eventName: "focusout", action: () => (canvasFocused = false) },
 		{ target: window.document, eventName: "contextmenu", action: (e: MouseEvent) => onContextMenu(e) },
-		{ target: window.document, eventName: "fullscreenchange", action: () => fullscreen.fullscreenModeChanged() },
+		{ target: window.document, eventName: "fullscreenchange", action: () => fullscreenModeChanged() },
 		{ target: window.document.body, eventName: "paste", action: (e: ClipboardEvent) => onPaste(e) },
 		{ target: window.document, eventName: "pointerlockchange", action: onPointerLockChange },
 		{ target: window.document, eventName: "pointerlockerror", action: onPointerLockChange },
@@ -113,7 +114,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
 			// Don't redirect a fullscreen request, but process it immediately instead
 			if (((operatingSystem() !== "Mac" && key === "F11") || (operatingSystem() === "Mac" && e.ctrlKey && e.metaKey && key === "KeyF")) && e.type === "keydown" && !e.repeat) {
 				e.preventDefault();
-				fullscreen.toggleFullscreen();
+				toggleFullscreen();
 				return false;
 			}
 
@@ -512,13 +513,16 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
 	bindListeners();
 
 	// Return the destructor
-	currentCleanup = () => {
+	function destroy() {
 		unbindListeners();
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerClipboardRead");
 		editor.subscriptions.unsubscribeFrontendMessage("WindowPointerLockMove");
-	};
-	return currentCleanup;
+	}
+
+	currentCleanup = destroy;
+	return { destroy };
 }
+export type InputManager = ReturnType<typeof createInputManager>;
 
 function targetIsTextField(target: EventTarget | HTMLElement | undefined): boolean {
 	return target instanceof HTMLElement && (target.nodeName === "INPUT" || target.nodeName === "TEXTAREA" || target.isContentEditable);
diff --git a/frontend/src/managers/localization.ts b/frontend/src/managers/localization.ts
index c4ea1d5323..a52a0632e2 100644
--- a/frontend/src/managers/localization.ts
+++ b/frontend/src/managers/localization.ts
@@ -3,19 +3,23 @@ import type { Editor } from "@graphite/editor";
 let currentCleanup: (() => void) | undefined;
 let currentArgs: [Editor] | undefined;
 
-export function createLocalizationManager(editor: Editor): () => void {
+export function createLocalizationManager(editor: Editor) {
 	currentArgs = [editor];
+
 	// Subscribe to process backend event
 	editor.subscriptions.subscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate", (data) => {
 		const localized = localizeTimestamp(data.commitDate);
 		editor.handle.requestAboutGraphiteDialogWithLocalizedCommitDate(localized.timestamp, localized.year);
 	});
 
-	currentCleanup = () => {
+	function destroy() {
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate");
-	};
-	return currentCleanup;
+	}
+
+	currentCleanup = destroy;
+	return { destroy };
 }
+export type LocalizationManager = ReturnType<typeof createLocalizationManager>;
 
 function localizeTimestamp(utc: string): { timestamp: string; year: string } {
 	// Timestamp
diff --git a/frontend/src/managers/panic.ts b/frontend/src/managers/panic.ts
index 8263965fdf..389b60157c 100644
--- a/frontend/src/managers/panic.ts
+++ b/frontend/src/managers/panic.ts
@@ -1,13 +1,11 @@
 import type { Editor } from "@graphite/editor";
-import type { DialogState } from "@graphite/state-providers/dialog";
-import { browserVersion, operatingSystem } from "@graphite/utility-functions/platform";
-import { stripIndents } from "@graphite/utility-functions/strip-indents";
+import { createCrashDialog } from "@graphite/stores/dialog";
 
 let currentCleanup: (() => void) | undefined;
-let currentArgs: [Editor, DialogState] | undefined;
+let currentArgs: [Editor] | undefined;
 
-export function createPanicManager(editor: Editor, dialogState: DialogState): () => void {
-	currentArgs = [editor, dialogState];
+export function createPanicManager(editor: Editor) {
+	currentArgs = [editor];
 	// Code panic dialog and console error
 	editor.subscriptions.subscribeFrontendMessage("DisplayDialogPanic", (data) => {
 		// `Error.stackTraceLimit` is only available in V8/Chromium
@@ -20,73 +18,17 @@ export function createPanicManager(editor: Editor, dialogState: DialogState): ()
 		// eslint-disable-next-line no-console
 		console.error(panicDetails);
 
-		dialogState.createCrashDialog(panicDetails);
+		createCrashDialog(panicDetails);
 	});
 
-	currentCleanup = () => {
+	function destroy() {
 		editor.subscriptions.unsubscribeFrontendMessage("DisplayDialogPanic");
-	};
-	return currentCleanup;
-}
-
-export function githubUrl(panicDetails: string): string {
-	const url = new URL("https://github.com/GraphiteEditor/Graphite/issues/new");
-
-	const buildUrl = (includeCrashReport: boolean) => {
-		let 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://dev.graphite.art — IMPORTANT! Confirm you have tested in this development version. It may have already been fixed since the last stable release.
-			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:
-		`;
-
-		const manualCopyStackTraceNotice = stripIndents`
-			Before submitting this bug, REPLACE THIS WITH THE LOG. Return to the editor and click "Copy Error Log" in the crash dialog and paste it in place of this text.
-		`;
-
-		body += "\n\n```\n";
-		body += includeCrashReport ? panicDetails.trimEnd() : manualCopyStackTraceNotice;
-		body += "\n```";
-
-		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 String(url);
-	};
-
-	let urlString = buildUrl(true);
-	if (urlString.length >= 8192) {
-		// Fall back to a shorter version if it exceeds GitHub limits of 8192 total characters
-		urlString = buildUrl(false);
 	}
-	return urlString;
+
+	currentCleanup = destroy;
+	return { destroy };
 }
+export type PanicManager = ReturnType<typeof createPanicManager>;
 
 // Self-accepting HMR: tear down the old instance and re-create with the new module's code
 import.meta.hot?.accept((newModule) => {
diff --git a/frontend/src/managers/persistence.ts b/frontend/src/managers/persistence.ts
index 789f043890..2f65d7ced1 100644
--- a/frontend/src/managers/persistence.ts
+++ b/frontend/src/managers/persistence.ts
@@ -2,187 +2,38 @@ import { createStore, del, get, set, update } from "idb-keyval";
 import { get as getFromStore } from "svelte/store";
 
 import type { Editor } from "@graphite/editor";
-import type { PortfolioState } from "@graphite/state-providers/portfolio";
+import type { PortfolioStore } from "@graphite/stores/portfolio";
 import type { MessageBody } from "@graphite/subscription-router";
 
 const graphiteStore = createStore("graphite", "store");
 
 let currentCleanup: (() => void) | undefined;
-let currentArgs: [Editor, PortfolioState] | undefined;
+let currentArgs: [Editor, PortfolioStore] | undefined;
 
-export function createPersistenceManager(editor: Editor, portfolio: PortfolioState): () => void {
+export function createPersistenceManager(editor: Editor, portfolio: PortfolioStore) {
 	currentArgs = [editor, portfolio];
 	// DOCUMENTS
 
-	async function storeDocumentOrder() {
-		const documentOrder = getFromStore(portfolio).documents.map((doc) => String(doc.id));
-		await set("documents_tab_order", documentOrder, graphiteStore);
-	}
-
-	async function storeCurrentDocumentId(documentId: string) {
-		await set("current_document_id", String(documentId), graphiteStore);
-	}
-
-	async function storeDocument(autoSaveDocument: MessageBody<"TriggerPersistenceWriteDocument">) {
-		await update<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>(
-			"documents",
-			(old) => {
-				const documents = old || {};
-				documents[String(autoSaveDocument.documentId)] = autoSaveDocument;
-				return documents;
-			},
-			graphiteStore,
-		);
-
-		await storeDocumentOrder();
-		await storeCurrentDocumentId(String(autoSaveDocument.documentId));
-	}
-
-	async function removeDocument(id: string) {
-		await update<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>(
-			"documents",
-			(old) => {
-				const documents = old || {};
-				delete documents[id];
-				return documents;
-			},
-			graphiteStore,
-		);
-
-		await update<string[]>(
-			"documents_tab_order",
-			(old) => {
-				const order = old || [];
-				return order.filter((docId) => docId !== id);
-			},
-			graphiteStore,
-		);
-
-		const documentCount = getFromStore(portfolio).documents.length;
-		if (documentCount > 0) {
-			const documentIndex = getFromStore(portfolio).activeDocumentIndex;
-			const documentId = String(getFromStore(portfolio).documents[documentIndex].id);
-
-			const tabOrder = (await get<string[]>("documents_tab_order", graphiteStore)) || [];
-			if (tabOrder.includes(documentId)) {
-				await storeCurrentDocumentId(documentId);
-			}
-		} else {
-			await del("current_document_id", graphiteStore);
-		}
-	}
-
-	async function loadFirstDocument() {
-		const previouslySavedDocuments = await get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", graphiteStore);
-
-		// TODO: Eventually remove this document upgrade code
-		// Migrate TriggerPersistenceWriteDocument.documentId from string to bigint if the browser is storing the old format as strings
-		if (previouslySavedDocuments) {
-			Object.values(previouslySavedDocuments).forEach((doc) => {
-				if (typeof doc.documentId === "string") doc.documentId = BigInt(doc.documentId);
-			});
-		}
-
-		const documentOrder = await get<string[]>("documents_tab_order", graphiteStore);
-		const currentDocumentIdString = await get<string>("current_document_id", graphiteStore);
-		const currentDocumentId = currentDocumentIdString ? BigInt(currentDocumentIdString) : undefined;
-		if (!previouslySavedDocuments || !documentOrder) return;
-
-		const orderedSavedDocuments = documentOrder.flatMap((id) => (previouslySavedDocuments[id] ? [previouslySavedDocuments[id]] : []));
-
-		if (currentDocumentId !== undefined && String(currentDocumentId) in previouslySavedDocuments) {
-			const doc = previouslySavedDocuments[String(currentDocumentId)];
-			editor.handle.openAutoSavedDocument(doc.documentId, doc.details.name, doc.details.isSaved, doc.document, false);
-			editor.handle.selectDocument(currentDocumentId);
-		} else {
-			const len = orderedSavedDocuments.length;
-			if (len > 0) {
-				const doc = orderedSavedDocuments[len - 1];
-				editor.handle.openAutoSavedDocument(doc.documentId, doc.details.name, doc.details.isSaved, doc.document, false);
-				editor.handle.selectDocument(doc.documentId);
-			}
-		}
-	}
-
-	async function loadRestDocuments() {
-		const previouslySavedDocuments = await get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", graphiteStore);
-
-		// TODO: Eventually remove this document upgrade code
-		// Migrate TriggerPersistenceWriteDocument.documentId from string to bigint if needed
-		if (previouslySavedDocuments) {
-			Object.values(previouslySavedDocuments).forEach((doc) => {
-				if (typeof doc.documentId === "string") doc.documentId = BigInt(doc.documentId);
-			});
-		}
-
-		const documentOrder = await get<string[]>("documents_tab_order", graphiteStore);
-		const currentDocumentIdString = await get<string>("current_document_id", graphiteStore);
-		const currentDocumentId = currentDocumentIdString ? BigInt(currentDocumentIdString) : undefined;
-		if (!previouslySavedDocuments || !documentOrder) return;
-
-		const orderedSavedDocuments = documentOrder.flatMap((id) => (previouslySavedDocuments[id] ? [previouslySavedDocuments[id]] : []));
-
-		if (currentDocumentId !== undefined) {
-			const currentIndex = orderedSavedDocuments.findIndex((doc) => doc.documentId === currentDocumentId);
-			const beforeCurrentIndex = currentIndex - 1;
-			const afterCurrentIndex = currentIndex + 1;
-
-			for (let i = beforeCurrentIndex; i >= 0; i--) {
-				const { documentId, document, details } = orderedSavedDocuments[i];
-				const { name, isSaved } = details;
-				editor.handle.openAutoSavedDocument(documentId, name, isSaved, document, true);
-			}
-			for (let i = afterCurrentIndex; i < orderedSavedDocuments.length; i++) {
-				const { documentId, document, details } = orderedSavedDocuments[i];
-				const { name, isSaved } = details;
-				editor.handle.openAutoSavedDocument(documentId, name, isSaved, document, false);
-			}
-
-			editor.handle.selectDocument(currentDocumentId);
-		} else {
-			const length = orderedSavedDocuments.length;
-
-			for (let i = length - 2; i >= 0; i--) {
-				const { documentId, document, details } = orderedSavedDocuments[i];
-				const { name, isSaved } = details;
-				editor.handle.openAutoSavedDocument(documentId, name, isSaved, document, true);
-			}
-
-			if (length > 0) editor.handle.selectDocument(orderedSavedDocuments[length - 1].documentId);
-		}
-	}
-
-	// PREFERENCES
-
-	async function savePreferences(preferences: unknown) {
-		await set("preferences", preferences, graphiteStore);
-	}
-
-	async function loadPreferences() {
-		const preferences = await get<Record<string, unknown>>("preferences", graphiteStore);
-		editor.handle.loadPreferences(preferences ? JSON.stringify(preferences) : undefined);
-	}
-
 	// FRONTEND MESSAGE SUBSCRIPTIONS
 
 	// Subscribe to process backend events
 	editor.subscriptions.subscribeFrontendMessage("TriggerSavePreferences", async (data) => {
-		await savePreferences(data.preferences);
+		await saveEditorPreferences(data.preferences);
 	});
 	editor.subscriptions.subscribeFrontendMessage("TriggerLoadPreferences", async () => {
-		await loadPreferences();
+		await loadEditorPreferences(editor);
 	});
 	editor.subscriptions.subscribeFrontendMessage("TriggerPersistenceWriteDocument", async (data) => {
-		await storeDocument(data);
+		await storeDocument(data, portfolio);
 	});
 	editor.subscriptions.subscribeFrontendMessage("TriggerPersistenceRemoveDocument", async (data) => {
-		await removeDocument(String(data.documentId));
+		await removeDocument(String(data.documentId), portfolio);
 	});
 	editor.subscriptions.subscribeFrontendMessage("TriggerLoadFirstAutoSaveDocument", async () => {
-		await loadFirstDocument();
+		await loadFirstDocument(editor);
 	});
 	editor.subscriptions.subscribeFrontendMessage("TriggerLoadRestAutoSaveDocuments", async () => {
-		await loadRestDocuments();
+		await loadRestDocuments(editor);
 	});
 	editor.subscriptions.subscribeFrontendMessage("TriggerOpenLaunchDocuments", async () => {
 		// TODO: Could be used to load documents from URL params or similar on launch
@@ -205,7 +56,7 @@ export function createPersistenceManager(editor: Editor, portfolio: PortfolioSta
 		}
 	});
 
-	currentCleanup = () => {
+	function destroy() {
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerSavePreferences");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerLoadPreferences");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerPersistenceWriteDocument");
@@ -214,9 +65,12 @@ export function createPersistenceManager(editor: Editor, portfolio: PortfolioSta
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerLoadRestAutoSaveDocuments");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerOpenLaunchDocuments");
 		editor.subscriptions.unsubscribeFrontendMessage("TriggerSaveActiveDocument");
-	};
-	return currentCleanup;
+	}
+
+	currentCleanup = destroy;
+	return { destroy };
 }
+export type PersistenceManager = ReturnType<typeof createPersistenceManager>;
 
 export async function wipeDocuments() {
 	await del("documents_tab_order", graphiteStore);
@@ -224,6 +78,155 @@ export async function wipeDocuments() {
 	await del("documents", graphiteStore);
 }
 
+async function storeDocumentOrder(portfolio: PortfolioStore) {
+	const documentOrder = getFromStore(portfolio).documents.map((doc) => String(doc.id));
+	await set("documents_tab_order", documentOrder, graphiteStore);
+}
+
+async function storeCurrentDocumentId(documentId: string) {
+	await set("current_document_id", String(documentId), graphiteStore);
+}
+
+async function storeDocument(autoSaveDocument: MessageBody<"TriggerPersistenceWriteDocument">, portfolio: PortfolioStore) {
+	await update<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>(
+		"documents",
+		(old) => {
+			const documents = old || {};
+			documents[String(autoSaveDocument.documentId)] = autoSaveDocument;
+			return documents;
+		},
+		graphiteStore,
+	);
+
+	await storeDocumentOrder(portfolio);
+	await storeCurrentDocumentId(String(autoSaveDocument.documentId));
+}
+
+async function removeDocument(id: string, portfolio: PortfolioStore) {
+	await update<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>(
+		"documents",
+		(old) => {
+			const documents = old || {};
+			delete documents[id];
+			return documents;
+		},
+		graphiteStore,
+	);
+
+	await update<string[]>(
+		"documents_tab_order",
+		(old) => {
+			const order = old || [];
+			return order.filter((docId) => docId !== id);
+		},
+		graphiteStore,
+	);
+
+	const documentCount = getFromStore(portfolio).documents.length;
+	if (documentCount > 0) {
+		const documentIndex = getFromStore(portfolio).activeDocumentIndex;
+		const documentId = String(getFromStore(portfolio).documents[documentIndex].id);
+
+		const tabOrder = (await get<string[]>("documents_tab_order", graphiteStore)) || [];
+		if (tabOrder.includes(documentId)) {
+			await storeCurrentDocumentId(documentId);
+		}
+	} else {
+		await del("current_document_id", graphiteStore);
+	}
+}
+
+async function loadFirstDocument(editor: Editor) {
+	const previouslySavedDocuments = await get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", graphiteStore);
+
+	// TODO: Eventually remove this document upgrade code
+	// Migrate TriggerPersistenceWriteDocument.documentId from string to bigint if the browser is storing the old format as strings
+	if (previouslySavedDocuments) {
+		Object.values(previouslySavedDocuments).forEach((doc) => {
+			if (typeof doc.documentId === "string") doc.documentId = BigInt(doc.documentId);
+		});
+	}
+
+	const documentOrder = await get<string[]>("documents_tab_order", graphiteStore);
+	const currentDocumentIdString = await get<string>("current_document_id", graphiteStore);
+	const currentDocumentId = currentDocumentIdString ? BigInt(currentDocumentIdString) : undefined;
+	if (!previouslySavedDocuments || !documentOrder) return;
+
+	const orderedSavedDocuments = documentOrder.flatMap((id) => (previouslySavedDocuments[id] ? [previouslySavedDocuments[id]] : []));
+
+	if (currentDocumentId !== undefined && String(currentDocumentId) in previouslySavedDocuments) {
+		const doc = previouslySavedDocuments[String(currentDocumentId)];
+		editor.handle.openAutoSavedDocument(doc.documentId, doc.details.name, doc.details.isSaved, doc.document, false);
+		editor.handle.selectDocument(currentDocumentId);
+	} else {
+		const len = orderedSavedDocuments.length;
+		if (len > 0) {
+			const doc = orderedSavedDocuments[len - 1];
+			editor.handle.openAutoSavedDocument(doc.documentId, doc.details.name, doc.details.isSaved, doc.document, false);
+			editor.handle.selectDocument(doc.documentId);
+		}
+	}
+}
+
+async function loadRestDocuments(editor: Editor) {
+	const previouslySavedDocuments = await get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", graphiteStore);
+
+	// TODO: Eventually remove this document upgrade code
+	// Migrate TriggerPersistenceWriteDocument.documentId from string to bigint if needed
+	if (previouslySavedDocuments) {
+		Object.values(previouslySavedDocuments).forEach((doc) => {
+			if (typeof doc.documentId === "string") doc.documentId = BigInt(doc.documentId);
+		});
+	}
+
+	const documentOrder = await get<string[]>("documents_tab_order", graphiteStore);
+	const currentDocumentIdString = await get<string>("current_document_id", graphiteStore);
+	const currentDocumentId = currentDocumentIdString ? BigInt(currentDocumentIdString) : undefined;
+	if (!previouslySavedDocuments || !documentOrder) return;
+
+	const orderedSavedDocuments = documentOrder.flatMap((id) => (previouslySavedDocuments[id] ? [previouslySavedDocuments[id]] : []));
+
+	if (currentDocumentId !== undefined) {
+		const currentIndex = orderedSavedDocuments.findIndex((doc) => doc.documentId === currentDocumentId);
+		const beforeCurrentIndex = currentIndex - 1;
+		const afterCurrentIndex = currentIndex + 1;
+
+		for (let i = beforeCurrentIndex; i >= 0; i--) {
+			const { documentId, document, details } = orderedSavedDocuments[i];
+			const { name, isSaved } = details;
+			editor.handle.openAutoSavedDocument(documentId, name, isSaved, document, true);
+		}
+		for (let i = afterCurrentIndex; i < orderedSavedDocuments.length; i++) {
+			const { documentId, document, details } = orderedSavedDocuments[i];
+			const { name, isSaved } = details;
+			editor.handle.openAutoSavedDocument(documentId, name, isSaved, document, false);
+		}
+
+		editor.handle.selectDocument(currentDocumentId);
+	} else {
+		const length = orderedSavedDocuments.length;
+
+		for (let i = length - 2; i >= 0; i--) {
+			const { documentId, document, details } = orderedSavedDocuments[i];
+			const { name, isSaved } = details;
+			editor.handle.openAutoSavedDocument(documentId, name, isSaved, document, true);
+		}
+
+		if (length > 0) editor.handle.selectDocument(orderedSavedDocuments[length - 1].documentId);
+	}
+}
+
+// PREFERENCES
+
+async function saveEditorPreferences(preferences: unknown) {
+	await set("preferences", preferences, graphiteStore);
+}
+
+async function loadEditorPreferences(editor: Editor) {
+	const preferences = await get<Record<string, unknown>>("preferences", graphiteStore);
+	editor.handle.loadPreferences(preferences ? JSON.stringify(preferences) : undefined);
+}
+
 // Self-accepting HMR: tear down the old instance and re-create with the new module's code
 import.meta.hot?.accept((newModule) => {
 	currentCleanup?.();
diff --git a/frontend/src/stores/app-window.ts b/frontend/src/stores/app-window.ts
index bc17bce9dc..618b6064a0 100644
--- a/frontend/src/stores/app-window.ts
+++ b/frontend/src/stores/app-window.ts
@@ -1,23 +1,30 @@
 import { writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 
 import type { AppWindowPlatform } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
 
-export function createAppWindowState(editor: Editor) {
-	const { subscribe, update } = writable<{
-		platform: AppWindowPlatform;
-		maximized: boolean;
-		fullscreen: boolean;
-		viewportHolePunch: boolean;
-		uiScale: number;
-	}>({
-		platform: "Web",
-		maximized: false,
-		fullscreen: false,
-		viewportHolePunch: false,
-		uiScale: 1,
-	});
+type AppWindowStoreState = {
+	platform: AppWindowPlatform;
+	maximized: boolean;
+	fullscreen: boolean;
+	viewportHolePunch: boolean;
+	uiScale: number;
+};
+const initialState: AppWindowStoreState = {
+	platform: "Web",
+	maximized: false,
+	fullscreen: false,
+	viewportHolePunch: false,
+	uiScale: 1,
+};
+
+// Store state persisted across HMR to maintain reactive subscriptions in the component tree
+const store: Writable<AppWindowStoreState> = import.meta.hot?.data?.store || writable<AppWindowStoreState>(initialState);
+if (import.meta.hot) import.meta.hot.data.store = store;
+const { subscribe, update } = store;
 
+export function createAppWindowStore(editor: Editor) {
 	// Set up message subscriptions on creation
 	editor.subscriptions.subscribeFrontendMessage("UpdatePlatform", (data) => {
 		update((state) => {
@@ -58,12 +65,19 @@ export function createAppWindowState(editor: Editor) {
 		editor.subscriptions.unsubscribeFrontendMessage("UpdateUIScale");
 	}
 
+	currentCleanup = destroy;
+	currentArgs = [editor];
 	return {
 		subscribe,
 		destroy,
 	};
 }
-export type AppWindowState = ReturnType<typeof createAppWindowState>;
+export type AppWindowStore = ReturnType<typeof createAppWindowStore>;
 
-// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
-import.meta.hot?.accept(() => location.reload());
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createAppWindowStore(...currentArgs);
+});
diff --git a/frontend/src/stores/dialog.ts b/frontend/src/stores/dialog.ts
index e8a2ec9928..c68f1ebf9d 100644
--- a/frontend/src/stores/dialog.ts
+++ b/frontend/src/stores/dialog.ts
@@ -1,57 +1,37 @@
 import { writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 
 import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
 import type { IconName } from "@graphite/icons";
 import { patchLayout } from "@graphite/utility-functions/widgets";
 
-export function createDialogState(editor: Editor) {
-	const { subscribe, update } = writable<{
-		visible: boolean;
-		title: string;
-		icon: IconName | undefined;
-		buttons: Layout;
-		column1: Layout;
-		column2: Layout;
-		panicDetails: string;
-	}>({
-		visible: false,
-		title: "",
-		icon: undefined,
-		buttons: [],
-		column1: [],
-		column2: [],
-		// Special case for the crash dialog because we cannot handle button widget callbacks from Rust once the editor has panicked
-		panicDetails: "",
-	});
-
-	function dismissDialog() {
-		update((state) => {
-			// Disallow dismissing the crash dialog since it can confuse users why the app stopped responding if they dismiss it without realizing what it means
-			if (state.panicDetails === "") state.visible = false;
-
-			return state;
-		});
-	}
-
-	// Creates a crash dialog from JS once the editor has panicked.
-	// Normal dialogs are created in the Rust backend, but for the crash dialog, the editor has panicked so it cannot respond to widget callbacks.
-	function createCrashDialog(panicDetails: string) {
-		update((state) => {
-			state.visible = true;
-
-			state.icon = "Failure";
-			state.title = "Crash";
-			state.panicDetails = panicDetails;
-
-			state.column1 = [];
-			state.column2 = [];
-			state.buttons = [];
-
-			return state;
-		});
-	}
-
+type DialogStoreState = {
+	visible: boolean;
+	title: string;
+	icon: IconName | undefined;
+	buttons: Layout;
+	column1: Layout;
+	column2: Layout;
+	panicDetails: string;
+};
+const initialState: DialogStoreState = {
+	visible: false,
+	title: "",
+	icon: undefined,
+	buttons: [],
+	column1: [],
+	column2: [],
+	// Special case for the crash dialog because we cannot handle button widget callbacks from Rust once the editor has panicked
+	panicDetails: "",
+};
+
+// Store state persisted across HMR to maintain reactive subscriptions in the component tree
+const store: Writable<DialogStoreState> = import.meta.hot?.data?.store || writable<DialogStoreState>(initialState);
+if (import.meta.hot) import.meta.hot.data.store = store;
+const { subscribe, update } = store;
+
+export function createDialogStore(editor: Editor) {
 	// Subscribe to process backend events
 	editor.subscriptions.subscribeFrontendMessage("DisplayDialog", (data) => {
 		update((state) => {
@@ -84,7 +64,14 @@ export function createDialogState(editor: Editor) {
 			return state;
 		});
 	});
-	editor.subscriptions.subscribeFrontendMessage("DialogClose", dismissDialog);
+	editor.subscriptions.subscribeFrontendMessage("DialogClose", () => {
+		update((state) => {
+			// Disallow dismissing the crash dialog since it should remain as the final notification
+			if (state.panicDetails === "") state.visible = false;
+
+			return state;
+		});
+	});
 
 	editor.subscriptions.subscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog", async () => {
 		const BACKUP_URL = "https://editor.graphite.art/third-party-licenses.txt";
@@ -105,14 +92,37 @@ export function createDialogState(editor: Editor) {
 		editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn2");
 	}
 
+	currentCleanup = destroy;
+	currentArgs = [editor];
 	return {
 		subscribe,
-		dismissDialog,
-		createCrashDialog,
 		destroy,
 	};
 }
-export type DialogState = ReturnType<typeof createDialogState>;
+export type DialogStore = ReturnType<typeof createDialogStore>;
+
+// Creates a crash dialog from JS once the editor has panicked.
+// Normal dialogs are created in the Rust backend, but for the crash dialog, the editor has panicked so it cannot respond to widget callbacks.
+export function createCrashDialog(panicDetails: string) {
+	update((state) => {
+		state.visible = true;
+
+		state.icon = "Failure";
+		state.title = "Crash";
+		state.panicDetails = panicDetails;
+
+		state.column1 = [];
+		state.column2 = [];
+		state.buttons = [];
+
+		return state;
+	});
+}
 
-// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
-import.meta.hot?.accept(() => location.reload());
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createDialogStore(...currentArgs);
+});
diff --git a/frontend/src/stores/document.ts b/frontend/src/stores/document.ts
index 7cba8a2c96..d9ca8e9523 100644
--- a/frontend/src/stores/document.ts
+++ b/frontend/src/stores/document.ts
@@ -1,30 +1,36 @@
 import { tick } from "svelte";
 import { writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 
 import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
 import { patchLayout } from "@graphite/utility-functions/widgets";
 
-export function createDocumentState(editor: Editor) {
-	const state = writable<{
-		toolOptionsLayout: Layout;
-		documentBarLayout: Layout;
-		toolShelfLayout: Layout;
-		workingColorsLayout: Layout;
-		nodeGraphControlBarLayout: Layout;
-		graphViewOverlayOpen: boolean;
-		fadeArtwork: number;
-	}>({
-		toolOptionsLayout: [],
-		documentBarLayout: [],
-		toolShelfLayout: [],
-		workingColorsLayout: [],
-		nodeGraphControlBarLayout: [],
-		graphViewOverlayOpen: false,
-		fadeArtwork: 100,
-	});
-	const { subscribe, update } = state;
+type DocumentStoreState = {
+	toolOptionsLayout: Layout;
+	documentBarLayout: Layout;
+	toolShelfLayout: Layout;
+	workingColorsLayout: Layout;
+	nodeGraphControlBarLayout: Layout;
+	graphViewOverlayOpen: boolean;
+	fadeArtwork: number;
+};
+const initialState: DocumentStoreState = {
+	toolOptionsLayout: [],
+	documentBarLayout: [],
+	toolShelfLayout: [],
+	workingColorsLayout: [],
+	nodeGraphControlBarLayout: [],
+	graphViewOverlayOpen: false,
+	fadeArtwork: 100,
+};
+
+// Store state persisted across HMR to maintain reactive subscriptions in the component tree
+const store: Writable<DocumentStoreState> = import.meta.hot?.data?.store || writable<DocumentStoreState>(initialState);
+if (import.meta.hot) import.meta.hot.data.store = store;
+const { subscribe, update } = store;
 
+export function createDocumentStore(editor: Editor) {
 	// Update layouts
 	editor.subscriptions.subscribeFrontendMessage("UpdateGraphFadeArtwork", (data) => {
 		update((state) => {
@@ -89,12 +95,19 @@ export function createDocumentState(editor: Editor) {
 		editor.subscriptions.unsubscribeLayoutUpdate("NodeGraphControlBar");
 	}
 
+	currentCleanup = destroy;
+	currentArgs = [editor];
 	return {
 		subscribe,
 		destroy,
 	};
 }
-export type DocumentState = ReturnType<typeof createDocumentState>;
+export type DocumentStore = ReturnType<typeof createDocumentStore>;
 
-// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
-import.meta.hot?.accept(() => location.reload());
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createDocumentStore(...currentArgs);
+});
diff --git a/frontend/src/stores/fullscreen.ts b/frontend/src/stores/fullscreen.ts
index 8cf12c9b0f..46d9002982 100644
--- a/frontend/src/stores/fullscreen.ts
+++ b/frontend/src/stores/fullscreen.ts
@@ -1,71 +1,82 @@
 import { writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 
 import type { Editor } from "@graphite/editor";
 
-export function createFullscreenState(editor: Editor) {
-	// Experimental Keyboard API: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/keyboard
-	const keyboardLockApiSupported: Readonly<boolean> = navigator.keyboard !== undefined && "lock" in navigator.keyboard;
+type FullscreenStoreState = {
+	windowFullscreen: boolean;
+	keyboardLocked: boolean;
+};
+const initialState: FullscreenStoreState = {
+	windowFullscreen: false,
+	keyboardLocked: false,
+};
 
-	const { subscribe, update } = writable({
-		windowFullscreen: false,
-		keyboardLocked: false,
-		keyboardLockApiSupported,
+// Store state persisted across HMR to maintain reactive subscriptions in the component tree
+const store: Writable<FullscreenStoreState> = import.meta.hot?.data?.store || writable<FullscreenStoreState>(initialState);
+if (import.meta.hot) import.meta.hot.data.store = store;
+const { subscribe, update } = store;
+
+export function createFullscreenStore(editor: Editor) {
+	editor.subscriptions.subscribeFrontendMessage("WindowFullscreen", () => {
+		toggleFullscreen();
 	});
 
-	function fullscreenModeChanged() {
-		update((state) => {
-			state.windowFullscreen = Boolean(document.fullscreenElement);
-			if (!state.windowFullscreen) state.keyboardLocked = false;
-			return state;
-		});
+	function destroy() {
+		editor.subscriptions.unsubscribeFrontendMessage("WindowFullscreen");
 	}
 
-	async function enterFullscreen() {
-		await document.documentElement.requestFullscreen();
+	currentCleanup = destroy;
+	currentArgs = [editor];
+	return {
+		subscribe,
+		destroy,
+	};
+}
+export type FullscreenStore = ReturnType<typeof createFullscreenStore>;
 
-		if (keyboardLockApiSupported && navigator.keyboard) {
-			await navigator.keyboard.lock(["ControlLeft", "ControlRight"]);
+export function fullscreenModeChanged() {
+	update((state) => {
+		state.windowFullscreen = Boolean(document.fullscreenElement);
+		if (!state.windowFullscreen) state.keyboardLocked = false;
+		return state;
+	});
+}
 
-			update((state) => {
-				state.keyboardLocked = true;
-				return state;
-			});
-		}
-	}
+export async function enterFullscreen() {
+	await document.documentElement.requestFullscreen();
 
-	async function exitFullscreen() {
-		await document.exitFullscreen();
-	}
+	const keyboardLockApiSupported = navigator.keyboard !== undefined && "lock" in navigator.keyboard;
 
-	async function toggleFullscreen() {
-		return new Promise((resolve, reject) => {
-			update((state) => {
-				if (state.windowFullscreen) exitFullscreen().then(resolve).catch(reject);
-				else enterFullscreen().then(resolve).catch(reject);
+	if (keyboardLockApiSupported && navigator.keyboard) {
+		await navigator.keyboard.lock(["ControlLeft", "ControlRight"]);
 
-				return state;
-			});
+		update((state) => {
+			state.keyboardLocked = true;
+			return state;
 		});
 	}
+}
 
-	editor.subscriptions.subscribeFrontendMessage("WindowFullscreen", () => {
-		toggleFullscreen();
-	});
+export async function exitFullscreen() {
+	await document.exitFullscreen();
+}
 
-	function destroy() {
-		editor.subscriptions.unsubscribeFrontendMessage("WindowFullscreen");
-	}
+export async function toggleFullscreen() {
+	return new Promise((resolve, reject) => {
+		update((state) => {
+			if (state.windowFullscreen) exitFullscreen().then(resolve).catch(reject);
+			else enterFullscreen().then(resolve).catch(reject);
 
-	return {
-		subscribe,
-		fullscreenModeChanged,
-		enterFullscreen,
-		exitFullscreen,
-		toggleFullscreen,
-		destroy,
-	};
+			return state;
+		});
+	});
 }
-export type FullscreenState = ReturnType<typeof createFullscreenState>;
 
-// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
-import.meta.hot?.accept(() => location.reload());
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createFullscreenStore(...currentArgs);
+});
diff --git a/frontend/src/stores/node-graph.ts b/frontend/src/stores/node-graph.ts
index 543911f682..394c2b56ce 100644
--- a/frontend/src/stores/node-graph.ts
+++ b/frontend/src/stores/node-graph.ts
@@ -1,62 +1,62 @@
 import { writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 
 import type { NodeGraphErrorDiagnostic, BoxSelection, FrontendClickTargets, ContextMenuInformation, FrontendNode, FrontendNodeType, WirePath } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
 import type { MessageBody } from "@graphite/subscription-router";
 
-export function createNodeGraphState(editor: Editor) {
-	const { subscribe, update } = writable<{
-		box: BoxSelection | undefined;
-		clickTargets: FrontendClickTargets | undefined;
-		contextMenuInformation: ContextMenuInformation | undefined;
-		error: NodeGraphErrorDiagnostic | undefined;
-		layerWidths: Map<bigint, number>;
-		chainWidths: Map<bigint, number>;
-		hasLeftInputWire: Map<bigint, boolean>;
-		updateImportsExports: MessageBody<"UpdateImportsExports"> | undefined;
-		nodes: Map<bigint, FrontendNode>;
-		visibleNodes: Set<bigint>;
-		/// The index is the exposed input index. The exports have a first key value of u32::MAX.
-		wires: Map<bigint, Map<number, WirePath>>;
-		wirePathInProgress: WirePath | undefined;
-		nodeDescriptions: Map<string, string>;
-		nodeTypes: FrontendNodeType[];
-		thumbnails: Map<bigint, string>;
-		selected: bigint[];
-		transform: { scale: number; x: number; y: number };
-		inSelectedNetwork: boolean;
-		reorderImportIndex: number | undefined;
-		reorderExportIndex: number | undefined;
-	}>({
-		box: undefined,
-		clickTargets: undefined,
-		contextMenuInformation: undefined,
-		error: undefined,
-		layerWidths: new Map(),
-		chainWidths: new Map(),
-		hasLeftInputWire: new Map(),
-		updateImportsExports: undefined,
-		nodes: new Map(),
-		visibleNodes: new Set(),
-		wires: new Map(),
-		wirePathInProgress: undefined,
-		nodeDescriptions: new Map(),
-		nodeTypes: [],
-		thumbnails: new Map(),
-		selected: [],
-		transform: { scale: 1, x: 0, y: 0 },
-		inSelectedNetwork: true,
-		reorderImportIndex: undefined,
-		reorderExportIndex: undefined,
-	});
+type NodeGraphStoreState = {
+	box: BoxSelection | undefined;
+	clickTargets: FrontendClickTargets | undefined;
+	contextMenuInformation: ContextMenuInformation | undefined;
+	error: NodeGraphErrorDiagnostic | undefined;
+	layerWidths: Map<bigint, number>;
+	chainWidths: Map<bigint, number>;
+	hasLeftInputWire: Map<bigint, boolean>;
+	updateImportsExports: MessageBody<"UpdateImportsExports"> | undefined;
+	nodes: Map<bigint, FrontendNode>;
+	visibleNodes: Set<bigint>;
+	/// The index is the exposed input index. The exports have a first key value of u32::MAX.
+	wires: Map<bigint, Map<number, WirePath>>;
+	wirePathInProgress: WirePath | undefined;
+	nodeDescriptions: Map<string, string>;
+	nodeTypes: FrontendNodeType[];
+	thumbnails: Map<bigint, string>;
+	selected: bigint[];
+	transform: { scale: number; x: number; y: number };
+	inSelectedNetwork: boolean;
+	reorderImportIndex: number | undefined;
+	reorderExportIndex: number | undefined;
+};
+const initialState: NodeGraphStoreState = {
+	box: undefined,
+	clickTargets: undefined,
+	contextMenuInformation: undefined,
+	error: undefined,
+	layerWidths: new Map(),
+	chainWidths: new Map(),
+	hasLeftInputWire: new Map(),
+	updateImportsExports: undefined,
+	nodes: new Map(),
+	visibleNodes: new Set(),
+	wires: new Map(),
+	wirePathInProgress: undefined,
+	nodeDescriptions: new Map(),
+	nodeTypes: [],
+	thumbnails: new Map(),
+	selected: [],
+	transform: { scale: 1, x: 0, y: 0 },
+	inSelectedNetwork: true,
+	reorderImportIndex: undefined,
+	reorderExportIndex: undefined,
+};
 
-	function closeContextMenu() {
-		update((state) => {
-			state.contextMenuInformation = undefined;
-			return state;
-		});
-	}
+// Store state persisted across HMR to maintain reactive subscriptions in the component tree
+const store: Writable<NodeGraphStoreState> = import.meta.hot?.data?.store || writable<NodeGraphStoreState>(initialState);
+if (import.meta.hot) import.meta.hot.data.store = store;
+const { subscribe, update } = store;
 
+export function createNodeGraphStore(editor: Editor) {
 	// Set up message subscriptions on creation
 	editor.subscriptions.subscribeFrontendMessage("SendUIMetadata", (data) => {
 		update((state) => {
@@ -206,13 +206,26 @@ export function createNodeGraphState(editor: Editor) {
 		editor.subscriptions.unsubscribeFrontendMessage("UpdateWirePathInProgress");
 	}
 
+	currentCleanup = destroy;
+	currentArgs = [editor];
 	return {
 		subscribe,
-		closeContextMenu,
 		destroy,
 	};
 }
-export type NodeGraphState = ReturnType<typeof createNodeGraphState>;
+export type NodeGraphStore = ReturnType<typeof createNodeGraphStore>;
+
+export function closeContextMenu() {
+	update((state) => {
+		state.contextMenuInformation = undefined;
+		return state;
+	});
+}
 
-// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
-import.meta.hot?.accept(() => location.reload());
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createNodeGraphStore(...currentArgs);
+});
diff --git a/frontend/src/stores/portfolio.ts b/frontend/src/stores/portfolio.ts
index 59e65f57ce..89aadac18b 100644
--- a/frontend/src/stores/portfolio.ts
+++ b/frontend/src/stores/portfolio.ts
@@ -1,27 +1,34 @@
 import { writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 
 import type { OpenDocument } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
 import { downloadFile, downloadFileBlob, upload } from "@graphite/utility-functions/files";
 import { rasterizeSVG } from "@graphite/utility-functions/rasterization";
 
-export function createPortfolioState(editor: Editor) {
-	const { subscribe, update } = writable<{
-		unsaved: boolean;
-		documents: OpenDocument[];
-		activeDocumentIndex: number;
-		dataPanelOpen: boolean;
-		propertiesPanelOpen: boolean;
-		layersPanelOpen: boolean;
-	}>({
-		unsaved: false,
-		documents: [],
-		activeDocumentIndex: 0,
-		dataPanelOpen: false,
-		propertiesPanelOpen: true,
-		layersPanelOpen: true,
-	});
+type PortfolioStoreState = {
+	unsaved: boolean;
+	documents: OpenDocument[];
+	activeDocumentIndex: number;
+	dataPanelOpen: boolean;
+	propertiesPanelOpen: boolean;
+	layersPanelOpen: boolean;
+};
+const initialState: PortfolioStoreState = {
+	unsaved: false,
+	documents: [],
+	activeDocumentIndex: 0,
+	dataPanelOpen: false,
+	propertiesPanelOpen: true,
+	layersPanelOpen: true,
+};
+
+// Store state persisted across HMR to maintain reactive subscriptions in the component tree
+const store: Writable<PortfolioStoreState> = import.meta.hot?.data?.store || writable<PortfolioStoreState>(initialState);
+if (import.meta.hot) import.meta.hot.data.store = store;
+const { subscribe, update } = store;
 
+export function createPortfolioStore(editor: Editor) {
 	// Set up message subscriptions on creation
 	editor.subscriptions.subscribeFrontendMessage("UpdateOpenDocumentsList", (data) => {
 		update((state) => {
@@ -113,12 +120,19 @@ export function createPortfolioState(editor: Editor) {
 		editor.subscriptions.unsubscribeFrontendMessage("UpdateLayersPanelState");
 	}
 
+	currentCleanup = destroy;
+	currentArgs = [editor];
 	return {
 		subscribe,
 		destroy,
 	};
 }
-export type PortfolioState = ReturnType<typeof createPortfolioState>;
+export type PortfolioStore = ReturnType<typeof createPortfolioStore>;
 
-// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
-import.meta.hot?.accept(() => location.reload());
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createPortfolioStore(...currentArgs);
+});
diff --git a/frontend/src/stores/tooltip.ts b/frontend/src/stores/tooltip.ts
index 83ccec61e3..ade98ea290 100644
--- a/frontend/src/stores/tooltip.ts
+++ b/frontend/src/stores/tooltip.ts
@@ -1,4 +1,5 @@
 import { writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 
 import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
@@ -6,23 +7,29 @@ import { operatingSystem } from "@graphite/utility-functions/platform";
 
 const SHOW_TOOLTIP_DELAY_MS = 500;
 
-export function createTooltipState(editor: Editor) {
-	const { subscribe, update } = writable<{
-		visible: boolean;
-		element: Element | undefined;
-		position: { x: number; y: number };
-		shiftClickShortcut: ActionShortcut | undefined;
-		altClickShortcut: ActionShortcut | undefined;
-		fullscreenShortcut: ActionShortcut | undefined;
-	}>({
-		visible: false,
-		element: undefined,
-		position: { x: 0, y: 0 },
-		shiftClickShortcut: undefined,
-		altClickShortcut: undefined,
-		fullscreenShortcut: undefined,
-	});
-
+type TooltipStoreState = {
+	visible: boolean;
+	element: Element | undefined;
+	position: { x: number; y: number };
+	shiftClickShortcut: ActionShortcut | undefined;
+	altClickShortcut: ActionShortcut | undefined;
+	fullscreenShortcut: ActionShortcut | undefined;
+};
+const initialState: TooltipStoreState = {
+	visible: false,
+	element: undefined,
+	position: { x: 0, y: 0 },
+	shiftClickShortcut: undefined,
+	altClickShortcut: undefined,
+	fullscreenShortcut: undefined,
+};
+
+// Store state persisted across HMR to maintain reactive subscriptions in the component tree
+const store: Writable<TooltipStoreState> = import.meta.hot?.data?.store || writable<TooltipStoreState>(initialState);
+if (import.meta.hot) import.meta.hot.data.store = store;
+const { subscribe, update } = store;
+
+export function createTooltipStore(editor: Editor) {
 	let tooltipTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
 
 	// Listen for mouse movements onto tooltip-bearing HTML elements to track the future target of a tooltip
@@ -118,12 +125,19 @@ export function createTooltipState(editor: Editor) {
 		});
 	});
 
+	currentCleanup = destroy;
+	currentArgs = [editor];
 	return {
 		subscribe,
 		destroy,
 	};
 }
-export type TooltipState = ReturnType<typeof createTooltipState>;
-
-// This store is bound to the component tree via setContext() and can't be hot-replaced, so we force a full page reload
-import.meta.hot?.accept(() => location.reload());
+export type TooltipStore = ReturnType<typeof createTooltipStore>;
+
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createTooltipStore(...currentArgs);
+});
diff --git a/frontend/src/utility-functions/crash-report.ts b/frontend/src/utility-functions/crash-report.ts
new file mode 100644
index 0000000000..9461109c79
--- /dev/null
+++ b/frontend/src/utility-functions/crash-report.ts
@@ -0,0 +1,61 @@
+import { browserVersion, operatingSystem } from "@graphite/utility-functions/platform";
+import { stripIndents } from "@graphite/utility-functions/strip-indents";
+
+export function crashReportUrl(panicDetails: string): string {
+	const url = new URL("https://github.com/GraphiteEditor/Graphite/issues/new");
+
+	const buildUrl = (includeCrashReport: boolean) => {
+		let 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://dev.graphite.art — IMPORTANT! Confirm you have tested in this development version. It may have already been fixed since the last stable release.
+			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:
+		`;
+
+		const manualCopyStackTraceNotice = stripIndents`
+			Before submitting this bug, REPLACE THIS WITH THE LOG. Return to the editor and click "Copy Error Log" in the crash dialog and paste it in place of this text.
+		`;
+
+		body += "\n\n```\n";
+		body += includeCrashReport ? panicDetails.trimEnd() : manualCopyStackTraceNotice;
+		body += "\n```";
+
+		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 String(url);
+	};
+
+	let urlString = buildUrl(true);
+	if (urlString.length >= 8192) {
+		// Fall back to a shorter version if it exceeds GitHub limits of 8192 total characters
+		urlString = buildUrl(false);
+	}
+	return urlString;
+}
diff --git a/frontend/src/utility-functions/math.ts b/frontend/src/utility-functions/math.ts
deleted file mode 100644
index b157970334..0000000000
--- a/frontend/src/utility-functions/math.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function clamp(value: number, min = 0, max = 1): number {
-	return Math.max(min, Math.min(value, max));
-}
diff --git a/frontend/src/utility-functions/platform.ts b/frontend/src/utility-functions/platform.ts
index 5000d27514..24254eb29e 100644
--- a/frontend/src/utility-functions/platform.ts
+++ b/frontend/src/utility-functions/platform.ts
@@ -26,11 +26,7 @@ export function browserVersion(): string {
 export type OperatingSystem = "Windows" | "Mac" | "Linux";
 
 export function operatingSystem(): OperatingSystem {
-	const osTable: Record<string, OperatingSystem> = {
-		Windows: "Windows",
-		Mac: "Mac",
-		Linux: "Linux",
-	};
+	const osTable: Record<string, OperatingSystem> = { Windows: "Windows", Mac: "Mac", Linux: "Linux" };
 
 	const userAgentOS = Object.keys(osTable).find((key) => window.navigator.userAgent.includes(key));
 	return osTable[userAgentOS || "Windows"];