lots more stuff

frontend/src/lib/components/Root.svelte

@@ -0,0 +1,34 @@
+<script>
+	/**
+	 * @typedef {import('$lib/models/root.js').Root} Root
+	 * @typedef {import('$lib/services/objectParser.js').TypedObject} TypedObject
+	 */
+
+	import { objectsStore } from '$lib/stores/objects.js';
+	import ObjectRenderer from './ObjectRenderer.svelte';
+
+	/** @type {{ object: Root, depth?: number }} */
+	let { object, depth = 0 } = $props();
+
+	/** @type {TypedObject | undefined} */
+	let childObject = $derived(undefined);
+</script>
+
+<section class="root">
+	{#if depth === 0}
+		<h2>Root</h2>
+	{/if}
+
+	{#each object.childIds as childId (childId)}
+		{@const childObject = $objectsStore.objects.get(childId)}
+		{#if childObject}
+			<ObjectRenderer object={childObject} depth={depth + 1} />
+		{/if}
+	{/each}
+</section>
+
+<style>
+	.root {
+		margin: 0.5rem 0;
+	}
+</style>