From d7bb146da9bbb4690faa125523ab6f38c2340d41 Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Mon, 16 Jun 2025 18:55:17 +0530
Subject: [PATCH 01/16] Phase 1: bump svelte version and opt in to runes mode

---
 frontend/package-lock.json | 835 +++++++++++++++++++++++--------------
 frontend/package.json      |   9 +-
 frontend/src/app.d.ts      |  10 +
 frontend/src/main.ts       |   4 +-
 frontend/src/vite-env.d.ts |  15 +
 frontend/tsconfig.json     |   1 -
 frontend/vite.config.ts    |  26 +-
 7 files changed, 575 insertions(+), 325 deletions(-)
 create mode 100644 frontend/src/app.d.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3d12766ca6..3258b28b0f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,7 +14,7 @@
 				"reflect-metadata": "^0.2.2"
 			},
 			"devDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^3.1.2",
+				"@sveltejs/vite-plugin-svelte": "^5.1.0",
 				"@types/node": "^22.6.1",
 				"@typescript-eslint/eslint-plugin": "^8.7.0",
 				"@typescript-eslint/parser": "^8.7.0",
@@ -24,18 +24,19 @@
 				"eslint-import-resolver-typescript": "^3.6.3",
 				"eslint-plugin-import": "^2.30.0",
 				"eslint-plugin-prettier": "^5.2.1",
-				"eslint-plugin-svelte": "^2.44.0",
+				"eslint-plugin-svelte": "^3.9.2",
+				"minimatch": "^10.0.3",
 				"postcss": "^8.4.47",
 				"prettier": "^3.3.3",
 				"prettier-plugin-svelte": "^3.2.6",
 				"process": "^0.11.10",
 				"rollup-plugin-license": "^3.5.3",
 				"sass": "1.78.0",
-				"svelte": "^4.2.19",
+				"svelte": "^5.0.0",
 				"svelte-preprocess": "^6.0.2",
 				"ts-node": "^10.9.2",
 				"typescript": "^5.6.2",
-				"vite": "^5.4.14",
+				"vite": "^6.3.5",
 				"vite-multiple-assets": "1.3.1"
 			}
 		},
@@ -78,9 +79,9 @@
 			}
 		},
 		"node_modules/@esbuild/aix-ppc64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-			"integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
+			"integrity": "sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA==",
 			"cpu": [
 				"ppc64"
 			],
@@ -91,13 +92,13 @@
 				"aix"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/android-arm": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-			"integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.5.tgz",
+			"integrity": "sha512-AdJKSPeEHgi7/ZhuIPtcQKr5RQdo6OO2IL87JkianiMYMPbCtot9fxPbrMiBADOWWm3T2si9stAiVsGbTQFkbA==",
 			"cpu": [
 				"arm"
 			],
@@ -108,13 +109,13 @@
 				"android"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/android-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-			"integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.5.tgz",
+			"integrity": "sha512-VGzGhj4lJO+TVGV1v8ntCZWJktV7SGCs3Pn1GRWI1SBFtRALoomm8k5E9Pmwg3HOAal2VDc2F9+PM/rEY6oIDg==",
 			"cpu": [
 				"arm64"
 			],
@@ -125,13 +126,13 @@
 				"android"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/android-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-			"integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.5.tgz",
+			"integrity": "sha512-D2GyJT1kjvO//drbRT3Hib9XPwQeWd9vZoBJn+bu/lVsOZ13cqNdDeqIF/xQ5/VmWvMduP6AmXvylO/PIc2isw==",
 			"cpu": [
 				"x64"
 			],
@@ -142,13 +143,13 @@
 				"android"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/darwin-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-			"integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.5.tgz",
+			"integrity": "sha512-GtaBgammVvdF7aPIgH2jxMDdivezgFu6iKpmT+48+F8Hhg5J/sfnDieg0aeG/jfSvkYQU2/pceFPDKlqZzwnfQ==",
 			"cpu": [
 				"arm64"
 			],
@@ -159,13 +160,13 @@
 				"darwin"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/darwin-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-			"integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.5.tgz",
+			"integrity": "sha512-1iT4FVL0dJ76/q1wd7XDsXrSW+oLoquptvh4CLR4kITDtqi2e/xwXwdCVH8hVHU43wgJdsq7Gxuzcs6Iq/7bxQ==",
 			"cpu": [
 				"x64"
 			],
@@ -176,13 +177,13 @@
 				"darwin"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/freebsd-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-			"integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.5.tgz",
+			"integrity": "sha512-nk4tGP3JThz4La38Uy/gzyXtpkPW8zSAmoUhK9xKKXdBCzKODMc2adkB2+8om9BDYugz+uGV7sLmpTYzvmz6Sw==",
 			"cpu": [
 				"arm64"
 			],
@@ -193,13 +194,13 @@
 				"freebsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/freebsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-			"integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.5.tgz",
+			"integrity": "sha512-PrikaNjiXdR2laW6OIjlbeuCPrPaAl0IwPIaRv+SMV8CiM8i2LqVUHFC1+8eORgWyY7yhQY+2U2fA55mBzReaw==",
 			"cpu": [
 				"x64"
 			],
@@ -210,13 +211,13 @@
 				"freebsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-arm": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-			"integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.5.tgz",
+			"integrity": "sha512-cPzojwW2okgh7ZlRpcBEtsX7WBuqbLrNXqLU89GxWbNt6uIg78ET82qifUy3W6OVww6ZWobWub5oqZOVtwolfw==",
 			"cpu": [
 				"arm"
 			],
@@ -227,13 +228,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-			"integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.5.tgz",
+			"integrity": "sha512-Z9kfb1v6ZlGbWj8EJk9T6czVEjjq2ntSYLY2cw6pAZl4oKtfgQuS4HOq41M/BcoLPzrUbNd+R4BXFyH//nHxVg==",
 			"cpu": [
 				"arm64"
 			],
@@ -244,13 +245,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-ia32": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-			"integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.5.tgz",
+			"integrity": "sha512-sQ7l00M8bSv36GLV95BVAdhJ2QsIbCuCjh/uYrWiMQSUuV+LpXwIqhgJDcvMTj+VsQmqAHL2yYaasENvJ7CDKA==",
 			"cpu": [
 				"ia32"
 			],
@@ -261,13 +262,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-loong64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-			"integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.5.tgz",
+			"integrity": "sha512-0ur7ae16hDUC4OL5iEnDb0tZHDxYmuQyhKhsPBV8f99f6Z9KQM02g33f93rNH5A30agMS46u2HP6qTdEt6Q1kg==",
 			"cpu": [
 				"loong64"
 			],
@@ -278,13 +279,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-mips64el": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-			"integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.5.tgz",
+			"integrity": "sha512-kB/66P1OsHO5zLz0i6X0RxlQ+3cu0mkxS3TKFvkb5lin6uwZ/ttOkP3Z8lfR9mJOBk14ZwZ9182SIIWFGNmqmg==",
 			"cpu": [
 				"mips64el"
 			],
@@ -295,13 +296,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-ppc64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-			"integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.5.tgz",
+			"integrity": "sha512-UZCmJ7r9X2fe2D6jBmkLBMQetXPXIsZjQJCjgwpVDz+YMcS6oFR27alkgGv3Oqkv07bxdvw7fyB71/olceJhkQ==",
 			"cpu": [
 				"ppc64"
 			],
@@ -312,13 +313,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-riscv64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-			"integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.5.tgz",
+			"integrity": "sha512-kTxwu4mLyeOlsVIFPfQo+fQJAV9mh24xL+y+Bm6ej067sYANjyEw1dNHmvoqxJUCMnkBdKpvOn0Ahql6+4VyeA==",
 			"cpu": [
 				"riscv64"
 			],
@@ -329,13 +330,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-s390x": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-			"integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.5.tgz",
+			"integrity": "sha512-K2dSKTKfmdh78uJ3NcWFiqyRrimfdinS5ErLSn3vluHNeHVnBAFWC8a4X5N+7FgVE1EjXS1QDZbpqZBjfrqMTQ==",
 			"cpu": [
 				"s390x"
 			],
@@ -346,13 +347,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-			"integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.5.tgz",
+			"integrity": "sha512-uhj8N2obKTE6pSZ+aMUbqq+1nXxNjZIIjCjGLfsWvVpy7gKCOL6rsY1MhRh9zLtUtAI7vpgLMK6DxjO8Qm9lJw==",
 			"cpu": [
 				"x64"
 			],
@@ -363,13 +364,30 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/netbsd-arm64": {
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.5.tgz",
+			"integrity": "sha512-pwHtMP9viAy1oHPvgxtOv+OkduK5ugofNTVDilIzBLpoWAM16r7b/mxBvfpuQDpRQFMfuVr5aLcn4yveGvBZvw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/netbsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-			"integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.5.tgz",
+			"integrity": "sha512-WOb5fKrvVTRMfWFNCroYWWklbnXH0Q5rZppjq0vQIdlsQKuw6mdSihwSo4RV/YdQ5UCKKvBy7/0ZZYLBZKIbwQ==",
 			"cpu": [
 				"x64"
 			],
@@ -380,13 +398,30 @@
 				"netbsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-arm64": {
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.5.tgz",
+			"integrity": "sha512-7A208+uQKgTxHd0G0uqZO8UjK2R0DDb4fDmERtARjSHWxqMTye4Erz4zZafx7Di9Cv+lNHYuncAkiGFySoD+Mw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/openbsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-			"integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.5.tgz",
+			"integrity": "sha512-G4hE405ErTWraiZ8UiSoesH8DaCsMm0Cay4fsFWOOUcz8b8rC6uCvnagr+gnioEjWn0wC+o1/TAHt+It+MpIMg==",
 			"cpu": [
 				"x64"
 			],
@@ -397,13 +432,13 @@
 				"openbsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/sunos-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-			"integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.5.tgz",
+			"integrity": "sha512-l+azKShMy7FxzY0Rj4RCt5VD/q8mG/e+mDivgspo+yL8zW7qEwctQ6YqKX34DTEleFAvCIUviCFX1SDZRSyMQA==",
 			"cpu": [
 				"x64"
 			],
@@ -414,13 +449,13 @@
 				"sunos"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/win32-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-			"integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.5.tgz",
+			"integrity": "sha512-O2S7SNZzdcFG7eFKgvwUEZ2VG9D/sn/eIiz8XRZ1Q/DO5a3s76Xv0mdBzVM5j5R639lXQmPmSo0iRpHqUUrsxw==",
 			"cpu": [
 				"arm64"
 			],
@@ -431,13 +466,13 @@
 				"win32"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/win32-ia32": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-			"integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.5.tgz",
+			"integrity": "sha512-onOJ02pqs9h1iMJ1PQphR+VZv8qBMQ77Klcsqv9CNW2w6yLqoURLcgERAIurY6QE63bbLuqgP9ATqajFLK5AMQ==",
 			"cpu": [
 				"ia32"
 			],
@@ -448,13 +483,13 @@
 				"win32"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/win32-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-			"integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.5.tgz",
+			"integrity": "sha512-TXv6YnJ8ZMVdX+SXWVBo/0p8LTcrUYngpWjvm91TMjjBQii7Oz11Lw5lbDV5Y0TzuhSJHwiH4hEtC1I42mMS0g==",
 			"cpu": [
 				"x64"
 			],
@@ -465,21 +500,24 @@
 				"win32"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@eslint-community/eslint-utils": {
-			"version": "4.4.0",
-			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-			"integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+			"version": "4.7.0",
+			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
+			"integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"eslint-visitor-keys": "^3.3.0"
+				"eslint-visitor-keys": "^3.4.3"
 			},
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			},
 			"peerDependencies": {
 				"eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
 			}
@@ -638,6 +676,29 @@
 			"license": "BSD-3-Clause",
 			"peer": true
 		},
+		"node_modules/@isaacs/balanced-match": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
+			"integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "20 || >=22"
+			}
+		},
+		"node_modules/@isaacs/brace-expansion": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
+			"integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@isaacs/balanced-match": "^4.0.1"
+			},
+			"engines": {
+				"node": "20 || >=22"
+			}
+		},
 		"node_modules/@jridgewell/gen-mapping": {
 			"version": "0.3.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -1025,45 +1086,54 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@sveltejs/acorn-typescript": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
+			"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"acorn": "^8.9.0"
+			}
+		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz",
-			"integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==",
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.1.0.tgz",
+			"integrity": "sha512-wojIS/7GYnJDYIg1higWj2ROA6sSRWvcR1PO/bqEyFr/5UZah26c8Cz4u0NaqjPeVltzsVpt2Tm8d2io0V+4Tw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
-				"debug": "^4.3.4",
+				"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
+				"debug": "^4.4.1",
 				"deepmerge": "^4.3.1",
 				"kleur": "^4.1.5",
-				"magic-string": "^0.30.10",
-				"svelte-hmr": "^0.16.0",
-				"vitefu": "^0.2.5"
+				"magic-string": "^0.30.17",
+				"vitefu": "^1.0.6"
 			},
 			"engines": {
-				"node": "^18.0.0 || >=20"
+				"node": "^18.0.0 || ^20.0.0 || >=22"
 			},
 			"peerDependencies": {
-				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.0"
+				"svelte": "^5.0.0",
+				"vite": "^6.0.0"
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz",
-			"integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==",
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz",
+			"integrity": "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"debug": "^4.3.4"
+				"debug": "^4.3.7"
 			},
 			"engines": {
-				"node": "^18.0.0 || >=20"
+				"node": "^18.0.0 || ^20.0.0 || >=22"
 			},
 			"peerDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^3.0.0",
-				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.0"
+				"@sveltejs/vite-plugin-svelte": "^5.0.0",
+				"svelte": "^5.0.0",
+				"vite": "^6.0.0"
 			}
 		},
 		"node_modules/@tsconfig/node10": {
@@ -1267,6 +1337,22 @@
 				}
 			}
 		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
 		"node_modules/@typescript-eslint/utils": {
 			"version": "8.7.0",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.7.0.tgz",
@@ -1317,9 +1403,9 @@
 			"peer": true
 		},
 		"node_modules/acorn": {
-			"version": "8.12.1",
-			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-			"integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+			"version": "8.15.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
 			"dev": true,
 			"license": "MIT",
 			"bin": {
@@ -1633,9 +1719,9 @@
 			}
 		},
 		"node_modules/brace-expansion": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1800,18 +1886,14 @@
 				"node": ">=12"
 			}
 		},
-		"node_modules/code-red": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
-			"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
+		"node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
 			"dev": true,
 			"license": "MIT",
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.15",
-				"@types/estree": "^1.0.1",
-				"acorn": "^8.10.0",
-				"estree-walker": "^3.0.3",
-				"periscopic": "^3.1.0"
+			"engines": {
+				"node": ">=6"
 			}
 		},
 		"node_modules/color-convert": {
@@ -1897,20 +1979,6 @@
 				"node": ">= 8"
 			}
 		},
-		"node_modules/css-tree": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
-			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"mdn-data": "2.0.30",
-				"source-map-js": "^1.0.1"
-			},
-			"engines": {
-				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-			}
-		},
 		"node_modules/cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1979,9 +2047,9 @@
 			}
 		},
 		"node_modules/debug": {
-			"version": "4.3.7",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
-			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"version": "4.4.1",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -2236,9 +2304,9 @@
 			}
 		},
 		"node_modules/esbuild": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
-			"integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+			"version": "0.25.5",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
+			"integrity": "sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ==",
 			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
@@ -2246,32 +2314,34 @@
 				"esbuild": "bin/esbuild"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			},
 			"optionalDependencies": {
-				"@esbuild/aix-ppc64": "0.21.5",
-				"@esbuild/android-arm": "0.21.5",
-				"@esbuild/android-arm64": "0.21.5",
-				"@esbuild/android-x64": "0.21.5",
-				"@esbuild/darwin-arm64": "0.21.5",
-				"@esbuild/darwin-x64": "0.21.5",
-				"@esbuild/freebsd-arm64": "0.21.5",
-				"@esbuild/freebsd-x64": "0.21.5",
-				"@esbuild/linux-arm": "0.21.5",
-				"@esbuild/linux-arm64": "0.21.5",
-				"@esbuild/linux-ia32": "0.21.5",
-				"@esbuild/linux-loong64": "0.21.5",
-				"@esbuild/linux-mips64el": "0.21.5",
-				"@esbuild/linux-ppc64": "0.21.5",
-				"@esbuild/linux-riscv64": "0.21.5",
-				"@esbuild/linux-s390x": "0.21.5",
-				"@esbuild/linux-x64": "0.21.5",
-				"@esbuild/netbsd-x64": "0.21.5",
-				"@esbuild/openbsd-x64": "0.21.5",
-				"@esbuild/sunos-x64": "0.21.5",
-				"@esbuild/win32-arm64": "0.21.5",
-				"@esbuild/win32-ia32": "0.21.5",
-				"@esbuild/win32-x64": "0.21.5"
+				"@esbuild/aix-ppc64": "0.25.5",
+				"@esbuild/android-arm": "0.25.5",
+				"@esbuild/android-arm64": "0.25.5",
+				"@esbuild/android-x64": "0.25.5",
+				"@esbuild/darwin-arm64": "0.25.5",
+				"@esbuild/darwin-x64": "0.25.5",
+				"@esbuild/freebsd-arm64": "0.25.5",
+				"@esbuild/freebsd-x64": "0.25.5",
+				"@esbuild/linux-arm": "0.25.5",
+				"@esbuild/linux-arm64": "0.25.5",
+				"@esbuild/linux-ia32": "0.25.5",
+				"@esbuild/linux-loong64": "0.25.5",
+				"@esbuild/linux-mips64el": "0.25.5",
+				"@esbuild/linux-ppc64": "0.25.5",
+				"@esbuild/linux-riscv64": "0.25.5",
+				"@esbuild/linux-s390x": "0.25.5",
+				"@esbuild/linux-x64": "0.25.5",
+				"@esbuild/netbsd-arm64": "0.25.5",
+				"@esbuild/netbsd-x64": "0.25.5",
+				"@esbuild/openbsd-arm64": "0.25.5",
+				"@esbuild/openbsd-x64": "0.25.5",
+				"@esbuild/sunos-x64": "0.25.5",
+				"@esbuild/win32-arm64": "0.25.5",
+				"@esbuild/win32-ia32": "0.25.5",
+				"@esbuild/win32-x64": "0.25.5"
 			}
 		},
 		"node_modules/escalade": {
@@ -2355,22 +2425,6 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
-		"node_modules/eslint-compat-utils": {
-			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
-			"integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"semver": "^7.5.4"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"peerDependencies": {
-				"eslint": ">=6.0.0"
-			}
-		},
 		"node_modules/eslint-config-prettier": {
 			"version": "9.1.0",
 			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
@@ -2592,33 +2646,32 @@
 			}
 		},
 		"node_modules/eslint-plugin-svelte": {
-			"version": "2.44.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.44.0.tgz",
-			"integrity": "sha512-wav4MOs02vBb1WjvTCYItwJCxMkuk2Z4p+K/eyjL0N/z7ahXLP+0LtQQjiKc2ezuif7GnZLbD1F3o1VHzSvdVg==",
+			"version": "3.9.2",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-3.9.2.tgz",
+			"integrity": "sha512-aqzfHtG9RPaFhCUFm5QFC6eFY/yHFQIT8VYYFe7/mT2A9mbgVR3XV2keCqU19LN8iVD9mdvRvqHU+4+CzJImvg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@eslint-community/eslint-utils": "^4.4.0",
-				"@jridgewell/sourcemap-codec": "^1.4.15",
-				"eslint-compat-utils": "^0.5.1",
+				"@eslint-community/eslint-utils": "^4.6.1",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
 				"esutils": "^2.0.3",
-				"known-css-properties": "^0.34.0",
-				"postcss": "^8.4.38",
+				"globals": "^16.0.0",
+				"known-css-properties": "^0.36.0",
+				"postcss": "^8.4.49",
 				"postcss-load-config": "^3.1.4",
-				"postcss-safe-parser": "^6.0.0",
-				"postcss-selector-parser": "^6.1.0",
-				"semver": "^7.6.2",
-				"svelte-eslint-parser": "^0.41.1"
+				"postcss-safe-parser": "^7.0.0",
+				"semver": "^7.6.3",
+				"svelte-eslint-parser": "^1.2.0"
 			},
 			"engines": {
-				"node": "^14.17.0 || >=16.0.0"
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/ota-meshi"
 			},
 			"peerDependencies": {
-				"eslint": "^7.0.0 || ^8.0.0-0 || ^9.0.0-0",
-				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.191"
+				"eslint": "^8.57.1 || ^9.0.0",
+				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
 			},
 			"peerDependenciesMeta": {
 				"svelte": {
@@ -2626,12 +2679,26 @@
 				}
 			}
 		},
+		"node_modules/eslint-plugin-svelte/node_modules/globals": {
+			"version": "16.2.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-16.2.0.tgz",
+			"integrity": "sha512-O+7l9tPdHCU320IigZZPj5zmRCFG9xHmx9cU8FqU2Rp+JN714seHV+2S9+JslCpY4gJwU2vOGox0wzgae/MCEg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/eslint-scope": {
 			"version": "7.2.2",
 			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
 			"integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
 			"dev": true,
 			"license": "BSD-2-Clause",
+			"peer": true,
 			"dependencies": {
 				"esrecurse": "^4.3.0",
 				"estraverse": "^5.2.0"
@@ -2682,12 +2749,20 @@
 				"node": "*"
 			}
 		},
+		"node_modules/esm-env": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/espree": {
 			"version": "9.6.1",
 			"resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
 			"integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
 			"dev": true,
 			"license": "BSD-2-Clause",
+			"peer": true,
 			"dependencies": {
 				"acorn": "^8.9.0",
 				"acorn-jsx": "^5.3.2",
@@ -2714,6 +2789,16 @@
 				"node": ">=0.10"
 			}
 		},
+		"node_modules/esrap": {
+			"version": "1.4.9",
+			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.9.tgz",
+			"integrity": "sha512-3OMlcd0a03UGuZpPeUC1HxR3nA23l+HEyCiZw3b3FumJIN9KphoGzDJKMXI1S72jVS1dsenDyQC0kJlO1U9E1g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.15"
+			}
+		},
 		"node_modules/esrecurse": {
 			"version": "4.3.0",
 			"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -2737,16 +2822,6 @@
 				"node": ">=4.0"
 			}
 		},
-		"node_modules/estree-walker": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@types/estree": "^1.0.0"
-			}
-		},
 		"node_modules/esutils": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3566,13 +3641,13 @@
 			}
 		},
 		"node_modules/is-reference": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
-			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@types/estree": "*"
+				"@types/estree": "^1.0.6"
 			}
 		},
 		"node_modules/is-regex": {
@@ -3757,9 +3832,9 @@
 			}
 		},
 		"node_modules/known-css-properties": {
-			"version": "0.34.0",
-			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz",
-			"integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==",
+			"version": "0.36.0",
+			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.36.0.tgz",
+			"integrity": "sha512-A+9jP+IUmuQsNdsLdcg6Yt7voiMF/D4K83ew0OpJtpu+l34ef7LaohWV0Rc6KNvzw6ZDizkqfyB5JznZnzuKQA==",
 			"dev": true,
 			"license": "MIT"
 		},
@@ -3828,9 +3903,9 @@
 			"peer": true
 		},
 		"node_modules/magic-string": {
-			"version": "0.30.11",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-			"integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+			"version": "0.30.17",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+			"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -3844,13 +3919,6 @@
 			"dev": true,
 			"license": "ISC"
 		},
-		"node_modules/mdn-data": {
-			"version": "2.0.30",
-			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-			"dev": true,
-			"license": "CC0-1.0"
-		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3901,16 +3969,16 @@
 			}
 		},
 		"node_modules/minimatch": {
-			"version": "9.0.5",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"version": "10.0.3",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz",
+			"integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==",
 			"dev": true,
 			"license": "ISC",
 			"dependencies": {
-				"brace-expansion": "^2.0.1"
+				"@isaacs/brace-expansion": "^5.0.0"
 			},
 			"engines": {
-				"node": ">=16 || 14 >=14.17"
+				"node": "20 || >=22"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/isaacs"
@@ -4204,18 +4272,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/periscopic": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
-			"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@types/estree": "^1.0.0",
-				"estree-walker": "^3.0.0",
-				"is-reference": "^3.0.0"
-			}
-		},
 		"node_modules/picocolors": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -4316,20 +4372,30 @@
 			}
 		},
 		"node_modules/postcss-safe-parser": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
-			"integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+			"integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
 			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
 			"license": "MIT",
 			"engines": {
-				"node": ">=12.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/postcss/"
+				"node": ">=18.0"
 			},
 			"peerDependencies": {
-				"postcss": "^8.3.3"
+				"postcss": "^8.4.31"
 			}
 		},
 		"node_modules/postcss-scss": {
@@ -4360,9 +4426,9 @@
 			}
 		},
 		"node_modules/postcss-selector-parser": {
-			"version": "6.1.2",
-			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-			"integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+			"integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -5074,52 +5140,53 @@
 			}
 		},
 		"node_modules/svelte": {
-			"version": "4.2.19",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
-			"integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@ampproject/remapping": "^2.2.1",
-				"@jridgewell/sourcemap-codec": "^1.4.15",
-				"@jridgewell/trace-mapping": "^0.3.18",
-				"@types/estree": "^1.0.1",
-				"acorn": "^8.9.0",
-				"aria-query": "^5.3.0",
-				"axobject-query": "^4.0.0",
-				"code-red": "^1.0.3",
-				"css-tree": "^2.3.1",
-				"estree-walker": "^3.0.3",
-				"is-reference": "^3.0.1",
+			"version": "5.34.3",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.34.3.tgz",
+			"integrity": "sha512-Y0QKP2rfWD+ARKe91c4JgZgc/nXa2BfOnVBUjYUMB819m7VyPszihkjdzXPIV0qlGRZYEukpgNq7hgbzTbopJw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@ampproject/remapping": "^2.3.0",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@sveltejs/acorn-typescript": "^1.0.5",
+				"@types/estree": "^1.0.5",
+				"acorn": "^8.12.1",
+				"aria-query": "^5.3.1",
+				"axobject-query": "^4.1.0",
+				"clsx": "^2.1.1",
+				"esm-env": "^1.2.1",
+				"esrap": "^1.4.8",
+				"is-reference": "^3.0.3",
 				"locate-character": "^3.0.0",
-				"magic-string": "^0.30.4",
-				"periscopic": "^3.1.0"
+				"magic-string": "^0.30.11",
+				"zimmerframe": "^1.1.2"
 			},
 			"engines": {
-				"node": ">=16"
+				"node": ">=18"
 			}
 		},
 		"node_modules/svelte-eslint-parser": {
-			"version": "0.41.1",
-			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.41.1.tgz",
-			"integrity": "sha512-08ndI6zTghzI8SuJAFpvMbA/haPSGn3xz19pjre19yYMw8Nw/wQJ2PrZBI/L8ijGTgtkWCQQiLLy+Z1tfaCwNA==",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-1.2.0.tgz",
+			"integrity": "sha512-mbPtajIeuiyU80BEyGvwAktBeTX7KCr5/0l+uRGLq1dafwRNrjfM5kHGJScEBlPG3ipu6dJqfW/k0/fujvIEVw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"eslint-scope": "^7.2.2",
-				"eslint-visitor-keys": "^3.4.3",
-				"espree": "^9.6.1",
-				"postcss": "^8.4.39",
-				"postcss-scss": "^4.0.9"
+				"eslint-scope": "^8.2.0",
+				"eslint-visitor-keys": "^4.0.0",
+				"espree": "^10.0.0",
+				"postcss": "^8.4.49",
+				"postcss-scss": "^4.0.9",
+				"postcss-selector-parser": "^7.0.0"
 			},
 			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/ota-meshi"
 			},
 			"peerDependencies": {
-				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.191"
+				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
 			},
 			"peerDependenciesMeta": {
 				"svelte": {
@@ -5127,17 +5194,52 @@
 				}
 			}
 		},
-		"node_modules/svelte-hmr": {
-			"version": "0.16.0",
-			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
-			"integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==",
+		"node_modules/svelte-eslint-parser/node_modules/eslint-scope": {
+			"version": "8.4.0",
+			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+			"integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
 			"dev": true,
-			"license": "ISC",
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"esrecurse": "^4.3.0",
+				"estraverse": "^5.2.0"
+			},
 			"engines": {
-				"node": "^12.20 || ^14.13.1 || >= 16"
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			},
-			"peerDependencies": {
-				"svelte": "^3.19.0 || ^4.0.0"
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/svelte-eslint-parser/node_modules/eslint-visitor-keys": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+			"integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/svelte-eslint-parser/node_modules/espree": {
+			"version": "10.4.0",
+			"resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+			"integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"acorn": "^8.15.0",
+				"acorn-jsx": "^5.3.2",
+				"eslint-visitor-keys": "^4.2.1"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
 			}
 		},
 		"node_modules/svelte-preprocess": {
@@ -5231,6 +5333,51 @@
 			"license": "MIT",
 			"peer": true
 		},
+		"node_modules/tinyglobby": {
+			"version": "0.2.14",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+			"integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fdir": "^6.4.4",
+				"picomatch": "^4.0.2"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/SuperchupuDev"
+			}
+		},
+		"node_modules/tinyglobby/node_modules/fdir": {
+			"version": "6.4.6",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+			"integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"picomatch": "^3 || ^4"
+			},
+			"peerDependenciesMeta": {
+				"picomatch": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/tinyglobby/node_modules/picomatch": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5499,21 +5646,24 @@
 			"license": "MIT"
 		},
 		"node_modules/vite": {
-			"version": "5.4.14",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.14.tgz",
-			"integrity": "sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==",
+			"version": "6.3.5",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+			"integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"esbuild": "^0.21.3",
-				"postcss": "^8.4.43",
-				"rollup": "^4.20.0"
+				"esbuild": "^0.25.0",
+				"fdir": "^6.4.4",
+				"picomatch": "^4.0.2",
+				"postcss": "^8.5.3",
+				"rollup": "^4.34.9",
+				"tinyglobby": "^0.2.13"
 			},
 			"bin": {
 				"vite": "bin/vite.js"
 			},
 			"engines": {
-				"node": "^18.0.0 || >=20.0.0"
+				"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
 			},
 			"funding": {
 				"url": "https://github.com/vitejs/vite?sponsor=1"
@@ -5522,19 +5672,25 @@
 				"fsevents": "~2.3.3"
 			},
 			"peerDependencies": {
-				"@types/node": "^18.0.0 || >=20.0.0",
+				"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+				"jiti": ">=1.21.0",
 				"less": "*",
 				"lightningcss": "^1.21.0",
 				"sass": "*",
 				"sass-embedded": "*",
 				"stylus": "*",
 				"sugarss": "*",
-				"terser": "^5.4.0"
+				"terser": "^5.16.0",
+				"tsx": "^4.8.1",
+				"yaml": "^2.4.2"
 			},
 			"peerDependenciesMeta": {
 				"@types/node": {
 					"optional": true
 				},
+				"jiti": {
+					"optional": true
+				},
 				"less": {
 					"optional": true
 				},
@@ -5555,6 +5711,12 @@
 				},
 				"terser": {
 					"optional": true
+				},
+				"tsx": {
+					"optional": true
+				},
+				"yaml": {
+					"optional": true
 				}
 			}
 		},
@@ -5569,14 +5731,46 @@
 				"vite": ">=2.9.6"
 			}
 		},
+		"node_modules/vite/node_modules/fdir": {
+			"version": "6.4.6",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+			"integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"picomatch": "^3 || ^4"
+			},
+			"peerDependenciesMeta": {
+				"picomatch": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/vite/node_modules/picomatch": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/vitefu": {
-			"version": "0.2.5",
-			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
-			"integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.6.tgz",
+			"integrity": "sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==",
 			"dev": true,
 			"license": "MIT",
+			"workspaces": [
+				"tests/deps/*",
+				"tests/projects/*"
+			],
 			"peerDependencies": {
-				"vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+				"vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
 			},
 			"peerDependenciesMeta": {
 				"vite": {
@@ -5737,6 +5931,13 @@
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
+		},
+		"node_modules/zimmerframe": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+			"dev": true,
+			"license": "MIT"
 		}
 	}
 }
diff --git a/frontend/package.json b/frontend/package.json
index ea18e0fba9..7b1bc2b770 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,7 +36,7 @@
 		"reflect-metadata": "^0.2.2"
 	},
 	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/vite-plugin-svelte": "^5.1.0",
 		"@types/node": "^22.6.1",
 		"@typescript-eslint/eslint-plugin": "^8.7.0",
 		"@typescript-eslint/parser": "^8.7.0",
@@ -46,18 +46,19 @@
 		"eslint-import-resolver-typescript": "^3.6.3",
 		"eslint-plugin-import": "^2.30.0",
 		"eslint-plugin-prettier": "^5.2.1",
-		"eslint-plugin-svelte": "^2.44.0",
+		"eslint-plugin-svelte": "^3.9.2",
+		"minimatch": "^10.0.3",
 		"postcss": "^8.4.47",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.6",
 		"process": "^0.11.10",
 		"rollup-plugin-license": "^3.5.3",
 		"sass": "1.78.0",
-		"svelte": "^4.2.19",
+		"svelte": "^5.0.0",
 		"svelte-preprocess": "^6.0.2",
 		"ts-node": "^10.9.2",
 		"typescript": "^5.6.2",
-		"vite": "^5.4.14",
+		"vite": "^6.3.5",
 		"vite-multiple-assets": "1.3.1"
 	},
 	"//": "The dev dependency for `sass` can be removed once <https://github.com/sveltejs/svelte-preprocess/issues/656> is fixed, but meanwhile we have to",
diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
new file mode 100644
index 0000000000..177c0e399b
--- /dev/null
+++ b/frontend/src/app.d.ts
@@ -0,0 +1,10 @@
+declare global {
+	namespace Graphite {
+		type Platform = "Windows" | "Mac" | "Linux" | "Web";
+		type MenuType = "Popover" | "Dropdown" | "Dialog" | "Cursor";
+
+		// interface Error {}
+	}
+}
+
+export {};
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 8ab407bbee..75e29e0da6 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -12,8 +12,10 @@ import "@fontsource/source-sans-pro/700.css";
 // The library replaces the Reflect API on the window to support more features.
 import "reflect-metadata";
 
+import { mount } from "svelte";
+
 import App from "@graphite/App.svelte";
 
 document.body.setAttribute("data-app-container", "");
 
-export default new App({ target: document.body });
+export default mount(App, { target: document.body });
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
index 4078e7476a..b5dcfc5d37 100644
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -1,2 +1,17 @@
+/// <reference types="node" />
 /// <reference types="svelte" />
+/// <reference types="svelte/store" />
+/// <reference types="svelte/motion" />
+/// <reference types="svelte/transition" />
+/// <reference types="svelte/animate" />
+/// <reference types="svelte/easing" />
+/// <reference types="svelte/elements" />
 /// <reference types="vite/client" />
+
+/* 
+    Why vite-env.d.ts instead of compilerOptions.types inside jsconfig.json or tsconfig.json?
+
+    Setting compilerOptions.types shuts out all other types not explicitly listed in the configuration. 
+    Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, 
+    while also adding svelte and vite/client type information.
+*/
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 3a5b77e237..adbe2f1c90 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -11,7 +11,6 @@
 		"allowSyntheticDefaultImports": true,
 		"verbatimModuleSyntax": true,
 		"sourceMap": true,
-		"types": ["node", "svelte", "svelte/store", "svelte/motion", "svelte/transition", "svelte/animate", "svelte/easing"],
 		"baseUrl": ".",
 		"paths": {
 			"/*": ["./*"],
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 04b0fc6b73..85ba09ef1d 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -2,7 +2,8 @@
 
 import { spawnSync } from "child_process";
 
-import fs from "fs";
+import { readFileSync } from "node:fs";
+import { minimatch } from "minimatch";
 import path from "path";
 
 import { svelte } from "@sveltejs/vite-plugin-svelte";
@@ -33,6 +34,21 @@ const ALLOWED_LICENSES = [
 	"NCSA",
 ];
 
+const runesGlobs = [
+	"**/components/*.svelte"
+	"**/components/*.svelte"
+	"**/components/*.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);
+	});
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
 	plugins: [
@@ -45,6 +61,12 @@ export default defineConfig({
 
 				defaultHandler?.(warning);
 			},
+			dynamicCompileOptions({ filename, compileOptions }) {
+				console.log("🚀 ~ dynamicCompileOptions ~ compileOptions:", compileOptions.runes);
+				if (forceRunes(filename) && !compileOptions.runes) {
+					return { runes: true };
+				}
+			},
 		}),
 		viteMultipleAssets(["../demo-artwork"]),
 	],
@@ -137,7 +159,7 @@ function formatThirdPartyLicenses(jsLicenses: Dependency[]): string {
 		const pkg = license.packages[foundPackagesIndex];
 
 		license.packages = license.packages.filter((pkg) => pkg.name !== "path-bool");
-		const noticeText = fs.readFileSync(path.resolve(__dirname, "../libraries/path-bool/NOTICE"), "utf8");
+		const noticeText = readFileSync(path.resolve(__dirname, "../libraries/path-bool/NOTICE"), "utf8");
 
 		licenses.push({
 			licenseName: license.licenseName,

From cf7e255166cece48b6fa2ac8eab455c5288a9ad0 Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Thu, 19 Jun 2025 03:04:55 +0530
Subject: [PATCH 02/16] 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 | 157 ++++++++-----
 .../floating-menus/NodeCatalog.svelte         |   2 +-
 .../layout/ConditionalWrapper.svelte          |  15 +-
 .../src/components/layout/FloatingMenu.svelte | 145 +++++++-----
 .../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         |  46 ++--
 .../widgets/buttons/ImageButton.svelte        |  34 ++-
 .../buttons/ParameterExposeButton.svelte      |  21 +-
 .../widgets/buttons/PopoverButton.svelte      |  37 +++-
 .../widgets/buttons/TextButton.svelte         |  56 +++--
 .../widgets/inputs/CheckboxInput.svelte       |  37 ++--
 .../widgets/inputs/ColorInput.svelte          |  52 +++--
 .../widgets/inputs/CurveInput.svelte          |  63 +++---
 .../widgets/inputs/DropdownInput.svelte       |  86 +++++---
 .../widgets/inputs/FieldInput.svelte          | 125 ++++++-----
 .../widgets/inputs/FontInput.svelte           |  59 +++--
 .../widgets/inputs/NumberInput.svelte         | 204 +++++++++--------
 .../widgets/inputs/RadioInput.svelte          |  27 ++-
 .../widgets/inputs/ReferencePointInput.svelte |  37 ++--
 .../widgets/inputs/RulerInput.svelte          |  41 ++--
 .../widgets/inputs/ScrollbarInput.svelte      |  72 +++---
 .../widgets/inputs/SpectrumInput.svelte       |  68 +++---
 .../widgets/inputs/TextAreaInput.svelte       |  34 +--
 .../widgets/inputs/TextInput.svelte           |  63 +++---
 .../widgets/inputs/WorkingColorsInput.svelte  |  26 ++-
 .../widgets/labels/IconLabel.svelte           |  34 ++-
 .../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, 1316 insertions(+), 915 deletions(-)

diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index 177c0e399b..e7b104c47f 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 53a20010f9..6f070b137c 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 e9d0ba5fab..4ba70719f7 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 0695d38305..7b8bac4025 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;
-
-	const dispatch = createEventDispatcher<{ open: boolean; activeEntry: MenuListEntry; hoverInEntry: MenuListEntry; hoverOutEntry: undefined; naturalWidth: number }>();
+	let self: FloatingMenu | undefined = $state();
+	let scroller: LayoutCol | undefined = $state();
+	let searchTextInput: TextInput | undefined = $state();
+
+	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 a0f2cbe241..5a8122dc84 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 46d5e80b04..f8679efc6d 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 e4070cb153..b4a9154265 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 }>();
-
-	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 tail: HTMLDivElement | undefined;
-	let self: HTMLDivElement | undefined;
-	let floatingMenuContainer: HTMLDivElement | undefined;
-	let floatingMenuContent: LayoutCol | undefined;
+	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 {
+		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 = $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 b69b6bfabb..6b37da195f 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 fad0220a76..a6a94e6a5f 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 70d4ea99ba..c0732fba5b 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 092a83fbac..bc935cbeca 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 eaedc3a6df..9d730d3b2c 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 39448166da..0feee39cbc 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 831e1dbbce..805fa9d20b 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 f3b68c7523..ac519f7838 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 97fbc2c8c9..efe69bb4dc 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;
-
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
+	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;
+	}
 
-	$: extraClasses = Object.entries(classes)
+	let {
+		class: className = "",
+		classes = {},
+		icon,
+		hoverIcon = undefined,
+		size,
+		disabled = false,
+		active = false,
+		tooltip = undefined,
+		...rest
+	}: Props = $props();
+
+	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 00e9de6aa7..90e5c8bc92 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 09e89e648b..d1dbf7ac17 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 b0bb0a551e..2a139d9121 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 aaac0a50ca..50f54be289 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;
-
-	// Callbacks
-	// TODO: Replace this with an event binding (and on other components that do this)
-	export let action: (() => void) | undefined;
-
-	$: menuListChildrenExists = (menuListChildren?.length ?? 0) > 0;
+	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;
+	}
+
+	let {
+		label,
+		icon = undefined,
+		hoverIcon = undefined,
+		emphasized = false,
+		flush = false,
+		minWidth = 0,
+		disabled = false,
+		tooltip = undefined,
+		menuListChildren = $bindable([]),
+		action
+	}: Props = $props();
+
+	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 f8e53eeadb..0964f6a653 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;
 
-	let inputElement: HTMLInputElement | 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 = $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 1dd01ae244..f0de9c5207 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 634bb45f1d..40144e9027 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 4317a519f4..1c02a86b83 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;
-	let self: LayoutRow | undefined;
-
-	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 menuList: MenuList | undefined = $state();
+	let self: LayoutRow | undefined = $state();
+
+	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;
+	}
 
-	let activeEntry = makeActiveEntry();
+	let {
+		entries,
+		selectedIndex = undefined,
+		drawIcon = false,
+		interactive = true,
+		disabled = false,
+		tooltip = undefined,
+		minWidth = $bindable(0),
+		maxWidth = 0,
+		onhoverInEntry,
+		onhoverOutEntry,
+		onselectedIndex,
+	}: Props = $props();
+
+	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 b35279401a..00ac96b256 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';
+
+	type InputHTMLElementProps = SvelteHTMLElements["input"];
+	type TextAreaHTMLElementProps = SvelteHTMLElements["textarea"];
 
-	const dispatch = createEventDispatcher<{
+	type CommonProps = {
+		class?: string;
+		classes?: Record<string, boolean>;
+		style?: string;
+		styles?: Record<string, string | number | undefined>;
 		value: string;
-		textFocused: undefined;
-		textChanged: undefined;
-		textChangeCanceled: undefined;
-	}>();
-
-	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;
-
-	let inputOrTextarea: HTMLInputElement | HTMLTextAreaElement | 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;
+	}
+
+	type Props = CommonProps & (
+		CommonProps['textarea'] extends true
+			? TextAreaHTMLElementProps // If 'textarea' is explicitly true
+			: InputHTMLElementProps    // Otherwise (false, undefined, or missing)
+	);
+
+	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 f351f02d22..9bafaa2934 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 };
-	}>();
-
-	let menuList: MenuList | 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;
+	}
 
-	export let fontFamily: string;
-	export let fontStyle: string;
-	export let isStyle = false;
-	export let disabled = false;
-	export let tooltip: string | undefined = undefined;
+	let {
+		fontFamily,
+		fontStyle,
+		isStyle = false,
+		disabled = false,
+		tooltip = undefined,
+		onchangeFont,
+		onfontFamily,
+		onfontStyle,
+	}: Props = $props();
 
-	let open = false;
-	let entries: MenuListEntry[] = [];
-	let activeEntry: MenuListEntry | undefined = undefined;
-	let minWidth = isStyle ? 0 : 300;
+	let open = $state(false);
+	let entries: MenuListEntry[] = $state([]);
+	let activeEntry: MenuListEntry | undefined = $state(undefined);
+	let minWidth = $state(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 82a48a497d..dc6f2b26f8 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 }>();
-
-	// 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 {
+		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();
+
+	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 e28848a3f0..0a6f3bfa90 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 fe1839d072..02d681dd9c 100644
--- a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
+++ b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
@@ -1,29 +1,32 @@
 <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;
+		tooltip?: string;
+	}
 
-	export let value: string;
-	export let disabled = false;
-	export let tooltip: string | undefined = undefined;
+	let { value, disabled = false, onvalue, tooltip }: 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 title={tooltip}>
-	<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 1c907bcbd3..527a56958d 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 {
+		direction = "Vertical",
+		origin,
+		numberInterval,
+		majorMarkSpacing,
+		minorDivisions = 5,
+		microDivisions = 2
+	}: Props = $props();
 
-	let rulerInput: HTMLDivElement | undefined;
-	let rulerLength = 0;
-	let svgBounds = { width: "0px", height: "0px" };
+	let rulerInput: HTMLDivElement | undefined = $state();
+	let rulerLength = $state(0);
+	let svgBounds = $state({ width: "0px", height: "0px" });
 
-	$: svgPath = computeSvgPath(direction, origin, majorMarkSpacing, minorDivisions, microDivisions, rulerLength);
-	$: svgTexts = computeSvgTexts(direction, origin, majorMarkSpacing, numberInterval, rulerLength);
 
-	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 ef96d8959a..c22422cce5 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 }>();
-
-	export let direction: ScrollbarDirection = "Vertical";
-	export let thumbPosition = 0.5;
-	export let thumbLength = 0.5;
+	interface Props {
+		direction?: Graphite.Axis;
+		thumbPosition?: number;
+		thumbLength?: number;
+		ontrackShift?: (trackShift: number) => void;
+		onthumbPosition?: (trackShift: number) => void;
+		onthumbDragEnd?: () => void;
+		onthumbDragStart?: () => void;
+		onthumbDragAbort?: () => void;
+	}
 
-	let scrollTrack: HTMLDivElement | undefined;
-	let dragging = false;
+	let { 
+		direction = "Vertical", 
+		thumbPosition = 0.5, 
+		thumbLength = 0.5,
+		ontrackShift,
+		onthumbPosition,
+		onthumbDragEnd,
+		onthumbDragStart,
+		onthumbDragAbort,
+	}: Props = $props();
+
+	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 cabc70b455..a09ba561a8 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 440fb3533c..c3971fb2ce 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 b9a794d140..cbeefc0ad3 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 }>();
-
-	// 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 className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
-
-	let self: FieldInput | undefined;
+	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;
+	}
+
+	let {
+		label = undefined,
+		tooltip = undefined,
+		placeholder = undefined,
+		disabled = false,
+		value = $bindable(),
+		centered = false,
+		minWidth = 0,
+		class: className = "",
+		classes = {},
+		oncommitText,
+	}: Props = $props();
+
+	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 cff3beacba..5f6add784b 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 { primary, secondary }: Props = $props();
 
-	let primaryOpen = false;
-	let secondaryOpen = false;
+	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 3edb01a788..f72b522bbf 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;
-
-	$: iconSizeClass = ((icon: IconName) => {
+	interface Props {
+		class?: string;
+		classes?: Record<string, boolean>;
+		icon: IconName;
+		iconSizeOverride?: number | undefined;
+		disabled?: boolean;
+		tooltip?: string | undefined;
+	}
+
+	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 0c210b4d1d..f7ff012579 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 540aa16489..6f7583ccf4 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;
+	}
+
+	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();
 
-	$: extraClasses = Object.entries(classes)
+	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 f19d99d5e0..d203a33827 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;
-
-	$: keyboardLockInfoMessage = watchKeyboardLockInfoMessage(fullscreen.keyboardLockApiSupported);
+	interface Props {
+		keysWithLabelsGroups?: LayoutKeysGroup[];
+		mouseMotion?: MouseMotion | undefined;
+		requiresLock?: boolean;
+		textOnly?: boolean;
+		children?: import('svelte').Snippet;
+	}
 
-	$: 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 a41b26d0bc..bca838a835 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 551dfca2c9..d95813a323 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 {
+		tabMinWidths = false,
+		tabCloseButtons = false,
+		tabLabels,
+		tabActiveIndex,
+		panelType = undefined,
+		clickAction = undefined,
+		closeAction = undefined
+	}: Props = $props();
 
-	let tabElements: (LayoutRow | undefined)[] = [];
+	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 85ba09ef1d..c798ceaaef 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);
 				}
 			},
 		}),

From 476fd0a9ab609da61371afd04708cdd373d78dd0 Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Thu, 26 Jun 2025 12:24:03 +0530
Subject: [PATCH 03/16] phase 3: runes mode for all

---
 frontend/src/App.svelte                       |  2 +-
 frontend/src/components/Editor.svelte         |  9 ++-
 .../floating-menus/EyedropperPreview.svelte   | 36 ++++++----
 .../floating-menus/NodeCatalog.svelte         | 25 ++++---
 .../src/components/panels/Document.svelte     | 70 +++++++++----------
 frontend/src/components/panels/Layers.svelte  | 38 +++++-----
 .../src/components/panels/Properties.svelte   |  2 +-
 frontend/src/components/views/Graph.svelte    | 52 +++++++-------
 .../components/widgets/WidgetLayout.svelte    | 12 ++--
 .../components/widgets/WidgetSection.svelte   | 33 ++++++---
 .../src/components/widgets/WidgetSpan.svelte  | 35 ++++++----
 .../src/components/widgets/WidgetTable.svelte | 31 ++++----
 .../window/status-bar/StatusBar.svelte        |  2 +-
 .../window/title-bar/TitleBar.svelte          | 16 +++--
 .../window/title-bar/WindowButtonsMac.svelte  | 12 ++--
 .../window/title-bar/WindowButtonsWeb.svelte  |  2 +-
 .../title-bar/WindowButtonsWindows.svelte     |  6 +-
 .../window/title-bar/WindowTitle.svelte       |  6 +-
 .../window/workspace/Workspace.svelte         | 24 ++++---
 frontend/vite.config.ts                       | 11 +--
 20 files changed, 243 insertions(+), 181 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index a43fb1a6ad..7632a9d8cb 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -5,7 +5,7 @@
 
 	import Editor from "@graphite/components/Editor.svelte";
 
-	let editor: GraphiteEditor | undefined = undefined;
+	let editor: GraphiteEditor | undefined = $state(undefined);
 
 	onMount(async () => {
 		await initWasm();
diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte
index 148cd8e4b3..6c6813c346 100644
--- a/frontend/src/components/Editor.svelte
+++ b/frontend/src/components/Editor.svelte
@@ -19,8 +19,13 @@
 
 	import MainWindow from "@graphite/components/window/MainWindow.svelte";
 
-	// Graphite WASM editor
-	export let editor: Editor;
+	
+	interface Props {
+		// Graphite WASM editor
+		editor: Editor;
+	}
+
+	let { editor }: Props = $props();
 	setContext("editor", editor);
 
 	// State provider systems
diff --git a/frontend/src/components/floating-menus/EyedropperPreview.svelte b/frontend/src/components/floating-menus/EyedropperPreview.svelte
index 4ae69182c1..54c8d95166 100644
--- a/frontend/src/components/floating-menus/EyedropperPreview.svelte
+++ b/frontend/src/components/floating-menus/EyedropperPreview.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	// Should be equal to the width and height of the zoom preview canvas in the CSS
 	const ZOOM_WINDOW_DIMENSIONS_EXPANDED = 110;
 	// Should be equal to the width and height of the `.pixel-outline` div in the CSS, and should be evenly divisible into the number above
@@ -8,24 +8,32 @@
 </script>
 
 <script lang="ts">
-	import { onMount } from "svelte";
-
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 
 	const temporaryCanvas = document.createElement("canvas");
 	temporaryCanvas.width = ZOOM_WINDOW_DIMENSIONS;
 	temporaryCanvas.height = ZOOM_WINDOW_DIMENSIONS;
 
-	let zoomPreviewCanvas: HTMLCanvasElement | undefined;
+	let zoomPreviewCanvas: HTMLCanvasElement | undefined = $state();
+
+	interface Props {
+		imageData?: ImageData | undefined;
+		colorChoice: string;
+		primaryColor: string;
+		secondaryColor: string;
+		x: number;
+		y: number;
+	}
 
-	export let imageData: ImageData | undefined = undefined;
-	export let colorChoice: string;
-	export let primaryColor: string;
-	export let secondaryColor: string;
-	export let x: number;
-	export let y: number;
+	let {
+		imageData = undefined,
+		colorChoice,
+		primaryColor,
+		secondaryColor,
+		x,
+		y
+	}: Props = $props();
 
-	$: displayImageDataPreview(imageData);
 
 	function displayImageDataPreview(imageData: ImageData | undefined) {
 		if (!zoomPreviewCanvas) return;
@@ -43,7 +51,7 @@
 		context.drawImage(temporaryCanvas, 0, 0);
 	}
 
-	onMount(() => {
+	$effect(() => {
 		displayImageDataPreview(imageData);
 	});
 </script>
@@ -56,8 +64,8 @@
 >
 	<div class="ring">
 		<div class="canvas-container">
-			<canvas width={ZOOM_WINDOW_DIMENSIONS} height={ZOOM_WINDOW_DIMENSIONS} bind:this={zoomPreviewCanvas} />
-			<div class="pixel-outline" />
+			<canvas width={ZOOM_WINDOW_DIMENSIONS} height={ZOOM_WINDOW_DIMENSIONS} bind:this={zoomPreviewCanvas}></canvas>
+			<div class="pixel-outline"></div>
 		</div>
 	</div>
 </FloatingMenu>
diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte
index 5a8122dc84..8a8aca4b2e 100644
--- a/frontend/src/components/floating-menus/NodeCatalog.svelte
+++ b/frontend/src/components/floating-menus/NodeCatalog.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext, onMount } from "svelte";
+	import { createBubbler, stopPropagation, passive } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+	import { getContext, onMount } from "svelte";
 
 	import type { FrontendNodeType } from "@graphite/messages";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
@@ -8,16 +11,19 @@
 	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
-	const dispatch = createEventDispatcher<{ selectNodeType: string }>();
 	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
 
-	export let disabled = false;
-	export let initialSearchTerm = "";
+	interface Props {
+		disabled?: boolean;
+		initialSearchTerm?: string;
+		onselectNodeType?: (selectNodeType: string) => void;
+	}
+
+	let { disabled = false, initialSearchTerm = "", onselectNodeType }: Props = $props();
 
-	let nodeSearchInput: TextInput | undefined = undefined;
-	let searchTerm = initialSearchTerm;
+	let nodeSearchInput: TextInput | undefined = $state(undefined);
+	let searchTerm = $state(initialSearchTerm);
 
-	$: nodeCategories = buildNodeCategories($nodeGraph.nodeTypes, searchTerm);
 
 	type NodeCategoryDetails = {
 		nodes: FrontendNodeType[];
@@ -107,18 +113,19 @@
 	onMount(() => {
 		setTimeout(() => nodeSearchInput?.focus(), 0);
 	});
+	let nodeCategories = $derived(buildNodeCategories($nodeGraph.nodeTypes, searchTerm));
 </script>
 
 <div class="node-catalog">
 	<TextInput placeholder="Search Nodes..." bind:value={searchTerm} bind:this={nodeSearchInput} />
-	<div class="list-results" on:wheel|passive|stopPropagation>
+	<div class="list-results" use:passive={['wheel', () => stopPropagation(bubble('wheel'))]}>
 		{#each nodeCategories as nodeCategory}
 			<details open={nodeCategory[1].open}>
 				<summary>
 					<TextLabel>{nodeCategory[0]}</TextLabel>
 				</summary>
 				{#each nodeCategory[1].nodes as nodeType}
-					<TextButton {disabled} label={nodeType.name} tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)} action={() => dispatch("selectNodeType", nodeType.name)} />
+					<TextButton {disabled} label={nodeType.name} tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)} action={() => onselectNodeType?.(nodeType.name)} />
 				{/each}
 			</details>
 		{:else}
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index c0732fba5b..04fad762e3 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -29,70 +29,70 @@
 	import ScrollbarInput from "@graphite/components/widgets/inputs/ScrollbarInput.svelte";
 	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
-	let rulerHorizontal: RulerInput | undefined;
-	let rulerVertical: RulerInput | undefined;
-	let viewport: HTMLDivElement | undefined;
+	let rulerHorizontal: RulerInput | undefined = $state();
+	let rulerVertical: RulerInput | undefined = $state();
+	let viewport: HTMLDivElement | undefined = $state();
 
 	const editor = getContext<Editor>("editor");
 	const document = getContext<DocumentState>("document");
 
 	// Interactive text editing
-	let textInput: undefined | HTMLDivElement = undefined;
-	let showTextInput: boolean;
-	let textInputMatrix: number[];
+	let textInput: undefined | HTMLDivElement = $state(undefined);
+	let showTextInput: boolean = $state(false);
+	let textInputMatrix: number[] = $state([]);
 
 	// Scrollbars
-	let scrollbarPos: XY = { x: 0.5, y: 0.5 };
-	let scrollbarSize: XY = { x: 0.5, y: 0.5 };
+	let scrollbarPos: XY = $state({ x: 0.5, y: 0.5 });
+	let scrollbarSize: XY = $state({ x: 0.5, y: 0.5 });
 	let scrollbarMultiplier: XY = { x: 0, y: 0 };
 
 	// Rulers
-	let rulerOrigin: XY = { x: 0, y: 0 };
-	let rulerSpacing = 100;
-	let rulerInterval = 100;
-	let rulersVisible = true;
+	let rulerOrigin: XY = $state({ x: 0, y: 0 });
+	let rulerSpacing = $state(100);
+	let rulerInterval = $state(100);
+	let rulersVisible = $state(true);
 
 	// Rendered SVG viewport data
-	let artworkSvg = "";
+	let artworkSvg = $state("");
 
 	// Rasterized SVG viewport data, or none if it's not up-to-date
 	let rasterizedCanvas: HTMLCanvasElement | undefined = undefined;
 	let rasterizedContext: CanvasRenderingContext2D | undefined = undefined;
 
 	// Cursor icon to display while hovering over the canvas
-	let canvasCursor = "default";
+	let canvasCursor = $state("default");
 
 	// Cursor position for cursor floating menus like the Eyedropper tool zoom
-	let cursorLeft = 0;
-	let cursorTop = 0;
-	let cursorEyedropper = false;
-	let cursorEyedropperPreviewImageData: ImageData | undefined = undefined;
-	let cursorEyedropperPreviewColorChoice = "";
-	let cursorEyedropperPreviewColorPrimary = "";
-	let cursorEyedropperPreviewColorSecondary = "";
+	let cursorLeft = $state(0);
+	let cursorTop = $state(0);
+	let cursorEyedropper = $state(false);
+	let cursorEyedropperPreviewImageData: ImageData | undefined = $state(undefined);
+	let cursorEyedropperPreviewColorChoice = $state("");
+	let cursorEyedropperPreviewColorPrimary = $state("");
+	let cursorEyedropperPreviewColorSecondary = $state("");
 
 	// Canvas dimensions
-	let canvasSvgWidth: number | undefined = undefined;
-	let canvasSvgHeight: number | undefined = undefined;
+	let canvasSvgWidth: number | undefined = $state(undefined);
+	let canvasSvgHeight: number | undefined = $state(undefined);
 
-	let devicePixelRatio: number | undefined;
+	let devicePixelRatio: number | undefined = $state();
 
 	// Dimension is rounded up to the nearest even number because resizing is centered, and dividing an odd number by 2 for centering causes antialiasing
-	$: canvasWidthRoundedToEven = canvasSvgWidth && (canvasSvgWidth % 2 === 1 ? canvasSvgWidth + 1 : canvasSvgWidth);
-	$: canvasHeightRoundedToEven = canvasSvgHeight && (canvasSvgHeight % 2 === 1 ? canvasSvgHeight + 1 : canvasSvgHeight);
+	let canvasWidthRoundedToEven = $derived(canvasSvgWidth && (canvasSvgWidth % 2 === 1 ? canvasSvgWidth + 1 : canvasSvgWidth));
+	let canvasHeightRoundedToEven = $derived(canvasSvgHeight && (canvasSvgHeight % 2 === 1 ? canvasSvgHeight + 1 : canvasSvgHeight));
 	// Used to set the canvas element size on the page.
 	// The value above in pixels, or if undefined, we fall back to 100% as a non-pixel-perfect backup that's hopefully short-lived
-	$: canvasWidthCSS = canvasWidthRoundedToEven ? `${canvasWidthRoundedToEven}px` : "100%";
-	$: canvasHeightCSS = canvasHeightRoundedToEven ? `${canvasHeightRoundedToEven}px` : "100%";
+	let canvasWidthCSS = $derived(canvasWidthRoundedToEven ? `${canvasWidthRoundedToEven}px` : "100%");
+	let canvasHeightCSS = $derived(canvasHeightRoundedToEven ? `${canvasHeightRoundedToEven}px` : "100%");
 
-	$: canvasWidthScaled = canvasSvgWidth && devicePixelRatio && Math.floor(canvasSvgWidth * devicePixelRatio);
-	$: canvasHeightScaled = canvasSvgHeight && devicePixelRatio && Math.floor(canvasSvgHeight * devicePixelRatio);
+	let canvasWidthScaled = $derived(canvasSvgWidth && devicePixelRatio && Math.floor(canvasSvgWidth * devicePixelRatio));
+	let canvasHeightScaled = $derived(canvasSvgHeight && devicePixelRatio && Math.floor(canvasSvgHeight * devicePixelRatio));
 
 	// Used to set the canvas rendering dimensions.
-	$: canvasWidthScaledRoundedToEven = canvasWidthScaled && (canvasWidthScaled % 2 === 1 ? canvasWidthScaled + 1 : canvasWidthScaled);
-	$: canvasHeightScaledRoundedToEven = canvasHeightScaled && (canvasHeightScaled % 2 === 1 ? canvasHeightScaled + 1 : canvasHeightScaled);
+	let canvasWidthScaledRoundedToEven = $derived(canvasWidthScaled && (canvasWidthScaled % 2 === 1 ? canvasWidthScaled + 1 : canvasWidthScaled));
+	let canvasHeightScaledRoundedToEven = $derived(canvasHeightScaled && (canvasHeightScaled % 2 === 1 ? canvasHeightScaled + 1 : canvasHeightScaled));
 
-	$: toolShelfTotalToolsAndSeparators = ((layoutGroup) => {
+	let toolShelfTotalToolsAndSeparators = $derived(((layoutGroup) => {
 		if (!isWidgetSpanRow(layoutGroup)) return undefined;
 
 		let totalSeparators = 0;
@@ -124,7 +124,7 @@
 			totalToolRowsFor2Columns,
 			totalToolRowsFor3Columns,
 		};
-	})($document.toolShelfLayout.layout[0]);
+	})($document.toolShelfLayout.layout[0]));
 
 	function dropFile(e: DragEvent) {
 		const { dataTransfer } = e;
@@ -523,7 +523,7 @@
 						</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})" onscroll={preventTextEditingScroll} />
+								<div bind:this={textInput} style:transform="matrix({textInputMatrix})" onscroll={preventTextEditingScroll}></div>
 							{/if}
 						</div>
 						<canvas
diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index bc935cbeca..939ccc213c 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { handlers } from 'svelte/legacy';
+
 	import { getContext, onMount, onDestroy, tick } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
@@ -43,26 +45,26 @@
 	const editor = getContext<Editor>("editor");
 	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
 
-	let list: LayoutCol | undefined;
+	let list: LayoutCol | undefined = $state();
 
 	// Layer data
 	let layerCache = new Map<string, LayerPanelEntry>(); // TODO: replace with BigUint64Array as index
-	let layers: LayerListingInfo[] = [];
+	let layers: LayerListingInfo[] = $state([]);
 
 	// Interactive dragging
-	let draggable = true;
-	let draggingData: undefined | DraggingData = undefined;
-	let fakeHighlightOfNotYetSelectedLayerBeingDragged: undefined | bigint = undefined;
-	let dragInPanel = false;
+	let draggable = $state(true);
+	let draggingData: undefined | DraggingData = $state(undefined);
+	let fakeHighlightOfNotYetSelectedLayerBeingDragged: undefined | bigint = $state(undefined);
+	let dragInPanel = $state(false);
 
 	// Interactive clipping
-	let layerToClipUponClick: LayerListingInfo | undefined = undefined;
-	let layerToClipAltKeyPressed = false;
+	let layerToClipUponClick: LayerListingInfo | undefined = $state(undefined);
+	let layerToClipAltKeyPressed = $state(false);
 
 	// Layouts
-	let layersPanelControlBarLeftLayout = defaultWidgetLayout();
-	let layersPanelControlBarRightLayout = defaultWidgetLayout();
-	let layersPanelBottomBarLayout = defaultWidgetLayout();
+	let layersPanelControlBarLeftLayout = $state(defaultWidgetLayout());
+	let layersPanelControlBarRightLayout = $state(defaultWidgetLayout());
+	let layersPanelBottomBarLayout = $state(defaultWidgetLayout());
 
 	onMount(() => {
 		editor.subscriptions.subscribeJsMessage(UpdateLayersPanelControlBarLeftLayout, (updateLayersPanelControlBarLeftLayout) => {
@@ -530,7 +532,7 @@
 							title={listing.entry.expanded
 								? "Collapse (Click) / Collapse All (Alt Click)"
 								: `Expand (Click) / Expand All (Alt Click)${listing.entry.ancestorOfSelected ? "\n(A selected layer is contained within)" : ""}`}
-							on:click={(e) => handleExpandArrowClickWithModifiers(e, listing.entry.id)}
+							onclick={(e) => handleExpandArrowClickWithModifiers(e, listing.entry.id)}
 							tabindex="0"
 						></button>
 					{:else}
@@ -554,10 +556,12 @@
 							value={listing.entry.alias}
 							placeholder={listing.entry.name}
 							disabled={!listing.editingName}
-							on:blur={() => onEditLayerNameDeselect(listing)}
-							on:keydown={(e) => e.key === "Escape" && onEditLayerNameDeselect(listing)}
-							on:keydown={(e) => e.key === "Enter" && onEditLayerNameChange(listing, e)}
-							on:change={(e) => onEditLayerNameChange(listing, e)}
+							onblur={() => onEditLayerNameDeselect(listing)}
+							onkeydown={(e) => {
+								e.key === "Escape" && onEditLayerNameDeselect(listing);
+								e.key === "Enter" && onEditLayerNameChange(listing, e);
+							}}
+							onchange={(e) => onEditLayerNameChange(listing, e)}
 						/>
 					</LayoutRow>
 					{#if !listing.entry.unlocked || !listing.entry.parentsUnlocked}
@@ -584,7 +588,7 @@
 			{/each}
 		</LayoutCol>
 		{#if draggingData && !draggingData.highlightFolder && dragInPanel}
-			<div class="insert-mark" style:left={`${4 + draggingData.insertDepth * 16}px`} style:top={`${draggingData.markerHeight}px`} />
+			<div class="insert-mark" style:left={`${4 + draggingData.insertDepth * 16}px`} style:top={`${draggingData.markerHeight}px`}></div>
 		{/if}
 	</LayoutRow>
 	<LayoutRow class="bottom-bar" scrollableX={true}>
diff --git a/frontend/src/components/panels/Properties.svelte b/frontend/src/components/panels/Properties.svelte
index 72607849a5..1f5ae52010 100644
--- a/frontend/src/components/panels/Properties.svelte
+++ b/frontend/src/components/panels/Properties.svelte
@@ -9,7 +9,7 @@
 
 	const editor = getContext<Editor>("editor");
 
-	let propertiesSectionsLayout = defaultWidgetLayout();
+	let propertiesSectionsLayout = $state(defaultWidgetLayout());
 
 	onMount(() => {
 		editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelSectionsLayout, (updatePropertyPanelSectionsLayout) => {
diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte
index 9d730d3b2c..c46905151f 100644
--- a/frontend/src/components/views/Graph.svelte
+++ b/frontend/src/components/views/Graph.svelte
@@ -26,21 +26,16 @@
 	const editor = getContext<Editor>("editor");
 	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
 
-	let graph: HTMLDivElement | undefined;
+	let graph: HTMLDivElement | undefined = $state();
 
-	// Key value is node id + input/output index
-	// Imports/Export are stored at a key value of 0
-
-	$: gridSpacing = calculateGridSpacing($nodeGraph.transform.scale);
-	$: dotRadius = 1 + Math.floor($nodeGraph.transform.scale - 0.5 + 0.001) / 2;
 
-	let inputElement: HTMLInputElement;
-	let hoveringImportIndex: number | undefined = undefined;
-	let hoveringExportIndex: number | undefined = undefined;
+	let inputElement  = $state<HTMLInputElement>();
+	let hoveringImportIndex = $state<number>();
+	let hoveringExportIndex = $state<number>()
 
-	let editingNameImportIndex: number | undefined = undefined;
-	let editingNameExportIndex: number | undefined = undefined;
-	let editingNameText = "";
+	let editingNameImportIndex = $state<number>();
+	let editingNameExportIndex = $state<number>();
+	let editingNameText = $state<string>("");
 
 	function exportsToEdgeTextInputWidth() {
 		let exportTextDivs = document.querySelectorAll(`[data-export-text-edge]`);
@@ -230,6 +225,11 @@
 		}
 		return result;
 	}
+	// Key value is node id + input/output index
+	// Imports/Export are stored at a key value of 0
+
+	let gridSpacing = $derived(calculateGridSpacing($nodeGraph.transform.scale));
+	let dotRadius = $derived(1 + Math.floor($nodeGraph.transform.scale - 0.5 + 0.001) / 2);
 </script>
 
 <div
@@ -252,9 +252,9 @@
 			}}
 		>
 			{#if typeof $nodeGraph.contextMenuInformation.contextMenuData === "string" && $nodeGraph.contextMenuInformation.contextMenuData === "CreateNode"}
-				<NodeCatalog on:selectNodeType={(e) => createNode(e.detail)} />
+				<NodeCatalog onselectNodeType={(e) => createNode(e)} />
 			{:else if $nodeGraph.contextMenuInformation.contextMenuData && "compatibleType" in $nodeGraph.contextMenuInformation.contextMenuData}
-				<NodeCatalog initialSearchTerm={$nodeGraph.contextMenuInformation.contextMenuData.compatibleType || ""} on:selectNodeType={(e) => createNode(e.detail)} />
+				<NodeCatalog initialSearchTerm={$nodeGraph.contextMenuInformation.contextMenuData.compatibleType || ""} onselectNodeType={(e) => createNode(e)} />
 			{:else}
 				{@const contextMenuData = $nodeGraph.contextMenuInformation.contextMenuData}
 				<LayoutRow class="toggle-layer-or-node">
@@ -356,8 +356,8 @@
 
 			<div
 				class="edit-import-export import"
-				on:pointerenter={() => (hoveringImportIndex = index)}
-				on:pointerleave={() => (hoveringImportIndex = undefined)}
+				onpointerenter={() => (hoveringImportIndex = index)}
+				onpointerleave={() => (hoveringImportIndex = undefined)}
 				style:--offset-left={position.x / 24}
 				style:--offset-top={position.y / 24}
 			>
@@ -368,11 +368,11 @@
 						style:width={importsToEdgeTextInputWidth()}
 						bind:this={inputElement}
 						bind:value={editingNameText}
-						on:blur={setEditingImportName}
-						on:keydown={(e) => e.key === "Enter" && setEditingImportName(e)}
+						onblur={setEditingImportName}
+						onkeydown={(e) => e.key === "Enter" && setEditingImportName(e)}
 					/>
 				{:else}
-					<p class="import-text" on:dblclick={() => setEditingImportNameIndex(index, outputMetadata.name)}>{outputMetadata.name}</p>
+					<p class="import-text" ondblclick={() => setEditingImportNameIndex(index, outputMetadata.name)}>{outputMetadata.name}</p>
 				{/if}
 				{#if hoveringImportIndex === index || editingNameImportIndex === index}
 					<IconButton
@@ -394,7 +394,7 @@
 				x: Number($nodeGraph.imports[0].position.x),
 				y: Number($nodeGraph.imports[0].position.y) + Number($nodeGraph.reorderImportIndex) * 24,
 			}}
-			<div class="reorder-bar" style:--offset-left={(position.x - 48) / 24} style:--offset-top={(position.y - 4) / 24} />
+			<div class="reorder-bar" style:--offset-left={(position.x - 48) / 24} style:--offset-top={(position.y - 4) / 24}></div>
 		{/if}
 		{#if $nodeGraph.addImport !== undefined}
 			<div class="plus" style:--offset-left={$nodeGraph.addImport.x / 24} style:--offset-top={$nodeGraph.addImport.y / 24}>
@@ -428,8 +428,8 @@
 			</svg>
 			<div
 				class="edit-import-export export"
-				on:pointerenter={() => (hoveringExportIndex = index)}
-				on:pointerleave={() => (hoveringExportIndex = undefined)}
+				onpointerenter={() => (hoveringExportIndex = index)}
+				onpointerleave={() => (hoveringExportIndex = undefined)}
 				style:--offset-left={position.x / 24}
 				style:--offset-top={position.y / 24}
 			>
@@ -452,11 +452,11 @@
 						style:width={exportsToEdgeTextInputWidth()}
 						bind:this={inputElement}
 						bind:value={editingNameText}
-						on:blur={setEditingExportName}
-						on:keydown={(e) => e.key === "Enter" && setEditingExportName(e)}
+						onblur={setEditingExportName}
+						onkeydown={(e) => e.key === "Enter" && setEditingExportName(e)}
 					/>
 				{:else}
-					<p class="export-text" on:dblclick={() => setEditingExportNameIndex(index, inputMetadata.name)}>{inputMetadata.name}</p>
+					<p class="export-text" ondblclick={() => setEditingExportNameIndex(index, inputMetadata.name)}>{inputMetadata.name}</p>
 				{/if}
 			</div>
 		{/each}
@@ -465,7 +465,7 @@
 				x: Number($nodeGraph.exports[0].position.x),
 				y: Number($nodeGraph.exports[0].position.y) + Number($nodeGraph.reorderExportIndex) * 24,
 			}}
-			<div class="reorder-bar" style:--offset-left={position.x / 24} style:--offset-top={(position.y - 4) / 24} />
+			<div class="reorder-bar" style:--offset-left={position.x / 24} style:--offset-top={(position.y - 4) / 24}></div>
 		{/if}
 		{#if $nodeGraph.addExport !== undefined}
 			<div class="plus" style:--offset-left={$nodeGraph.addExport.x / 24} style:--offset-top={$nodeGraph.addExport.y / 24}>
diff --git a/frontend/src/components/widgets/WidgetLayout.svelte b/frontend/src/components/widgets/WidgetLayout.svelte
index 63b75e274f..826a53893d 100644
--- a/frontend/src/components/widgets/WidgetLayout.svelte
+++ b/frontend/src/components/widgets/WidgetLayout.svelte
@@ -6,10 +6,14 @@
 	import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
 	import WidgetTable from "@graphite/components/widgets/WidgetTable.svelte";
 
-	export let layout: WidgetLayout;
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
+	
+	interface Props {
+		layout: WidgetLayout;
+		class?: string;
+		classes?: Record<string, boolean>;
+	}
+
+	let { layout, class: className = "", classes = {} }: Props = $props();
 </script>
 
 {#each layout.layout as layoutGroup}
diff --git a/frontend/src/components/widgets/WidgetSection.svelte b/frontend/src/components/widgets/WidgetSection.svelte
index 0feee39cbc..4c3d18ea84 100644
--- a/frontend/src/components/widgets/WidgetSection.svelte
+++ b/frontend/src/components/widgets/WidgetSection.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import WidgetSection from './WidgetSection.svelte';
+	import { stopPropagation } from 'svelte/legacy';
+
 	import { getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
@@ -9,23 +12,33 @@
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
 
-	export let widgetData: WidgetSectionFromJsMessages;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	export let layoutTarget: any; // TODO: Give type
+	
+
+	
+	interface Props {
+		widgetData: WidgetSectionFromJsMessages;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		layoutTarget: any; // TODO: Give type
+		class?: string;
+		classes?: Record<string, boolean>;
+	}
 
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
+	let {
+		widgetData,
+		layoutTarget,
+		class: className = "",
+		classes = {}
+	}: Props = $props();
 
-	let expanded = true;
+	let expanded = $state(true);
 
 	const editor = getContext<Editor>("editor");
 </script>
 
 <!-- TODO: Implement collapsable sections with properties system -->
 <LayoutCol class={`widget-section ${className}`.trim()} {classes}>
-	<button class="header" class:expanded on:click|stopPropagation={() => (expanded = !expanded)} tabindex="0">
-		<div class="expand-arrow" />
+	<button class="header" class:expanded onclick={stopPropagation(() => (expanded = !expanded))} tabindex="0">
+		<div class="expand-arrow"></div>
 		<TextLabel tooltip={widgetData.description} bold={true}>{widgetData.name}</TextLabel>
 		<IconButton
 			icon={widgetData.pinned ? "PinActive" : "PinInactive"}
@@ -67,7 +80,7 @@
 				{:else if isWidgetSpanColumn(layoutGroup)}
 					<TextLabel styles={{ color: "#d6536e" }}>Error: The WidgetSpan used here should be a row not a column</TextLabel>
 				{:else if isWidgetSection(layoutGroup)}
-					<svelte:self widgetData={layoutGroup} {layoutTarget} />
+					<WidgetSection widgetData={layoutGroup} {layoutTarget} />
 				{:else}
 					<TextLabel styles={{ color: "#d6536e" }}>Error: The widget that belongs here has an invalid layout group type</TextLabel>
 				{/if}
diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index 805fa9d20b..26bc10e931 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -30,21 +30,21 @@
 	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
 	const editor = getContext<Editor>("editor");
+	
+	interface Props {
+		widgetData: WidgetSpanRow | WidgetSpanColumn;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		layoutTarget: any;
+		class?: string;
+		classes?: Record<string, boolean>;
+	}
 
-	export let widgetData: WidgetSpanRow | WidgetSpanColumn;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	export let layoutTarget: any;
-
-	let className = "";
-	export { className as class };
-	export let classes: Record<string, boolean> = {};
-
-	$: extraClasses = Object.entries(classes)
-		.flatMap(([className, stateName]) => (stateName ? [className] : []))
-		.join(" ");
-
-	$: direction = watchDirection(widgetData);
-	$: widgets = watchWidgets(widgetData);
+	let {
+		widgetData,
+		layoutTarget,
+		class: className = "",
+		classes = {}
+	}: Props = $props();
 
 	function watchDirection(widgetData: WidgetSpanRow | WidgetSpanColumn): "row" | "column" | undefined {
 		if (isWidgetSpanRow(widgetData)) return "row";
@@ -77,6 +77,11 @@
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		return Object.fromEntries(Object.entries(props).filter((entry) => !exclusions.includes(entry[0]))) as any;
 	}
+	let extraClasses = $derived(Object.entries(classes)
+		.flatMap(([className, stateName]) => (stateName ? [className] : []))
+		.join(" "));
+	let direction = $derived(watchDirection(widgetData));
+	let widgets = $derived(watchWidgets(widgetData));
 </script>
 
 <!-- TODO: Refactor this component to use `<svelte:component this={attributesObject} />` to avoid all the separate conditional components -->
@@ -130,7 +135,7 @@
 		{/if}
 		{@const nodeCatalog = narrowWidgetProps(component.props, "NodeCatalog")}
 		{#if nodeCatalog}
-			<NodeCatalog {...exclude(nodeCatalog)} on:selectNodeType={(e) => widgetValueCommitAndUpdate(index, e.detail)} />
+			<NodeCatalog {...exclude(nodeCatalog)} onselectNodeType={(e) => widgetValueCommitAndUpdate(index, e)} />
 		{/if}
 		{@const numberInput = narrowWidgetProps(component.props, "NumberInput")}
 		{#if numberInput}
diff --git a/frontend/src/components/widgets/WidgetTable.svelte b/frontend/src/components/widgets/WidgetTable.svelte
index 6530b4c899..e0c3954fb2 100644
--- a/frontend/src/components/widgets/WidgetTable.svelte
+++ b/frontend/src/components/widgets/WidgetTable.svelte
@@ -3,21 +3,28 @@
 
 	import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
 
-	export let widgetData: WidgetTableFromJsMessages;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	export let layoutTarget: any; // TODO: Give this a real type
+	
+	interface Props {
+		widgetData: WidgetTableFromJsMessages;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		layoutTarget: any; // TODO: Give this a real type
+	}
+
+	let { widgetData, layoutTarget }: Props = $props();
 </script>
 
 <table>
-	{#each widgetData.tableWidgets as row}
-		<tr>
-			{#each row as cell}
-				<td>
-					<WidgetSpan widgetData={{ rowWidgets: [cell] }} {layoutTarget} />
-				</td>
-			{/each}
-		</tr>
-	{/each}
+	<tbody>
+		{#each widgetData.tableWidgets as row}
+			<tr>
+				{#each row as cell}
+					<td>
+						<WidgetSpan widgetData={{ rowWidgets: [cell] }} {layoutTarget} />
+					</td>
+				{/each}
+			</tr>
+		{/each}
+	</tbody>
 </table>
 
 <style lang="scss">
diff --git a/frontend/src/components/window/status-bar/StatusBar.svelte b/frontend/src/components/window/status-bar/StatusBar.svelte
index 67991799b0..bf8be523ca 100644
--- a/frontend/src/components/window/status-bar/StatusBar.svelte
+++ b/frontend/src/components/window/status-bar/StatusBar.svelte
@@ -11,7 +11,7 @@
 
 	const editor = getContext<Editor>("editor");
 
-	let hintData: HintData = [];
+	let hintData: HintData = $state([]);
 
 	function inputKeysForPlatform(hint: HintInfo): LayoutKeysGroup[] {
 		if (platformIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
diff --git a/frontend/src/components/window/title-bar/TitleBar.svelte b/frontend/src/components/window/title-bar/TitleBar.svelte
index bca838a835..bef0d03b2a 100644
--- a/frontend/src/components/window/title-bar/TitleBar.svelte
+++ b/frontend/src/components/window/title-bar/TitleBar.svelte
@@ -13,8 +13,12 @@
 	import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
 	import WindowTitle from "@graphite/components/window/title-bar/WindowTitle.svelte";
 
-	export let platform: Graphite.Platform;
-	export let maximized: boolean;
+	interface Props {
+		platform: Graphite.Platform;
+		maximized: boolean;
+	}
+
+	let { platform, maximized }: Props = $props();
 
 	const editor = getContext<Editor>("editor");
 	const portfolio = getContext<PortfolioState>("portfolio");
@@ -29,11 +33,11 @@
 		[ACCEL_KEY, "Shift", "KeyT"],
 	];
 
-	let entries: MenuListEntry[] = [];
+	let entries: MenuListEntry[] = $state([]);
 
-	$: docIndex = $portfolio.activeDocumentIndex;
-	$: displayName = $portfolio.documents[docIndex]?.displayName || "";
-	$: windowTitle = `${displayName}${displayName && " - "}Graphite`;
+	let docIndex = $derived($portfolio.activeDocumentIndex);
+	let displayName = $derived($portfolio.documents[docIndex]?.displayName || "");
+	let windowTitle = $derived(`${displayName}${displayName && " - "}Graphite`);
 
 	onMount(() => {
 		const arraysEqual = (a: KeyRaw[], b: KeyRaw[]): boolean => a.length === b.length && a.every((aValue, i) => aValue === b[i]);
diff --git a/frontend/src/components/window/title-bar/WindowButtonsMac.svelte b/frontend/src/components/window/title-bar/WindowButtonsMac.svelte
index d48a6d83b3..1f97686774 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsMac.svelte
+++ b/frontend/src/components/window/title-bar/WindowButtonsMac.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
-	export let maximized = false;
+	interface Props {
+		maximized?: boolean;
+	}
+
+	let { maximized = false }: Props = $props();
 </script>
 
 <LayoutRow class="window-buttons-mac">
-	<div class="close" title="Close" />
-	<div class="minimize" title={maximized ? "Minimize" : "Maximize"} />
-	<div class="zoom" title="Zoom" />
+	<div class="close" title="Close"></div>
+	<div class="minimize" title={maximized ? "Minimize" : "Maximize"}></div>
+	<div class="zoom" title="Zoom"></div>
 </LayoutRow>
 
 <style lang="scss" global>
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte b/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
index 12c8494da9..8b9db9c9f7 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
+++ b/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
@@ -9,7 +9,7 @@
 
 	const fullscreen = getContext<FullscreenState>("fullscreen");
 
-	$: requestFullscreenHotkeys = fullscreen.keyboardLockApiSupported && !$fullscreen.keyboardLocked;
+	let requestFullscreenHotkeys = $derived(fullscreen.keyboardLockApiSupported && !$fullscreen.keyboardLocked);
 
 	async function handleClick() {
 		if ($fullscreen.windowFullscreen) fullscreen.exitFullscreen();
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte b/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
index 267e98587e..ce9ec86e2d 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
+++ b/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
@@ -2,7 +2,11 @@
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
-	export let maximized = false;
+	interface Props {
+		maximized?: boolean;
+	}
+
+	let { maximized = false }: Props = $props();
 </script>
 
 <LayoutRow class="window-button windows minimize" tooltip="Minimize">
diff --git a/frontend/src/components/window/title-bar/WindowTitle.svelte b/frontend/src/components/window/title-bar/WindowTitle.svelte
index f0af261cdf..81a4b22a05 100644
--- a/frontend/src/components/window/title-bar/WindowTitle.svelte
+++ b/frontend/src/components/window/title-bar/WindowTitle.svelte
@@ -2,7 +2,11 @@
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
-	export let text: string;
+	interface Props {
+		text: string;
+	}
+
+	let { text }: Props = $props();
 </script>
 
 <LayoutRow class="window-title">
diff --git a/frontend/src/components/window/workspace/Workspace.svelte b/frontend/src/components/window/workspace/Workspace.svelte
index 4d22dd5634..0ae7c26710 100644
--- a/frontend/src/components/window/workspace/Workspace.svelte
+++ b/frontend/src/components/window/workspace/Workspace.svelte
@@ -22,21 +22,12 @@
 		/*         └─ */ layers: 55,
 	};
 
-	let panelSizes = PANEL_SIZES;
-	let documentPanel: Panel | undefined;
+	let panelSizes = $state(PANEL_SIZES);
+	let documentPanel: Panel | undefined = $state();
 	let gutterResizeRestore: [number, number] | undefined = undefined;
 	let pointerCaptureId: number | undefined = undefined;
 
-	$: documentPanel?.scrollTabIntoView($portfolio.activeDocumentIndex);
 
-	$: documentTabLabels = $portfolio.documents.map((doc: FrontendDocumentDetails) => {
-		const name = doc.displayName;
-
-		if (!editor.handle.inDevelopmentMode()) return { name };
-
-		const tooltip = `Document ID: ${doc.id}`;
-		return { name, tooltip };
-	});
 
 	const editor = getContext<Editor>("editor");
 	const portfolio = getContext<PortfolioState>("portfolio");
@@ -130,6 +121,17 @@
 
 		addListeners();
 	}
+	$effect(() => {
+		documentPanel?.scrollTabIntoView($portfolio.activeDocumentIndex);
+	});
+	let documentTabLabels = $derived($portfolio.documents.map((doc: FrontendDocumentDetails) => {
+		const name = doc.displayName;
+
+		if (!editor.handle.inDevelopmentMode()) return { name };
+
+		const tooltip = `Document ID: ${doc.id}`;
+		return { name, tooltip };
+	}));
 </script>
 
 <LayoutRow class="workspace" data-workspace>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index c798ceaaef..bc56a9481e 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -34,16 +34,7 @@ const ALLOWED_LICENSES = [
 	"NCSA",
 ];
 
-const runesGlobs = [
-	"**/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",
-];
+const runesGlobs = ["**/*.svelte"];
 
 function forceRunes(filePath: string): boolean {
 	const relativePath = filePath.slice(filePath.indexOf("src"));

From f99b2d9f00053bd67ae711b388c356b0112956da Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Thu, 26 Jun 2025 19:52:15 +0530
Subject: [PATCH 04/16] fix(DropdownInput): return the index of entry instead
 of object reference

---
 .../src/components/widgets/inputs/DropdownInput.svelte    | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 1c02a86b83..f831c3093c 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -60,6 +60,10 @@
 		activeEntry = makeActiveEntry();
 	}
 
+	function getEntryIndex(entry: MenuListEntry): number {
+		return entries.flat().findIndex(item => item.value === entry.value);
+	}
+
 	// Called when the `activeEntry` two-way binding on this component's MenuList component is changed, or by the `selectedIndex()` watcher above (but we want to skip that case)
 	function watchActiveEntry(activeEntry: MenuListEntry) {
 		if (activeEntrySkipWatcher) {
@@ -67,12 +71,12 @@
 		} 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) onhoverInEntry?.(initialSelectedIndex);
-			onselectedIndex?.(entries.flat().indexOf(activeEntry));
+			onselectedIndex?.(getEntryIndex(activeEntry));
 		}
 	}
 
 	function dispatchHoverInEntry(hoveredEntry: MenuListEntry) {
-		onhoverInEntry?.(entries.flat().indexOf(hoveredEntry));
+		onhoverInEntry?.(getEntryIndex(hoveredEntry));
 	}
 
 	function dispatchHoverOutEntry() {

From 1bf89ca6c02d40881474bdb7304193bfce12e85d Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Thu, 26 Jun 2025 22:37:13 +0530
Subject: [PATCH 05/16] Phase 4: removes svelte/legacy compat APIs

---
 .../floating-menus/NodeCatalog.svelte         | 14 ++++++---
 .../src/components/layout/LayoutCol.svelte    | 31 +++++++++----------
 .../src/components/layout/LayoutRow.svelte    | 31 +++++++++----------
 frontend/src/components/panels/Layers.svelte  |  2 --
 .../components/widgets/WidgetSection.svelte   |  6 ++--
 .../widgets/inputs/NumberInput.svelte         | 13 +++++---
 6 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte
index 8a8aca4b2e..328a7b9245 100644
--- a/frontend/src/components/floating-menus/NodeCatalog.svelte
+++ b/frontend/src/components/floating-menus/NodeCatalog.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation, passive } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 	import { getContext, onMount } from "svelte";
 
 	import type { FrontendNodeType } from "@graphite/messages";
@@ -10,6 +7,7 @@
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import type { WheelEventHandler } from 'svelte/elements';
 
 	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
 
@@ -17,9 +15,10 @@
 		disabled?: boolean;
 		initialSearchTerm?: string;
 		onselectNodeType?: (selectNodeType: string) => void;
+		onwheel?: WheelEventHandler<HTMLDivElement>;
 	}
 
-	let { disabled = false, initialSearchTerm = "", onselectNodeType }: Props = $props();
+	let { disabled = false, initialSearchTerm = "", onselectNodeType, onwheel }: Props = $props();
 
 	let nodeSearchInput: TextInput | undefined = $state(undefined);
 	let searchTerm = $state(initialSearchTerm);
@@ -118,7 +117,12 @@
 
 <div class="node-catalog">
 	<TextInput placeholder="Search Nodes..." bind:value={searchTerm} bind:this={nodeSearchInput} />
-	<div class="list-results" use:passive={['wheel', () => stopPropagation(bubble('wheel'))]}>
+	<div class="list-results" onwheel={(event) => {
+			// onwheel events are passive by default
+			// https://svelte.dev/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode-Touch-and-wheel-events-are-passive
+			event.stopPropagation();
+			onwheel?.(event);
+		}}>
 		{#each nodeCategories as nodeCategory}
 			<details open={nodeCategory[1].open}>
 				<summary>
diff --git a/frontend/src/components/layout/LayoutCol.svelte b/frontend/src/components/layout/LayoutCol.svelte
index 6b37da195f..cf37b6a7ad 100644
--- a/frontend/src/components/layout/LayoutCol.svelte
+++ b/frontend/src/components/layout/LayoutCol.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
 	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { createBubbler } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 
 	type DivHTMLElementProps = SvelteHTMLElements["div"];
 	
@@ -54,26 +51,26 @@
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	title={tooltip}
 	bind:this={self}
-	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}
 >
 	{@render children?.()}
 </div>
 
 <!-- Unused (each impacts performance, see <https://github.com/GraphiteEditor/Graphite/issues/1877>):
+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')}
 on:contextmenu
 on:copy
 on:cut
diff --git a/frontend/src/components/layout/LayoutRow.svelte b/frontend/src/components/layout/LayoutRow.svelte
index a6a94e6a5f..29e59c879d 100644
--- a/frontend/src/components/layout/LayoutRow.svelte
+++ b/frontend/src/components/layout/LayoutRow.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
 	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { createBubbler } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 
 	type DivHTMLElementProps = SvelteHTMLElements["div"];
 
@@ -55,26 +52,26 @@
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	title={tooltip}
 	bind:this={self}
-	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}
 >
 	{@render children?.()}
 </div>
 
 <!-- Unused (each impacts performance, see <https://github.com/GraphiteEditor/Graphite/issues/1877>):
+ 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')}
 on:contextmenu
 on:copy
 on:cut
diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index 939ccc213c..7d393f01be 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { handlers } from 'svelte/legacy';
-
 	import { getContext, onMount, onDestroy, tick } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
diff --git a/frontend/src/components/widgets/WidgetSection.svelte b/frontend/src/components/widgets/WidgetSection.svelte
index 4c3d18ea84..fb98f1f538 100644
--- a/frontend/src/components/widgets/WidgetSection.svelte
+++ b/frontend/src/components/widgets/WidgetSection.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import WidgetSection from './WidgetSection.svelte';
-	import { stopPropagation } from 'svelte/legacy';
 
 	import { getContext } from "svelte";
 
@@ -37,7 +36,10 @@
 
 <!-- TODO: Implement collapsable sections with properties system -->
 <LayoutCol class={`widget-section ${className}`.trim()} {classes}>
-	<button class="header" class:expanded onclick={stopPropagation(() => (expanded = !expanded))} tabindex="0">
+	<button class="header" class:expanded onclick={(event) => {
+		event.stopPropagation();
+		expanded = !expanded;
+	}} tabindex="0">
 		<div class="expand-arrow"></div>
 		<TextLabel tooltip={widgetData.description} bold={true}>{widgetData.name}</TextLabel>
 		<IconButton
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index dc6f2b26f8..fd16f1b288 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-	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";
@@ -10,6 +7,7 @@
 
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
 	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
+	import type { MouseEventHandler } from 'svelte/elements';
 
 	const BUTTONS_LEFT = 0b0000_0001;
 	const BUTTONS_RIGHT = 0b0000_0010;
@@ -56,6 +54,7 @@
 		incrementCallbackDecrease?: (() => void) | undefined;
 		onvalue?: (value: number | undefined) => void;
 		onstartHistoryTransaction?: () => void;
+		oncontextmenu?: MouseEventHandler<HTMLInputElement>
 	}
 
 	let {
@@ -80,6 +79,7 @@
 		incrementCallbackDecrease = undefined,
 		onvalue,
 		onstartHistoryTransaction,
+		oncontextmenu,
 	}: Props = $props();
 
 	let self: FieldInput | undefined = $state();
@@ -708,13 +708,16 @@
 				class="slider"
 				class:hidden={rangeSliderClickDragState === "Deciding"}
 				{disabled}
-				min={rangeMin}
+				min={rangeMin}	
 				max={rangeMax}
 				step={sliderStepValue}
 				bind:value={rangeSliderValue}
 				oninput={onSliderInput}
 				onpointerup={onSliderPointerUp}
-				oncontextmenu={preventDefault(bubble('contextmenu'))}
+				oncontextmenu={(event) => {
+					event.preventDefault();
+					oncontextmenu?.(event);
+				}}
 				onwheel={(e) => /* Stops slider eating the scroll event in Firefox */ e.target instanceof HTMLInputElement && e.target.blur()}
 				bind:this={inputRangeElement}
 			/>

From 5f9cbb56d1157874187f9576036ed5e92a0c3eb5 Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Thu, 26 Jun 2025 23:27:02 +0530
Subject: [PATCH 06/16] fix: make widget class properties reactive

---
 .../floating-menus/ColorPicker.svelte         |   6 +-
 .../components/floating-menus/Dialog.svelte   |   8 +-
 .../components/floating-menus/MenuList.svelte |   2 +-
 .../floating-menus/NodeCatalog.svelte         |  12 +-
 .../src/components/layout/FloatingMenu.svelte |   2 +-
 .../src/components/panels/Document.svelte     |   2 +-
 frontend/src/components/panels/Layers.svelte  |  40 +++---
 .../src/components/panels/Properties.svelte   |   8 +-
 frontend/src/components/views/Graph.svelte    | 115 +++++++++---------
 .../components/widgets/WidgetLayout.svelte    |   2 +-
 .../components/widgets/WidgetSection.svelte   |   2 +-
 .../src/components/widgets/WidgetSpan.svelte  |   9 +-
 .../src/components/widgets/WidgetTable.svelte |   2 +-
 .../buttons/BreadcrumbTrailButtons.svelte     |   6 +-
 .../buttons/ParameterExposeButton.svelte      |   2 +-
 .../widgets/buttons/PopoverButton.svelte      |   2 +-
 .../widgets/buttons/TextButton.svelte         |  15 ++-
 .../widgets/inputs/ColorInput.svelte          |   4 +-
 .../widgets/inputs/CurveInput.svelte          |   2 +-
 .../widgets/inputs/DropdownInput.svelte       |   2 +-
 .../widgets/inputs/FontInput.svelte           |   2 +-
 .../widgets/inputs/NumberInput.svelte         |   2 +-
 .../widgets/inputs/RadioInput.svelte          |   2 +-
 .../widgets/inputs/ReferencePointInput.svelte |   2 +-
 .../widgets/inputs/SpectrumInput.svelte       |   2 +-
 .../widgets/inputs/WorkingColorsInput.svelte  |   2 +-
 .../widgets/labels/Separator.svelte           |   2 +-
 .../widgets/labels/UserInputLabel.svelte      |   2 +-
 .../window/status-bar/StatusBar.svelte        |   2 +-
 .../window/title-bar/TitleBar.svelte          |   4 +-
 .../window/title-bar/WindowButtonsWeb.svelte  |   2 +-
 .../components/window/workspace/Panel.svelte  |  10 +-
 .../window/workspace/Workspace.svelte         |   8 +-
 frontend/src/editor.ts                        |   2 +-
 frontend/src/io-managers/clipboard.ts         |   2 +-
 frontend/src/io-managers/hyperlinks.ts        |   2 +-
 frontend/src/io-managers/input.ts             |   2 +-
 frontend/src/io-managers/localization.ts      |   2 +-
 frontend/src/io-managers/panic.ts             |   2 +-
 frontend/src/io-managers/persistence.ts       |   2 +-
 .../src/{messages.ts => messages.svelte.ts}   |  95 +++++++++------
 frontend/src/state-providers/dialog.ts        |   2 +-
 frontend/src/state-providers/document.ts      |   2 +-
 frontend/src/state-providers/fonts.ts         |   2 +-
 frontend/src/state-providers/node-graph.ts    |   4 +-
 frontend/src/state-providers/portfolio.ts     |   2 +-
 frontend/src/subscription-router.ts           |   2 +-
 47 files changed, 217 insertions(+), 191 deletions(-)
 rename frontend/src/{messages.ts => messages.svelte.ts} (95%)

diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte
index 6f070b137c..345de1e5d2 100644
--- a/frontend/src/components/floating-menus/ColorPicker.svelte
+++ b/frontend/src/components/floating-menus/ColorPicker.svelte
@@ -2,9 +2,9 @@
 	import { onDestroy, getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import type { HSV, RGB, FillChoice } from "@graphite/messages";
-	import type { MenuDirection } from "@graphite/messages";
-	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages";
+	import type { HSV, RGB, FillChoice } from "@graphite/messages.svelte";
+	import type { MenuDirection } from "@graphite/messages.svelte";
+	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages.svelte";
 	import { clamp } from "@graphite/utility-functions/math";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
diff --git a/frontend/src/components/floating-menus/Dialog.svelte b/frontend/src/components/floating-menus/Dialog.svelte
index 4ba70719f7..9157922271 100644
--- a/frontend/src/components/floating-menus/Dialog.svelte
+++ b/frontend/src/components/floating-menus/Dialog.svelte
@@ -41,14 +41,14 @@
 				<div class="widget-layout details">
 					<div class="widget-span row"><TextLabel bold={true}>The editor crashed — sorry about that</TextLabel></div>
 					<div class="widget-span row"><TextLabel>Please report this by filing an issue on GitHub:</TextLabel></div>
-					<div class="widget-span row"><TextButton label="Report Bug" icon="Warning" flush={true} action={() => window.open(githubUrl($dialog.panicDetails), "_blank")} /></div>
+					<div class="widget-span row"><TextButton label="Report Bug" icon="Warning" flush={true} onclick={() => window.open(githubUrl($dialog.panicDetails), "_blank")} /></div>
 					<div class="widget-span row"><TextLabel multiline={true}>Reload the editor to continue. If this occurs<br />immediately on repeated reloads, clear storage:</TextLabel></div>
 					<div class="widget-span row">
 						<TextButton
 							label="Clear Saved Documents"
 							icon="Trash"
 							flush={true}
-							action={async () => {
+							onclick={async () => {
 								await wipeDocuments();
 								window.location.reload();
 							}}
@@ -68,8 +68,8 @@
 			<WidgetLayout layout={$dialog.buttons} class="details" />
 		{/if}
 		{#if $dialog.panicDetails}
-			<TextButton label="Copy Error Log" action={() => navigator.clipboard.writeText($dialog.panicDetails)} />
-			<TextButton label="Reload" emphasized={true} action={() => window.location.reload()} />
+			<TextButton label="Copy Error Log" onclick={() => navigator.clipboard.writeText($dialog.panicDetails)} />
+			<TextButton label="Reload" emphasized={true} onclick={() => window.location.reload()} />
 		{/if}
 	</LayoutRow>
 </FloatingMenu>
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index 7b8bac4025..b4afd45767 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { tick, onDestroy, onMount } from "svelte";
 
-	import type { MenuListEntry, MenuDirection } from "@graphite/messages";
+	import type { MenuListEntry, MenuDirection } from "@graphite/messages.svelte";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte
index 328a7b9245..7a9c1e5779 100644
--- a/frontend/src/components/floating-menus/NodeCatalog.svelte
+++ b/frontend/src/components/floating-menus/NodeCatalog.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
 
-	import type { FrontendNodeType } from "@graphite/messages";
+	import type { FrontendNodeType } from "@graphite/messages.svelte";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
@@ -112,7 +112,13 @@
 	onMount(() => {
 		setTimeout(() => nodeSearchInput?.focus(), 0);
 	});
-	let nodeCategories = $derived(buildNodeCategories($nodeGraph.nodeTypes, searchTerm));
+
+	let nodeCategories = $state<[string, NodeCategoryDetails][]>([]);
+
+	$effect(() => {
+		nodeCategories = buildNodeCategories($nodeGraph.nodeTypes, searchTerm);
+	})
+
 </script>
 
 <div class="node-catalog">
@@ -129,7 +135,7 @@
 					<TextLabel>{nodeCategory[0]}</TextLabel>
 				</summary>
 				{#each nodeCategory[1].nodes as nodeType}
-					<TextButton {disabled} label={nodeType.name} tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)} action={() => onselectNodeType?.(nodeType.name)} />
+					<TextButton {disabled} label={nodeType.name} tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)} onclick={() => onselectNodeType?.(nodeType.name)} />
 				{/each}
 			</details>
 		{:else}
diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte
index b4a9154265..fd152d80b2 100644
--- a/frontend/src/components/layout/FloatingMenu.svelte
+++ b/frontend/src/components/layout/FloatingMenu.svelte
@@ -21,7 +21,7 @@
 
 	import { onMount, tick } from "svelte";
 
-	import type { MenuDirection } from "@graphite/messages";
+	import type { MenuDirection } from "@graphite/messages.svelte";
 	import { browserVersion } from "@graphite/utility-functions/platform";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index 04fad762e3..1723c01958 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -15,7 +15,7 @@
 		UpdateEyedropperSamplingState,
 		UpdateMouseCursor,
 		isWidgetSpanRow,
-	} from "@graphite/messages";
+	} from "@graphite/messages.svelte";
 	import type { DocumentState } from "@graphite/state-providers/document";
 	import { textInputCleanup } from "@graphite/utility-functions/keyboard-entry";
 	import { extractPixelData, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index 7d393f01be..cae2e7821e 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -11,11 +11,12 @@
 		UpdateLayersPanelControlBarLeftLayout,
 		UpdateLayersPanelControlBarRightLayout,
 		UpdateLayersPanelBottomBarLayout,
-	} from "@graphite/messages";
-	import type { DataBuffer, LayerPanelEntry } from "@graphite/messages";
+	} from "@graphite/messages.svelte";
+	import type { DataBuffer, LayerPanelEntry } from "@graphite/messages.svelte";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 	import { platformIsMac } from "@graphite/utility-functions/platform";
 	import { extractPixelData } from "@graphite/utility-functions/rasterization";
+	import type { WidgetLayout as WidgetLayoutState } from "@graphite/messages.svelte";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -60,24 +61,21 @@
 	let layerToClipAltKeyPressed = $state(false);
 
 	// Layouts
-	let layersPanelControlBarLeftLayout = $state(defaultWidgetLayout());
-	let layersPanelControlBarRightLayout = $state(defaultWidgetLayout());
-	let layersPanelBottomBarLayout = $state(defaultWidgetLayout());
+	let layersPanelControlBarLeftLayout = $state<WidgetLayoutState>(defaultWidgetLayout());
+	let layersPanelControlBarRightLayout = $state<WidgetLayoutState>(defaultWidgetLayout());
+	let layersPanelBottomBarLayout = $state<WidgetLayoutState>(defaultWidgetLayout());
 
 	onMount(() => {
 		editor.subscriptions.subscribeJsMessage(UpdateLayersPanelControlBarLeftLayout, (updateLayersPanelControlBarLeftLayout) => {
 			patchWidgetLayout(layersPanelControlBarLeftLayout, updateLayersPanelControlBarLeftLayout);
-			layersPanelControlBarLeftLayout = layersPanelControlBarLeftLayout;
 		});
 
 		editor.subscriptions.subscribeJsMessage(UpdateLayersPanelControlBarRightLayout, (updateLayersPanelControlBarRightLayout) => {
 			patchWidgetLayout(layersPanelControlBarRightLayout, updateLayersPanelControlBarRightLayout);
-			layersPanelControlBarRightLayout = layersPanelControlBarRightLayout;
 		});
 
 		editor.subscriptions.subscribeJsMessage(UpdateLayersPanelBottomBarLayout, (updateLayersPanelBottomBarLayout) => {
 			patchWidgetLayout(layersPanelBottomBarLayout, updateLayersPanelBottomBarLayout);
-			layersPanelBottomBarLayout = layersPanelBottomBarLayout;
 		});
 
 		editor.subscriptions.subscribeJsMessage(UpdateDocumentLayerStructureJs, (updateDocumentLayerStructure) => {
@@ -182,7 +180,7 @@
 
 		draggable = false;
 		listing.editingName = true;
-		layers = layers;
+		// layers = layers;
 
 		await tick();
 
@@ -197,7 +195,7 @@
 
 		draggable = true;
 		listing.editingName = false;
-		layers = layers;
+		// layers = layers;
 
 		const name = (e.target instanceof HTMLInputElement && e.target.value) || "";
 		editor.handle.setLayerName(listing.entry.id, name);
@@ -207,7 +205,7 @@
 	async function onEditLayerNameDeselect(listing: LayerListingInfo) {
 		draggable = true;
 		listing.editingName = false;
-		layers = layers;
+		// layers = layers;
 
 		// Set it back to the original name if the user didn't enter a new name
 		if (document.activeElement instanceof HTMLInputElement) document.activeElement.value = listing.entry.alias;
@@ -472,7 +470,7 @@
 			});
 		};
 		recurse(updateDocumentLayerStructure);
-		layers = layers;
+		// layers = layers;
 	}
 
 	function updateLayerInTree(targetId: bigint, targetLayer: LayerPanelEntry) {
@@ -481,12 +479,12 @@
 		const layer = layers.find((layer: LayerListingInfo) => layer.entry.id === targetId);
 		if (layer) {
 			layer.entry = targetLayer;
-			layers = layers;
+			// layers = layers;
 		}
 	}
 </script>
 
-<LayoutCol class="layers" on:dragleave={() => (dragInPanel = false)}>
+<LayoutCol class="layers" ondragleave={() => (dragInPanel = false)}>
 	<LayoutRow class="control-bar" scrollableX={true}>
 		<WidgetLayout layout={layersPanelControlBarLeftLayout} />
 		<Separator />
@@ -498,10 +496,10 @@
 			styles={{ cursor: layerToClipUponClick && layerToClipAltKeyPressed && layerToClipUponClick.entry.clippable ? "alias" : "auto" }}
 			data-layer-panel
 			bind:this={list}
-			on:click={() => deselectAllLayers()}
-			on:dragover={updateInsertLine}
-			on:dragend={drop}
-			on:drop={drop}
+			onclick={() => deselectAllLayers()}
+			ondragover={updateInsertLine}
+			ondragend={drop}
+			ondrop={drop}
 		>
 			{#each layers as listing, index}
 				{@const selected = fakeHighlightOfNotYetSelectedLayerBeingDragged !== undefined ? fakeHighlightOfNotYetSelectedLayerBeingDragged === listing.entry.id : listing.entry.selected}
@@ -519,8 +517,8 @@
 					data-index={index}
 					tooltip={listing.entry.tooltip}
 					{draggable}
-					on:dragstart={(e) => draggable && dragStart(e, listing)}
-					on:click={(e) => selectLayerWithModifiers(e, listing)}
+					ondragstart={(e) => draggable && dragStart(e, listing)}
+					onclick={(e) => selectLayerWithModifiers(e, listing)}
 				>
 					{#if listing.entry.childrenAllowed}
 						<button
@@ -547,7 +545,7 @@
 					{#if listing.entry.name === "Artboard"}
 						<IconLabel icon="Artboard" class={"layer-type-icon"} />
 					{/if}
-					<LayoutRow class="layer-name" on:dblclick={() => onEditLayerName(listing)}>
+					<LayoutRow class="layer-name" ondblclick={() => onEditLayerName(listing)}>
 						<input
 							data-text-input
 							type="text"
diff --git a/frontend/src/components/panels/Properties.svelte b/frontend/src/components/panels/Properties.svelte
index 1f5ae52010..1123152e2b 100644
--- a/frontend/src/components/panels/Properties.svelte
+++ b/frontend/src/components/panels/Properties.svelte
@@ -2,19 +2,21 @@
 	import { getContext, onMount } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelSectionsLayout } from "@graphite/messages";
+	import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelSectionsLayout } from "@graphite/messages.svelte";
+	import type { WidgetLayout as WidgetLayoutState } from "@graphite/messages.svelte";
+
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
+
 	const editor = getContext<Editor>("editor");
 
-	let propertiesSectionsLayout = $state(defaultWidgetLayout());
+	let propertiesSectionsLayout = $state<WidgetLayoutState>(defaultWidgetLayout());
 
 	onMount(() => {
 		editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelSectionsLayout, (updatePropertyPanelSectionsLayout) => {
 			patchWidgetLayout(propertiesSectionsLayout, updatePropertyPanelSectionsLayout);
-			propertiesSectionsLayout = propertiesSectionsLayout;
 		});
 	});
 </script>
diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte
index c46905151f..a70ff910d2 100644
--- a/frontend/src/components/views/Graph.svelte
+++ b/frontend/src/components/views/Graph.svelte
@@ -4,8 +4,8 @@
 	import { fade } from "svelte/transition";
 
 	import type { Editor } from "@graphite/editor";
-	import type { Node } from "@graphite/messages";
-	import type { FrontendNode, FrontendGraphInput, FrontendGraphOutput } from "@graphite/messages";
+	import type { Node } from "@graphite/messages.svelte";
+	import type { FrontendNode, FrontendGraphInput, FrontendGraphOutput } from "@graphite/messages.svelte";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 	import type { IconName } from "@graphite/utility-functions/icons";
 
@@ -282,7 +282,7 @@
 				</LayoutRow>
 				<Separator type="Section" direction="Vertical" />
 				<LayoutRow class="merge-selected-nodes">
-					<TextButton label="Merge Selected Nodes" action={() => editor.handle.mergeSelectedNodes()} />
+					<TextButton label="Merge Selected Nodes" onclick={() => editor.handle.mergeSelectedNodes()} />
 				</LayoutRow>
 			{/if}
 		</LayoutCol>
@@ -334,61 +334,62 @@
 
 	<!-- Import and Export ports -->
 	<div class="imports-and-exports" style:transform-origin={`0 0`} style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
-		{#each $nodeGraph.imports as { outputMetadata, position }, index}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 8 8"
-				class="port"
-				data-port="output"
-				data-datatype={outputMetadata.dataType}
-				style:--data-color={`var(--color-data-${outputMetadata.dataType.toLowerCase()})`}
-				style:--data-color-dim={`var(--color-data-${outputMetadata.dataType.toLowerCase()}-dim)`}
-				style:--offset-left={position.x / 24}
-				style:--offset-top={position.y / 24}
-			>
-				<title>{`${dataTypeTooltip(outputMetadata)}\n\n${outputConnectedToText(outputMetadata)}`}</title>
-				{#if outputMetadata.connectedTo !== undefined}
-					<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
-				{:else}
-					<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
-				{/if}
-			</svg>
+ 		{#each $nodeGraph.imports as { outputMetadata, position }, index}
+ 			<svg
+ 				xmlns="http://www.w3.org/2000/svg"
+ 				viewBox="0 0 8 8"
+ 				class="port"
+ 				data-port="output"
+ 				data-datatype={outputMetadata.dataType}
+ 				style:--data-color={`var(--color-data-${outputMetadata.dataType.toLowerCase()})`}
+ 				style:--data-color-dim={`var(--color-data-${outputMetadata.dataType.toLowerCase()}-dim)`}
+ 				style:--offset-left={position.x / 24}
+ 				style:--offset-top={position.y / 24}
+ 			>
+ 				<title>{`${dataTypeTooltip(outputMetadata)}\n\n${outputConnectedToText(outputMetadata)}`}</title>
+ 				{#if outputMetadata.connectedTo !== undefined}
+ 					<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
+ 				{:else}
+ 					<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
+ 				{/if}
+ 			</svg>
+ 
+ 			<div
+ 				class="edit-import-export import"
+ 				onpointerenter={() => (hoveringImportIndex = index)}
+ 				onpointerleave={() => (hoveringImportIndex = undefined)}
+ 				style:--offset-left={position.x / 24}
+ 				style:--offset-top={position.y / 24}
+ 			>
+ 				{#if editingNameImportIndex == index}
+ 					<input
+ 						class="import-text-input"
+ 						type="text"
+ 						style:width={importsToEdgeTextInputWidth()}
+ 						bind:this={inputElement}
+ 						bind:value={editingNameText}
+ 						onblur={setEditingImportName}
+ 						onkeydown={(e) => e.key === "Enter" && setEditingImportName(e)}
+ 					/>
+ 				{:else}
+ 					<p class="import-text" ondblclick={() => setEditingImportNameIndex(index, outputMetadata.name)}>{outputMetadata.name}</p>
+ 				{/if}
+ 				{#if hoveringImportIndex === index || editingNameImportIndex === index}
+ 					<IconButton
+ 						size={16}
+ 						icon={"Remove"}
+ 						class="remove-button-import"
+ 						data-index={index}
+ 						data-import-text-edge
+ 						onclick={() => {
+ 							/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
+ 						}}
+ 					/>
+ 					<div class="reorder-drag-grip" title="Reorder this import"></div>
+ 				{/if}
+ 			</div>
+ 		{/each}
 
-			<div
-				class="edit-import-export import"
-				onpointerenter={() => (hoveringImportIndex = index)}
-				onpointerleave={() => (hoveringImportIndex = undefined)}
-				style:--offset-left={position.x / 24}
-				style:--offset-top={position.y / 24}
-			>
-				{#if editingNameImportIndex == index}
-					<input
-						class="import-text-input"
-						type="text"
-						style:width={importsToEdgeTextInputWidth()}
-						bind:this={inputElement}
-						bind:value={editingNameText}
-						onblur={setEditingImportName}
-						onkeydown={(e) => e.key === "Enter" && setEditingImportName(e)}
-					/>
-				{:else}
-					<p class="import-text" ondblclick={() => setEditingImportNameIndex(index, outputMetadata.name)}>{outputMetadata.name}</p>
-				{/if}
-				{#if hoveringImportIndex === index || editingNameImportIndex === index}
-					<IconButton
-						size={16}
-						icon={"Remove"}
-						class="remove-button-import"
-						data-index={index}
-						data-import-text-edge
-						onclick={() => {
-							/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
-						}}
-					/>
-					<div class="reorder-drag-grip" title="Reorder this import"></div>
-				{/if}
-			</div>
-		{/each}
 		{#if $nodeGraph.reorderImportIndex !== undefined}
 			{@const position = {
 				x: Number($nodeGraph.imports[0].position.x),
diff --git a/frontend/src/components/widgets/WidgetLayout.svelte b/frontend/src/components/widgets/WidgetLayout.svelte
index 826a53893d..f751aa9e47 100644
--- a/frontend/src/components/widgets/WidgetLayout.svelte
+++ b/frontend/src/components/widgets/WidgetLayout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { isWidgetSpanColumn, isWidgetSpanRow, isWidgetSection, type WidgetLayout, isWidgetTable } from "@graphite/messages";
+	import { isWidgetSpanColumn, isWidgetSpanRow, isWidgetSection, type WidgetLayout, isWidgetTable } from "@graphite/messages.svelte";
 
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import WidgetSection from "@graphite/components/widgets/WidgetSection.svelte";
diff --git a/frontend/src/components/widgets/WidgetSection.svelte b/frontend/src/components/widgets/WidgetSection.svelte
index fb98f1f538..1cb5a9fa62 100644
--- a/frontend/src/components/widgets/WidgetSection.svelte
+++ b/frontend/src/components/widgets/WidgetSection.svelte
@@ -4,7 +4,7 @@
 	import { getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { isWidgetSpanRow, isWidgetSpanColumn, isWidgetSection, type WidgetSection as WidgetSectionFromJsMessages } from "@graphite/messages";
+	import { isWidgetSpanRow, isWidgetSpanColumn, isWidgetSection, type WidgetSection as WidgetSectionFromJsMessages } from "@graphite/messages.svelte";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index 26bc10e931..1560546e5c 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -2,8 +2,8 @@
 	import { getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import type { Widget, WidgetSpanColumn, WidgetSpanRow } from "@graphite/messages";
-	import { narrowWidgetProps, isWidgetSpanColumn, isWidgetSpanRow } from "@graphite/messages";
+	import type { Widget, WidgetSpanColumn, WidgetSpanRow } from "@graphite/messages.svelte";
+	import { narrowWidgetProps, isWidgetSpanColumn, isWidgetSpanRow } from "@graphite/messages.svelte";
 	import { debouncer } from "@graphite/utility-functions/debounce";
 
 	import NodeCatalog from "@graphite/components/floating-menus/NodeCatalog.svelte";
@@ -80,6 +80,7 @@
 	let extraClasses = $derived(Object.entries(classes)
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
 		.join(" "));
+
 	let direction = $derived(watchDirection(widgetData));
 	let widgets = $derived(watchWidgets(widgetData));
 </script>
@@ -175,11 +176,11 @@
 		{/if}
 		{@const textButton = narrowWidgetProps(component.props, "TextButton")}
 		{#if textButton}
-			<TextButton {...exclude(textButton)} action={() => widgetValueCommitAndUpdate(index, undefined)} />
+			<TextButton {...exclude(textButton)} onclick={() => widgetValueCommitAndUpdate(index, undefined)} />
 		{/if}
 		{@const breadcrumbTrailButtons = narrowWidgetProps(component.props, "BreadcrumbTrailButtons")}
 		{#if breadcrumbTrailButtons}
-			<BreadcrumbTrailButtons {...exclude(breadcrumbTrailButtons)} action={(breadcrumbIndex) => widgetValueCommitAndUpdate(index, breadcrumbIndex)} />
+			<BreadcrumbTrailButtons {...exclude(breadcrumbTrailButtons)} onclick={(breadcrumbIndex) => widgetValueCommitAndUpdate(index, breadcrumbIndex)} />
 		{/if}
 		{@const textInput = narrowWidgetProps(component.props, "TextInput")}
 		{#if textInput}
diff --git a/frontend/src/components/widgets/WidgetTable.svelte b/frontend/src/components/widgets/WidgetTable.svelte
index e0c3954fb2..c74c5a98a3 100644
--- a/frontend/src/components/widgets/WidgetTable.svelte
+++ b/frontend/src/components/widgets/WidgetTable.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type WidgetTable as WidgetTableFromJsMessages } from "@graphite/messages";
+	import { type WidgetTable as WidgetTableFromJsMessages } from "@graphite/messages.svelte";
 
 	import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
 
diff --git a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
index ac519f7838..da3be40f25 100644
--- a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
+++ b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
@@ -7,20 +7,20 @@
 		disabled?: boolean;
 		tooltip?: string | undefined;
 		// Callbacks
-		action: (index: number) => void;
+		onclick: (index: number) => void;
 	}
 
 	let {
 		labels,
 		disabled = false,
 		tooltip = undefined,
-		action
+		onclick
 	}: Props = $props();
 </script>
 
 <LayoutRow class="breadcrumb-trail-buttons" {tooltip}>
 	{#each labels as label, index}
-		<TextButton {label} emphasized={index === labels.length - 1} {disabled} action={() => !disabled && index !== labels.length - 1 && action(index)} />
+		<TextButton {label} emphasized={index === labels.length - 1} {disabled} onclick={() => !disabled && index !== labels.length - 1 && onclick(index)} />
 	{/each}
 </LayoutRow>
 
diff --git a/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte b/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
index d1dbf7ac17..fc99516271 100644
--- a/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
+++ b/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { FrontendGraphDataType } from "@graphite/messages";
+	import type { FrontendGraphDataType } from "@graphite/messages.svelte";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
diff --git a/frontend/src/components/widgets/buttons/PopoverButton.svelte b/frontend/src/components/widgets/buttons/PopoverButton.svelte
index 2a139d9121..911dfc6164 100644
--- a/frontend/src/components/widgets/buttons/PopoverButton.svelte
+++ b/frontend/src/components/widgets/buttons/PopoverButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { MenuDirection } from "@graphite/messages";
+	import type { MenuDirection } from "@graphite/messages.svelte";
 	import { type IconName, type PopoverButtonStyle } from "@graphite/utility-functions/icons";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
index 50f54be289..7ac816b262 100644
--- a/frontend/src/components/widgets/buttons/TextButton.svelte
+++ b/frontend/src/components/widgets/buttons/TextButton.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-	import type { MenuListEntry } from "@graphite/messages";
+	import type { MenuListEntry } from "@graphite/messages.svelte";
 	import type { IconName } from "@graphite/utility-functions/icons";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import ConditionalWrapper from "@graphite/components/layout/ConditionalWrapper.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import type { MouseEventHandler } from "svelte/elements";
 
 	let self: MenuList | undefined = $state();
 	let open: boolean = $state(false);
@@ -21,8 +22,7 @@
 		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;
+		onclick: MouseEventHandler<HTMLButtonElement>;
 	}
 
 	let {
@@ -35,17 +35,17 @@
 		disabled = false,
 		tooltip = undefined,
 		menuListChildren = $bindable([]),
-		action
+		onclick,
 	}: Props = $props();
 
 	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) {
+	function onClick(e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement; }) {
 		// If there's no menu to open, trigger the action
 		if ((menuListChildren?.length ?? 0) === 0) {
 			// Call the action
-			if (action && !disabled) action();
+			if (!disabled) onclick?.(e);
 
 			// Exit early so we don't continue on and try to open the menu
 			return;
@@ -121,6 +121,7 @@
 		color: var(--button-text-color);
 		--button-background-color: var(--color-5-dullgray);
 		--button-text-color: var(--color-e-nearwhite);
+		cursor: pointer;
 
 		&:hover,
 		&.open {
@@ -141,6 +142,8 @@
 		&.disabled {
 			--button-background-color: var(--color-4-dimgray);
 			--button-text-color: var(--color-8-uppergray);
+			cursor: not-allowed;
+			pointer-events: all;
 		}
 
 		&.emphasized {
diff --git a/frontend/src/components/widgets/inputs/ColorInput.svelte b/frontend/src/components/widgets/inputs/ColorInput.svelte
index f0de9c5207..9bb7b0d09a 100644
--- a/frontend/src/components/widgets/inputs/ColorInput.svelte
+++ b/frontend/src/components/widgets/inputs/ColorInput.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { FillChoice } from "@graphite/messages";
-	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages";
+	import type { FillChoice } from "@graphite/messages.svelte";
+	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages.svelte";
 
 	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
diff --git a/frontend/src/components/widgets/inputs/CurveInput.svelte b/frontend/src/components/widgets/inputs/CurveInput.svelte
index 40144e9027..265c454dde 100644
--- a/frontend/src/components/widgets/inputs/CurveInput.svelte
+++ b/frontend/src/components/widgets/inputs/CurveInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Curve, CurveManipulatorGroup } from "@graphite/messages";
+	import type { Curve, CurveManipulatorGroup } from "@graphite/messages.svelte";
 	import { clamp } from "@graphite/utility-functions/math";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index f831c3093c..25d4007b47 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { MenuListEntry } from "@graphite/messages";
+	import type { MenuListEntry } from "@graphite/messages.svelte";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
diff --git a/frontend/src/components/widgets/inputs/FontInput.svelte b/frontend/src/components/widgets/inputs/FontInput.svelte
index 9bafaa2934..11d18a4d38 100644
--- a/frontend/src/components/widgets/inputs/FontInput.svelte
+++ b/frontend/src/components/widgets/inputs/FontInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext, onMount, tick } from "svelte";
 
-	import type { MenuListEntry } from "@graphite/messages";
+	import type { MenuListEntry } from "@graphite/messages.svelte";
 	import type { FontsState } from "@graphite/state-providers/fonts";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index fd16f1b288..9a8093d01c 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -2,7 +2,7 @@
 	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";
+	import { type NumberInputMode, type NumberInputIncrementBehavior } from "@graphite/messages.svelte";
 	import { evaluateMathExpression } from "@graphite-frontend/wasm/pkg/graphite_wasm.js";
 
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
diff --git a/frontend/src/components/widgets/inputs/RadioInput.svelte b/frontend/src/components/widgets/inputs/RadioInput.svelte
index 0a6f3bfa90..ad731a8ef3 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.svelte
+++ b/frontend/src/components/widgets/inputs/RadioInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type RadioEntries, type RadioEntryData } from "@graphite/messages";
+	import { type RadioEntries, type RadioEntryData } from "@graphite/messages.svelte";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
diff --git a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
index 02d681dd9c..69b7a9fc2e 100644
--- a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
+++ b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ReferencePoint } from "@graphite/messages";
+	import type { ReferencePoint } from "@graphite/messages.svelte";
 
 	interface Props {
 		value: string;
diff --git a/frontend/src/components/widgets/inputs/SpectrumInput.svelte b/frontend/src/components/widgets/inputs/SpectrumInput.svelte
index a09ba561a8..925a77bd8d 100644
--- a/frontend/src/components/widgets/inputs/SpectrumInput.svelte
+++ b/frontend/src/components/widgets/inputs/SpectrumInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 
-	import { Color, type Gradient } from "@graphite/messages";
+	import { Color, type Gradient } from "@graphite/messages.svelte";
 
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
diff --git a/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte b/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
index 5f6add784b..2c2bca08ce 100644
--- a/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
+++ b/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { Color } from "@graphite/messages";
+	import { Color } from "@graphite/messages.svelte";
 
 	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
diff --git a/frontend/src/components/widgets/labels/Separator.svelte b/frontend/src/components/widgets/labels/Separator.svelte
index f7ff012579..0134eea22c 100644
--- a/frontend/src/components/widgets/labels/Separator.svelte
+++ b/frontend/src/components/widgets/labels/Separator.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type SeparatorDirection, type SeparatorType } from "@graphite/messages";
+	import { type SeparatorDirection, type SeparatorType } from "@graphite/messages.svelte";
 
 	interface Props {
 		direction?: SeparatorDirection;
diff --git a/frontend/src/components/widgets/labels/UserInputLabel.svelte b/frontend/src/components/widgets/labels/UserInputLabel.svelte
index d203a33827..0c739994e0 100644
--- a/frontend/src/components/widgets/labels/UserInputLabel.svelte
+++ b/frontend/src/components/widgets/labels/UserInputLabel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext } from "svelte";
 
-	import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@graphite/messages";
+	import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@graphite/messages.svelte";
 	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
 	import type { IconName } from "@graphite/utility-functions/icons";
 	import { platformIsMac } from "@graphite/utility-functions/platform";
diff --git a/frontend/src/components/window/status-bar/StatusBar.svelte b/frontend/src/components/window/status-bar/StatusBar.svelte
index bf8be523ca..88155567ac 100644
--- a/frontend/src/components/window/status-bar/StatusBar.svelte
+++ b/frontend/src/components/window/status-bar/StatusBar.svelte
@@ -2,7 +2,7 @@
 	import { getContext, onMount } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@graphite/messages";
+	import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@graphite/messages.svelte";
 	import { platformIsMac } from "@graphite/utility-functions/platform";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
diff --git a/frontend/src/components/window/title-bar/TitleBar.svelte b/frontend/src/components/window/title-bar/TitleBar.svelte
index bef0d03b2a..24f9864411 100644
--- a/frontend/src/components/window/title-bar/TitleBar.svelte
+++ b/frontend/src/components/window/title-bar/TitleBar.svelte
@@ -2,7 +2,7 @@
 	import { getContext, onMount } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/messages";
+	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/messages.svelte";
 	import type { PortfolioState } from "@graphite/state-providers/portfolio";
 	import { platformIsMac } from "@graphite/utility-functions/platform";
 
@@ -76,7 +76,7 @@
 			<WindowButtonsMac {maximized} />
 		{:else}
 			{#each entries as entry}
-				<TextButton label={entry.label} icon={entry.icon} menuListChildren={entry.children} action={entry.action} flush={true} />
+				<TextButton label={entry.label} icon={entry.icon} menuListChildren={entry.children} onclick={entry.action!} flush={true} />
 			{/each}
 		{/if}
 	</LayoutRow>
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte b/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
index 8b9db9c9f7..3917b98494 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
+++ b/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
@@ -17,7 +17,7 @@
 	}
 </script>
 
-<LayoutRow class="window-buttons-web" on:click={() => handleClick()} tooltip={($fullscreen.windowFullscreen ? "Exit" : "Enter") + " Fullscreen (F11)"}>
+<LayoutRow class="window-buttons-web" onclick={() => handleClick()} tooltip={($fullscreen.windowFullscreen ? "Exit" : "Enter") + " Fullscreen (F11)"}>
 	{#if requestFullscreenHotkeys}
 		<TextLabel italic={true}>Go fullscreen to access all hotkeys</TextLabel>
 	{/if}
diff --git a/frontend/src/components/window/workspace/Panel.svelte b/frontend/src/components/window/workspace/Panel.svelte
index d95813a323..683f4dd06b 100644
--- a/frontend/src/components/window/workspace/Panel.svelte
+++ b/frontend/src/components/window/workspace/Panel.svelte
@@ -17,7 +17,7 @@
 	import { getContext, tick } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { type LayoutKeysGroup, type Key } from "@graphite/messages";
+	import { type LayoutKeysGroup, type Key } from "@graphite/messages.svelte";
 	import { platformIsMac, isEventSupported } from "@graphite/utility-functions/platform";
 
 	import { extractPixelData } from "@graphite/utility-functions/rasterization";
@@ -167,7 +167,7 @@
 							<tbody>
 								<tr>
 									<td>
-										<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
+										<TextButton label="New Document" icon="File" flush={true} onclick={() => editor.handle.newDocumentDialog()} />
 									</td>
 									<td>
 										<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
@@ -175,7 +175,7 @@
 								</tr>
 								<tr>
 									<td>
-										<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
+										<TextButton label="Open Document" icon="Folder" flush={true} onclick={() => editor.handle.openDocument()} />
 									</td>
 									<td>
 										<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
@@ -183,12 +183,12 @@
 								</tr>
 								<tr>
 									<td colspan="2">
-										<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
+										<TextButton label="Open Demo Artwork" icon="Image" flush={true} onclick={() => 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/")} />
+										<TextButton label="Support the Development Fund" icon="Heart" flush={true} onclick={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
 									</td>
 								</tr>
 							</tbody>
diff --git a/frontend/src/components/window/workspace/Workspace.svelte b/frontend/src/components/window/workspace/Workspace.svelte
index 0ae7c26710..2844814029 100644
--- a/frontend/src/components/window/workspace/Workspace.svelte
+++ b/frontend/src/components/window/workspace/Workspace.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import type { FrontendDocumentDetails } from "@graphite/messages";
+	import type { FrontendDocumentDetails } from "@graphite/messages.svelte";
 	import type { DialogState } from "@graphite/state-providers/dialog";
 	import type { PortfolioState } from "@graphite/state-providers/portfolio";
 
@@ -150,18 +150,18 @@
 				/>
 			</LayoutRow>
 			{#if $portfolio.spreadsheetOpen}
-				<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} />
+				<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical onpointerdown={(e) => resizePanel(e)} />
 				<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["spreadsheet"] }} data-subdivision-name="spreadsheet">
 					<Panel panelType="Spreadsheet" tabLabels={[{ name: "Spreadsheet" }]} tabActiveIndex={0} />
 				</LayoutRow>
 			{/if}
 		</LayoutCol>
-		<LayoutCol class="workspace-grid-resize-gutter" data-gutter-horizontal on:pointerdown={(e) => resizePanel(e)} />
+		<LayoutCol class="workspace-grid-resize-gutter" data-gutter-horizontal onpointerdown={(e) => resizePanel(e)} />
 		<LayoutCol class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["details"] }} data-subdivision-name="details">
 			<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["properties"] }} data-subdivision-name="properties">
 				<Panel panelType="Properties" tabLabels={[{ name: "Properties" }]} tabActiveIndex={0} />
 			</LayoutRow>
-			<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} />
+			<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical onpointerdown={(e) => resizePanel(e)} />
 			<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["layers"] }} data-subdivision-name="layers">
 				<Panel panelType="Layers" tabLabels={[{ name: "Layers" }]} tabActiveIndex={0} />
 			</LayoutRow>
diff --git a/frontend/src/editor.ts b/frontend/src/editor.ts
index 7dd6a98951..dd149fb066 100644
--- a/frontend/src/editor.ts
+++ b/frontend/src/editor.ts
@@ -1,5 +1,5 @@
 // import { panicProxy } from "@graphite/utility-functions/panic-proxy";
-import { type JsMessageType } from "@graphite/messages";
+import { type JsMessageType } from "@graphite/messages.svelte";
 import { createSubscriptionRouter, type SubscriptionRouter } from "@graphite/subscription-router";
 import init, { setRandomSeed, wasmMemory, EditorHandle } from "@graphite-frontend/wasm/pkg/graphite_wasm.js";
 
diff --git a/frontend/src/io-managers/clipboard.ts b/frontend/src/io-managers/clipboard.ts
index 8fa457398a..ae71c293a7 100644
--- a/frontend/src/io-managers/clipboard.ts
+++ b/frontend/src/io-managers/clipboard.ts
@@ -1,5 +1,5 @@
 import { type Editor } from "@graphite/editor";
-import { TriggerTextCopy } from "@graphite/messages";
+import { TriggerTextCopy } from "@graphite/messages.svelte";
 
 export function createClipboardManager(editor: Editor) {
 	// Subscribe to process backend event
diff --git a/frontend/src/io-managers/hyperlinks.ts b/frontend/src/io-managers/hyperlinks.ts
index cb22fd9e34..78727064f0 100644
--- a/frontend/src/io-managers/hyperlinks.ts
+++ b/frontend/src/io-managers/hyperlinks.ts
@@ -1,5 +1,5 @@
 import { type Editor } from "@graphite/editor";
-import { TriggerVisitLink } from "@graphite/messages";
+import { TriggerVisitLink } from "@graphite/messages.svelte";
 
 export function createHyperlinkManager(editor: Editor) {
 	// Subscribe to process backend event
diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index aee4091c8b..b5b7682aed 100644
--- a/frontend/src/io-managers/input.ts
+++ b/frontend/src/io-managers/input.ts
@@ -1,7 +1,7 @@
 import { get } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
-import { TriggerPaste } from "@graphite/messages";
+import { TriggerPaste } from "@graphite/messages.svelte";
 import { type DialogState } from "@graphite/state-providers/dialog";
 import { type DocumentState } from "@graphite/state-providers/document";
 import { type FullscreenState } from "@graphite/state-providers/fullscreen";
diff --git a/frontend/src/io-managers/localization.ts b/frontend/src/io-managers/localization.ts
index a9ab62556c..6536e3ce6a 100644
--- a/frontend/src/io-managers/localization.ts
+++ b/frontend/src/io-managers/localization.ts
@@ -1,5 +1,5 @@
 import { type Editor } from "@graphite/editor";
-import { TriggerAboutGraphiteLocalizedCommitDate } from "@graphite/messages";
+import { TriggerAboutGraphiteLocalizedCommitDate } from "@graphite/messages.svelte";
 
 export function createLocalizationManager(editor: Editor) {
 	// Subscribe to process backend event
diff --git a/frontend/src/io-managers/panic.ts b/frontend/src/io-managers/panic.ts
index da05842bbe..1ea73843cb 100644
--- a/frontend/src/io-managers/panic.ts
+++ b/frontend/src/io-managers/panic.ts
@@ -1,5 +1,5 @@
 import { type Editor } from "@graphite/editor";
-import { DisplayDialogPanic } from "@graphite/messages";
+import { DisplayDialogPanic } from "@graphite/messages.svelte";
 import { type DialogState } from "@graphite/state-providers/dialog";
 import { browserVersion, operatingSystem } from "@graphite/utility-functions/platform";
 import { stripIndents } from "@graphite/utility-functions/strip-indents";
diff --git a/frontend/src/io-managers/persistence.ts b/frontend/src/io-managers/persistence.ts
index 2cdb382933..f2b4c8d0a4 100644
--- a/frontend/src/io-managers/persistence.ts
+++ b/frontend/src/io-managers/persistence.ts
@@ -10,7 +10,7 @@ import {
 	TriggerLoadFirstAutoSaveDocument,
 	TriggerLoadRestAutoSaveDocuments,
 	TriggerSaveActiveDocument,
-} from "@graphite/messages";
+} from "@graphite/messages.svelte";
 import { type PortfolioState } from "@graphite/state-providers/portfolio";
 
 const graphiteStore = createStore("graphite", "store");
diff --git a/frontend/src/messages.ts b/frontend/src/messages.svelte.ts
similarity index 95%
rename from frontend/src/messages.ts
rename to frontend/src/messages.svelte.ts
index 28b777f806..1738bbfbcb 100644
--- a/frontend/src/messages.ts
+++ b/frontend/src/messages.svelte.ts
@@ -109,7 +109,7 @@ export class UpdateNodeGraphWires extends JsMessage {
 	readonly wires!: WireUpdate[];
 }
 
-export class ClearAllNodeGraphWires extends JsMessage {}
+export class ClearAllNodeGraphWires extends JsMessage { }
 
 export class UpdateNodeGraphTransform extends JsMessage {
 	readonly transform!: NodeGraphTransform;
@@ -759,10 +759,10 @@ export class UpdateMouseCursor extends JsMessage {
 	readonly cursor!: MouseCursorIcon;
 }
 
-export class TriggerLoadFirstAutoSaveDocument extends JsMessage {}
-export class TriggerLoadRestAutoSaveDocuments extends JsMessage {}
+export class TriggerLoadFirstAutoSaveDocument extends JsMessage { }
+export class TriggerLoadRestAutoSaveDocuments extends JsMessage { }
 
-export class TriggerLoadPreferences extends JsMessage {}
+export class TriggerLoadPreferences extends JsMessage { }
 
 export class TriggerFetchAndOpenDocument extends JsMessage {
 	readonly name!: string;
@@ -770,13 +770,13 @@ export class TriggerFetchAndOpenDocument extends JsMessage {
 	readonly filename!: string;
 }
 
-export class TriggerOpenDocument extends JsMessage {}
+export class TriggerOpenDocument extends JsMessage { }
 
-export class TriggerImport extends JsMessage {}
+export class TriggerImport extends JsMessage { }
 
-export class TriggerPaste extends JsMessage {}
+export class TriggerPaste extends JsMessage { }
 
-export class TriggerDelayedZoomCanvasToFitAll extends JsMessage {}
+export class TriggerDelayedZoomCanvasToFitAll extends JsMessage { }
 
 export class TriggerDownloadImage extends JsMessage {
 	readonly svg!: string;
@@ -803,7 +803,7 @@ export class TriggerSaveActiveDocument extends JsMessage {
 	readonly documentId!: bigint;
 }
 
-export class DocumentChanged extends JsMessage {}
+export class DocumentChanged extends JsMessage { }
 
 export type DataBuffer = {
 	pointer: bigint;
@@ -837,7 +837,7 @@ export class DisplayEditableTextboxTransform extends JsMessage {
 	readonly transform!: number[];
 }
 
-export class DisplayRemoveEditableTextbox extends JsMessage {}
+export class DisplayRemoveEditableTextbox extends JsMessage { }
 
 export class UpdateDocumentLayerDetails extends JsMessage {
 	@Type(() => LayerPanelEntry)
@@ -886,7 +886,7 @@ export class LayerPanelEntry {
 	clippable!: boolean;
 }
 
-export class DisplayDialogDismiss extends JsMessage {}
+export class DisplayDialogDismiss extends JsMessage { }
 
 export class Font {
 	fontFamily!: string;
@@ -903,7 +903,7 @@ export class TriggerVisitLink extends JsMessage {
 	url!: string;
 }
 
-export class TriggerTextCommit extends JsMessage {}
+export class TriggerTextCommit extends JsMessage { }
 
 export class TriggerTextCopy extends JsMessage {
 	readonly copyText!: string;
@@ -1383,8 +1383,8 @@ export function narrowWidgetProps<K extends WidgetPropsNames>(props: WidgetProps
 
 export class Widget {
 	constructor(props: WidgetPropsSet, widgetId: bigint) {
-		this.props = props;
-		this.widgetId = widgetId;
+		this.props = $state(props);
+		this.widgetId = $state(widgetId);
 	}
 
 	@Type(() => WidgetProps, { discriminator: { property: "kind", subTypes: [...widgetSubTypes] }, keepDiscriminatorProperty: true })
@@ -1445,7 +1445,7 @@ export function patchWidgetLayout(layout: /* &mut */ WidgetLayout, updates: Widg
 
 	updates.diff.forEach((update) => {
 		// Find the object where the diff applies to
-		const diffObject = update.widgetPath.reduce((targetLayout, index) => {
+		let diffObject = update.widgetPath.reduce((targetLayout, index) => {
 			if ("columnWidgets" in targetLayout) return targetLayout.columnWidgets[index];
 			if ("rowWidgets" in targetLayout) return targetLayout.rowWidgets[index];
 			if ("tableWidgets" in targetLayout) return targetLayout.tableWidgets[index];
@@ -1464,18 +1464,33 @@ export function patchWidgetLayout(layout: /* &mut */ WidgetLayout, updates: Widg
 			return targetLayout[index];
 		}, layout.layout as UIItem);
 
-		// If this is a list with a length, then set the length to 0 to clear the list
-		if ("length" in diffObject) {
-			diffObject.length = 0;
+		if (diffObject instanceof Widget) {
+			// For Widget instances, use direct property assignment
+			// The setters will handle the reactivity
+			diffObject.props = (update.newValue as Widget).props;
+			diffObject.widgetId = (update.newValue as Widget).widgetId;
+		} else {
+			// Clear array length using Reflect to trigger reactivity
+			if (Reflect.has(diffObject, "length")) {
+				Reflect.set(diffObject, "length", 0);
+			}
+
+			// Clear existing properties
+			// Remove all keys using Reflect.deleteProperty to ensure proxy notifications
+			Reflect.ownKeys(diffObject).forEach((key) => {
+				if (key !== "length") {
+					// Don't delete length property on arrays
+					Reflect.deleteProperty(diffObject, key);
+				}
+			});
+
+			// Assign new properties
+			if (update.newValue && typeof update.newValue === "object") {
+				Object.entries(update.newValue).forEach(([key, value]) => {
+					Reflect.set(diffObject, key, value);
+				});
+			}
 		}
-		// Remove all of the keys from the old object
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		Object.keys(diffObject).forEach((key) => delete (diffObject as any)[key]);
-
-		// Assign keys to the new object
-		// `Object.assign` works but `diffObject = update.newValue;` doesn't.
-		// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
-		Object.assign(diffObject, update.newValue);
 	});
 }
 
@@ -1558,21 +1573,21 @@ function createLayoutGroup(layoutGroup: any): LayoutGroup {
 }
 
 // WIDGET LAYOUTS
-export class UpdateDialogButtons extends WidgetDiffUpdate {}
+export class UpdateDialogButtons extends WidgetDiffUpdate { }
 
-export class UpdateDialogColumn1 extends WidgetDiffUpdate {}
+export class UpdateDialogColumn1 extends WidgetDiffUpdate { }
 
-export class UpdateDialogColumn2 extends WidgetDiffUpdate {}
+export class UpdateDialogColumn2 extends WidgetDiffUpdate { }
 
-export class UpdateDocumentBarLayout extends WidgetDiffUpdate {}
+export class UpdateDocumentBarLayout extends WidgetDiffUpdate { }
 
-export class UpdateDocumentModeLayout extends WidgetDiffUpdate {}
+export class UpdateDocumentModeLayout extends WidgetDiffUpdate { }
 
-export class UpdateLayersPanelControlBarLeftLayout extends WidgetDiffUpdate {}
+export class UpdateLayersPanelControlBarLeftLayout extends WidgetDiffUpdate { }
 
-export class UpdateLayersPanelControlBarRightLayout extends WidgetDiffUpdate {}
+export class UpdateLayersPanelControlBarRightLayout extends WidgetDiffUpdate { }
 
-export class UpdateLayersPanelBottomBarLayout extends WidgetDiffUpdate {}
+export class UpdateLayersPanelBottomBarLayout extends WidgetDiffUpdate { }
 
 // Extends JsMessage instead of WidgetDiffUpdate because the menu bar isn't diffed
 export class UpdateMenuBarLayout extends JsMessage {
@@ -1584,17 +1599,17 @@ export class UpdateMenuBarLayout extends JsMessage {
 	layout!: MenuBarEntry[];
 }
 
-export class UpdateNodeGraphControlBarLayout extends WidgetDiffUpdate {}
+export class UpdateNodeGraphControlBarLayout extends WidgetDiffUpdate { }
 
-export class UpdatePropertyPanelSectionsLayout extends WidgetDiffUpdate {}
+export class UpdatePropertyPanelSectionsLayout extends WidgetDiffUpdate { }
 
-export class UpdateSpreadsheetLayout extends WidgetDiffUpdate {}
+export class UpdateSpreadsheetLayout extends WidgetDiffUpdate { }
 
-export class UpdateToolOptionsLayout extends WidgetDiffUpdate {}
+export class UpdateToolOptionsLayout extends WidgetDiffUpdate { }
 
-export class UpdateToolShelfLayout extends WidgetDiffUpdate {}
+export class UpdateToolShelfLayout extends WidgetDiffUpdate { }
 
-export class UpdateWorkingColorsLayout extends WidgetDiffUpdate {}
+export class UpdateWorkingColorsLayout extends WidgetDiffUpdate { }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function createMenuLayout(menuBarEntry: any[]): MenuBarEntry[] {
diff --git a/frontend/src/state-providers/dialog.ts b/frontend/src/state-providers/dialog.ts
index 1e2da232a3..91095e7b96 100644
--- a/frontend/src/state-providers/dialog.ts
+++ b/frontend/src/state-providers/dialog.ts
@@ -1,7 +1,7 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
-import { defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogButtons, UpdateDialogColumn1, UpdateDialogColumn2, patchWidgetLayout } from "@graphite/messages";
+import { defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogButtons, UpdateDialogColumn1, UpdateDialogColumn2, patchWidgetLayout } from "@graphite/messages.svelte";
 import { type IconName } from "@graphite/utility-functions/icons";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
diff --git a/frontend/src/state-providers/document.ts b/frontend/src/state-providers/document.ts
index c9ab1f2b5d..51c606dd66 100644
--- a/frontend/src/state-providers/document.ts
+++ b/frontend/src/state-providers/document.ts
@@ -15,7 +15,7 @@ import {
 	UpdateGraphViewOverlay,
 	TriggerDelayedZoomCanvasToFitAll,
 	UpdateGraphFadeArtwork,
-} from "@graphite/messages";
+} from "@graphite/messages.svelte";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDocumentState(editor: Editor) {
diff --git a/frontend/src/state-providers/fonts.ts b/frontend/src/state-providers/fonts.ts
index f6939d6054..c17a5dcbb5 100644
--- a/frontend/src/state-providers/fonts.ts
+++ b/frontend/src/state-providers/fonts.ts
@@ -1,7 +1,7 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
-import { TriggerFontLoad } from "@graphite/messages";
+import { TriggerFontLoad } from "@graphite/messages.svelte";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createFontsState(editor: Editor) {
diff --git a/frontend/src/state-providers/node-graph.ts b/frontend/src/state-providers/node-graph.ts
index 9884659340..a459e375b9 100644
--- a/frontend/src/state-providers/node-graph.ts
+++ b/frontend/src/state-providers/node-graph.ts
@@ -1,7 +1,7 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
-import type { FrontendGraphOutput, FrontendGraphInput } from "@graphite/messages";
+import type { FrontendGraphOutput, FrontendGraphInput } from "@graphite/messages.svelte";
 import {
 	type Box,
 	type FrontendClickTargets,
@@ -26,7 +26,7 @@ import {
 	UpdateNodeGraphTransform,
 	UpdateNodeThumbnail,
 	UpdateWirePathInProgress,
-} from "@graphite/messages";
+} from "@graphite/messages.svelte";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createNodeGraphState(editor: Editor) {
diff --git a/frontend/src/state-providers/portfolio.ts b/frontend/src/state-providers/portfolio.ts
index f425ba17d4..1bff0e741a 100644
--- a/frontend/src/state-providers/portfolio.ts
+++ b/frontend/src/state-providers/portfolio.ts
@@ -16,7 +16,7 @@ import {
 	defaultWidgetLayout,
 	patchWidgetLayout,
 	UpdateSpreadsheetLayout,
-} from "@graphite/messages";
+} from "@graphite/messages.svelte";
 import { downloadFileText, downloadFileBlob, upload } from "@graphite/utility-functions/files";
 import { extractPixelData, rasterizeSVG } from "@graphite/utility-functions/rasterization";
 
diff --git a/frontend/src/subscription-router.ts b/frontend/src/subscription-router.ts
index 1234c1945c..810c209729 100644
--- a/frontend/src/subscription-router.ts
+++ b/frontend/src/subscription-router.ts
@@ -1,6 +1,6 @@
 import { plainToInstance } from "class-transformer";
 
-import { type JsMessageType, messageMakers, type JsMessage } from "@graphite/messages";
+import { type JsMessageType, messageMakers, type JsMessage } from "@graphite/messages.svelte";
 import { type EditorHandle } from "@graphite-frontend/wasm/pkg/graphite_wasm.js";
 
 type JsMessageCallback<T extends JsMessage> = (messageData: T) => void;

From 7534cf18a7560459692d1384bd4b4248e5485a59 Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Sat, 28 Jun 2025 03:35:41 +0530
Subject: [PATCH 07/16] fix: make document context reactive

---
 frontend/src/components/Editor.svelte         |  2 +-
 .../src/components/panels/Document.svelte     | 24 ++---
 frontend/src/io-managers/input.ts             |  5 +-
 .../{document.ts => document.svelte.ts}       | 89 +++++++------------
 4 files changed, 48 insertions(+), 72 deletions(-)
 rename frontend/src/state-providers/{document.ts => document.svelte.ts} (55%)

diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte
index 6c6813c346..a0ce6e7d82 100644
--- a/frontend/src/components/Editor.svelte
+++ b/frontend/src/components/Editor.svelte
@@ -10,7 +10,7 @@
 	import { createPanicManager } from "@graphite/io-managers/panic";
 	import { createPersistenceManager } from "@graphite/io-managers/persistence";
 	import { createDialogState } from "@graphite/state-providers/dialog";
-	import { createDocumentState } from "@graphite/state-providers/document";
+	import { createDocumentState } from "@graphite/state-providers/document.svelte";
 	import { createFontsState } from "@graphite/state-providers/fonts";
 	import { createFullscreenState } from "@graphite/state-providers/fullscreen";
 	import { createNodeGraphState } from "@graphite/state-providers/node-graph";
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index 1723c01958..bbf14dbc5a 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -16,7 +16,7 @@
 		UpdateMouseCursor,
 		isWidgetSpanRow,
 	} from "@graphite/messages.svelte";
-	import type { DocumentState } from "@graphite/state-providers/document";
+	import type { DocumentState } from "@graphite/state-providers/document.svelte";
 	import { textInputCleanup } from "@graphite/utility-functions/keyboard-entry";
 	import { extractPixelData, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
 	import { updateBoundsOfViewports } from "@graphite/utility-functions/viewports";
@@ -124,7 +124,7 @@
 			totalToolRowsFor2Columns,
 			totalToolRowsFor3Columns,
 		};
-	})($document.toolShelfLayout.layout[0]));
+	})(document.toolShelfLayout.layout[0]));
 
 	function dropFile(e: DragEvent) {
 		const { dataTransfer } = e;
@@ -462,14 +462,14 @@
 </script>
 
 <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} />
-			<WidgetLayout layout={$document.toolOptionsLayout} />
+	<LayoutRow class="control-bar" classes={{ "for-graph": document.graphViewOverlayOpen }} scrollableX={true}>
+		{#if !document.graphViewOverlayOpen}
+			<WidgetLayout layout={document.documentModeLayout} />
+			<WidgetLayout layout={document.toolOptionsLayout} />
 			<LayoutRow class="spacer" />
-			<WidgetLayout layout={$document.documentBarLayout} />
+			<WidgetLayout layout={document.documentBarLayout} />
 		{:else}
-			<WidgetLayout layout={$document.nodeGraphControlBarLayout} />
+			<WidgetLayout layout={document.nodeGraphControlBarLayout} />
 		{/if}
 	</LayoutRow>
 	<LayoutRow
@@ -482,15 +482,15 @@
 		}}
 	>
 		<LayoutCol class="tool-shelf">
-			{#if !$document.graphViewOverlayOpen}
+			{#if !document.graphViewOverlayOpen}
 				<LayoutCol class="tools" scrollableY={true}>
-					<WidgetLayout layout={$document.toolShelfLayout} />
+					<WidgetLayout layout={document.toolShelfLayout} />
 				</LayoutCol>
 			{:else}
 				<LayoutRow class="spacer" />
 			{/if}
 			<LayoutCol class="tool-shelf-bottom-widgets">
-				<WidgetLayout class={"working-colors-input-area"} layout={$document.workingColorsLayout} />
+				<WidgetLayout class={"working-colors-input-area"} layout={document.workingColorsLayout} />
 			</LayoutCol>
 		</LayoutCol>
 		<LayoutCol class="viewport-container">
@@ -536,7 +536,7 @@
 						>
 						</canvas>
 					</div>
-					<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork={`${$document.fadeArtwork}%`} data-graph>
+					<div class="graph-view" class:open={document.graphViewOverlayOpen} style:--fade-artwork={`${document.fadeArtwork}%`} data-graph>
 						<Graph />
 					</div>
 				</LayoutCol>
diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index b5b7682aed..1da7548508 100644
--- a/frontend/src/io-managers/input.ts
+++ b/frontend/src/io-managers/input.ts
@@ -3,7 +3,8 @@ import { get } from "svelte/store";
 import { type Editor } from "@graphite/editor";
 import { TriggerPaste } from "@graphite/messages.svelte";
 import { type DialogState } from "@graphite/state-providers/dialog";
-import { type DocumentState } from "@graphite/state-providers/document";
+import { type DocumentState } from "@graphite/state-providers/document.svelte";
+import { documentContextState } from "@graphite/state-providers/document.svelte";
 import { type FullscreenState } from "@graphite/state-providers/fullscreen";
 import { type PortfolioState } from "@graphite/state-providers/portfolio";
 import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode } from "@graphite/utility-functions/keyboard-entry";
@@ -157,7 +158,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
 		// TODO: This would allow it to properly decide to act on removing hover focus from something that was hovered in the canvas before moving over the GUI.
 		// TODO: Further explanation: https://github.com/GraphiteEditor/Graphite/pull/623#discussion_r866436197
 		const inFloatingMenu = e.target instanceof Element && e.target.closest("[data-floating-menu-content]");
-		const inGraphOverlay = get(document).graphViewOverlayOpen;
+		const inGraphOverlay = documentContextState.graphViewOverlayOpen;
 		if (!viewportPointerInteractionOngoing && (inFloatingMenu || inGraphOverlay)) return;
 
 		const modifiers = makeKeyboardModifiersBitfield(e);
diff --git a/frontend/src/state-providers/document.ts b/frontend/src/state-providers/document.svelte.ts
similarity index 55%
rename from frontend/src/state-providers/document.ts
rename to frontend/src/state-providers/document.svelte.ts
index 51c606dd66..30143eab5b 100644
--- a/frontend/src/state-providers/document.ts
+++ b/frontend/src/state-providers/document.svelte.ts
@@ -1,5 +1,4 @@
 import { tick } from "svelte";
-import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
 
@@ -17,83 +16,59 @@ import {
 	UpdateGraphFadeArtwork,
 } from "@graphite/messages.svelte";
 
+export const documentContextState = $state({
+	// Layouts - these are already $state objects from defaultWidgetLayout()
+	documentModeLayout: defaultWidgetLayout(),
+	toolOptionsLayout: defaultWidgetLayout(),
+	documentBarLayout: defaultWidgetLayout(),
+	toolShelfLayout: defaultWidgetLayout(),
+	workingColorsLayout: defaultWidgetLayout(),
+	nodeGraphControlBarLayout: defaultWidgetLayout(),
+	// Graph view overlay
+	graphViewOverlayOpen: false,
+	fadeArtwork: 100,
+});
+
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDocumentState(editor: Editor) {
-	const state = writable({
-		// Layouts
-		documentModeLayout: defaultWidgetLayout(),
-		toolOptionsLayout: defaultWidgetLayout(),
-		documentBarLayout: defaultWidgetLayout(),
-		toolShelfLayout: defaultWidgetLayout(),
-		workingColorsLayout: defaultWidgetLayout(),
-		nodeGraphControlBarLayout: defaultWidgetLayout(),
-		// Graph view overlay
-		graphViewOverlayOpen: false,
-		fadeArtwork: 100,
-	});
-	const { subscribe, update } = state;
-
-	// Update layouts
+	// Set up subscriptions (these run once when the function is called)
 	editor.subscriptions.subscribeJsMessage(UpdateGraphFadeArtwork, (updateGraphFadeArtwork) => {
-		update((state) => {
-			state.fadeArtwork = updateGraphFadeArtwork.percentage;
-			return state;
-		});
+		documentContextState.fadeArtwork = updateGraphFadeArtwork.percentage;
 	});
+
 	editor.subscriptions.subscribeJsMessage(UpdateDocumentModeLayout, async (updateDocumentModeLayout) => {
 		await tick();
-
-		update((state) => {
-			patchWidgetLayout(state.documentModeLayout, updateDocumentModeLayout);
-			return state;
-		});
+		patchWidgetLayout(documentContextState.documentModeLayout, updateDocumentModeLayout);
 	});
+
 	editor.subscriptions.subscribeJsMessage(UpdateToolOptionsLayout, async (updateToolOptionsLayout) => {
 		await tick();
-
-		update((state) => {
-			patchWidgetLayout(state.toolOptionsLayout, updateToolOptionsLayout);
-			return state;
-		});
+		patchWidgetLayout(documentContextState.toolOptionsLayout, updateToolOptionsLayout);
 	});
+
 	editor.subscriptions.subscribeJsMessage(UpdateDocumentBarLayout, async (updateDocumentBarLayout) => {
 		await tick();
-
-		update((state) => {
-			patchWidgetLayout(state.documentBarLayout, updateDocumentBarLayout);
-			return state;
-		});
+		patchWidgetLayout(documentContextState.documentBarLayout, updateDocumentBarLayout);
 	});
+
 	editor.subscriptions.subscribeJsMessage(UpdateToolShelfLayout, async (updateToolShelfLayout) => {
 		await tick();
-
-		update((state) => {
-			patchWidgetLayout(state.toolShelfLayout, updateToolShelfLayout);
-			return state;
-		});
+		patchWidgetLayout(documentContextState.toolShelfLayout, updateToolShelfLayout);
 	});
+
 	editor.subscriptions.subscribeJsMessage(UpdateWorkingColorsLayout, async (updateWorkingColorsLayout) => {
 		await tick();
-
-		update((state) => {
-			patchWidgetLayout(state.workingColorsLayout, updateWorkingColorsLayout);
-			return state;
-		});
+		patchWidgetLayout(documentContextState.workingColorsLayout, updateWorkingColorsLayout);
 	});
+
 	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphControlBarLayout, (updateNodeGraphControlBarLayout) => {
-		update((state) => {
-			patchWidgetLayout(state.nodeGraphControlBarLayout, updateNodeGraphControlBarLayout);
-			return state;
-		});
+		patchWidgetLayout(documentContextState.nodeGraphControlBarLayout, updateNodeGraphControlBarLayout);
 	});
 
-	// Show or hide the graph view overlay
 	editor.subscriptions.subscribeJsMessage(UpdateGraphViewOverlay, (updateGraphViewOverlay) => {
-		update((state) => {
-			state.graphViewOverlayOpen = updateGraphViewOverlay.open;
-			return state;
-		});
+		documentContextState.graphViewOverlayOpen = updateGraphViewOverlay.open;
 	});
+
 	editor.subscriptions.subscribeJsMessage(TriggerDelayedZoomCanvasToFitAll, () => {
 		// TODO: This is horribly hacky
 		[0, 1, 10, 50, 100, 200, 300, 400, 500].forEach((delay) => {
@@ -101,8 +76,8 @@ export function createDocumentState(editor: Editor) {
 		});
 	});
 
-	return {
-		subscribe,
-	};
+	// Return the reactive state object directly
+	return documentContextState;
 }
+
 export type DocumentState = ReturnType<typeof createDocumentState>;

From dce421c081446dc85c30286c72b63ed0a0a8e396 Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Sat, 28 Jun 2025 04:43:00 +0530
Subject: [PATCH 08/16] fix: conditionally deserialize b/w POJO and class
 instance for diff updates

---
 frontend/src/messages.svelte.ts               | 20 +++++++++----------
 .../src/state-providers/document.svelte.ts    |  1 -
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/src/messages.svelte.ts b/frontend/src/messages.svelte.ts
index 1738bbfbcb..1ca813e3d4 100644
--- a/frontend/src/messages.svelte.ts
+++ b/frontend/src/messages.svelte.ts
@@ -1388,6 +1388,12 @@ export class Widget {
 	}
 
 	@Type(() => WidgetProps, { discriminator: { property: "kind", subTypes: [...widgetSubTypes] }, keepDiscriminatorProperty: true })
+	@Transform(({ value }) => {
+		if (value.kind === "PopoverButton") {
+			value.popoverLayout = value.popoverLayout.map(createLayoutGroup);
+		}
+		return value;
+	})
 	props!: WidgetPropsSet;
 
 	widgetId!: bigint;
@@ -1399,10 +1405,6 @@ function hoistWidgetHolder(widgetHolder: any): Widget {
 	const props = widgetHolder.widget[kind];
 	props.kind = kind;
 
-	if (kind === "PopoverButton") {
-		props.popoverLayout = props.popoverLayout.map(createLayoutGroup);
-	}
-
 	const { widgetId } = widgetHolder;
 
 	return plainToClass(Widget, { props, widgetId });
@@ -1475,13 +1477,9 @@ export function patchWidgetLayout(layout: /* &mut */ WidgetLayout, updates: Widg
 				Reflect.set(diffObject, "length", 0);
 			}
 
-			// Clear existing properties
-			// Remove all keys using Reflect.deleteProperty to ensure proxy notifications
-			Reflect.ownKeys(diffObject).forEach((key) => {
-				if (key !== "length") {
-					// Don't delete length property on arrays
-					Reflect.deleteProperty(diffObject, key);
-				}
+			// Remove all enumerable properties using Reflect.deleteProperty to ensure proxy notifications
+			Object.keys(diffObject).forEach((key) => {
+				Reflect.deleteProperty(diffObject, key);
 			});
 
 			// Assign new properties
diff --git a/frontend/src/state-providers/document.svelte.ts b/frontend/src/state-providers/document.svelte.ts
index 30143eab5b..84802e3def 100644
--- a/frontend/src/state-providers/document.svelte.ts
+++ b/frontend/src/state-providers/document.svelte.ts
@@ -17,7 +17,6 @@ import {
 } from "@graphite/messages.svelte";
 
 export const documentContextState = $state({
-	// Layouts - these are already $state objects from defaultWidgetLayout()
 	documentModeLayout: defaultWidgetLayout(),
 	toolOptionsLayout: defaultWidgetLayout(),
 	documentBarLayout: defaultWidgetLayout(),

From 50b7c1cfe459004db51c57d21e21d9cb46659bf5 Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Sat, 28 Jun 2025 17:51:02 +0530
Subject: [PATCH 09/16] fix(ReferencePoint): handle target selection via event
 delegation for clicks

---
 .../widgets/inputs/ReferencePointInput.svelte | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
index 69b7a9fc2e..945f36ec0c 100644
--- a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
+++ b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
@@ -11,22 +11,25 @@
 	let { value, disabled = false, onvalue, tooltip }: Props = $props();
 
 	function setValue(event: MouseEvent) {
-		let element = event.target as HTMLElement;
-		let position = element.dataset.position as ReferencePoint;
-		onvalue?.(position);
+		const element = event.target as HTMLDivElement;
+		const button = element.parentElement;
+		if (button) {
+			let position = button.dataset.position! as ReferencePoint;
+			onvalue?.(position);
+		}
 	}
 </script>
 
-<div class="reference-point-input" class:disabled title={tooltip}>
-	<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 class="reference-point-input" class:disabled onclick={setValue} title={tooltip}>
+	<button data-position="TopLeft" class="row-1 col-1" class:active={value === "TopLeft"} tabindex="-1" {disabled}><div></div></button>
+	<button data-position="TopCenter" class="row-1 col-2" class:active={value === "TopCenter"} tabindex="-1" {disabled}><div></div></button>
+	<button data-position="TopRight" class="row-1 col-3" class:active={value === "TopRight"} tabindex="-1" {disabled}><div></div></button>
+	<button data-position="CenterLeft" class="row-2 col-1" class:active={value === "CenterLeft"} tabindex="-1" {disabled}><div></div></button>
+	<button data-position="Center" class="row-2 col-2" class:active={value === "Center"} tabindex="-1" {disabled}><div></div></button>
+	<button data-position="CenterRight" class="row-2 col-3" class:active={value === "CenterRight"} tabindex="-1" {disabled}><div></div></button>
+	<button data-position="BottomLeft" class="row-3 col-1" class:active={value === "BottomLeft"} tabindex="-1" {disabled}><div></div></button>
+	<button data-position="BottomCenter" class="row-3 col-2" class:active={value === "BottomCenter"} tabindex="-1" {disabled}><div></div></button>
+	<button data-position="BottomRight" class="row-3 col-3" class:active={value === "BottomRight"} tabindex="-1" {disabled}><div></div></button>
 </div>
 
 <style lang="scss" global>

From 285413db1e46cd2945f7e7ab803911f2bc094cad Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Sat, 28 Jun 2025 18:53:21 +0530
Subject: [PATCH 10/16] perf: create node values loopkup index once per update

---
 frontend/src/components/views/Graph.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte
index a70ff910d2..f7b4167994 100644
--- a/frontend/src/components/views/Graph.svelte
+++ b/frontend/src/components/views/Graph.svelte
@@ -36,6 +36,7 @@
 	let editingNameImportIndex = $state<number>();
 	let editingNameExportIndex = $state<number>();
 	let editingNameText = $state<string>("");
+	let nodeValues: FrontendNode[] = $state([]);
 
 	function exportsToEdgeTextInputWidth() {
 		let exportTextDivs = document.querySelectorAll(`[data-export-text-edge]`);
@@ -199,7 +200,7 @@
 	}
 
 	function primaryOutputConnectedToLayer(node: FrontendNode): boolean {
-		let firstConnectedNode = Array.from($nodeGraph.nodes.values()).find((n) =>
+		let firstConnectedNode = nodeValues.find((n) =>
 			node.primaryOutput?.connectedTo.some((connector) => {
 				if ((connector as Node).nodeId === undefined) return false;
 				if (connector.index !== 0n) return false;
@@ -210,7 +211,7 @@
 	}
 
 	function primaryInputConnectedToLayer(node: FrontendNode): boolean {
-		const connectedNode = Array.from($nodeGraph.nodes.values()).find((n) => {
+		const connectedNode = nodeValues.find((n) => {
 			if ((node.primaryInput?.connectedTo as Node) === undefined) return false;
 			return n.id === (node.primaryInput?.connectedTo as Node).nodeId;
 		});
@@ -225,6 +226,10 @@
 		}
 		return result;
 	}
+
+	$effect.pre(() => {
+		nodeValues = Array.from($nodeGraph.nodes.values());
+	});
 	// Key value is node id + input/output index
 	// Imports/Export are stored at a key value of 0
 

From 9c5804fa8afe2a48c1ada2c2007a6ab1d875566e Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Sun, 29 Jun 2025 01:18:07 +0530
Subject: [PATCH 11/16] fix(NodeCatalog): supress reactivity by freezing
 nodetypes

---
 .../src/components/floating-menus/NodeCatalog.svelte   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte
index 7a9c1e5779..40ae3ec673 100644
--- a/frontend/src/components/floating-menus/NodeCatalog.svelte
+++ b/frontend/src/components/floating-menus/NodeCatalog.svelte
@@ -10,6 +10,7 @@
 	import type { WheelEventHandler } from 'svelte/elements';
 
 	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
+	let nodeTypes: FrontendNodeType[] = [ ...$nodeGraph.nodeTypes ];
 
 	interface Props {
 		disabled?: boolean;
@@ -20,16 +21,15 @@
 
 	let { disabled = false, initialSearchTerm = "", onselectNodeType, onwheel }: Props = $props();
 
-	let nodeSearchInput: TextInput | undefined = $state(undefined);
+	let nodeSearchInput: TextInput | undefined = $state();
 	let searchTerm = $state(initialSearchTerm);
 
-
 	type NodeCategoryDetails = {
 		nodes: FrontendNodeType[];
 		open: boolean;
 	};
 
-	function buildNodeCategories(nodeTypes: FrontendNodeType[], searchTerm: string): [string, NodeCategoryDetails][] {
+	function buildNodeCategories(searchTerm: string): [string, NodeCategoryDetails][] {
 		const categories = new Map<string, NodeCategoryDetails>();
 		const isTypeSearch = searchTerm.toLowerCase().startsWith("type:");
 		let typeSearchTerm = "";
@@ -115,8 +115,8 @@
 
 	let nodeCategories = $state<[string, NodeCategoryDetails][]>([]);
 
-	$effect(() => {
-		nodeCategories = buildNodeCategories($nodeGraph.nodeTypes, searchTerm);
+	$effect.pre(() => {
+		nodeCategories = buildNodeCategories(searchTerm);
 	})
 
 </script>

From 1e2dd32853f8525d999a916d319a472bbd2955f2 Mon Sep 17 00:00:00 2001
From: GitButler <gitbutler@gitbutler.com>
Date: Mon, 30 Jun 2025 00:11:36 +0530
Subject: [PATCH 12/16] fix: only trigger change from button

---
 .../src/components/widgets/inputs/ReferencePointInput.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
index 945f36ec0c..951385f44e 100644
--- a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
+++ b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
@@ -13,7 +13,7 @@
 	function setValue(event: MouseEvent) {
 		const element = event.target as HTMLDivElement;
 		const button = element.parentElement;
-		if (button) {
+		if (button instanceof HTMLButtonElement) {
 			let position = button.dataset.position! as ReferencePoint;
 			onvalue?.(position);
 		}

From 200e6e8ab02ef7b1833fbc074e0e6b0cfb7f316d Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Sun, 6 Jul 2025 16:43:39 +0530
Subject: [PATCH 13/16] refactor(Graph.svelte): use snippets for ports

---
 frontend/src/components/views/Graph.svelte | 159 +++++----------------
 1 file changed, 38 insertions(+), 121 deletions(-)

diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte
index f7b4167994..74f5ff2543 100644
--- a/frontend/src/components/views/Graph.svelte
+++ b/frontend/src/components/views/Graph.svelte
@@ -5,7 +5,7 @@
 
 	import type { Editor } from "@graphite/editor";
 	import type { Node } from "@graphite/messages.svelte";
-	import type { FrontendNode, FrontendGraphInput, FrontendGraphOutput } from "@graphite/messages.svelte";
+	import { type FrontendNode, type FrontendGraphInput, FrontendGraphOutput, } from "@graphite/messages.svelte";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 	import type { IconName } from "@graphite/utility-functions/icons";
 
@@ -230,6 +230,7 @@
 	$effect.pre(() => {
 		nodeValues = Array.from($nodeGraph.nodes.values());
 	});
+
 	// Key value is node id + input/output index
 	// Imports/Export are stored at a key value of 0
 
@@ -340,25 +341,7 @@
 	<!-- Import and Export ports -->
 	<div class="imports-and-exports" style:transform-origin={`0 0`} style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
  		{#each $nodeGraph.imports as { outputMetadata, position }, index}
- 			<svg
- 				xmlns="http://www.w3.org/2000/svg"
- 				viewBox="0 0 8 8"
- 				class="port"
- 				data-port="output"
- 				data-datatype={outputMetadata.dataType}
- 				style:--data-color={`var(--color-data-${outputMetadata.dataType.toLowerCase()})`}
- 				style:--data-color-dim={`var(--color-data-${outputMetadata.dataType.toLowerCase()}-dim)`}
- 				style:--offset-left={position.x / 24}
- 				style:--offset-top={position.y / 24}
- 			>
- 				<title>{`${dataTypeTooltip(outputMetadata)}\n\n${outputConnectedToText(outputMetadata)}`}</title>
- 				{#if outputMetadata.connectedTo !== undefined}
- 					<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
- 				{:else}
- 					<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
- 				{/if}
- 			</svg>
- 
+			{@render port("port", "output", outputMetadata, position.x / 24, position.y / 24)}
  			<div
  				class="edit-import-export import"
  				onpointerenter={() => (hoveringImportIndex = index)}
@@ -414,24 +397,7 @@
 			</div>
 		{/if}
 		{#each $nodeGraph.exports as { inputMetadata, position }, index}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 8 8"
-				class="port"
-				data-port="input"
-				data-datatype={inputMetadata.dataType}
-				style:--data-color={`var(--color-data-${inputMetadata.dataType.toLowerCase()})`}
-				style:--data-color-dim={`var(--color-data-${inputMetadata.dataType.toLowerCase()}-dim)`}
-				style:--offset-left={position.x / 24}
-				style:--offset-top={position.y / 24}
-			>
-				<title>{`${dataTypeTooltip(inputMetadata)}\n\n${inputConnectedToText(inputMetadata)}`}</title>
-				{#if inputMetadata.connectedTo !== undefined}
-					<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
-				{:else}
-					<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
-				{/if}
-			</svg>
+			{@render port("port", "input", inputMetadata, position.x / 24, position.y / 24)}
 			<div
 				class="edit-import-export export"
 				onpointerenter={() => (hoveringExportIndex = index)}
@@ -570,22 +536,7 @@
 				<!-- Layer input port (from left) -->
 				{#if node.exposedInputs.length > 0}
 					<div class="input ports">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 8 8"
-							class="port"
-							data-port="input"
-							data-datatype={stackDataInput.dataType}
-							style:--data-color={`var(--color-data-${stackDataInput.dataType.toLowerCase()})`}
-							style:--data-color-dim={`var(--color-data-${stackDataInput.dataType.toLowerCase()}-dim)`}
-						>
-							<title>{`${dataTypeTooltip(stackDataInput)}\n\n${validTypesText(stackDataInput)}\n\n${inputConnectedToText(stackDataInput)}`}</title>
-							{#if stackDataInput.connectedTo !== undefined}
-								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
-							{:else}
-								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
-							{/if}
-						</svg>
+						{@render port("port", "input", stackDataInput)}
 					</div>
 				{/if}
 				<div class="details">
@@ -688,81 +639,19 @@
 				<!-- Input ports -->
 				<div class="input ports">
 					{#if node.primaryInput?.dataType}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 8 8"
-							class="port primary-port"
-							data-port="input"
-							data-datatype={node.primaryInput?.dataType}
-							style:--data-color={`var(--color-data-${node.primaryInput.dataType.toLowerCase()})`}
-							style:--data-color-dim={`var(--color-data-${node.primaryInput.dataType.toLowerCase()}-dim)`}
-						>
-							<title>{`${dataTypeTooltip(node.primaryInput)}\n\n${validTypesText(node.primaryInput)}\n\n${inputConnectedToText(node.primaryInput)}`}</title>
-							{#if node.primaryInput.connectedTo !== undefined}
-								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
-							{:else}
-								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
-							{/if}
-						</svg>
+						{@render port("port primary-port", "input", node.primaryInput)}
 					{/if}
 					{#each node.exposedInputs as secondary, index}
 						{#if index < node.exposedInputs.length}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 8 8"
-								class="port"
-								data-port="input"
-								data-datatype={secondary.dataType}
-								style:--data-color={`var(--color-data-${secondary.dataType.toLowerCase()})`}
-								style:--data-color-dim={`var(--color-data-${secondary.dataType.toLowerCase()}-dim)`}
-							>
-								<title>{`${dataTypeTooltip(secondary)}\n\n${validTypesText(secondary)}\n\n${inputConnectedToText(secondary)}`}</title>
-								{#if secondary.connectedTo !== undefined}
-									<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
-								{:else}
-									<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
-								{/if}
-							</svg>
+							{@render port("port", "input", secondary)}
 						{/if}
 					{/each}
 				</div>
 				<!-- Output ports -->
 				<div class="output ports">
-					{#if node.primaryOutput}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 8 8"
-							class="port primary-port"
-							data-port="output"
-							data-datatype={node.primaryOutput.dataType}
-							style:--data-color={`var(--color-data-${node.primaryOutput.dataType.toLowerCase()})`}
-							style:--data-color-dim={`var(--color-data-${node.primaryOutput.dataType.toLowerCase()}-dim)`}
-						>
-							<title>{`${dataTypeTooltip(node.primaryOutput)}\n\n${outputConnectedToText(node.primaryOutput)}`}</title>
-							{#if node.primaryOutput.connectedTo !== undefined}
-								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
-							{:else}
-								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
-							{/if}
-						</svg>
-					{/if}
-					{#each node.exposedOutputs as secondary}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 8 8"
-							class="port"
-							data-port="output"
-							data-datatype={secondary.dataType}
-							style:--data-color={`var(--color-data-${secondary.dataType.toLowerCase()})`}
-							style:--data-color-dim={`var(--color-data-${secondary.dataType.toLowerCase()}-dim)`}
-						>
-							<title>{`${dataTypeTooltip(secondary)}\n\n${outputConnectedToText(secondary)}`}</title>
-							{#if secondary.connectedTo !== undefined}
-								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
-							{:else}
-								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
-							{/if}
-						</svg>
+					{@render port("port primary-port", "output", node.primaryOutput)}
+					{#each node.exposedOutputs as secondary, outputIndex}
+						{@render port("port", "output", secondary)}
 					{/each}
 				</div>
 				<svg class="border-mask" width="0" height="0">
@@ -792,6 +681,34 @@
 	></div>
 {/if}
 
+{#snippet port(className: string, dataPort: string, node?: FrontendGraphInput | FrontendGraphOutput, offsetLeft?: number, offsetTop?: number)}
+	{#if node}
+		{@const color = node.dataType.toLowerCase()}
+    <svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 8 8"
+			class={className}
+			data-port={dataPort}
+			data-datatype={node.dataType}
+			style:--data-color={`var(--color-data-${color})`}
+			style:--data-color-dim={`var(--color-data-${color}-dim)`}
+			style:--offset-left={offsetLeft}
+			style:--offset-top={offsetTop}
+			>
+			{#if node instanceof FrontendGraphOutput}
+				<title>{`${dataTypeTooltip(node)}\n\n${outputConnectedToText(node)}`}</title>
+			{:else}
+				<title>{`${dataTypeTooltip(node)}\n\n${validTypesText(node)}\n\n${inputConnectedToText(node)}`}</title>
+			{/if}
+			{#if node.connectedTo !== undefined}
+				<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
+			{:else}
+				<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
+			{/if}
+		</svg>
+	{/if}
+{/snippet}
+
 <style lang="scss" global>
 	.graph {
 		position: relative;

From ec88f413ceafd0f9455cc9c447c8d558ccd06bce Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Sat, 12 Jul 2025 16:52:40 +0530
Subject: [PATCH 14/16] lint: revert eslint-plugin-svelte to v2 and fix lint
 errors

---
 frontend/.eslintrc.cjs                        |   7 +-
 frontend/package-lock.json                    | 167 ++++++------------
 frontend/package.json                         |   2 +-
 frontend/src/app.d.ts                         |   2 +-
 frontend/src/components/Editor.svelte         |   8 +-
 .../floating-menus/ColorPicker.svelte         |  36 ++--
 .../floating-menus/EyedropperPreview.svelte   |  14 +-
 .../components/floating-menus/MenuList.svelte |  25 +--
 .../floating-menus/NodeCatalog.svelte         |  21 ++-
 .../layout/ConditionalWrapper.svelte          |   4 +-
 .../src/components/layout/FloatingMenu.svelte |  45 +++--
 .../src/components/layout/LayoutCol.svelte    |  39 ++--
 .../src/components/layout/LayoutRow.svelte    |  38 ++--
 .../src/components/panels/Document.svelte     |  91 +++++-----
 frontend/src/components/panels/Layers.svelte  |  27 +--
 .../src/components/panels/Properties.svelte   |   6 +-
 frontend/src/components/views/Graph.svelte    |  88 ++++-----
 .../components/widgets/WidgetLayout.svelte    |   8 +-
 .../components/widgets/WidgetSection.svelte   |  32 ++--
 .../src/components/widgets/WidgetSpan.svelte  |  26 ++-
 .../src/components/widgets/WidgetTable.svelte |   8 +-
 .../buttons/BreadcrumbTrailButtons.svelte     |  11 +-
 .../widgets/buttons/IconButton.svelte         |  31 ++--
 .../widgets/buttons/ImageButton.svelte        |  22 +--
 .../buttons/ParameterExposeButton.svelte      |  14 +-
 .../widgets/buttons/PopoverButton.svelte      |  21 +--
 .../widgets/buttons/TextButton.svelte         |  22 +--
 .../widgets/inputs/CheckboxInput.svelte       |  26 +--
 .../widgets/inputs/ColorInput.svelte          |  21 +--
 .../widgets/inputs/CurveInput.svelte          |  24 +--
 .../widgets/inputs/DropdownInput.svelte       |  19 +-
 .../widgets/inputs/FieldInput.svelte          |  64 ++++---
 .../widgets/inputs/FontInput.svelte           |  18 +-
 .../widgets/inputs/NumberInput.svelte         |  24 +--
 .../widgets/inputs/RadioInput.svelte          |  15 +-
 .../widgets/inputs/ReferencePointInput.svelte |   4 +-
 .../widgets/inputs/RulerInput.svelte          |  14 +-
 .../widgets/inputs/ScrollbarInput.svelte      |  19 +-
 .../widgets/inputs/SpectrumInput.svelte       |  23 +--
 .../widgets/inputs/TextAreaInput.svelte       |  12 +-
 .../widgets/inputs/TextInput.svelte           |   4 +-
 .../widgets/inputs/WorkingColorsInput.svelte  |  20 +--
 .../widgets/labels/IconLabel.svelte           |  43 +++--
 .../widgets/labels/Separator.svelte           |   4 +-
 .../widgets/labels/TextLabel.svelte           |  31 ++--
 .../widgets/labels/UserInputLabel.svelte      |  18 +-
 .../window/status-bar/StatusBar.svelte        |   3 +-
 .../window/title-bar/TitleBar.svelte          |   7 +-
 .../window/title-bar/WindowButtonsMac.svelte  |   4 +-
 .../title-bar/WindowButtonsWindows.svelte     |   4 +-
 .../window/title-bar/WindowTitle.svelte       |   4 +-
 .../components/window/workspace/Panel.svelte  |  17 +-
 .../window/workspace/Workspace.svelte         |  19 +-
 frontend/src/editor.ts                        |   3 +-
 frontend/src/io-managers/clipboard.ts         |   1 +
 frontend/src/io-managers/hyperlinks.ts        |   1 +
 frontend/src/io-managers/input.ts             |  11 +-
 frontend/src/io-managers/localization.ts      |   1 +
 frontend/src/io-managers/panic.ts             |   4 +-
 frontend/src/io-managers/persistence.ts       |   4 +-
 frontend/src/messages.svelte.ts               |  59 ++++---
 frontend/src/state-providers/dialog.ts        |   4 +-
 frontend/src/state-providers/fonts.ts         |   1 +
 frontend/src/state-providers/node-graph.ts    |   1 +
 frontend/src/state-providers/portfolio.ts     |   9 +-
 frontend/src/subscription-router.ts           |   3 +-
 frontend/vite.config.ts                       |   3 +-
 67 files changed, 590 insertions(+), 791 deletions(-)

diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index c71b3ff332..d8ae44eda4 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -19,7 +19,7 @@ module.exports = {
 	parserOptions: {
 		ecmaVersion: "latest",
 		project: "./tsconfig.json",
-		extraFileExtensions: [".svelte"],
+		extraFileExtensions: [".svelte", ".svelte.ts"],
 	},
 	ignorePatterns: [
 		// Ignore generated directories
@@ -33,7 +33,7 @@ module.exports = {
 	],
 	overrides: [
 		{
-			files: ["*.svelte"],
+			files: ["*.svelte", "*.svelte.ts"],
 			parser: "svelte-eslint-parser",
 			// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
 			parserOptions: { parser: "@typescript-eslint/parser" },
@@ -53,6 +53,9 @@ module.exports = {
 		"max-len": ["error", { code: 200, tabWidth: 4, ignorePattern: `d="([\\s\\S]*?)"` }],
 		"prefer-destructuring": "off",
 		"no-console": "warn",
+		// eslint recommended for ts project
+		// https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+		"no-undef": "off",
 		"no-debugger": "warn",
 		"no-param-reassign": ["error", { props: false }],
 		"no-bitwise": "off",
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3258b28b0f..b535896061 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,7 +24,7 @@
 				"eslint-import-resolver-typescript": "^3.6.3",
 				"eslint-plugin-import": "^2.30.0",
 				"eslint-plugin-prettier": "^5.2.1",
-				"eslint-plugin-svelte": "^3.9.2",
+				"eslint-plugin-svelte": "^2.46.0",
 				"minimatch": "^10.0.3",
 				"postcss": "^8.4.47",
 				"prettier": "^3.3.3",
@@ -2425,6 +2425,22 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/eslint-compat-utils": {
+			"version": "0.5.1",
+			"resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
+			"integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"semver": "^7.5.4"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"peerDependencies": {
+				"eslint": ">=6.0.0"
+			}
+		},
 		"node_modules/eslint-config-prettier": {
 			"version": "9.1.0",
 			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
@@ -2646,31 +2662,32 @@
 			}
 		},
 		"node_modules/eslint-plugin-svelte": {
-			"version": "3.9.2",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-3.9.2.tgz",
-			"integrity": "sha512-aqzfHtG9RPaFhCUFm5QFC6eFY/yHFQIT8VYYFe7/mT2A9mbgVR3XV2keCqU19LN8iVD9mdvRvqHU+4+CzJImvg==",
+			"version": "2.46.1",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.46.1.tgz",
+			"integrity": "sha512-7xYr2o4NID/f9OEYMqxsEQsCsj4KaMy4q5sANaKkAb6/QeCjYFxRmDm2S3YC3A3pl1kyPZ/syOx/i7LcWYSbIw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@eslint-community/eslint-utils": "^4.6.1",
-				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@eslint-community/eslint-utils": "^4.4.0",
+				"@jridgewell/sourcemap-codec": "^1.4.15",
+				"eslint-compat-utils": "^0.5.1",
 				"esutils": "^2.0.3",
-				"globals": "^16.0.0",
-				"known-css-properties": "^0.36.0",
-				"postcss": "^8.4.49",
+				"known-css-properties": "^0.35.0",
+				"postcss": "^8.4.38",
 				"postcss-load-config": "^3.1.4",
-				"postcss-safe-parser": "^7.0.0",
-				"semver": "^7.6.3",
-				"svelte-eslint-parser": "^1.2.0"
+				"postcss-safe-parser": "^6.0.0",
+				"postcss-selector-parser": "^6.1.0",
+				"semver": "^7.6.2",
+				"svelte-eslint-parser": "^0.43.0"
 			},
 			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+				"node": "^14.17.0 || >=16.0.0"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/ota-meshi"
 			},
 			"peerDependencies": {
-				"eslint": "^8.57.1 || ^9.0.0",
+				"eslint": "^7.0.0 || ^8.0.0-0 || ^9.0.0-0",
 				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
 			},
 			"peerDependenciesMeta": {
@@ -2679,26 +2696,12 @@
 				}
 			}
 		},
-		"node_modules/eslint-plugin-svelte/node_modules/globals": {
-			"version": "16.2.0",
-			"resolved": "https://registry.npmjs.org/globals/-/globals-16.2.0.tgz",
-			"integrity": "sha512-O+7l9tPdHCU320IigZZPj5zmRCFG9xHmx9cU8FqU2Rp+JN714seHV+2S9+JslCpY4gJwU2vOGox0wzgae/MCEg==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">=18"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/eslint-scope": {
 			"version": "7.2.2",
 			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
 			"integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
 			"dev": true,
 			"license": "BSD-2-Clause",
-			"peer": true,
 			"dependencies": {
 				"esrecurse": "^4.3.0",
 				"estraverse": "^5.2.0"
@@ -2762,7 +2765,6 @@
 			"integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
 			"dev": true,
 			"license": "BSD-2-Clause",
-			"peer": true,
 			"dependencies": {
 				"acorn": "^8.9.0",
 				"acorn-jsx": "^5.3.2",
@@ -3832,9 +3834,9 @@
 			}
 		},
 		"node_modules/known-css-properties": {
-			"version": "0.36.0",
-			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.36.0.tgz",
-			"integrity": "sha512-A+9jP+IUmuQsNdsLdcg6Yt7voiMF/D4K83ew0OpJtpu+l34ef7LaohWV0Rc6KNvzw6ZDizkqfyB5JznZnzuKQA==",
+			"version": "0.35.0",
+			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.35.0.tgz",
+			"integrity": "sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==",
 			"dev": true,
 			"license": "MIT"
 		},
@@ -4372,30 +4374,20 @@
 			}
 		},
 		"node_modules/postcss-safe-parser": {
-			"version": "7.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
-			"integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
+			"integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
 			"dev": true,
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/postcss/"
-				},
-				{
-					"type": "tidelift",
-					"url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
-				},
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			],
 			"license": "MIT",
 			"engines": {
-				"node": ">=18.0"
+				"node": ">=12.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/postcss/"
 			},
 			"peerDependencies": {
-				"postcss": "^8.4.31"
+				"postcss": "^8.3.3"
 			}
 		},
 		"node_modules/postcss-scss": {
@@ -4426,9 +4418,9 @@
 			}
 		},
 		"node_modules/postcss-selector-parser": {
-			"version": "7.1.0",
-			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
-			"integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+			"integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -5166,21 +5158,20 @@
 			}
 		},
 		"node_modules/svelte-eslint-parser": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-1.2.0.tgz",
-			"integrity": "sha512-mbPtajIeuiyU80BEyGvwAktBeTX7KCr5/0l+uRGLq1dafwRNrjfM5kHGJScEBlPG3ipu6dJqfW/k0/fujvIEVw==",
+			"version": "0.43.0",
+			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.43.0.tgz",
+			"integrity": "sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"eslint-scope": "^8.2.0",
-				"eslint-visitor-keys": "^4.0.0",
-				"espree": "^10.0.0",
-				"postcss": "^8.4.49",
-				"postcss-scss": "^4.0.9",
-				"postcss-selector-parser": "^7.0.0"
+				"eslint-scope": "^7.2.2",
+				"eslint-visitor-keys": "^3.4.3",
+				"espree": "^9.6.1",
+				"postcss": "^8.4.39",
+				"postcss-scss": "^4.0.9"
 			},
 			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/ota-meshi"
@@ -5194,54 +5185,6 @@
 				}
 			}
 		},
-		"node_modules/svelte-eslint-parser/node_modules/eslint-scope": {
-			"version": "8.4.0",
-			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
-			"integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
-			"dev": true,
-			"license": "BSD-2-Clause",
-			"dependencies": {
-				"esrecurse": "^4.3.0",
-				"estraverse": "^5.2.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/svelte-eslint-parser/node_modules/eslint-visitor-keys": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-			"integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/svelte-eslint-parser/node_modules/espree": {
-			"version": "10.4.0",
-			"resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
-			"integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
-			"dev": true,
-			"license": "BSD-2-Clause",
-			"dependencies": {
-				"acorn": "^8.15.0",
-				"acorn-jsx": "^5.3.2",
-				"eslint-visitor-keys": "^4.2.1"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
 		"node_modules/svelte-preprocess": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7b1bc2b770..b8a5d0f3d8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -46,7 +46,7 @@
 		"eslint-import-resolver-typescript": "^3.6.3",
 		"eslint-plugin-import": "^2.30.0",
 		"eslint-plugin-prettier": "^5.2.1",
-		"eslint-plugin-svelte": "^3.9.2",
+		"eslint-plugin-svelte": "^2.46.0",
 		"minimatch": "^10.0.3",
 		"postcss": "^8.4.47",
 		"prettier": "^3.3.3",
diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index e7b104c47f..8dfcf355fb 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -8,4 +8,4 @@ declare global {
 	}
 }
 
-export {};
+export { Graphite };
diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte
index a0ce6e7d82..bb19aec7d2 100644
--- a/frontend/src/components/Editor.svelte
+++ b/frontend/src/components/Editor.svelte
@@ -10,7 +10,7 @@
 	import { createPanicManager } from "@graphite/io-managers/panic";
 	import { createPersistenceManager } from "@graphite/io-managers/persistence";
 	import { createDialogState } from "@graphite/state-providers/dialog";
-	import { createDocumentState } from "@graphite/state-providers/document.svelte";
+
 	import { createFontsState } from "@graphite/state-providers/fonts";
 	import { createFullscreenState } from "@graphite/state-providers/fullscreen";
 	import { createNodeGraphState } from "@graphite/state-providers/node-graph";
@@ -18,12 +18,12 @@
 	import { operatingSystem } from "@graphite/utility-functions/platform";
 
 	import MainWindow from "@graphite/components/window/MainWindow.svelte";
+	import { createDocumentState } from "@graphite/state-providers/document.svelte";
 
-	
-	interface Props {
+	type Props = {
 		// Graphite WASM editor
 		editor: Editor;
-	}
+	};
 
 	let { editor }: Props = $props();
 	setContext("editor", editor);
diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte
index 345de1e5d2..94c9b1d4fa 100644
--- a/frontend/src/components/floating-menus/ColorPicker.svelte
+++ b/frontend/src/components/floating-menus/ColorPicker.svelte
@@ -2,9 +2,7 @@
 	import { onDestroy, getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import type { HSV, RGB, FillChoice } from "@graphite/messages.svelte";
-	import type { MenuDirection } from "@graphite/messages.svelte";
-	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages.svelte";
+
 	import { clamp } from "@graphite/utility-functions/math";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
@@ -17,6 +15,9 @@
 	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages.svelte";
+	import type { MenuDirection } from "@graphite/messages.svelte";
+	import type { HSV, RGB, FillChoice } from "@graphite/messages.svelte";
 
 	type PresetColors = "none" | "black" | "white" | "red" | "yellow" | "green" | "cyan" | "blue" | "magenta";
 
@@ -33,7 +34,7 @@
 	};
 
 	const editor = getContext<Editor>("editor");
-	interface Props {
+	type Props = {
 		colorOrGradient: FillChoice;
 		allowNone?: boolean;
 		// export let allowTransparency = false; // TODO: Implement
@@ -42,16 +43,9 @@
 		open: boolean;
 		oncolorOrGradient?: (colorOrGradient: FillChoice) => void;
 		onstartHistoryTransaction?: () => void;
-	}
+	};
 
-	let {
-		colorOrGradient,
-		allowNone = false,
-		direction = "Bottom",
-		open = $bindable(),
-		oncolorOrGradient,
-		onstartHistoryTransaction,
-	}: Props = $props();
+	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 };
@@ -331,7 +325,7 @@
 	}
 
 	function setColorPreset(preset: PresetColors) {
-		onstartHistoryTransaction?.()
+		onstartHistoryTransaction?.();
 		if (preset === "none") {
 			setNewHSVA(0, 0, 0, 1, true);
 			setColor(new Color("none"));
@@ -409,8 +403,8 @@
 	$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][]);
@@ -421,7 +415,7 @@
 	let transparency = $derived(newColor.alpha < 1 || oldColor.alpha < 1);
 </script>
 
-<FloatingMenu class="color-picker" bind:open={open} {strayCloses} escapeCloses={strayCloses && !gradientSpectrumDragging} {direction} type="Popover" bind:this={self}>
+<FloatingMenu class="color-picker" bind:open {strayCloses} escapeCloses={strayCloses && !gradientSpectrumDragging} {direction} type="Popover" bind:this={self}>
 	<LayoutRow
 		styles={{
 			"--new-color": newColor.toHexOptionalAlpha(),
@@ -464,7 +458,7 @@
 			{#if gradient}
 				<LayoutRow class="gradient">
 					<SpectrumInput
-						gradient={gradient}
+						{gradient}
 						ongradient={(detail) => {
 							gradient = detail;
 							if (gradient) oncolorOrGradient?.(gradient);
@@ -518,7 +512,7 @@
 				<LayoutRow>
 					<TextInput
 						value={newColor.toHexOptionalAlpha() ?? "-"}
-						oncommitText={(detail ) => {
+						oncommitText={(detail) => {
 							onstartHistoryTransaction?.();
 							setColorCode(detail);
 						}}
@@ -532,7 +526,7 @@
 				<TextLabel tooltip="Red/Green/Blue channels of the color, integers 0–255">RGB</TextLabel>
 				<Separator type="Related" />
 				<LayoutRow>
-					{#each rgbChannels as [channel, strength], index}
+					{#each rgbChannels as [channel, _strength], index}
 						{#if index > 0}
 							<Separator type="Related" />
 						{/if}
@@ -557,7 +551,7 @@
 				</TextLabel>
 				<Separator type="Related" />
 				<LayoutRow>
-					{#each hsvChannels as [channel, strength], index}
+					{#each hsvChannels as [channel, _strength], index}
 						{#if index > 0}
 							<Separator type="Related" />
 						{/if}
diff --git a/frontend/src/components/floating-menus/EyedropperPreview.svelte b/frontend/src/components/floating-menus/EyedropperPreview.svelte
index 54c8d95166..aafffbbde3 100644
--- a/frontend/src/components/floating-menus/EyedropperPreview.svelte
+++ b/frontend/src/components/floating-menus/EyedropperPreview.svelte
@@ -16,24 +16,16 @@
 
 	let zoomPreviewCanvas: HTMLCanvasElement | undefined = $state();
 
-	interface Props {
+	type Props = {
 		imageData?: ImageData | undefined;
 		colorChoice: string;
 		primaryColor: string;
 		secondaryColor: string;
 		x: number;
 		y: number;
-	}
-
-	let {
-		imageData = undefined,
-		colorChoice,
-		primaryColor,
-		secondaryColor,
-		x,
-		y
-	}: Props = $props();
+	};
 
+	let { imageData = undefined, colorChoice, primaryColor, secondaryColor, x, y }: Props = $props();
 
 	function displayImageDataPreview(imageData: ImageData | undefined) {
 		if (!zoomPreviewCanvas) return;
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index b4afd45767..c0a182d40b 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { tick, onDestroy, onMount } from "svelte";
 
-	import type { MenuListEntry, MenuDirection } from "@graphite/messages.svelte";
-
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -12,12 +10,13 @@
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
+	import type { MenuListEntry, MenuDirection } from "@graphite/messages.svelte";
 
 	let self: FloatingMenu | undefined = $state();
 	let scroller: LayoutCol | undefined = $state();
 	let searchTextInput: TextInput | undefined = $state();
 
-	interface Props {
+	type Props = {
 		entries: MenuListEntry[][];
 		activeEntry?: MenuListEntry | undefined;
 		open: boolean;
@@ -32,7 +31,7 @@
 		onhoverInEntry?: (entry: MenuListEntry) => void;
 		onnaturalWidth?: (width: number) => void;
 		onactiveEntry?: (activeEntry: MenuListEntry) => void;
-	}
+	};
 
 	let {
 		entries = $bindable(),
@@ -58,7 +57,6 @@
 	let highlighted = $state(activeEntry as MenuListEntry | undefined);
 	let virtualScrollingEntriesStart = $state(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.
 	onMount(async () => {
@@ -125,7 +123,7 @@
 	}
 
 	function watchOpen(value: boolean) {
-		if (open && !inNestedMenuList()) addEventListener("keydown", keydown);
+		if (value && !inNestedMenuList()) addEventListener("keydown", keydown);
 		else if (!inNestedMenuList()) removeEventListener("keydown", keydown);
 
 		highlighted = activeEntry;
@@ -414,18 +412,7 @@
 	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,
-	}
+	export { entries, activeEntry, open, direction, minWidth, drawIcon, interactive, scrollableY, virtualScrollingEntryHeight, tooltip };
 </script>
 
 <FloatingMenu
@@ -493,7 +480,7 @@
 					{#if entry.children}
 						<MenuList
 							{onnaturalWidth}
-							open={entry?.open}
+							open={entry?.open ?? false}
 							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 40ae3ec673..dbc9a3b08d 100644
--- a/frontend/src/components/floating-menus/NodeCatalog.svelte
+++ b/frontend/src/components/floating-menus/NodeCatalog.svelte
@@ -1,23 +1,24 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
 
-	import type { FrontendNodeType } from "@graphite/messages.svelte";
+	import type { WheelEventHandler } from "svelte/elements";
+
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import type { WheelEventHandler } from 'svelte/elements';
+	import type { FrontendNodeType } from "@graphite/messages.svelte";
 
 	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
-	let nodeTypes: FrontendNodeType[] = [ ...$nodeGraph.nodeTypes ];
+	let nodeTypes: FrontendNodeType[] = [...$nodeGraph.nodeTypes];
 
-	interface Props {
+	type Props = {
 		disabled?: boolean;
 		initialSearchTerm?: string;
 		onselectNodeType?: (selectNodeType: string) => void;
 		onwheel?: WheelEventHandler<HTMLDivElement>;
-	}
+	};
 
 	let { disabled = false, initialSearchTerm = "", onselectNodeType, onwheel }: Props = $props();
 
@@ -117,18 +118,20 @@
 
 	$effect.pre(() => {
 		nodeCategories = buildNodeCategories(searchTerm);
-	})
-
+	});
 </script>
 
 <div class="node-catalog">
 	<TextInput placeholder="Search Nodes..." bind:value={searchTerm} bind:this={nodeSearchInput} />
-	<div class="list-results" onwheel={(event) => {
+	<div
+		class="list-results"
+		onwheel={(event) => {
 			// onwheel events are passive by default
 			// https://svelte.dev/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode-Touch-and-wheel-events-are-passive
 			event.stopPropagation();
 			onwheel?.(event);
-		}}>
+		}}
+	>
 		{#each nodeCategories as nodeCategory}
 			<details open={nodeCategory[1].open}>
 				<summary>
diff --git a/frontend/src/components/layout/ConditionalWrapper.svelte b/frontend/src/components/layout/ConditionalWrapper.svelte
index f8679efc6d..c6ba7bac02 100644
--- a/frontend/src/components/layout/ConditionalWrapper.svelte
+++ b/frontend/src/components/layout/ConditionalWrapper.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 
-	interface Props {
+	type Props = {
 		condition: boolean;
 		wrapperClass?: string;
 		children?: Snippet;
-	}
+	};
 
 	let { condition, wrapperClass = "", children }: Props = $props();
 </script>
diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte
index fd152d80b2..00fe3d147c 100644
--- a/frontend/src/components/layout/FloatingMenu.svelte
+++ b/frontend/src/components/layout/FloatingMenu.svelte
@@ -15,23 +15,22 @@
 		}
 	}
 </script>
-<script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
-
 
-	import { onMount, tick } from "svelte";
+<script lang="ts">
+	import { onMount, tick, type Snippet } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
 
-	import type { MenuDirection } from "@graphite/messages.svelte";
 	import { browserVersion } from "@graphite/utility-functions/platform";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import type { MenuDirection } from "@graphite/messages.svelte";
 
 	const BUTTON_LEFT = 0;
 	const POINTER_STRAY_DISTANCE = 100;
 
 	type DivHTMLElementProps = SvelteHTMLElements["div"];
-	
-	interface Props extends DivHTMLElementProps {
+
+	type Props = {
 		class?: string;
 		classes?: Record<string, boolean>;
 		style?: string;
@@ -44,9 +43,9 @@
 		minWidth?: number;
 		escapeCloses?: boolean;
 		strayCloses?: boolean;
-		children?: import('svelte').Snippet;
+		children?: Snippet;
 		onnaturalWidth?: (naturalWidht: number) => void;
-	}
+	} & DivHTMLElementProps;
 
 	let {
 		class: className = "",
@@ -88,8 +87,6 @@
 	let floatingMenuBounds = new DOMRect();
 	let floatingMenuContentBounds = new DOMRect();
 
-
-
 	// Called only when `open` is changed from outside this component
 	async function watchOpenChange(isOpen: boolean) {
 		// Mitigate a Safari rendering bug which clips the floating menu extending beyond a scrollable container.
@@ -167,7 +164,6 @@
 		}
 	});
 
-
 	function resizeObserverCallback(entries: ResizeObserverEntry[]) {
 		minWidthParentWidth = entries[0].contentRect.width;
 	}
@@ -312,7 +308,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
-			open = false
+			open = false;
 		}
 
 		// Clean up any messes from lost pointerup events
@@ -473,20 +469,19 @@
 	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(" "));
+	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}
-	{...rest}
->
+<div class={`floating-menu ${direction.toLowerCase()} ${type.toLowerCase()} ${className} ${extraClasses}`.trim()} style={`${styleName} ${extraStyles}`.trim() || undefined} bind:this={self} {...rest}>
 	{#if displayTail}
 		<div class="tail" bind:this={tail}></div>
 	{/if}
diff --git a/frontend/src/components/layout/LayoutCol.svelte b/frontend/src/components/layout/LayoutCol.svelte
index cf37b6a7ad..27a04063ca 100644
--- a/frontend/src/components/layout/LayoutCol.svelte
+++ b/frontend/src/components/layout/LayoutCol.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
+	import type { Snippet } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
 
 	type DivHTMLElementProps = SvelteHTMLElements["div"];
-	
-	interface Props extends DivHTMLElementProps {
+
+	type Props = {
 		class?: string;
 		classes?: Record<string, boolean>;
 		style?: string;
@@ -12,29 +13,23 @@
 		// TODO: Add middle-click drag scrolling
 		scrollableX?: boolean;
 		scrollableY?: boolean;
-		children?: import('svelte').Snippet;
-	}
+		children?: Snippet;
+	} & DivHTMLElementProps;
 
-	let {
-		class: className = "",
-		classes = {},
-		style: styleName = "",
-		styles = {},
-		tooltip = undefined,
-		scrollableX = false,
-		scrollableY = false,
-		children,
-		...rest
-	}: Props = $props();
+	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(" "));
-	let extraStyles = $derived(Object.entries(styles)
-		.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
-		.join(" "));
+	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(" "),
+	);
 
 	export function div(): HTMLDivElement | undefined {
 		return self;
diff --git a/frontend/src/components/layout/LayoutRow.svelte b/frontend/src/components/layout/LayoutRow.svelte
index 29e59c879d..c3379c9973 100644
--- a/frontend/src/components/layout/LayoutRow.svelte
+++ b/frontend/src/components/layout/LayoutRow.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
+	import type { Snippet } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
 
 	type DivHTMLElementProps = SvelteHTMLElements["div"];
 
-	interface Props extends DivHTMLElementProps {
+	type Props = {
 		class?: string;
 		classes?: Record<string, boolean>;
 		style?: string;
@@ -12,30 +13,23 @@
 		// TODO: Add middle-click drag scrolling
 		scrollableX?: boolean;
 		scrollableY?: boolean;
-		children?: import('svelte').Snippet;
-		[key: string]: any
-	}
+		children?: Snippet;
+	} & DivHTMLElementProps;
 
-	let {
-		class: className = "",
-		classes = {},
-		style: styleName = "",
-		styles = {},
-		tooltip = undefined,
-		scrollableX = false,
-		scrollableY = false,
-		children,
-		...rest
-	}: Props = $props();
+	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(" "));
-	let extraStyles = $derived(Object.entries(styles)
-		.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
-		.join(" "));
+	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(" "),
+	);
 
 	export function div(): HTMLDivElement | undefined {
 		return self;
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index bbf14dbc5a..3b25de1f62 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -2,6 +2,18 @@
 	import { getContext, onMount, tick } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
+
+	import { textInputCleanup } from "@graphite/utility-functions/keyboard-entry";
+	import { extractPixelData, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
+	import { updateBoundsOfViewports } from "@graphite/utility-functions/viewports";
+
+	import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@graphite/components/floating-menus/EyedropperPreview.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import Graph from "@graphite/components/views/Graph.svelte";
+	import RulerInput from "@graphite/components/widgets/inputs/RulerInput.svelte";
+	import ScrollbarInput from "@graphite/components/widgets/inputs/ScrollbarInput.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 	import {
 		type MouseCursorIcon,
 		type XY,
@@ -17,17 +29,6 @@
 		isWidgetSpanRow,
 	} from "@graphite/messages.svelte";
 	import type { DocumentState } from "@graphite/state-providers/document.svelte";
-	import { textInputCleanup } from "@graphite/utility-functions/keyboard-entry";
-	import { extractPixelData, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
-	import { updateBoundsOfViewports } from "@graphite/utility-functions/viewports";
-
-	import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@graphite/components/floating-menus/EyedropperPreview.svelte";
-	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import Graph from "@graphite/components/views/Graph.svelte";
-	import RulerInput from "@graphite/components/widgets/inputs/RulerInput.svelte";
-	import ScrollbarInput from "@graphite/components/widgets/inputs/ScrollbarInput.svelte";
-	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
 	let rulerHorizontal: RulerInput | undefined = $state();
 	let rulerVertical: RulerInput | undefined = $state();
@@ -92,39 +93,41 @@
 	let canvasWidthScaledRoundedToEven = $derived(canvasWidthScaled && (canvasWidthScaled % 2 === 1 ? canvasWidthScaled + 1 : canvasWidthScaled));
 	let canvasHeightScaledRoundedToEven = $derived(canvasHeightScaled && (canvasHeightScaled % 2 === 1 ? canvasHeightScaled + 1 : canvasHeightScaled));
 
-	let toolShelfTotalToolsAndSeparators = $derived(((layoutGroup) => {
-		if (!isWidgetSpanRow(layoutGroup)) return undefined;
-
-		let totalSeparators = 0;
-		let totalToolRowsFor1Columns = 0;
-		let totalToolRowsFor2Columns = 0;
-		let totalToolRowsFor3Columns = 0;
-
-		const tally = () => {
-			totalToolRowsFor1Columns += toolsInCurrentGroup;
-			totalToolRowsFor2Columns += Math.ceil(toolsInCurrentGroup / 2);
-			totalToolRowsFor3Columns += Math.ceil(toolsInCurrentGroup / 3);
-			toolsInCurrentGroup = 0;
-		};
-
-		let toolsInCurrentGroup = 0;
-		layoutGroup.rowWidgets.forEach((widget) => {
-			if (widget.props.kind === "Separator") {
-				totalSeparators += 1;
-				tally();
-			} else {
-				toolsInCurrentGroup += 1;
-			}
-		});
-		tally();
-
-		return {
-			totalSeparators,
-			totalToolRowsFor1Columns,
-			totalToolRowsFor2Columns,
-			totalToolRowsFor3Columns,
-		};
-	})(document.toolShelfLayout.layout[0]));
+	let toolShelfTotalToolsAndSeparators = $derived(
+		((layoutGroup) => {
+			if (!isWidgetSpanRow(layoutGroup)) return undefined;
+
+			let totalSeparators = 0;
+			let totalToolRowsFor1Columns = 0;
+			let totalToolRowsFor2Columns = 0;
+			let totalToolRowsFor3Columns = 0;
+
+			const tally = () => {
+				totalToolRowsFor1Columns += toolsInCurrentGroup;
+				totalToolRowsFor2Columns += Math.ceil(toolsInCurrentGroup / 2);
+				totalToolRowsFor3Columns += Math.ceil(toolsInCurrentGroup / 3);
+				toolsInCurrentGroup = 0;
+			};
+
+			let toolsInCurrentGroup = 0;
+			layoutGroup.rowWidgets.forEach((widget) => {
+				if (widget.props.kind === "Separator") {
+					totalSeparators += 1;
+					tally();
+				} else {
+					toolsInCurrentGroup += 1;
+				}
+			});
+			tally();
+
+			return {
+				totalSeparators,
+				totalToolRowsFor1Columns,
+				totalToolRowsFor2Columns,
+				totalToolRowsFor3Columns,
+			};
+		})(document.toolShelfLayout.layout[0]),
+	);
 
 	function dropFile(e: DragEvent) {
 		const { dataTransfer } = e;
diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index cae2e7821e..d84b57c300 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -3,20 +3,10 @@
 
 	import type { Editor } from "@graphite/editor";
 	import { beginDraggingElement } from "@graphite/io-managers/drag";
-	import {
-		defaultWidgetLayout,
-		patchWidgetLayout,
-		UpdateDocumentLayerDetails,
-		UpdateDocumentLayerStructureJs,
-		UpdateLayersPanelControlBarLeftLayout,
-		UpdateLayersPanelControlBarRightLayout,
-		UpdateLayersPanelBottomBarLayout,
-	} from "@graphite/messages.svelte";
-	import type { DataBuffer, LayerPanelEntry } from "@graphite/messages.svelte";
+
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 	import { platformIsMac } from "@graphite/utility-functions/platform";
 	import { extractPixelData } from "@graphite/utility-functions/rasterization";
-	import type { WidgetLayout as WidgetLayoutState } from "@graphite/messages.svelte";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -24,6 +14,17 @@
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
+	import type { WidgetLayout as WidgetLayoutState } from "@graphite/messages.svelte";
+	import type { DataBuffer, LayerPanelEntry } from "@graphite/messages.svelte";
+	import {
+		defaultWidgetLayout,
+		patchWidgetLayout,
+		UpdateDocumentLayerDetails,
+		UpdateDocumentLayerStructureJs,
+		UpdateLayersPanelControlBarLeftLayout,
+		UpdateLayersPanelControlBarRightLayout,
+		UpdateLayersPanelBottomBarLayout,
+	} from "@graphite/messages.svelte";
 
 	type LayerListingInfo = {
 		folderIndex: number;
@@ -554,8 +555,8 @@
 							disabled={!listing.editingName}
 							onblur={() => onEditLayerNameDeselect(listing)}
 							onkeydown={(e) => {
-								e.key === "Escape" && onEditLayerNameDeselect(listing);
-								e.key === "Enter" && onEditLayerNameChange(listing, e);
+								if (e.key === "Escape") onEditLayerNameDeselect(listing);
+								if (e.key === "Enter") onEditLayerNameChange(listing, e);
 							}}
 							onchange={(e) => onEditLayerNameChange(listing, e)}
 						/>
diff --git a/frontend/src/components/panels/Properties.svelte b/frontend/src/components/panels/Properties.svelte
index 1123152e2b..738b330a57 100644
--- a/frontend/src/components/panels/Properties.svelte
+++ b/frontend/src/components/panels/Properties.svelte
@@ -2,13 +2,11 @@
 	import { getContext, onMount } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelSectionsLayout } from "@graphite/messages.svelte";
-	import type { WidgetLayout as WidgetLayoutState } from "@graphite/messages.svelte";
-
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
-
+	import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelSectionsLayout } from "@graphite/messages.svelte";
+	import type { WidgetLayout as WidgetLayoutState } from "@graphite/messages.svelte";
 
 	const editor = getContext<Editor>("editor");
 
diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte
index 74f5ff2543..ff4a15dcb7 100644
--- a/frontend/src/components/views/Graph.svelte
+++ b/frontend/src/components/views/Graph.svelte
@@ -4,8 +4,7 @@
 	import { fade } from "svelte/transition";
 
 	import type { Editor } from "@graphite/editor";
-	import type { Node } from "@graphite/messages.svelte";
-	import { type FrontendNode, type FrontendGraphInput, FrontendGraphOutput, } from "@graphite/messages.svelte";
+
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 	import type { IconName } from "@graphite/utility-functions/icons";
 
@@ -18,6 +17,8 @@
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import { type FrontendNode, type FrontendGraphInput, FrontendGraphOutput } from "@graphite/messages.svelte";
+	import type { Node } from "@graphite/messages.svelte";
 
 	const GRID_COLLAPSE_SPACING = 10;
 	const GRID_SIZE = 24;
@@ -28,10 +29,9 @@
 
 	let graph: HTMLDivElement | undefined = $state();
 
-
-	let inputElement  = $state<HTMLInputElement>();
+	let inputElement = $state<HTMLInputElement>();
 	let hoveringImportIndex = $state<number>();
-	let hoveringExportIndex = $state<number>()
+	let hoveringExportIndex = $state<number>();
 
 	let editingNameImportIndex = $state<number>();
 	let editingNameExportIndex = $state<number>();
@@ -340,43 +340,43 @@
 
 	<!-- Import and Export ports -->
 	<div class="imports-and-exports" style:transform-origin={`0 0`} style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
- 		{#each $nodeGraph.imports as { outputMetadata, position }, index}
+		{#each $nodeGraph.imports as { outputMetadata, position }, index}
 			{@render port("port", "output", outputMetadata, position.x / 24, position.y / 24)}
- 			<div
- 				class="edit-import-export import"
- 				onpointerenter={() => (hoveringImportIndex = index)}
- 				onpointerleave={() => (hoveringImportIndex = undefined)}
- 				style:--offset-left={position.x / 24}
- 				style:--offset-top={position.y / 24}
- 			>
- 				{#if editingNameImportIndex == index}
- 					<input
- 						class="import-text-input"
- 						type="text"
- 						style:width={importsToEdgeTextInputWidth()}
- 						bind:this={inputElement}
- 						bind:value={editingNameText}
- 						onblur={setEditingImportName}
- 						onkeydown={(e) => e.key === "Enter" && setEditingImportName(e)}
- 					/>
- 				{:else}
- 					<p class="import-text" ondblclick={() => setEditingImportNameIndex(index, outputMetadata.name)}>{outputMetadata.name}</p>
- 				{/if}
- 				{#if hoveringImportIndex === index || editingNameImportIndex === index}
- 					<IconButton
- 						size={16}
- 						icon={"Remove"}
- 						class="remove-button-import"
- 						data-index={index}
- 						data-import-text-edge
- 						onclick={() => {
- 							/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
- 						}}
- 					/>
- 					<div class="reorder-drag-grip" title="Reorder this import"></div>
- 				{/if}
- 			</div>
- 		{/each}
+			<div
+				class="edit-import-export import"
+				onpointerenter={() => (hoveringImportIndex = index)}
+				onpointerleave={() => (hoveringImportIndex = undefined)}
+				style:--offset-left={position.x / 24}
+				style:--offset-top={position.y / 24}
+			>
+				{#if editingNameImportIndex == index}
+					<input
+						class="import-text-input"
+						type="text"
+						style:width={importsToEdgeTextInputWidth()}
+						bind:this={inputElement}
+						bind:value={editingNameText}
+						onblur={setEditingImportName}
+						onkeydown={(e) => e.key === "Enter" && setEditingImportName(e)}
+					/>
+				{:else}
+					<p class="import-text" ondblclick={() => setEditingImportNameIndex(index, outputMetadata.name)}>{outputMetadata.name}</p>
+				{/if}
+				{#if hoveringImportIndex === index || editingNameImportIndex === index}
+					<IconButton
+						size={16}
+						icon={"Remove"}
+						class="remove-button-import"
+						data-index={index}
+						data-import-text-edge
+						onclick={() => {
+							/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
+						}}
+					/>
+					<div class="reorder-drag-grip" title="Reorder this import"></div>
+				{/if}
+			</div>
+		{/each}
 
 		{#if $nodeGraph.reorderImportIndex !== undefined}
 			{@const position = {
@@ -650,7 +650,7 @@
 				<!-- Output ports -->
 				<div class="output ports">
 					{@render port("port primary-port", "output", node.primaryOutput)}
-					{#each node.exposedOutputs as secondary, outputIndex}
+					{#each node.exposedOutputs as secondary}
 						{@render port("port", "output", secondary)}
 					{/each}
 				</div>
@@ -684,7 +684,7 @@
 {#snippet port(className: string, dataPort: string, node?: FrontendGraphInput | FrontendGraphOutput, offsetLeft?: number, offsetTop?: number)}
 	{#if node}
 		{@const color = node.dataType.toLowerCase()}
-    <svg
+		<svg
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 8 8"
 			class={className}
@@ -694,7 +694,7 @@
 			style:--data-color-dim={`var(--color-data-${color}-dim)`}
 			style:--offset-left={offsetLeft}
 			style:--offset-top={offsetTop}
-			>
+		>
 			{#if node instanceof FrontendGraphOutput}
 				<title>{`${dataTypeTooltip(node)}\n\n${outputConnectedToText(node)}`}</title>
 			{:else}
diff --git a/frontend/src/components/widgets/WidgetLayout.svelte b/frontend/src/components/widgets/WidgetLayout.svelte
index f751aa9e47..cb147772e7 100644
--- a/frontend/src/components/widgets/WidgetLayout.svelte
+++ b/frontend/src/components/widgets/WidgetLayout.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
-	import { isWidgetSpanColumn, isWidgetSpanRow, isWidgetSection, type WidgetLayout, isWidgetTable } from "@graphite/messages.svelte";
-
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import WidgetSection from "@graphite/components/widgets/WidgetSection.svelte";
 	import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
 	import WidgetTable from "@graphite/components/widgets/WidgetTable.svelte";
+	import { isWidgetSpanColumn, isWidgetSpanRow, isWidgetSection, type WidgetLayout, isWidgetTable } from "@graphite/messages.svelte";
 
-	
-	interface Props {
+	type Props = {
 		layout: WidgetLayout;
 		class?: string;
 		classes?: Record<string, boolean>;
-	}
+	};
 
 	let { layout, class: className = "", classes = {} }: Props = $props();
 </script>
diff --git a/frontend/src/components/widgets/WidgetSection.svelte b/frontend/src/components/widgets/WidgetSection.svelte
index 1cb5a9fa62..f03f811e1c 100644
--- a/frontend/src/components/widgets/WidgetSection.svelte
+++ b/frontend/src/components/widgets/WidgetSection.svelte
@@ -1,33 +1,24 @@
 <script lang="ts">
-	import WidgetSection from './WidgetSection.svelte';
-
 	import { getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { isWidgetSpanRow, isWidgetSpanColumn, isWidgetSection, type WidgetSection as WidgetSectionFromJsMessages } from "@graphite/messages.svelte";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import WidgetSection from "@graphite/components/widgets/WidgetSection.svelte";
 	import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
+	import { isWidgetSpanRow, isWidgetSpanColumn, isWidgetSection, type WidgetSection as WidgetSectionFromJsMessages } from "@graphite/messages.svelte";
 
-	
-
-	
-	interface Props {
+	type Props = {
 		widgetData: WidgetSectionFromJsMessages;
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		layoutTarget: any; // TODO: Give type
 		class?: string;
 		classes?: Record<string, boolean>;
-	}
+	};
 
-	let {
-		widgetData,
-		layoutTarget,
-		class: className = "",
-		classes = {}
-	}: Props = $props();
+	let { widgetData, layoutTarget, class: className = "", classes = {} }: Props = $props();
 
 	let expanded = $state(true);
 
@@ -36,10 +27,15 @@
 
 <!-- TODO: Implement collapsable sections with properties system -->
 <LayoutCol class={`widget-section ${className}`.trim()} {classes}>
-	<button class="header" class:expanded onclick={(event) => {
-		event.stopPropagation();
-		expanded = !expanded;
-	}} tabindex="0">
+	<button
+		class="header"
+		class:expanded
+		onclick={(event) => {
+			event.stopPropagation();
+			expanded = !expanded;
+		}}
+		tabindex="0"
+	>
 		<div class="expand-arrow"></div>
 		<TextLabel tooltip={widgetData.description} bold={true}>{widgetData.name}</TextLabel>
 		<IconButton
diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index 1560546e5c..11b8f33bbd 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -2,8 +2,7 @@
 	import { getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import type { Widget, WidgetSpanColumn, WidgetSpanRow } from "@graphite/messages.svelte";
-	import { narrowWidgetProps, isWidgetSpanColumn, isWidgetSpanRow } from "@graphite/messages.svelte";
+
 	import { debouncer } from "@graphite/utility-functions/debounce";
 
 	import NodeCatalog from "@graphite/components/floating-menus/NodeCatalog.svelte";
@@ -28,23 +27,20 @@
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
+	import { narrowWidgetProps, isWidgetSpanColumn, isWidgetSpanRow } from "@graphite/messages.svelte";
+	import type { Widget, WidgetSpanColumn, WidgetSpanRow } from "@graphite/messages.svelte";
 
 	const editor = getContext<Editor>("editor");
-	
-	interface Props {
+
+	type Props = {
 		widgetData: WidgetSpanRow | WidgetSpanColumn;
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		layoutTarget: any;
 		class?: string;
 		classes?: Record<string, boolean>;
-	}
+	};
 
-	let {
-		widgetData,
-		layoutTarget,
-		class: className = "",
-		classes = {}
-	}: Props = $props();
+	let { widgetData, layoutTarget, class: className = "", classes = {} }: Props = $props();
 
 	function watchDirection(widgetData: WidgetSpanRow | WidgetSpanColumn): "row" | "column" | undefined {
 		if (isWidgetSpanRow(widgetData)) return "row";
@@ -77,9 +73,11 @@
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		return Object.fromEntries(Object.entries(props).filter((entry) => !exclusions.includes(entry[0]))) as any;
 	}
-	let extraClasses = $derived(Object.entries(classes)
-		.flatMap(([className, stateName]) => (stateName ? [className] : []))
-		.join(" "));
+	let extraClasses = $derived(
+		Object.entries(classes)
+			.flatMap(([className, stateName]) => (stateName ? [className] : []))
+			.join(" "),
+	);
 
 	let direction = $derived(watchDirection(widgetData));
 	let widgets = $derived(watchWidgets(widgetData));
diff --git a/frontend/src/components/widgets/WidgetTable.svelte b/frontend/src/components/widgets/WidgetTable.svelte
index c74c5a98a3..ad3c3bbc2c 100644
--- a/frontend/src/components/widgets/WidgetTable.svelte
+++ b/frontend/src/components/widgets/WidgetTable.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-	import { type WidgetTable as WidgetTableFromJsMessages } from "@graphite/messages.svelte";
-
 	import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
+	import { type WidgetTable as WidgetTableFromJsMessages } from "@graphite/messages.svelte";
 
-	
-	interface Props {
+	type Props = {
 		widgetData: WidgetTableFromJsMessages;
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		layoutTarget: any; // TODO: Give this a real type
-	}
+	};
 
 	let { widgetData, layoutTarget }: Props = $props();
 </script>
diff --git a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
index da3be40f25..a67fbfc24e 100644
--- a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
+++ b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
@@ -2,20 +2,15 @@
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 
-	interface Props {
+	type Props = {
 		labels: string[];
 		disabled?: boolean;
 		tooltip?: string | undefined;
 		// Callbacks
 		onclick: (index: number) => void;
-	}
+	};
 
-	let {
-		labels,
-		disabled = false,
-		tooltip = undefined,
-		onclick
-	}: Props = $props();
+	let { labels, disabled = false, tooltip = undefined, onclick }: 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 efe69bb4dc..3fe4934e1b 100644
--- a/frontend/src/components/widgets/buttons/IconButton.svelte
+++ b/frontend/src/components/widgets/buttons/IconButton.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
+	import type { SvelteHTMLElements } from "svelte/elements";
+
 	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";
 
 	type ButtonHTMLElementProps = SvelteHTMLElements["button"];
-	
-	interface Props extends ButtonHTMLElementProps {
+
+	type Props = {
 		class?: string;
 		classes?: Record<string, boolean>;
 		icon: IconName;
@@ -15,23 +16,15 @@
 		disabled?: boolean;
 		active?: boolean;
 		tooltip?: string | undefined;
-	}
+	} & ButtonHTMLElementProps;
+
+	let { class: className = "", classes = {}, icon, hoverIcon = undefined, size, disabled = false, active = false, tooltip = undefined, ...rest }: Props = $props();
 
-	let {
-		class: className = "",
-		classes = {},
-		icon,
-		hoverIcon = undefined,
-		size,
-		disabled = false,
-		active = false,
-		tooltip = undefined,
-		...rest
-	}: Props = $props();
-
-	let extraClasses = $derived(Object.entries(classes)
-		.flatMap(([className, stateName]) => (stateName ? [className] : []))
-		.join(" "));
+	let extraClasses = $derived(
+		Object.entries(classes)
+			.flatMap(([className, stateName]) => (stateName ? [className] : []))
+			.join(" "),
+	);
 </script>
 
 <button
diff --git a/frontend/src/components/widgets/buttons/ImageButton.svelte b/frontend/src/components/widgets/buttons/ImageButton.svelte
index 90e5c8bc92..80bdcb883a 100644
--- a/frontend/src/components/widgets/buttons/ImageButton.svelte
+++ b/frontend/src/components/widgets/buttons/ImageButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { IMAGE_BASE64_STRINGS } from "@graphite/utility-functions/images";
 
-	interface Props {
+	type Props = {
 		class?: string;
 		classes?: Record<string, boolean>;
 		image: string;
@@ -10,21 +10,15 @@
 		tooltip?: string | undefined;
 		// Callbacks
 		action: (e?: MouseEvent) => void;
-	}
+	};
 
-	let {
-		class: className = "",
-		classes = {},
-		image,
-		width,
-		height,
-		tooltip = undefined,
-		action
-	}: Props = $props();
+	let { class: className = "", classes = {}, image, width, height, tooltip = undefined, action }: Props = $props();
 
-	let extraClasses = $derived(Object.entries(classes)
-		.flatMap(([className, stateName]) => (stateName ? [className] : []))
-		.join(" "));
+	let extraClasses = $derived(
+		Object.entries(classes)
+			.flatMap(([className, stateName]) => (stateName ? [className] : []))
+			.join(" "),
+	);
 </script>
 
 <img src={IMAGE_BASE64_STRINGS[image]} style:width style:height class={`image-label ${className} ${extraClasses}`.trim()} title={tooltip} alt="" onclick={action} />
diff --git a/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte b/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
index fc99516271..3488ebfb55 100644
--- a/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
+++ b/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
@@ -1,22 +1,16 @@
 <script lang="ts">
-	import type { FrontendGraphDataType } from "@graphite/messages.svelte";
-
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import type { FrontendGraphDataType } from "@graphite/messages.svelte";
 
-	interface Props {
+	type Props = {
 		exposed: boolean;
 		dataType: FrontendGraphDataType;
 		tooltip?: string | undefined;
 		// Callbacks
 		action: (e?: MouseEvent) => void;
-	}
+	};
 
-	let {
-		exposed,
-		dataType,
-		tooltip = undefined,
-		action
-	}: Props = $props();
+	let { exposed, dataType, tooltip = undefined, action }: Props = $props();
 </script>
 
 <LayoutRow class="parameter-expose-button">
diff --git a/frontend/src/components/widgets/buttons/PopoverButton.svelte b/frontend/src/components/widgets/buttons/PopoverButton.svelte
index 911dfc6164..daaa3db4ea 100644
--- a/frontend/src/components/widgets/buttons/PopoverButton.svelte
+++ b/frontend/src/components/widgets/buttons/PopoverButton.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
-	import type { MenuDirection } from "@graphite/messages.svelte";
+	import type { Snippet } from "svelte";
+
 	import { type IconName, type PopoverButtonStyle } from "@graphite/utility-functions/icons";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import type { MenuDirection } from "@graphite/messages.svelte";
 
-	interface Props {
+	type Props = {
 		style?: PopoverButtonStyle;
 		menuDirection?: MenuDirection;
 		icon?: IconName | undefined;
@@ -16,19 +18,10 @@
 		popoverMinWidth?: number;
 		// Callbacks
 		action?: (() => void) | undefined;
-		children?: import('svelte').Snippet;
-	}
+		children?: Snippet;
+	};
 
-	let {
-		style = "DropdownArrow",
-		menuDirection = "Bottom",
-		icon = undefined,
-		tooltip = undefined,
-		disabled = false,
-		popoverMinWidth = 1,
-		action = undefined,
-		children
-	}: Props = $props();
+	let { style = "DropdownArrow", menuDirection = "Bottom", icon = undefined, tooltip = undefined, disabled = false, popoverMinWidth = 1, action = undefined, children }: Props = $props();
 
 	let open = $state(false);
 
diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
index 7ac816b262..34ca2c67b6 100644
--- a/frontend/src/components/widgets/buttons/TextButton.svelte
+++ b/frontend/src/components/widgets/buttons/TextButton.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
-	import type { MenuListEntry } from "@graphite/messages.svelte";
+	import type { MouseEventHandler } from "svelte/elements";
+
 	import type { IconName } from "@graphite/utility-functions/icons";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import ConditionalWrapper from "@graphite/components/layout/ConditionalWrapper.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import type { MouseEventHandler } from "svelte/elements";
+	import type { MenuListEntry } from "@graphite/messages.svelte";
 
 	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.
-	interface Props {
+	type Props = {
 		label: string;
 		icon?: IconName | undefined;
 		hoverIcon?: IconName | undefined;
@@ -23,7 +24,7 @@
 		tooltip?: string | undefined;
 		menuListChildren?: MenuListEntry[][] | undefined;
 		onclick: MouseEventHandler<HTMLButtonElement>;
-	}
+	};
 
 	let {
 		label,
@@ -41,7 +42,7 @@
 	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 & { currentTarget: EventTarget & HTMLButtonElement; }) {
+	function onClick(e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
 		// If there's no menu to open, trigger the action
 		if ((menuListChildren?.length ?? 0) === 0) {
 			// Call the action
@@ -63,7 +64,7 @@
 <ConditionalWrapper condition={menuListChildrenExists} wrapperClass="text-button-container">
 	<button
 		class="text-button"
-		class:open={open}
+		class:open
 		class:hover-icon={hoverIcon && !disabled}
 		class:emphasized
 		class:disabled
@@ -88,14 +89,7 @@
 		{/if}
 	</button>
 	{#if menuListChildrenExists}
-		<MenuList
-			bind:open={open}
-			entries={menuListChildren}
-			direction="Bottom"
-			minWidth={240}
-			drawIcon={true}
-			bind:this={self}
-		/>
+		<MenuList bind:open entries={menuListChildren} direction="Bottom" minWidth={240} drawIcon={true} bind:this={self} />
 	{/if}
 </ConditionalWrapper>
 
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.svelte b/frontend/src/components/widgets/inputs/CheckboxInput.svelte
index 0964f6a653..ed17c65788 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.svelte
+++ b/frontend/src/components/widgets/inputs/CheckboxInput.svelte
@@ -4,24 +4,16 @@
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
-
-	interface Props {
+	type 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 { checked = false, disabled = false, icon = "Checkmark", tooltip = undefined, forLabel = undefined, onchecked }: Props = $props();
 
 	let inputElement: HTMLInputElement | undefined = $state();
 
@@ -46,15 +38,7 @@
 </script>
 
 <LayoutRow class="checkbox-input">
-	<input
-		type="checkbox"
-		id={`checkbox-input-${id}`}
-		bind:checked
-		onchange={(_) => onchecked?.(inputElement?.checked ?? false)}
-		{disabled}
-		tabindex={disabled ? -1 : 0}
-		bind:this={inputElement}
-	/>
+	<input type="checkbox" id={`checkbox-input-${id}`} bind:checked onchange={(_) => onchecked?.(inputElement?.checked ?? false)} {disabled} tabindex={disabled ? -1 : 0} bind:this={inputElement} />
 	<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} />
diff --git a/frontend/src/components/widgets/inputs/ColorInput.svelte b/frontend/src/components/widgets/inputs/ColorInput.svelte
index 9bb7b0d09a..63858ad867 100644
--- a/frontend/src/components/widgets/inputs/ColorInput.svelte
+++ b/frontend/src/components/widgets/inputs/ColorInput.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
-	import type { FillChoice } from "@graphite/messages.svelte";
-	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages.svelte";
-
 	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages.svelte";
+	import type { FillChoice } from "@graphite/messages.svelte";
 
 	let open = $state(false);
 
-	interface Props {
+	type Props = {
 		value: FillChoice;
 		disabled?: boolean;
 		allowNone?: boolean;
@@ -16,23 +15,15 @@
 		tooltip?: string | undefined;
 		onvalue?: (value: FillChoice) => void;
 		onstartHistoryTransaction?: () => void;
-	}
+	};
 
-	let {
-		value,
-		disabled = false,
-		allowNone = false,
-		tooltip = undefined,
-		onvalue,
-		onstartHistoryTransaction,
-	}: Props = $props();
+	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);
-
 </script>
 
 <LayoutCol class="color-button" classes={{ open, disabled, none, transparency, outlined }} {tooltip}>
@@ -48,7 +39,7 @@
 		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>
-			onstartHistoryTransaction?.()
+			onstartHistoryTransaction?.();
 		}}
 		{allowNone}
 	/>
diff --git a/frontend/src/components/widgets/inputs/CurveInput.svelte b/frontend/src/components/widgets/inputs/CurveInput.svelte
index 265c454dde..f496d3a947 100644
--- a/frontend/src/components/widgets/inputs/CurveInput.svelte
+++ b/frontend/src/components/widgets/inputs/CurveInput.svelte
@@ -1,30 +1,23 @@
 <script lang="ts">
-	import type { Curve, CurveManipulatorGroup } from "@graphite/messages.svelte";
+	import type { Snippet } from "svelte";
+
 	import { clamp } from "@graphite/utility-functions/math";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	
-	interface Props {
+	import type { Curve, CurveManipulatorGroup } from "@graphite/messages.svelte";
+
+	type Props = {
 		classes?: Record<string, boolean>;
 		style?: string;
 		styles?: Record<string, string | number | undefined>;
 		value: Curve;
 		disabled?: boolean;
 		tooltip?: string | undefined;
-		children?: import('svelte').Snippet;
+		children?: Snippet;
 		onvalue?: (curve: Curve) => void;
-	}
+	};
 
-	let {
-		classes = {},
-		style: styleName = "",
-		styles = {},
-		value,
-		disabled = false,
-		tooltip = undefined,
-		children,
-		onvalue,
-	}: Props = $props();
+	let { classes = {}, style: styleName = "", styles = {}, value, disabled = false, tooltip = undefined, children, onvalue }: Props = $props();
 
 	const GRID_SIZE = 4;
 
@@ -55,7 +48,6 @@
 	let draggedNodeIndex: number | undefined = undefined;
 	let dAttribute = $state(recalculateSvgPath());
 
-
 	function updateCurve() {
 		onvalue?.({
 			manipulatorGroups: groups.slice(1, groups.length - 1),
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 25d4007b47..a43b54da59 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
-	import type { MenuListEntry } from "@graphite/messages.svelte";
-
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import type { MenuListEntry } from "@graphite/messages.svelte";
 
 	const DASH_ENTRY = { value: "", label: "-" };
 
 	let menuList: MenuList | undefined = $state();
 	let self: LayoutRow | undefined = $state();
 
-	interface Props {
+	type Props = {
 		entries: MenuListEntry[][];
 		selectedIndex?: number | undefined; // When not provided, a dash is displayed
 		drawIcon?: boolean;
@@ -20,10 +19,10 @@
 		tooltip?: string | undefined;
 		minWidth?: number;
 		maxWidth?: number;
-		onhoverOutEntry?: (index: number) => void; 
+		onhoverOutEntry?: (index: number) => void;
 		onhoverInEntry?: (index: number) => void;
 		onselectedIndex?: (index: number) => void;
-	}
+	};
 
 	let {
 		entries,
@@ -55,13 +54,13 @@
 	}
 
 	// Called only when `entries` is changed from outside this component
-	function watchEntries(_?: typeof entries) {
-		activeEntrySkipWatcher = true;
-		activeEntry = makeActiveEntry();
-	}
+	// function watchEntries(_?: typeof entries) {
+	// 	activeEntrySkipWatcher = true;
+	// 	activeEntry = makeActiveEntry();
+	// }
 
 	function getEntryIndex(entry: MenuListEntry): number {
-		return entries.flat().findIndex(item => item.value === entry.value);
+		return entries.flat().findIndex((item) => item.value === entry.value);
 	}
 
 	// Called when the `activeEntry` two-way binding on this component's MenuList component is changed, or by the `selectedIndex()` watcher above (but we want to skip that case)
diff --git a/frontend/src/components/widgets/inputs/FieldInput.svelte b/frontend/src/components/widgets/inputs/FieldInput.svelte
index 00ac96b256..199e2ac459 100644
--- a/frontend/src/components/widgets/inputs/FieldInput.svelte
+++ b/frontend/src/components/widgets/inputs/FieldInput.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+
 	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';
 
 	type InputHTMLElementProps = SvelteHTMLElements["input"];
 	type TextAreaHTMLElementProps = SvelteHTMLElements["textarea"];
@@ -21,20 +23,19 @@
 		tooltip?: string | undefined;
 		placeholder?: string | undefined;
 		hideContextMenu?: boolean;
-		children?: import('svelte').Snippet;
+		children?: 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;
+		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;
-	}
+	};
 
-	type Props = CommonProps & (
-		CommonProps['textarea'] extends true
+	type Props = CommonProps &
+		(CommonProps["textarea"] extends true
 			? TextAreaHTMLElementProps // If 'textarea' is explicitly true
-			: InputHTMLElementProps    // Otherwise (false, undefined, or missing)
-	);
+			: InputHTMLElementProps); // Otherwise (false, undefined, or missing)
 
 	let {
 		class: className = "",
@@ -97,9 +98,22 @@
 		if (inputOrTextarea) preventEscapeClosingParentFloatingMenu(inputOrTextarea);
 	}
 
-	function onkeydown(e: KeyboardEvent) {
-		e.key === "Enter" && onchange?.(e);
-		e.key === "Escape" && cancel();
+	function onkeydownInput(e: KeyboardEvent & { currentTarget: HTMLInputElement }) {
+		if (e.key === "Enter") {
+			onchange?.(e);
+		}
+		if (e.key === "Escape") {
+			cancel();
+		}
+	}
+
+	function onkeydownTextArea(e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {
+		if ((macKeyboardLayout ? e.metaKey : e.ctrlKey) && e.key === "Enter") {
+			onchange?.(e);
+		}
+		if (e.key === "Escape") {
+			cancel();
+		}
 	}
 </script>
 
@@ -114,12 +128,12 @@
 			{disabled}
 			{placeholder}
 			bind:this={inputOrTextarea}
-			bind:value={value}
-			onfocus={onfocus}
+			bind:value
+			{onfocus}
 			onblur={onchange}
-			onchange={onchange}
-			onkeydown={onkeydown}
-			onpointerdown={onpointerdown}
+			{onchange}
+			onkeydown={onkeydownInput}
+			{onpointerdown}
 			oncontextmenu={(e) => hideContextMenu && e.preventDefault()}
 			data-input-element
 		/>
@@ -132,17 +146,17 @@
 			{spellcheck}
 			{disabled}
 			bind:this={inputOrTextarea}
-			bind:value={value}
-			onfocus={onfocus}
+			bind:value
+			{onfocus}
 			onblur={onchange}
-			onchange={onchange}
-			onkeydown={onkeydown}
-			onpointerdown={onpointerdown}
+			{onchange}
+			onkeydown={onkeydownTextArea}
+			{onpointerdown}
 			oncontextmenu={(e) => hideContextMenu && e.preventDefault()}
 		></textarea>
 	{/if}
 	{#if label}
-		<label for={`field-input-${id}`} onpointerdown={onpointerdown}>{label}</label>
+		<label for={`field-input-${id}`} {onpointerdown}>{label}</label>
 	{/if}
 	{@render children?.()}
 </LayoutRow>
diff --git a/frontend/src/components/widgets/inputs/FontInput.svelte b/frontend/src/components/widgets/inputs/FontInput.svelte
index 11d18a4d38..c5199c4aaf 100644
--- a/frontend/src/components/widgets/inputs/FontInput.svelte
+++ b/frontend/src/components/widgets/inputs/FontInput.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
 	import { getContext, onMount, tick } from "svelte";
 
-	import type { MenuListEntry } from "@graphite/messages.svelte";
 	import type { FontsState } from "@graphite/state-providers/fonts";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import type { MenuListEntry } from "@graphite/messages.svelte";
 
 	const fonts = getContext<FontsState>("fonts");
 
 	let menuList: MenuList | undefined = $state();
 
-	interface Props {
+	type Props = {
 		fontFamily: string;
 		fontStyle: string;
 		isStyle?: boolean;
@@ -22,25 +22,15 @@
 		onchangeFont?: (arg1: { fontFamily: string; fontStyle: string; fontFileUrl: string | undefined }) => void;
 		onfontFamily?: (fontFamily: string) => void;
 		onfontStyle?: (fontStyle: string) => void;
-	}
+	};
 
-	let {
-		fontFamily,
-		fontStyle,
-		isStyle = false,
-		disabled = false,
-		tooltip = undefined,
-		onchangeFont,
-		onfontFamily,
-		onfontStyle,
-	}: Props = $props();
+	let { fontFamily, fontStyle, isStyle = false, disabled = false, tooltip = undefined, onchangeFont, onfontFamily, onfontStyle }: Props = $props();
 
 	let open = $state(false);
 	let entries: MenuListEntry[] = $state([]);
 	let activeEntry: MenuListEntry | undefined = $state(undefined);
 	let minWidth = $state(isStyle ? 0 : 300);
 
-
 	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
 		const newEntries = await getEntries();
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index 9a8093d01c..7d75ca15df 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 
+	import type { MouseEventHandler } from "svelte/elements";
+
 	import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS } from "@graphite/io-managers/input";
-	import { type NumberInputMode, type NumberInputIncrementBehavior } from "@graphite/messages.svelte";
+
 	import { evaluateMathExpression } from "@graphite-frontend/wasm/pkg/graphite_wasm.js";
 
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
 	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
-	import type { MouseEventHandler } from 'svelte/elements';
+	import { type NumberInputMode, type NumberInputIncrementBehavior } from "@graphite/messages.svelte";
 
 	const BUTTONS_LEFT = 0b0000_0001;
 	const BUTTONS_RIGHT = 0b0000_0010;
 	const BUTTON_LEFT = 0;
 	const BUTTON_RIGHT = 2;
-	
-	interface Props {
+
+	type Props = {
 		// Label
 		label?: string | undefined;
 		tooltip?: string | undefined;
@@ -54,8 +56,8 @@
 		incrementCallbackDecrease?: (() => void) | undefined;
 		onvalue?: (value: number | undefined) => void;
 		onstartHistoryTransaction?: () => void;
-		oncontextmenu?: MouseEventHandler<HTMLInputElement>
-	}
+		oncontextmenu?: MouseEventHandler<HTMLInputElement>;
+	};
 
 	let {
 		label = undefined,
@@ -107,8 +109,6 @@
 	// Track whether the Ctrl key is currently held down.
 	let ctrlKeyDown = false;
 
-
-
 	// Keep track of the Ctrl key being held down.
 	const trackCtrl = (e: KeyboardEvent | MouseEvent) => (ctrlKeyDown = e.ctrlKey);
 	onMount(() => {
@@ -120,10 +120,10 @@
 			removeEventListener("keydown", trackCtrl);
 			removeEventListener("keyup", trackCtrl);
 			removeEventListener("mousemove", trackCtrl);
-		}
+		};
 	});
 	// onDestroy(() => {
-		
+
 	// });
 
 	// ===============================
@@ -561,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>
-		onstartHistoryTransaction?.()
+		onstartHistoryTransaction?.();
 	}
 
 	// We want to let the user abort while dragging the slider by right clicking or pressing Escape.
@@ -708,7 +708,7 @@
 				class="slider"
 				class:hidden={rangeSliderClickDragState === "Deciding"}
 				{disabled}
-				min={rangeMin}	
+				min={rangeMin}
 				max={rangeMax}
 				step={sliderStepValue}
 				bind:value={rangeSliderValue}
diff --git a/frontend/src/components/widgets/inputs/RadioInput.svelte b/frontend/src/components/widgets/inputs/RadioInput.svelte
index ad731a8ef3..aefcebdc7e 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.svelte
+++ b/frontend/src/components/widgets/inputs/RadioInput.svelte
@@ -1,25 +1,18 @@
 <script lang="ts">
-	import { type RadioEntries, type RadioEntryData } from "@graphite/messages.svelte";
-
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import { type RadioEntries, type RadioEntryData } from "@graphite/messages.svelte";
 
-	interface Props {
+	type Props = {
 		entries: RadioEntries;
 		selectedIndex?: number | undefined;
 		disabled?: boolean;
 		minWidth?: number;
 		onselect?: (position: number) => void;
-	}
+	};
 
-	let {
-		entries,
-		selectedIndex = undefined,
-		disabled = false,
-		minWidth = 0,
-		onselect
-	}: Props = $props();
+	let { entries, selectedIndex = undefined, disabled = false, minWidth = 0, onselect }: Props = $props();
 
 	let mixed = $derived(selectedIndex === undefined && !disabled);
 
diff --git a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
index 951385f44e..ebec1de3d4 100644
--- a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
+++ b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import type { ReferencePoint } from "@graphite/messages.svelte";
 
-	interface Props {
+	type Props = {
 		value: string;
 		disabled?: boolean;
 		onvalue?: (point: ReferencePoint) => void;
 		tooltip?: string;
-	}
+	};
 
 	let { value, disabled = false, onvalue, tooltip }: Props = $props();
 
diff --git a/frontend/src/components/widgets/inputs/RulerInput.svelte b/frontend/src/components/widgets/inputs/RulerInput.svelte
index 527a56958d..e0c316fa36 100644
--- a/frontend/src/components/widgets/inputs/RulerInput.svelte
+++ b/frontend/src/components/widgets/inputs/RulerInput.svelte
@@ -6,29 +6,21 @@
 	const MINOR_MARK_THICKNESS = 6;
 	const MICRO_MARK_THICKNESS = 3;
 
-	interface Props {
+	type Props = {
 		direction?: Graphite.Axis;
 		origin: number;
 		numberInterval: number;
 		majorMarkSpacing: number;
 		minorDivisions?: number;
 		microDivisions?: number;
-	}
+	};
 
-	let {
-		direction = "Vertical",
-		origin,
-		numberInterval,
-		majorMarkSpacing,
-		minorDivisions = 5,
-		microDivisions = 2
-	}: Props = $props();
+	let { direction = "Vertical", origin, numberInterval, majorMarkSpacing, minorDivisions = 5, microDivisions = 2 }: Props = $props();
 
 	let rulerInput: HTMLDivElement | undefined = $state();
 	let rulerLength = $state(0);
 	let svgBounds = $state({ width: "0px", height: "0px" });
 
-
 	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";
diff --git a/frontend/src/components/widgets/inputs/ScrollbarInput.svelte b/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
index c22422cce5..2a7599ca1f 100644
--- a/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
+++ b/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
@@ -13,7 +13,7 @@
 
 	const clamp01 = (value: number): number => Math.min(Math.max(value, 0), 1);
 
-	interface Props {
+	type Props = {
 		direction?: Graphite.Axis;
 		thumbPosition?: number;
 		thumbLength?: number;
@@ -22,18 +22,9 @@
 		onthumbDragEnd?: () => void;
 		onthumbDragStart?: () => void;
 		onthumbDragAbort?: () => void;
-	}
+	};
 
-	let { 
-		direction = "Vertical", 
-		thumbPosition = 0.5, 
-		thumbLength = 0.5,
-		ontrackShift,
-		onthumbPosition,
-		onthumbDragEnd,
-		onthumbDragStart,
-		onthumbDragAbort,
-	}: Props = $props();
+	let { direction = "Vertical", thumbPosition = 0.5, thumbLength = 0.5, ontrackShift, onthumbPosition, onthumbDragEnd, onthumbDragStart, onthumbDragAbort }: Props = $props();
 
 	let scrollTrack: HTMLDivElement | undefined = $state();
 	let dragging = $state(false);
@@ -71,7 +62,7 @@
 			if (!pressingArrow) return;
 
 			const distance = afterInitialDelay ? ARROW_REPEAT_DISTANCE : ARROW_CLICK_DISTANCE;
-			ontrackShift?.( -direction * distance);
+			ontrackShift?.(-direction * distance);
 
 			if (afterInitialDelay) repeatTimeout = setTimeout(sendMove, PRESS_REPEAT_INTERVAL_RAPID_MS);
 			afterInitialDelay = true;
@@ -178,7 +169,7 @@
 			const dragDelta = positionPositionThisFrame - pointerPositionLastFrame;
 			const movement = dragDelta / (length * (1 - thumbLength));
 			const newThumbPosition = clamp01(thumbPosition + movement);
-			onthumbPosition?.(newThumbPosition)
+			onthumbPosition?.(newThumbPosition);
 
 			pointerPositionLastFrame = positionPositionThisFrame;
 
diff --git a/frontend/src/components/widgets/inputs/SpectrumInput.svelte b/frontend/src/components/widgets/inputs/SpectrumInput.svelte
index 925a77bd8d..0846a53d62 100644
--- a/frontend/src/components/widgets/inputs/SpectrumInput.svelte
+++ b/frontend/src/components/widgets/inputs/SpectrumInput.svelte
@@ -1,30 +1,23 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 
-	import { Color, type Gradient } from "@graphite/messages.svelte";
-
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import { Color, type Gradient } from "@graphite/messages.svelte";
 
 	const BUTTON_LEFT = 0;
 	const BUTTON_RIGHT = 2;
 
-	interface Props {
+	type Props = {
 		activeMarkerIndex: number | undefined;
 		drag: boolean;
 		gradient: Gradient;
 		ongradient?: (gradient: Gradient) => void;
 		onactiveMarkerIndexChange?: (index: number | undefined) => void;
-	}
+	};
 
-	let { 
-		activeMarkerIndex = 0,
-		drag = $bindable(), 
-		gradient,
-		ongradient,
-		onactiveMarkerIndexChange,
-	}: Props = $props();
+	let { activeMarkerIndex = 0, drag = $bindable(), gradient, ongradient, onactiveMarkerIndexChange }: Props = $props();
 	// export let disabled = false;
 	// export let tooltip: string | undefined = undefined;
 
@@ -82,7 +75,7 @@
 		gradient.stops.splice(index, 0, { position, color });
 		deletionRestore = true;
 		onactiveMarkerIndexChange?.(index);
-		ongradient?.(gradient)
+		ongradient?.(gradient);
 
 		addEvents();
 	}
@@ -100,7 +93,7 @@
 		if (gradient.stops.length <= 2) return;
 
 		gradient.stops.splice(index, 1);
-		let newMarkerIndex = gradient.stops.length === 0 ? undefined : 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;
 		onactiveMarkerIndexChange?.(newMarkerIndex);
 		ongradient?.(gradient);
@@ -196,8 +189,8 @@
 		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.
diff --git a/frontend/src/components/widgets/inputs/TextAreaInput.svelte b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
index c3971fb2ce..3ea34598cc 100644
--- a/frontend/src/components/widgets/inputs/TextAreaInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
@@ -1,21 +1,15 @@
 <script lang="ts">
 	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
 
-	interface Props {
+	type Props = {
 		value: string;
 		label?: string | undefined;
 		tooltip?: string | undefined;
 		disabled?: boolean;
 		oncommitText?: (arg1: string) => void;
-	}
+	};
 
-	let {
-		value = $bindable(),
-		label = undefined,
-		tooltip = undefined,
-		disabled = false,
-		oncommitText
-	}: Props = $props();
+	let { value = $bindable(), label = undefined, tooltip = undefined, disabled = false, oncommitText }: Props = $props();
 
 	let self: FieldInput | undefined = $state();
 	let editing = false;
diff --git a/frontend/src/components/widgets/inputs/TextInput.svelte b/frontend/src/components/widgets/inputs/TextInput.svelte
index cbeefc0ad3..2a104eebd0 100644
--- a/frontend/src/components/widgets/inputs/TextInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
 
-	interface Props {
+	type Props = {
 		// Label
 		label?: string | undefined;
 		tooltip?: string | undefined;
@@ -16,7 +16,7 @@
 		class?: string;
 		classes?: Record<string, boolean>;
 		oncommitText?: (arg1: string) => void;
-	}
+	};
 
 	let {
 		label = undefined,
diff --git a/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte b/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
index 2c2bca08ce..958a4ef13b 100644
--- a/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
+++ b/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
@@ -2,18 +2,18 @@
 	import { getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { Color } from "@graphite/messages.svelte";
 
 	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import { Color } from "@graphite/messages.svelte";
 
 	const editor = getContext<Editor>("editor");
 
-	interface Props {
+	type Props = {
 		primary: Color;
 		secondary: Color;
-	}
+	};
 
 	let { primary, secondary }: Props = $props();
 
@@ -42,21 +42,11 @@
 <LayoutCol class="working-colors-button">
 	<LayoutRow class="primary swatch">
 		<button onclick={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
-		<ColorPicker
-			bind:open={primaryOpen}
-			colorOrGradient={primary}
-			oncolorOrGradient={(detail) => detail instanceof Color && primaryColorChanged(detail)}
-			direction="Right"
-		/>
+		<ColorPicker bind:open={primaryOpen} colorOrGradient={primary} oncolorOrGradient={(detail) => detail instanceof Color && primaryColorChanged(detail)} direction="Right" />
 	</LayoutRow>
 	<LayoutRow class="secondary swatch">
 		<button onclick={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
-		<ColorPicker
-			bind:open={secondaryOpen}
-			colorOrGradient={secondary}
-			oncolorOrGradient={(detail) => detail instanceof Color && secondaryColorChanged(detail)}
-			direction="Right"
-		/>
+		<ColorPicker bind:open={secondaryOpen} colorOrGradient={secondary} oncolorOrGradient={(detail) => detail instanceof Color && secondaryColorChanged(detail)} direction="Right" />
 	</LayoutRow>
 </LayoutCol>
 
diff --git a/frontend/src/components/widgets/labels/IconLabel.svelte b/frontend/src/components/widgets/labels/IconLabel.svelte
index f72b522bbf..f04b234e33 100644
--- a/frontend/src/components/widgets/labels/IconLabel.svelte
+++ b/frontend/src/components/widgets/labels/IconLabel.svelte
@@ -3,37 +3,34 @@
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
-	interface Props {
+	type Props = {
 		class?: string;
 		classes?: Record<string, boolean>;
 		icon: IconName;
 		iconSizeOverride?: number | undefined;
 		disabled?: boolean;
 		tooltip?: string | undefined;
-	}
+	};
 
-	let {
-		class: className = "",
-		classes = {},
-		icon,
-		iconSizeOverride = undefined,
-		disabled = false,
-		tooltip = undefined
-	}: Props = $props();
+	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
-			console.warn(`Icon "${icon}" does not exist.`);
-			return "size-24";
-		}
-		if (iconData.size === undefined) return "";
-		return `size-${iconSizeOverride || iconData.size}`;
-	})(icon));
-	let extraClasses = $derived(Object.entries(classes)
-		.flatMap(([className, stateName]) => (stateName ? [className] : []))
-		.join(" "));
+	let iconSizeClass = $derived(
+		((icon: IconName) => {
+			const iconData = ICONS[icon];
+			if (!iconData) {
+				// eslint-disable-next-line no-console
+				console.warn(`Icon "${icon}" does not exist.`);
+				return "size-24";
+			}
+			if (iconData.size === undefined) return "";
+			return `size-${iconSizeOverride || iconData.size}`;
+		})(icon),
+	);
+	let extraClasses = $derived(
+		Object.entries(classes)
+			.flatMap(([className, stateName]) => (stateName ? [className] : []))
+			.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 0134eea22c..58f943ee21 100644
--- a/frontend/src/components/widgets/labels/Separator.svelte
+++ b/frontend/src/components/widgets/labels/Separator.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { type SeparatorDirection, type SeparatorType } from "@graphite/messages.svelte";
 
-	interface Props {
+	type Props = {
 		direction?: SeparatorDirection;
 		type?: SeparatorType;
-	}
+	};
 
 	let { direction = "Horizontal", type = "Unrelated" }: Props = $props();
 </script>
diff --git a/frontend/src/components/widgets/labels/TextLabel.svelte b/frontend/src/components/widgets/labels/TextLabel.svelte
index 6f7583ccf4..6b452cf738 100644
--- a/frontend/src/components/widgets/labels/TextLabel.svelte
+++ b/frontend/src/components/widgets/labels/TextLabel.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	
+	import type { Snippet } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+
 	type LabelHTMLElementProps = SvelteHTMLElements["label"];
-	
-	interface Props extends LabelHTMLElementProps {
+
+	type Props = {
 		class?: string;
 		classes?: Record<string, boolean>;
 		style?: string;
@@ -17,8 +18,8 @@
 		multiline?: boolean;
 		tooltip?: string | undefined;
 		checkboxId?: bigint | undefined;
-		children?: import('svelte').Snippet;
-	}
+		children?: Snippet;
+	} & LabelHTMLElementProps;
 
 	let {
 		class: className = "",
@@ -34,15 +35,19 @@
 		multiline = false,
 		tooltip = undefined,
 		checkboxId = undefined,
-		children
+		children,
 	}: Props = $props();
 
-	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(" "));
+	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>
 
 <label
diff --git a/frontend/src/components/widgets/labels/UserInputLabel.svelte b/frontend/src/components/widgets/labels/UserInputLabel.svelte
index 0c739994e0..124ebb0628 100644
--- a/frontend/src/components/widgets/labels/UserInputLabel.svelte
+++ b/frontend/src/components/widgets/labels/UserInputLabel.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { getContext } from "svelte";
+	import { getContext, type Snippet } from "svelte";
 
-	import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@graphite/messages.svelte";
 	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
 	import type { IconName } from "@graphite/utility-functions/icons";
 	import { platformIsMac } from "@graphite/utility-functions/platform";
@@ -10,6 +9,7 @@
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@graphite/messages.svelte";
 
 	type LabelData = { label?: string; icon?: IconName; width: string };
 
@@ -34,21 +34,15 @@
 
 	const fullscreen = getContext<FullscreenState>("fullscreen");
 
-	interface Props {
+	type Props = {
 		keysWithLabelsGroups?: LayoutKeysGroup[];
 		mouseMotion?: MouseMotion | undefined;
 		requiresLock?: boolean;
 		textOnly?: boolean;
-		children?: import('svelte').Snippet;
-	}
+		children?: Snippet;
+	};
 
-	let {
-		keysWithLabelsGroups = [],
-		mouseMotion = undefined,
-		requiresLock = false,
-		textOnly = false,
-		children
-	}: Props = $props();
+	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. ";
diff --git a/frontend/src/components/window/status-bar/StatusBar.svelte b/frontend/src/components/window/status-bar/StatusBar.svelte
index 88155567ac..2305c9f798 100644
--- a/frontend/src/components/window/status-bar/StatusBar.svelte
+++ b/frontend/src/components/window/status-bar/StatusBar.svelte
@@ -2,12 +2,13 @@
 	import { getContext, onMount } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@graphite/messages.svelte";
+
 	import { platformIsMac } from "@graphite/utility-functions/platform";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
+	import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@graphite/messages.svelte";
 
 	const editor = getContext<Editor>("editor");
 
diff --git a/frontend/src/components/window/title-bar/TitleBar.svelte b/frontend/src/components/window/title-bar/TitleBar.svelte
index 24f9864411..ebce022577 100644
--- a/frontend/src/components/window/title-bar/TitleBar.svelte
+++ b/frontend/src/components/window/title-bar/TitleBar.svelte
@@ -2,7 +2,7 @@
 	import { getContext, onMount } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/messages.svelte";
+
 	import type { PortfolioState } from "@graphite/state-providers/portfolio";
 	import { platformIsMac } from "@graphite/utility-functions/platform";
 
@@ -12,11 +12,12 @@
 	import WindowButtonsWeb from "@graphite/components/window/title-bar/WindowButtonsWeb.svelte";
 	import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
 	import WindowTitle from "@graphite/components/window/title-bar/WindowTitle.svelte";
+	import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/messages.svelte";
 
-	interface Props {
+	type Props = {
 		platform: Graphite.Platform;
 		maximized: boolean;
-	}
+	};
 
 	let { platform, maximized }: Props = $props();
 
diff --git a/frontend/src/components/window/title-bar/WindowButtonsMac.svelte b/frontend/src/components/window/title-bar/WindowButtonsMac.svelte
index 1f97686774..388c68c423 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsMac.svelte
+++ b/frontend/src/components/window/title-bar/WindowButtonsMac.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
-	interface Props {
+	type Props = {
 		maximized?: boolean;
-	}
+	};
 
 	let { maximized = false }: Props = $props();
 </script>
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte b/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
index ce9ec86e2d..3427b59e61 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
+++ b/frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
@@ -2,9 +2,9 @@
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
-	interface Props {
+	type Props = {
 		maximized?: boolean;
-	}
+	};
 
 	let { maximized = false }: Props = $props();
 </script>
diff --git a/frontend/src/components/window/title-bar/WindowTitle.svelte b/frontend/src/components/window/title-bar/WindowTitle.svelte
index 81a4b22a05..07f868a08f 100644
--- a/frontend/src/components/window/title-bar/WindowTitle.svelte
+++ b/frontend/src/components/window/title-bar/WindowTitle.svelte
@@ -2,9 +2,9 @@
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
-	interface Props {
+	type Props = {
 		text: string;
-	}
+	};
 
 	let { text }: Props = $props();
 </script>
diff --git a/frontend/src/components/window/workspace/Panel.svelte b/frontend/src/components/window/workspace/Panel.svelte
index 683f4dd06b..4859180b95 100644
--- a/frontend/src/components/window/workspace/Panel.svelte
+++ b/frontend/src/components/window/workspace/Panel.svelte
@@ -17,7 +17,7 @@
 	import { getContext, tick } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { type LayoutKeysGroup, type Key } from "@graphite/messages.svelte";
+
 	import { platformIsMac, isEventSupported } from "@graphite/utility-functions/platform";
 
 	import { extractPixelData } from "@graphite/utility-functions/rasterization";
@@ -29,12 +29,13 @@
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
+	import { type LayoutKeysGroup, type Key } from "@graphite/messages.svelte";
 
 	const BUTTON_MIDDLE = 1;
 
 	const editor = getContext<Editor>("editor");
 
-	interface Props {
+	type Props = {
 		tabMinWidths?: boolean;
 		tabCloseButtons?: boolean;
 		tabLabels: { name: string; tooltip?: string }[];
@@ -42,17 +43,9 @@
 		panelType?: PanelType | undefined;
 		clickAction?: ((index: number) => void) | undefined;
 		closeAction?: ((index: number) => void) | undefined;
-	}
+	};
 
-	let {
-		tabMinWidths = false,
-		tabCloseButtons = false,
-		tabLabels,
-		tabActiveIndex,
-		panelType = undefined,
-		clickAction = undefined,
-		closeAction = undefined
-	}: Props = $props();
+	let { tabMinWidths = false, tabCloseButtons = false, tabLabels, tabActiveIndex, panelType = undefined, clickAction = undefined, closeAction = undefined }: Props = $props();
 
 	let tabElements: (LayoutRow | undefined)[] = $state([]);
 
diff --git a/frontend/src/components/window/workspace/Workspace.svelte b/frontend/src/components/window/workspace/Workspace.svelte
index 2844814029..fffbef864c 100644
--- a/frontend/src/components/window/workspace/Workspace.svelte
+++ b/frontend/src/components/window/workspace/Workspace.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import type { FrontendDocumentDetails } from "@graphite/messages.svelte";
+
 	import type { DialogState } from "@graphite/state-providers/dialog";
 	import type { PortfolioState } from "@graphite/state-providers/portfolio";
 
@@ -10,6 +10,7 @@
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import Panel from "@graphite/components/window/workspace/Panel.svelte";
+	import type { FrontendDocumentDetails } from "@graphite/messages.svelte";
 
 	const MIN_PANEL_SIZE = 100;
 	const PANEL_SIZES = {
@@ -27,8 +28,6 @@
 	let gutterResizeRestore: [number, number] | undefined = undefined;
 	let pointerCaptureId: number | undefined = undefined;
 
-
-
 	const editor = getContext<Editor>("editor");
 	const portfolio = getContext<PortfolioState>("portfolio");
 	const dialog = getContext<DialogState>("dialog");
@@ -124,14 +123,16 @@
 	$effect(() => {
 		documentPanel?.scrollTabIntoView($portfolio.activeDocumentIndex);
 	});
-	let documentTabLabels = $derived($portfolio.documents.map((doc: FrontendDocumentDetails) => {
-		const name = doc.displayName;
+	let documentTabLabels = $derived(
+		$portfolio.documents.map((doc: FrontendDocumentDetails) => {
+			const name = doc.displayName;
 
-		if (!editor.handle.inDevelopmentMode()) return { name };
+			if (!editor.handle.inDevelopmentMode()) return { name };
 
-		const tooltip = `Document ID: ${doc.id}`;
-		return { name, tooltip };
-	}));
+			const tooltip = `Document ID: ${doc.id}`;
+			return { name, tooltip };
+		}),
+	);
 </script>
 
 <LayoutRow class="workspace" data-workspace>
diff --git a/frontend/src/editor.ts b/frontend/src/editor.ts
index dd149fb066..28367d719b 100644
--- a/frontend/src/editor.ts
+++ b/frontend/src/editor.ts
@@ -1,8 +1,9 @@
 // import { panicProxy } from "@graphite/utility-functions/panic-proxy";
-import { type JsMessageType } from "@graphite/messages.svelte";
 import { createSubscriptionRouter, type SubscriptionRouter } from "@graphite/subscription-router";
 import init, { setRandomSeed, wasmMemory, EditorHandle } from "@graphite-frontend/wasm/pkg/graphite_wasm.js";
 
+import { type JsMessageType } from "@graphite/messages.svelte";
+
 export type Editor = {
 	raw: WebAssembly.Memory;
 	handle: EditorHandle;
diff --git a/frontend/src/io-managers/clipboard.ts b/frontend/src/io-managers/clipboard.ts
index ae71c293a7..c2d5b59827 100644
--- a/frontend/src/io-managers/clipboard.ts
+++ b/frontend/src/io-managers/clipboard.ts
@@ -1,4 +1,5 @@
 import { type Editor } from "@graphite/editor";
+
 import { TriggerTextCopy } from "@graphite/messages.svelte";
 
 export function createClipboardManager(editor: Editor) {
diff --git a/frontend/src/io-managers/hyperlinks.ts b/frontend/src/io-managers/hyperlinks.ts
index 78727064f0..ac82a331d9 100644
--- a/frontend/src/io-managers/hyperlinks.ts
+++ b/frontend/src/io-managers/hyperlinks.ts
@@ -1,4 +1,5 @@
 import { type Editor } from "@graphite/editor";
+
 import { TriggerVisitLink } from "@graphite/messages.svelte";
 
 export function createHyperlinkManager(editor: Editor) {
diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index 1da7548508..c846b04e4a 100644
--- a/frontend/src/io-managers/input.ts
+++ b/frontend/src/io-managers/input.ts
@@ -1,10 +1,9 @@
 import { get } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
-import { TriggerPaste } from "@graphite/messages.svelte";
+
 import { type DialogState } from "@graphite/state-providers/dialog";
-import { type DocumentState } from "@graphite/state-providers/document.svelte";
-import { documentContextState } from "@graphite/state-providers/document.svelte";
+
 import { type FullscreenState } from "@graphite/state-providers/fullscreen";
 import { type PortfolioState } from "@graphite/state-providers/portfolio";
 import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode } from "@graphite/utility-functions/keyboard-entry";
@@ -13,6 +12,10 @@ import { extractPixelData } from "@graphite/utility-functions/rasterization";
 import { stripIndents } from "@graphite/utility-functions/strip-indents";
 import { updateBoundsOfViewports } from "@graphite/utility-functions/viewports";
 
+import { TriggerPaste } from "@graphite/messages.svelte";
+import { documentContextState } from "@graphite/state-providers/document.svelte";
+import { type DocumentState } from "@graphite/state-providers/document.svelte";
+
 const BUTTON_LEFT = 0;
 const BUTTON_MIDDLE = 1;
 const BUTTON_RIGHT = 2;
@@ -29,7 +32,7 @@ type EventListenerTarget = {
 	removeEventListener: typeof window.removeEventListener;
 };
 
-export function createInputManager(editor: Editor, dialog: DialogState, portfolio: PortfolioState, document: DocumentState, fullscreen: FullscreenState): () => void {
+export function createInputManager(editor: Editor, dialog: DialogState, portfolio: PortfolioState, _document: DocumentState, fullscreen: FullscreenState): () => void {
 	const app = window.document.querySelector("[data-app-container]") as HTMLElement | undefined;
 	app?.focus();
 
diff --git a/frontend/src/io-managers/localization.ts b/frontend/src/io-managers/localization.ts
index 6536e3ce6a..be83bfd679 100644
--- a/frontend/src/io-managers/localization.ts
+++ b/frontend/src/io-managers/localization.ts
@@ -1,4 +1,5 @@
 import { type Editor } from "@graphite/editor";
+
 import { TriggerAboutGraphiteLocalizedCommitDate } from "@graphite/messages.svelte";
 
 export function createLocalizationManager(editor: Editor) {
diff --git a/frontend/src/io-managers/panic.ts b/frontend/src/io-managers/panic.ts
index 1ea73843cb..f97e3feb92 100644
--- a/frontend/src/io-managers/panic.ts
+++ b/frontend/src/io-managers/panic.ts
@@ -1,9 +1,11 @@
 import { type Editor } from "@graphite/editor";
-import { DisplayDialogPanic } from "@graphite/messages.svelte";
+
 import { type DialogState } from "@graphite/state-providers/dialog";
 import { browserVersion, operatingSystem } from "@graphite/utility-functions/platform";
 import { stripIndents } from "@graphite/utility-functions/strip-indents";
 
+import { DisplayDialogPanic } from "@graphite/messages.svelte";
+
 export function createPanicManager(editor: Editor, dialogState: DialogState) {
 	// Code panic dialog and console error
 	editor.subscriptions.subscribeJsMessage(DisplayDialogPanic, (displayDialogPanic) => {
diff --git a/frontend/src/io-managers/persistence.ts b/frontend/src/io-managers/persistence.ts
index f2b4c8d0a4..493c906792 100644
--- a/frontend/src/io-managers/persistence.ts
+++ b/frontend/src/io-managers/persistence.ts
@@ -2,6 +2,9 @@ import { createStore, del, get, set, update } from "idb-keyval";
 import { get as getFromStore } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
+
+import { type PortfolioState } from "@graphite/state-providers/portfolio";
+
 import {
 	TriggerIndexedDbWriteDocument,
 	TriggerIndexedDbRemoveDocument,
@@ -11,7 +14,6 @@ import {
 	TriggerLoadRestAutoSaveDocuments,
 	TriggerSaveActiveDocument,
 } from "@graphite/messages.svelte";
-import { type PortfolioState } from "@graphite/state-providers/portfolio";
 
 const graphiteStore = createStore("graphite", "store");
 
diff --git a/frontend/src/messages.svelte.ts b/frontend/src/messages.svelte.ts
index 1ca813e3d4..5c460ef467 100644
--- a/frontend/src/messages.svelte.ts
+++ b/frontend/src/messages.svelte.ts
@@ -109,7 +109,7 @@ export class UpdateNodeGraphWires extends JsMessage {
 	readonly wires!: WireUpdate[];
 }
 
-export class ClearAllNodeGraphWires extends JsMessage { }
+export class ClearAllNodeGraphWires extends JsMessage {}
 
 export class UpdateNodeGraphTransform extends JsMessage {
 	readonly transform!: NodeGraphTransform;
@@ -759,10 +759,10 @@ export class UpdateMouseCursor extends JsMessage {
 	readonly cursor!: MouseCursorIcon;
 }
 
-export class TriggerLoadFirstAutoSaveDocument extends JsMessage { }
-export class TriggerLoadRestAutoSaveDocuments extends JsMessage { }
+export class TriggerLoadFirstAutoSaveDocument extends JsMessage {}
+export class TriggerLoadRestAutoSaveDocuments extends JsMessage {}
 
-export class TriggerLoadPreferences extends JsMessage { }
+export class TriggerLoadPreferences extends JsMessage {}
 
 export class TriggerFetchAndOpenDocument extends JsMessage {
 	readonly name!: string;
@@ -770,13 +770,13 @@ export class TriggerFetchAndOpenDocument extends JsMessage {
 	readonly filename!: string;
 }
 
-export class TriggerOpenDocument extends JsMessage { }
+export class TriggerOpenDocument extends JsMessage {}
 
-export class TriggerImport extends JsMessage { }
+export class TriggerImport extends JsMessage {}
 
-export class TriggerPaste extends JsMessage { }
+export class TriggerPaste extends JsMessage {}
 
-export class TriggerDelayedZoomCanvasToFitAll extends JsMessage { }
+export class TriggerDelayedZoomCanvasToFitAll extends JsMessage {}
 
 export class TriggerDownloadImage extends JsMessage {
 	readonly svg!: string;
@@ -803,7 +803,7 @@ export class TriggerSaveActiveDocument extends JsMessage {
 	readonly documentId!: bigint;
 }
 
-export class DocumentChanged extends JsMessage { }
+export class DocumentChanged extends JsMessage {}
 
 export type DataBuffer = {
 	pointer: bigint;
@@ -837,7 +837,7 @@ export class DisplayEditableTextboxTransform extends JsMessage {
 	readonly transform!: number[];
 }
 
-export class DisplayRemoveEditableTextbox extends JsMessage { }
+export class DisplayRemoveEditableTextbox extends JsMessage {}
 
 export class UpdateDocumentLayerDetails extends JsMessage {
 	@Type(() => LayerPanelEntry)
@@ -886,7 +886,7 @@ export class LayerPanelEntry {
 	clippable!: boolean;
 }
 
-export class DisplayDialogDismiss extends JsMessage { }
+export class DisplayDialogDismiss extends JsMessage {}
 
 export class Font {
 	fontFamily!: string;
@@ -903,7 +903,7 @@ export class TriggerVisitLink extends JsMessage {
 	url!: string;
 }
 
-export class TriggerTextCommit extends JsMessage { }
+export class TriggerTextCommit extends JsMessage {}
 
 export class TriggerTextCopy extends JsMessage {
 	readonly copyText!: string;
@@ -1014,7 +1014,7 @@ export type MenuBarEntry = MenuEntryCommon & {
 export type MenuListEntry = MenuEntryCommon & {
 	action?: () => void;
 	children?: MenuListEntry[][];
-
+	open?: boolean;
 	value: string;
 	shortcutRequiresLock?: boolean;
 	disabled?: boolean;
@@ -1383,12 +1383,15 @@ export function narrowWidgetProps<K extends WidgetPropsNames>(props: WidgetProps
 
 export class Widget {
 	constructor(props: WidgetPropsSet, widgetId: bigint) {
+		// These properites are reactive to make it work with deeply nested bind's located at root level components and layers above
 		this.props = $state(props);
 		this.widgetId = $state(widgetId);
 	}
 
 	@Type(() => WidgetProps, { discriminator: { property: "kind", subTypes: [...widgetSubTypes] }, keepDiscriminatorProperty: true })
 	@Transform(({ value }) => {
+		// This protects the reactive state objects created by the Widget class
+		// to be converted back into POJO during recursion by the transformer
 		if (value.kind === "PopoverButton") {
 			value.popoverLayout = value.popoverLayout.map(createLayoutGroup);
 		}
@@ -1447,7 +1450,7 @@ export function patchWidgetLayout(layout: /* &mut */ WidgetLayout, updates: Widg
 
 	updates.diff.forEach((update) => {
 		// Find the object where the diff applies to
-		let diffObject = update.widgetPath.reduce((targetLayout, index) => {
+		const diffObject = update.widgetPath.reduce((targetLayout, index) => {
 			if ("columnWidgets" in targetLayout) return targetLayout.columnWidgets[index];
 			if ("rowWidgets" in targetLayout) return targetLayout.rowWidgets[index];
 			if ("tableWidgets" in targetLayout) return targetLayout.tableWidgets[index];
@@ -1571,21 +1574,21 @@ function createLayoutGroup(layoutGroup: any): LayoutGroup {
 }
 
 // WIDGET LAYOUTS
-export class UpdateDialogButtons extends WidgetDiffUpdate { }
+export class UpdateDialogButtons extends WidgetDiffUpdate {}
 
-export class UpdateDialogColumn1 extends WidgetDiffUpdate { }
+export class UpdateDialogColumn1 extends WidgetDiffUpdate {}
 
-export class UpdateDialogColumn2 extends WidgetDiffUpdate { }
+export class UpdateDialogColumn2 extends WidgetDiffUpdate {}
 
-export class UpdateDocumentBarLayout extends WidgetDiffUpdate { }
+export class UpdateDocumentBarLayout extends WidgetDiffUpdate {}
 
-export class UpdateDocumentModeLayout extends WidgetDiffUpdate { }
+export class UpdateDocumentModeLayout extends WidgetDiffUpdate {}
 
-export class UpdateLayersPanelControlBarLeftLayout extends WidgetDiffUpdate { }
+export class UpdateLayersPanelControlBarLeftLayout extends WidgetDiffUpdate {}
 
-export class UpdateLayersPanelControlBarRightLayout extends WidgetDiffUpdate { }
+export class UpdateLayersPanelControlBarRightLayout extends WidgetDiffUpdate {}
 
-export class UpdateLayersPanelBottomBarLayout extends WidgetDiffUpdate { }
+export class UpdateLayersPanelBottomBarLayout extends WidgetDiffUpdate {}
 
 // Extends JsMessage instead of WidgetDiffUpdate because the menu bar isn't diffed
 export class UpdateMenuBarLayout extends JsMessage {
@@ -1597,17 +1600,17 @@ export class UpdateMenuBarLayout extends JsMessage {
 	layout!: MenuBarEntry[];
 }
 
-export class UpdateNodeGraphControlBarLayout extends WidgetDiffUpdate { }
+export class UpdateNodeGraphControlBarLayout extends WidgetDiffUpdate {}
 
-export class UpdatePropertyPanelSectionsLayout extends WidgetDiffUpdate { }
+export class UpdatePropertyPanelSectionsLayout extends WidgetDiffUpdate {}
 
-export class UpdateSpreadsheetLayout extends WidgetDiffUpdate { }
+export class UpdateSpreadsheetLayout extends WidgetDiffUpdate {}
 
-export class UpdateToolOptionsLayout extends WidgetDiffUpdate { }
+export class UpdateToolOptionsLayout extends WidgetDiffUpdate {}
 
-export class UpdateToolShelfLayout extends WidgetDiffUpdate { }
+export class UpdateToolShelfLayout extends WidgetDiffUpdate {}
 
-export class UpdateWorkingColorsLayout extends WidgetDiffUpdate { }
+export class UpdateWorkingColorsLayout extends WidgetDiffUpdate {}
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function createMenuLayout(menuBarEntry: any[]): MenuBarEntry[] {
diff --git a/frontend/src/state-providers/dialog.ts b/frontend/src/state-providers/dialog.ts
index 91095e7b96..77ac4b4c76 100644
--- a/frontend/src/state-providers/dialog.ts
+++ b/frontend/src/state-providers/dialog.ts
@@ -1,9 +1,11 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
-import { defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogButtons, UpdateDialogColumn1, UpdateDialogColumn2, patchWidgetLayout } from "@graphite/messages.svelte";
+
 import { type IconName } from "@graphite/utility-functions/icons";
 
+import { defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogButtons, UpdateDialogColumn1, UpdateDialogColumn2, patchWidgetLayout } from "@graphite/messages.svelte";
+
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDialogState(editor: Editor) {
 	const { subscribe, update } = writable({
diff --git a/frontend/src/state-providers/fonts.ts b/frontend/src/state-providers/fonts.ts
index c17a5dcbb5..a845f61638 100644
--- a/frontend/src/state-providers/fonts.ts
+++ b/frontend/src/state-providers/fonts.ts
@@ -1,6 +1,7 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
+
 import { TriggerFontLoad } from "@graphite/messages.svelte";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
diff --git a/frontend/src/state-providers/node-graph.ts b/frontend/src/state-providers/node-graph.ts
index a459e375b9..9f0b4a3ea5 100644
--- a/frontend/src/state-providers/node-graph.ts
+++ b/frontend/src/state-providers/node-graph.ts
@@ -1,6 +1,7 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
+
 import type { FrontendGraphOutput, FrontendGraphInput } from "@graphite/messages.svelte";
 import {
 	type Box,
diff --git a/frontend/src/state-providers/portfolio.ts b/frontend/src/state-providers/portfolio.ts
index 1bff0e741a..8d1bbb1c1e 100644
--- a/frontend/src/state-providers/portfolio.ts
+++ b/frontend/src/state-providers/portfolio.ts
@@ -3,6 +3,10 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
+
+import { downloadFileText, downloadFileBlob, upload } from "@graphite/utility-functions/files";
+import { extractPixelData, rasterizeSVG } from "@graphite/utility-functions/rasterization";
+
 import {
 	type FrontendDocumentDetails,
 	TriggerFetchAndOpenDocument,
@@ -17,8 +21,6 @@ import {
 	patchWidgetLayout,
 	UpdateSpreadsheetLayout,
 } from "@graphite/messages.svelte";
-import { downloadFileText, downloadFileBlob, upload } from "@graphite/utility-functions/files";
-import { extractPixelData, rasterizeSVG } from "@graphite/utility-functions/rasterization";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createPortfolioState(editor: Editor) {
@@ -81,7 +83,8 @@ export function createPortfolioState(editor: Editor) {
 			return;
 		}
 
-		const imageData = await extractPixelData(new Blob([data.content.data], { type: data.type }));
+		const imageData = await extractPixelData(new Blob([new Uint8Array(data.content.data)], { type: data.type }));
+
 		editor.handle.pasteImage(data.filename, new Uint8Array(imageData.data), imageData.width, imageData.height);
 	});
 	editor.subscriptions.subscribeJsMessage(TriggerDownloadTextFile, (triggerFileDownload) => {
diff --git a/frontend/src/subscription-router.ts b/frontend/src/subscription-router.ts
index 810c209729..5ea28ed7a0 100644
--- a/frontend/src/subscription-router.ts
+++ b/frontend/src/subscription-router.ts
@@ -1,8 +1,9 @@
 import { plainToInstance } from "class-transformer";
 
-import { type JsMessageType, messageMakers, type JsMessage } from "@graphite/messages.svelte";
 import { type EditorHandle } from "@graphite-frontend/wasm/pkg/graphite_wasm.js";
 
+import { type JsMessageType, messageMakers, type JsMessage } from "@graphite/messages.svelte";
+
 type JsMessageCallback<T extends JsMessage> = (messageData: T) => void;
 // Don't know a better way of typing this since it can be any subclass of JsMessage
 // The functions interacting with this map are strongly typed though around JsMessage
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index bc56a9481e..d1d5eb8408 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -3,10 +3,11 @@
 import { spawnSync } from "child_process";
 
 import { readFileSync } from "node:fs";
-import { minimatch } from "minimatch";
+
 import path from "path";
 
 import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { minimatch } from "minimatch";
 import rollupPluginLicense, { type Dependency } from "rollup-plugin-license";
 import { sveltePreprocess } from "svelte-preprocess";
 import { defineConfig } from "vite";

From 69f6f5731f22ca9c8c2ddbfb39522d1950bc4169 Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Sat, 12 Jul 2025 21:54:00 +0530
Subject: [PATCH 15/16] fix:  temp editing for field input by adding local
 reactive state

---
 .../widgets/inputs/FieldInput.svelte          | 67 ++++++++++++-------
 .../widgets/inputs/NumberInput.svelte         | 20 ++----
 .../widgets/inputs/TextAreaInput.svelte       | 39 ++---------
 .../widgets/inputs/TextInput.svelte           | 25 ++-----
 4 files changed, 58 insertions(+), 93 deletions(-)

diff --git a/frontend/src/components/widgets/inputs/FieldInput.svelte b/frontend/src/components/widgets/inputs/FieldInput.svelte
index 199e2ac459..e05492e24a 100644
--- a/frontend/src/components/widgets/inputs/FieldInput.svelte
+++ b/frontend/src/components/widgets/inputs/FieldInput.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick } from "svelte";
 	import type { Snippet } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
 
@@ -25,8 +26,7 @@
 		hideContextMenu?: boolean;
 		children?: Snippet;
 		onfocus?: (event: FocusEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) => void;
-		onblur?: (event: FocusEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) => void;
-		onchange?: (event: Event & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) => void;
+		oncommitText?: (arg1: string) => void;
 		onkeydown?: (event: KeyboardEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) => void;
 		onpointerdown?: (event: PointerEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement | HTMLLabelElement }) => void;
 		ontextChangeCanceled?: () => void;
@@ -42,7 +42,7 @@
 		classes = {},
 		style: styleName = "",
 		styles = {},
-		value = $bindable(),
+		value = $bindable(""),
 		label = undefined,
 		spellcheck = false,
 		disabled = false,
@@ -51,7 +51,7 @@
 		placeholder = undefined,
 		hideContextMenu = false,
 		onfocus,
-		onchange,
+		oncommitText,
 		children,
 		onpointerdown,
 		ontextChangeCanceled,
@@ -60,14 +60,20 @@
 	let inputOrTextarea: HTMLInputElement | HTMLTextAreaElement | undefined = $state();
 	let id = String(Math.random()).substring(2);
 	let macKeyboardLayout = platformIsMac();
+	let local = $state<string>(value);
+
+	$effect.pre(() => {
+		local = value;
+	});
 
 	// Select (highlight) all the text. For technical reasons, it is necessary to pass the current text.
 	export function selectAllText(currentText: string) {
 		if (!inputOrTextarea) return;
 
 		// Setting the value directly is required to make the following `select()` call work
-		inputOrTextarea.value = currentText;
-		inputOrTextarea.select();
+		local = currentText;
+		// Wait for UI to update
+		tick().then(() => inputOrTextarea?.select());
 	}
 
 	export function focus() {
@@ -78,29 +84,22 @@
 		inputOrTextarea?.blur();
 	}
 
-	export function getValue(): string {
-		return inputOrTextarea?.value ?? "";
-	}
-
-	export function setInputElementValue(value: string) {
-		if (!inputOrTextarea) return;
-
-		inputOrTextarea.value = value;
-	}
-
 	export function element(): HTMLInputElement | HTMLTextAreaElement | undefined {
 		return inputOrTextarea;
 	}
 
 	function cancel() {
+		local = value;
 		ontextChangeCanceled?.();
+		unFocus();
 
 		if (inputOrTextarea) preventEscapeClosingParentFloatingMenu(inputOrTextarea);
 	}
 
 	function onkeydownInput(e: KeyboardEvent & { currentTarget: HTMLInputElement }) {
 		if (e.key === "Enter") {
-			onchange?.(e);
+			oncommitText?.(local);
+			unFocus();
 		}
 		if (e.key === "Escape") {
 			cancel();
@@ -109,12 +108,34 @@
 
 	function onkeydownTextArea(e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {
 		if ((macKeyboardLayout ? e.metaKey : e.ctrlKey) && e.key === "Enter") {
-			onchange?.(e);
+			oncommitText?.(local ?? "");
+			unFocus();
 		}
 		if (e.key === "Escape") {
 			cancel();
 		}
 	}
+
+	function onblur() {
+		oncommitText?.(local ?? "");
+	}
+
+	// If oncommitText listener is defined
+	// let the text be bound to the local state
+	let textBind = $derived.by(() => {
+		return {
+			get current() {
+				return oncommitText ? local : value;
+			},
+			set current(v: string) {
+				if (oncommitText) {
+					local = v;
+				} else {
+					value = v;
+				}
+			},
+		};
+	});
 </script>
 
 <!-- This is a base component, extended by others like NumberInput and TextInput. It should not be used directly. -->
@@ -128,10 +149,9 @@
 			{disabled}
 			{placeholder}
 			bind:this={inputOrTextarea}
-			bind:value
+			bind:value={textBind.current}
 			{onfocus}
-			onblur={onchange}
-			{onchange}
+			{onblur}
 			onkeydown={onkeydownInput}
 			{onpointerdown}
 			oncontextmenu={(e) => hideContextMenu && e.preventDefault()}
@@ -146,10 +166,9 @@
 			{spellcheck}
 			{disabled}
 			bind:this={inputOrTextarea}
-			bind:value
+			bind:value={textBind.current}
 			{onfocus}
-			onblur={onchange}
-			{onchange}
+			{onblur}
 			onkeydown={onkeydownTextArea}
 			{onpointerdown}
 			oncontextmenu={(e) => hideContextMenu && e.preventDefault()}
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index 7d75ca15df..a83c60a6e2 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -86,8 +86,8 @@
 
 	let self: FieldInput | undefined = $state();
 	let inputRangeElement: HTMLInputElement | undefined = $state();
-	let text = $state(displayText(value, unit));
 	let editing = false;
+	let text = $state(displayText(value, unit));
 	let isDragging = false;
 	let pressingArrow = false;
 	let repeatTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
@@ -189,7 +189,7 @@
 		const roundingPower = 10 ** Math.max(displayDecimalPlaces, 0);
 
 		const unitlessDisplayValue = Math.round(displayValue * roundingPower) / roundingPower;
-		return `${unitlessDisplayValue}${unPluralize(unit, displayValue)}`;
+		return editing ? `${unitlessDisplayValue}` : `${unitlessDisplayValue}${unPluralize(unit, displayValue)}`;
 	}
 
 	// Removes the trailing "s" from a unit if the quantity is 1.
@@ -220,12 +220,11 @@
 
 	// Called only when `value` is changed from the <input> element via user input and committed, either with the
 	// enter key (via the `change` event) or when the <input> element is unfocused (with the `blur` event binding).
-	function onTextChanged() {
-		// The `unFocus()` call at the bottom of this function and in `onTextChangeCanceled()` causes this function to be run again, so this check skips a second run.
+	function onTextChanged(changedValue: string) {
 		if (!editing) return;
 
 		// Insert a leading zero before all decimal points lacking a preceding digit, since the library doesn't realize that "point" means "zero point".
-		const textWithLeadingZeroes = text.replaceAll(/(?<=^|[^0-9])\./g, "0."); // Match any "." that is preceded by the start of the string (^) or a non-digit character ([^0-9])
+		const textWithLeadingZeroes = changedValue.replaceAll(/(?<=^|[^0-9])\./g, "0."); // Match any "." that is preceded by the start of the string (^) or a non-digit character ([^0-9])
 
 		let newValue = evaluateMathExpression(textWithLeadingZeroes);
 		if (newValue !== undefined && isNaN(newValue)) newValue = undefined; // Rejects `sqrt(-1)`
@@ -234,22 +233,17 @@
 			const oldValue = value !== undefined && isInteger ? Math.round(value) : value;
 			if (newValue !== oldValue) onstartHistoryTransaction?.();
 		}
-		updateValue(newValue);
-
 		editing = false;
-		self?.unFocus();
+		updateValue(newValue);
 	}
 
 	function onTextChangeCanceled() {
+		editing = false;
 		updateValue(undefined);
 
 		const valueOrZero = value !== undefined ? value : 0;
 		rangeSliderValue = valueOrZero;
 		rangeSliderValueAsRendered = valueOrZero;
-
-		editing = false;
-
-		self?.unFocus();
 	}
 
 	// =============================
@@ -671,7 +665,7 @@
 	}}
 	bind:value={text}
 	onfocus={onTextFocused}
-	onchange={onTextChanged}
+	oncommitText={onTextChanged}
 	ontextChangeCanceled={onTextChangeCanceled}
 	onpointerdown={onDragPointerDown}
 	{label}
diff --git a/frontend/src/components/widgets/inputs/TextAreaInput.svelte b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
index 3ea34598cc..6bb49b69bc 100644
--- a/frontend/src/components/widgets/inputs/TextAreaInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
@@ -12,31 +12,13 @@
 	let { value = $bindable(), label = undefined, tooltip = undefined, disabled = false, oncommitText }: Props = $props();
 
 	let self: FieldInput | undefined = $state();
-	let editing = false;
-
-	function onTextFocused() {
-		editing = true;
-	}
 
 	// Called only when `value` is changed from the <textarea> element via user input and committed, either
 	// via the `change` event or when the <input> element is unfocused (with the `blur` event binding)
-	function onTextChanged() {
-		// The `unFocus()` call in `onTextChangeCanceled()` causes itself to be run again, so this if statement skips a second run
-		if (!editing) return;
-
-		onTextChangeCanceled();
-
-		// TODO: Find a less hacky way to do this
-		if (self) oncommitText?.(self.getValue());
-
-		// Required if value is not changed by the parent component upon update:value event
-		self?.setInputElementValue(self.getValue());
-	}
-
-	function onTextChangeCanceled() {
-		editing = false;
+	function onTextChanged(commitValue: string) {
+		value = commitValue;
 
-		self?.unFocus();
+		oncommitText?.(commitValue);
 	}
 
 	export function focus() {
@@ -44,20 +26,7 @@
 	}
 </script>
 
-<FieldInput
-	class="text-area-input"
-	classes={{ "has-label": Boolean(label) }}
-	bind:value
-	onfocus={onTextFocused}
-	onchange={onTextChanged}
-	ontextChangeCanceled={onTextChangeCanceled}
-	textarea={true}
-	spellcheck={true}
-	{label}
-	{disabled}
-	{tooltip}
-	bind:this={self}
-/>
+<FieldInput class="text-area-input" classes={{ "has-label": Boolean(label) }} {value} oncommitText={onTextChanged} textarea={true} spellcheck={true} {label} {disabled} {tooltip} bind:this={self} />
 
 <style lang="scss" global>
 </style>
diff --git a/frontend/src/components/widgets/inputs/TextInput.svelte b/frontend/src/components/widgets/inputs/TextInput.svelte
index 2a104eebd0..de518bc01c 100644
--- a/frontend/src/components/widgets/inputs/TextInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextInput.svelte
@@ -32,33 +32,17 @@
 	}: Props = $props();
 
 	let self: FieldInput | undefined = $state();
-	let editing = false;
 
 	function onTextFocused() {
-		editing = true;
-
 		self?.selectAllText(value);
 	}
 
 	// Called only when `value` is changed from the <input> element via user input and committed, either with the
 	// enter key (via the `change` event) or when the <input> element is unfocused (with the `blur` event binding)
-	function onTextChanged() {
-		// The `unFocus()` call in `onTextChangeCanceled()` causes itself to be run again, so this if statement skips a second run
-		if (!editing) return;
-
-		onTextChangeCanceled();
-
-		// TODO: Find a less hacky way to do this
-		if (self) oncommitText?.(self.getValue());
-
-		// Required if value is not changed by the parent component upon update:value event
-		self?.setInputElementValue(self.getValue());
-	}
-
-	function onTextChangeCanceled() {
-		editing = false;
+	function onTextChanged(commitValue: string) {
+		value = commitValue;
 
-		self?.unFocus();
+		oncommitText?.(commitValue);
 	}
 
 	export function focus() {
@@ -76,8 +60,7 @@
 	styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}
 	bind:value
 	onfocus={onTextFocused}
-	onchange={onTextChanged}
-	ontextChangeCanceled={onTextChangeCanceled}
+	oncommitText={oncommitText ? onTextChanged : undefined}
 	spellcheck={true}
 	{label}
 	{disabled}

From 6ac1736e7db430ab12c887f593b3b38631de9347 Mon Sep 17 00:00:00 2001
From: Smit <smitp.contact@gmail.com>
Date: Tue, 22 Jul 2025 09:29:46 +0530
Subject: [PATCH 16/16] fix: dropdown input reset state on hover out

---
 .../src/components/widgets/WidgetSpan.svelte  | 22 ++++++++++---------
 .../widgets/inputs/DropdownInput.svelte       | 19 ++++++----------
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index 11b8f33bbd..9f162c5957 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -101,16 +101,18 @@
 		{/if}
 		{@const dropdownInput = narrowWidgetProps(component.props, "DropdownInput")}
 		{#if dropdownInput}
-			<DropdownInput
-				{...exclude(dropdownInput)}
-				onhoverInEntry={(detail) => {
-					return widgetValueUpdate(index, detail);
-				}}
-				onhoverOutEntry={(detail) => {
-					return widgetValueUpdate(index, detail);
-				}}
-				onselectedIndex={(detail) => widgetValueCommitAndUpdate(index, detail)}
-			/>
+			{#key component.widgetId}
+				<DropdownInput
+					{...exclude(dropdownInput)}
+					onhoverInEntry={(detail) => {
+						return widgetValueUpdate(index, detail);
+					}}
+					onhoverOutEntry={(detail) => {
+						return widgetValueUpdate(index, detail);
+					}}
+					onselectedIndex={(detail) => widgetValueCommitAndUpdate(index, detail)}
+				/>
+			{/key}
 		{/if}
 		{@const fontInput = narrowWidgetProps(component.props, "FontInput")}
 		{#if fontInput}
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index a43b54da59..f271b92dc1 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -12,11 +12,11 @@
 
 	type Props = {
 		entries: MenuListEntry[][];
-		selectedIndex?: number | undefined; // When not provided, a dash is displayed
+		selectedIndex?: number; // When not provided, a dash is displayed
 		drawIcon?: boolean;
 		interactive?: boolean;
 		disabled?: boolean;
-		tooltip?: string | undefined;
+		tooltip?: string;
 		minWidth?: number;
 		maxWidth?: number;
 		onhoverOutEntry?: (index: number) => void;
@@ -26,7 +26,7 @@
 
 	let {
 		entries,
-		selectedIndex = undefined,
+		selectedIndex,
 		drawIcon = false,
 		interactive = true,
 		disabled = false,
@@ -40,12 +40,8 @@
 
 	let activeEntry = $state(makeActiveEntry());
 	let activeEntrySkipWatcher = false;
-	let initialSelectedIndex: number | undefined = undefined;
 	let open = $state(false);
-
-	function watchOpen(open: boolean) {
-		initialSelectedIndex = open ? selectedIndex : undefined;
-	}
+	let initialSelectedIndex: number | undefined = selectedIndex;
 
 	// Called only when `selectedIndex` is changed from outside this component
 	function watchSelectedIndex(_?: typeof selectedIndex) {
@@ -70,7 +66,9 @@
 		} 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) onhoverInEntry?.(initialSelectedIndex);
-			onselectedIndex?.(getEntryIndex(activeEntry));
+			const entryIndex = getEntryIndex(activeEntry);
+			onselectedIndex?.(entryIndex);
+			initialSelectedIndex = entryIndex;
 		}
 	}
 
@@ -101,9 +99,6 @@
 	$effect(() => {
 		watchActiveEntry(activeEntry);
 	});
-	$effect(() => {
-		watchOpen(open);
-	});
 </script>
 
 <LayoutRow