<script>
	import Composite from '$lib/core/Composite.svelte';
	import { dataStore } from '$lib/core/dataLoader';

	$: console.log('Data Store contents:', $dataStore);

	let composite = {
		id: 'composite',
		layout: {
			areas: `
				"top top"
				"main main"
				"footer footer";
			`,
			columns: '1fr 300px',
			rows: 'auto 1fr auto'
		},
		children: [
			{ id: 'appbar', component: 'AppBar', slot: 'top' },
			{
				id: 'me',
				component: 'Messages',
				slot: 'main',
				map: { messages: 'data.queryMessages' }
			},
			{
				id: 'terminal',
				component: 'Terminal',
				slot: 'footer'
			}
		]
	};
</script>

<Composite {composite} />
