From c07f4b32af17d6794bdaeb4458302e65c14692d3 Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Thu, 19 Jun 2025 03:04:55 +0530
Subject: [PATCH] phase 2: update bindings to svelte 5 for files in runesGlob

---
 frontend/src/app.d.ts                         |   1 +
 .../floating-menus/ColorPicker.svelte         | 208 +++++++++---------
 .../components/floating-menus/Dialog.svelte   |   2 +-
 .../components/floating-menus/MenuList.svelte | 155 ++++++++-----
 .../floating-menus/NodeCatalog.svelte         |   2 +-
 .../layout/ConditionalWrapper.svelte          |  15 +-
 .../src/components/layout/FloatingMenu.svelte | 141 +++++++-----
 .../src/components/layout/LayoutCol.svelte    |  82 ++++---
 .../src/components/layout/LayoutRow.svelte    |  83 ++++---
 .../src/components/panels/Document.svelte     |  24 +-
 frontend/src/components/panels/Layers.svelte  |   4 +-
 frontend/src/components/views/Graph.svelte    |  10 +-
 .../components/widgets/WidgetSection.svelte   |   6 +-
 .../src/components/widgets/WidgetSpan.svelte  |  28 +--
 .../buttons/BreadcrumbTrailButtons.svelte     |  19 +-
 .../widgets/buttons/IconButton.svelte         |  44 ++--
 .../widgets/buttons/ImageButton.svelte        |  34 ++-
 .../buttons/ParameterExposeButton.svelte      |  21 +-
 .../widgets/buttons/PopoverButton.svelte      |  37 +++-
 .../widgets/buttons/TextButton.svelte         |  52 +++--
 .../widgets/inputs/CheckboxInput.svelte       |  35 +--
 .../widgets/inputs/ColorInput.svelte          |  52 +++--
 .../widgets/inputs/CurveInput.svelte          |  63 +++---
 .../widgets/inputs/DropdownInput.svelte       |  82 ++++---
 .../widgets/inputs/FieldInput.svelte          | 121 ++++++----
 .../widgets/inputs/FontInput.svelte           |  59 +++--
 .../widgets/inputs/NumberInput.svelte         | 202 +++++++++--------
 .../widgets/inputs/RadioInput.svelte          |  27 ++-
 .../widgets/inputs/ReferencePointInput.svelte |  35 +--
 .../widgets/inputs/RulerInput.svelte          |  41 ++--
 .../widgets/inputs/ScrollbarInput.svelte      |  70 +++---
 .../widgets/inputs/SpectrumInput.svelte       |  68 +++---
 .../widgets/inputs/TextAreaInput.svelte       |  34 +--
 .../widgets/inputs/TextInput.svelte           |  59 ++---
 .../widgets/inputs/WorkingColorsInput.svelte  |  26 ++-
 .../widgets/labels/IconLabel.svelte           |  32 ++-
 .../widgets/labels/Separator.svelte           |  10 +-
 .../widgets/labels/TextLabel.svelte           |  62 ++++--
 .../widgets/labels/UserInputLabel.svelte      |  27 ++-
 .../window/title-bar/TitleBar.svelte          |   6 +-
 .../components/window/workspace/Panel.svelte  |  99 +++++----
 frontend/vite.config.ts                       |  19 +-
 42 files changed, 1299 insertions(+), 898 deletions(-)

diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index 177c0e399..e7b104c47 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -2,6 +2,7 @@ declare global {
 	namespace Graphite {
 		type Platform = "Windows" | "Mac" | "Linux" | "Web";
 		type MenuType = "Popover" | "Dropdown" | "Dialog" | "Cursor";
+		type Axis = "Horizontal" | "Vertical";
 
 		// interface Error {}
 	}
diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte
index 53a20010f..6f070b137 100644
--- a/frontend/src/components/floating-menus/ColorPicker.svelte
+++ b/frontend/src/components/floating-menus/ColorPicker.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onDestroy, createEventDispatcher, getContext } from "svelte";
+	import { onDestroy, getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
 	import type { HSV, RGB, FillChoice } from "@graphite/messages";
@@ -33,43 +33,48 @@
 	};
 
 	const editor = getContext<Editor>("editor");
+	interface Props {
+		colorOrGradient: FillChoice;
+		allowNone?: boolean;
+		// export let allowTransparency = false; // TODO: Implement
+		direction?: MenuDirection;
+		// TODO: See if this should be made to follow the pattern of DropdownInput.svelte so this could be removed
+		open: boolean;
+		oncolorOrGradient?: (colorOrGradient: FillChoice) => void;
+		onstartHistoryTransaction?: () => void;
+	}
 
-	const dispatch = createEventDispatcher<{ colorOrGradient: FillChoice; startHistoryTransaction: undefined }>();
-
-	export let colorOrGradient: FillChoice;
-	export let allowNone = false;
-	// export let allowTransparency = false; // TODO: Implement
-	export let direction: MenuDirection = "Bottom";
-	// TODO: See if this should be made to follow the pattern of DropdownInput.svelte so this could be removed
-	export let open: boolean;
+	let {
+		colorOrGradient,
+		allowNone = false,
+		direction = "Bottom",
+		open = $bindable(),
+		oncolorOrGradient,
+		onstartHistoryTransaction,
+	}: Props = $props();
 
 	const hsvaOrNone = colorOrGradient instanceof Color ? colorOrGradient.toHSVA() : colorOrGradient.firstColor()?.toHSVA();
-	const hsva = hsvaOrNone || { h: 0, s: 0, v: 0, a: 1 };
+	const hsva = hsvaOrNone ?? { h: 0, s: 0, v: 0, a: 1 };
 
-	// Gradient color stops
-	$: gradient = colorOrGradient instanceof Gradient ? colorOrGradient : undefined;
-	let activeIndex = 0 as number | undefined;
-	$: selectedGradientColor = (activeIndex !== undefined && gradient?.atIndex(activeIndex)?.color) || (Color.fromCSS("black") as Color);
-	// Currently viewed color
-	$: color = colorOrGradient instanceof Color ? colorOrGradient : selectedGradientColor;
+	let activeIndex = $state<number | undefined>(0);
 	// New color components
-	let hue = hsva.h;
-	let saturation = hsva.s;
-	let value = hsva.v;
-	let alpha = hsva.a;
-	let isNone = hsvaOrNone === undefined;
+	let hue = $state(hsva.h);
+	let saturation = $state(hsva.s);
+	let value = $state(hsva.v);
+	let alpha = $state(hsva.a);
+	let isNone = $state(hsvaOrNone === undefined);
 	// Old color components
-	let oldHue = hsva.h;
-	let oldSaturation = hsva.s;
-	let oldValue = hsva.v;
-	let oldAlpha = hsva.a;
-	let oldIsNone = hsvaOrNone === undefined;
+	let oldHue = $state(hsva.h);
+	let oldSaturation = $state(hsva.s);
+	let oldValue = $state(hsva.v);
+	let oldAlpha = $state(hsva.a);
+	let oldIsNone = $state(hsvaOrNone === undefined);
 	// Transient state
 	let draggingPickerTrack: HTMLDivElement | undefined = undefined;
-	let strayCloses = true;
-	let gradientSpectrumDragging = false;
+	let strayCloses = $state(true);
+	let gradientSpectrumDragging = $state(false);
 	let shiftPressed = false;
-	let alignedAxis: "saturation" | "value" | undefined = undefined;
+	let alignedAxis: "saturation" | "value" | undefined = $state(undefined);
 	let hueBeforeDrag = 0;
 	let saturationBeforeDrag = 0;
 	let valueBeforeDrag = 0;
@@ -79,21 +84,9 @@
 	let saturationRestoreWhenShiftReleased: number | undefined = undefined;
 	let valueRestoreWhenShiftReleased: number | undefined = undefined;
 
-	let self: FloatingMenu | undefined;
-	let hexCodeInputWidget: TextInput | undefined;
-	let gradientSpectrumInputWidget: SpectrumInput | undefined;
-
-	$: watchOpen(open);
-	$: watchColor(color);
-
-	$: oldColor = generateColor(oldHue, oldSaturation, oldValue, oldAlpha, oldIsNone);
-	$: newColor = generateColor(hue, saturation, value, alpha, isNone);
-	$: rgbChannels = Object.entries(newColor.toRgb255() || { 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][];
-	$: opaqueHueColor = new Color({ h: hue, s: 1, v: 1, a: 1 });
-	$: outlineFactor = Math.max(contrastingOutlineFactor(newColor, "--color-2-mildblack", 0.01), contrastingOutlineFactor(oldColor, "--color-2-mildblack", 0.01));
-	$: outlined = outlineFactor > 0.0001;
-	$: transparency = newColor.alpha < 1 || oldColor.alpha < 1;
+	let self: FloatingMenu | undefined = $state();
+	let hexCodeInputWidget: TextInput | undefined = $state();
+	let gradientSpectrumInputWidget: SpectrumInput | undefined = $state();
 
 	function generateColor(h: number, s: number, v: number, a: number, none: boolean) {
 		if (none) return new Color("none");
@@ -174,6 +167,7 @@
 		}
 
 		const color = new Color({ h: hue, s: saturation, v: value, a: alpha });
+
 		setColor(color);
 
 		if (!e.shiftKey) {
@@ -226,7 +220,7 @@
 		document.addEventListener("keydown", onKeyDown);
 		document.addEventListener("keyup", onKeyUp);
 
-		dispatch("startHistoryTransaction");
+		onstartHistoryTransaction?.();
 	}
 
 	function removeEvents() {
@@ -274,15 +268,14 @@
 	}
 
 	function setColor(color?: Color) {
-		const colorToEmit = color || new Color({ h: hue, s: saturation, v: value, a: alpha });
+		const colorToEmit = color ?? new Color({ h: hue, s: saturation, v: value, a: alpha });
 
 		const stop = gradientSpectrumInputWidget && activeIndex !== undefined && gradient?.atIndex(activeIndex);
-		if (stop && gradientSpectrumInputWidget instanceof SpectrumInput) {
+		if (stop && gradientSpectrumInputWidget !== undefined) {
 			stop.color = colorToEmit;
-			gradient = gradient;
 		}
 
-		dispatch("colorOrGradient", gradient || colorToEmit);
+		oncolorOrGradient?.(gradient ?? colorToEmit);
 	}
 
 	function swapNewWithOld() {
@@ -338,7 +331,7 @@
 	}
 
 	function setColorPreset(preset: PresetColors) {
-		dispatch("startHistoryTransaction");
+		onstartHistoryTransaction?.()
 		if (preset === "none") {
 			setNewHSVA(0, 0, 0, 1, true);
 			setColor(new Color("none"));
@@ -379,14 +372,14 @@
 		try {
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			const result = await new (window as any).EyeDropper().open();
-			dispatch("startHistoryTransaction");
+			onstartHistoryTransaction?.();
 			setColorCode(result.sRGBHex);
 		} catch {
 			// Do nothing
 		}
 	}
 
-	function gradientActiveMarkerIndexChange({ detail: index }: CustomEvent<number | undefined>) {
+	function gradientActiveMarkerIndexChange(index: number | undefined) {
 		activeIndex = index;
 		const color = index === undefined ? undefined : gradient?.colorAtIndex(index);
 		const hsva = color?.toHSVA();
@@ -401,9 +394,34 @@
 	onDestroy(() => {
 		removeEvents();
 	});
+	// Gradient color stops
+	let gradient = $state<Gradient | undefined>(undefined);
+	let selectedGradientColor = $derived((activeIndex !== undefined && gradient?.atIndex(activeIndex)?.color) || (Color.fromCSS("black") as Color));
+	// Currently viewed color
+	let color = $derived(colorOrGradient instanceof Color ? colorOrGradient : selectedGradientColor);
+	$effect(() => {
+		watchOpen(open);
+	});
+	$effect(() => {
+		watchColor(color);
+	});
+	// gradient changed from outside
+	$effect(() => {
+		if (colorOrGradient instanceof Gradient) {
+			gradient = colorOrGradient;
+		} 
+	})
+	let oldColor = $derived(generateColor(oldHue, oldSaturation, oldValue, oldAlpha, oldIsNone));
+	let newColor = $derived(generateColor(hue, saturation, value, alpha, isNone));
+	let rgbChannels = $derived(Object.entries(newColor.toRgb255() || { r: undefined, g: undefined, b: undefined }) as [keyof RGB, number | undefined][]);
+	let hsvChannels = $derived(Object.entries(!isNone ? { h: hue * 360, s: saturation * 100, v: value * 100 } : { h: undefined, s: undefined, v: undefined }) as [keyof HSV, number | undefined][]);
+	let opaqueHueColor = $derived(new Color({ h: hue, s: 1, v: 1, a: 1 }));
+	let outlineFactor = $derived(Math.max(contrastingOutlineFactor(newColor, "--color-2-mildblack", 0.01), contrastingOutlineFactor(oldColor, "--color-2-mildblack", 0.01)));
+	let outlined = $derived(outlineFactor > 0.0001);
+	let transparency = $derived(newColor.alpha < 1 || oldColor.alpha < 1);
 </script>
 
-<FloatingMenu class="color-picker" {open} on:open {strayCloses} escapeCloses={strayCloses && !gradientSpectrumDragging} {direction} type="Popover" bind:this={self}>
+<FloatingMenu class="color-picker" bind:open={open} {strayCloses} escapeCloses={strayCloses && !gradientSpectrumDragging} {direction} type="Popover" bind:this={self}>
 	<LayoutRow
 		styles={{
 			"--new-color": newColor.toHexOptionalAlpha(),
@@ -418,9 +436,9 @@
 	>
 		<LayoutCol class="pickers-and-gradient">
 			<LayoutRow class="pickers">
-				<LayoutCol class="saturation-value-picker" on:pointerdown={onPointerDown} data-saturation-value-picker>
+				<LayoutCol class="saturation-value-picker" onpointerdown={onPointerDown} data-saturation-value-picker>
 					{#if !isNone}
-						<div class="selection-circle" style:top={`${(1 - value) * 100}%`} style:left={`${saturation * 100}%`} />
+						<div class="selection-circle" style:top={`${(1 - value) * 100}%`} style:left={`${saturation * 100}%`}></div>
 					{/if}
 					{#if alignedAxis}
 						<div
@@ -429,37 +447,37 @@
 							class:value={alignedAxis === "value"}
 							style:top={`${(1 - value) * 100}%`}
 							style:left={`${saturation * 100}%`}
-						/>
+						></div>
 					{/if}
 				</LayoutCol>
-				<LayoutCol class="hue-picker" on:pointerdown={onPointerDown} data-hue-picker>
+				<LayoutCol class="hue-picker" onpointerdown={onPointerDown} data-hue-picker>
 					{#if !isNone}
-						<div class="selection-needle" style:top={`${(1 - hue) * 100}%`} />
+						<div class="selection-needle" style:top={`${(1 - hue) * 100}%`}></div>
 					{/if}
 				</LayoutCol>
-				<LayoutCol class="alpha-picker" on:pointerdown={onPointerDown} data-alpha-picker>
+				<LayoutCol class="alpha-picker" onpointerdown={onPointerDown} data-alpha-picker>
 					{#if !isNone}
-						<div class="selection-needle" style:top={`${(1 - alpha) * 100}%`} />
+						<div class="selection-needle" style:top={`${(1 - alpha) * 100}%`}></div>
 					{/if}
 				</LayoutCol>
 			</LayoutRow>
 			{#if gradient}
 				<LayoutRow class="gradient">
 					<SpectrumInput
-						{gradient}
-						on:gradient={() => {
-							gradient = gradient;
-							if (gradient) dispatch("colorOrGradient", gradient);
+						gradient={gradient}
+						ongradient={(detail) => {
+							gradient = detail;
+							if (gradient) oncolorOrGradient?.(gradient);
 						}}
-						on:activeMarkerIndexChange={gradientActiveMarkerIndexChange}
+						onactiveMarkerIndexChange={gradientActiveMarkerIndexChange}
 						activeMarkerIndex={activeIndex}
-						on:dragging={({ detail }) => (gradientSpectrumDragging = detail)}
+						bind:drag={gradientSpectrumDragging}
 						bind:this={gradientSpectrumInputWidget}
 					/>
 					{#if gradientSpectrumInputWidget && activeIndex !== undefined}
 						<NumberInput
 							value={(gradient.positionAtIndex(activeIndex) || 0) * 100}
-							on:value={({ detail }) => {
+							onvalue={(detail) => {
 								if (gradientSpectrumInputWidget && activeIndex !== undefined && detail !== undefined) gradientSpectrumInputWidget.setPosition(activeIndex, detail / 100);
 							}}
 							displayDecimalPlaces={0}
@@ -480,7 +498,7 @@
 			>
 				{#if !newColor.equals(oldColor)}
 					<div class="swap-button-background"></div>
-					<IconButton class="swap-button" icon="SwapHorizontal" size={16} action={swapNewWithOld} tooltip="Swap" />
+					<IconButton class="swap-button" icon="SwapHorizontal" size={16} onclick={swapNewWithOld} tooltip="Swap" />
 				{/if}
 				<LayoutCol class="new-color" classes={{ none: isNone }}>
 					{#if !newColor.equals(oldColor)}
@@ -499,9 +517,9 @@
 				<Separator type="Related" />
 				<LayoutRow>
 					<TextInput
-						value={newColor.toHexOptionalAlpha() || "-"}
-						on:commitText={({ detail }) => {
-							dispatch("startHistoryTransaction");
+						value={newColor.toHexOptionalAlpha() ?? "-"}
+						oncommitText={(detail ) => {
+							onstartHistoryTransaction?.();
 							setColorCode(detail);
 						}}
 						centered={true}
@@ -519,14 +537,12 @@
 							<Separator type="Related" />
 						{/if}
 						<NumberInput
-							value={strength}
-							on:value={({ detail }) => {
-								strength = detail;
+							value={rgbChannels[index][1]}
+							onvalue={(detail) => {
+								rgbChannels[index][1] = detail;
 								setColorRGB(channel, detail);
 							}}
-							on:startHistoryTransaction={() => {
-								dispatch("startHistoryTransaction");
-							}}
+							{onstartHistoryTransaction}
 							min={0}
 							max={255}
 							minWidth={1}
@@ -546,14 +562,12 @@
 							<Separator type="Related" />
 						{/if}
 						<NumberInput
-							value={strength}
-							on:value={({ detail }) => {
-								strength = detail;
+							value={hsvChannels[index][1]}
+							onvalue={(detail) => {
+								hsvChannels[index][1] = detail;
 								setColorHSV(channel, detail);
 							}}
-							on:startHistoryTransaction={() => {
-								dispatch("startHistoryTransaction");
-							}}
+							{onstartHistoryTransaction}
 							min={0}
 							max={channel === "h" ? 360 : 100}
 							unit={channel === "h" ? "°" : "%"}
@@ -573,13 +587,11 @@
 				<Separator type="Related" />
 				<NumberInput
 					value={!isNone ? alpha * 100 : undefined}
-					on:value={({ detail }) => {
+					onvalue={(detail) => {
 						if (detail !== undefined) alpha = detail / 100;
 						setColorAlphaPercent(detail);
 					}}
-					on:startHistoryTransaction={() => {
-						dispatch("startHistoryTransaction");
-					}}
+					{onstartHistoryTransaction}
 					min={0}
 					max={100}
 					rangeMin={0}
@@ -593,23 +605,23 @@
 			<LayoutRow class="leftover-space" />
 			<LayoutRow>
 				{#if allowNone && !gradient}
-					<button class="preset-color none" on:click={() => setColorPreset("none")} title="Set to no color" tabindex="0"></button>
+					<button class="preset-color none" onclick={() => setColorPreset("none")} title="Set to no color" tabindex="0"></button>
 					<Separator type="Related" />
 				{/if}
-				<button class="preset-color black" on:click={() => setColorPreset("black")} title="Set to black" tabindex="0"></button>
+				<button class="preset-color black" onclick={() => setColorPreset("black")} title="Set to black" tabindex="0"></button>
 				<Separator type="Related" />
-				<button class="preset-color white" on:click={() => setColorPreset("white")} title="Set to white" tabindex="0"></button>
+				<button class="preset-color white" onclick={() => setColorPreset("white")} title="Set to white" tabindex="0"></button>
 				<Separator type="Related" />
-				<button class="preset-color pure" on:click={setColorPresetSubtile} tabindex="-1">
-					<div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set to red" />
-					<div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set to yellow" />
-					<div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set to green" />
-					<div data-pure-tile="cyan" style="--pure-color: #00ffff; --pure-color-gray: #b2b2b2" title="Set to cyan" />
-					<div data-pure-tile="blue" style="--pure-color: #0000ff; --pure-color-gray: #1c1c1c" title="Set to blue" />
-					<div data-pure-tile="magenta" style="--pure-color: #ff00ff; --pure-color-gray: #696969" title="Set to magenta" />
+				<button class="preset-color pure" onclick={setColorPresetSubtile} tabindex="-1">
+					<div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set to red"></div>
+					<div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set to yellow"></div>
+					<div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set to green"></div>
+					<div data-pure-tile="cyan" style="--pure-color: #00ffff; --pure-color-gray: #b2b2b2" title="Set to cyan"></div>
+					<div data-pure-tile="blue" style="--pure-color: #0000ff; --pure-color-gray: #1c1c1c" title="Set to blue"></div>
+					<div data-pure-tile="magenta" style="--pure-color: #ff00ff; --pure-color-gray: #696969" title="Set to magenta"></div>
 				</button>
 				<Separator type="Related" />
-				<IconButton icon="Eyedropper" size={24} action={activateEyedropperSample} tooltip="Sample a pixel color from the document" />
+				<IconButton icon="Eyedropper" size={24} onclick={activateEyedropperSample} tooltip="Sample a pixel color from the document" />
 			</LayoutRow>
 		</LayoutCol>
 	</LayoutRow>
diff --git a/frontend/src/components/floating-menus/Dialog.svelte b/frontend/src/components/floating-menus/Dialog.svelte
index e9d0ba5fa..4ba70719f 100644
--- a/frontend/src/components/floating-menus/Dialog.svelte
+++ b/frontend/src/components/floating-menus/Dialog.svelte
@@ -16,7 +16,7 @@
 
 	const dialog = getContext<DialogState>("dialog");
 
-	let self: FloatingMenu | undefined;
+	let self: FloatingMenu | undefined = $state();
 
 	onMount(() => {
 		// Focus the button which is marked as emphasized, or otherwise the first button, in the popup
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index 0695d3830..7b8bac402 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -1,7 +1,5 @@
-<svelte:options accessors={true} />
-
 <script lang="ts">
-	import { createEventDispatcher, tick, onDestroy, onMount } from "svelte";
+	import { tick, onDestroy, onMount } from "svelte";
 
 	import type { MenuListEntry, MenuDirection } from "@graphite/messages";
 
@@ -15,41 +13,51 @@
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
 
-	let self: FloatingMenu | undefined;
-	let scroller: LayoutCol | undefined;
-	let searchTextInput: TextInput | undefined;
+	let self: FloatingMenu | undefined = $state();
+	let scroller: LayoutCol | undefined = $state();
+	let searchTextInput: TextInput | undefined = $state();
 
-	const dispatch = createEventDispatcher<{ open: boolean; activeEntry: MenuListEntry; hoverInEntry: MenuListEntry; hoverOutEntry: undefined; naturalWidth: number }>();
+	interface Props {
+		entries: MenuListEntry[][];
+		activeEntry?: MenuListEntry | undefined;
+		open: boolean;
+		direction?: MenuDirection;
+		minWidth?: number;
+		drawIcon?: boolean;
+		interactive?: boolean;
+		scrollableY?: boolean;
+		virtualScrollingEntryHeight?: number;
+		tooltip?: string | undefined;
+		onhoverOutEntry?: () => void;
+		onhoverInEntry?: (entry: MenuListEntry) => void;
+		onnaturalWidth?: (width: number) => void;
+		onactiveEntry?: (activeEntry: MenuListEntry) => void;
+	}
 
-	export let entries: MenuListEntry[][];
-	export let activeEntry: MenuListEntry | undefined = undefined;
-	export let open: boolean;
-	export let direction: MenuDirection = "Bottom";
-	export let minWidth = 0;
-	export let drawIcon = false;
-	export let interactive = false;
-	export let scrollableY = false;
-	export let virtualScrollingEntryHeight = 0;
-	export let tooltip: string | undefined = undefined;
+	let {
+		entries = $bindable(),
+		activeEntry = undefined,
+		open = $bindable(false),
+		direction = "Bottom",
+		minWidth = 0,
+		drawIcon = false,
+		interactive = false,
+		scrollableY = false,
+		virtualScrollingEntryHeight = 0,
+		tooltip = undefined,
+		onhoverOutEntry,
+		onhoverInEntry,
+		onnaturalWidth,
+		onactiveEntry,
+	}: Props = $props();
 
 	// Keep the child references outside of the entries array so as to avoid infinite recursion.
-	let childReferences: MenuList[][] = [];
-	let search = "";
+	let childReferences: MenuList[][] = $state([]);
+	let search = $state("");
 
-	let highlighted = activeEntry as MenuListEntry | undefined;
-	let virtualScrollingEntriesStart = 0;
+	let highlighted = $state(activeEntry as MenuListEntry | undefined);
+	let virtualScrollingEntriesStart = $state(0);
 
-	// Called only when `open` is changed from outside this component
-	$: watchOpen(open);
-	$: watchEntries(entries);
-	$: watchRemeasureWidth(filteredEntries, drawIcon);
-	$: watchHighlightedWithSearch(filteredEntries, open);
-
-	$: filteredEntries = entries.map((section) => section.filter((entry) => inSearch(search, entry)));
-	$: virtualScrollingTotalHeight = filteredEntries.length === 0 ? 0 : filteredEntries[0].length * virtualScrollingEntryHeight;
-	$: virtualScrollingStartIndex = Math.floor(virtualScrollingEntriesStart / virtualScrollingEntryHeight) || 0;
-	$: virtualScrollingEndIndex = filteredEntries.length === 0 ? 0 : Math.min(filteredEntries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight);
-	$: startIndex = virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0;
 
 	// TODO: Move keyboard input handling entirely to the unified system in `input.ts`.
 	// TODO: The current approach is hacky and blocks the allowances for shortcuts like the key to open the browser's dev tools.
@@ -116,12 +124,13 @@
 		return !search || entry.label.toLowerCase().includes(search.toLowerCase());
 	}
 
-	function watchOpen(open: boolean) {
+	function watchOpen(value: boolean) {
 		if (open && !inNestedMenuList()) addEventListener("keydown", keydown);
 		else if (!inNestedMenuList()) removeEventListener("keydown", keydown);
 
 		highlighted = activeEntry;
-		dispatch("open", open);
+		// dispatch("open", value);
+		// open = value;
 
 		search = "";
 	}
@@ -151,42 +160,43 @@
 		if (menuListEntry.action) menuListEntry.action();
 
 		// Notify the parent about the clicked entry as the new active entry
-		dispatch("activeEntry", menuListEntry);
+		onactiveEntry?.(menuListEntry);
 
 		// Close the containing menu
 		let childReference = getChildReference(menuListEntry);
 		if (childReference) {
 			childReference.open = false;
-			entries = entries;
+			// entries = entries;
 		}
-		dispatch("open", false);
+		// dispatch("open", false);
 		open = false;
 	}
 
 	function onEntryPointerEnter(menuListEntry: MenuListEntry) {
 		if (!menuListEntry.children?.length) {
-			dispatch("hoverInEntry", menuListEntry);
+			onhoverInEntry?.(menuListEntry);
 			return;
 		}
 
 		let childReference = getChildReference(menuListEntry);
 		if (childReference) {
 			childReference.open = true;
-			entries = entries;
-		} else dispatch("open", true);
+			// entries = entries;
+		} else open = true;
 	}
 
 	function onEntryPointerLeave(menuListEntry: MenuListEntry) {
 		if (!menuListEntry.children?.length) {
-			dispatch("hoverOutEntry");
+			// dispatch("hoverOutEntry");
+			onhoverOutEntry?.();
 			return;
 		}
 
 		let childReference = getChildReference(menuListEntry);
 		if (childReference) {
 			childReference.open = false;
-			entries = entries;
-		} else dispatch("open", false);
+			// entries = entries;
+		} else open = false;
 	}
 
 	function isEntryOpen(menuListEntry: MenuListEntry): boolean {
@@ -385,30 +395,60 @@
 	export function scrollViewTo(distanceDown: number) {
 		scroller?.div?.()?.scrollTo(0, distanceDown);
 	}
+	// Called only when `open` is changed from outside this component
+	$effect(() => {
+		watchOpen(open);
+	});
+	$effect(() => {
+		watchEntries(entries);
+	});
+	let filteredEntries = $derived(entries.map((section) => section.filter((entry) => inSearch(search, entry))));
+	$effect(() => {
+		watchRemeasureWidth(filteredEntries, drawIcon);
+	});
+	$effect(() => {
+		watchHighlightedWithSearch(filteredEntries, open);
+	});
+	let virtualScrollingTotalHeight = $derived(filteredEntries.length === 0 ? 0 : filteredEntries[0].length * virtualScrollingEntryHeight);
+	let virtualScrollingStartIndex = $derived(Math.floor(virtualScrollingEntriesStart / virtualScrollingEntryHeight) || 0);
+	let virtualScrollingEndIndex = $derived(filteredEntries.length === 0 ? 0 : Math.min(filteredEntries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight));
+	let startIndex = $derived(virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0);
+
+	export {
+		entries,
+		activeEntry,
+		open,
+		direction,
+		minWidth,
+		drawIcon,
+		interactive,
+		scrollableY,
+		virtualScrollingEntryHeight,
+		tooltip,
+	}
 </script>
 
 <FloatingMenu
 	class="menu-list"
-	{open}
-	on:open={({ detail }) => (open = detail)}
-	on:naturalWidth
+	bind:open
 	type="Dropdown"
 	windowEdgeMargin={0}
 	escapeCloses={false}
 	{direction}
 	{minWidth}
 	scrollableY={scrollableY && virtualScrollingEntryHeight === 0}
+	{onnaturalWidth}
 	bind:this={self}
 >
 	{#if search.length > 0}
-		<TextInput class="search" value={search} on:value={({ detail }) => (search = detail)} bind:this={searchTextInput}></TextInput>
+		<TextInput class="search" bind:value={search} bind:this={searchTextInput}></TextInput>
 	{/if}
 	<!-- If we put the scrollableY on the layoutcol for non-font dropdowns then for some reason it always creates a tiny scrollbar.
 	However when we are using the virtual scrolling then we need the layoutcol to be scrolling so we can bind the events without using `self`. -->
 	<LayoutCol
 		bind:this={scroller}
 		scrollableY={scrollableY && virtualScrollingEntryHeight !== 0}
-		on:scroll={onScroll}
+		onscroll={onScroll}
 		styles={{ "min-width": virtualScrollingEntryHeight ? `${minWidth}px` : `inherit` }}
 	>
 		{#if virtualScrollingEntryHeight}
@@ -424,14 +464,14 @@
 					classes={{ open: isEntryOpen(entry), active: entry.label === highlighted?.label, disabled: Boolean(entry.disabled) }}
 					styles={{ height: virtualScrollingEntryHeight || "20px" }}
 					{tooltip}
-					on:click={() => !entry.disabled && onEntryClick(entry)}
-					on:pointerenter={() => !entry.disabled && onEntryPointerEnter(entry)}
-					on:pointerleave={() => !entry.disabled && onEntryPointerLeave(entry)}
+					onclick={() => !entry.disabled && onEntryClick(entry)}
+					onpointerenter={() => !entry.disabled && onEntryPointerEnter(entry)}
+					onpointerleave={() => !entry.disabled && onEntryPointerLeave(entry)}
 				>
 					{#if entry.icon && drawIcon}
 						<IconLabel icon={entry.icon} iconSizeOverride={16} class="entry-icon" />
 					{:else if drawIcon}
-						<div class="no-icon" />
+						<div class="no-icon"></div>
 					{/if}
 
 					{#if entry.font}
@@ -447,18 +487,13 @@
 					{#if entry.children?.length}
 						<IconLabel class="submenu-arrow" icon="DropdownArrow" />
 					{:else}
-						<div class="no-submenu-arrow" />
+						<div class="no-submenu-arrow"></div>
 					{/if}
 
 					{#if entry.children}
 						<MenuList
-							on:naturalWidth={({ detail }) => {
-								// We do a manual dispatch here instead of just `on:naturalWidth` as a workaround for the <script> tag
-								// at the top of this file displaying a "'render' implicitly has return type 'any' because..." error.
-								// See explanation at <https://github.com/sveltejs/language-tools/issues/452#issuecomment-723148184>.
-								dispatch("naturalWidth", detail);
-							}}
-							open={getChildReference(entry)?.open || false}
+							{onnaturalWidth}
+							open={entry?.open}
 							direction="TopRight"
 							entries={entry.children}
 							{minWidth}
diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte
index a0f2cbe24..5a8122dc8 100644
--- a/frontend/src/components/floating-menus/NodeCatalog.svelte
+++ b/frontend/src/components/floating-menus/NodeCatalog.svelte
@@ -110,7 +110,7 @@
 </script>
 
 <div class="node-catalog">
-	<TextInput placeholder="Search Nodes..." value={searchTerm} on:value={({ detail }) => (searchTerm = detail)} bind:this={nodeSearchInput} />
+	<TextInput placeholder="Search Nodes..." bind:value={searchTerm} bind:this={nodeSearchInput} />
 	<div class="list-results" on:wheel|passive|stopPropagation>
 		{#each nodeCategories as nodeCategory}
 			<details open={nodeCategory[1].open}>
diff --git a/frontend/src/components/layout/ConditionalWrapper.svelte b/frontend/src/components/layout/ConditionalWrapper.svelte
index 46d5e80b0..f8679efc6 100644
--- a/frontend/src/components/layout/ConditionalWrapper.svelte
+++ b/frontend/src/components/layout/ConditionalWrapper.svelte
@@ -1,14 +1,21 @@
 <script lang="ts">
-	export let condition: boolean;
-	export let wrapperClass = "";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		condition: boolean;
+		wrapperClass?: string;
+		children?: Snippet;
+	}
+
+	let { condition, wrapperClass = "", children }: Props = $props();
 </script>
 
 {#if condition}
 	<div class={wrapperClass}>
-		<slot />
+		{@render children?.()}
 	</div>
 {:else}
-	<slot />
+	{@render children?.()}
 {/if}
 
 <style lang="scss" global></style>
diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte
index e4070cb15..b4a915426 100644
--- a/frontend/src/components/layout/FloatingMenu.svelte
+++ b/frontend/src/components/layout/FloatingMenu.svelte
@@ -1,6 +1,4 @@
-<script lang="ts" context="module">
-	export type MenuType = "Popover" | "Dropdown" | "Dialog" | "Cursor";
-
+<script lang="ts" module>
 	/// 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.
@@ -17,9 +15,11 @@
 		}
 	}
 </script>
-
 <script lang="ts">
-	import { onMount, afterUpdate, createEventDispatcher, tick } from "svelte";
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+
+	import { onMount, tick } from "svelte";
 
 	import type { MenuDirection } from "@graphite/messages";
 	import { browserVersion } from "@graphite/utility-functions/platform";
@@ -29,27 +29,47 @@
 	const BUTTON_LEFT = 0;
 	const POINTER_STRAY_DISTANCE = 100;
 
-	const dispatch = createEventDispatcher<{ open: boolean; naturalWidth: number }>();
+	type DivHTMLElementProps = SvelteHTMLElements["div"];
+	
+	interface Props extends DivHTMLElementProps {
+		class?: string;
+		classes?: Record<string, boolean>;
+		style?: string;
+		styles?: Record<string, string | number | undefined>;
+		open: boolean;
+		type: Graphite.MenuType;
+		direction?: MenuDirection;
+		windowEdgeMargin?: number;
+		scrollableY?: boolean;
+		minWidth?: number;
+		escapeCloses?: boolean;
+		strayCloses?: boolean;
+		children?: import('svelte').Snippet;
+		onnaturalWidth?: (naturalWidht: number) => void;
+	}
 
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
-	let styleName = "";
-	export { styleName as style };
-	export let styles: Record<string, string | number | undefined> = {};
-	export let open: boolean;
-	export let type: MenuType;
-	export let direction: MenuDirection = "Bottom";
-	export let windowEdgeMargin = 6;
-	export let scrollableY = false;
-	export let minWidth = 0;
-	export let escapeCloses = true;
-	export let strayCloses = true;
+	let {
+		class: className = "",
+		classes = {},
+		style: styleName = "",
+		styles = {},
+		open = $bindable(),
+		type,
+		direction = "Bottom",
+		windowEdgeMargin = 6,
+		scrollableY = false,
+		minWidth = 0,
+		escapeCloses = true,
+		strayCloses = true,
+		children,
+		onnaturalWidth,
+		...rest
+	}: Props = $props();
 
-	let tail: HTMLDivElement | undefined;
-	let self: HTMLDivElement | undefined;
-	let floatingMenuContainer: HTMLDivElement | undefined;
-	let floatingMenuContent: LayoutCol | undefined;
+	let tail: HTMLDivElement | undefined = $state();
+	let self: HTMLDivElement | undefined = $state();
+	let floatingMenuContainer: HTMLDivElement | undefined = $state();
+	let floatingMenuContent: LayoutCol | undefined = $state();
 
 	// The resize observer is attached to the floating menu container, which is the zero-height div of the width of the parent element's floating menu spawner.
 	// Since CSS doesn't let us make the floating menu (with `position: fixed`) have a 100% width of this container, we need to use JS to observe its size and
@@ -60,25 +80,15 @@
 		resizeObserverCallback(entries);
 	});
 	let wasOpen = open;
-	let measuringOngoing = false;
+	let measuringOngoing = $state(false);
 	let measuringOngoingGuard = false;
-	let minWidthParentWidth = 0;
+	let minWidthParentWidth = $state(0);
 	let pointerStillDown = false;
 	let workspaceBounds = new DOMRect();
 	let floatingMenuBounds = new DOMRect();
 	let floatingMenuContentBounds = new DOMRect();
 
-	$: watchOpenChange(open);
 
-	$: minWidthStyleValue = measuringOngoing ? "0" : `${Math.max(minWidth, minWidthParentWidth)}px`;
-	$: displayTail = open && type === "Popover";
-	$: displayContainer = open || measuringOngoing;
-	$: extraClasses = Object.entries(classes)
-		.flatMap(([className, stateName]) => (stateName ? [className] : []))
-		.join(" ");
-	$: extraStyles = Object.entries(styles)
-		.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
-		.join(" ");
 
 	// Called only when `open` is changed from outside this component
 	async function watchOpenChange(isOpen: boolean) {
@@ -157,20 +167,6 @@
 		}
 	});
 
-	afterUpdate(() => {
-		// Remove the size constraint after the content updates so the resize observer can measure the content and reapply a newly calculated one
-		const floatingMenuContentDiv = floatingMenuContent?.div?.();
-		if (type === "Dialog" && floatingMenuContentDiv) {
-			// We have to set the style properties directly because attempting to do it through a Svelte bound property results in `afterUpdate()` being triggered
-			floatingMenuContentDiv.style.setProperty("min-width", "unset");
-			floatingMenuContentDiv.style.setProperty("min-height", "unset");
-		}
-
-		// Gets the client bounds of the elements and apply relevant styles to them.
-		// TODO: Use DOM attribute bindings more whilst not causing recursive updates. Turning measuring on and off both causes the component to change,
-		// TODO: which causes the `afterUpdate()` Svelte event to fire extraneous times (hurting performance and sometimes causing an infinite loop).
-		if (!measuringOngoingGuard) positionAndStyleFloatingMenu();
-	});
 
 	function resizeObserverCallback(entries: ResizeObserverEntry[]) {
 		minWidthParentWidth = entries[0].contentRect.width;
@@ -292,7 +288,7 @@
 
 		// Notify the parent about the measured natural width
 		if (naturalWidth !== undefined && naturalWidth >= 0) {
-			dispatch("naturalWidth", naturalWidth);
+			onnaturalWidth?.(naturalWidth);
 		}
 	}
 
@@ -316,7 +312,7 @@
 		if (strayCloses && notHoveringOverOwnSpawner && isPointerEventOutsideFloatingMenu(e, POINTER_STRAY_DISTANCE)) {
 			// TODO: Extend this rectangle bounds check to all submenu bounds up the DOM tree since currently submenus disappear
 			// TODO: with zero stray distance if the cursor is further than the stray distance from only the top-level menu
-			dispatch("open", false);
+			open = false
 		}
 
 		// Clean up any messes from lost pointerup events
@@ -385,7 +381,7 @@
 				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) {
-					dispatch("open", false);
+					open = false;
 					(foundTarget as HTMLElement).click();
 				}
 
@@ -399,7 +395,7 @@
 		if (escapeCloses && e.key === "Escape") {
 			setTimeout(() => {
 				if (!floatingMenuContainer?.querySelector("[data-floating-menu-content][data-escape-does-not-close]")) {
-					dispatch("open", false);
+					open = false;
 				}
 			}, 0);
 
@@ -411,7 +407,7 @@
 	function pointerDownHandler(e: PointerEvent) {
 		// Close the floating menu if the pointer clicked outside the floating menu (but within stray distance)
 		if (isPointerEventOutsideFloatingMenu(e)) {
-			dispatch("open", false);
+			open = false;
 
 			// Track if the left pointer button is now down so its later click event can be canceled
 			const eventIsForLmb = e.button === BUTTON_LEFT;
@@ -454,21 +450,50 @@
 
 		return false;
 	}
+
+	$effect(() => {
+		// Remove the size constraint after the content updates so the resize observer can measure the content and reapply a newly calculated one
+		const floatingMenuContentDiv = floatingMenuContent?.div?.();
+		if (type === "Dialog" && floatingMenuContentDiv) {
+			// We have to set the style properties directly because attempting to do it through a Svelte bound property results in `afterUpdate()` being triggered
+			floatingMenuContentDiv.style.setProperty("min-width", "unset");
+			floatingMenuContentDiv.style.setProperty("min-height", "unset");
+		}
+
+		// Gets the client bounds of the elements and apply relevant styles to them.
+		// TODO: Use DOM attribute bindings more whilst not causing recursive updates. Turning measuring on and off both causes the component to change,
+		// TODO: which causes the `afterUpdate()` Svelte event to fire extraneous times (hurting performance and sometimes causing an infinite loop).
+		if (!measuringOngoingGuard) positionAndStyleFloatingMenu();
+	});
+
+	$effect(() => {
+		watchOpenChange(open);
+	});
+
+	let minWidthStyleValue = $derived(measuringOngoing ? "0" : `${Math.max(minWidth, minWidthParentWidth)}px`);
+	let displayTail = $derived(open && type === "Popover");
+	let displayContainer = $derived(open || measuringOngoing);
+	let extraClasses = $derived(Object.entries(classes)
+		.flatMap(([className, stateName]) => (stateName ? [className] : []))
+		.join(" "));
+	let extraStyles = $derived(Object.entries(styles)
+		.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
+		.join(" "));
 </script>
 
 <div
 	class={`floating-menu ${direction.toLowerCase()} ${type.toLowerCase()} ${className} ${extraClasses}`.trim()}
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	bind:this={self}
-	{...$$restProps}
+	{...rest}
 >
 	{#if displayTail}
-		<div class="tail" bind:this={tail} />
+		<div class="tail" bind:this={tail}></div>
 	{/if}
 	{#if displayContainer}
 		<div class="floating-menu-container" bind:this={floatingMenuContainer}>
 			<LayoutCol class="floating-menu-content" styles={{ "min-width": minWidthStyleValue }} {scrollableY} bind:this={floatingMenuContent} data-floating-menu-content>
-				<slot />
+				{@render children?.()}
 			</LayoutCol>
 		</div>
 	{/if}
diff --git a/frontend/src/components/layout/LayoutCol.svelte b/frontend/src/components/layout/LayoutCol.svelte
index b69b6bfab..6b37da195 100644
--- a/frontend/src/components/layout/LayoutCol.svelte
+++ b/frontend/src/components/layout/LayoutCol.svelte
@@ -1,23 +1,43 @@
 <script lang="ts">
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
-	let styleName = "";
-	export { styleName as style };
-	export let styles: Record<string, string | number | undefined> = {};
-	export let tooltip: string | undefined = undefined;
-	// TODO: Add middle-click drag scrolling
-	export let scrollableX = false;
-	export let scrollableY = false;
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { createBubbler } from 'svelte/legacy';
 
-	let self: HTMLDivElement | undefined;
+	const bubble = createBubbler();
 
-	$: extraClasses = Object.entries(classes)
+	type DivHTMLElementProps = SvelteHTMLElements["div"];
+	
+	interface Props extends DivHTMLElementProps {
+		class?: string;
+		classes?: Record<string, boolean>;
+		style?: string;
+		styles?: Record<string, string | number | undefined>;
+		tooltip?: string | undefined;
+		// TODO: Add middle-click drag scrolling
+		scrollableX?: boolean;
+		scrollableY?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		class: className = "",
+		classes = {},
+		style: styleName = "",
+		styles = {},
+		tooltip = undefined,
+		scrollableX = false,
+		scrollableY = false,
+		children,
+		...rest
+	}: Props = $props();
+
+	let self: HTMLDivElement | undefined = $state();
+
+	let extraClasses = $derived(Object.entries(classes)
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
-		.join(" ");
-	$: extraStyles = Object.entries(styles)
+		.join(" "));
+	let extraStyles = $derived(Object.entries(styles)
 		.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
-		.join(" ");
+		.join(" "));
 
 	export function div(): HTMLDivElement | undefined {
 		return self;
@@ -34,23 +54,23 @@
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	title={tooltip}
 	bind:this={self}
-	on:auxclick
-	on:blur
-	on:click
-	on:dblclick
-	on:dragend
-	on:dragleave
-	on:dragover
-	on:dragstart
-	on:drop
-	on:mouseup
-	on:pointerdown
-	on:pointerenter
-	on:pointerleave
-	on:scroll
-	{...$$restProps}
+	onauxclick={bubble('auxclick')}
+	onblur={bubble('blur')}
+	onclick={bubble('click')}
+	ondblclick={bubble('dblclick')}
+	ondragend={bubble('dragend')}
+	ondragleave={bubble('dragleave')}
+	ondragover={bubble('dragover')}
+	ondragstart={bubble('dragstart')}
+	ondrop={bubble('drop')}
+	onmouseup={bubble('mouseup')}
+	onpointerdown={bubble('pointerdown')}
+	onpointerenter={bubble('pointerenter')}
+	onpointerleave={bubble('pointerleave')}
+	onscroll={bubble('scroll')}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </div>
 
 <!-- Unused (each impacts performance, see <https://github.com/GraphiteEditor/Graphite/issues/1877>):
diff --git a/frontend/src/components/layout/LayoutRow.svelte b/frontend/src/components/layout/LayoutRow.svelte
index fad0220a7..a6a94e6a5 100644
--- a/frontend/src/components/layout/LayoutRow.svelte
+++ b/frontend/src/components/layout/LayoutRow.svelte
@@ -1,23 +1,44 @@
 <script lang="ts">
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
-	let styleName = "";
-	export { styleName as style };
-	export let styles: Record<string, string | number | undefined> = {};
-	export let tooltip: string | undefined = undefined;
-	// TODO: Add middle-click drag scrolling
-	export let scrollableX = false;
-	export let scrollableY = false;
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { createBubbler } from 'svelte/legacy';
 
-	let self: HTMLDivElement | undefined;
+	const bubble = createBubbler();
 
-	$: extraClasses = Object.entries(classes)
+	type DivHTMLElementProps = SvelteHTMLElements["div"];
+
+	interface Props extends DivHTMLElementProps {
+		class?: string;
+		classes?: Record<string, boolean>;
+		style?: string;
+		styles?: Record<string, string | number | undefined>;
+		tooltip?: string | undefined;
+		// TODO: Add middle-click drag scrolling
+		scrollableX?: boolean;
+		scrollableY?: boolean;
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let {
+		class: className = "",
+		classes = {},
+		style: styleName = "",
+		styles = {},
+		tooltip = undefined,
+		scrollableX = false,
+		scrollableY = false,
+		children,
+		...rest
+	}: Props = $props();
+
+	let self: HTMLDivElement | undefined = $state();
+
+	let extraClasses = $derived(Object.entries(classes)
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
-		.join(" ");
-	$: extraStyles = Object.entries(styles)
+		.join(" "));
+	let extraStyles = $derived(Object.entries(styles)
 		.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
-		.join(" ");
+		.join(" "));
 
 	export function div(): HTMLDivElement | undefined {
 		return self;
@@ -34,23 +55,23 @@
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	title={tooltip}
 	bind:this={self}
-	on:auxclick
-	on:blur
-	on:click
-	on:dblclick
-	on:dragend
-	on:dragleave
-	on:dragover
-	on:dragstart
-	on:drop
-	on:mouseup
-	on:pointerdown
-	on:pointerenter
-	on:pointerleave
-	on:scroll
-	{...$$restProps}
+	onauxclick={bubble('auxclick')}
+	onblur={bubble('blur')}
+	onclick={bubble('click')}
+	ondblclick={bubble('dblclick')}
+	ondragend={bubble('dragend')}
+	ondragleave={bubble('dragleave')}
+	ondragover={bubble('dragover')}
+	ondragstart={bubble('dragstart')}
+	ondrop={bubble('drop')}
+	onmouseup={bubble('mouseup')}
+	onpointerdown={bubble('pointerdown')}
+	onpointerenter={bubble('pointerenter')}
+	onpointerleave={bubble('pointerleave')}
+	onscroll={bubble('scroll')}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </div>
 
 <!-- Unused (each impacts performance, see <https://github.com/GraphiteEditor/Graphite/issues/1877>):
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index 70d4ea99b..c0732fba5 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -461,7 +461,7 @@
 	});
 </script>
 
-<LayoutCol class="document" on:dragover={(e) => e.preventDefault()} on:drop={dropFile}>
+<LayoutCol class="document" ondragover={(e) => e.preventDefault()} ondrop={dropFile}>
 	<LayoutRow class="control-bar" classes={{ "for-graph": $document.graphViewOverlayOpen }} scrollableX={true}>
 		{#if !$document.graphViewOverlayOpen}
 			<WidgetLayout layout={$document.documentModeLayout} />
@@ -517,13 +517,13 @@
 							y={cursorTop}
 						/>
 					{/if}
-					<div class="viewport" on:pointerdown={(e) => canvasPointerDown(e)} bind:this={viewport} data-viewport>
+					<div class="viewport" onpointerdown={(e) => canvasPointerDown(e)} bind:this={viewport} data-viewport>
 						<svg class="artboards" style:width={canvasWidthCSS} style:height={canvasHeightCSS}>
 							{@html artworkSvg}
 						</svg>
 						<div class="text-input" style:width={canvasWidthCSS} style:height={canvasHeightCSS} style:pointer-events={showTextInput ? "auto" : ""}>
 							{#if showTextInput}
-								<div bind:this={textInput} style:transform="matrix({textInputMatrix})" on:scroll={preventTextEditingScroll} />
+								<div bind:this={textInput} style:transform="matrix({textInputMatrix})" onscroll={preventTextEditingScroll} />
 							{/if}
 						</div>
 						<canvas
@@ -545,10 +545,10 @@
 						direction="Vertical"
 						thumbLength={scrollbarSize.y}
 						thumbPosition={scrollbarPos.y}
-						on:trackShift={({ detail }) => editor.handle.panCanvasByFraction(0, detail)}
-						on:thumbPosition={({ detail }) => panCanvasY(detail)}
-						on:thumbDragStart={() => editor.handle.panCanvasAbortPrepare(false)}
-						on:thumbDragAbort={() => editor.handle.panCanvasAbort(false)}
+						ontrackShift={(detail) => editor.handle.panCanvasByFraction(0, detail)}
+						onthumbPosition={(detail) => panCanvasY(detail)}
+						onthumbDragStart={() => editor.handle.panCanvasAbortPrepare(false)}
+						onthumbDragAbort={() => editor.handle.panCanvasAbort(false)}
 					/>
 				</LayoutCol>
 			</LayoutRow>
@@ -557,11 +557,11 @@
 					direction="Horizontal"
 					thumbLength={scrollbarSize.x}
 					thumbPosition={scrollbarPos.x}
-					on:trackShift={({ detail }) => editor.handle.panCanvasByFraction(detail, 0)}
-					on:thumbPosition={({ detail }) => panCanvasX(detail)}
-					on:thumbDragEnd={() => editor.handle.setGridAlignedEdges()}
-					on:thumbDragStart={() => editor.handle.panCanvasAbortPrepare(true)}
-					on:thumbDragAbort={() => editor.handle.panCanvasAbort(true)}
+					ontrackShift={(detail) => editor.handle.panCanvasByFraction(detail, 0)}
+					onthumbPosition={(detail) => panCanvasX(detail)}
+					onthumbDragEnd={() => editor.handle.setGridAlignedEdges()}
+					onthumbDragStart={() => editor.handle.panCanvasAbortPrepare(true)}
+					onthumbDragAbort={() => editor.handle.panCanvasAbort(true)}
 				/>
 			</LayoutRow>
 		</LayoutCol>
diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index 092a83fba..bc935cbec 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -564,7 +564,7 @@
 						<IconButton
 							class={"status-toggle"}
 							classes={{ inherited: !listing.entry.parentsUnlocked }}
-							action={(e) => (toggleLayerLock(listing.entry.id), e?.stopPropagation())}
+							onclick={(e) => (toggleLayerLock(listing.entry.id), e?.stopPropagation())}
 							size={24}
 							icon={listing.entry.unlocked ? "PadlockUnlocked" : "PadlockLocked"}
 							hoverIcon={listing.entry.unlocked ? "PadlockLocked" : "PadlockUnlocked"}
@@ -574,7 +574,7 @@
 					<IconButton
 						class={"status-toggle"}
 						classes={{ inherited: !listing.entry.parentsVisible }}
-						action={(e) => (toggleNodeVisibilityLayerPanel(listing.entry.id), e?.stopPropagation())}
+						onclick={(e) => (toggleNodeVisibilityLayerPanel(listing.entry.id), e?.stopPropagation())}
 						size={24}
 						icon={listing.entry.visible ? "EyeVisible" : "EyeHidden"}
 						hoverIcon={listing.entry.visible ? "EyeHide" : "EyeShow"}
diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte
index eaedc3a6d..9d730d3b2 100644
--- a/frontend/src/components/views/Graph.svelte
+++ b/frontend/src/components/views/Graph.svelte
@@ -381,7 +381,7 @@
 						class="remove-button-import"
 						data-index={index}
 						data-import-text-edge
-						action={() => {
+						onclick={() => {
 							/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
 						}}
 					/>
@@ -401,7 +401,7 @@
 				<IconButton
 					size={24}
 					icon="Add"
-					action={() => {
+					onclick={() => {
 						/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
 					}}
 				/>
@@ -441,7 +441,7 @@
 						class="remove-button-export"
 						data-index={index}
 						data-export-text-edge
-						action={() => {
+						onclick={() => {
 							/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
 						}}
 					/>
@@ -472,7 +472,7 @@
 				<IconButton
 					size={24}
 					icon={"Add"}
-					action={() => {
+					onclick={() => {
 						/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
 					}}
 				/>
@@ -592,7 +592,7 @@
 					data-visibility-button
 					size={24}
 					icon={node.visible ? "EyeVisible" : "EyeHidden"}
-					action={() => {
+					onclick={() => {
 						/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
 					}}
 					tooltip={node.visible ? "Visible" : "Hidden"}
diff --git a/frontend/src/components/widgets/WidgetSection.svelte b/frontend/src/components/widgets/WidgetSection.svelte
index 39448166d..0feee39cb 100644
--- a/frontend/src/components/widgets/WidgetSection.svelte
+++ b/frontend/src/components/widgets/WidgetSection.svelte
@@ -31,7 +31,7 @@
 			icon={widgetData.pinned ? "PinActive" : "PinInactive"}
 			tooltip={widgetData.pinned ? "Unpin this node so it's no longer shown here when nothing is selected" : "Pin this node so it's shown here when nothing is selected"}
 			size={24}
-			action={(e) => {
+			onclick={(e) => {
 				editor.handle.setNodePinned(widgetData.id, !widgetData.pinned);
 				e?.stopPropagation();
 			}}
@@ -41,7 +41,7 @@
 			icon={"Trash"}
 			tooltip={"Delete this node from the layer chain"}
 			size={24}
-			action={(e) => {
+			onclick={(e) => {
 				editor.handle.deleteNode(widgetData.id);
 				e?.stopPropagation();
 			}}
@@ -52,7 +52,7 @@
 			hoverIcon={widgetData.visible ? "EyeHide" : "EyeShow"}
 			tooltip={widgetData.visible ? "Hide this node" : "Show this node"}
 			size={24}
-			action={(e) => {
+			onclick={(e) => {
 				editor.handle.toggleNodeVisibilityLayerPanel(widgetData.id);
 				e?.stopPropagation();
 			}}
diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index 831e1dbbc..805fa9d20 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -85,32 +85,32 @@
 	{#each widgets as component, index}
 		{@const checkboxInput = narrowWidgetProps(component.props, "CheckboxInput")}
 		{#if checkboxInput}
-			<CheckboxInput {...exclude(checkboxInput)} on:checked={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<CheckboxInput {...exclude(checkboxInput)} onchecked={(detail) => widgetValueCommitAndUpdate(index, detail)} />
 		{/if}
 		{@const colorInput = narrowWidgetProps(component.props, "ColorInput")}
 		{#if colorInput}
-			<ColorInput {...exclude(colorInput)} on:value={({ detail }) => widgetValueUpdate(index, detail)} on:startHistoryTransaction={() => widgetValueCommit(index, colorInput.value)} />
+			<ColorInput {...exclude(colorInput)} onvalue={(detail) => widgetValueUpdate(index, detail)} onstartHistoryTransaction={() => widgetValueCommit(index, colorInput.value)} />
 		{/if}
 		{@const curvesInput = narrowWidgetProps(component.props, "CurveInput")}
 		{#if curvesInput}
-			<CurveInput {...exclude(curvesInput)} on:value={({ detail }) => debouncer((value) => widgetValueCommitAndUpdate(index, value), { debounceTime: 120 }).debounceUpdateValue(detail)} />
+			<CurveInput {...exclude(curvesInput)} onvalue={(detail) => debouncer((value) => widgetValueCommitAndUpdate(index, value), { debounceTime: 120 }).debounceUpdateValue(detail)} />
 		{/if}
 		{@const dropdownInput = narrowWidgetProps(component.props, "DropdownInput")}
 		{#if dropdownInput}
 			<DropdownInput
 				{...exclude(dropdownInput)}
-				on:hoverInEntry={({ detail }) => {
+				onhoverInEntry={(detail) => {
 					return widgetValueUpdate(index, detail);
 				}}
-				on:hoverOutEntry={({ detail }) => {
+				onhoverOutEntry={(detail) => {
 					return widgetValueUpdate(index, detail);
 				}}
-				on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(index, detail)}
+				onselectedIndex={(detail) => widgetValueCommitAndUpdate(index, detail)}
 			/>
 		{/if}
 		{@const fontInput = narrowWidgetProps(component.props, "FontInput")}
 		{#if fontInput}
-			<FontInput {...exclude(fontInput)} on:changeFont={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<FontInput {...exclude(fontInput)} onchangeFont={(detail) => widgetValueCommitAndUpdate(index, detail)} />
 		{/if}
 		{@const parameterExposeButton = narrowWidgetProps(component.props, "ParameterExposeButton")}
 		{#if parameterExposeButton}
@@ -118,7 +118,7 @@
 		{/if}
 		{@const iconButton = narrowWidgetProps(component.props, "IconButton")}
 		{#if iconButton}
-			<IconButton {...exclude(iconButton)} action={() => widgetValueCommitAndUpdate(index, undefined)} />
+			<IconButton {...exclude(iconButton)} onclick={() => widgetValueCommitAndUpdate(index, undefined)} />
 		{/if}
 		{@const iconLabel = narrowWidgetProps(component.props, "IconLabel")}
 		{#if iconLabel}
@@ -136,15 +136,15 @@
 		{#if numberInput}
 			<NumberInput
 				{...exclude(numberInput)}
-				on:value={({ detail }) => debouncer((value) => widgetValueUpdate(index, value)).debounceUpdateValue(detail)}
-				on:startHistoryTransaction={() => widgetValueCommit(index, numberInput.value)}
+				onvalue={(detail) => debouncer((value) => widgetValueUpdate(index, value)).debounceUpdateValue(detail)}
+				onstartHistoryTransaction={() => widgetValueCommit(index, numberInput.value)}
 				incrementCallbackIncrease={() => widgetValueCommitAndUpdate(index, "Increment")}
 				incrementCallbackDecrease={() => widgetValueCommitAndUpdate(index, "Decrement")}
 			/>
 		{/if}
 		{@const referencePointInput = narrowWidgetProps(component.props, "ReferencePointInput")}
 		{#if referencePointInput}
-			<ReferencePointInput {...exclude(referencePointInput)} on:value={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<ReferencePointInput {...exclude(referencePointInput)} onvalue={(detail) => widgetValueCommitAndUpdate(index, detail)} />
 		{/if}
 		{@const popoverButton = narrowWidgetProps(component.props, "PopoverButton")}
 		{#if popoverButton}
@@ -154,7 +154,7 @@
 		{/if}
 		{@const radioInput = narrowWidgetProps(component.props, "RadioInput")}
 		{#if radioInput}
-			<RadioInput {...exclude(radioInput)} on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<RadioInput {...exclude(radioInput)} onselect={(detail) => widgetValueCommitAndUpdate(index, detail)} />
 		{/if}
 		{@const separator = narrowWidgetProps(component.props, "Separator")}
 		{#if separator}
@@ -166,7 +166,7 @@
 		{/if}
 		{@const textAreaInput = narrowWidgetProps(component.props, "TextAreaInput")}
 		{#if textAreaInput}
-			<TextAreaInput {...exclude(textAreaInput)} on:commitText={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<TextAreaInput {...exclude(textAreaInput)} oncommitText={(detail) => widgetValueCommitAndUpdate(index, detail)} />
 		{/if}
 		{@const textButton = narrowWidgetProps(component.props, "TextButton")}
 		{#if textButton}
@@ -178,7 +178,7 @@
 		{/if}
 		{@const textInput = narrowWidgetProps(component.props, "TextInput")}
 		{#if textInput}
-			<TextInput {...exclude(textInput)} on:commitText={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
+			<TextInput {...exclude(textInput)} oncommitText={(detail) => widgetValueCommitAndUpdate(index, detail)} />
 		{/if}
 		{@const textLabel = narrowWidgetProps(component.props, "TextLabel")}
 		{#if textLabel}
diff --git a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
index f3b68c752..ac519f783 100644
--- a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
+++ b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
@@ -2,11 +2,20 @@
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 
-	export let labels: string[];
-	export let disabled = false;
-	export let tooltip: string | undefined = undefined;
-	// Callbacks
-	export let action: (index: number) => void;
+	interface Props {
+		labels: string[];
+		disabled?: boolean;
+		tooltip?: string | undefined;
+		// Callbacks
+		action: (index: number) => void;
+	}
+
+	let {
+		labels,
+		disabled = false,
+		tooltip = undefined,
+		action
+	}: Props = $props();
 </script>
 
 <LayoutRow class="breadcrumb-trail-buttons" {tooltip}>
diff --git a/frontend/src/components/widgets/buttons/IconButton.svelte b/frontend/src/components/widgets/buttons/IconButton.svelte
index 97fbc2c8c..efe69bb4d 100644
--- a/frontend/src/components/widgets/buttons/IconButton.svelte
+++ b/frontend/src/components/widgets/buttons/IconButton.svelte
@@ -1,24 +1,37 @@
 <script lang="ts">
 	import { type IconName, type IconSize } from "@graphite/utility-functions/icons";
+	import type { SvelteHTMLElements } from 'svelte/elements';
 
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
-	export let icon: IconName;
-	export let hoverIcon: IconName | undefined = undefined;
-	export let size: IconSize;
-	export let disabled = false;
-	export let active = false;
-	export let tooltip: string | undefined = undefined;
-	// Callbacks
-	export let action: (e?: MouseEvent) => void;
+	type ButtonHTMLElementProps = SvelteHTMLElements["button"];
+	
+	interface Props extends ButtonHTMLElementProps {
+		class?: string;
+		classes?: Record<string, boolean>;
+		icon: IconName;
+		hoverIcon?: IconName | undefined;
+		size: IconSize;
+		disabled?: boolean;
+		active?: boolean;
+		tooltip?: string | undefined;
+	}
 
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
+	let {
+		class: className = "",
+		classes = {},
+		icon,
+		hoverIcon = undefined,
+		size,
+		disabled = false,
+		active = false,
+		tooltip = undefined,
+		...rest
+	}: Props = $props();
 
-	$: extraClasses = Object.entries(classes)
+	let extraClasses = $derived(Object.entries(classes)
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
-		.join(" ");
+		.join(" "));
 </script>
 
 <button
@@ -26,11 +39,10 @@
 	class:hover-icon={hoverIcon && !disabled}
 	class:disabled
 	class:active
-	on:click={action}
 	{disabled}
 	title={tooltip}
 	tabindex={active ? -1 : 0}
-	{...$$restProps}
+	{...rest}
 >
 	<IconLabel {icon} />
 	{#if hoverIcon && !disabled}
@@ -55,7 +67,7 @@
 		}
 
 		// The `where` pseudo-class does not contribtue to specificity
-		& + :where(.icon-button) {
+		& + :where(:global(.icon-button)) {
 			margin-left: 0;
 		}
 
diff --git a/frontend/src/components/widgets/buttons/ImageButton.svelte b/frontend/src/components/widgets/buttons/ImageButton.svelte
index 00e9de6aa..90e5c8bc9 100644
--- a/frontend/src/components/widgets/buttons/ImageButton.svelte
+++ b/frontend/src/components/widgets/buttons/ImageButton.svelte
@@ -1,23 +1,33 @@
 <script lang="ts">
 	import { IMAGE_BASE64_STRINGS } from "@graphite/utility-functions/images";
 
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
+	interface Props {
+		class?: string;
+		classes?: Record<string, boolean>;
+		image: string;
+		width: string | undefined;
+		height: string | undefined;
+		tooltip?: string | undefined;
+		// Callbacks
+		action: (e?: MouseEvent) => void;
+	}
 
-	export let image: string;
-	export let width: string | undefined;
-	export let height: string | undefined;
-	export let tooltip: string | undefined = undefined;
-	// Callbacks
-	export let action: (e?: MouseEvent) => void;
+	let {
+		class: className = "",
+		classes = {},
+		image,
+		width,
+		height,
+		tooltip = undefined,
+		action
+	}: Props = $props();
 
-	$: extraClasses = Object.entries(classes)
+	let extraClasses = $derived(Object.entries(classes)
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
-		.join(" ");
+		.join(" "));
 </script>
 
-<img src={IMAGE_BASE64_STRINGS[image]} style:width style:height class={`image-label ${className} ${extraClasses}`.trim()} title={tooltip} alt="" on:click={action} />
+<img src={IMAGE_BASE64_STRINGS[image]} style:width style:height class={`image-label ${className} ${extraClasses}`.trim()} title={tooltip} alt="" onclick={action} />
 
 <style lang="scss" global>
 	.image-label {
diff --git a/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte b/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
index 09e89e648..d1dbf7ac1 100644
--- a/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
+++ b/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
@@ -3,11 +3,20 @@
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
-	export let exposed: boolean;
-	export let dataType: FrontendGraphDataType;
-	export let tooltip: string | undefined = undefined;
-	// Callbacks
-	export let action: (e?: MouseEvent) => void;
+	interface Props {
+		exposed: boolean;
+		dataType: FrontendGraphDataType;
+		tooltip?: string | undefined;
+		// Callbacks
+		action: (e?: MouseEvent) => void;
+	}
+
+	let {
+		exposed,
+		dataType,
+		tooltip = undefined,
+		action
+	}: Props = $props();
 </script>
 
 <LayoutRow class="parameter-expose-button">
@@ -15,7 +24,7 @@
 		class:exposed
 		style:--data-type-color={`var(--color-data-${dataType.toLowerCase()})`}
 		style:--data-type-color-dim={`var(--color-data-${dataType.toLowerCase()}-dim)`}
-		on:click={action}
+		onclick={action}
 		title={tooltip}
 		tabindex="-1"
 	>
diff --git a/frontend/src/components/widgets/buttons/PopoverButton.svelte b/frontend/src/components/widgets/buttons/PopoverButton.svelte
index b0bb0a551..2a139d912 100644
--- a/frontend/src/components/widgets/buttons/PopoverButton.svelte
+++ b/frontend/src/components/widgets/buttons/PopoverButton.svelte
@@ -7,17 +7,30 @@
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
-	export let style: PopoverButtonStyle = "DropdownArrow";
-	export let menuDirection: MenuDirection = "Bottom";
-	export let icon: IconName | undefined = undefined;
-	export let tooltip: string | undefined = undefined;
-	export let disabled = false;
-	export let popoverMinWidth = 1;
+	interface Props {
+		style?: PopoverButtonStyle;
+		menuDirection?: MenuDirection;
+		icon?: IconName | undefined;
+		tooltip?: string | undefined;
+		disabled?: boolean;
+		popoverMinWidth?: number;
+		// Callbacks
+		action?: (() => void) | undefined;
+		children?: import('svelte').Snippet;
+	}
 
-	// Callbacks
-	export let action: (() => void) | undefined = undefined;
+	let {
+		style = "DropdownArrow",
+		menuDirection = "Bottom",
+		icon = undefined,
+		tooltip = undefined,
+		disabled = false,
+		popoverMinWidth = 1,
+		action = undefined,
+		children
+	}: Props = $props();
 
-	let open = false;
+	let open = $state(false);
 
 	function onClick() {
 		open = true;
@@ -26,13 +39,13 @@
 </script>
 
 <LayoutRow class="popover-button" classes={{ "has-icon": icon !== undefined, "direction-top": menuDirection === "Top" }}>
-	<IconButton class="dropdown-icon" classes={{ open }} {disabled} action={() => onClick()} icon={style || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner />
+	<IconButton class="dropdown-icon" classes={{ open }} {disabled} onclick={() => onClick()} icon={style || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner />
 	{#if icon !== undefined}
 		<IconLabel class="descriptive-icon" classes={{ open }} {disabled} {icon} {tooltip} />
 	{/if}
 
-	<FloatingMenu {open} on:open={({ detail }) => (open = detail)} minWidth={popoverMinWidth} type="Popover" direction={menuDirection || "Bottom"}>
-		<slot />
+	<FloatingMenu bind:open minWidth={popoverMinWidth} type="Popover" direction={menuDirection || "Bottom"}>
+		{@render children?.()}
 	</FloatingMenu>
 </LayoutRow>
 
diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
index aaac0a50c..50f54be28 100644
--- a/frontend/src/components/widgets/buttons/TextButton.svelte
+++ b/frontend/src/components/widgets/buttons/TextButton.svelte
@@ -7,25 +7,38 @@
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
-	let self: MenuList;
-
+	let self: MenuList | undefined = $state();
+	let open: boolean = $state(false);
 	// Note: IconButton should be used if only an icon, but no label, is desired.
 	// However, if multiple TextButton widgets are used in a group with only some having no label, this component is able to accommodate that.
-	export let label: string;
-	export let icon: IconName | undefined = undefined;
-	export let hoverIcon: IconName | undefined = undefined;
-	export let emphasized = false;
-	export let flush = false;
-	export let minWidth = 0;
-	export let disabled = false;
-	export let tooltip: string | undefined = undefined;
-	export let menuListChildren: MenuListEntry[][] | undefined = undefined;
+	interface Props {
+		label: string;
+		icon?: IconName | undefined;
+		hoverIcon?: IconName | undefined;
+		emphasized?: boolean;
+		flush?: boolean;
+		minWidth?: number;
+		disabled?: boolean;
+		tooltip?: string | undefined;
+		menuListChildren?: MenuListEntry[][] | undefined;
+		// TODO: Replace this with an event binding (and on other components that do this)
+		action: (() => void) | undefined;
+	}
 
-	// Callbacks
-	// TODO: Replace this with an event binding (and on other components that do this)
-	export let action: (() => void) | undefined;
+	let {
+		label,
+		icon = undefined,
+		hoverIcon = undefined,
+		emphasized = false,
+		flush = false,
+		minWidth = 0,
+		disabled = false,
+		tooltip = undefined,
+		menuListChildren = $bindable([]),
+		action
+	}: Props = $props();
 
-	$: menuListChildrenExists = (menuListChildren?.length ?? 0) > 0;
+	let menuListChildrenExists = $derived((menuListChildren?.length ?? 0) > 0);
 
 	// Handles either a button click or, if applicable, the opening of the menu list floating menu
 	function onClick(e: MouseEvent) {
@@ -50,7 +63,7 @@
 <ConditionalWrapper condition={menuListChildrenExists} wrapperClass="text-button-container">
 	<button
 		class="text-button"
-		class:open={self?.open}
+		class:open={open}
 		class:hover-icon={hoverIcon && !disabled}
 		class:emphasized
 		class:disabled
@@ -62,7 +75,7 @@
 		data-text-button
 		tabindex={disabled ? -1 : 0}
 		data-floating-menu-spawner={menuListChildrenExists ? "" : "no-hover-transfer"}
-		on:click={onClick}
+		onclick={onClick}
 	>
 		{#if icon}
 			<IconLabel {icon} />
@@ -76,9 +89,8 @@
 	</button>
 	{#if menuListChildrenExists}
 		<MenuList
-			on:open={({ detail }) => self && (self.open = detail)}
-			open={self?.open || false}
-			entries={menuListChildren || []}
+			bind:open={open}
+			entries={menuListChildren}
 			direction="Bottom"
 			minWidth={240}
 			drawIcon={true}
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.svelte b/frontend/src/components/widgets/inputs/CheckboxInput.svelte
index f8e53eead..0964f6a65 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.svelte
+++ b/frontend/src/components/widgets/inputs/CheckboxInput.svelte
@@ -1,25 +1,34 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
 	import type { IconName } from "@graphite/utility-functions/icons";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
-	const dispatch = createEventDispatcher<{ checked: boolean }>();
 
-	export let checked = false;
-	export let disabled = false;
-	export let icon: IconName = "Checkmark";
-	export let tooltip: string | undefined = undefined;
-	export let forLabel: bigint | undefined = undefined;
+	interface Props {
+		checked?: boolean;
+		disabled?: boolean;
+		icon?: IconName;
+		tooltip?: string | undefined;
+		forLabel?: bigint | undefined;
+		onchecked?: (checked: boolean) => void;
+	}
+ 
+	let {
+		checked = false,
+		disabled = false,
+		icon = "Checkmark",
+		tooltip = undefined,
+		forLabel = undefined,
+		onchecked,
+	}: Props = $props();
 
-	let inputElement: HTMLInputElement | undefined;
+	let inputElement: HTMLInputElement | undefined = $state();
 
 	const backupId = String(Math.random()).substring(2);
 
-	$: id = forLabel !== undefined ? String(forLabel) : backupId;
-	$: displayIcon = (!checked && icon === "Checkmark" ? "Empty12px" : icon) as IconName;
+	let id = $derived(forLabel !== undefined ? String(forLabel) : backupId);
+	let displayIcon = $derived((!checked && icon === "Checkmark" ? "Empty12px" : icon) as IconName);
 
 	export function isChecked() {
 		return checked;
@@ -41,12 +50,12 @@
 		type="checkbox"
 		id={`checkbox-input-${id}`}
 		bind:checked
-		on:change={(_) => dispatch("checked", inputElement?.checked || false)}
+		onchange={(_) => onchecked?.(inputElement?.checked ?? false)}
 		{disabled}
 		tabindex={disabled ? -1 : 0}
 		bind:this={inputElement}
 	/>
-	<label class:disabled class:checked for={`checkbox-input-${id}`} on:keydown={(e) => e.key === "Enter" && toggleCheckboxFromLabel(e)} title={tooltip}>
+	<label class:disabled class:checked for={`checkbox-input-${id}`} onkeydown={(e) => e.key === "Enter" && toggleCheckboxFromLabel(e)} title={tooltip}>
 		<LayoutRow class="checkbox-box">
 			<IconLabel icon={displayIcon} />
 		</LayoutRow>
diff --git a/frontend/src/components/widgets/inputs/ColorInput.svelte b/frontend/src/components/widgets/inputs/ColorInput.svelte
index 1dd01ae24..f0de9c520 100644
--- a/frontend/src/components/widgets/inputs/ColorInput.svelte
+++ b/frontend/src/components/widgets/inputs/ColorInput.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
 	import type { FillChoice } from "@graphite/messages";
 	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages";
 
@@ -8,41 +6,49 @@
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
-	const dispatch = createEventDispatcher<{ value: FillChoice; startHistoryTransaction: undefined }>();
+	let open = $state(false);
 
-	let open = false;
+	interface Props {
+		value: FillChoice;
+		disabled?: boolean;
+		allowNone?: boolean;
+		// export let allowTransparency = false; // TODO: Implement
+		tooltip?: string | undefined;
+		onvalue?: (value: FillChoice) => void;
+		onstartHistoryTransaction?: () => void;
+	}
 
-	export let value: FillChoice;
-	export let disabled = false;
-	export let allowNone = false;
-	// export let allowTransparency = false; // TODO: Implement
-	export let tooltip: string | undefined = undefined;
+	let {
+		value,
+		disabled = false,
+		allowNone = false,
+		tooltip = undefined,
+		onvalue,
+		onstartHistoryTransaction,
+	}: Props = $props();
+
+	let outlineFactor = $derived(contrastingOutlineFactor(value, ["--color-1-nearblack", "--color-3-darkgray"], 0.01));
+	let outlined = $derived(outlineFactor > 0.0001);
+	let chosenGradient = $derived(value instanceof Gradient ? value.toLinearGradientCSS() : `linear-gradient(${value.toHexOptionalAlpha()}, ${value.toHexOptionalAlpha()})`);
+	let none = $derived(value instanceof Color ? value.none : false);
+	let transparency = $derived(value instanceof Gradient ? value.stops.some((stop) => stop.color.alpha < 1) : value.alpha < 1);
 
-	$: outlineFactor = contrastingOutlineFactor(value, ["--color-1-nearblack", "--color-3-darkgray"], 0.01);
-	$: outlined = outlineFactor > 0.0001;
-	$: chosenGradient = value instanceof Gradient ? value.toLinearGradientCSS() : `linear-gradient(${value.toHexOptionalAlpha()}, ${value.toHexOptionalAlpha()})`;
-	$: none = value instanceof Color ? value.none : false;
-	$: transparency = value instanceof Gradient ? value.stops.some((stop) => stop.color.alpha < 1) : value.alpha < 1;
 </script>
 
 <LayoutCol class="color-button" classes={{ open, disabled, none, transparency, outlined }} {tooltip}>
-	<button {disabled} style:--chosen-gradient={chosenGradient} style:--outline-amount={outlineFactor} on:click={() => (open = true)} tabindex="0" data-floating-menu-spawner>
+	<button {disabled} style:--chosen-gradient={chosenGradient} style:--outline-amount={outlineFactor} onclick={() => (open = true)} tabindex="0" data-floating-menu-spawner>
 		{#if disabled && value instanceof Color && !value.none}
 			<TextLabel>sRGB</TextLabel>
 		{/if}
 	</button>
 	<ColorPicker
-		{open}
-		on:open={({ detail }) => (open = detail)}
+		bind:open
 		colorOrGradient={value}
-		on:colorOrGradient={({ detail }) => {
-			value = detail;
-			dispatch("value", detail);
-		}}
-		on:startHistoryTransaction={() => {
+		oncolorOrGradient={onvalue}
+		onstartHistoryTransaction={() => {
 			// This event is sent to the backend so it knows to start a transaction for the history system. See discussion for some explanation:
 			// <https://github.com/GraphiteEditor/Graphite/pull/1584#discussion_r1477592483>
-			dispatch("startHistoryTransaction");
+			onstartHistoryTransaction?.()
 		}}
 		{allowNone}
 	/>
diff --git a/frontend/src/components/widgets/inputs/CurveInput.svelte b/frontend/src/components/widgets/inputs/CurveInput.svelte
index 634bb45f1..40144e902 100644
--- a/frontend/src/components/widgets/inputs/CurveInput.svelte
+++ b/frontend/src/components/widgets/inputs/CurveInput.svelte
@@ -1,26 +1,34 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
 	import type { Curve, CurveManipulatorGroup } from "@graphite/messages";
 	import { clamp } from "@graphite/utility-functions/math";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-
-	const dispatch = createEventDispatcher<{
+	
+	interface Props {
+		classes?: Record<string, boolean>;
+		style?: string;
+		styles?: Record<string, string | number | undefined>;
 		value: Curve;
-	}>();
+		disabled?: boolean;
+		tooltip?: string | undefined;
+		children?: import('svelte').Snippet;
+		onvalue?: (curve: Curve) => void;
+	}
 
-	export let classes: Record<string, boolean> = {};
-	let styleName = "";
-	export { styleName as style };
-	export let styles: Record<string, string | number | undefined> = {};
-	export let value: Curve;
-	export let disabled = false;
-	export let tooltip: string | undefined = undefined;
+	let {
+		classes = {},
+		style: styleName = "",
+		styles = {},
+		value,
+		disabled = false,
+		tooltip = undefined,
+		children,
+		onvalue,
+	}: Props = $props();
 
 	const GRID_SIZE = 4;
 
-	let groups: CurveManipulatorGroup[] = [
+	let groups: CurveManipulatorGroup[] = $state([
 		{
 			anchor: [0, 0],
 			handles: [
@@ -42,20 +50,14 @@
 				[2, 2],
 			],
 		},
-	];
-	let selectedNodeIndex: number | undefined = undefined;
+	]);
+	let selectedNodeIndex: number | undefined = $state(undefined);
 	let draggedNodeIndex: number | undefined = undefined;
-	let dAttribute = recalculateSvgPath();
+	let dAttribute = $state(recalculateSvgPath());
 
-	$: {
-		groups = [groups[0]].concat(value.manipulatorGroups).concat([groups[groups.length - 1]]);
-		groups[0].handles[1] = value.firstHandle;
-		groups[groups.length - 1].handles[0] = value.lastHandle;
-		dAttribute = recalculateSvgPath();
-	}
 
 	function updateCurve() {
-		dispatch("value", {
+		onvalue?.({
 			manipulatorGroups: groups.slice(1, groups.length - 1),
 			firstHandle: groups[0].handles[1],
 			lastHandle: groups[groups.length - 1].handles[0],
@@ -83,7 +85,6 @@
 			selectedNodeIndex = undefined;
 
 			groups.splice(i, 1);
-			groups = groups;
 
 			dAttribute = recalculateSvgPath();
 
@@ -186,10 +187,16 @@
 		dAttribute = recalculateSvgPath();
 		updateCurve();
 	}
+	$effect(() => {
+		groups = [groups[0]].concat(value.manipulatorGroups).concat([groups[groups.length - 1]]);
+		groups[0].handles[1] = value.firstHandle;
+		groups[groups.length - 1].handles[0] = value.lastHandle;
+		dAttribute = recalculateSvgPath();
+	});
 </script>
 
 <LayoutRow class={"curve-input"} classes={{ disabled, ...classes }} style={styleName} {styles} {tooltip}>
-	<svg viewBox="0 0 1 1" on:pointermove={handlePointerMove} on:pointerup={handlePointerUp}>
+	<svg viewBox="0 0 1 1" onpointermove={handlePointerMove} onpointerup={handlePointerUp}>
 		{#each { length: GRID_SIZE - 1 } as _, i}
 			<path class="grid" d={`M 0 ${(i + 1) / GRID_SIZE} L 1 ${(i + 1) / GRID_SIZE}`} />
 			<path class="grid" d={`M ${(i + 1) / GRID_SIZE} 0 L ${(i + 1) / GRID_SIZE} 1`} />
@@ -199,14 +206,14 @@
 			{@const group = groups[selectedNodeIndex]}
 			{#each [0, 1] as i}
 				<path d={`M ${group.anchor[0]} ${1 - group.anchor[1]} L ${group.handles[i][0]} ${1 - group.handles[i][1]}`} class="handle-line" />
-				<circle cx={group.handles[i][0]} cy={1 - group.handles[i][1]} class="manipulator handle" r="0.02" on:pointerdown={(e) => handleManipulatorPointerDown(e, -i - 1)} />
+				<circle cx={group.handles[i][0]} cy={1 - group.handles[i][1]} class="manipulator handle" r="0.02" onpointerdown={(e) => handleManipulatorPointerDown(e, -i - 1)} />
 			{/each}
 		{/if}
 		{#each groups as group, i}
-			<circle cx={group.anchor[0]} cy={1 - group.anchor[1]} class="manipulator" r="0.02" on:pointerdown={(e) => handleManipulatorPointerDown(e, i)} />
+			<circle cx={group.anchor[0]} cy={1 - group.anchor[1]} class="manipulator" r="0.02" onpointerdown={(e) => handleManipulatorPointerDown(e, i)} />
 		{/each}
 	</svg>
-	<slot />
+	{@render children?.()}
 </LayoutRow>
 
 <style lang="scss" global>
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 4317a519f..1c02a86b8 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
 	import type { MenuListEntry } from "@graphite/messages";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
@@ -10,29 +8,41 @@
 
 	const DASH_ENTRY = { value: "", label: "-" };
 
-	const dispatch = createEventDispatcher<{ selectedIndex: number; hoverInEntry: number; hoverOutEntry: number }>();
+	let menuList: MenuList | undefined = $state();
+	let self: LayoutRow | undefined = $state();
 
-	let menuList: MenuList | undefined;
-	let self: LayoutRow | undefined;
+	interface Props {
+		entries: MenuListEntry[][];
+		selectedIndex?: number | undefined; // When not provided, a dash is displayed
+		drawIcon?: boolean;
+		interactive?: boolean;
+		disabled?: boolean;
+		tooltip?: string | undefined;
+		minWidth?: number;
+		maxWidth?: number;
+		onhoverOutEntry?: (index: number) => void; 
+		onhoverInEntry?: (index: number) => void;
+		onselectedIndex?: (index: number) => void;
+	}
 
-	export let entries: MenuListEntry[][];
-	export let selectedIndex: number | undefined = undefined; // When not provided, a dash is displayed
-	export let drawIcon = false;
-	export let interactive = true;
-	export let disabled = false;
-	export let tooltip: string | undefined = undefined;
-	export let minWidth = 0;
-	export let maxWidth = 0;
+	let {
+		entries,
+		selectedIndex = undefined,
+		drawIcon = false,
+		interactive = true,
+		disabled = false,
+		tooltip = undefined,
+		minWidth = $bindable(0),
+		maxWidth = 0,
+		onhoverInEntry,
+		onhoverOutEntry,
+		onselectedIndex,
+	}: Props = $props();
 
-	let activeEntry = makeActiveEntry();
+	let activeEntry = $state(makeActiveEntry());
 	let activeEntrySkipWatcher = false;
 	let initialSelectedIndex: number | undefined = undefined;
-	let open = false;
-
-	$: watchSelectedIndex(selectedIndex);
-	$: watchEntries(entries);
-	$: watchActiveEntry(activeEntry);
-	$: watchOpen(open);
+	let open = $state(false);
 
 	function watchOpen(open: boolean) {
 		initialSelectedIndex = open ? selectedIndex : undefined;
@@ -56,17 +66,17 @@
 			activeEntrySkipWatcher = false;
 		} else if (activeEntry !== DASH_ENTRY) {
 			// We need to set to the initial value first to track a right history step, as if we hover in initial selection.
-			if (initialSelectedIndex !== undefined) dispatch("hoverInEntry", initialSelectedIndex);
-			dispatch("selectedIndex", entries.flat().indexOf(activeEntry));
+			if (initialSelectedIndex !== undefined) onhoverInEntry?.(initialSelectedIndex);
+			onselectedIndex?.(entries.flat().indexOf(activeEntry));
 		}
 	}
 
 	function dispatchHoverInEntry(hoveredEntry: MenuListEntry) {
-		dispatch("hoverInEntry", entries.flat().indexOf(hoveredEntry));
+		onhoverInEntry?.(entries.flat().indexOf(hoveredEntry));
 	}
 
 	function dispatchHoverOutEntry() {
-		if (initialSelectedIndex !== undefined) dispatch("hoverOutEntry", initialSelectedIndex);
+		if (initialSelectedIndex !== undefined) onhoverOutEntry?.(initialSelectedIndex);
 	}
 
 	function makeActiveEntry(): MenuListEntry {
@@ -82,6 +92,15 @@
 		const blurTarget = (e.target as HTMLDivElement | undefined)?.closest("[data-dropdown-input]") || undefined;
 		if (blurTarget !== self?.div?.()) open = false;
 	}
+	$effect(() => {
+		watchSelectedIndex(selectedIndex);
+	});
+	$effect(() => {
+		watchActiveEntry(activeEntry);
+	});
+	$effect(() => {
+		watchOpen(open);
+	});
 </script>
 
 <LayoutRow
@@ -94,8 +113,8 @@
 		class="dropdown-box"
 		classes={{ disabled, open }}
 		{tooltip}
-		on:click={() => !disabled && (open = true)}
-		on:blur={unFocusDropdownBox}
+		onclick={() => !disabled && (open = true)}
+		onblur={unFocusDropdownBox}
 		tabindex={disabled ? -1 : 0}
 		data-floating-menu-spawner
 	>
@@ -106,13 +125,12 @@
 		<IconLabel class="dropdown-arrow" icon="DropdownArrow" />
 	</LayoutRow>
 	<MenuList
-		on:naturalWidth={({ detail }) => (minWidth = detail)}
+		onnaturalWidth={(detail) => (minWidth = detail)}
 		{activeEntry}
-		on:activeEntry={({ detail }) => (activeEntry = detail)}
-		on:hoverInEntry={({ detail }) => dispatchHoverInEntry(detail)}
-		on:hoverOutEntry={() => dispatchHoverOutEntry()}
-		{open}
-		on:open={({ detail }) => (open = detail)}
+		onactiveEntry={(detail) => (activeEntry = detail)}
+		onhoverInEntry={dispatchHoverInEntry}
+		onhoverOutEntry={dispatchHoverOutEntry}
+		bind:open
 		{entries}
 		{drawIcon}
 		{interactive}
diff --git a/frontend/src/components/widgets/inputs/FieldInput.svelte b/frontend/src/components/widgets/inputs/FieldInput.svelte
index b35279401..00ac96b25 100644
--- a/frontend/src/components/widgets/inputs/FieldInput.svelte
+++ b/frontend/src/components/widgets/inputs/FieldInput.svelte
@@ -1,41 +1,65 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
 	import { platformIsMac } from "@graphite/utility-functions/platform";
 
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import type { SvelteHTMLElements } from 'svelte/elements';
 
-	const dispatch = createEventDispatcher<{
+	type InputHTMLElementProps = SvelteHTMLElements["input"];
+	type TextAreaHTMLElementProps = SvelteHTMLElements["textarea"];
+
+	type CommonProps = {
+		class?: string;
+		classes?: Record<string, boolean>;
+		style?: string;
+		styles?: Record<string, string | number | undefined>;
 		value: string;
-		textFocused: undefined;
-		textChanged: undefined;
-		textChangeCanceled: undefined;
-	}>();
+		label?: string | undefined;
+		spellcheck?: boolean;
+		disabled?: boolean;
+		textarea?: boolean;
+		tooltip?: string | undefined;
+		placeholder?: string | undefined;
+		hideContextMenu?: boolean;
+		children?: import('svelte').Snippet;
+		onfocus?: (event: FocusEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) => void;
+        onblur?: (event: FocusEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) => void;
+        onchange?: (event: Event & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) => void;
+        onkeydown?: (event: KeyboardEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) => void;
+        onpointerdown?: (event: PointerEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement | HTMLLabelElement }) => void;
+		ontextChangeCanceled?: () => void;
+	}
 
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
-	let styleName = "";
-	export { styleName as style };
-	export let styles: Record<string, string | number | undefined> = {};
-	export let value: string;
-	export let label: string | undefined = undefined;
-	export let spellcheck = false;
-	export let disabled = false;
-	export let textarea = false;
-	export let tooltip: string | undefined = undefined;
-	export let placeholder: string | undefined = undefined;
-	export let hideContextMenu = false;
+	type Props = CommonProps & (
+		CommonProps['textarea'] extends true
+			? TextAreaHTMLElementProps // If 'textarea' is explicitly true
+			: InputHTMLElementProps    // Otherwise (false, undefined, or missing)
+	);
 
-	let inputOrTextarea: HTMLInputElement | HTMLTextAreaElement | undefined;
+	let {
+		class: className = "",
+		classes = {},
+		style: styleName = "",
+		styles = {},
+		value = $bindable(),
+		label = undefined,
+		spellcheck = false,
+		disabled = false,
+		textarea = false,
+		tooltip = undefined,
+		placeholder = undefined,
+		hideContextMenu = false,
+		onfocus,
+		onchange,
+		children,
+		onpointerdown,
+		ontextChangeCanceled,
+	}: Props = $props();
+
+	let inputOrTextarea: HTMLInputElement | HTMLTextAreaElement | undefined = $state();
 	let id = String(Math.random()).substring(2);
 	let macKeyboardLayout = platformIsMac();
 
-	$: inputValue = value;
-
-	$: dispatch("value", inputValue);
-
 	// Select (highlight) all the text. For technical reasons, it is necessary to pass the current text.
 	export function selectAllText(currentText: string) {
 		if (!inputOrTextarea) return;
@@ -54,7 +78,7 @@
 	}
 
 	export function getValue(): string {
-		return inputOrTextarea?.value || "";
+		return inputOrTextarea?.value ?? "";
 	}
 
 	export function setInputElementValue(value: string) {
@@ -68,10 +92,15 @@
 	}
 
 	function cancel() {
-		dispatch("textChangeCanceled");
+		ontextChangeCanceled?.();
 
 		if (inputOrTextarea) preventEscapeClosingParentFloatingMenu(inputOrTextarea);
 	}
+
+	function onkeydown(e: KeyboardEvent) {
+		e.key === "Enter" && onchange?.(e);
+		e.key === "Escape" && cancel();
+	}
 </script>
 
 <!-- This is a base component, extended by others like NumberInput and TextInput. It should not be used directly. -->
@@ -85,14 +114,13 @@
 			{disabled}
 			{placeholder}
 			bind:this={inputOrTextarea}
-			bind:value={inputValue}
-			on:focus={() => dispatch("textFocused")}
-			on:blur={() => dispatch("textChanged")}
-			on:change={() => dispatch("textChanged")}
-			on:keydown={(e) => e.key === "Enter" && dispatch("textChanged")}
-			on:keydown={(e) => e.key === "Escape" && cancel()}
-			on:pointerdown
-			on:contextmenu={(e) => hideContextMenu && e.preventDefault()}
+			bind:value={value}
+			onfocus={onfocus}
+			onblur={onchange}
+			onchange={onchange}
+			onkeydown={onkeydown}
+			onpointerdown={onpointerdown}
+			oncontextmenu={(e) => hideContextMenu && e.preventDefault()}
 			data-input-element
 		/>
 	{:else}
@@ -104,20 +132,19 @@
 			{spellcheck}
 			{disabled}
 			bind:this={inputOrTextarea}
-			bind:value={inputValue}
-			on:focus={() => dispatch("textFocused")}
-			on:blur={() => dispatch("textChanged")}
-			on:change={() => dispatch("textChanged")}
-			on:keydown={(e) => (macKeyboardLayout ? e.metaKey : e.ctrlKey) && e.key === "Enter" && dispatch("textChanged")}
-			on:keydown={(e) => e.key === "Escape" && cancel()}
-			on:pointerdown
-			on:contextmenu={(e) => hideContextMenu && e.preventDefault()}
-		/>
+			bind:value={value}
+			onfocus={onfocus}
+			onblur={onchange}
+			onchange={onchange}
+			onkeydown={onkeydown}
+			onpointerdown={onpointerdown}
+			oncontextmenu={(e) => hideContextMenu && e.preventDefault()}
+		></textarea>
 	{/if}
 	{#if label}
-		<label for={`field-input-${id}`} on:pointerdown>{label}</label>
+		<label for={`field-input-${id}`} onpointerdown={onpointerdown}>{label}</label>
 	{/if}
-	<slot />
+	{@render children?.()}
 </LayoutRow>
 
 <style lang="scss" global>
diff --git a/frontend/src/components/widgets/inputs/FontInput.svelte b/frontend/src/components/widgets/inputs/FontInput.svelte
index f351f02d2..9bafaa293 100644
--- a/frontend/src/components/widgets/inputs/FontInput.svelte
+++ b/frontend/src/components/widgets/inputs/FontInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext, onMount, tick } from "svelte";
+	import { getContext, onMount, tick } from "svelte";
 
 	import type { MenuListEntry } from "@graphite/messages";
 	import type { FontsState } from "@graphite/state-providers/fonts";
@@ -11,26 +11,35 @@
 
 	const fonts = getContext<FontsState>("fonts");
 
-	const dispatch = createEventDispatcher<{
+	let menuList: MenuList | undefined = $state();
+
+	interface Props {
 		fontFamily: string;
 		fontStyle: string;
-		changeFont: { fontFamily: string; fontStyle: string; fontFileUrl: string | undefined };
-	}>();
+		isStyle?: boolean;
+		disabled?: boolean;
+		tooltip?: string | undefined;
+		onchangeFont?: (arg1: { fontFamily: string; fontStyle: string; fontFileUrl: string | undefined }) => void;
+		onfontFamily?: (fontFamily: string) => void;
+		onfontStyle?: (fontStyle: string) => void;
+	}
 
-	let menuList: MenuList | undefined;
+	let {
+		fontFamily,
+		fontStyle,
+		isStyle = false,
+		disabled = false,
+		tooltip = undefined,
+		onchangeFont,
+		onfontFamily,
+		onfontStyle,
+	}: Props = $props();
 
-	export let fontFamily: string;
-	export let fontStyle: string;
-	export let isStyle = false;
-	export let disabled = false;
-	export let tooltip: string | undefined = undefined;
+	let open = $state(false);
+	let entries: MenuListEntry[] = $state([]);
+	let activeEntry: MenuListEntry | undefined = $state(undefined);
+	let minWidth = $state(isStyle ? 0 : 300);
 
-	let open = false;
-	let entries: MenuListEntry[] = [];
-	let activeEntry: MenuListEntry | undefined = undefined;
-	let minWidth = isStyle ? 0 : 300;
-
-	$: watchFont(fontFamily, fontStyle);
 
 	async function watchFont(..._: string[]) {
 		// We set this function's result to a local variable to avoid reading from `entries` which causes Svelte to trigger an update that results in an infinite loop
@@ -64,19 +73,19 @@
 		let style;
 
 		if (isStyle) {
-			dispatch("fontStyle", newName);
+			onfontStyle?.(newName);
 
 			family = fontFamily;
 			style = newName;
 		} else {
-			dispatch("fontFamily", newName);
+			onfontFamily?.(newName);
 
 			family = newName;
 			style = "Regular (400)";
 		}
 
 		const fontFileUrl = await fonts.getFontFileUrl(family, style);
-		dispatch("changeFont", { fontFamily: family, fontStyle: style, fontFileUrl });
+		onchangeFont?.({ fontFamily: family, fontStyle: style, fontFileUrl });
 	}
 
 	async function getEntries(): Promise<MenuListEntry[]> {
@@ -100,6 +109,9 @@
 
 		activeEntry = getActiveEntry(entries);
 	});
+	$effect(() => {
+		watchFont(fontFamily, fontStyle);
+	});
 </script>
 
 <!-- TODO: Combine this widget into the DropdownInput widget -->
@@ -110,18 +122,17 @@
 		styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}
 		{tooltip}
 		tabindex={disabled ? -1 : 0}
-		on:click={toggleOpen}
+		onclick={toggleOpen}
 		data-floating-menu-spawner
 	>
 		<TextLabel class="dropdown-label">{activeEntry?.value || ""}</TextLabel>
 		<IconLabel class="dropdown-arrow" icon="DropdownArrow" />
 	</LayoutRow>
 	<MenuList
-		on:naturalWidth={({ detail }) => isStyle && (minWidth = detail)}
 		{activeEntry}
-		on:activeEntry={({ detail }) => (activeEntry = detail)}
-		{open}
-		on:open={({ detail }) => (open = detail)}
+		onnaturalWidth={(detail) => isStyle && (minWidth = detail)}
+		onactiveEntry={(detail) => (activeEntry = detail)}
+		bind:open
 		entries={[entries]}
 		minWidth={isStyle ? 0 : minWidth}
 		virtualScrollingEntryHeight={isStyle ? 0 : 20}
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index 82a48a497..dc6f2b26f 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount, onDestroy } from "svelte";
+	import { createBubbler, preventDefault } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+	import { onMount } from "svelte";
 
 	import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS } from "@graphite/io-managers/input";
 	import { type NumberInputMode, type NumberInputIncrementBehavior } from "@graphite/messages";
@@ -12,71 +15,91 @@
 	const BUTTONS_RIGHT = 0b0000_0010;
 	const BUTTON_LEFT = 0;
 	const BUTTON_RIGHT = 2;
+	
+	interface Props {
+		// Label
+		label?: string | undefined;
+		tooltip?: string | undefined;
+		// Disabled
+		disabled?: boolean;
+		// Value
+		// When `value` is not provided (i.e. it's `undefined`), a dash is displayed.
+		value?: number | undefined; // NOTE: Do not update this directly, do so by calling `updateValue()` instead.
+		min?: number | undefined;
+		max?: number | undefined;
+		isInteger?: boolean;
+		// Number presentation
+		displayDecimalPlaces?: number;
+		unit?: string;
+		unitIsHiddenWhenEditing?: boolean;
+		// Mode behavior
+		// "Increment" shows arrows and allows dragging left/right to change the value.
+		// "Range" shows a range slider between some minimum and maximum value.
+		mode?: NumberInputMode;
+		// When `mode` is "Increment", `step` is the multiplier or addend used with `incrementBehavior`.
+		// When `mode` is "Range", `step` is the range slider's snapping increment if `isInteger` is `true`.
+		step?: number;
+		// `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.
+		incrementBehavior?: NumberInputIncrementBehavior;
+		// `rangeMin` and `rangeMax` are only applicable with a `mode` of "Range".
+		// They set the lower and upper values of the slider to drag between.
+		rangeMin?: number;
+		rangeMax?: number;
+		// Styling
+		minWidth?: number;
+		maxWidth?: number;
+		// Callbacks
+		incrementCallbackIncrease?: (() => void) | undefined;
+		incrementCallbackDecrease?: (() => void) | undefined;
+		onvalue?: (value: number | undefined) => void;
+		onstartHistoryTransaction?: () => void;
+	}
 
-	const dispatch = createEventDispatcher<{ value: number | undefined; startHistoryTransaction: undefined }>();
+	let {
+		label = undefined,
+		tooltip = undefined,
+		disabled = false,
+		value = undefined,
+		min = undefined,
+		max = undefined,
+		isInteger = false,
+		displayDecimalPlaces = 2,
+		unit = "",
+		unitIsHiddenWhenEditing = true,
+		mode = "Increment",
+		step = 1,
+		incrementBehavior = "Add",
+		rangeMin = 0,
+		rangeMax = 1,
+		minWidth = 0,
+		maxWidth = 0,
+		incrementCallbackIncrease = undefined,
+		incrementCallbackDecrease = undefined,
+		onvalue,
+		onstartHistoryTransaction,
+	}: Props = $props();
 
-	// Label
-	export let label: string | undefined = undefined;
-	export let tooltip: string | undefined = undefined;
-
-	// Disabled
-	export let disabled = false;
-
-	// Value
-	// When `value` is not provided (i.e. it's `undefined`), a dash is displayed.
-	export let value: number | undefined = undefined; // NOTE: Do not update this directly, do so by calling `updateValue()` instead.
-	export let min: number | undefined = undefined;
-	export let max: number | undefined = undefined;
-	export let isInteger = false;
-
-	// Number presentation
-	export let displayDecimalPlaces = 2;
-	export let unit = "";
-	export let unitIsHiddenWhenEditing = true;
-
-	// Mode behavior
-	// "Increment" shows arrows and allows dragging left/right to change the value.
-	// "Range" shows a range slider between some minimum and maximum value.
-	export let mode: NumberInputMode = "Increment";
-	// When `mode` is "Increment", `step` is the multiplier or addend used with `incrementBehavior`.
-	// When `mode` is "Range", `step` is the range slider's snapping increment if `isInteger` is `true`.
-	export let step = 1;
-	// `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.
-	export let incrementBehavior: NumberInputIncrementBehavior = "Add";
-	// `rangeMin` and `rangeMax` are only applicable with a `mode` of "Range".
-	// They set the lower and upper values of the slider to drag between.
-	export let rangeMin = 0;
-	export let rangeMax = 1;
-
-	// Styling
-	export let minWidth = 0;
-	export let maxWidth = 0;
-
-	// Callbacks
-	export let incrementCallbackIncrease: (() => void) | undefined = undefined;
-	export let incrementCallbackDecrease: (() => void) | undefined = undefined;
-
-	let self: FieldInput | undefined;
-	let inputRangeElement: HTMLInputElement | undefined;
-	let text = displayText(value, unit);
+	let self: FieldInput | undefined = $state();
+	let inputRangeElement: HTMLInputElement | undefined = $state();
+	let text = $state(displayText(value, unit));
 	let editing = false;
 	let isDragging = false;
 	let pressingArrow = false;
 	let repeatTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
 	// Stays in sync with a binding to the actual input range slider element.
-	let rangeSliderValue = value !== undefined ? value : 0;
+	let rangeSliderValue = $state(value !== undefined ? value : 0);
 	// Value used to render the position of the fake slider when applicable, and length of the progress colored region to the slider's left.
 	// This is the same as `rangeSliderValue` except in the "Deciding" state, when it has the previous location before the user's mousedown.
-	let rangeSliderValueAsRendered = value !== undefined ? value : 0;
+	let rangeSliderValueAsRendered = $state(value !== undefined ? value : 0);
 	// Keeps track of the state of the slider drag as the user transitions through steps of the input process.
 	// - "Ready": no interaction is happening.
 	// - "Deciding": the user has pressed down the mouse and might next decide to either drag left/right or release without dragging.
 	// - "Dragging": the user is dragging the slider left/right.
 	// - "Aborted": the user has right clicked or pressed Escape to abort the drag, but hasn't yet released all mouse buttons.
-	let rangeSliderClickDragState: "Ready" | "Deciding" | "Dragging" | "Aborted" = "Ready";
+	let rangeSliderClickDragState: "Ready" | "Deciding" | "Dragging" | "Aborted" = $state("Ready");
 	// Stores the initial value upon beginning to drag so it can be restored upon aborting. Set to `undefined` when not dragging.
 	let initialValueBeforeDragging: number | undefined = undefined;
 	// Stores the total value change during the process of dragging the slider. Set to 0 when not dragging.
@@ -84,14 +107,7 @@
 	// Track whether the Ctrl key is currently held down.
 	let ctrlKeyDown = false;
 
-	$: watchValue(value, unit);
 
-	$: sliderStepValue = isInteger ? (step === undefined ? 1 : step) : "any";
-	$: styles = {
-		...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}),
-		...(maxWidth > 0 ? { "max-width": `${maxWidth}px` } : {}),
-		...(mode === "Range" ? { "--progress-factor": Math.min(Math.max((rangeSliderValueAsRendered - rangeMin) / (rangeMax - rangeMin), 0), 1) } : {}),
-	};
 
 	// Keep track of the Ctrl key being held down.
 	const trackCtrl = (e: KeyboardEvent | MouseEvent) => (ctrlKeyDown = e.ctrlKey);
@@ -99,12 +115,16 @@
 		addEventListener("keydown", trackCtrl);
 		addEventListener("keyup", trackCtrl);
 		addEventListener("mousemove", trackCtrl);
+
+		return () => {
+			removeEventListener("keydown", trackCtrl);
+			removeEventListener("keyup", trackCtrl);
+			removeEventListener("mousemove", trackCtrl);
+		}
 	});
-	onDestroy(() => {
-		removeEventListener("keydown", trackCtrl);
-		removeEventListener("keyup", trackCtrl);
-		removeEventListener("mousemove", trackCtrl);
-	});
+	// onDestroy(() => {
+		
+	// });
 
 	// ===============================
 	// TRACKING AND UPDATING THE VALUE
@@ -152,7 +172,7 @@
 
 		text = displayText(newValueValidated, unit);
 
-		if (newValue !== undefined) dispatch("value", newValueValidated);
+		if (newValue !== undefined) onvalue?.(newValueValidated);
 
 		// For any caller that needs to know what the value was changed to, we return it here
 		return newValueValidated;
@@ -212,7 +232,7 @@
 
 		if (newValue !== undefined) {
 			const oldValue = value !== undefined && isInteger ? Math.round(value) : value;
-			if (newValue !== oldValue) dispatch("startHistoryTransaction");
+			if (newValue !== oldValue) onstartHistoryTransaction?.();
 		}
 		updateValue(newValue);
 
@@ -541,7 +561,7 @@
 	function startDragging() {
 		// This event is sent to the backend so it knows to start a transaction for the history system. See discussion for some explanation:
 		// <https://github.com/GraphiteEditor/Graphite/pull/1584#discussion_r1477592483>
-		dispatch("startHistoryTransaction");
+		onstartHistoryTransaction?.()
 	}
 
 	// We want to let the user abort while dragging the slider by right clicking or pressing Escape.
@@ -632,6 +652,15 @@
 		removeEventListener("pointermove", sliderAbortFromDragging);
 		removeEventListener("keydown", sliderAbortFromDragging);
 	}
+	$effect(() => {
+		watchValue(value, unit);
+	});
+	let sliderStepValue = $derived(isInteger ? (step === undefined ? 1 : step) : "any");
+	let styles = $derived({
+		...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}),
+		...(maxWidth > 0 ? { "max-width": `${maxWidth}px` } : {}),
+		...(mode === "Range" ? { "--progress-factor": Math.min(Math.max((rangeSliderValueAsRendered - rangeMin) / (rangeMax - rangeMin), 0), 1) } : {}),
+	});
 </script>
 
 <FieldInput
@@ -640,12 +669,11 @@
 		increment: mode === "Increment",
 		range: mode === "Range",
 	}}
-	value={text}
-	on:value={({ detail }) => (text = detail)}
-	on:textFocused={onTextFocused}
-	on:textChanged={onTextChanged}
-	on:textChangeCanceled={onTextChangeCanceled}
-	on:pointerdown={onDragPointerDown}
+	bind:value={text}
+	onfocus={onTextFocused}
+	onchange={onTextChanged}
+	ontextChangeCanceled={onTextChangeCanceled}
+	onpointerdown={onDragPointerDown}
 	{label}
 	{disabled}
 	{tooltip}
@@ -658,18 +686,18 @@
 		{#if mode === "Increment" && incrementBehavior !== "None"}
 			<button
 				class="arrow left"
-				on:pointerdown={(e) => onIncrementPointerDown(e, "Decrease")}
-				on:mousedown={incrementPressAbort}
-				on:pointerup={onIncrementPointerUp}
-				on:pointerleave={onIncrementPointerUp}
+				onpointerdown={(e) => onIncrementPointerDown(e, "Decrease")}
+				onmousedown={incrementPressAbort}
+				onpointerup={onIncrementPointerUp}
+				onpointerleave={onIncrementPointerUp}
 				tabindex="-1"
 			></button>
 			<button
 				class="arrow right"
-				on:pointerdown={(e) => onIncrementPointerDown(e, "Increase")}
-				on:mousedown={incrementPressAbort}
-				on:pointerup={onIncrementPointerUp}
-				on:pointerleave={onIncrementPointerUp}
+				onpointerdown={(e) => onIncrementPointerDown(e, "Increase")}
+				onmousedown={incrementPressAbort}
+				onpointerup={onIncrementPointerUp}
+				onpointerleave={onIncrementPointerUp}
 				tabindex="-1"
 			></button>
 		{/if}
@@ -684,16 +712,16 @@
 				max={rangeMax}
 				step={sliderStepValue}
 				bind:value={rangeSliderValue}
-				on:input={onSliderInput}
-				on:pointerup={onSliderPointerUp}
-				on:contextmenu|preventDefault
-				on:wheel={(e) => /* Stops slider eating the scroll event in Firefox */ e.target instanceof HTMLInputElement && e.target.blur()}
+				oninput={onSliderInput}
+				onpointerup={onSliderPointerUp}
+				oncontextmenu={preventDefault(bubble('contextmenu'))}
+				onwheel={(e) => /* Stops slider eating the scroll event in Firefox */ e.target instanceof HTMLInputElement && e.target.blur()}
 				bind:this={inputRangeElement}
 			/>
 			{#if rangeSliderClickDragState === "Deciding"}
-				<div class="fake-slider-thumb" />
+				<div class="fake-slider-thumb"></div>
 			{/if}
-			<div class="slider-progress" />
+			<div class="slider-progress"></div>
 		{/if}
 	{/if}
 </FieldInput>
diff --git a/frontend/src/components/widgets/inputs/RadioInput.svelte b/frontend/src/components/widgets/inputs/RadioInput.svelte
index e28848a3f..0a6f3bfa9 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.svelte
+++ b/frontend/src/components/widgets/inputs/RadioInput.svelte
@@ -1,24 +1,31 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
 	import { type RadioEntries, type RadioEntryData } from "@graphite/messages";
 
 	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 dispatch = createEventDispatcher<{ selectedIndex: number }>();
+	interface Props {
+		entries: RadioEntries;
+		selectedIndex?: number | undefined;
+		disabled?: boolean;
+		minWidth?: number;
+		onselect?: (position: number) => void;
+	}
 
-	export let entries: RadioEntries;
-	export let selectedIndex: number | undefined = undefined;
-	export let disabled = false;
-	export let minWidth = 0;
+	let {
+		entries,
+		selectedIndex = undefined,
+		disabled = false,
+		minWidth = 0,
+		onselect
+	}: Props = $props();
 
-	$: mixed = selectedIndex === undefined && !disabled;
+	let mixed = $derived(selectedIndex === undefined && !disabled);
 
 	function handleEntryClick(radioEntryData: RadioEntryData) {
 		const index = entries.indexOf(radioEntryData);
-		dispatch("selectedIndex", index);
+		onselect?.(index);
 
 		radioEntryData.action?.();
 	}
@@ -26,7 +33,7 @@
 
 <LayoutRow class="radio-input" classes={{ disabled, mixed }} styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}>
 	{#each entries as entry, index}
-		<button class:active={!mixed ? index === selectedIndex : undefined} on:click={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
+		<button class:active={!mixed ? index === selectedIndex : undefined} onclick={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
 			{#if entry.icon}
 				<IconLabel icon={entry.icon} />
 			{/if}
diff --git a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
index 14531e489..d8f2d129c 100644
--- a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
+++ b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
@@ -1,28 +1,31 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
 	import type { ReferencePoint } from "@graphite/messages";
 
-	const dispatch = createEventDispatcher<{ value: ReferencePoint }>();
+	interface Props {
+		value: string;
+		disabled?: boolean;
+		onvalue?: (point: ReferencePoint) => void;
+	}
 
-	export let value: string;
-	export let disabled = false;
+	let { value, disabled = false, onvalue }: Props = $props();
 
-	function setValue(newValue: ReferencePoint) {
-		dispatch("value", newValue);
+	function setValue(event: MouseEvent) {
+		let element = event.target as HTMLElement;
+		let position = element.dataset.position as ReferencePoint;
+		onvalue?.(position);
 	}
 </script>
 
 <div class="reference-point-input" class:disabled>
-	<button on:click={() => setValue("TopLeft")} class="row-1 col-1" class:active={value === "TopLeft"} tabindex="-1" {disabled}><div /></button>
-	<button on:click={() => setValue("TopCenter")} class="row-1 col-2" class:active={value === "TopCenter"} tabindex="-1" {disabled}><div /></button>
-	<button on:click={() => setValue("TopRight")} class="row-1 col-3" class:active={value === "TopRight"} tabindex="-1" {disabled}><div /></button>
-	<button on:click={() => setValue("CenterLeft")} class="row-2 col-1" class:active={value === "CenterLeft"} tabindex="-1" {disabled}><div /></button>
-	<button on:click={() => setValue("Center")} class="row-2 col-2" class:active={value === "Center"} tabindex="-1" {disabled}><div /></button>
-	<button on:click={() => setValue("CenterRight")} class="row-2 col-3" class:active={value === "CenterRight"} tabindex="-1" {disabled}><div /></button>
-	<button on:click={() => setValue("BottomLeft")} class="row-3 col-1" class:active={value === "BottomLeft"} tabindex="-1" {disabled}><div /></button>
-	<button on:click={() => setValue("BottomCenter")} class="row-3 col-2" class:active={value === "BottomCenter"} tabindex="-1" {disabled}><div /></button>
-	<button on:click={() => setValue("BottomRight")} class="row-3 col-3" class:active={value === "BottomRight"} tabindex="-1" {disabled}><div /></button>
+	<button onclick={setValue} data-position="TopLeft" class="row-1 col-1" class:active={value === "TopLeft"} tabindex="-1" {disabled}><div></div></button>
+	<button onclick={setValue} data-position="TopCenter" class="row-1 col-2" class:active={value === "TopCenter"} tabindex="-1" {disabled}><div></div></button>
+	<button onclick={setValue} data-position="TopRight" class="row-1 col-3" class:active={value === "TopRight"} tabindex="-1" {disabled}><div></div></button>
+	<button onclick={setValue} data-position="CenterLeft" class="row-2 col-1" class:active={value === "CenterLeft"} tabindex="-1" {disabled}><div></div></button>
+	<button onclick={setValue} data-position="Center" class="row-2 col-2" class:active={value === "Center"} tabindex="-1" {disabled}><div></div></button>
+	<button onclick={setValue} data-position="CenterRight" class="row-2 col-3" class:active={value === "CenterRight"} tabindex="-1" {disabled}><div></div></button>
+	<button onclick={setValue} data-position="BottomLeft" class="row-3 col-1" class:active={value === "BottomLeft"} tabindex="-1" {disabled}><div></div></button>
+	<button onclick={setValue} data-position="BottomCenter" class="row-3 col-2" class:active={value === "BottomCenter"} tabindex="-1" {disabled}><div></div></button>
+	<button onclick={setValue} data-position="BottomRight" class="row-3 col-3" class:active={value === "BottomRight"} tabindex="-1" {disabled}><div></div></button>
 </div>
 
 <style lang="scss" global>
diff --git a/frontend/src/components/widgets/inputs/RulerInput.svelte b/frontend/src/components/widgets/inputs/RulerInput.svelte
index 1c907bcbd..527a56958 100644
--- a/frontend/src/components/widgets/inputs/RulerInput.svelte
+++ b/frontend/src/components/widgets/inputs/RulerInput.svelte
@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-	export type RulerDirection = "Horizontal" | "Vertical";
-</script>
-
 <script lang="ts">
 	import { onMount } from "svelte";
 
@@ -10,21 +6,30 @@
 	const MINOR_MARK_THICKNESS = 6;
 	const MICRO_MARK_THICKNESS = 3;
 
-	export let direction: RulerDirection = "Vertical";
-	export let origin: number;
-	export let numberInterval: number;
-	export let majorMarkSpacing: number;
-	export let minorDivisions = 5;
-	export let microDivisions = 2;
+	interface Props {
+		direction?: Graphite.Axis;
+		origin: number;
+		numberInterval: number;
+		majorMarkSpacing: number;
+		minorDivisions?: number;
+		microDivisions?: number;
+	}
 
-	let rulerInput: HTMLDivElement | undefined;
-	let rulerLength = 0;
-	let svgBounds = { width: "0px", height: "0px" };
+	let {
+		direction = "Vertical",
+		origin,
+		numberInterval,
+		majorMarkSpacing,
+		minorDivisions = 5,
+		microDivisions = 2
+	}: Props = $props();
 
-	$: svgPath = computeSvgPath(direction, origin, majorMarkSpacing, minorDivisions, microDivisions, rulerLength);
-	$: svgTexts = computeSvgTexts(direction, origin, majorMarkSpacing, numberInterval, rulerLength);
+	let rulerInput: HTMLDivElement | undefined = $state();
+	let rulerLength = $state(0);
+	let svgBounds = $state({ width: "0px", height: "0px" });
 
-	function computeSvgPath(direction: RulerDirection, origin: number, majorMarkSpacing: number, minorDivisions: number, microDivisions: number, rulerLength: number): string {
+
+	function computeSvgPath(direction: Graphite.Axis, origin: number, majorMarkSpacing: number, minorDivisions: number, microDivisions: number, rulerLength: number): string {
 		const isVertical = direction === "Vertical";
 		const lineDirection = isVertical ? "H" : "V";
 
@@ -51,7 +56,7 @@
 		return dPathAttribute;
 	}
 
-	function computeSvgTexts(direction: RulerDirection, origin: number, majorMarkSpacing: number, numberInterval: number, rulerLength: number): { transform: string; text: string }[] {
+	function computeSvgTexts(direction: Graphite.Axis, origin: number, majorMarkSpacing: number, numberInterval: number, rulerLength: number): { transform: string; text: string }[] {
 		const isVertical = direction === "Vertical";
 
 		const offsetStart = mod(origin, majorMarkSpacing);
@@ -102,6 +107,8 @@
 	}
 
 	onMount(resize);
+	let svgPath = $derived(computeSvgPath(direction, origin, majorMarkSpacing, minorDivisions, microDivisions, rulerLength));
+	let svgTexts = $derived(computeSvgTexts(direction, origin, majorMarkSpacing, numberInterval, rulerLength));
 </script>
 
 <div class={`ruler-input ${direction.toLowerCase()}`} bind:this={rulerInput}>
diff --git a/frontend/src/components/widgets/inputs/ScrollbarInput.svelte b/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
index ef96d8959..c22422cce 100644
--- a/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
+++ b/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
@@ -1,10 +1,4 @@
-<script lang="ts" context="module">
-	export type ScrollbarDirection = "Horizontal" | "Vertical";
-</script>
-
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
 	import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS, PRESS_REPEAT_INTERVAL_RAPID_MS } from "@graphite/io-managers/input";
 
 	const ARROW_CLICK_DISTANCE = 0.05;
@@ -19,26 +13,38 @@
 
 	const clamp01 = (value: number): number => Math.min(Math.max(value, 0), 1);
 
-	const dispatch = createEventDispatcher<{ trackShift: number; thumbPosition: number; thumbDragStart: undefined; thumbDragEnd: undefined; thumbDragAbort: undefined }>();
+	interface Props {
+		direction?: Graphite.Axis;
+		thumbPosition?: number;
+		thumbLength?: number;
+		ontrackShift?: (trackShift: number) => void;
+		onthumbPosition?: (trackShift: number) => void;
+		onthumbDragEnd?: () => void;
+		onthumbDragStart?: () => void;
+		onthumbDragAbort?: () => void;
+	}
 
-	export let direction: ScrollbarDirection = "Vertical";
-	export let thumbPosition = 0.5;
-	export let thumbLength = 0.5;
+	let { 
+		direction = "Vertical", 
+		thumbPosition = 0.5, 
+		thumbLength = 0.5,
+		ontrackShift,
+		onthumbPosition,
+		onthumbDragEnd,
+		onthumbDragStart,
+		onthumbDragAbort,
+	}: Props = $props();
 
-	let scrollTrack: HTMLDivElement | undefined;
-	let dragging = false;
+	let scrollTrack: HTMLDivElement | undefined = $state();
+	let dragging = $state(false);
 	let pressingTrack = false;
 	let pressingArrow = false;
 	let repeatTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
 	let pointerPositionLastFrame = 0;
-	let thumbTop: string | undefined = undefined;
-	let thumbBottom: string | undefined = undefined;
-	let thumbLeft: string | undefined = undefined;
-	let thumbRight: string | undefined = undefined;
 
-	$: start = thumbToTrack(thumbLength, thumbPosition) - thumbLength / 2;
-	$: end = 1 - thumbToTrack(thumbLength, thumbPosition) - thumbLength / 2;
-	$: [thumbTop, thumbBottom, thumbLeft, thumbRight] = direction === "Vertical" ? [`${start * 100}%`, `${end * 100}%`, "0%", "0%"] : ["0%", "0%", `${start * 100}%`, `${end * 100}%`];
+	let start = $derived(thumbToTrack(thumbLength, thumbPosition) - thumbLength / 2);
+	let end = $derived(1 - thumbToTrack(thumbLength, thumbPosition) - thumbLength / 2);
+	let [thumbTop, thumbBottom, thumbLeft, thumbRight] = $derived(direction === "Vertical" ? [`${start * 100}%`, `${end * 100}%`, "0%", "0%"] : ["0%", "0%", `${start * 100}%`, `${end * 100}%`]);
 
 	function trackLength(): number | undefined {
 		if (scrollTrack === undefined) return undefined;
@@ -54,7 +60,7 @@
 		if (dragging) return;
 
 		dragging = true;
-		dispatch("thumbDragStart");
+		onthumbDragStart?.();
 		pointerPositionLastFrame = pointerPosition(e);
 
 		addEvents();
@@ -65,14 +71,14 @@
 			if (!pressingArrow) return;
 
 			const distance = afterInitialDelay ? ARROW_REPEAT_DISTANCE : ARROW_CLICK_DISTANCE;
-			dispatch("trackShift", -direction * distance);
+			ontrackShift?.( -direction * distance);
 
 			if (afterInitialDelay) repeatTimeout = setTimeout(sendMove, PRESS_REPEAT_INTERVAL_RAPID_MS);
 			afterInitialDelay = true;
 		};
 
 		pressingArrow = true;
-		dispatch("thumbDragStart");
+		onthumbDragStart?.();
 		let afterInitialDelay = false;
 		sendMove();
 		repeatTimeout = setTimeout(sendMove, PRESS_REPEAT_DELAY_MS);
@@ -108,13 +114,13 @@
 			}
 
 			const move = newPointer - oldPointer < 0 ? 1 : -1;
-			dispatch("trackShift", move);
+			ontrackShift?.(move);
 
 			if (afterInitialDelay) repeatTimeout = setTimeout(sendMove, PRESS_REPEAT_INTERVAL_MS);
 			afterInitialDelay = true;
 		};
 
-		dispatch("thumbDragStart");
+		onthumbDragStart?.();
 		pressingTrack = true;
 		let afterInitialDelay = false;
 		sendMove();
@@ -128,17 +134,17 @@
 			pressingTrack = false;
 			pressingArrow = false;
 			clearTimeout(repeatTimeout);
-			dispatch("thumbDragAbort");
+			onthumbDragAbort?.();
 		}
 
 		if (dragging) {
 			dragging = false;
-			dispatch("thumbDragAbort");
+			onthumbDragAbort?.();
 		}
 	}
 
 	function onPointerUp() {
-		if (dragging) dispatch("thumbDragEnd");
+		if (dragging) onthumbDragEnd?.();
 
 		dragging = false;
 		pressingTrack = false;
@@ -172,7 +178,7 @@
 			const dragDelta = positionPositionThisFrame - pointerPositionLastFrame;
 			const movement = dragDelta / (length * (1 - thumbLength));
 			const newThumbPosition = clamp01(thumbPosition + movement);
-			dispatch("thumbPosition", newThumbPosition);
+			onthumbPosition?.(newThumbPosition)
 
 			pointerPositionLastFrame = positionPositionThisFrame;
 
@@ -207,11 +213,11 @@
 </script>
 
 <div class={`scrollbar-input ${direction.toLowerCase()}`}>
-	<button class="arrow decrease" on:pointerdown={() => pressArrow(-1)} tabindex="-1" data-scrollbar-arrow></button>
-	<div class="scroll-track" on:pointerdown={pressTrack} bind:this={scrollTrack}>
-		<div class="scroll-thumb" on:pointerdown={dragThumb} class:dragging style:top={thumbTop} style:bottom={thumbBottom} style:left={thumbLeft} style:right={thumbRight} />
+	<button class="arrow decrease" onpointerdown={() => pressArrow(-1)} tabindex="-1" data-scrollbar-arrow></button>
+	<div class="scroll-track" onpointerdown={pressTrack} bind:this={scrollTrack}>
+		<div class="scroll-thumb" onpointerdown={dragThumb} class:dragging style:top={thumbTop} style:bottom={thumbBottom} style:left={thumbLeft} style:right={thumbRight}></div>
 	</div>
-	<button class="arrow increase" on:pointerdown={() => pressArrow(1)} tabindex="-1" data-scrollbar-arrow></button>
+	<button class="arrow increase" onpointerdown={() => pressArrow(1)} tabindex="-1" data-scrollbar-arrow></button>
 </div>
 
 <style lang="scss" global>
diff --git a/frontend/src/components/widgets/inputs/SpectrumInput.svelte b/frontend/src/components/widgets/inputs/SpectrumInput.svelte
index cabc70b45..a09ba561a 100644
--- a/frontend/src/components/widgets/inputs/SpectrumInput.svelte
+++ b/frontend/src/components/widgets/inputs/SpectrumInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onDestroy } from "svelte";
+	import { onMount } from "svelte";
 
 	import { Color, type Gradient } from "@graphite/messages";
 
@@ -10,22 +10,33 @@
 	const BUTTON_LEFT = 0;
 	const BUTTON_RIGHT = 2;
 
-	const dispatch = createEventDispatcher<{ activeMarkerIndexChange: number | undefined; gradient: Gradient; dragging: boolean }>();
+	interface Props {
+		activeMarkerIndex: number | undefined;
+		drag: boolean;
+		gradient: Gradient;
+		ongradient?: (gradient: Gradient) => void;
+		onactiveMarkerIndexChange?: (index: number | undefined) => void;
+	}
 
-	export let gradient: Gradient;
-	export let activeMarkerIndex = 0 as number | undefined;
+	let { 
+		activeMarkerIndex = 0,
+		drag = $bindable(), 
+		gradient,
+		ongradient,
+		onactiveMarkerIndexChange,
+	}: Props = $props();
 	// export let disabled = false;
 	// export let tooltip: string | undefined = undefined;
 
-	let markerTrack: LayoutRow | undefined = undefined;
+	let markerTrack: LayoutRow | undefined = $state(undefined);
 	let positionRestore: number | undefined = undefined;
 	let deletionRestore: boolean | undefined = undefined;
 
 	function markerPointerDown(e: PointerEvent, index: number) {
 		// Left-click to select and begin potentially dragging
 		if (e.button === BUTTON_LEFT) {
-			activeMarkerIndex = index;
-			dispatch("activeMarkerIndexChange", index);
+			// activeMarkerIndex = index;
+			onactiveMarkerIndexChange?.(index);
 			addEvents();
 			return;
 		}
@@ -69,11 +80,9 @@
 		if (index === -1) index = gradient.stops.length;
 
 		gradient.stops.splice(index, 0, { position, color });
-		activeMarkerIndex = index;
 		deletionRestore = true;
-
-		dispatch("activeMarkerIndexChange", index);
-		dispatch("gradient", gradient);
+		onactiveMarkerIndexChange?.(index);
+		ongradient?.(gradient)
 
 		addEvents();
 	}
@@ -91,15 +100,10 @@
 		if (gradient.stops.length <= 2) return;
 
 		gradient.stops.splice(index, 1);
-		if (gradient.stops.length === 0) {
-			activeMarkerIndex = undefined;
-		} else {
-			activeMarkerIndex = Math.max(0, Math.min(gradient.stops.length - 1, index));
-		}
+		let newMarkerIndex = gradient.stops.length === 0 ? undefined : Math.max(0, Math.min(gradient.stops.length - 1, index)); 
 		deletionRestore = undefined;
-
-		dispatch("activeMarkerIndexChange", activeMarkerIndex);
-		dispatch("gradient", gradient);
+		onactiveMarkerIndexChange?.(newMarkerIndex);
+		ongradient?.(gradient);
 	}
 
 	function moveMarker(e: PointerEvent, index: number) {
@@ -113,7 +117,7 @@
 		if (deletionRestore === undefined) {
 			deletionRestore = false;
 
-			dispatch("dragging", true);
+			drag = true;
 		}
 
 		setPosition(index, position);
@@ -124,10 +128,9 @@
 		active.position = position;
 		gradient.stops.sort((a, b) => a.position - b.position);
 		if (gradient.stops.indexOf(active) !== activeMarkerIndex) {
-			activeMarkerIndex = gradient.stops.indexOf(active);
-			dispatch("activeMarkerIndexChange", gradient.stops.indexOf(active));
+			onactiveMarkerIndexChange?.(gradient.stops.indexOf(active));
 		}
-		dispatch("gradient", gradient);
+		ongradient?.(gradient);
 	}
 
 	function abortDrag() {
@@ -148,7 +151,7 @@
 		positionRestore = undefined;
 		deletionRestore = undefined;
 
-		dispatch("dragging", false);
+		drag = false;
 	}
 
 	function onPointerMove(e: PointerEvent) {
@@ -187,11 +190,14 @@
 		document.removeEventListener("keydown", onKeyDown);
 	}
 
-	document.addEventListener("keydown", deleteStop);
-	onDestroy(() => {
-		removeEvents();
-		document.removeEventListener("keydown", deleteStop);
-	});
+	onMount(() => {
+		document.addEventListener("keydown", deleteStop);
+
+		return () => {
+			removeEvents();
+			document.removeEventListener("keydown", deleteStop);
+		}
+	})
 
 	// # Backend -> Frontend
 	// Populate(gradient, { position, color }[], active) // The only way indexes get changed. Frontend drops marker if it's being dragged.
@@ -218,7 +224,7 @@
 		"--gradient-stops": gradient.toLinearGradientCSS(),
 	}}
 >
-	<LayoutRow class="gradient-strip" on:pointerdown={insertStop}></LayoutRow>
+	<LayoutRow class="gradient-strip" onpointerdown={insertStop}></LayoutRow>
 	<LayoutRow class="marker-track" bind:this={markerTrack}>
 		{#each gradient.stops as marker, index}
 			<svg
@@ -226,7 +232,7 @@
 				class:active={index === activeMarkerIndex}
 				style:--marker-position={marker.position}
 				style:--marker-color={marker.color.toRgbCSS()}
-				on:pointerdown={(e) => markerPointerDown(e, index)}
+				onpointerdown={(e) => markerPointerDown(e, index)}
 				data-gradient-marker
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 12 12"
diff --git a/frontend/src/components/widgets/inputs/TextAreaInput.svelte b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
index 440fb3533..c3971fb2c 100644
--- a/frontend/src/components/widgets/inputs/TextAreaInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
@@ -1,16 +1,23 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
 	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
 
-	const dispatch = createEventDispatcher<{ commitText: string }>();
+	interface Props {
+		value: string;
+		label?: string | undefined;
+		tooltip?: string | undefined;
+		disabled?: boolean;
+		oncommitText?: (arg1: string) => void;
+	}
 
-	export let value: string;
-	export let label: string | undefined = undefined;
-	export let tooltip: string | undefined = undefined;
-	export let disabled = false;
+	let {
+		value = $bindable(),
+		label = undefined,
+		tooltip = undefined,
+		disabled = false,
+		oncommitText
+	}: Props = $props();
 
-	let self: FieldInput | undefined;
+	let self: FieldInput | undefined = $state();
 	let editing = false;
 
 	function onTextFocused() {
@@ -26,7 +33,7 @@
 		onTextChangeCanceled();
 
 		// TODO: Find a less hacky way to do this
-		if (self) dispatch("commitText", self.getValue());
+		if (self) oncommitText?.(self.getValue());
 
 		// Required if value is not changed by the parent component upon update:value event
 		self?.setInputElementValue(self.getValue());
@@ -46,11 +53,10 @@
 <FieldInput
 	class="text-area-input"
 	classes={{ "has-label": Boolean(label) }}
-	{value}
-	on:value
-	on:textFocused={onTextFocused}
-	on:textChanged={onTextChanged}
-	on:textChangeCanceled={onTextChangeCanceled}
+	bind:value
+	onfocus={onTextFocused}
+	onchange={onTextChanged}
+	ontextChangeCanceled={onTextChangeCanceled}
 	textarea={true}
 	spellcheck={true}
 	{label}
diff --git a/frontend/src/components/widgets/inputs/TextInput.svelte b/frontend/src/components/widgets/inputs/TextInput.svelte
index b9a794d14..cbeefc0ad 100644
--- a/frontend/src/components/widgets/inputs/TextInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextInput.svelte
@@ -1,27 +1,37 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
 	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
 
-	const dispatch = createEventDispatcher<{ commitText: string }>();
+	interface Props {
+		// Label
+		label?: string | undefined;
+		tooltip?: string | undefined;
+		placeholder?: string | undefined;
+		// Disabled
+		disabled?: boolean;
+		// Value
+		value: string;
+		// Styling
+		centered?: boolean;
+		minWidth?: number;
+		class?: string;
+		classes?: Record<string, boolean>;
+		oncommitText?: (arg1: string) => void;
+	}
 
-	// Label
-	export let label: string | undefined = undefined;
-	export let tooltip: string | undefined = undefined;
-	export let placeholder: string | undefined = undefined;
-	// Disabled
-	export let disabled = false;
-	// Value
-	export let value: string;
-	// Styling
-	export let centered = false;
-	export let minWidth = 0;
+	let {
+		label = undefined,
+		tooltip = undefined,
+		placeholder = undefined,
+		disabled = false,
+		value = $bindable(),
+		centered = false,
+		minWidth = 0,
+		class: className = "",
+		classes = {},
+		oncommitText,
+	}: Props = $props();
 
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
-
-	let self: FieldInput | undefined;
+	let self: FieldInput | undefined = $state();
 	let editing = false;
 
 	function onTextFocused() {
@@ -39,7 +49,7 @@
 		onTextChangeCanceled();
 
 		// TODO: Find a less hacky way to do this
-		if (self) dispatch("commitText", self.getValue());
+		if (self) oncommitText?.(self.getValue());
 
 		// Required if value is not changed by the parent component upon update:value event
 		self?.setInputElementValue(self.getValue());
@@ -64,11 +74,10 @@
 	class={`text-input ${className}`.trim()}
 	classes={{ centered, ...classes }}
 	styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}
-	{value}
-	on:value
-	on:textFocused={onTextFocused}
-	on:textChanged={onTextChanged}
-	on:textChangeCanceled={onTextChangeCanceled}
+	bind:value
+	onfocus={onTextFocused}
+	onchange={onTextChanged}
+	ontextChangeCanceled={onTextChangeCanceled}
 	spellcheck={true}
 	{label}
 	{disabled}
diff --git a/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte b/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
index cff3beacb..5f6add784 100644
--- a/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
+++ b/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
@@ -10,11 +10,15 @@
 
 	const editor = getContext<Editor>("editor");
 
-	export let primary: Color;
-	export let secondary: Color;
+	interface Props {
+		primary: Color;
+		secondary: Color;
+	}
 
-	let primaryOpen = false;
-	let secondaryOpen = false;
+	let { primary, secondary }: Props = $props();
+
+	let primaryOpen = $state(false);
+	let secondaryOpen = $state(false);
 
 	function clickPrimarySwatch() {
 		primaryOpen = true;
@@ -37,22 +41,20 @@
 
 <LayoutCol class="working-colors-button">
 	<LayoutRow class="primary swatch">
-		<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
+		<button onclick={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
 		<ColorPicker
-			open={primaryOpen}
-			on:open={({ detail }) => (primaryOpen = detail)}
+			bind:open={primaryOpen}
 			colorOrGradient={primary}
-			on:colorOrGradient={({ detail }) => detail instanceof Color && primaryColorChanged(detail)}
+			oncolorOrGradient={(detail) => detail instanceof Color && primaryColorChanged(detail)}
 			direction="Right"
 		/>
 	</LayoutRow>
 	<LayoutRow class="secondary swatch">
-		<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
+		<button onclick={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
 		<ColorPicker
-			open={secondaryOpen}
-			on:open={({ detail }) => (secondaryOpen = detail)}
+			bind:open={secondaryOpen}
 			colorOrGradient={secondary}
-			on:colorOrGradient={({ detail }) => detail instanceof Color && secondaryColorChanged(detail)}
+			oncolorOrGradient={(detail) => detail instanceof Color && secondaryColorChanged(detail)}
 			direction="Right"
 		/>
 	</LayoutRow>
diff --git a/frontend/src/components/widgets/labels/IconLabel.svelte b/frontend/src/components/widgets/labels/IconLabel.svelte
index 3edb01a78..f72b522bb 100644
--- a/frontend/src/components/widgets/labels/IconLabel.svelte
+++ b/frontend/src/components/widgets/labels/IconLabel.svelte
@@ -3,15 +3,25 @@
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
-	export let icon: IconName;
-	export let iconSizeOverride: number | undefined = undefined;
-	export let disabled = false;
-	export let tooltip: string | undefined = undefined;
+	interface Props {
+		class?: string;
+		classes?: Record<string, boolean>;
+		icon: IconName;
+		iconSizeOverride?: number | undefined;
+		disabled?: boolean;
+		tooltip?: string | undefined;
+	}
 
-	$: iconSizeClass = ((icon: IconName) => {
+	let {
+		class: className = "",
+		classes = {},
+		icon,
+		iconSizeOverride = undefined,
+		disabled = false,
+		tooltip = undefined
+	}: Props = $props();
+
+	let iconSizeClass = $derived(((icon: IconName) => {
 		const iconData = ICONS[icon];
 		if (!iconData) {
 			// eslint-disable-next-line no-console
@@ -20,10 +30,10 @@
 		}
 		if (iconData.size === undefined) return "";
 		return `size-${iconSizeOverride || iconData.size}`;
-	})(icon);
-	$: extraClasses = Object.entries(classes)
+	})(icon));
+	let extraClasses = $derived(Object.entries(classes)
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
-		.join(" ");
+		.join(" "));
 </script>
 
 <LayoutRow class={`icon-label ${iconSizeClass} ${className} ${extraClasses}`.trim()} classes={{ disabled }} {tooltip}>
diff --git a/frontend/src/components/widgets/labels/Separator.svelte b/frontend/src/components/widgets/labels/Separator.svelte
index 0c210b4d1..f7ff01257 100644
--- a/frontend/src/components/widgets/labels/Separator.svelte
+++ b/frontend/src/components/widgets/labels/Separator.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
 	import { type SeparatorDirection, type SeparatorType } from "@graphite/messages";
 
-	export let direction: SeparatorDirection = "Horizontal";
-	export let type: SeparatorType = "Unrelated";
+	interface Props {
+		direction?: SeparatorDirection;
+		type?: SeparatorType;
+	}
+
+	let { direction = "Horizontal", type = "Unrelated" }: Props = $props();
 </script>
 
 <div class={`separator ${direction.toLowerCase()} ${type.toLowerCase()}`}>
 	{#if type === "Section"}
-		<div />
+		<div></div>
 	{/if}
 </div>
 
diff --git a/frontend/src/components/widgets/labels/TextLabel.svelte b/frontend/src/components/widgets/labels/TextLabel.svelte
index 540aa1648..6f7583ccf 100644
--- a/frontend/src/components/widgets/labels/TextLabel.svelte
+++ b/frontend/src/components/widgets/labels/TextLabel.svelte
@@ -1,26 +1,48 @@
 <script lang="ts">
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
-	let styleName = "";
-	export { styleName as style };
-	export let styles: Record<string, string | number | undefined> = {};
-	export let disabled = false;
-	export let bold = false;
-	export let italic = false;
-	export let centerAlign = false;
-	export let tableAlign = false;
-	export let minWidth = 0;
-	export let multiline = false;
-	export let tooltip: string | undefined = undefined;
-	export let checkboxId: bigint | undefined = undefined;
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	
+	type LabelHTMLElementProps = SvelteHTMLElements["label"];
+	
+	interface Props extends LabelHTMLElementProps {
+		class?: string;
+		classes?: Record<string, boolean>;
+		style?: string;
+		styles?: Record<string, string | number | undefined>;
+		disabled?: boolean;
+		bold?: boolean;
+		italic?: boolean;
+		centerAlign?: boolean;
+		tableAlign?: boolean;
+		minWidth?: number;
+		multiline?: boolean;
+		tooltip?: string | undefined;
+		checkboxId?: bigint | undefined;
+		children?: import('svelte').Snippet;
+	}
 
-	$: extraClasses = Object.entries(classes)
+	let {
+		class: className = "",
+		classes = {},
+		style: styleName = "",
+		styles = {},
+		disabled = false,
+		bold = false,
+		italic = false,
+		centerAlign = false,
+		tableAlign = false,
+		minWidth = 0,
+		multiline = false,
+		tooltip = undefined,
+		checkboxId = undefined,
+		children
+	}: Props = $props();
+
+	let extraClasses = $derived(Object.entries(classes)
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
-		.join(" ");
-	$: extraStyles = Object.entries(styles)
+		.join(" "));
+	let extraStyles = $derived(Object.entries(styles)
 		.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
-		.join(" ");
+		.join(" "));
 </script>
 
 <label
@@ -36,7 +58,7 @@
 	title={tooltip}
 	for={checkboxId !== undefined ? `checkbox-input-${checkboxId}` : undefined}
 >
-	<slot />
+	{@render children?.()}
 </label>
 
 <style lang="scss" global>
diff --git a/frontend/src/components/widgets/labels/UserInputLabel.svelte b/frontend/src/components/widgets/labels/UserInputLabel.svelte
index f19d99d5e..d203a3382 100644
--- a/frontend/src/components/widgets/labels/UserInputLabel.svelte
+++ b/frontend/src/components/widgets/labels/UserInputLabel.svelte
@@ -34,14 +34,21 @@
 
 	const fullscreen = getContext<FullscreenState>("fullscreen");
 
-	export let keysWithLabelsGroups: LayoutKeysGroup[] = [];
-	export let mouseMotion: MouseMotion | undefined = undefined;
-	export let requiresLock = false;
-	export let textOnly = false;
+	interface Props {
+		keysWithLabelsGroups?: LayoutKeysGroup[];
+		mouseMotion?: MouseMotion | undefined;
+		requiresLock?: boolean;
+		textOnly?: boolean;
+		children?: import('svelte').Snippet;
+	}
 
-	$: keyboardLockInfoMessage = watchKeyboardLockInfoMessage(fullscreen.keyboardLockApiSupported);
-
-	$: displayKeyboardLockNotice = requiresLock && !$fullscreen.keyboardLocked;
+	let {
+		keysWithLabelsGroups = [],
+		mouseMotion = undefined,
+		requiresLock = false,
+		textOnly = false,
+		children
+	}: Props = $props();
 
 	function watchKeyboardLockInfoMessage(keyboardLockApiSupported: boolean): string {
 		const RESERVED = "This hotkey is reserved by the browser. ";
@@ -114,6 +121,8 @@
 				return undefined;
 		}
 	}
+	let keyboardLockInfoMessage = $derived(watchKeyboardLockInfoMessage(fullscreen.keyboardLockApiSupported));
+	let displayKeyboardLockNotice = $derived(requiresLock && !$fullscreen.keyboardLocked);
 </script>
 
 {#if displayKeyboardLockNotice}
@@ -139,9 +148,9 @@
 				<IconLabel icon={mouseHintIcon(mouseMotion)} />
 			</div>
 		{/if}
-		{#if $$slots.default}
+		{#if children}
 			<div class="hint-text">
-				<slot />
+				{@render children?.()}
 			</div>
 		{/if}
 	</LayoutRow>
diff --git a/frontend/src/components/window/title-bar/TitleBar.svelte b/frontend/src/components/window/title-bar/TitleBar.svelte
index a41b26d0b..bca838a83 100644
--- a/frontend/src/components/window/title-bar/TitleBar.svelte
+++ b/frontend/src/components/window/title-bar/TitleBar.svelte
@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-	export type Platform = "Windows" | "Mac" | "Linux" | "Web";
-</script>
-
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
 
@@ -17,7 +13,7 @@
 	import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
 	import WindowTitle from "@graphite/components/window/title-bar/WindowTitle.svelte";
 
-	export let platform: Platform;
+	export let platform: Graphite.Platform;
 	export let maximized: boolean;
 
 	const editor = getContext<Editor>("editor");
diff --git a/frontend/src/components/window/workspace/Panel.svelte b/frontend/src/components/window/workspace/Panel.svelte
index 551dfca2c..d95813a32 100644
--- a/frontend/src/components/window/workspace/Panel.svelte
+++ b/frontend/src/components/window/workspace/Panel.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import Document from "@graphite/components/panels/Document.svelte";
 	import Layers from "@graphite/components/panels/Layers.svelte";
 	import Properties from "@graphite/components/panels/Properties.svelte";
@@ -34,15 +34,27 @@
 
 	const editor = getContext<Editor>("editor");
 
-	export let tabMinWidths = false;
-	export let tabCloseButtons = false;
-	export let tabLabels: { name: string; tooltip?: string }[];
-	export let tabActiveIndex: number;
-	export let panelType: PanelType | undefined = undefined;
-	export let clickAction: ((index: number) => void) | undefined = undefined;
-	export let closeAction: ((index: number) => void) | undefined = undefined;
+	interface Props {
+		tabMinWidths?: boolean;
+		tabCloseButtons?: boolean;
+		tabLabels: { name: string; tooltip?: string }[];
+		tabActiveIndex: number;
+		panelType?: PanelType | undefined;
+		clickAction?: ((index: number) => void) | undefined;
+		closeAction?: ((index: number) => void) | undefined;
+	}
 
-	let tabElements: (LayoutRow | undefined)[] = [];
+	let {
+		tabMinWidths = false,
+		tabCloseButtons = false,
+		tabLabels,
+		tabActiveIndex,
+		panelType = undefined,
+		clickAction = undefined,
+		closeAction = undefined
+	}: Props = $props();
+
+	let tabElements: (LayoutRow | undefined)[] = $state([]);
 
 	function platformModifiers(reservedKey: boolean): LayoutKeysGroup {
 		// TODO: Remove this by properly feeding these keys from a layout provided by the backend
@@ -90,7 +102,7 @@
 	}
 </script>
 
-<LayoutCol class="panel" on:pointerdown={() => panelType && editor.handle.setActivePanel(panelType)}>
+<LayoutCol class="panel" onpointerdown={() => panelType && editor.handle.setActivePanel(panelType)}>
 	<LayoutRow class="tab-bar" classes={{ "min-widths": tabMinWidths }}>
 		<LayoutRow class="tab-group" scrollableX={true}>
 			{#each tabLabels as tabLabel, tabIndex}
@@ -98,18 +110,18 @@
 					class="tab"
 					classes={{ active: tabIndex === tabActiveIndex }}
 					tooltip={tabLabel.tooltip || undefined}
-					on:click={(e) => {
+					onclick={(e) => {
 						e.stopPropagation();
 						clickAction?.(tabIndex);
 					}}
-					on:auxclick={(e) => {
+					onauxclick={(e) => {
 						// Middle mouse button click
 						if (e.button === BUTTON_MIDDLE) {
 							e.stopPropagation();
 							closeAction?.(tabIndex);
 						}
 					}}
-					on:mouseup={(e) => {
+					onmouseup={(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.
@@ -124,7 +136,7 @@
 					<TextLabel>{tabLabel.name}</TextLabel>
 					{#if tabCloseButtons}
 						<IconButton
-							action={(e) => {
+							onclick={(e) => {
 								e?.stopPropagation();
 								closeAction?.(tabIndex);
 							}}
@@ -142,41 +154,44 @@
 	</LayoutRow>
 	<LayoutCol class="panel-body">
 		{#if panelType}
-			<svelte:component this={PANEL_COMPONENTS[panelType]} />
+			{@const SvelteComponent = PANEL_COMPONENTS[panelType]}
+			<SvelteComponent />
 		{:else}
-			<LayoutCol class="empty-panel" on:dragover={(e) => e.preventDefault()} on:drop={dropFile}>
+			<LayoutCol class="empty-panel" ondragover={(e) => e.preventDefault()} ondrop={dropFile}>
 				<LayoutCol class="content">
 					<LayoutRow class="logotype">
 						<IconLabel icon="GraphiteLogotypeSolid" />
 					</LayoutRow>
 					<LayoutRow class="actions">
 						<table>
-							<tr>
-								<td>
-									<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
-								</td>
-								<td>
-									<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
-								</td>
-								<td>
-									<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
-								</td>
-							</tr>
-							<tr>
-								<td colspan="2">
-									<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
-								</td>
-							</tr>
-							<tr>
-								<td colspan="2">
-									<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
-								</td>
-							</tr>
+							<tbody>
+								<tr>
+									<td>
+										<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
+									</td>
+									<td>
+										<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
+									</td>
+									<td>
+										<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
+									</td>
+								</tr>
+								<tr>
+									<td colspan="2">
+										<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
+									</td>
+								</tr>
+								<tr>
+									<td colspan="2">
+										<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
+									</td>
+								</tr>
+							</tbody>
 						</table>
 					</LayoutRow>
 				</LayoutCol>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 85ba09ef1..c798ceaae 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -35,17 +35,21 @@ const ALLOWED_LICENSES = [
 ];
 
 const runesGlobs = [
-	"**/components/*.svelte"
-	"**/components/*.svelte"
-	"**/components/*.svelte"
+	"**/components/layout/*.svelte",
+	"**/components/widgets/labels/*.svelte",
+	"**/components/widgets/buttons/*.svelte",
+	"**/components/widgets/inputs/*.svelte",
+	"**/components/floating-menus/MenuList.svelte",
+	"**/components/floating-menus/ColorPicker.svelte",
+	"**/components/floating-menus/Dialog.svelte",
+	"**/components/window/workspace/Panel.svelte",
 ];
 
 function forceRunes(filePath: string): boolean {
 	const relativePath = filePath.slice(filePath.indexOf("src"));
 	// Test the file path against each glob pattern
 	return runesGlobs.some((min) => {
-		console.log("🚀 ~ forceRunes ~ filePath:", relativePath, minimatch(filePath, min));
-		return minimatch(filePath, min);
+		return minimatch(relativePath, min);
 	});
 }
 
@@ -62,9 +66,12 @@ export default defineConfig({
 				defaultHandler?.(warning);
 			},
 			dynamicCompileOptions({ filename, compileOptions }) {
-				console.log("🚀 ~ dynamicCompileOptions ~ compileOptions:", compileOptions.runes);
 				if (forceRunes(filename) && !compileOptions.runes) {
+					console.log(`🚀 ~ runes ~`, filename, true);
+
 					return { runes: true };
+				} else {
+					console.log(`🚀 ~ runes ~`, filename, false);
 				}
 			},
 		}),