Inspector frontend UI (#68)

This PR begins fleshing out the front-end UI for inspecting the selected
entity's components.

### Implemented
* Support for the `Name` component
* Placeholder/WIP support for the `Transform` component

### To-do
* Support for sending changes made in the inspector back to Bevy
* A slider/field combo widget for numeric values (can be adapted from
  [this StackBlitz](https://stackblitz.com/edit/angular-wfikuy?file=src%2Ffloat-input%2Ffloat-input.component.ts))
* Quat -> Euler angles conversion ([example math here](https://github.com/dannymcgee/3DGameMath/blob/5cb7a8ff9310565329e57751cd8b9c33e9bd4cb7/libs/Math/include/math/quat.inl.hpp#L56-L78),
  or use a 3rd-party math library)

### Known issues
* Selecting entities from the hierarchy doesn't always update the
  components list. I suspect this is the same issue as #39

studio-ui/src/lib/forms/text-field.element.ts

@@ -0,0 +1,41 @@
+import { on } from "@storyteller/framework";
+import { html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { FormFieldBaseElement } from "./form-field-base.element";
+
+import styles from "./text-field.element.scss?inline";
+
+@customElement("sts-text-field")
+export class TextFieldElement extends FormFieldBaseElement {
+	static override styles = unsafeCSS(styles);
+	static override shadowRootOptions: ShadowRootInit = {
+		mode: "open",
+		delegatesFocus: true,
+	}
+
+	@property() value = "";
+
+	@on("keydown")
+	@on("keyup")
+	blockKeypressBubbling(event: KeyboardEvent): void {
+		if (event.key !== "Alt" && event.key !== "Control")
+			event.stopPropagation();
+	}
+
+	#onInput(event: InputEvent): void {
+		const updated = (event.target as HTMLInputElement).value;
+		console.log("updated:", updated);
+
+		this.dispatchEvent(new CustomEvent("value-change", { detail: updated }));
+	}
+
+	protected override render = () => html`
+		<input
+			class="input"
+			type="text"
+			.value=${this.value}
+			@input=${this.#onInput}
+		/>
+	`;
+}