Blocking buttons (#69)

![image](https://github.com/storytold/storyteller-bevy/assets/10954133/6c963b6c-6551-4379-854e-9f3f57cb173d)

---------

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

studio-frontend/src/app/app.element.ts

@@ -31,6 +31,8 @@ import "@storyteller/studio-web/transform-toolbar";
 import "./anim-editor.element";
 import "./help.element";
 
+import "./blocking.element";
+
 import "./app.element.scss";
 
 @customElement("app-root")
@@ -149,6 +151,8 @@ export class AppElement extends LitElement {
 				<sts-anim-editor
 					class="timeline v-end h-start h-before-hierarchy"
 				></sts-anim-editor>
+
+				<sts-blocking></sts-blocking>
 			` : nothing}
 
 			<!-- Dialogs and modals -->

studio-frontend/src/app/blocking.element.scss

@@ -0,0 +1,8 @@
+:host {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 1rem;
+	position: absolute;
+	top: 60px;
+	left: 16px;
+}

studio-frontend/src/app/blocking.element.ts

@@ -0,0 +1,41 @@
+
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+
+import styles from "./blocking.element.scss?inline";
+import { customElement } from "lit/decorators.js";
+import * as studio from "@storyteller/studio";
+
+@customElement("sts-blocking")
+export class BlockingElement extends LitElement {
+    static override styles = unsafeCSS(styles);
+
+    override render = () => html`
+        <sts-button
+            @click=${() => {
+                studio.dispatchBlockingCommand(studio.BlockingCommand.Cube);
+            }}>
+            Cube
+        </sts-button>
+
+        <sts-button
+            @click=${() => {
+                studio.dispatchBlockingCommand(studio.BlockingCommand.Sphere);
+            }}>
+            Sphere
+        </sts-button>
+
+        <sts-button
+            @click=${() => {
+                studio.dispatchBlockingCommand(studio.BlockingCommand.Cylinder);
+            }}>
+            Cylinder
+        </sts-button>
+
+        <sts-button
+            @click=${() => {
+                studio.dispatchBlockingCommand(studio.BlockingCommand.Torus);
+            }}>
+            Torus
+        </sts-button>
+    `;
+}