Refactor the TypeScript data flow for full type safety and auto-generation of Rust types (#3865)

* Migrate Specta to Tsify to auto-generate messages.ts, working except colors and widgets * Adopt the generated FillColor/Color/GradientStops * Fix widget typing * Separate WidgetGroup enum variants into wrapper structs * Small rename * Simplify widgets further * Clean up message type references * Switch type imports to the auto-generated file * Remove lowercase serde rename * Fix FillChoice deserialization * Fix small regression from #3837 * Improve type safety * Make WidgetSpan type-safe * More cleanup and type safety * More type safety * More type safety * Get the rest to type-check without errors; improve widget builder macro to have optional icons; improve Svelte 5 configs * Cargo fmt * Fix imports * Update outdated readme info * Fix lint command rename references * Fix typos * One more typos fix * Remove unnecessary dep: prefix from the edited Cargo.toml files * Remove excess parts from Cargo.toml * Fix compiling on desktop * Revert "Remove excess parts from Cargo.toml" This reverts commit 6b711117b3a5d5d8a3ee20f36a43bc74930b7c82. * Update dev docs with simpler, more accurate instructions
2026-09-20 11:28:30 +08:00 · 2026-03-09 16:35:04 -07:00
parent fbd2658148
commit 52d2b38a82
199 changed files with 2265 additions and 2811 deletions
@@ -19,7 +19,7 @@

 	import MainWindow from "@graphite/components/window/MainWindow.svelte";

-	// Graphite WASM editor
+	// Graphite Wasm editor
 	export let editor: Editor;
 	setContext("editor", editor);

@@ -1,6 +1,6 @@
 # Overview of `/frontend/src/components/`

-Each component represents a (usually reusable) part of the Graphite editor GUI. These all get mounted in `Editor.svelte` (in the `/src` directory above this one).
+Each component represents a (usually reusable) part of the Graphite editor GUI.

 ## Floating Menus: `floating-menus/`

@@ -12,7 +12,11 @@ Useful containers that control the flow of content held within.

 ## Panels: `panels/`

-The dockable tabbed regions like the Document, Properties, Layers, and Node Graph panels.
+The dockable tabbed regions like the Document, Properties, Layers, Data, and Welcome panels.
+
+## Views: `views/`
+
+Content views rendered within panels, such as the node graph.

 ## Widgets: `widgets/`

@@ -1,15 +1,14 @@
 <script lang="ts">
 	import { getContext, onDestroy, createEventDispatcher, tick } from "svelte";

-	import type { FillChoice, MenuDirection } from "@graphite/messages";
-	import type { Color } from "@graphite/messages";
+	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 {
 		contrastingOutlineFactor,
-		isColor,
-		isGradient,
+		fillChoiceColor,
+		fillChoiceGradientStops,
 		createColor,
-		createNoneColor,
 		createColorFromHSVA,
 		colorFromCSS,
 		colorToRgb255,
@@ -24,10 +23,8 @@
 	} from "@graphite/utility-functions/colors";
 	import type { HSV, RGB } from "@graphite/utility-functions/colors";
 	import { clamp } from "@graphite/utility-functions/math";
-	import { isDesktop } from "@graphite/utility-functions/platform";

-	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
-	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
+	import FloatingMenu, { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
@@ -37,20 +34,20 @@
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";

-	type PresetColors = "none" | "black" | "white" | "red" | "yellow" | "green" | "cyan" | "blue" | "magenta";
+	type PresetColors = "None" | "Black" | "White" | "Red" | "Yellow" | "Green" | "Cyan" | "Blue" | "Magenta";

 	const PURE_COLORS: Record<PresetColors, [number, number, number]> = {
-		none: [0, 0, 0],
-		black: [0, 0, 0],
-		white: [1, 1, 1],
-		red: [1, 0, 0],
-		yellow: [1, 1, 0],
-		green: [0, 1, 0],
-		cyan: [0, 1, 1],
-		blue: [0, 0, 1],
-		magenta: [1, 0, 1],
+		None: [0, 0, 0],
+		Black: [0, 0, 0],
+		White: [1, 1, 1],
+		Red: [1, 0, 0],
+		Yellow: [1, 1, 0],
+		Green: [0, 1, 0],
+		Cyan: [0, 1, 1],
+		Blue: [0, 0, 1],
+		Magenta: [1, 0, 1],
 	};
-	const PURE_COLORS_GRAYABLE = [
+	const PURE_COLORS_GRAYABLE: [PresetColors, string, string][] = [
 		["Red", "#ff0000", "#4c4c4c"],
 		["Yellow", "#ffff00", "#e3e3e3"],
 		["Green", "#00ff00", "#969696"],
@@ -70,17 +67,19 @@
 	// TODO: See if this should be made to follow the pattern of DropdownInput.svelte so this could be removed
 	export let open: boolean;

-	const colorForHSVA = isColor(colorOrGradient) ? colorOrGradient : gradientFirstColor(colorOrGradient);
+	const initSolidColor = fillChoiceColor(colorOrGradient);
+	const initGradientStops = fillChoiceGradientStops(colorOrGradient);
+	const colorForHSVA = initSolidColor || (initGradientStops ? gradientFirstColor(initGradientStops) : undefined);
 	const hsvOrNone = colorForHSVA ? colorToHSV(colorForHSVA) : undefined;
 	const hsv = hsvOrNone || { h: 0, s: 0, v: 0 };

 	// Gradient color stops
-	$: gradient = isGradient(colorOrGradient) ? colorOrGradient : undefined;
-	let activeIndex = 0 as number | undefined;
+	$: gradient = fillChoiceGradientStops(colorOrGradient);
+	let activeIndex: number | undefined = 0;
 	let activeIndexIsMidpoint = false;
-	$: selectedGradientColor = (activeIndex !== undefined && gradient?.color[activeIndex]) || (colorFromCSS("black") as Color);
+	$: selectedGradientColor = (activeIndex !== undefined && gradient?.color[activeIndex]) || colorFromCSS("black") || createColor(0, 0, 0, 1);
 	// Currently viewed color
-	$: color = isColor(colorOrGradient) ? colorOrGradient : selectedGradientColor;
+	$: color = fillChoiceColor(colorOrGradient) || selectedGradientColor;
 	// New color components
 	let hue = hsv.h;
 	let saturation = hsv.s;
@@ -115,14 +114,30 @@
 	$: watchOpen(open);
 	$: watchColor(color);

-	$: oldColor = oldIsNone ? createNoneColor() : createColorFromHSVA(oldHue, oldSaturation, oldValue, oldAlpha);
-	$: newColor = isNone ? createNoneColor() : createColorFromHSVA(hue, saturation, value, alpha);
-	$: rgbChannels = Object.entries(colorToRgb255(newColor) || { r: undefined, g: undefined, b: undefined }) as [keyof RGB, number | undefined][];
-	$: hsvChannels = Object.entries(!isNone ? { h: hue * 360, s: saturation * 100, v: value * 100 } : { h: undefined, s: undefined, v: undefined }) as [keyof HSV, number | undefined][];
+	$: oldColor = oldIsNone ? undefined : createColorFromHSVA(oldHue, oldSaturation, oldValue, oldAlpha);
+	$: newColor = isNone ? undefined : createColorFromHSVA(hue, saturation, value, alpha);
+	$: rgbChannels = ((): [keyof RGB, number | undefined][] => {
+		const rgb = newColor ? colorToRgb255(newColor) : undefined;
+		return [
+			["r", rgb?.r],
+			["g", rgb?.g],
+			["b", rgb?.b],
+		];
+	})();
+	$: hsvChannels = ((): [keyof HSV, number | undefined][] => {
+		return [
+			["h", isNone ? undefined : hue * 360],
+			["s", isNone ? undefined : saturation * 100],
+			["v", isNone ? undefined : value * 100],
+		];
+	})();
 	$: opaqueHueColor = createColorFromHSVA(hue, 1, 1, 1);
-	$: outlineFactor = Math.max(contrastingOutlineFactor(newColor, "--color-2-mildblack", 0.01), contrastingOutlineFactor(oldColor, "--color-2-mildblack", 0.01));
+	$: outlineFactor = Math.max(
+		contrastingOutlineFactor(newColor ? { Solid: newColor } : ("None" as const), "--color-2-mildblack", 0.01),
+		contrastingOutlineFactor(oldColor ? { Solid: oldColor } : ("None" as const), "--color-2-mildblack", 0.01),
+	);
 	$: outlined = outlineFactor > 0.0001;
-	$: transparency = newColor.alpha < 1 || oldColor.alpha < 1;
+	$: transparency = (newColor?.alpha ?? 1) < 1 || (oldColor?.alpha ?? 1) < 1;

 	async function watchOpen(open: boolean) {
 		if (open) {
@@ -136,11 +151,6 @@
 	function watchColor(color: Color) {
 		const hsv = colorToHSV(color);

-		if (hsv === undefined) {
-			setNewHSVA(0, 0, 0, 1, true);
-			return;
-		}
-
 		// Update the hue, but only if it is necessary so we don't:
 		// - ...jump the user's hue from 360° (top) to the equivalent 0° (bottom)
 		// - ...reset the hue to 0° if the color is fully desaturated, where all hues are equivalent
@@ -160,7 +170,7 @@
 	function onPointerDown(e: PointerEvent) {
 		if (disabled) return;

-		const target = (e.target || undefined) as HTMLElement | undefined;
+		const target = e.target instanceof HTMLElement ? e.target : undefined;
 		draggingPickerTrack = target?.closest("[data-saturation-value-picker], [data-hue-picker], [data-alpha-picker]") || undefined;

 		hueBeforeDrag = hue;
@@ -301,14 +311,20 @@
 		setColor(color);
 	}

-	function setColor(color?: Color) {
-		const colorToEmit = color || createColorFromHSVA(hue, saturation, value, alpha);
-
-		if (gradientSpectrumInputWidget && activeIndex !== undefined && gradient?.position[activeIndex] !== undefined && isGradient(colorOrGradient)) {
-			colorOrGradient.color[activeIndex] = colorToEmit;
+	function setColor(color?: Color | "None") {
+		if (color === "None") {
+			dispatch("colorOrGradient", "None");
+			return;
 		}

-		dispatch("colorOrGradient", gradient || colorToEmit);
+		const colorToEmit = color || createColorFromHSVA(hue, saturation, value, alpha);
+
+		if (gradientSpectrumInputWidget && activeIndex !== undefined && gradient && gradient.position[activeIndex] !== undefined) {
+			const gradientStops = fillChoiceGradientStops(colorOrGradient);
+			if (gradientStops) gradientStops.color[activeIndex] = colorToEmit;
+		}
+
+		dispatch("colorOrGradient", gradient ? { Gradient: gradient } : { Solid: colorToEmit });
 	}

 	function swapNewWithOld() {
@@ -323,7 +339,7 @@
 		setNewHSVA(oldHue, oldSaturation, oldValue, oldAlpha, oldIsNone);
 		setOldHSVA(tempHue, tempSaturation, tempValue, tempAlpha, tempIsNone);

-		setColor(old);
+		setColor(old || "None");
 	}

 	function setColorCode(colorCode: string) {
@@ -333,7 +349,7 @@

 	function setColorRGB(channel: keyof RGB, strength: number | undefined) {
 		// Do nothing if the given value is undefined
-		if (strength === undefined) return undefined;
+		if (strength === undefined || !newColor) return undefined;
 		// Set the specified channel to the given value
 		else if (channel === "r") setColor(createColor(strength / 255, newColor.green, newColor.blue, newColor.alpha));
 		else if (channel === "g") setColor(createColor(newColor.red, strength / 255, newColor.blue, newColor.alpha));
@@ -356,19 +372,12 @@
 		setColor();
 	}

-	function setColorPresetSubtile(e: MouseEvent) {
-		const clickedTile = e.target as HTMLDivElement | undefined;
-		const tileColor = clickedTile?.getAttribute("data-pure-tile") || undefined;
-
-		if (tileColor) setColorPreset(tileColor as PresetColors);
-	}
-
 	function setColorPreset(preset: PresetColors) {
 		dispatch("startHistoryTransaction");

-		if (preset === "none") {
+		if (preset === "None") {
 			setNewHSVA(0, 0, 0, 1, true);
-			setColor(createNoneColor());
+			setColor("None");
 		} else {
 			const presetColor = createColor(...PURE_COLORS[preset], 1);
 			const hsv = colorToHSV(presetColor);
@@ -398,18 +407,16 @@
 	// TODO: Replace this temporary usage of the browser eyedropper API, that only works in Chromium-based browsers, with the custom color sampler system used by the Eyedropper tool
 	function eyedropperSupported(): boolean {
 		// TODO: Implement support in the desktop app for OS-level color picking
-		if (isDesktop()) return false;
+		if (isPlatformNative()) return false;

-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		return Boolean((window as any).EyeDropper);
+		return window.EyeDropper !== undefined;
 	}

 	async function activateEyedropperSample() {
 		if (!eyedropperSupported()) return;

 		try {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			const result = await new (window as any).EyeDropper().open();
+			const result = await new EyeDropper().open();
 			dispatch("startHistoryTransaction");
 			setColorCode(result.sRGBHex);
 		} catch {
@@ -427,8 +434,8 @@

 		setColor(color);

-		setNewHSVA(hsv.h, hsv.s, hsv.v, color.alpha, color.none);
-		setOldHSVA(hsv.h, hsv.s, hsv.v, color.alpha, color.none);
+		setNewHSVA(hsv.h, hsv.s, hsv.v, color.alpha, false);
+		setOldHSVA(hsv.h, hsv.s, hsv.v, color.alpha, false);
 	}

 	export function div(): HTMLDivElement | undefined {
@@ -443,14 +450,14 @@
 <FloatingMenu class="color-picker" classes={{ disabled }} {open} on:open {strayCloses} escapeCloses={strayCloses && !gradientSpectrumDragging} {direction} type="Popover" bind:this={self}>
 	<LayoutRow
 		styles={{
-			"--new-color": colorToHexOptionalAlpha(newColor),
+			"--new-color": newColor ? colorToHexOptionalAlpha(newColor) : undefined,
 			"--new-color-contrasting": colorContrastingColor(newColor),
-			"--old-color": colorToHexOptionalAlpha(oldColor),
+			"--old-color": oldColor ? colorToHexOptionalAlpha(oldColor) : undefined,
 			"--old-color-contrasting": colorContrastingColor(oldColor),
 			"--hue-color": colorToRgbCSS(opaqueHueColor),
 			"--hue-color-contrasting": colorContrastingColor(opaqueHueColor),
-			"--opaque-color": colorToHexNoAlpha(colorOpaque(newColor) || createColor(0, 0, 0, 1)),
-			"--opaque-color-contrasting": colorContrastingColor(colorOpaque(newColor) || createColor(0, 0, 0, 1)),
+			"--opaque-color": colorToHexNoAlpha(newColor ? colorOpaque(newColor) : createColor(0, 0, 0, 1)),
+			"--opaque-color-contrasting": colorContrastingColor(newColor ? colorOpaque(newColor) : createColor(0, 0, 0, 1)),
 		}}
 	>
 		{@const hueDescription = "The shade along the spectrum of the rainbow."}
@@ -514,7 +521,7 @@
 					<SpectrumInput
 						{gradient}
 						{disabled}
-						on:gradient={() => dispatch("colorOrGradient", gradient)}
+						on:gradient={() => dispatch("colorOrGradient", gradient ? { Gradient: gradient } : "None")}
 						on:activeMarkerIndexChange={gradientActiveMarkerIndexChange}
 						activeMarkerIndex={activeIndex}
 						activeMarkerIsMidpoint={activeIndexIsMidpoint}
@@ -568,7 +575,7 @@
 				<Separator style="Related" />
 				<LayoutRow>
 					<TextInput
-						value={colorToHexOptionalAlpha(newColor) || "-"}
+						value={newColor ? colorToHexOptionalAlpha(newColor) : "-"}
 						{disabled}
 						on:commitText={({ detail }) => {
 							dispatch("startHistoryTransaction");
@@ -680,7 +687,7 @@
 					<button
 						class="preset-color none"
 						{disabled}
-						on:click={() => setColorPreset("none")}
+						on:click={() => setColorPreset("None")}
 						data-tooltip-label="Set to No Color"
 						data-tooltip-description={disabled ? "Disabled (read-only)." : ""}
 						tabindex="0"
@@ -690,7 +697,7 @@
 				<button
 					class="preset-color black"
 					{disabled}
-					on:click={() => setColorPreset("black")}
+					on:click={() => setColorPreset("Black")}
 					data-tooltip-label="Set to Black"
 					data-tooltip-description={disabled ? "Disabled (read-only)." : ""}
 					tabindex="0"
@@ -699,19 +706,19 @@
 				<button
 					class="preset-color white"
 					{disabled}
-					on:click={() => setColorPreset("white")}
+					on:click={() => setColorPreset("White")}
 					data-tooltip-label="Set to White"
 					data-tooltip-description={disabled ? "Disabled (read-only)." : ""}
 					tabindex="0"
 				></button>
 				<Separator style="Related" />
-				<button class="preset-color pure" {disabled} on:click={setColorPresetSubtile} tabindex="-1">
-					{#each PURE_COLORS_GRAYABLE as [name, color, gray]}
+				<button class="preset-color pure" {disabled} tabindex="-1">
+					{#each PURE_COLORS_GRAYABLE as [preset, color, gray]}
 						<div
-							data-pure-tile={name.toLowerCase()}
+							on:click={() => setColorPreset(preset)}
 							style:--pure-color={color}
 							style:--pure-color-gray={gray}
-							data-tooltip-label={`Set to ${name}`}
+							data-tooltip-label={`Set to ${preset}`}
 							data-tooltip-description={disabled ? "Disabled (read-only)." : ""}
 						></div>
 					{/each}
@@ -20,7 +20,8 @@

 	onMount(() => {
 		// Focus the button which is marked as emphasized, or otherwise the first button, in the popup
-		const emphasizedOrFirstButton = (self?.div?.()?.querySelector("[data-emphasized]") || self?.div?.()?.querySelector("[data-text-button]") || undefined) as HTMLButtonElement | undefined;
+		const button = self?.div?.()?.querySelector("[data-emphasized]") || self?.div?.()?.querySelector("[data-text-button]");
+		const emphasizedOrFirstButton = button instanceof HTMLButtonElement ? button : undefined;
 		emphasizedOrFirstButton?.focus();
 	});
 </script>
@@ -28,8 +29,9 @@
 <!-- TODO: Use https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog for improved accessibility -->
 <FloatingMenu open={true} class="dialog" type="Dialog" direction="Center" bind:this={self} data-dialog>
 	<LayoutRow class="header-area">
-		<!-- `$dialog.icon` class exists to provide special sizing in CSS to specific icons -->
-		<IconLabel icon={$dialog.icon} class={$dialog.icon.toLowerCase()} />
+		{#if $dialog.icon}
+			<IconLabel icon={$dialog.icon} />
+		{/if}
 		<TextLabel>{$dialog.title}</TextLabel>
 	</LayoutRow>
 	<LayoutRow class={`content ${$dialog.title === "Demo Artwork" ? "center" : "" /* TODO: Replace this with a less hacky approach that's compatible with localization/translation */}`}>
@@ -104,10 +106,13 @@
 			.icon-label {
 				width: 24px;
 				height: 24px;
+
+				+ .text-label {
+					margin-left: 12px;
+				}
 			}

 			.text-label {
-				margin-left: 12px;
 				line-height: 24px;
 			}
 		}
@@ -134,7 +139,7 @@
 			}

 			.text-label.multiline {
-				-webkit-user-select: text; // Still required by Safari as of 2025
+				-webkit-user-select: text; // Still required by Safari as of 2026
 				user-select: text;
 			}

@@ -3,7 +3,7 @@
 <script lang="ts">
 	import { createEventDispatcher, tick, onDestroy, onMount } from "svelte";

-	import type { MenuListEntry, MenuDirection } from "@graphite/messages";
+	import type { MenuListEntry, MenuDirection } from "@graphite/../wasm/pkg/graphite_wasm";

 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
@@ -45,7 +45,7 @@
 	let openChildValue: string | undefined = undefined;
 	let search = "";
 	let reactiveEntries = entries;
-	let highlighted = activeEntry as MenuListEntry | undefined;
+	let highlighted: MenuListEntry | undefined = activeEntry;
 	let virtualScrollingEntriesStart = 0;

 	// `watchOpen` is called only when `open` is changed from outside this component
@@ -154,7 +154,7 @@

 	function onScroll(e: Event) {
 		if (!virtualScrollingEntryHeight) return;
-		virtualScrollingEntriesStart = (e.target as HTMLElement)?.scrollTop || 0;
+		virtualScrollingEntriesStart = e.target instanceof HTMLElement ? e.target.scrollTop : 0;
 	}

 	function getChildReference(menuListEntry: MenuListEntry): MenuList | undefined {
@@ -2,7 +2,7 @@
 	import { createEventDispatcher, getContext, onMount } from "svelte";
 	import { SvelteMap } from "svelte/reactivity";

-	import type { FrontendNodeType } from "@graphite/messages";
+	import type { FrontendNodeType } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";

 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext } from "svelte";

+	import type { LabeledShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { LabeledShortcut } from "@graphite/messages";
 	import type { TooltipState } from "@graphite/state-providers/tooltip";

 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
@@ -21,7 +21,10 @@
 	$: shortcut = ((shortcutJSON) => {
 		if (!shortcutJSON) return undefined;
 		try {
-			return JSON.parse(shortcutJSON) as LabeledShortcut;
+			const parsed: LabeledShortcut = JSON.parse(shortcutJSON);
+			if (!Array.isArray(parsed)) return undefined;
+
+			return parsed;
 		} catch {
 			return undefined;
 		}
@@ -1,6 +1,4 @@
 <script lang="ts" context="module">
-	export type MenuType = "Popover" | "Tooltip" | "Dropdown" | "Dialog" | "Cursor";
-
 	/// Prevents the escape key from closing the parent floating menu of the given element.
 	/// This works by momentarily setting the `data-escape-does-not-close` attribute on the parent floating menu element.
 	/// After checking for the Escape key, it checks (in one `setTimeout`) for the attribute and ignores the key if it's present.
@@ -21,7 +19,7 @@
 <script lang="ts">
 	import { onMount, afterUpdate, createEventDispatcher, tick } from "svelte";

-	import type { MenuDirection } from "@graphite/messages";
+	import type { MenuDirection } from "@graphite/../wasm/pkg/graphite_wasm";
 	import { browserVersion } from "@graphite/utility-functions/platform";

 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -38,7 +36,7 @@
 	export { styleName as style };
 	export let styles: Record<string, string | number | undefined> = {};
 	export let open: boolean;
-	export let type: MenuType;
+	export let type: "Popover" | "Tooltip" | "Dropdown" | "Dialog" | "Cursor";
 	export let direction: MenuDirection = "Bottom";
 	export let windowEdgeMargin = 6;
 	export let scrollableY = false;
@@ -309,7 +307,7 @@

 	function pointerMoveHandler(e: PointerEvent) {
 		// This element and the element being hovered over
-		const target = e.target as HTMLElement | undefined;
+		const target = e.target instanceof HTMLElement ? e.target : undefined;

 		// Get the spawner element (that which is clicked to spawn this floating menu)
 		// Assumes the spawner is a sibling of this FloatingMenu component
@@ -398,9 +396,9 @@
 			else {
 				const foundTarget = filteredListOfDescendantSpawners.find((item: Element): boolean => item === targetSpawner);
 				// If the currently hovered spawner is one of the found valid hover-transferrable spawners, swap to it by clicking on it
-				if (foundTarget) {
+				if (foundTarget instanceof HTMLElement) {
 					dispatch("open", false);
-					(foundTarget as HTMLElement).click();
+					foundTarget.click();
 				}

 				// In either case, we are done searching
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ActionShortcut } from "@graphite/messages";
+	import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";

 	let className = "";
 	export { className as class };
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ActionShortcut } from "@graphite/messages";
+	import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";

 	let className = "";
 	export { className as class };
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from "svelte";

+	import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { Layout } from "@graphite/messages";
 	import { patchLayout } from "@graphite/utility-functions/widgets";

 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -1,16 +1,16 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy, tick } from "svelte";

+	import type { Color, MenuDirection, MouseCursorIcon } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { Color, FrontendMessages, MenuDirection } from "@graphite/messages";
 	import type { AppWindowState } from "@graphite/state-providers/app-window";
 	import type { DocumentState } from "@graphite/state-providers/document";
-	import { isColor, createColor } from "@graphite/utility-functions/colors";
+	import type { MessageBody } from "@graphite/subscription-router";
+	import { fillChoiceColor, createColor } from "@graphite/utility-functions/colors";
 	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 { isWidgetSpanRow } from "@graphite/utility-functions/widgets";

 	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
 	import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@graphite/components/floating-menus/EyedropperPreview.svelte";
@@ -21,8 +21,6 @@
 	import ScrollbarInput from "@graphite/components/widgets/inputs/ScrollbarInput.svelte";
 	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";

-	type DisplayEditableTextbox = FrontendMessages["DisplayEditableTextbox"];
-
 	let rulerHorizontal: RulerInput | undefined;
 	let rulerVertical: RulerInput | undefined;
 	let viewport: HTMLDivElement | undefined;
@@ -35,7 +33,7 @@
 	// Interactive text editing
 	let textInput: undefined | HTMLDivElement = undefined;
 	let showTextInput: boolean;
-	let textInputMatrix: number[];
+	let textInputMatrix: [number, number, number, number, number, number];

 	// Scrollbars
 	let scrollbarPos = { x: 0.5, y: 0.5 };
@@ -93,7 +91,7 @@
 	$: canvasHeightScaledRoundedToEven = canvasHeightScaled && (canvasHeightScaled % 2 === 1 ? canvasHeightScaled + 1 : canvasHeightScaled);

 	$: toolShelfTotalToolsAndSeparators = ((layoutGroup) => {
-		if (!isWidgetSpanRow(layoutGroup)) return undefined;
+		if (!layoutGroup || !("Row" in layoutGroup)) return undefined;

 		let totalSeparators = 0;
 		let totalToolRowsFor1Columns = 0;
@@ -108,8 +106,8 @@
 		};

 		let toolsInCurrentGroup = 0;
-		layoutGroup.rowWidgets.forEach((widget) => {
-			if (widget.props.kind === "Separator") {
+		layoutGroup.Row.rowWidgets.forEach((widget) => {
+			if ("Separator" in widget.widget) {
 				totalSeparators += 1;
 				tally();
 			} else {
@@ -176,8 +174,7 @@
 			const canvasName = placeholder.getAttribute("data-canvas-placeholder");
 			if (!canvasName) return;
 			// Get the canvas element from the global storage
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			let canvas = (window as any).imageCanvases[canvasName];
+			let canvas = window.imageCanvases[canvasName];

 			// Get logical dimensions from foreignObject parent (set by backend)
 			const foreignObject = placeholder.parentElement;
@@ -295,10 +292,9 @@
 	}

 	// Update mouse cursor icon
-	export function updateMouseCursor(cursor: string) {
-		const mouseCursorIconCSSNames: Record<string, string> = {
+	export function updateMouseCursor(cursor: MouseCursorIcon) {
+		const mouseCursorIconCSSNames: Record<MouseCursorIcon, string> = {
 			Default: "default",
-			Alias: "alias",
 			None: "none",
 			ZoomIn: "zoom-in",
 			ZoomOut: "zoom-out",
@@ -312,7 +308,7 @@
 			NWSEResize: "nwse-resize",
 			Rotate: "custom-rotate",
 		};
-		let cursorString = mouseCursorIconCSSNames[cursor] || mouseCursorIconCSSNames["Alias"];
+		let cursorString = mouseCursorIconCSSNames[cursor] || "alias";

 		// This isn't very clean but it's good enough for now until we need more icons, then we can build something more robust (consider blob URLs)
 		if (cursor === "Rotate") {
@@ -345,7 +341,7 @@
 		editor.handle.onChangeText(textCleaned, false);
 	}

-	export async function displayEditableTextbox(data: DisplayEditableTextbox) {
+	export async function displayEditableTextbox(data: MessageBody<"DisplayEditableTextbox">) {
 		showTextInput = true;

 		await tick();
@@ -377,9 +373,9 @@

 		textInputMatrix = data.transform;

-		const bytes = new Uint8Array(data.fontData);
-		if (bytes.length > 0) {
-			window.document.fonts.add(new FontFace("text-font", bytes));
+		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));
 			textInput.style.fontFamily = "text-font";
 		}

@@ -423,7 +419,8 @@
 	}

 	function gradientStopPickerDirection(position: { x: number; y: number } | undefined, viewport: HTMLDivElement | undefined): MenuDirection {
-		const picker = (gradientStopPicker?.div()?.querySelector("[data-floating-menu-content]") || undefined) as HTMLElement | undefined;
+		const element = gradientStopPicker?.div()?.querySelector("[data-floating-menu-content]");
+		const picker = element instanceof HTMLElement ? element : undefined;
 		if (!picker || !position || !viewport) return "Bottom";

 		const roomRight = position.x + picker.offsetWidth - viewport.clientWidth;
@@ -473,7 +470,7 @@
 		// Gradient stop color picker
 		editor.subscriptions.subscribeFrontendMessage("UpdateGradientStopColorPickerPosition", (data) => {
 			gradientStopPickerColor = data.color;
-			gradientStopPickerPosition = { x: data.x, y: data.y };
+			gradientStopPickerPosition = { x: data.position[0], y: data.position[1] };
 		});

 		// Update scrollbars and rulers
@@ -511,9 +508,9 @@
 		editor.subscriptions.subscribeFrontendMessage("DisplayEditableTextboxUpdateFontData", async (data) => {
 			await tick();

-			const fontData = new Uint8Array(data.fontData);
-			if (fontData.length > 0 && textInput) {
-				window.document.fonts.add(new FontFace("text-font", fontData));
+			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));
 				textInput.style.fontFamily = "text-font";
 			}
 		});
@@ -615,11 +612,10 @@
 									gradientStopPickerColor = undefined;
 								}
 							}}
-							colorOrGradient={gradientStopPickerColor || createColor(0, 0, 0, 1)}
+							colorOrGradient={{ Solid: gradientStopPickerColor || createColor(0, 0, 0, 1) }}
 							on:colorOrGradient={({ detail }) => {
-								if (isColor(detail)) {
-									editor.handle.updateGradientStopColor(detail.red, detail.green, detail.blue, detail.alpha);
-								}
+								const color = fillChoiceColor(detail);
+								if (color) editor.handle.updateGradientStopColor(color.red, color.green, color.blue, color.alpha);
 							}}
 							on:startHistoryTransaction={() => editor.handle.startGradientStopColorTransaction()}
 							on:commitHistoryTransaction={() => editor.handle.commitGradientStopColorTransaction()}
@@ -2,8 +2,8 @@
 	import { getContext, onMount, onDestroy, tick } from "svelte";
 	import { SvelteMap } from "svelte/reactivity";

+	import type { LayerPanelEntry, LayerStructureEntry, Layout } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { LayerPanelEntry, LayerStructureEntry, Layout } from "@graphite/messages";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 	import type { TooltipState } from "@graphite/state-providers/tooltip";
 	import { pasteFile } from "@graphite/utility-functions/files";
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from "svelte";

+	import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { Layout } from "@graphite/messages";
 	import { patchLayout } from "@graphite/utility-functions/widgets";

 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from "svelte";

+	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 { Layout } from "@graphite/messages";
 	import { pasteFile } from "@graphite/utility-functions/files";
-	import { isDesktop } from "@graphite/utility-functions/platform";
 	import { patchLayout } from "@graphite/utility-functions/widgets";

 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -51,7 +51,7 @@
 	</LayoutCol>
 	<LayoutCol class="bottom-message">
 		<TextLabel italic={true} disabled={true}>
-			{#if isDesktop()}
+			{#if isPlatformNative()}
 				You are testing Release Candidate 3 of the 1.0 desktop release. Please regularly check Discord for the next testing build and report issues you encounter.
 			{/if}
 		</TextLabel>
@@ -3,8 +3,8 @@
 	import { cubicInOut } from "svelte/easing";
 	import { fade } from "svelte/transition";

+	import type { FrontendGraphInput, FrontendGraphOutput, FrontendNode } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { FrontendGraphInput, FrontendGraphOutput, FrontendNode } from "@graphite/messages";
 	import type { DocumentState } from "@graphite/state-providers/document";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";

@@ -80,7 +80,8 @@

 	function setEditingImportName(event: Event) {
 		if (editingNameImportIndex !== undefined) {
-			let text = (event.target as HTMLInputElement)?.value;
+			if (!(event.target instanceof HTMLInputElement)) return;
+			let text = event.target.value;
 			editor.handle.setImportName(editingNameImportIndex, text);
 			editingNameImportIndex = undefined;
 		}
@@ -88,7 +89,8 @@

 	function setEditingExportName(event: Event) {
 		if (editingNameExportIndex !== undefined) {
-			let text = (event.target as HTMLInputElement)?.value;
+			if (!(event.target instanceof HTMLInputElement)) return;
+			let text = event.target.value;
 			editor.handle.setExportName(editingNameExportIndex, text);
 			editingNameExportIndex = undefined;
 		}
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { Layout, LayoutTarget } from "@graphite/messages";
-	import { isWidgetSpanColumn, isWidgetSpanRow, isWidgetTable, isWidgetSection } from "@graphite/utility-functions/widgets";
+	import type { Layout, LayoutTarget } from "@graphite/../wasm/pkg/graphite_wasm";

 	import WidgetSection from "@graphite/components/widgets/WidgetSection.svelte";
 	import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
@@ -14,12 +13,14 @@
 </script>

 {#each layout as layoutGroup}
-	{#if isWidgetSpanRow(layoutGroup) || isWidgetSpanColumn(layoutGroup)}
-		<WidgetSpan widgetData={layoutGroup} {layoutTarget} class={className} {classes} />
-	{:else if isWidgetSection(layoutGroup)}
-		<WidgetSection widgetData={layoutGroup} {layoutTarget} class={className} {classes} />
-	{:else if isWidgetTable(layoutGroup)}
-		<WidgetTable widgetData={layoutGroup} {layoutTarget} unstyled={layoutGroup.unstyled} />
+	{#if "Row" in layoutGroup}
+		<WidgetSpan direction="row" widgets={layoutGroup.Row.rowWidgets} {layoutTarget} class={className} {classes} />
+	{:else if "Column" in layoutGroup}
+		<WidgetSpan direction="column" widgets={layoutGroup.Column.columnWidgets} {layoutTarget} class={className} {classes} />
+	{:else if "Section" in layoutGroup}
+		<WidgetSection widgetData={layoutGroup.Section} {layoutTarget} class={className} {classes} />
+	{:else if "Table" in layoutGroup}
+		<WidgetTable widgetData={layoutGroup.Table} {layoutTarget} />
 	{/if}
 {/each}

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { getContext } from "svelte";

+	import type { LayoutTarget, WidgetSection as WidgetSectionData } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { WidgetSection as WidgetSectionData, LayoutTarget } from "@graphite/messages";
-	import { isWidgetSpanRow, isWidgetSection } from "@graphite/utility-functions/widgets";

 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
@@ -62,10 +61,10 @@
 	{#if expanded}
 		<LayoutCol class="body" data-block-hover-transfer>
 			{#each widgetData.layout as layoutGroup}
-				{#if isWidgetSpanRow(layoutGroup)}
-					<WidgetSpan widgetData={layoutGroup} {layoutTarget} />
-				{:else if isWidgetSection(layoutGroup)}
-					<svelte:self widgetData={layoutGroup} {layoutTarget} />
+				{#if "Row" in layoutGroup}
+					<WidgetSpan direction="row" widgets={layoutGroup.Row.rowWidgets} {layoutTarget} />
+				{:else if "Section" in layoutGroup}
+					<svelte:self widgetData={layoutGroup.Section} {layoutTarget} />
 				{/if}
 			{/each}
 		</LayoutCol>
@@ -1,11 +1,10 @@
 <script lang="ts">
 	import { getContext } from "svelte";

+	import type { LayoutTarget, Widget, WidgetInstance } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { LayoutTarget, WidgetInstance, WidgetPropsNames, WidgetPropsSet, WidgetTypes, WidgetSpanColumn, WidgetSpanRow } from "@graphite/messages";
 	import { parseFillChoice } from "@graphite/utility-functions/colors";
 	import { debouncer } from "@graphite/utility-functions/debounce";
-	import { isWidgetSpanColumn, isWidgetSpanRow, createLayoutGroup } from "@graphite/utility-functions/widgets";

 	import NodeCatalog from "@graphite/components/floating-menus/NodeCatalog.svelte";
 	import BreadcrumbTrailButtons from "@graphite/components/widgets/buttons/BreadcrumbTrailButtons.svelte";
@@ -30,9 +29,17 @@
 	import ShortcutLabel from "@graphite/components/widgets/labels/ShortcutLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";

+	// Extract the discriminant key names from the Widget tagged enum union (e.g. "TextButton" | "CheckboxInput" | ...)
+	type WidgetKind = Widget extends infer T ? (T extends Record<infer K, unknown> ? K & string : never) : never;
+	// Extract the props type for a specific widget kind (e.g. WidgetProps<"TextButton"> gives the Wasm-generated TextButton interface)
+	type WidgetProps<K extends WidgetKind> = Extract<Widget, Record<K, unknown>>[K];
+	// A Widget tagged enum unwrapped into a correlated [kind, props] tuple
+	type UnwrappedWidget = { [K in WidgetKind]: [kind: K, props: WidgetProps<K>] }[WidgetKind];
+
 	const editor = getContext<Editor>("editor");

-	export let widgetData: WidgetSpanRow | WidgetSpanColumn;
+	export let widgets: WidgetInstance[];
+	export let direction: "row" | "column";
 	export let layoutTarget: LayoutTarget;

 	let className = "";
@@ -45,21 +52,6 @@
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
 		.join(" ");

-	$: direction = watchDirection(widgetData);
-	$: widgets = watchWidgets(widgetData);
-
-	function watchDirection(widgetData: WidgetSpanRow | WidgetSpanColumn): "row" | "column" | undefined {
-		if (isWidgetSpanRow(widgetData)) return "row";
-		if (isWidgetSpanColumn(widgetData)) return "column";
-	}
-
-	function watchWidgets(widgetData: WidgetSpanRow | WidgetSpanColumn): WidgetInstance[] {
-		let widgets: WidgetInstance[] = [];
-		if (isWidgetSpanRow(widgetData)) widgets = widgetData.rowWidgets;
-		else if (isWidgetSpanColumn(widgetData)) widgets = widgetData.columnWidgets;
-		return widgets;
-	}
-
 	function widgetValueCommit(widgetIndex: number, value: unknown) {
 		editor.handle.widgetValueCommit(layoutTarget, widgets[widgetIndex].widgetId, value);
 	}
@@ -72,32 +64,66 @@
 		editor.handle.widgetValueCommitAndUpdate(layoutTarget, widgets[widgetIndex].widgetId, value, resendWidget);
 	}

-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	function exclude(props: WidgetPropsSet, additional?: string[]): Record<string, any> {
-		const exclusions = new Set(["kind", ...(additional || [])]);
-		return Object.fromEntries(Object.entries(props).filter(([key]) => !exclusions.has(key)));
+	// Extracts the kind and props from a Widget tagged enum, validated against the widget registry.
+	// The overload declares the precise correlated return type while the implementation uses broader types.
+	function unwrapWidget(widgetInstance: WidgetInstance): UnwrappedWidget | undefined;
+	function unwrapWidget(widgetInstance: WidgetInstance) {
+		const entry = Object.entries(widgetInstance.widget)[0];
+		if (!entry || !(entry[0] in widgetResolvers)) return undefined;
+		return entry;
 	}

-	type WidgetConfig = {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		component: any;
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		getProps(props: WidgetPropsSet, widgetIndex: number): Record<string, any> | undefined;
-		getSlotContent?(props: WidgetPropsSet): string;
+	// Resolves the unwrapped widget through the registry to get its Svelte component and computed props.
+	function resolveWidget([kind, widgetProps]: UnwrappedWidget, widgetIndex: number) {
+		const config = widgetResolvers[kind];
+		return {
+			component: config.component,
+			props: config.getProps(widgetProps, widgetIndex),
+			slot: config.getSlotContent?.(widgetProps),
+		};
+	}
+
+	// Svelte has no variance-safe base type for component constructors
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	type SvelteComponentAny = any;
+
+	type WidgetConfig<K extends WidgetKind> = {
+		component: SvelteComponentAny;
+		getProps(props: WidgetProps<K>, widgetIndex: number): Record<string, unknown> | undefined;
+		getSlotContent?(props: WidgetProps<K>): string;
 	};

-	const widgetRegistry: Record<WidgetPropsNames, WidgetConfig> = {
+	// The union of all individual widget props types (distributed across each WidgetKind member)
+	type AnyWidgetProps = { [K in WidgetKind]: WidgetProps<K> }[WidgetKind];
+
+	// Uniform view for runtime lookup — widens the per-kind config types to a single type that
+	// accepts any widget props, avoiding the correlated unions problem at the call site
+	type WidgetResolver = {
+		component: SvelteComponentAny;
+		getProps(props: AnyWidgetProps, widgetIndex: number): Record<string, unknown> | undefined;
+		getSlotContent?(props: AnyWidgetProps): string;
+	};
+
+	// Overload: callers provide the precise mapped type (preserving per-entry type inference).
+	// Implementation: receives/returns the widened uniform type (no cast needed).
+	// Method syntax bivariance makes WidgetConfig<K> assignable to WidgetResolver in the overload check.
+	function createWidgetResolvers(registry: { [K in WidgetKind]: WidgetConfig<K> }): Record<WidgetKind, WidgetResolver>;
+	function createWidgetResolvers(registry: Record<WidgetKind, WidgetResolver>): Record<WidgetKind, WidgetResolver> {
+		return registry;
+	}
+
+	const widgetResolvers = createWidgetResolvers({
 		CheckboxInput: {
 			component: CheckboxInput,
-			getProps: (props: WidgetTypes["CheckboxInput"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				$$events: { checked: (e: CustomEvent) => widgetValueCommitAndUpdate(index, e.detail, true) },
 			}),
 		},
 		ColorInput: {
 			component: ColorInput,
-			getProps: (props: WidgetTypes["ColorInput"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				value: parseFillChoice(props.value),
 				$$events: {
 					value: (e: CustomEvent) => widgetValueUpdate(index, e.detail, false),
@@ -108,8 +134,8 @@
 		CurveInput: {
 			// TODO: CurvesInput is currently unused
 			component: CurveInput,
-			getProps: (props: WidgetTypes["CurveInput"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				$$events: {
 					value: (e: CustomEvent) => debouncer((value: unknown) => widgetValueCommitAndUpdate(index, value, false), { debounceTime: 120 }).debounceUpdateValue(e.detail),
 				},
@@ -117,8 +143,8 @@
 		},
 		DropdownInput: {
 			component: DropdownInput,
-			getProps: (props: WidgetTypes["DropdownInput"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				$$events: {
 					hoverInEntry: (e: CustomEvent) => widgetValueUpdate(index, e.detail, false),
 					hoverOutEntry: (e: CustomEvent) => widgetValueUpdate(index, e.detail, false),
@@ -128,51 +154,51 @@
 		},
 		ParameterExposeButton: {
 			component: ParameterExposeButton,
-			getProps: (props: WidgetTypes["ParameterExposeButton"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				action: () => widgetValueCommitAndUpdate(index, undefined, true),
 			}),
 		},
 		IconButton: {
 			component: IconButton,
-			getProps: (props: WidgetTypes["IconButton"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				action: () => widgetValueCommitAndUpdate(index, undefined, true),
 			}),
 		},
 		IconLabel: {
 			component: IconLabel,
-			getProps: (props: WidgetTypes["IconLabel"]) => exclude(props),
+			getProps: (props) => ({ ...props }),
 		},
 		ShortcutLabel: {
 			component: ShortcutLabel,
-			getProps: (props: WidgetTypes["ShortcutLabel"]) => {
+			getProps: (props) => {
 				if (!props.shortcut) return undefined;
-				return exclude(props);
+				return { ...props };
 			},
 		},
 		ImageLabel: {
 			component: ImageLabel,
-			getProps: (props: WidgetTypes["ImageLabel"]) => exclude(props),
+			getProps: (props) => ({ ...props }),
 		},
 		ImageButton: {
 			component: ImageButton,
-			getProps: (props: WidgetTypes["ImageButton"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				action: () => widgetValueCommitAndUpdate(index, undefined, true),
 			}),
 		},
 		NodeCatalog: {
 			component: NodeCatalog,
-			getProps: (props: WidgetTypes["NodeCatalog"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				$$events: { selectNodeType: (e: CustomEvent) => widgetValueCommitAndUpdate(index, e.detail, false) },
 			}),
 		},
 		NumberInput: {
 			component: NumberInput,
-			getProps: (props: WidgetTypes["NumberInput"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				incrementCallbackIncrease: () => widgetValueCommitAndUpdate(index, "Increment", false),
 				incrementCallbackDecrease: () => widgetValueCommitAndUpdate(index, "Decrement", false),
 				$$events: {
@@ -183,80 +209,80 @@
 		},
 		ReferencePointInput: {
 			component: ReferencePointInput,
-			getProps: (props: WidgetTypes["ReferencePointInput"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				$$events: { value: (e: CustomEvent) => widgetValueCommitAndUpdate(index, e.detail, true) },
 			}),
 		},
 		PopoverButton: {
 			component: PopoverButton,
-			getProps: (props: WidgetTypes["PopoverButton"]) => ({
-				...exclude(props),
+			getProps: (props) => ({
+				...props,
 				layoutTarget,
-				popoverLayout: props.popoverLayout.map(createLayoutGroup),
 			}),
 		},
 		RadioInput: {
 			component: RadioInput,
-			getProps: (props: WidgetTypes["RadioInput"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				$$events: { selectedIndex: (e: CustomEvent) => widgetValueCommitAndUpdate(index, e.detail, true) },
 			}),
 		},
 		Separator: {
 			component: Separator,
-			getProps: (props: WidgetTypes["Separator"]) => exclude(props),
+			getProps: (props) => ({ ...props }),
 		},
 		WorkingColorsInput: {
 			component: WorkingColorsInput,
-			getProps: (props: WidgetTypes["WorkingColorsInput"]) => exclude(props),
+			getProps: (props) => ({ ...props }),
 		},
 		TextAreaInput: {
 			component: TextAreaInput,
-			getProps: (props: WidgetTypes["TextAreaInput"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				$$events: { commitText: (e: CustomEvent) => widgetValueCommitAndUpdate(index, e.detail, false) },
 			}),
 		},
 		TextButton: {
 			component: TextButton,
-			getProps: (props: WidgetTypes["TextButton"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				action: () => widgetValueCommitAndUpdate(index, [], true),
 				$$events: { selectedEntryValuePath: (e: CustomEvent) => widgetValueCommitAndUpdate(index, e.detail, false) },
 			}),
 		},
 		BreadcrumbTrailButtons: {
 			component: BreadcrumbTrailButtons,
-			getProps: (props: WidgetTypes["BreadcrumbTrailButtons"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				action: (breadcrumbIndex: number) => widgetValueCommitAndUpdate(index, breadcrumbIndex, true),
 			}),
 		},
 		TextInput: {
 			component: TextInput,
-			getProps: (props: WidgetTypes["TextInput"], index) => ({
-				...exclude(props),
+			getProps: (props, index) => ({
+				...props,
 				$$events: { commitText: (e: CustomEvent) => widgetValueCommitAndUpdate(index, e.detail, true) },
 			}),
 		},
 		TextLabel: {
 			component: TextLabel,
-			getProps: (props: WidgetTypes["TextLabel"]) => exclude(props, ["value"]),
-			getSlotContent: (props: WidgetTypes["TextLabel"]) => props.value,
+			getProps: ({ value: _, ...rest }) => rest,
+			getSlotContent: (props) => props.value,
 		},
-	};
+	});
 </script>

 <div class={`widget-span ${className} ${extraClasses}`.trim()} class:narrow class:row={direction === "row"} class:column={direction === "column"}>
 	{#each widgets as widget, widgetIndex}
-		{@const config = widgetRegistry[widget.props.kind]}
-		{@const props = config?.getProps(widget.props, widgetIndex)}
-		{@const slot = config?.getSlotContent?.(widget.props)}
-		{#if props !== undefined && slot !== undefined}
-			<svelte:component this={config.component} {...props}>{slot}</svelte:component>
-		{:else if props !== undefined}
-			<svelte:component this={config.component} {...props} />
+		{@const unwrapped = unwrapWidget(widget)}
+		{#if unwrapped}
+			{@const { component, props, slot } = resolveWidget(unwrapped, widgetIndex)}
+			{#if props !== undefined && slot !== undefined}
+				<svelte:component this={component} {...props}>{slot}</svelte:component>
+			{:else if props !== undefined}
+				<svelte:component this={component} {...props} />
+			{/if}
 		{/if}
 	{/each}
 </div>
@@ -1,22 +1,21 @@
 <script lang="ts">
-	import type { LayoutTarget, WidgetTable as WidgetTableData } from "@graphite/messages";
+	import type { LayoutTarget, WidgetTable } from "@graphite/../wasm/pkg/graphite_wasm";

 	import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";

-	export let widgetData: WidgetTableData;
+	export let widgetData: WidgetTable;
 	export let layoutTarget: LayoutTarget;
-	export let unstyled = false;

 	$: columns = widgetData.tableWidgets.length > 0 ? widgetData.tableWidgets[0].length : 0;
 </script>

-<table class:unstyled>
+<table class:unstyled={widgetData.unstyled}>
 	<tbody>
 		{#each widgetData.tableWidgets as row}
 			<tr>
 				{#each row as cell}
 					<td colspan={row.length < columns ? columns - row.length + 1 : undefined}>
-						<WidgetSpan widgetData={{ rowWidgets: [cell] }} {layoutTarget} narrow={true} />
+						<WidgetSpan direction="row" widgets={[cell]} {layoutTarget} narrow={true} />
 					</td>
 				{/each}
 			</tr>
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ActionShortcut } from "@graphite/messages";
+	import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";

 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
@@ -1,6 +1,6 @@
 <script lang="ts">
+	import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { IconName, IconSize } from "@graphite/icons";
-	import type { ActionShortcut } from "@graphite/messages";

 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ActionShortcut } from "@graphite/messages";
+	import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
 	import { IMAGE_BASE64_STRINGS } from "@graphite/utility-functions/images";

 	let className = "";
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { FrontendGraphDataType, ActionShortcut } from "@graphite/messages";
+	import type { FrontendGraphDataType, ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";

 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";

@@ -1,8 +1,7 @@
 <script lang="ts">
+	import type { MenuDirection, ActionShortcut, Layout, LayoutTarget } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { IconName, PopoverButtonStyle } from "@graphite/icons";

-	import type { MenuDirection, ActionShortcut, Layout, LayoutTarget } from "@graphite/messages";
-
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";

+	import type { MenuListEntry, ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { IconName } from "@graphite/icons";
-	import type { MenuListEntry, ActionShortcut } from "@graphite/messages";

 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import ConditionalWrapper from "@graphite/components/layout/ConditionalWrapper.svelte";
@@ -53,7 +53,7 @@
 		}

 		// Focus the target so that keyboard inputs are sent to the dropdown
-		(e.target as HTMLElement | undefined)?.focus();
+		if (e.target instanceof HTMLElement) e.target.focus();

 		// Open the menu list floating menu
 		if (self) self.open = true;
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";

+	import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { IconName } from "@graphite/icons";
-	import type { ActionShortcut } from "@graphite/messages";

 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
@@ -12,7 +12,7 @@

 	// Content
 	export let checked = false;
-	export let icon: IconName = "Checkmark";
+	export let icon: IconName | undefined = undefined;
 	export let forLabel: bigint | undefined = undefined;
 	export let disabled = false;
 	// Tooltips
@@ -23,7 +23,7 @@
 	let inputElement: HTMLInputElement | undefined;

 	$: id = forLabel !== undefined ? String(forLabel) : backupId;
-	$: displayIcon = (!checked && icon === "Checkmark" ? "Empty12px" : icon) as IconName;
+	$: displayIcon = !checked && (!icon || icon === "Checkmark") ? "Empty12px" : icon || "Checkmark";

 	export function isChecked() {
 		return checked;
@@ -34,8 +34,8 @@
 	}

 	function toggleCheckboxFromLabel(e: KeyboardEvent) {
-		const target = (e.target || undefined) as HTMLLabelElement | undefined;
-		const previousSibling = (target?.previousSibling || undefined) as HTMLInputElement | undefined;
+		const target = e.target instanceof HTMLLabelElement ? e.target : undefined;
+		const previousSibling = target?.previousSibling instanceof HTMLInputElement ? target.previousSibling : undefined;
 		previousSibling?.click();
 	}
 </script>
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";

-	import type { FillChoice, MenuDirection, ActionShortcut } from "@graphite/messages";
-	import type { Color } from "@graphite/messages";
-	import { contrastingOutlineFactor, isColor, isGradient, colorToHexOptionalAlpha, gradientToLinearGradientCSS } from "@graphite/utility-functions/colors";
+	import type { FillChoice, MenuDirection, ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
+	import { contrastingOutlineFactor, fillChoiceColor, fillChoiceGradientStops, colorToHexOptionalAlpha, gradientToLinearGradientCSS } from "@graphite/utility-functions/colors";

 	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -27,9 +26,15 @@

 	$: outlineFactor = contrastingOutlineFactor(value, ["--color-1-nearblack", "--color-3-darkgray"], 0.01);
 	$: outlined = outlineFactor > 0.0001;
-	$: chosenGradient = isGradient(value) ? gradientToLinearGradientCSS(value) : `linear-gradient(${colorToHexOptionalAlpha(value)}, ${colorToHexOptionalAlpha(value)})`;
-	$: none = isColor(value) ? value.none : false;
-	$: transparency = isGradient(value) ? value.color.some((color: Color) => color.alpha < 1) : value.alpha < 1;
+	$: gradientStops = fillChoiceGradientStops(value);
+	$: solidColor = fillChoiceColor(value);
+	$: chosenGradient = gradientStops
+		? gradientToLinearGradientCSS(gradientStops)
+		: solidColor
+			? `linear-gradient(${colorToHexOptionalAlpha(solidColor)}, ${colorToHexOptionalAlpha(solidColor)})`
+			: undefined;
+	$: none = value === "None";
+	$: transparency = gradientStops ? gradientStops.color.some((color) => color.alpha < 1) : solidColor ? solidColor.alpha < 1 : false;
 </script>

 <LayoutCol class="color-button" classes={{ open, disabled, narrow, none, transparency, outlined, "direction-top": menuDirection === "Top" }} {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";

-	import type { Curve, CurveManipulatorGroup, ActionShortcut } from "@graphite/messages";
+	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";
@@ -1,14 +1,25 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";

-	import type { MenuListEntry, ActionShortcut } from "@graphite/messages";
+	import type { MenuListEntry, ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";

 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";

-	const DASH_ENTRY = { value: "", label: "-" };
+	const DASH_ENTRY: MenuListEntry = {
+		value: "",
+		label: "-",
+		icon: undefined,
+		disabled: false,
+		children: [],
+		childrenHash: 0n,
+		font: undefined,
+		tooltipLabel: "",
+		tooltipDescription: "",
+		tooltipShortcut: undefined,
+	};

 	const dispatch = createEventDispatcher<{ selectedIndex: number; hoverInEntry: number; hoverOutEntry: number }>();

@@ -49,13 +60,13 @@
 	}

 	// Called only when `selectedIndex` is changed from outside this component
-	function watchSelectedIndex(_?: typeof selectedIndex) {
+	function watchSelectedIndex(_: typeof selectedIndex) {
 		activeEntrySkipWatcher = true;
 		activeEntry = makeActiveEntry();
 	}

 	// Called only when `entries` is changed from outside this component
-	function watchEntries(_?: typeof entries) {
+	function watchEntries(_: typeof entries) {
 		activeEntrySkipWatcher = true;
 		activeEntry = makeActiveEntry();
 	}
@@ -102,7 +113,7 @@
 	}

 	function unFocusDropdownBox(e: FocusEvent) {
-		const blurTarget = (e.target as HTMLDivElement | undefined)?.closest("[data-dropdown-input]") || undefined;
+		const blurTarget = (e.target instanceof Element ? e.target.closest("[data-dropdown-input]") : undefined) || undefined;
 		if (blurTarget !== self?.div?.()) open = false;
 	}
 </script>
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";

-	import type { ActionShortcut } from "@graphite/messages";
+	import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
 	import { operatingSystem } from "@graphite/utility-functions/platform";

 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount, onDestroy, getContext } from "svelte";

-	import { evaluateMathExpression } from "@graphite/../wasm/pkg/graphite_wasm";
+	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 type { NumberInputMode, NumberInputIncrementBehavior, ActionShortcut } from "@graphite/messages";
-	import { browserVersion, isDesktop } from "@graphite/utility-functions/platform";
+	import { browserVersion } from "@graphite/utility-functions/platform";

 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
 	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
@@ -43,8 +43,8 @@
 	export let isInteger = false;
 	/// `incrementBehavior` is only applicable with a `mode` of "Increment".
 	/// "Add"/"Multiply": The value is added or multiplied by `step`.
-	/// "None": the increment arrows are not shown.
 	/// "Callback": the functions `incrementCallbackIncrease` and `incrementCallbackDecrease` call custom behavior.
+	/// "None": the increment arrows are not shown.
 	export let incrementBehavior: NumberInputIncrementBehavior = "Add";
 	export let displayDecimalPlaces = 2;
 	export let unit = "";
@@ -364,7 +364,7 @@
 		// Because "mousemove" (and similarly, the "pointermove" event we use) is defined as not being a user-initiated "engagement gesture" event,
 		// Safari never lets us to enter pointer lock while the mouse button is held down and we are awaiting movement to begin dragging the slider.
 		const isSafari = browserVersion().toLowerCase().includes("safari");
-		const usePointerLock = !isSafari && !isDesktop();
+		const usePointerLock = !isSafari && !isPlatformNative();

 		// On Safari, we use a workaround involving an alternative strategy where we hide the cursor while it's within the web page
 		// (but we can't hide it when it ventures outside the page), taking advantage of a separate (helpful) Safari bug where it
@@ -377,7 +377,7 @@

 		// Enter dragging state
 		if (usePointerLock) target.requestPointerLock();
-		if (isDesktop()) {
+		if (isPlatformNative()) {
 			editor.handle.appWindowPointerLock();
 		}
 		initialValueBeforeDragging = value;
@@ -427,11 +427,11 @@
 			}
 			ignoredFirstMovement = true;
 		};
-		// On desktop we don't get `pointermove` events while in pointer lock (cef doesn't support pointer lock).
+		// On desktop we don't get `pointermove` events while in pointer lock (CEF doesn't support pointer lock).
 		// We have to listen for our custom `pointerlockmove` events instead.
-		const pointerLockMove = (e: Event) => {
-			if (ignoredFirstMovement && initialValueBeforeDragging !== undefined && e instanceof CustomEvent) {
-				const delta = (e.detail as { x: number }).x;
+		const pointerLockMove = ({ detail }: WindowEventMap["pointerlockmove"]) => {
+			if (ignoredFirstMovement && initialValueBeforeDragging !== undefined) {
+				const delta = detail.x;
 				pointerLockMoveUpdate(delta, shiftKeyDown, ctrlKeyDown, initialValueBeforeDragging);
 			}
 			ignoredFirstMovement = true;
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";

-	import type { RadioEntryData } from "@graphite/messages";
+	import type { RadioEntryData } from "@graphite/../wasm/pkg/graphite_wasm";

 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";

-	import type { ReferencePoint, ActionShortcut } from "@graphite/messages";
+	import type { ReferencePoint, ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";

 	const dispatch = createEventDispatcher<{ value: ReferencePoint }>();

@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-	export type RulerDirection = "Horizontal" | "Vertical";
-</script>
-
 <script lang="ts">
 	import { onMount } from "svelte";

@@ -10,6 +6,8 @@
 	const MINOR_MARK_THICKNESS = 6;
 	const MICRO_MARK_THICKNESS = 3;

+	type RulerDirection = "Horizontal" | "Vertical";
+
 	export let direction: RulerDirection = "Vertical";
 	export let origin: number;
 	export let numberInterval: number;
@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-	export type ScrollbarDirection = "Horizontal" | "Vertical";
-</script>
-
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";

@@ -21,7 +17,7 @@

 	const dispatch = createEventDispatcher<{ trackShift: number; thumbPosition: number; thumbDragStart: undefined; thumbDragEnd: undefined; thumbDragAbort: undefined }>();

-	export let direction: ScrollbarDirection = "Vertical";
+	export let direction: "Horizontal" | "Vertical" = "Vertical";
 	export let thumbPosition = 0.5;
 	export let thumbLength = 0.5;

@@ -7,8 +7,8 @@
 	import { createEventDispatcher, onDestroy } from "svelte";

 	import { evaluateGradientAtPosition } from "@graphite/../wasm/pkg/graphite_wasm";
-	import type { Color, Gradient } from "@graphite/messages";
-	import { createColor, colorToHexOptionalAlpha, colorToRgbCSS, gradientFirstColor, gradientLastColor, gradientToLinearGradientCSS } from "@graphite/utility-functions/colors";
+	import type { Color, GradientStops } from "@graphite/../wasm/pkg/graphite_wasm";
+	import { colorToHexOptionalAlpha, colorToRgbCSS, gradientFirstColor, gradientLastColor, gradientToLinearGradientCSS } from "@graphite/utility-functions/colors";

 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -17,11 +17,11 @@
 	const BUTTON_LEFT = 0;
 	const BUTTON_RIGHT = 2;

-	const dispatch = createEventDispatcher<{ activeMarkerIndexChange: { activeMarkerIndex: number | undefined; activeMarkerIsMidpoint: boolean }; gradient: Gradient; dragging: boolean }>();
+	const dispatch = createEventDispatcher<{ activeMarkerIndexChange: { activeMarkerIndex: number | undefined; activeMarkerIsMidpoint: boolean }; gradient: GradientStops; dragging: boolean }>();

-	export let gradient: Gradient;
+	export let gradient: GradientStops;
 	export let disabled = false;
-	export let activeMarkerIndex = 0 as number | undefined;
+	export let activeMarkerIndex: number | undefined = 0;
 	export let activeMarkerIsMidpoint = false;
 	// export let disabled = false;
 	// export let tooltipLabel: string | undefined = undefined;
@@ -114,9 +114,7 @@
 		if (index === -1) index = gradient.position.length;

 		// Determine the color of the new stop by evaluating the gradient at the position of the new stop
-		type ReturnedColor = { red: number; green: number; blue: number; alpha: number };
-		const evaluated = evaluateGradientAtPosition(position, new Float64Array(gradient.position), new Float64Array(gradient.midpoint), gradient.color) as ReturnedColor;
-		const color = createColor(evaluated.red, evaluated.green, evaluated.blue, evaluated.alpha);
+		const color: Color = evaluateGradientAtPosition(position, new Float64Array(gradient.position), new Float64Array(gradient.midpoint), gradient.color);

 		// Insert the new stop into the gradient
 		gradient.position.splice(index, 0, position);
@@ -243,7 +241,7 @@
 		dispatch("gradient", gradient);
 	}

-	function toMarkers(gradient: Gradient): { position: number; midpoint: number; color: Color }[] {
+	function toMarkers(gradient: GradientStops): { position: number; midpoint: number; color: Color }[] {
 		return gradient.position.map((position, i) => ({
 			position,
 			midpoint: gradient.midpoint[i],
@@ -251,7 +249,7 @@
 		}));
 	}

-	function toMidpoints(gradient: Gradient): number[] {
+	function toMidpoints(gradient: GradientStops): number[] {
 		if (gradient.position.length < 2) return [];

 		return gradient.midpoint.slice(0, -1).map((midpoint, i) => {
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";

-	import type { ActionShortcut } from "@graphite/messages";
+	import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";

 	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";

-	import type { ActionShortcut } from "@graphite/messages";
+	import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";

 	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { getContext } from "svelte";

+	import type { Color } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { Color } from "@graphite/messages";
-	import { isColor, colorToRgbaCSS } from "@graphite/utility-functions/colors";
+	import { fillChoiceColor, colorToRgbaCSS } from "@graphite/utility-functions/colors";

 	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -43,8 +43,11 @@
 		<ColorPicker
 			open={primaryOpen}
 			on:open={({ detail }) => (primaryOpen = detail)}
-			colorOrGradient={primary}
-			on:colorOrGradient={({ detail }) => isColor(detail) && primaryColorChanged(detail)}
+			colorOrGradient={{ Solid: primary }}
+			on:colorOrGradient={({ detail }) => {
+				const color = fillChoiceColor(detail);
+				if (color) primaryColorChanged(color);
+			}}
 			direction="Right"
 		/>
 	</LayoutRow>
@@ -53,8 +56,11 @@
 		<ColorPicker
 			open={secondaryOpen}
 			on:open={({ detail }) => (secondaryOpen = detail)}
-			colorOrGradient={secondary}
-			on:colorOrGradient={({ detail }) => isColor(detail) && secondaryColorChanged(detail)}
+			colorOrGradient={{ Solid: secondary }}
+			on:colorOrGradient={({ detail }) => {
+				const color = fillChoiceColor(detail);
+				if (color) secondaryColorChanged(color);
+			}}
 			direction="Right"
 		/>
 	</LayoutRow>
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
 	import { ICONS, ICON_SVG_STRINGS } from "@graphite/icons";
 	import type { IconName } from "@graphite/icons";
-	import type { ActionShortcut } from "@graphite/messages";

 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ActionShortcut } from "@graphite/messages";
+	import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";

 	let className = "";
 	export { className as class };
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { SeparatorDirection, SeparatorStyle } from "@graphite/messages";
+	import type { SeparatorDirection, SeparatorStyle } from "@graphite/../wasm/pkg/graphite_wasm";

 	// Content
 	export let direction: SeparatorDirection = "Horizontal";
@@ -1,6 +1,6 @@
 <script lang="ts">
+	import type { ActionShortcut, Key, LabeledShortcut, MouseMotion } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { IconName } from "@graphite/icons";
-	import type { ActionShortcut, KeyRaw, LabeledShortcut, MouseMotion } from "@graphite/messages";
 	import { operatingSystem } from "@graphite/utility-functions/platform";

 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -16,7 +16,7 @@
 			if (typeof labeledKeyOrMouseMotion === "string") return { mouseMotion: labeledKeyOrMouseMotion };

 			// `key` is the name of the `Key` enum in Rust, while `label` is the localized string to display (if it doesn't become an icon)
-			let key = labeledKeyOrMouseMotion.key;
+			let key: Key | "Option" = labeledKeyOrMouseMotion.key;
 			const label = labeledKeyOrMouseMotion.label;

 			// Replace Alt and Accel keys with their Mac-specific equivalents
@@ -57,7 +57,7 @@
 		return consolidatedList;
 	}

-	function keyboardHintIcon(input: KeyRaw): IconName | undefined {
+	function keyboardHintIcon(input: Key | "Option"): IconName | undefined {
 		switch (input) {
 			case "ArrowDown":
 				return "KeyboardArrowDown";
@@ -89,7 +89,20 @@
 	}

 	function mouseHintIcon(input: MouseMotion): IconName {
-		return `MouseHint${input}` as IconName;
+		return {
+			None: "MouseHintNone" as const,
+			Lmb: "MouseHintLmb" as const,
+			Rmb: "MouseHintRmb" as const,
+			Mmb: "MouseHintMmb" as const,
+			ScrollUp: "MouseHintScrollUp" as const,
+			ScrollDown: "MouseHintScrollDown" as const,
+			Drag: "MouseHintDrag" as const,
+			LmbDouble: "MouseHintLmbDouble" as const,
+			LmbDrag: "MouseHintLmbDrag" as const,
+			RmbDrag: "MouseHintRmbDrag" as const,
+			RmbDouble: "MouseHintRmbDouble" as const,
+			MmbDrag: "MouseHintMmbDrag" as const,
+		}[input];
 	}
 </script>

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from "svelte";

-	import type { ActionShortcut } from "@graphite/messages";
+	import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";

 	let className = "";
 	export { className as class };
@@ -1,10 +1,10 @@
 <script lang="ts">
 	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 { isDesktop } from "@graphite/utility-functions/platform";

 	import Dialog from "@graphite/components/floating-menus/Dialog.svelte";
 	import Tooltip from "@graphite/components/floating-menus/Tooltip.svelte";
@@ -31,7 +31,7 @@
 	{#if $tooltip.visible}
 		<Tooltip />
 	{/if}
-	{#if isDesktop() && new Date() > new Date("2026-03-15")}
+	{#if isPlatformNative() && new Date() > new Date("2026-03-15")}
 		<LayoutCol class="release-candidate-expiry">
 			<TextLabel>
 				<p>
@@ -1,9 +1,19 @@
-<script lang="ts" context="module">
+<script lang="ts">
+	import { getContext, tick } from "svelte";
+
+	import type { Editor } from "@graphite/editor";
+
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import Data from "@graphite/components/panels/Data.svelte";
 	import Document from "@graphite/components/panels/Document.svelte";
 	import Layers from "@graphite/components/panels/Layers.svelte";
 	import Properties from "@graphite/components/panels/Properties.svelte";
 	import Welcome from "@graphite/components/panels/Welcome.svelte";
+	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+
+	type PanelType = keyof typeof PANEL_COMPONENTS;

 	const PANEL_COMPONENTS = {
 		Welcome,
@@ -12,20 +22,6 @@
 		Properties,
 		Data,
 	};
-	type PanelType = keyof typeof PANEL_COMPONENTS;
-</script>
-
-<script lang="ts">
-	import { getContext, tick } from "svelte";
-
-	import type { Editor } from "@graphite/editor";
-	import { isEventSupported } from "@graphite/utility-functions/platform";
-
-	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
-	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-
 	const BUTTON_LEFT = 0;
 	const BUTTON_MIDDLE = 1;

@@ -80,16 +76,6 @@
 							closeAction?.(tabIndex);
 						}
 					}}
-					on:mouseup={(e) => {
-						// Middle mouse button click fallback for Safari:
-						// https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event#browser_compatibility
-						// The downside of using mouseup is that the mousedown didn't have to originate in the same element.
-						// A possible future improvement could save the target element during mousedown and check if it's the same here.
-						if (!isEventSupported("auxclick") && e.button === BUTTON_MIDDLE) {
-							e.stopPropagation();
-							closeAction?.(tabIndex);
-						}
-					}}
 					bind:this={tabElements[tabIndex]}
 				>
 					<LayoutRow class="name">
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";

+	import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { Layout } from "@graphite/messages";
 	import { patchLayout } from "@graphite/utility-functions/widgets";

 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";

+	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 { Layout } from "@graphite/messages";
 	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";
@@ -11,7 +12,6 @@
 	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";
-	import { isDesktop } from "/src/utility-functions/platform";

 	const appWindow = getContext<AppWindowState>("appWindow");
 	const editor = getContext<Editor>("editor");
@@ -20,8 +20,8 @@

 	let menuBarLayout: Layout = [];

-	$: showFullscreenButton = $appWindow.platform === "Web" || $fullscreen.windowFullscreen || (isDesktop() && $appWindow.fullscreen);
-	$: isFullscreen = isDesktop() ? $appWindow.fullscreen : $fullscreen.windowFullscreen;
+	$: showFullscreenButton = $appWindow.platform === "Web" || $fullscreen.windowFullscreen || (isPlatformNative() && $appWindow.fullscreen);
+	$: isFullscreen = isPlatformNative() ? $appWindow.fullscreen : $fullscreen.windowFullscreen;
 	// On Mac, the menu bar height needs to be scaled by the inverse of the UI scale to fit its native window buttons
 	$: height = $appWindow.platform === "Mac" ? 28 * (1 / $appWindow.uiScale) : 28;

@@ -53,7 +53,7 @@
 						: undefined}
 					tooltipShortcut={$tooltip.fullscreenShortcut}
 					on:click={() => {
-						if (isDesktop()) editor.handle.appWindowFullscreen();
+						if (isPlatformNative()) editor.handle.appWindowFullscreen();
 						else ($fullscreen.windowFullscreen ? fullscreen.exitFullscreen : fullscreen.enterFullscreen)();
 					}}
 				>
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext } from "svelte";

+	import type { OpenDocument } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
-	import type { OpenDocument } from "@graphite/messages";
 	import type { PortfolioState } from "@graphite/state-providers/portfolio";

 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -18,9 +18,9 @@
 		/*   └─ */ details: 20,
 		/*         ├─ */ properties: 45,
 		/*         └─ */ layers: 55,
-	};
+	} as const;

-	let panelSizes = PANEL_SIZES;
+	let panelSizes: Record<string, number> = PANEL_SIZES;
 	let documentPanel: Panel | undefined;
 	let gutterResizeRestore: [number, number] | undefined = undefined;
 	let pointerCaptureId: number | undefined = undefined;
@@ -40,15 +40,19 @@
 	const portfolio = getContext<PortfolioState>("portfolio");

 	function resizePanel(e: PointerEvent) {
-		const gutter = (e.target || undefined) as HTMLDivElement | undefined;
-		const nextSibling = (gutter?.nextElementSibling || undefined) as HTMLDivElement | undefined;
-		const prevSibling = (gutter?.previousElementSibling || undefined) as HTMLDivElement | undefined;
-		const parentElement = (gutter?.parentElement || undefined) as HTMLDivElement | undefined;
+		const gutter = e.target;
+		if (!(gutter instanceof HTMLDivElement)) return;

-		const nextSiblingName = (nextSibling?.getAttribute("data-subdivision-name") || undefined) as keyof typeof PANEL_SIZES;
-		const prevSiblingName = (prevSibling?.getAttribute("data-subdivision-name") || undefined) as keyof typeof PANEL_SIZES;
+		const nextSibling = gutter.nextElementSibling;
+		const prevSibling = gutter.previousElementSibling;

-		if (!gutter || !nextSibling || !prevSibling || !parentElement || !nextSiblingName || !prevSiblingName) return;
+		const parentElement = gutter.parentElement;
+		if (!(nextSibling instanceof HTMLDivElement) || !(prevSibling instanceof HTMLDivElement) || !(parentElement instanceof HTMLDivElement)) return;
+
+		const nextSiblingName = nextSibling.getAttribute("data-subdivision-name") || undefined;
+		const prevSiblingName = prevSibling.getAttribute("data-subdivision-name") || undefined;
+
+		if (!nextSiblingName || !prevSiblingName || !(nextSiblingName in PANEL_SIZES) || !(prevSiblingName in PANEL_SIZES)) return;

 		// Are we resizing horizontally?
 		const isHorizontal = gutter.getAttribute("data-gutter-horizontal") !== null;