Add input fields and stuff

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>
 	);
 };