Add demo artwork

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>