Restructure frontend TS files so managers/stores export destructors instead of returning them from their constructors (#3919)

* Replace parameter passing with getContext and extract destroy functions to module-level exports

* Resend layouts from Rust when editor is re-mounted on HMR

* Code review

editor/src/messages/layout/layout_message.rs

@@ -8,6 +8,7 @@ pub enum LayoutMessage {
 		layout_target: LayoutTarget,
 		widget_id: WidgetId,
 	},
+	ResendAllLayouts,
 	SendLayout {
 		layout: Layout,
 		layout_target: LayoutTarget,

editor/src/messages/layout/layout_message_handler.rs

@@ -33,6 +33,20 @@ impl MessageHandler<LayoutMessage, LayoutMessageContext<'_>> for LayoutMessageHa
 				// Resend that diff
 				self.send_diff(vec![diff], layout_target, responses, action_input_mapping);
 			}
+			LayoutMessage::ResendAllLayouts => {
+				// Collect non-empty layouts and their indices, then clear the stored copies so diffs compute as full re-sends
+				let layouts_to_resend: Vec<_> = self
+					.layouts
+					.iter_mut()
+					.enumerate()
+					.filter(|(_, layout)| !layout.0.is_empty())
+					.map(|(i, layout)| (LayoutTarget::from(i as u8), std::mem::take(layout)))
+					.collect();
+
+				for (layout_target, layout) in layouts_to_resend {
+					self.diff_and_send_layout_to_frontend(layout_target, layout, responses, action_input_mapping);
+				}
+			}
 			LayoutMessage::SendLayout { layout, layout_target } => {
 				self.diff_and_send_layout_to_frontend(layout_target, layout, responses, action_input_mapping);
 			}

editor/src/messages/layout/utility_types/layout_widget.rs

@@ -20,10 +20,30 @@ impl core::fmt::Display for WidgetId {
 	}
 }
 
-#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+macro_rules! define_layout_target {
-#[derive(PartialEq, Clone, Debug, Hash, Eq, Copy, serde::Serialize, serde::Deserialize)]
+	($($(#[$attr:meta])* $variant:ident),* $(,)?) => {
-#[repr(u8)]
+		#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
-pub enum LayoutTarget {
+		#[derive(PartialEq, Clone, Debug, Hash, Eq, Copy, serde::Serialize, serde::Deserialize)]
+		#[repr(u8)]
+		pub enum LayoutTarget {
+			$($(#[$attr])* $variant,)*
+			// KEEP THIS ENUM LAST
+			// This is a marker that is used to define an array that is used to hold widgets
+			#[serde(skip)]
+			_LayoutTargetLength,
+		}
+
+		impl From<u8> for LayoutTarget {
+			fn from(value: u8) -> Self {
+				match value {
+					$(x if x == Self::$variant as u8 => Self::$variant,)*
+					_ => panic!("Invalid LayoutTarget discriminant: {value}"),
+				}
+			}
+		}
+	};
+}
+define_layout_target!(
 	/// The spreadsheet panel allows for the visualisation of data in the graph.
 	DataPanel,
 	/// Contains the action buttons at the bottom of the dialog. Must be shown with the `FrontendMessage::DisplayDialog` message.
@@ -58,12 +78,7 @@ pub enum LayoutTarget {
 	WelcomeScreenButtons,
 	/// The color swatch for the working colors and a flip and reset button found at the bottom of the tool shelf.
 	WorkingColors,
-
+);
-	// KEEP THIS ENUM LAST
-	// This is a marker that is used to define an array that is used to hold widgets
-	#[serde(skip)]
-	_LayoutTargetLength,
-}
 
 /// For use by structs that define a UI widget layout by implementing the layout() function belonging to this trait.
 /// The send_layout() function can then be called by other code which is a part of the same struct so as to send the layout to the frontend.

frontend/eslint.config.js

@@ -70,6 +70,7 @@ export default defineConfig([
 					ignoreRestSiblings: true,
 				},
 			],
+			"@typescript-eslint/no-non-null-assertion": "error",
 			"@typescript-eslint/consistent-type-imports": "error",
 			"@typescript-eslint/consistent-type-definitions": ["error", "type"],
 			"@typescript-eslint/consistent-type-assertions": ["error", { assertionStyle: "never" }],

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/managers/clipboard";
+	import { createClipboardManager, destroyClipboardManager } from "@graphite/managers/clipboard";
-	import { createFontsManager } from "@graphite/managers/fonts";
+	import { createFontsManager, destroyFontsManager } from "@graphite/managers/fonts";
-	import { createHyperlinkManager } from "@graphite/managers/hyperlink";
+	import { createHyperlinkManager, destroyHyperlinkManager } from "@graphite/managers/hyperlink";
-	import { createInputManager } from "@graphite/managers/input";
+	import { createInputManager, destroyInputManager } from "@graphite/managers/input";
-	import { createLocalizationManager } from "@graphite/managers/localization";
+	import { createLocalizationManager, destroyLocalizationManager } from "@graphite/managers/localization";
-	import { createPanicManager } from "@graphite/managers/panic";
+	import { createPanicManager, destroyPanicManager } from "@graphite/managers/panic";
-	import { createPersistenceManager } from "@graphite/managers/persistence";
+	import { createPersistenceManager, destroyPersistenceManager } from "@graphite/managers/persistence";
-	import { createAppWindowStore } from "@graphite/stores/app-window";
+	import { createAppWindowStore, destroyAppWindowStore } from "@graphite/stores/app-window";
-	import { createDialogStore } from "@graphite/stores/dialog";
+	import { createDialogStore, destroyDialogStore } from "@graphite/stores/dialog";
-	import { createDocumentStore } from "@graphite/stores/document";
+	import { createDocumentStore, destroyDocumentStore } from "@graphite/stores/document";
-	import { createFullscreenStore } from "@graphite/stores/fullscreen";
+	import { createFullscreenStore, destroyFullscreenStore } from "@graphite/stores/fullscreen";
-	import { createNodeGraphStore } from "@graphite/stores/node-graph";
+	import { createNodeGraphStore, destroyNodeGraphStore } from "@graphite/stores/node-graph";
-	import { createPortfolioStore } from "@graphite/stores/portfolio";
+	import { createPortfolioStore, destroyPortfolioStore } from "@graphite/stores/portfolio";
-	import { createTooltipStore } from "@graphite/stores/tooltip";
+	import { createTooltipStore, destroyTooltipStore } from "@graphite/stores/tooltip";
 
 	import MainWindow from "@graphite/components/window/MainWindow.svelte";
 
@@ -34,24 +34,41 @@
 	};
 	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(() => {
+		createClipboardManager(editor);
+		createHyperlinkManager(editor);
+		createLocalizationManager(editor);
+		createPanicManager(editor);
+		createPersistenceManager(editor, stores.portfolio);
+		createFontsManager(editor);
+		createInputManager(editor, stores.dialog, stores.portfolio, stores.document);
+
 		// 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();
+
+		// Re-send all UI layouts from Rust so the frontend has them after an HMR re-mount
+		editor.handle.resendAllLayouts();
 	});
 
 	onDestroy(() => {
-		[...Object.values(stores), ...Object.values(managers)].forEach(({ destroy }) => destroy());
+		// Stores
+		destroyDialogStore();
+		destroyTooltipStore();
+		destroyDocumentStore();
+		destroyFullscreenStore();
+		destroyNodeGraphStore();
+		destroyPortfolioStore();
+		destroyAppWindowStore();
+
+		// Managers
+		destroyClipboardManager();
+		destroyHyperlinkManager();
+		destroyLocalizationManager();
+		destroyPanicManager();
+		destroyPersistenceManager();
+		destroyFontsManager();
+		destroyInputManager();
 	});
 </script>
 

frontend/src/components/floating-menus/Dialog.svelte

@@ -3,7 +3,7 @@
 
 	import { wipeDocuments } from "@graphite/managers/persistence";
 	import type { DialogStore } from "@graphite/stores/dialog";
-	import { crashReportUrl } from "/src/utility-functions/crash-report";
+	import { crashReportUrl } from "@graphite/utility-functions/crash-report";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";

frontend/src/managers/clipboard.ts

@@ -1,33 +1,32 @@
 import type { Editor } from "@graphite/editor";
 
-let currentCleanup: (() => void) | undefined;
+let editorRef: Editor | undefined = undefined;
-let currentArgs: [Editor] | undefined;
 
 export function createClipboardManager(editor: Editor) {
-	currentArgs = [editor];
+	editorRef = 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
 		navigator.clipboard?.writeText?.(data.content);
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerSelectionRead", async (data) => {
 		editor.handle.readSelection(readAtCaret(data.cut), data.cut);
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerSelectionWrite", async (data) => {
 		insertAtCaret(data.content);
 	});
-
-	function destroy() {
-		editor.subscriptions.unsubscribeFrontendMessage("TriggerClipboardWrite");
-		editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionRead");
-		editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionWrite");
-	}
-
-	currentCleanup = destroy;
-	return { destroy };
 }
-export type ClipboardManager = ReturnType<typeof createClipboardManager>;
+
+export function destroyClipboardManager() {
+	const editor = editorRef;
+	if (!editor) return;
+
+	editor.subscriptions.unsubscribeFrontendMessage("TriggerClipboardWrite");
+	editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionRead");
+	editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionWrite");
+}
 
 function readAtCaret(cut: boolean): string | undefined {
 	const element = window.document.activeElement;
@@ -112,6 +111,6 @@ function insertAtCaret(text: string) {
 
 // Self-accepting HMR: tear down the old instance and re-create with the new module's code
 import.meta.hot?.accept((newModule) => {
-	currentCleanup?.();
+	destroyClipboardManager();
-	if (currentArgs) newModule?.createClipboardManager(...currentArgs);
+	if (editorRef) newModule?.createClipboardManager(editorRef);
 });

frontend/src/managers/fonts.ts

@@ -4,17 +4,16 @@ 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 editorRef: Editor | undefined = undefined;
-let currentArgs: [Editor] | undefined;
+let abortController: AbortController | undefined = undefined;
 
 export function createFontsManager(editor: Editor) {
-	currentArgs = [editor];
+	editorRef = editor;
-	const abortController = new AbortController();
+	abortController = new AbortController();
 
-	// Subscribe to process backend events
 	editor.subscriptions.subscribeFrontendMessage("TriggerFontCatalogLoad", async () => {
 		try {
-			const response = await fetch(FONT_LIST_API, { signal: abortController.signal });
+			const response = await fetch(FONT_LIST_API, abortController ? { signal: abortController.signal } : undefined);
 			if (!response.ok) throw new Error(`Font catalog request failed with status ${response.status}`);
 			const fontListResponse: { items: ApiResponse } = await response.json();
 			const fontListData = fontListResponse.items;
@@ -42,7 +41,7 @@ export function createFontsManager(editor: Editor) {
 
 		try {
 			if (!data.url) throw new Error("No URL provided for font data load");
-			const response = await fetch(data.url, { signal: abortController.signal });
+			const response = await fetch(data.url, abortController ? { signal: abortController.signal } : undefined);
 			if (!response.ok) throw new Error(`Font data request failed with status ${response.status}`);
 			const buffer = await response.arrayBuffer();
 			const bytes = new Uint8Array(buffer);
@@ -54,20 +53,19 @@ export function createFontsManager(editor: Editor) {
 			console.error("Failed to load font:", error);
 		}
 	});
-
-	function destroy() {
-		abortController.abort();
-		editor.subscriptions.unsubscribeFrontendMessage("TriggerFontCatalogLoad");
-		editor.subscriptions.unsubscribeFrontendMessage("TriggerFontDataLoad");
-	}
-
-	currentCleanup = destroy;
-	return { destroy };
 }
-export type FontsManager = ReturnType<typeof createFontsManager>;
+
+export function destroyFontsManager() {
+	const editor = editorRef;
+	if (!editor) return;
+
+	abortController?.abort();
+	editor.subscriptions.unsubscribeFrontendMessage("TriggerFontCatalogLoad");
+	editor.subscriptions.unsubscribeFrontendMessage("TriggerFontDataLoad");
+}
 
 // Self-accepting HMR: tear down the old instance and re-create with the new module's code
 import.meta.hot?.accept((newModule) => {
-	currentCleanup?.();
+	destroyFontsManager();
-	if (currentArgs) newModule?.createFontsManager(...currentArgs);
+	if (editorRef) newModule?.createFontsManager(editorRef);
 });

frontend/src/managers/hyperlink.ts

@@ -1,27 +1,24 @@
 import type { Editor } from "@graphite/editor";
 
-let currentCleanup: (() => void) | undefined;
+let editorRef: Editor | undefined = undefined;
-let currentArgs: [Editor] | undefined;
 
 export function createHyperlinkManager(editor: Editor) {
-	currentArgs = [editor];
+	editorRef = editor;
 
-	// Subscribe to process backend event
 	editor.subscriptions.subscribeFrontendMessage("TriggerVisitLink", async (data) => {
 		window.open(data.url, "_blank", "noopener");
 	});
-
-	function destroy() {
-		editor.subscriptions.unsubscribeFrontendMessage("TriggerVisitLink");
-	}
-
-	currentCleanup = destroy;
-	return { destroy };
 }
-export type HyperlinkManager = ReturnType<typeof createHyperlinkManager>;
+
+export function destroyHyperlinkManager() {
+	const editor = editorRef;
+	if (!editor) return;
+
+	editor.subscriptions.unsubscribeFrontendMessage("TriggerVisitLink");
+}
 
 // Self-accepting HMR: tear down the old instance and re-create with the new module's code
 import.meta.hot?.accept((newModule) => {
-	currentCleanup?.();
+	destroyHyperlinkManager();
-	if (currentArgs) newModule?.createHyperlinkManager(...currentArgs);
+	if (editorRef) newModule?.createHyperlinkManager(editorRef);
 });

frontend/src/managers/localization.ts

@@ -1,25 +1,22 @@
 import type { Editor } from "@graphite/editor";
 
-let currentCleanup: (() => void) | undefined;
+let editorRef: Editor | undefined = undefined;
-let currentArgs: [Editor] | undefined;
 
 export function createLocalizationManager(editor: Editor) {
-	currentArgs = [editor];
+	editorRef = editor;
 
-	// Subscribe to process backend event
 	editor.subscriptions.subscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate", (data) => {
 		const localized = localizeTimestamp(data.commitDate);
 		editor.handle.requestAboutGraphiteDialogWithLocalizedCommitDate(localized.timestamp, localized.year);
 	});
-
-	function destroy() {
-		editor.subscriptions.unsubscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate");
-	}
-
-	currentCleanup = destroy;
-	return { destroy };
 }
-export type LocalizationManager = ReturnType<typeof createLocalizationManager>;
+
+export function destroyLocalizationManager() {
+	const editor = editorRef;
+	if (!editor) return;
+
+	editor.subscriptions.unsubscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate");
+}
 
 function localizeTimestamp(utc: string): { timestamp: string; year: string } {
 	// Timestamp
@@ -38,6 +35,6 @@ function localizeTimestamp(utc: string): { timestamp: string; year: string } {
 
 // Self-accepting HMR: tear down the old instance and re-create with the new module's code
 import.meta.hot?.accept((newModule) => {
-	currentCleanup?.();
+	destroyLocalizationManager();
-	if (currentArgs) newModule?.createLocalizationManager(...currentArgs);
+	if (editorRef) newModule?.createLocalizationManager(editorRef);
 });

frontend/src/managers/panic.ts

@@ -1,18 +1,18 @@
 import type { Editor } from "@graphite/editor";
 import { createCrashDialog } from "@graphite/stores/dialog";
 
-let currentCleanup: (() => void) | undefined;
+let editorRef: Editor | undefined = undefined;
-let currentArgs: [Editor] | undefined;
 
 export function createPanicManager(editor: Editor) {
-	currentArgs = [editor];
+	editorRef = editor;
-	// 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
@@ -20,18 +20,17 @@ export function createPanicManager(editor: Editor) {
 
 		createCrashDialog(panicDetails);
 	});
-
-	function destroy() {
-		editor.subscriptions.unsubscribeFrontendMessage("DisplayDialogPanic");
-	}
-
-	currentCleanup = destroy;
-	return { destroy };
 }
-export type PanicManager = ReturnType<typeof createPanicManager>;
+
+export function destroyPanicManager() {
+	const editor = editorRef;
+	if (!editor) return;
+
+	editor.subscriptions.unsubscribeFrontendMessage("DisplayDialogPanic");
+}
 
 // Self-accepting HMR: tear down the old instance and re-create with the new module's code
 import.meta.hot?.accept((newModule) => {
-	currentCleanup?.();
+	destroyPanicManager();
-	if (currentArgs) newModule?.createPanicManager(...currentArgs);
+	if (editorRef) newModule?.createPanicManager(editorRef);
 });

frontend/src/managers/persistence.ts

@@ -1,46 +1,51 @@
-import { createStore, del, get, set, update } from "idb-keyval";
+import * as idb from "idb-keyval";
-import { get as getFromStore } from "svelte/store";
+import { get } from "svelte/store";
 
 import type { Editor } from "@graphite/editor";
 import type { PortfolioStore } from "@graphite/stores/portfolio";
 import type { MessageBody } from "@graphite/subscription-router";
 
-const graphiteStore = createStore("graphite", "store");
+let editorRef: Editor | undefined = undefined;
-
+let portfolioStore: PortfolioStore | undefined = undefined;
-let currentCleanup: (() => void) | undefined;
-let currentArgs: [Editor, PortfolioStore] | undefined;
 
 export function createPersistenceManager(editor: Editor, portfolio: PortfolioStore) {
-	currentArgs = [editor, portfolio];
+	editorRef = editor;
-	// DOCUMENTS
+	portfolioStore = portfolio;
 
-	// FRONTEND MESSAGE SUBSCRIPTIONS
-
-	// Subscribe to process backend events
 	editor.subscriptions.subscribeFrontendMessage("TriggerSavePreferences", async (data) => {
 		await saveEditorPreferences(data.preferences);
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerLoadPreferences", async () => {
 		await loadEditorPreferences(editor);
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerPersistenceWriteDocument", async (data) => {
 		await storeDocument(data, portfolio);
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerPersistenceRemoveDocument", async (data) => {
 		await removeDocument(String(data.documentId), portfolio);
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerLoadFirstAutoSaveDocument", async () => {
 		await loadFirstDocument(editor);
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerLoadRestAutoSaveDocuments", async () => {
 		await loadRestDocuments(editor);
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerOpenLaunchDocuments", async () => {
 		// TODO: Could be used to load documents from URL params or similar on launch
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerSaveActiveDocument", async (data) => {
+		const indexedDbStorage = idb.createStore("graphite", "store");
+
+		const previouslySavedDocuments = await idb.get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", indexedDbStorage);
+
 		const documentId = String(data.documentId);
-		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
@@ -55,89 +60,86 @@ export function createPersistenceManager(editor: Editor, portfolio: PortfolioSto
 			await storeCurrentDocumentId(documentId);
 		}
 	});
-
-	function destroy() {
-		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");
-	}
-
-	currentCleanup = destroy;
-	return { destroy };
-}
-export type PersistenceManager = ReturnType<typeof createPersistenceManager>;
-
-export async function wipeDocuments() {
-	await del("documents_tab_order", graphiteStore);
-	await del("current_document_id", graphiteStore);
-	await del("documents", graphiteStore);
 }
 
-async function storeDocumentOrder(portfolio: PortfolioStore) {
+export function destroyPersistenceManager() {
-	const documentOrder = getFromStore(portfolio).documents.map((doc) => String(doc.id));
+	const editor = editorRef;
-	await set("documents_tab_order", documentOrder, graphiteStore);
+	if (!editor) 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");
 }
 
-async function storeCurrentDocumentId(documentId: string) {
+export async function storeCurrentDocumentId(documentId: string) {
-	await set("current_document_id", String(documentId), graphiteStore);
+	const indexedDbStorage = idb.createStore("graphite", "store");
+
+	await idb.set("current_document_id", String(documentId), indexedDbStorage);
 }
 
-async function storeDocument(autoSaveDocument: MessageBody<"TriggerPersistenceWriteDocument">, portfolio: PortfolioStore) {
+export async function storeDocument(autoSaveDocument: MessageBody<"TriggerPersistenceWriteDocument">, portfolio: PortfolioStore) {
-	await update<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>(
+	const indexedDbStorage = idb.createStore("graphite", "store");
+
+	await idb.update<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>(
 		"documents",
 		(old) => {
 			const documents = old || {};
 			documents[String(autoSaveDocument.documentId)] = autoSaveDocument;
 			return documents;
 		},
-		graphiteStore,
+		indexedDbStorage,
 	);
 
-	await storeDocumentOrder(portfolio);
+	const documentOrder = get(portfolio).documents.map((doc) => String(doc.id));
+	await idb.set("documents_tab_order", documentOrder, indexedDbStorage);
 	await storeCurrentDocumentId(String(autoSaveDocument.documentId));
 }
 
-async function removeDocument(id: string, portfolio: PortfolioStore) {
+export async function removeDocument(id: string, portfolio: PortfolioStore) {
-	await update<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>(
+	const indexedDbStorage = idb.createStore("graphite", "store");
+
+	await idb.update<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>(
 		"documents",
 		(old) => {
 			const documents = old || {};
 			delete documents[id];
 			return documents;
 		},
-		graphiteStore,
+		indexedDbStorage,
 	);
 
-	await update<string[]>(
+	await idb.update<string[]>(
 		"documents_tab_order",
 		(old) => {
 			const order = old || [];
 			return order.filter((docId) => docId !== id);
 		},
-		graphiteStore,
+		indexedDbStorage,
 	);
 
-	const documentCount = getFromStore(portfolio).documents.length;
+	const documentCount = get(portfolio).documents.length;
 	if (documentCount > 0) {
-		const documentIndex = getFromStore(portfolio).activeDocumentIndex;
+		const documentIndex = get(portfolio).activeDocumentIndex;
-		const documentId = String(getFromStore(portfolio).documents[documentIndex].id);
+		const documentId = String(get(portfolio).documents[documentIndex].id);
 
-		const tabOrder = (await get<string[]>("documents_tab_order", graphiteStore)) || [];
+		const tabOrder = (await idb.get<string[]>("documents_tab_order", indexedDbStorage)) || [];
 		if (tabOrder.includes(documentId)) {
 			await storeCurrentDocumentId(documentId);
 		}
 	} else {
-		await del("current_document_id", graphiteStore);
+		await idb.del("current_document_id", indexedDbStorage);
 	}
 }
 
-async function loadFirstDocument(editor: Editor) {
+export async function loadFirstDocument(editor: Editor) {
-	const previouslySavedDocuments = await get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", graphiteStore);
+	const indexedDbStorage = idb.createStore("graphite", "store");
+
+	const previouslySavedDocuments = await idb.get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", indexedDbStorage);
 
 	// TODO: Eventually remove this document upgrade code
 	// Migrate TriggerPersistenceWriteDocument.documentId from string to bigint if the browser is storing the old format as strings
@@ -147,8 +149,8 @@ async function loadFirstDocument(editor: Editor) {
 		});
 	}
 
-	const documentOrder = await get<string[]>("documents_tab_order", graphiteStore);
+	const documentOrder = await idb.get<string[]>("documents_tab_order", indexedDbStorage);
-	const currentDocumentIdString = await get<string>("current_document_id", graphiteStore);
+	const currentDocumentIdString = await idb.get<string>("current_document_id", indexedDbStorage);
 	const currentDocumentId = currentDocumentIdString ? BigInt(currentDocumentIdString) : undefined;
 	if (!previouslySavedDocuments || !documentOrder) return;
 
@@ -168,8 +170,10 @@ async function loadFirstDocument(editor: Editor) {
 	}
 }
 
-async function loadRestDocuments(editor: Editor) {
+export async function loadRestDocuments(editor: Editor) {
-	const previouslySavedDocuments = await get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", graphiteStore);
+	const indexedDbStorage = idb.createStore("graphite", "store");
+
+	const previouslySavedDocuments = await idb.get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", indexedDbStorage);
 
 	// TODO: Eventually remove this document upgrade code
 	// Migrate TriggerPersistenceWriteDocument.documentId from string to bigint if needed
@@ -179,8 +183,8 @@ async function loadRestDocuments(editor: Editor) {
 		});
 	}
 
-	const documentOrder = await get<string[]>("documents_tab_order", graphiteStore);
+	const documentOrder = await idb.get<string[]>("documents_tab_order", indexedDbStorage);
-	const currentDocumentIdString = await get<string>("current_document_id", graphiteStore);
+	const currentDocumentIdString = await idb.get<string>("current_document_id", indexedDbStorage);
 	const currentDocumentId = currentDocumentIdString ? BigInt(currentDocumentIdString) : undefined;
 	if (!previouslySavedDocuments || !documentOrder) return;
 
@@ -217,19 +221,29 @@ async function loadRestDocuments(editor: Editor) {
 	}
 }
 
-// PREFERENCES
+export async function saveEditorPreferences(preferences: unknown) {
+	const indexedDbStorage = idb.createStore("graphite", "store");
 
-async function saveEditorPreferences(preferences: unknown) {
+	await idb.set("preferences", preferences, indexedDbStorage);
-	await set("preferences", preferences, graphiteStore);
 }
 
-async function loadEditorPreferences(editor: Editor) {
+export async function loadEditorPreferences(editor: Editor) {
-	const preferences = await get<Record<string, unknown>>("preferences", graphiteStore);
+	const indexedDbStorage = idb.createStore("graphite", "store");
+
+	const preferences = await idb.get<Record<string, unknown>>("preferences", indexedDbStorage);
 	editor.handle.loadPreferences(preferences ? JSON.stringify(preferences) : undefined);
 }
 
+export async function wipeDocuments() {
+	const indexedDbStorage = idb.createStore("graphite", "store");
+
+	await idb.del("documents_tab_order", indexedDbStorage);
+	await idb.del("current_document_id", indexedDbStorage);
+	await idb.del("documents", indexedDbStorage);
+}
+
 // Self-accepting HMR: tear down the old instance and re-create with the new module's code
 import.meta.hot?.accept((newModule) => {
-	currentCleanup?.();
+	destroyPersistenceManager();
-	if (currentArgs) newModule?.createPersistenceManager(...currentArgs);
+	if (editorRef && portfolioStore) newModule?.createPersistenceManager(editorRef, portfolioStore);
 });

frontend/src/stores/app-window.ts

@@ -4,6 +4,8 @@ import type { Writable } from "svelte/store";
 import type { AppWindowPlatform } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
 
+export type AppWindowStore = ReturnType<typeof createAppWindowStore>;
+
 type AppWindowStoreState = {
 	platform: AppWindowPlatform;
 	maximized: boolean;
@@ -19,37 +21,44 @@ const initialState: AppWindowStoreState = {
 	uiScale: 1,
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // 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
+	editorRef = editor;
+
 	editor.subscriptions.subscribeFrontendMessage("UpdatePlatform", (data) => {
 		update((state) => {
 			state.platform = data.platform;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateMaximized", (data) => {
 		update((state) => {
 			state.maximized = data.maximized;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateFullscreen", (data) => {
 		update((state) => {
 			state.fullscreen = data.fullscreen;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateViewportHolePunch", (data) => {
 		update((state) => {
 			state.viewportHolePunch = data.active;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateUIScale", (data) => {
 		update((state) => {
 			state.uiScale = data.scale;
@@ -57,27 +66,16 @@ export function createAppWindowStore(editor: Editor) {
 		});
 	});
 
-	function destroy() {
+	return { subscribe };
-		editor.subscriptions.unsubscribeFrontendMessage("UpdatePlatform");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateMaximized");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateFullscreen");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateViewportHolePunch");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateUIScale");
-	}
-
-	currentCleanup = destroy;
-	currentArgs = [editor];
-	return {
-		subscribe,
-		destroy,
-	};
 }
-export type AppWindowStore = ReturnType<typeof createAppWindowStore>;
 
-// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+export function destroyAppWindowStore() {
-let currentCleanup: (() => void) | undefined;
+	const editor = editorRef;
-let currentArgs: [Editor] | undefined;
+	if (!editor) return;
-import.meta.hot?.accept((newModule) => {
+
-	currentCleanup?.();
+	editor.subscriptions.unsubscribeFrontendMessage("UpdatePlatform");
-	if (currentArgs) newModule?.createAppWindowStore(...currentArgs);
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateMaximized");
-});
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateFullscreen");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateViewportHolePunch");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateUIScale");
+}

frontend/src/stores/dialog.ts

@@ -7,6 +7,8 @@ import type { Editor } from "@graphite/editor";
 import type { IconName } from "@graphite/icons";
 import { patchLayout } from "@graphite/utility-functions/widgets";
 
+export type DialogStore = ReturnType<typeof createDialogStore>;
+
 type DialogStoreState = {
 	visible: boolean;
 	title: string;
@@ -27,13 +29,16 @@ const initialState: DialogStoreState = {
 	panicDetails: "",
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // 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
+	editorRef = editor;
+
 	editor.subscriptions.subscribeFrontendMessage("DisplayDialog", (data) => {
 		update((state) => {
 			state.visible = true;
@@ -71,6 +76,7 @@ export function createDialogStore(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("DialogClose", () => {
 		update((state) => {
 			// Disallow dismissing the crash dialog since it should remain as the final notification
@@ -94,23 +100,20 @@ export function createDialogStore(editor: Editor) {
 		editor.handle.requestLicensesThirdPartyDialogWithLicenseText(licenseText);
 	});
 
-	function destroy() {
+	return { subscribe };
-		editor.subscriptions.unsubscribeFrontendMessage("DisplayDialog");
+}
-		editor.subscriptions.unsubscribeFrontendMessage("DialogClose");
+
-		editor.subscriptions.unsubscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog");
+export function destroyDialogStore() {
-		editor.subscriptions.unsubscribeLayoutUpdate("DialogButtons");
+	const editor = editorRef;
-		editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn1");
+	if (!editor) return;
-		editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn2");
+
-	}
+	editor.subscriptions.unsubscribeFrontendMessage("DisplayDialog");
-
+	editor.subscriptions.unsubscribeFrontendMessage("DialogClose");
-	currentCleanup = destroy;
+	editor.subscriptions.unsubscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog");
-	currentArgs = [editor];
+	editor.subscriptions.unsubscribeLayoutUpdate("DialogButtons");
-	return {
+	editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn1");
-		subscribe,
+	editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn2");
-		destroy,
-	};
 }
-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.
@@ -129,11 +132,3 @@ export function createCrashDialog(panicDetails: string) {
 		return state;
 	});
 }
-
-// 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);
-});

frontend/src/stores/document.ts

@@ -6,6 +6,8 @@ import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
 import { patchLayout } from "@graphite/utility-functions/widgets";
 
+export type DocumentStore = ReturnType<typeof createDocumentStore>;
+
 type DocumentStoreState = {
 	toolOptionsLayout: Layout;
 	documentBarLayout: Layout;
@@ -25,12 +27,16 @@ const initialState: DocumentStoreState = {
 	fadeArtwork: 100,
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // 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) {
+	editorRef = editor;
+
 	// Update layouts
 	editor.subscriptions.subscribeFrontendMessage("UpdateGraphFadeArtwork", (data) => {
 		update((state) => {
@@ -87,29 +93,18 @@ export function createDocumentStore(editor: Editor) {
 		});
 	});
 
-	function destroy() {
+	return { subscribe };
-		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");
-	}
-
-	currentCleanup = destroy;
-	currentArgs = [editor];
-	return {
-		subscribe,
-		destroy,
-	};
 }
-export type DocumentStore = ReturnType<typeof createDocumentStore>;
 
-// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+export function destroyDocumentStore() {
-let currentCleanup: (() => void) | undefined;
+	const editor = editorRef;
-let currentArgs: [Editor] | undefined;
+	if (!editor) return;
-import.meta.hot?.accept((newModule) => {
+
-	currentCleanup?.();
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateGraphFadeArtwork");
-	if (currentArgs) newModule?.createDocumentStore(...currentArgs);
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateGraphViewOverlay");
-});
+	editor.subscriptions.unsubscribeLayoutUpdate("ToolOptions");
+	editor.subscriptions.unsubscribeLayoutUpdate("DocumentBar");
+	editor.subscriptions.unsubscribeLayoutUpdate("ToolShelf");
+	editor.subscriptions.unsubscribeLayoutUpdate("WorkingColors");
+	editor.subscriptions.unsubscribeLayoutUpdate("NodeGraphControlBar");
+}

frontend/src/stores/fullscreen.ts

@@ -3,6 +3,8 @@ import type { Writable } from "svelte/store";
 
 import type { Editor } from "@graphite/editor";
 
+export type FullscreenStore = ReturnType<typeof createFullscreenStore>;
+
 type FullscreenStoreState = {
 	windowFullscreen: boolean;
 	keyboardLocked: boolean;
@@ -12,28 +14,29 @@ const initialState: FullscreenStoreState = {
 	keyboardLocked: false,
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // 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) {
+	editorRef = editor;
+
 	editor.subscriptions.subscribeFrontendMessage("WindowFullscreen", () => {
 		toggleFullscreen();
 	});
 
-	function destroy() {
+	return { subscribe };
-		editor.subscriptions.unsubscribeFrontendMessage("WindowFullscreen");
+}
-	}
+
-
+export function destroyFullscreenStore() {
-	currentCleanup = destroy;
+	const editor = editorRef;
-	currentArgs = [editor];
+	if (!editor) return;
-	return {
+
-		subscribe,
+	editor.subscriptions.unsubscribeFrontendMessage("WindowFullscreen");
-		destroy,
-	};
 }
-export type FullscreenStore = ReturnType<typeof createFullscreenStore>;
 
 export function fullscreenModeChanged() {
 	update((state) => {
@@ -67,11 +70,3 @@ export async function toggleFullscreen() {
 	if (state.windowFullscreen) await exitFullscreen();
 	else await enterFullscreen();
 }
-
-// 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);
-});

frontend/src/stores/node-graph.ts

@@ -5,6 +5,8 @@ import type { NodeGraphErrorDiagnostic, BoxSelection, FrontendClickTargets, Cont
 import type { Editor } from "@graphite/editor";
 import type { MessageBody } from "@graphite/subscription-router";
 
+export type NodeGraphStore = ReturnType<typeof createNodeGraphStore>;
+
 type NodeGraphStoreState = {
 	box: BoxSelection | undefined;
 	clickTargets: FrontendClickTargets | undefined;
@@ -51,12 +53,16 @@ const initialState: NodeGraphStoreState = {
 	reorderExportIndex: undefined,
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // 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) {
+	editorRef = editor;
+
 	// Set up message subscriptions on creation
 	editor.subscriptions.subscribeFrontendMessage("SendUIMetadata", (data) => {
 		update((state) => {
@@ -65,48 +71,56 @@ export function createNodeGraphStore(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateBox", (data) => {
 		update((state) => {
 			state.box = data.box;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateClickTargets", (data) => {
 		update((state) => {
 			state.clickTargets = data.clickTargets;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateContextMenuInformation", (data) => {
 		update((state) => {
 			state.contextMenuInformation = data.contextMenuInformation;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateImportReorderIndex", (data) => {
 		update((state) => {
 			state.reorderImportIndex = data.importIndex;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateExportReorderIndex", (data) => {
 		update((state) => {
 			state.reorderExportIndex = data.exportIndex;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateImportsExports", (data) => {
 		update((state) => {
 			state.updateImportsExports = data;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateInSelectedNetwork", (data) => {
 		update((state) => {
 			state.inSelectedNetwork = data.inSelectedNetwork;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateLayerWidths", (data) => {
 		update((state) => {
 			state.layerWidths = data.layerWidths;
@@ -115,6 +129,7 @@ export function createNodeGraphStore(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphNodes", (data) => {
 		update((state) => {
 			state.nodes.clear();
@@ -124,18 +139,21 @@ export function createNodeGraphStore(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic", (data) => {
 		update((state) => {
 			state.error = data.error;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateVisibleNodes", (data) => {
 		update((state) => {
 			state.visibleNodes = new Set<bigint>(data.nodes);
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphWires", (data) => {
 		update((state) => {
 			data.wires.forEach((wireUpdate) => {
@@ -154,30 +172,35 @@ export function createNodeGraphStore(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("ClearAllNodeGraphWires", () => {
 		update((state) => {
 			state.wires.clear();
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphSelection", (data) => {
 		update((state) => {
 			state.selected = data.selected;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphTransform", (data) => {
 		update((state) => {
 			state.transform = { scale: data.scale, x: data.translation[0], y: data.translation[1] };
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateNodeThumbnail", (data) => {
 		update((state) => {
 			state.thumbnails.set(data.id, data.value);
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateWirePathInProgress", (data) => {
 		update((state) => {
 			state.wirePathInProgress = data.wirePath;
@@ -185,35 +208,32 @@ export function createNodeGraphStore(editor: Editor) {
 		});
 	});
 
-	function destroy() {
+	return { subscribe };
-		editor.subscriptions.unsubscribeFrontendMessage("SendUIMetadata");
+}
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateBox");
+
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateClickTargets");
+export function destroyNodeGraphStore() {
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateContextMenuInformation");
+	const editor = editorRef;
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateImportReorderIndex");
+	if (!editor) return;
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateExportReorderIndex");
+
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateImportsExports");
+	editor.subscriptions.unsubscribeFrontendMessage("SendUIMetadata");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateInSelectedNetwork");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateBox");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateLayerWidths");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateClickTargets");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphNodes");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateContextMenuInformation");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateImportReorderIndex");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateVisibleNodes");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateExportReorderIndex");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphWires");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateImportsExports");
-		editor.subscriptions.unsubscribeFrontendMessage("ClearAllNodeGraphWires");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateInSelectedNetwork");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphSelection");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateLayerWidths");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphTransform");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphNodes");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeThumbnail");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateWirePathInProgress");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateVisibleNodes");
-	}
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphWires");
-
+	editor.subscriptions.unsubscribeFrontendMessage("ClearAllNodeGraphWires");
-	currentCleanup = destroy;
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphSelection");
-	currentArgs = [editor];
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphTransform");
-	return {
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeThumbnail");
-		subscribe,
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateWirePathInProgress");
-		destroy,
-	};
 }
-export type NodeGraphStore = ReturnType<typeof createNodeGraphStore>;
 
 export function closeContextMenu() {
 	update((state) => {
@@ -221,11 +241,3 @@ export function closeContextMenu() {
 		return state;
 	});
 }
-
-// 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);
-});

frontend/src/stores/portfolio.ts

@@ -6,6 +6,8 @@ import type { Editor } from "@graphite/editor";
 import { downloadFile, downloadFileBlob, upload } from "@graphite/utility-functions/files";
 import { rasterizeSVG } from "@graphite/utility-functions/rasterization";
 
+export type PortfolioStore = ReturnType<typeof createPortfolioStore>;
+
 type PortfolioStoreState = {
 	unsaved: boolean;
 	documents: OpenDocument[];
@@ -23,19 +25,23 @@ const initialState: PortfolioStoreState = {
 	layersPanelOpen: true,
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // 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
+	editorRef = editor;
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateOpenDocumentsList", (data) => {
 		update((state) => {
 			state.documents = data.openDocuments;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateActiveDocument", (data) => {
 		update((state) => {
 			// Assume we receive a correct document id
@@ -44,6 +50,7 @@ export function createPortfolioStore(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerFetchAndOpenDocument", async (data) => {
 		try {
 			const url = new URL(`demo-artwork/${data.filename}`, document.location.href);
@@ -56,21 +63,26 @@ export function createPortfolioStore(editor: Editor) {
 			}, 0);
 		}
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerOpen", async () => {
 		const data = await upload(`image/*,.${editor.handle.fileExtension()}`, "data");
 		editor.handle.openFile(data.filename, data.content);
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerImport", async () => {
 		// TODO: Use the same `accept` string as in the `TriggerOpen` handler once importing Graphite documents as nodes is supported
 		const data = await upload("image/*", "data");
 		editor.handle.importFile(data.filename, data.content);
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerSaveDocument", (data) => {
 		downloadFile(data.name, data.content);
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerSaveFile", (data) => {
 		downloadFile(data.name, data.content);
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerExportImage", async (data) => {
 		const { svg, name, mime, size } = data;
 
@@ -87,18 +99,21 @@ export function createPortfolioStore(editor: Editor) {
 			// Fail silently if there's an error rasterizing the SVG, such as a zero-sized image
 		}
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateDataPanelState", async (data) => {
 		update((state) => {
 			state.dataPanelOpen = data.open;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdatePropertiesPanelState", async (data) => {
 		update((state) => {
 			state.propertiesPanelOpen = data.open;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateLayersPanelState", async (data) => {
 		update((state) => {
 			state.layersPanelOpen = data.open;
@@ -106,33 +121,22 @@ export function createPortfolioStore(editor: Editor) {
 		});
 	});
 
-	function destroy() {
+	return { subscribe };
-		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");
-	}
-
-	currentCleanup = destroy;
-	currentArgs = [editor];
-	return {
-		subscribe,
-		destroy,
-	};
 }
-export type PortfolioStore = ReturnType<typeof createPortfolioStore>;
 
-// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+export function destroyPortfolioStore() {
-let currentCleanup: (() => void) | undefined;
+	const editor = editorRef;
-let currentArgs: [Editor] | undefined;
+	if (!editor) return;
-import.meta.hot?.accept((newModule) => {
+
-	currentCleanup?.();
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateOpenDocumentsList");
-	if (currentArgs) newModule?.createPortfolioStore(...currentArgs);
+	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");
+}

frontend/src/stores/tooltip.ts

@@ -5,8 +5,12 @@ import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
 import { operatingSystem } from "@graphite/utility-functions/platform";
 
+export type TooltipStore = ReturnType<typeof createTooltipStore>;
+
 const SHOW_TOOLTIP_DELAY_MS = 500;
 
+let tooltipTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
+
 type TooltipStoreState = {
 	visible: boolean;
 	element: Element | undefined;
@@ -24,80 +28,15 @@ const initialState: TooltipStoreState = {
 	fullscreenShortcut: undefined,
 };
 
+let editorRef: Editor | undefined = 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;
+	editorRef = editor;
-
-	// Listen for mouse movements onto tooltip-bearing HTML elements to track the future target of a tooltip
-	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) => {
-			state.visible = false;
-			state.element = element;
-			return state;
-		});
-	};
-
-	// Listen for mouse movements to schedule and position the tooltip, or hide it immediately upon further movement
-	const onMouseMove = (e: MouseEvent) => {
-		// Hide the tooltip now that the cursor has moved
-		update((state) => {
-			state.visible = false;
-			return state;
-		});
-
-		// Before we schedule a new future tooltip appearance, we clear the existing one
-		if (tooltipTimeout) clearTimeout(tooltipTimeout);
-
-		// Don't show tooltips while mouse buttons are pressed
-		if (e.buttons !== 0) return;
-
-		// Schedule the tooltip to appear at this cursor position after a delay
-		tooltipTimeout = setTimeout(() => {
-			update((state) => {
-				if (state.element) {
-					state.visible = true;
-					state.position = { x: e.clientX, y: e.clientY };
-				}
-				return state;
-			});
-		}, SHOW_TOOLTIP_DELAY_MS);
-	};
-
-	// Hide tooltip and cancel any pending timeout when the mouse leaves the application window
-	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);
-
-		editor.subscriptions.unsubscribeFrontendMessage("SendShortcutShiftClick");
-		editor.subscriptions.unsubscribeFrontendMessage("SendShortcutAltClick");
-		editor.subscriptions.unsubscribeFrontendMessage("SendShortcutFullscreen");
-	}
 
 	document.addEventListener("mouseover", onMouseOver);
 	document.addEventListener("mousemove", onMouseMove);
@@ -125,19 +64,75 @@ export function createTooltipStore(editor: Editor) {
 		});
 	});
 
-	currentCleanup = destroy;
+	return { subscribe };
-	currentArgs = [editor];
-	return {
-		subscribe,
-		destroy,
-	};
 }
-export type TooltipStore = ReturnType<typeof createTooltipStore>;
 
-// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+export function destroyTooltipStore() {
-let currentCleanup: (() => void) | undefined;
+	const editor = editorRef;
-let currentArgs: [Editor] | undefined;
+	if (!editor) return;
-import.meta.hot?.accept((newModule) => {
+
-	currentCleanup?.();
+	if (tooltipTimeout) clearTimeout(tooltipTimeout);
-	if (currentArgs) newModule?.createTooltipStore(...currentArgs);
+
-});
+	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");
+}
+
+// Listen for mouse movements onto tooltip-bearing HTML elements to track the future target of a tooltip
+function onMouseOver(e: MouseEvent) {
+	const element = (e.target instanceof Element && e.target.closest("[data-tooltip-label], [data-tooltip-description], [data-tooltip-shortcut]")) || undefined;
+
+	update((state) => {
+		state.visible = false;
+		state.element = element;
+		return state;
+	});
+}
+
+// Listen for mouse movements to schedule and position the tooltip, or hide it immediately upon further movement
+function onMouseMove(e: MouseEvent) {
+	// Hide the tooltip now that the cursor has moved
+	update((state) => {
+		state.visible = false;
+		return state;
+	});
+
+	// Before we schedule a new future tooltip appearance, we clear the existing one
+	if (tooltipTimeout) clearTimeout(tooltipTimeout);
+
+	// Don't show tooltips while mouse buttons are pressed
+	if (e.buttons !== 0) return;
+
+	// Schedule the tooltip to appear at this cursor position after a delay
+	tooltipTimeout = setTimeout(() => {
+		update((state) => {
+			if (state.element) {
+				state.visible = true;
+				state.position = { x: e.clientX, y: e.clientY };
+			}
+			return state;
+		});
+	}, SHOW_TOOLTIP_DELAY_MS);
+}
+
+// Hide tooltip and cancel any pending timeout when the mouse leaves the application window
+function 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;
+	});
+}

frontend/wasm/src/editor_api.rs

@@ -187,6 +187,12 @@ impl EditorHandle {
 	// the backend from the web frontend.
 	// ========================================================================
 
+	/// Re-sends all UI layouts to the frontend. Called during HMR re-mounts when the frontend has lost its layout state.
+	#[wasm_bindgen(js_name = resendAllLayouts)]
+	pub fn resend_all_layouts(&self) {
+		self.dispatch(LayoutMessage::ResendAllLayouts);
+	}
+
 	#[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