🎚️ Expands layout manager with widget sizing

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

@@ -20,7 +20,7 @@
 		class:flex-wrap={container.layout === 'wrap'}
 	>
 		{#each container.widgets as widget, index (widget.id + '-' + index)}
-			<Widget size={widget.size ?? 1}>
+			<Widget size={widget.size} sizeUnit={widget.sizeUnit}>
 				{#if isWidgetConfig(widget)}
 					<svelte:component this={WidgetComponents[widget.component]} {...widget.props} />
 				{:else if widget.widgets}

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

@@ -4,10 +4,20 @@ import Stream from '$lib/components/Stream.svelte';
 import CpuUsageChart from '$lib/components/widget/CpuUsageChart.svelte';
 import type { Writable } from 'svelte/store';
 
+export type SizeUnit = 'px' | '%' | 'fr' | 'em';
+
+export enum SizeUnitEnum {
+	Em = 'em',
+	Fractional = 'fr',
+	Percent = '%',
+	Pixel = 'px'
+}
+
 export interface WidgetConfig {
 	id: string | number;
 	component: keyof typeof WidgetComponents;
 	size?: number;
+	sizeUnit?: SizeUnitEnum;
 	props?: Record<string, any>;
 }
 
@@ -16,6 +26,7 @@ export interface WidgetContainerConfig {
 	layout: 'row' | 'column' | 'wrap';
 	header?: string;
 	size?: number;
+	sizeUnit?: SizeUnitEnum;
 	widgets: Array<WidgetConfig | WidgetContainerConfig>;
 }
 
@@ -41,32 +52,29 @@ export const phoneControllerLayout: Writable<WidgetContainerConfig> = persistent
 	} as WidgetContainerConfig
 );
 
-export const controllerLayout: Writable<WidgetContainerConfig> = persistentStore(
+export const controllerLayout: Writable<WidgetContainerConfig> = persistentStore('controller_layout', {
-	'controller_layout',
+	id: 'root',
-	{
+	layout: 'column',
-		id: 'root',
+	widgets: [
-		layout: 'column',
+		{
-		widgets: [
+			id: 'visualization',
-			{
+			layout: 'column',
-				id: 'visualization',
+			header: 'Visualization',
-				layout: 'column',
+			widgets: [
-				header: 'Visualization',
+				{ id: 1, component: 'Stream' },
-				size: 2,
+				{ id: 2, component: 'Visualization', props: { debug: true } }
-				widgets: [
+			]
-					{ id: 1, component: 'Visualization', size: 2, props: { debug: true } },
+		},
-					{ id: 2, component: 'Stream' }
+		{
-				]
+			id: 'charts',
-			},
+			layout: 'row',
-			{
+			size: 40,
-				id: 'charts',
+			header: 'Charts',
-				layout: 'row',
+			widgets: [
-				header: 'Charts',
+				{ id: 3, component: 'CpuUsageChart' },
-				widgets: [
+				{ id: 4, component: 'CpuUsageChart' },
-					{ id: 3, component: 'CpuUsageChart' },
+				{ id: 5, component: 'CpuUsageChart' }
-					{ id: 4, component: 'CpuUsageChart' },
+			]
-					{ id: 5, component: 'CpuUsageChart' }
+		}
-				]
+	]
-			}
+} as WidgetContainerConfig);
-		]
-	} as WidgetContainerConfig
-);

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

@@ -1,7 +1,10 @@
-<script>
+<script lang="ts">
-    export let size = 1;
+	import type { SizeUnit } from "./LayoutManager";
+
+    export let size = -1;
+    export let sizeUnit:SizeUnit = '%';
 </script>
 
-<div class="box-border overflow-hidden min-w-96" style="flex: {size}">
+<div class="box-border overflow-hidden min-w-96 "class:flex-1={size === -1}>
     <slot></slot>
 </div>

app/src/routes/controller/+layout.svelte

@@ -8,6 +8,6 @@
 	<Controls />
 	<!-- <button class="absolute z-20 btn" on:click={addWidget}>Add Widget</button> -->
 	<div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
-		<WidgetContainer container={$phoneControllerLayout} />
+		<WidgetContainer container={$controllerLayout} />
 	</div>
 </div>