Bootstrap Image Generator application (#53)

This PR begins scaffolding the Stable Diffusion Turbo application (title
TBD), which is a separate frontend for Storyteller Engine which focuses
on image generation.

### Design Overview

* The application renders a "split-screen" view, with Storyteller Studio
  on the left, and the Stable Diffusion Turbo output on the right
* When changes are made in the Studio editor:
  - A screenshot is taken from the Bevy application
  - Screenshot is piped into Stable Diffusion Turbo model
  - Model output is rendered to the screen
* This all happens in as close to real-time as possible

### Work completed in this PR

* The `studio-frontend` project has been (somewhat crudely) refactored
  to split most of its components into reusable libraries
  - `studio-ui` is a use-case-agnostic design system library for core UI
    components. These are "dumb" components which are controlled
    via `@property` inputs and send `CustomEvent`s in response to user
    input.
  - `studio-frontend` is a collection of reusable Storyteller Studio
    widgets. These are "smart" components which depend on
    `@storyteller/studio` directly, manage their own state, and require very
    little configuration or styling. They are designed to be drop-in
    building blocks that can be reused between various frontends.
* The new application has been bootstrapped as `image-generator-demo`
  - Currently, this simply grabs screenshots from the Bevy application and
    renders those screenshots on the right side of the split-screen view. A
    future PR will wire up to the Storyteller.ai backend to pipe these
    screenshots through Stable Diffusion Turbo, and render that model's
    output instead.

### Testing

* Install dependencies as described in the repo's README
* Run `npx nx serve image-generator-demo`
* Open [localhost:4200](http://localhost:4200) in your browser
  - Use the camera controller in the left side of the view to manipulate
    the Bevy scene
  - Verify the right side of the view updates with a fresh screenshot at a
    rate of ~5 fps
* Toggle the "Realtime Capture" checkbox
  - Verify the right side view no longer updates while the user is
    actively manipulating the editor
  - This should allow the app to run smoother on lower-spec hardware

---------

Co-authored-by: Danny McGee <dannymcgee@gmail.com>

studio-web/src/lib/transform-toolbar.element.ts

@@ -0,0 +1,103 @@
+import * as studio from "@storyteller/studio";
+import { TransformSpace, TransformType } from "@storyteller/studio";
+import { match } from "@storyteller/utility";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+import "@storyteller/studio-ui/icon";
+import "@storyteller/studio-ui/toolbar";
+
+import styles from "./transform-toolbar.element.scss?inline";
+
+@customElement("sts-transform-toolbar")
+export class TransformToolbarElement extends LitElement {
+	static override styles = unsafeCSS(styles);
+
+	get space() { return this._space; }
+	@state() private _space = TransformSpace.Local;
+
+	get type() { return this._type; }
+	@state() private _type = TransformType.Translate;
+
+	#onSpaceChange(event: InputEvent): void {
+		const { value } = event.target as HTMLInputElement;
+		this._space = match (value, {
+			"local": () => TransformSpace.Local,
+			"world": () => TransformSpace.World,
+			_: () => {
+				throw new Error(`Unknown transform space: "${value}"`);
+			}
+		});
+
+		studio.setTransformSpace(this._space);
+	}
+
+	#onTypeChange(event: InputEvent): void {
+		const { name, checked } = event.target as HTMLInputElement;
+		const flag = match (name, {
+			"translate": () => TransformType.Translate,
+			"rotate": () => TransformType.Rotate,
+			"scale": () => TransformType.Scale,
+			_: () => {
+				throw new Error(`Unknown transform type: "${name}"`);
+			}
+		});
+
+		if (checked) this._type |= flag;
+		else this._type &= ~flag;
+
+		studio.setTransformType(this._type);
+	}
+
+	protected override render = () => html`
+		<sts-toolbar>
+			<sts-toolbar-group>
+				<label class="btn-toggle">
+					<sts-icon icon="cube">Local</sts-icon>
+					<input type="radio"
+						name="transform-space"
+						value="local"
+						?checked=${this._space === TransformSpace.Local}
+						@input=${this.#onSpaceChange}
+					/>
+				</label>
+				<label class="btn-toggle">
+					<sts-icon icon="globe">Global</sts-icon>
+					<input type="radio"
+						name="transform-space"
+						value="world"
+						?checked=${this._space === TransformSpace.World}
+						@input=${this.#onSpaceChange}
+					/>
+				</label>
+			</sts-toolbar-group>
+			<sts-toolbar-group>
+				<label class="btn-toggle">
+					<sts-icon icon="up-down-left-right">Translate</sts-icon>
+					<input type="checkbox"
+						name="translate"
+						?checked=${Boolean(this._type & TransformType.Translate)}
+						@input=${this.#onTypeChange}
+					/>
+				</label>
+				<label class="btn-toggle">
+					<sts-icon icon="rotate">Rotate</sts-icon>
+					<input type="checkbox"
+						name="rotate"
+						?checked=${Boolean(this._type & TransformType.Rotate)}
+						@input=${this.#onTypeChange}
+					/>
+				</label>
+				<label class="btn-toggle">
+					<sts-icon icon="scale">Scale</sts-icon>
+					<input type="checkbox"
+						name="scale"
+						disabled
+						?checked=${Boolean(this._type & TransformType.Scale)}
+						@input=${this.#onTypeChange}
+					/>
+				</label>
+			</sts-toolbar-group>
+		</sts-toolbar>
+	`;
+}