Add demo artwork

frontend/src/components/floating-menus/DialogModal.svelte

@@ -84,6 +84,10 @@
 				height: auto;
 			}
 
+			.image-label {
+				border-radius: 2px;
+			}
+
 			.panic-buttons-row {
 				height: 32px;
 				align-items: center;

frontend/src/components/widgets/WidgetRow.svelte

@@ -24,6 +24,7 @@
 	import TextAreaInput from "@graphite/components/widgets/inputs/TextAreaInput.svelte";
 	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import ImageLabel from "@graphite/components/widgets/labels/ImageLabel.svelte";
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import { getContext } from "svelte";
@@ -120,6 +121,10 @@
 		{#if iconLabel}
 			<IconLabel {...exclude(iconLabel)} />
 		{/if}
+		{@const imageLabel = narrowWidgetProps(component.props, "ImageLabel")}
+		{#if imageLabel}
+			<ImageLabel {...exclude(imageLabel)} />
+		{/if}
 		{@const layerReferenceInput = narrowWidgetProps(component.props, "LayerReferenceInput")}
 		{#if layerReferenceInput}
 			<LayerReferenceInput {...exclude(layerReferenceInput)} on:value={({ detail }) => updateLayout(index, detail)} />

frontend/src/components/widgets/labels/ImageLabel.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { IMAGE_BASE64_STRINGS } from "@graphite/utility-functions/images";
+
+	let className = "";
+	export { className as class };
+	export let classes: Record<string, boolean> = {};
+
+	export let image: string;
+	export let width: string | undefined;
+	export let height: string | undefined;
+	export let tooltip: string | undefined = undefined;
+
+	$: extraClasses = Object.entries(classes)
+		.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
+		.join(" ");
+</script>
+
+<img src={IMAGE_BASE64_STRINGS[image]} style:width style:height class={`image-label ${className} ${extraClasses}`.trim()} title={tooltip} alt="" />
+
+<style lang="scss" global>
+	.image-label {
+		width: auto;
+		height: auto;
+
+		+ .image-label {
+			margin-left: 8px;
+		}
+	}
+</style>

frontend/src/components/window/workspace/Panel.svelte

@@ -40,14 +40,6 @@
 
 	let tabElements: (LayoutRow | undefined)[] = [];
 
-	function newDocument() {
-		editor.instance.newDocumentDialog();
-	}
-
-	function openDocument() {
-		editor.instance.documentOpen();
-	}
-
 	function platformModifiers(reservedKey: boolean): LayoutKeysGroup {
 		// TODO: Remove this by properly feeding these keys from a layout provided by the backend
 
@@ -128,7 +120,7 @@
 						<table>
 							<tr>
 								<td>
-									<TextButton label="New Document" icon="File" action={() => newDocument()} />
+									<TextButton label="New Document" icon="File" action={() => editor.instance.newDocumentDialog()} />
 								</td>
 								<td>
 									<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
@@ -136,12 +128,17 @@
 							</tr>
 							<tr>
 								<td>
-									<TextButton label="Open Document" icon="Folder" action={() => openDocument()} />
+									<TextButton label="Open Document" icon="Folder" action={() => editor.instance.openDocument()} />
 								</td>
 								<td>
 									<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
 								</td>
 							</tr>
+							<tr>
+								<td colspan="2">
+									<TextButton label="Open Demo Artwork" icon="Image" action={() => editor.instance.demoArtworkDialog()} />
+								</td>
+							</tr>
 						</table>
 					</LayoutRow>
 				</LayoutCol>