diff --git a/bun.lock b/bun.lock
index b62a74e..26670f0 100644
--- a/bun.lock
+++ b/bun.lock
@@ -54,23 +54,23 @@
 
     "@babel/types": ["@babel/types@7.28.4", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1" } }, "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q=="],
 
-    "@biomejs/biome": ["@biomejs/biome@2.3.7", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.3.7", "@biomejs/cli-darwin-x64": "2.3.7", "@biomejs/cli-linux-arm64": "2.3.7", "@biomejs/cli-linux-arm64-musl": "2.3.7", "@biomejs/cli-linux-x64": "2.3.7", "@biomejs/cli-linux-x64-musl": "2.3.7", "@biomejs/cli-win32-arm64": "2.3.7", "@biomejs/cli-win32-x64": "2.3.7" }, "bin": { "biome": "bin/biome" } }, "sha512-CTbAS/jNAiUc6rcq94BrTB8z83O9+BsgWj2sBCQg9rD6Wkh2gjfR87usjx0Ncx0zGXP1NKgT7JNglay5Zfs9jw=="],
+    "@biomejs/biome": ["@biomejs/biome@2.3.8", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.3.8", "@biomejs/cli-darwin-x64": "2.3.8", "@biomejs/cli-linux-arm64": "2.3.8", "@biomejs/cli-linux-arm64-musl": "2.3.8", "@biomejs/cli-linux-x64": "2.3.8", "@biomejs/cli-linux-x64-musl": "2.3.8", "@biomejs/cli-win32-arm64": "2.3.8", "@biomejs/cli-win32-x64": "2.3.8" }, "bin": { "biome": "bin/biome" } }, "sha512-Qjsgoe6FEBxWAUzwFGFrB+1+M8y/y5kwmg5CHac+GSVOdmOIqsAiXM5QMVGZJ1eCUCLlPZtq4aFAQ0eawEUuUA=="],
 
-    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.3.7", "", { "os": "darwin", "cpu": "arm64" }, "sha512-LirkamEwzIUULhXcf2D5b+NatXKeqhOwilM+5eRkbrnr6daKz9rsBL0kNZ16Hcy4b8RFq22SG4tcLwM+yx/wFA=="],
+    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.3.8", "", { "os": "darwin", "cpu": "arm64" }, "sha512-HM4Zg9CGQ3txTPflxD19n8MFPrmUAjaC7PQdLkugeeC0cQ+PiVrd7i09gaBS/11QKsTDBJhVg85CEIK9f50Qww=="],
 
-    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.3.7", "", { "os": "darwin", "cpu": "x64" }, "sha512-Q4TO633kvrMQkKIV7wmf8HXwF0dhdTD9S458LGE24TYgBjSRbuhvio4D5eOQzirEYg6eqxfs53ga/rbdd8nBKg=="],
+    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.3.8", "", { "os": "darwin", "cpu": "x64" }, "sha512-lUDQ03D7y/qEao7RgdjWVGCu+BLYadhKTm40HkpJIi6kn8LSv5PAwRlew/DmwP4YZ9ke9XXoTIQDO1vAnbRZlA=="],
 
-    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.3.7", "", { "os": "linux", "cpu": "arm64" }, "sha512-inHOTdlstUBzgjDcx0ge71U4SVTbwAljmkfi3MC5WzsYCRhancqfeL+sa4Ke6v2ND53WIwCFD5hGsYExoI3EZQ=="],
+    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.3.8", "", { "os": "linux", "cpu": "arm64" }, "sha512-Uo1OJnIkJgSgF+USx970fsM/drtPcQ39I+JO+Fjsaa9ZdCN1oysQmy6oAGbyESlouz+rzEckLTF6DS7cWse95g=="],
 
-    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.3.7", "", { "os": "linux", "cpu": "arm64" }, "sha512-/afy8lto4CB8scWfMdt+NoCZtatBUF62Tk3ilWH2w8ENd5spLhM77zKlFZEvsKJv9AFNHknMl03zO67CiklL2Q=="],
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.3.8", "", { "os": "linux", "cpu": "arm64" }, "sha512-PShR4mM0sjksUMyxbyPNMxoKFPVF48fU8Qe8Sfx6w6F42verbwRLbz+QiKNiDPRJwUoMG1nPM50OBL3aOnTevA=="],
 
-    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.3.7", "", { "os": "linux", "cpu": "x64" }, "sha512-fJMc3ZEuo/NaMYo5rvoWjdSS5/uVSW+HPRQujucpZqm2ZCq71b8MKJ9U4th9yrv2L5+5NjPF0nqqILCl8HY/fg=="],
+    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.3.8", "", { "os": "linux", "cpu": "x64" }, "sha512-QDPMD5bQz6qOVb3kiBui0zKZXASLo0NIQ9JVJio5RveBEFgDgsvJFUvZIbMbUZT3T00M/1wdzwWXk4GIh0KaAw=="],
 
-    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.3.7", "", { "os": "linux", "cpu": "x64" }, "sha512-CQUtgH1tIN6e5wiYSJqzSwJumHYolNtaj1dwZGCnZXm2PZU1jOJof9TsyiP3bXNDb+VOR7oo7ZvY01If0W3iFQ=="],
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.3.8", "", { "os": "linux", "cpu": "x64" }, "sha512-YGLkqU91r1276uwSjiUD/xaVikdxgV1QpsicT0bIA1TaieM6E5ibMZeSyjQ/izBn4tKQthUSsVZacmoJfa3pDA=="],
 
-    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.3.7", "", { "os": "win32", "cpu": "arm64" }, "sha512-aJAE8eCNyRpcfx2JJAtsPtISnELJ0H4xVVSwnxm13bzI8RwbXMyVtxy2r5DV1xT3WiSP+7LxORcApWw0LM8HiA=="],
+    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.3.8", "", { "os": "win32", "cpu": "arm64" }, "sha512-H4IoCHvL1fXKDrTALeTKMiE7GGWFAraDwBYFquE/L/5r1927Te0mYIGseXi4F+lrrwhSWbSGt5qPFswNoBaCxg=="],
 
-    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.3.7", "", { "os": "win32", "cpu": "x64" }, "sha512-pulzUshqv9Ed//MiE8MOUeeEkbkSHVDVY5Cz5wVAnH1DUqliCQG3j6s1POaITTFqFfo7AVIx2sWdKpx/GS+Nqw=="],
+    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.3.8", "", { "os": "win32", "cpu": "x64" }, "sha512-RguzimPoZWtBapfKhKjcWXBVI91tiSprqdBYu7tWhgN8pKRZhw24rFeNZTNf6UiBfjCYCi9eFQs/JzJZIhuK4w=="],
 
     "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.10", "", { "os": "aix", "cpu": "ppc64" }, "sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw=="],
 
@@ -278,7 +278,7 @@
 
     "validate-html-nesting": ["validate-html-nesting@1.2.3", "", {}, "sha512-kdkWdCl6eCeLlRShJKbjVOU2kFKxMF8Ghu50n+crEoyx+VKm3FxAxF9z4DCy6+bbTOqNW0+jcIYRnjoIRzigRw=="],
 
-    "vite": ["vite@7.2.4", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w=="],
+    "vite": ["vite@7.2.6", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ=="],
 
     "vite-plugin-solid": ["vite-plugin-solid@2.11.10", "", { "dependencies": { "@babel/core": "^7.23.3", "@types/babel__core": "^7.20.4", "babel-preset-solid": "^1.8.4", "merge-anything": "^5.1.7", "solid-refresh": "^0.6.3", "vitefu": "^1.0.4" }, "peerDependencies": { "@testing-library/jest-dom": "^5.16.6 || ^5.17.0 || ^6.*", "solid-js": "^1.7.2", "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" }, "optionalPeers": ["@testing-library/jest-dom"] }, "sha512-Yr1dQybmtDtDAHkii6hXuc1oVH9CPcS/Zb2jN/P36qqcrkNnVPsMTzQ06jyzFPFjj3U1IYKMVt/9ZqcwGCEbjw=="],
 
diff --git a/package.json b/package.json
index 55effe4..f5c11e1 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,11 @@
 		"dev": "vite"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.3.7",
+		"@biomejs/biome": "2.3.8",
 		"@types/bun": "1.3.3",
 		"lz-string": "1.5.0",
 		"solid-js": "1.9.10",
-		"vite": "7.2.4",
+		"vite": "7.2.6",
 		"vite-plugin-solid": "2.11.10"
 	},
 	"peerDependencies": {
diff --git a/tools/controls/InputField.css b/tools/controls/InputField.css
new file mode 100644
index 0000000..a1c8492
--- /dev/null
+++ b/tools/controls/InputField.css
@@ -0,0 +1,42 @@
+.input-field {
+	width: 100%;
+	display: block;
+	background: var(--c-bg-2);
+	color: var(--c-fg-1);
+	border-radius: var(--sp-1);
+}
+
+.input-field input {
+	width: 100%;
+	height: 2em;
+	font-size: medium;
+	margin: 0;
+	padding: var(--sp-1);
+	border: none;
+	background: var(--c-bg-2);
+	color: inherit;
+	border-radius: var(--sp-1);
+}
+
+.input-field.icon {
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+
+	svg {
+		padding: var(--sp-1);
+		display: inline-block;
+		height: 100%;
+		width: auto;
+	}
+
+	&:has(:focus) {
+		outline-width: 2px;
+		outline-style: solid;
+		outline-color: var(--c-primary);
+
+		input {
+			outline: none;
+		}
+	}
+}
diff --git a/tools/controls/InputField.tsx b/tools/controls/InputField.tsx
new file mode 100644
index 0000000..737d825
--- /dev/null
+++ b/tools/controls/InputField.tsx
@@ -0,0 +1,24 @@
+import "./InputField.css";
+import type { Component, JSX } from "solid-js";
+
+export const InputField: Component<{
+	name: string;
+	value: string;
+	type?: string;
+	icon?: JSX.Element;
+	children?: JSX.Element;
+	onChange?: (value: string) => void;
+	onInput?: (value: string) => void;
+}> = (props) => (
+	<label class="input-field" classList={{ icon: !!props.icon }}>
+		{props.children}
+		{props.icon}
+		<input
+			type={props.type ?? "text"}
+			name={props.name}
+			value={props.value}
+			onChange={(e) => props.onChange?.(e.target.value)}
+			onInput={(e) => props.onInput?.(e.target.value)}
+		/>
+	</label>
+);
diff --git a/tools/controls/controls.module.css b/tools/controls/RangeSlider.css
similarity index 89%
rename from tools/controls/controls.module.css
rename to tools/controls/RangeSlider.css
index 4fd07cf..7cec6fb 100644
--- a/tools/controls/controls.module.css
+++ b/tools/controls/RangeSlider.css
@@ -1,6 +1,6 @@
-.rangeSlider {
+.range-slider {
 	width: 100%;
-	color: var(--c-fg-2);
+	color: var(--c-fg-1);
 	display: flex;
 	flex-flow: row nowrap;
 	justify-content: center;
@@ -8,10 +8,9 @@
 	gap: var(--sp-2);
 	font-family: var(--font-sans);
 	font-weight: bold;
-	padding: var(--sp-2);
 }
 
-.rangeSlider [type="range"] {
+.range-slider [type="range"] {
 	cursor: pointer;
 	appearance: none;
 	background: transparent;
@@ -28,7 +27,7 @@
 		height: var(--sp-2);
 		border-radius: var(--sp-3);
 		color: transparent;
-		background: var(--c-bg-3);
+		background: var(--c-bg-2);
 		border: none;
 	}
 	&::-webkit-slider-thumb {
@@ -52,7 +51,7 @@
 		height: var(--sp-2);
 		border-radius: var(--sp-3);
 		color: transparent;
-		background: var(--c-bg-3);
+		background: var(--c-bg-2);
 		border: none;
 	}
 	&::-moz-range-thumb {
diff --git a/tools/controls/RangeSlider.tsx b/tools/controls/RangeSlider.tsx
index bc439ca..1a72e5b 100644
--- a/tools/controls/RangeSlider.tsx
+++ b/tools/controls/RangeSlider.tsx
@@ -1,5 +1,5 @@
+import "./RangeSlider.css";
 import type { Component, JSX } from "solid-js";
-import style from "./controls.module.css";
 
 export const RangeSlider: Component<{
 	name: string;
@@ -11,7 +11,7 @@ export const RangeSlider: Component<{
 	onChange?: (value: number) => void;
 	onInput?: (value: number) => void;
 }> = (props) => (
-	<label class={style.rangeSlider}>
+	<label class="range-slider">
 		{props.children}
 		<input
 			type="range"
diff --git a/tools/icons/ArrowAutofitHeight.tsx b/tools/icons/ArrowAutofitHeight.tsx
new file mode 100644
index 0000000..4ec2a8b
--- /dev/null
+++ b/tools/icons/ArrowAutofitHeight.tsx
@@ -0,0 +1,17 @@
+export const ArrowAutofitHeightIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="M12 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6m6 10v7m0-18v7m-3 8l3 3l3-3M15 6l3-3l3 3"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/ArrowAutofitWidth.tsx b/tools/icons/ArrowAutofitWidth.tsx
new file mode 100644
index 0000000..a8f9b22
--- /dev/null
+++ b/tools/icons/ArrowAutofitWidth.tsx
@@ -0,0 +1,17 @@
+export const ArrowAutofitWidthIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="M4 12V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v6m-10 6H3m18 0h-7m-8-3l-3 3l3 3m12-6l3 3l-3 3"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/File.tsx b/tools/icons/File.tsx
new file mode 100644
index 0000000..294418f
--- /dev/null
+++ b/tools/icons/File.tsx
@@ -0,0 +1,19 @@
+export const FileIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<g
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+		>
+			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+			<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2"></path>
+		</g>
+	</svg>
+);
diff --git a/tools/icons/FileDelta.tsx b/tools/icons/FileDelta.tsx
new file mode 100644
index 0000000..5465fc5
--- /dev/null
+++ b/tools/icons/FileDelta.tsx
@@ -0,0 +1,20 @@
+export const FileDeltaIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<g
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+		>
+			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+			<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2"></path>
+			<path d="M9 17h6l-3-6z"></path>
+		</g>
+	</svg>
+);
diff --git a/tools/icons/FileMusic.tsx b/tools/icons/FileMusic.tsx
new file mode 100644
index 0000000..05c5f84
--- /dev/null
+++ b/tools/icons/FileMusic.tsx
@@ -0,0 +1,20 @@
+export const FileMusicIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<g
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+		>
+			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+			<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2"></path>
+			<path d="M10 16a1 1 0 1 0 2 0a1 1 0 1 0-2 0m2 0v-5l2 1"></path>
+		</g>
+	</svg>
+);
diff --git a/tools/icons/FilePencil.tsx b/tools/icons/FilePencil.tsx
new file mode 100644
index 0000000..8a64a55
--- /dev/null
+++ b/tools/icons/FilePencil.tsx
@@ -0,0 +1,20 @@
+export const FilePencilIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<g
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+		>
+			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+			<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2"></path>
+			<path d="m10 18l5-5a1.414 1.414 0 0 0-2-2l-5 5v2z"></path>
+		</g>
+	</svg>
+);
diff --git a/tools/icons/FileUnknown.tsx b/tools/icons/FileUnknown.tsx
new file mode 100644
index 0000000..3d66755
--- /dev/null
+++ b/tools/icons/FileUnknown.tsx
@@ -0,0 +1,20 @@
+export const FileUnknownIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<g
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+		>
+			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+			<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2m-5-4v.01"></path>
+			<path d="M12 14a1.5 1.5 0 1 0-1.14-2.474"></path>
+		</g>
+	</svg>
+);
diff --git a/tools/icons/FloppyDisc.tsx b/tools/icons/FloppyDisc.tsx
new file mode 100644
index 0000000..d33b8f0
--- /dev/null
+++ b/tools/icons/FloppyDisc.tsx
@@ -0,0 +1,19 @@
+export const FloppyDiscIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<g
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+		>
+			<path d="M6 4h10l4 4v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2"></path>
+			<path d="M10 14a2 2 0 1 0 4 0a2 2 0 1 0-4 0m4-10v4H8V4"></path>
+		</g>
+	</svg>
+);
diff --git a/tools/icons/Folder.tsx b/tools/icons/Folder.tsx
new file mode 100644
index 0000000..434fd75
--- /dev/null
+++ b/tools/icons/Folder.tsx
@@ -0,0 +1,17 @@
+export const FolderIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/FolderOpen.tsx b/tools/icons/FolderOpen.tsx
new file mode 100644
index 0000000..1268832
--- /dev/null
+++ b/tools/icons/FolderOpen.tsx
@@ -0,0 +1,17 @@
+export const FolderOpenIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="m5 19l2.757-7.351A1 1 0 0 1 8.693 11H21a1 1 0 0 1 .986 1.164l-.996 5.211A2 2 0 0 1 19.026 19za2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4l3 3h7a2 2 0 0 1 2 2v2"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/Lasso.tsx b/tools/icons/Lasso.tsx
new file mode 100644
index 0000000..3ca1acc
--- /dev/null
+++ b/tools/icons/Lasso.tsx
@@ -0,0 +1,20 @@
+export const LassoIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<g
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+		>
+			<path d="M4.028 13.252C3.371 12.28 3 11.174 3 10c0-3.866 4.03-7 9-7s9 3.134 9 7s-4.03 7-9 7c-1.913 0-3.686-.464-5.144-1.255"></path>
+			<path d="M3 15a2 2 0 1 0 4 0a2 2 0 1 0-4 0"></path>
+			<path d="M5 17c0 1.42.316 2.805 1 4"></path>
+		</g>
+	</svg>
+);
diff --git a/tools/icons/LassoPolygon.tsx b/tools/icons/LassoPolygon.tsx
new file mode 100644
index 0000000..816448b
--- /dev/null
+++ b/tools/icons/LassoPolygon.tsx
@@ -0,0 +1,20 @@
+export const LassoPolygonIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<g
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+		>
+			<path d="M4.028 13.252L3 10l2-7l7 5l8-3l1 9l-9 3l-5.144-1.255"></path>
+			<path d="M3 15a2 2 0 1 0 4 0a2 2 0 1 0-4 0"></path>
+			<path d="M5 17c0 1.42.316 2.805 1 4"></path>
+		</g>
+	</svg>
+);
diff --git a/tools/icons/LayoutGrid.tsx b/tools/icons/LayoutGrid.tsx
new file mode 100644
index 0000000..85ac2d8
--- /dev/null
+++ b/tools/icons/LayoutGrid.tsx
@@ -0,0 +1,17 @@
+export const LayoutGridIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm10 0a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zM4 15a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm10 0a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/Pencil.tsx b/tools/icons/Pencil.tsx
new file mode 100644
index 0000000..d13e69a
--- /dev/null
+++ b/tools/icons/Pencil.tsx
@@ -0,0 +1,17 @@
+export const PencilIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="M4 20h4L18.5 9.5a2.828 2.828 0 1 0-4-4L4 16zm9.5-13.5l4 4"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/Polygon.tsx b/tools/icons/Polygon.tsx
new file mode 100644
index 0000000..9f52e63
--- /dev/null
+++ b/tools/icons/Polygon.tsx
@@ -0,0 +1,17 @@
+export const PolygonIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="M10 5a2 2 0 1 0 4 0a2 2 0 1 0-4 0m7 3a2 2 0 1 0 4 0a2 2 0 1 0-4 0M3 11a2 2 0 1 0 4 0a2 2 0 1 0-4 0m10 8a2 2 0 1 0 4 0a2 2 0 1 0-4 0M6.5 9.5l3.5-3m4-1L17 7m1.5 3L16 17m-2.5.5l-7-5"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/Refresh.tsx b/tools/icons/Refresh.tsx
new file mode 100644
index 0000000..6a4e979
--- /dev/null
+++ b/tools/icons/Refresh.tsx
@@ -0,0 +1,17 @@
+export const RefreshIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/RefreshAlert.tsx b/tools/icons/RefreshAlert.tsx
new file mode 100644
index 0000000..54a8b8d
--- /dev/null
+++ b/tools/icons/RefreshAlert.tsx
@@ -0,0 +1,17 @@
+export const RefreshAlertIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4m-4-6v3m0 3h.01"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/RefreshDot.tsx b/tools/icons/RefreshDot.tsx
new file mode 100644
index 0000000..19c6067
--- /dev/null
+++ b/tools/icons/RefreshDot.tsx
@@ -0,0 +1,17 @@
+export const RefreshDotIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4m-5-3a1 1 0 1 0 2 0a1 1 0 1 0-2 0"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/Script.tsx b/tools/icons/Script.tsx
new file mode 100644
index 0000000..a6f5b3f
--- /dev/null
+++ b/tools/icons/Script.tsx
@@ -0,0 +1,17 @@
+export const ScriptIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="M17 20H6a3 3 0 0 1 0-6h11a3 3 0 0 0 0 6h1a3 3 0 0 0 3-3V6a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v8"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/StackBackward.tsx b/tools/icons/StackBackward.tsx
new file mode 100644
index 0000000..b14e098
--- /dev/null
+++ b/tools/icons/StackBackward.tsx
@@ -0,0 +1,19 @@
+export const StackBackwardIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<g
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+		>
+			<path d="m14 12l6-3l-8-4l-8 4l6 3"></path>
+			<path fill="currentColor" d="m10 12l-6 3l8 4l8-4l-6-3l-2 1z"></path>
+		</g>
+	</svg>
+);
diff --git a/tools/icons/StackForward.tsx b/tools/icons/StackForward.tsx
new file mode 100644
index 0000000..69ddffb
--- /dev/null
+++ b/tools/icons/StackForward.tsx
@@ -0,0 +1,19 @@
+export const StackForwardIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<g
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+		>
+			<path fill="currentColor" d="M12 5L4 9l8 4l8-4z"></path>
+			<path d="m10 12l-6 3l8 4l8-4l-6-3"></path>
+		</g>
+	</svg>
+);
diff --git a/tools/icons/TransformPoint.tsx b/tools/icons/TransformPoint.tsx
new file mode 100644
index 0000000..ae56ad1
--- /dev/null
+++ b/tools/icons/TransformPoint.tsx
@@ -0,0 +1,17 @@
+export const TransformPointIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="M3 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm0 14a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zM17 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zm0 14a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM11 5h2m-8 6v2m14-2v2m-8 6h2"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/ZoomScan.tsx b/tools/icons/ZoomScan.tsx
new file mode 100644
index 0000000..f514b3b
--- /dev/null
+++ b/tools/icons/ZoomScan.tsx
@@ -0,0 +1,17 @@
+export const ZoomScanIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={2}
+			d="M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2m8-16h2a2 2 0 0 1 2 2v2m-4 12h2a2 2 0 0 0 2-2v-2M8 11a3 3 0 1 0 6 0a3 3 0 0 0-6 0m8 5l-2.5-2.5"
+		></path>
+	</svg>
+);
diff --git a/tools/icons/index.ts b/tools/icons/index.ts
new file mode 100644
index 0000000..c245b88
--- /dev/null
+++ b/tools/icons/index.ts
@@ -0,0 +1,23 @@
+export * from "./ArrowAutofitHeight.tsx";
+export * from "./ArrowAutofitWidth.tsx";
+export * from "./File.tsx";
+export * from "./FileDelta.tsx";
+export * from "./FileMusic.tsx";
+export * from "./FilePencil.tsx";
+export * from "./FileUnknown.tsx";
+export * from "./FloppyDisc.tsx";
+export * from "./Folder.tsx";
+export * from "./FolderOpen.tsx";
+export * from "./Lasso.tsx";
+export * from "./LassoPolygon.tsx";
+export * from "./LayoutGrid.tsx";
+export * from "./Pencil.tsx";
+export * from "./Polygon.tsx";
+export * from "./Refresh.tsx";
+export * from "./RefreshAlert.tsx";
+export * from "./RefreshDot.tsx";
+export * from "./Script.tsx";
+export * from "./StackBackward.tsx";
+export * from "./StackForward.tsx";
+export * from "./TransformPoint.tsx";
+export * from "./ZoomScan.tsx";
diff --git a/tools/main.module.css b/tools/main.css
similarity index 85%
rename from tools/main.module.css
rename to tools/main.css
index e5c7594..0a6e976 100644
--- a/tools/main.module.css
+++ b/tools/main.css
@@ -1,4 +1,4 @@
-.devTools {
+.dev-tools {
 	--font-sans:
 		ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
 		"Segoe UI Symbol", "Noto Color Emoji";
@@ -85,16 +85,20 @@
 	}
 }
 
-.toolBar {
+.tool-bar {
 	overflow: hidden;
 	border-right: 1px solid var(--c-fg-3);
-	background: var(--c-bg-1);
+	background: var(--c-bg-0);
 	color: var(--c-fg-1);
 	width: 100%;
 	height: 100%;
+	padding: var(--sp-2);
+	display: flex;
+	flex-flow: column nowrap;
+	gap: var(--sp-2);
 }
 
-.toolBarResize {
+.tool-bar-resize {
 	position: absolute;
 	top: 0;
 	right: -3px;
@@ -103,3 +107,14 @@
 	cursor: ew-resize;
 	user-select: none;
 }
+
+.scene-props {
+	display: flex;
+	gap: var(--sp-2);
+	flex-flow: row wrap;
+
+	& > :not(:first-child) {
+		width: calc(50% - var(--sp-1));
+		flex-basis: calc(50% - var(--sp-1));
+	}
+}
diff --git a/tools/main.tsx b/tools/main.tsx
index 83987c0..52601d6 100644
--- a/tools/main.tsx
+++ b/tools/main.tsx
@@ -1,8 +1,15 @@
+import "./main.css";
 import { type Component, createSignal, onMount } from "solid-js";
 import { render } from "solid-js/web";
 import { setScale, viewport } from "#/engine/Viewport.ts";
+import { InputField } from "#/tools/controls/InputField.tsx";
 import { RangeSlider } from "#/tools/controls/RangeSlider.tsx";
-import style from "./main.module.css";
+import {
+	ArrowAutofitHeightIcon,
+	ArrowAutofitWidthIcon,
+	FileIcon,
+	ZoomScanIcon,
+} from "./icons/index.ts";
 
 function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
 	gameContainer.style = `position: relative; top: 0; left: ${width}px; width: ${document.body.offsetWidth - width}px;`;
@@ -42,8 +49,8 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 	});
 
 	return (
-		<div class={style.devTools} style={{ width: `${width()}px` }}>
-			<div class={style.toolBar}>
+		<div class="dev-tools" style={{ width: `${width()}px` }}>
+			<div class="tool-bar">
 				<RangeSlider
 					name="scale"
 					min={1}
@@ -51,9 +58,31 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 					step={1}
 					value={viewport.initialScale}
 					onInput={setScale}
-				/>
+				>
+					<ZoomScanIcon />
+				</RangeSlider>
+
+				<div class="scene-props">
+					<InputField
+						name="file"
+						value="/foo/bar"
+						icon={FileIcon()}
+					></InputField>
+					<InputField
+						type="number"
+						name="width"
+						value="42"
+						icon={ArrowAutofitWidthIcon()}
+					></InputField>
+					<InputField
+						type="number"
+						name="height"
+						value="24"
+						icon={ArrowAutofitHeightIcon()}
+					></InputField>
+				</div>
 			</div>
-			<div class={style.toolBarResize} onMouseDown={startResizing}></div>
+			<div class="tool-bar-resize" onMouseDown={startResizing}></div>
 		</div>
 	);
 };