👱‍♂️ Adds layout manager

app/src/lib/components/layout/DynamicLayout.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { WidgetComponents, type WidgetContainerConfig, isWidgetConfig } from './LayoutManager';
+	import Widget from './Widget.svelte';
+
+	export let container: WidgetContainerConfig;
+</script>
+
+<div class="w-full h-full flex flex-col">
+	{#if container.header}
+		<div class="bg-base-300">
+			<div class="bg-base-100 p-2 w-min">{container.header}</div>
+		</div>
+	{/if}
+
+	<div
+		class="flex w-full h-full"
+		class:flex-row={container.layout === 'column'}
+		class:flex-col={container.layout === 'row'}
+	>
+		{#each container.widgets as widget, index (widget.id + '-' + index)}
+			<Widget size={widget.size ?? 1}>
+				{#if isWidgetConfig(widget)}
+					<svelte:component this={WidgetComponents[widget.component]} {...widget.props} />
+				{:else if widget.widgets}
+					<svelte:self container={widget} />
+				{/if}
+			</Widget>
+			{#if index !== container.widgets.length - 1}
+				<div
+					class="divider bg-base-300 m-0"
+					class:divider-horizontal={container.layout === 'column'}
+				></div>
+			{/if}
+		{/each}
+	</div>
+</div>

app/src/lib/components/layout/LayoutManager.ts

@@ -0,0 +1,60 @@
+import { persistentStore } from '$lib/utilities';
+import Visualization from '$lib/components/Visualization.svelte';
+import Stream from '$lib/components/Stream.svelte';
+import CpuUsageChart from '$lib/components/widget/CpuUsageChart.svelte';
+import type { Writable } from 'svelte/store';
+
+export interface WidgetConfig {
+	id: string | number;
+	component: keyof typeof WidgetComponents;
+	size?: number;
+	props?: Record<string, any>;
+}
+
+export interface WidgetContainerConfig {
+	id: string | number;
+	layout: 'row' | 'column';
+	header?: string;
+	size?: number;
+	widgets: Array<WidgetConfig | WidgetContainerConfig>;
+}
+
+export const isWidgetConfig = (
+	widget: WidgetConfig | WidgetContainerConfig
+): widget is WidgetConfig => 'component' in widget;
+
+export const WidgetComponents = {
+	Visualization,
+	Stream,
+	CpuUsageChart
+};
+
+export const controllerLayout: Writable<WidgetContainerConfig> = persistentStore(
+	'controller_layout',
+	{
+		id: 'root',
+		layout: 'column',
+		widgets: [
+			{
+				id: 'visualization',
+				layout: 'column',
+				header: 'Visualization',
+				size: 2,
+				widgets: [
+					{ id: 1, component: 'Visualization', size: 2, props: { debug: true } },
+					{ id: 2, component: 'Stream' }
+				]
+			},
+			{
+				id: 'charts',
+				layout: 'row',
+				header: 'Charts',
+				widgets: [
+					{ id: 3, component: 'CpuUsageChart' },
+					{ id: 4, component: 'CpuUsageChart' },
+					{ id: 5, component: 'CpuUsageChart' }
+				]
+			}
+		]
+	} as WidgetContainerConfig
+);

app/src/lib/components/layout/Widget.svelte

@@ -0,0 +1,7 @@
+<script>
+    export let size = 1;
+</script>
+
+<div class="box-border overflow-hidden" style="flex: {size}">
+    <slot></slot>
+</div>