rename app to appInitial

frontend/src/lib/components/apps/components/buttons/AppButton.svelte

@@ -175,7 +175,7 @@
 	}
 	let loading = $state(false)
 
-	let css = $state(initCss($app.css?.buttoncomponent, customCss))
+	let css = $state(initCss(app.val.css?.buttoncomponent, customCss))
 	$effect(() => {
 		errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay'
 	})
@@ -210,7 +210,7 @@
 		{extraKey}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.buttoncomponent}
+		componentStyle={app.val.css?.buttoncomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/buttons/AppForm.svelte

@@ -71,7 +71,7 @@
 	let runnableComponent: RunnableComponent | undefined = $state()
 	let loading = $state(false)
 
-	let css = $state(initCss($app.css?.formcomponent, customCss))
+	let css = $state(initCss(app.val.css?.formcomponent, customCss))
 
 	let wrapper: RunnableWrapper | undefined = $state()
 	$effect(() => {
@@ -98,7 +98,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.formcomponent}
+		componentStyle={app.val.css?.formcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte

@@ -70,7 +70,7 @@
 
 	let errors: Record<string, string> = {}
 
-	let css = $state(initCss($app?.css?.formbuttoncomponent, customCss))
+	let css = $state(initCss(app.val?.css?.formbuttoncomponent, customCss))
 	let runnableWrapper: RunnableWrapper | undefined = $state()
 	let loading = $state(false)
 	let modal: AlwaysMountedModal | undefined = $state()
@@ -93,7 +93,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.formbuttoncomponent}
+		componentStyle={app.val.css?.formbuttoncomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte

@@ -101,7 +101,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.schemaformcomponent, customCss))
+	let css = $state(initCss(app.val.css?.schemaformcomponent, customCss))
 
 	const resolvedConfig = $state(
 		initConfig(components['schemaformcomponent'].initialData.configuration, configuration)
@@ -159,7 +159,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.schemaformcomponent}
+		componentStyle={app.val.css?.schemaformcomponent}
 	/>
 {/each}
 
@@ -172,7 +172,7 @@
 			<div
 				onpointerdown={stopPropagation(
 					(e) =>
-						!$connectingInput.opened && selectId(e as PointerEvent, id, selectedComponent, $app)
+						!$connectingInput.opened && selectId(e as PointerEvent, id, selectedComponent, app.val)
 				)}
 			>
 				<SchemaForm

frontend/src/lib/components/apps/components/display/AppAccordionList.svelte

@@ -65,7 +65,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.accordionlistcomponent, customCss))
+	let css = $state(initCss(app.val.css?.accordionlistcomponent, customCss))
 	let result: any[] | undefined = $state(undefined)
 
 	let inputs = $state({})
@@ -91,7 +91,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.accordionlistcomponent}
+		componentStyle={app.val.css?.accordionlistcomponent}
 	/>
 {/each}
 
@@ -108,7 +108,7 @@
 >
 	{#if everRender}
 		<div class="w-full flex flex-col overflow-auto max-h-full">
-			{#if $app.subgrids?.[`${id}-0`]}
+			{#if app.val.subgrids?.[`${id}-0`]}
 				{#if Array.isArray(result) && result.length > 0}
 					{#each result ?? [] as value, index}
 						<div class="border-b">
@@ -181,7 +181,7 @@
 				{/if}
 			{/if}
 		</div>
-	{:else if $app.subgrids}
+	{:else if app.val.subgrids}
 		<ListWrapper disabled value={undefined} index={0}>
 			<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
 		</ListWrapper>

frontend/src/lib/components/apps/components/display/AppAlert.svelte

@@ -27,7 +27,7 @@
 
 	initOutput($worldStore, id, {})
 
-	let css = initCss($app.css?.alertcomponent, customCss)
+	let css = initCss(app.val.css?.alertcomponent, customCss)
 </script>
 
 {#each Object.keys(components['alertcomponent'].initialData.configuration) as key (key)}
@@ -45,7 +45,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.alertcomponent}
+		componentStyle={app.val.css?.alertcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppBarChart.svelte

@@ -107,7 +107,7 @@
 		}
 	}
 
-	let css = initCss($app.css?.barchartcomponent, customCss)
+	let css = initCss(app.val.css?.barchartcomponent, customCss)
 </script>
 
 {#each Object.keys(components['barchartcomponent'].initialData.configuration) as key (key)}
@@ -125,7 +125,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.barchartcomponent}
+		componentStyle={app.val.css?.barchartcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppCarouselList.svelte

@@ -61,7 +61,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.carousellistcomponent, customCss))
+	let css = $state(initCss(app.val.css?.carousellistcomponent, customCss))
 	let result: any[] | undefined = $state(undefined)
 
 	let inputs = $state({})
@@ -93,7 +93,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.carousellistcomponent}
+		componentStyle={app.val.css?.carousellistcomponent}
 	/>
 {/each}
 
@@ -110,7 +110,7 @@
 >
 	{#if everRender}
 		<div class="w-full flex flex-wrap overflow-auto divide-y max-h-full">
-			{#if $app.subgrids?.[`${id}-0`]}
+			{#if app.val.subgrids?.[`${id}-0`]}
 				{#if Array.isArray(result) && result.length > 0}
 					{#key result}
 						<Carousel
@@ -226,7 +226,7 @@
 				{/if}
 			{/if}
 		</div>
-	{:else if $app.subgrids}
+	{:else if app.val.subgrids}
 		<ListWrapper disabled value={undefined} index={0}>
 			<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
 		</ListWrapper>

frontend/src/lib/components/apps/components/display/AppChartJs.svelte

@@ -41,7 +41,7 @@
 		...(resolvedConfig.options ?? {})
 	} as ChartOptions
 
-	let css = initCss($app.css?.chartjscomponent, customCss)
+	let css = initCss(app.val.css?.chartjscomponent, customCss)
 </script>
 
 {#each Object.keys(components['chartjscomponent'].initialData.configuration) as key (key)}
@@ -59,7 +59,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.chartjscomponent}
+		componentStyle={app.val.css?.chartjscomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppChartJsV2.svelte

@@ -80,7 +80,7 @@
 							grid: { color: $darkMode ? '#555' : '#ddd' }
 						}
 					}
-			  }
+				}
 			: {})
 	}) as ChartOptions
 
@@ -92,10 +92,10 @@
 						label: d.name,
 						data: Array.isArray(resolvedDatasetsValues[index]) ? resolvedDatasetsValues[index] : []
 					}))
-			  }
+				}
 			: result
 
-	let css = initCss($app.css?.chartjscomponent, customCss)
+	let css = initCss(app.val.css?.chartjscomponent, customCss)
 </script>
 
 {#if datasets}
@@ -137,7 +137,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.chartjscomponent}
+		componentStyle={app.val.css?.chartjscomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte

@@ -56,7 +56,7 @@
 		loading: false
 	})
 
-	let css = $state(initCss($app.css?.displaycomponent, customCss))
+	let css = $state(initCss(app.val.css?.displaycomponent, customCss))
 </script>
 
 {#each Object.keys(components['displaycomponent'].initialData.configuration) as key (key)}
@@ -74,7 +74,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.displaycomponent}
+		componentStyle={app.val.css?.displaycomponent}
 	/>
 {/each}
 
@@ -92,13 +92,13 @@
 		</div>
 		<div
 			style={twMerge(
-				$app.css?.['displaycomponent']?.['container']?.style,
+				app.val.css?.['displaycomponent']?.['container']?.style,
 				customCss?.container?.style,
 				'wm-rich-result-container'
 			)}
 			class={twMerge(
 				'p-2 grow overflow-auto',
-				$app.css?.['displaycomponent']?.['container']?.class,
+				app.val.css?.['displaycomponent']?.['container']?.class,
 				customCss?.container?.class
 			)}
 		>

frontend/src/lib/components/apps/components/display/AppDisplayComponentByJobId.svelte

@@ -40,7 +40,7 @@
 
 	initializing = false
 
-	let css = initCss($app.css?.jobiddisplaycomponent, customCss)
+	let css = initCss(app.val.css?.jobiddisplaycomponent, customCss)
 
 	let testJobLoader: TestJobLoader | undefined = undefined
 	let testIsLoading: boolean = false
@@ -69,7 +69,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.jobiddisplaycomponent}
+		componentStyle={app.val.css?.jobiddisplaycomponent}
 	/>
 {/each}
 
@@ -101,13 +101,13 @@
 		</div>
 		<div
 			style={twMerge(
-				$app.css?.['displaycomponent']?.['container']?.style,
+				app.val.css?.['displaycomponent']?.['container']?.style,
 				customCss?.container?.style,
 				'wm-rich-result-container'
 			)}
 			class={twMerge(
 				'p-2 grow overflow-auto',
-				$app.css?.['displaycomponent']?.['container']?.class,
+				app.val.css?.['displaycomponent']?.['container']?.class,
 				customCss?.container?.class
 			)}
 		>

frontend/src/lib/components/apps/components/display/AppDownload.svelte

@@ -61,7 +61,7 @@
 		}
 	}
 
-	let css = initCss($app.css?.downloadcomponent, customCss)
+	let css = initCss(app.val.css?.downloadcomponent, customCss)
 </script>
 
 <InitializeComponent {id} />
@@ -81,7 +81,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.downloadcomponent}
+		componentStyle={app.val.css?.downloadcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppHtml.svelte

@@ -22,7 +22,7 @@
 
 	let result: string | undefined = undefined
 
-	let css = initCss($app.css?.htmlcomponent, customCss)
+	let css = initCss(app.val.css?.htmlcomponent, customCss)
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
@@ -31,7 +31,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.htmlcomponent}
+		componentStyle={app.val.css?.htmlcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppIcon.svelte

@@ -37,7 +37,7 @@
 		}
 	}
 
-	let css = initCss($app.css?.iconcomponent, customCss)
+	let css = initCss(app.val.css?.iconcomponent, customCss)
 </script>
 
 {#each Object.keys(components['iconcomponent'].initialData.configuration) as key (key)}
@@ -55,7 +55,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.iconcomponent}
+		componentStyle={app.val.css?.iconcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppImage.svelte

@@ -42,7 +42,7 @@
 	//used so that we can count number of outputs setup for first refresh
 	initOutput($worldStore, id, {})
 
-	let css = initCss($app.css?.imagecomponent, customCss)
+	let css = initCss(app.val.css?.imagecomponent, customCss)
 
 	let imageUrl: string | undefined = undefined
 
@@ -111,7 +111,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.imagecomponent}
+		componentStyle={app.val.css?.imagecomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppJobIdFlowStatus.svelte

@@ -31,7 +31,7 @@
 
 	initializing = false
 
-	let css = initCss($app.css?.jobidflowstatuscomponent, customCss)
+	let css = initCss(app.val.css?.jobidflowstatuscomponent, customCss)
 
 	$: jobId = resolvedConfig.jobId
 </script>
@@ -51,7 +51,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.jobidflowstatuscomponent}
+		componentStyle={app.val.css?.jobidflowstatuscomponent}
 	/>
 {/each}
 
@@ -70,12 +70,12 @@
 		</div>
 		<div
 			style={twMerge(
-				$app.css?.['flowstatuscomponent']?.['container']?.style,
+				app.val.css?.['flowstatuscomponent']?.['container']?.style,
 				customCss?.container?.style
 			)}
 			class={twMerge(
 				'p-2 grow overflow-auto',
-				$app.css?.['flowstatuscomponent']?.['container']?.class,
+				app.val.css?.['flowstatuscomponent']?.['container']?.class,
 				customCss?.container?.class
 			)}
 		>

frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte

@@ -33,7 +33,7 @@
 
 	initializing = false
 
-	let css = initCss($app.css?.jobidlogcomponent, customCss)
+	let css = initCss(app.val.css?.jobidlogcomponent, customCss)
 
 	let testJobLoader: TestJobLoader | undefined = undefined
 	let testIsLoading: boolean = false
@@ -60,7 +60,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.jobidlogcomponent}
+		componentStyle={app.val.css?.jobidlogcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppMap.svelte

@@ -185,7 +185,7 @@
 
 	$: map && resolvedConfig && updateInteractions(map)
 
-	let css = initCss($app.css?.mapcomponent, customCss)
+	let css = initCss(app.val.css?.mapcomponent, customCss)
 
 	function updateRegionOutput() {
 		if (map && !resolvedConfig.lock) {
@@ -202,7 +202,7 @@
 	}
 
 	async function handleSyncRegion() {
-		const gridItem = findGridItem($app, id)
+		const gridItem = findGridItem(app.val, id)
 		if (!map || !gridItem) {
 			return
 		}
@@ -226,7 +226,7 @@
 			//@ts-ignore
 			gridItem.data.configuration.latitude.value = center[1]
 
-			$app = $app
+			app.val = app.val
 		}
 	}
 </script>
@@ -250,7 +250,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.mapcomponent}
+		componentStyle={app.val.css?.mapcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppMarkdown.svelte

@@ -39,7 +39,7 @@
 
 	let result: string | undefined = undefined
 
-	let css = initCss($app.css?.mardowncomponent, customCss)
+	let css = initCss(app.val.css?.mardowncomponent, customCss)
 
 	const proseMapping = {
 		sm: 'prose-sm',
@@ -65,7 +65,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.mardowncomponent}
+		componentStyle={app.val.css?.mardowncomponent}
 	/>
 {/each}
 
@@ -150,8 +150,8 @@
 	.wm-markdown h4:last-child {
 		margin-bottom: 0;
 	}
-	.wm-markdown code:not([class~="not-prose"]):not(.not-prose *)::before,
-	.wm-markdown code:not([class~="not-prose"]):not(.not-prose *)::after {
+	.wm-markdown code:not([class~='not-prose']):not(.not-prose *)::before,
+	.wm-markdown code:not([class~='not-prose']):not(.not-prose *)::after {
 		content: none !important;
 	}
 	.wm-markdown.prose code::before,

frontend/src/lib/components/apps/components/display/AppMenu.svelte

@@ -53,7 +53,7 @@
 		initConfig(components['menucomponent'].initialData.configuration, configuration)
 	)
 
-	let css = $state(initCss($app.css?.menucomponent, customCss))
+	let css = $state(initCss(app.val.css?.menucomponent, customCss))
 
 	let beforeIconComponent: any = $state()
 	let afterIconComponent: any = $state()
@@ -106,7 +106,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.menucomponent}
+		componentStyle={app.val.css?.menucomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppNavbar.svelte

@@ -30,7 +30,7 @@
 		}
 	})
 
-	let css = initCss($app.css?.navbarcomponent, customCss)
+	let css = initCss(app.val.css?.navbarcomponent, customCss)
 </script>
 
 {#each Object.keys(components['navbarcomponent'].initialData.configuration) as key (key)}
@@ -48,7 +48,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.navbarcomponent}
+		componentStyle={app.val.css?.navbarcomponent}
 	/>
 {/each}
 
@@ -67,10 +67,10 @@
 				src={resolvedConfig.logo?.configuration?.yes?.sourceKind == 'png encoded as base64'
 					? 'data:image/png;base64,' + resolvedConfig.logo?.configuration?.yes?.source
 					: resolvedConfig.logo?.configuration?.yes?.sourceKind == 'jpeg encoded as base64'
-					? 'data:image/jpeg;base64,' + resolvedConfig.logo?.configuration?.yes?.source
-					: resolvedConfig.logo?.configuration?.yes?.sourceKind == 'svg encoded as base64'
-					? 'data:image/svg+xml;base64,' + resolvedConfig.logo?.configuration?.yes?.source
-					: resolvedConfig.logo?.configuration?.yes?.source}
+						? 'data:image/jpeg;base64,' + resolvedConfig.logo?.configuration?.yes?.source
+						: resolvedConfig.logo?.configuration?.yes?.sourceKind == 'svg encoded as base64'
+							? 'data:image/svg+xml;base64,' + resolvedConfig.logo?.configuration?.yes?.source
+							: resolvedConfig.logo?.configuration?.yes?.source}
 				alt={resolvedConfig.logo?.configuration?.yes?.altText}
 				style={css?.image?.style ?? ''}
 				class={twMerge(`w-auto h-8`, css?.image?.class, 'wm-image')}

frontend/src/lib/components/apps/components/display/AppPdf.svelte

@@ -22,7 +22,7 @@
 	let source: string | ArrayBuffer | undefined = undefined
 	let zoom: number | undefined = undefined
 
-	let css = initCss($app.css?.pdfcomponent, customCss)
+	let css = initCss(app.val.css?.pdfcomponent, customCss)
 </script>
 
 <InputValue key="source" {id} input={configuration.source} bind:value={source} />
@@ -34,7 +34,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.pdfcomponent}
+		componentStyle={app.val.css?.pdfcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppPieChart.svelte

@@ -74,7 +74,7 @@
 		]
 	}
 
-	let css = initCss($app.css?.piechartcomponent, customCss)
+	let css = initCss(app.val.css?.piechartcomponent, customCss)
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
@@ -83,7 +83,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.piechartcomponent}
+		componentStyle={app.val.css?.piechartcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppRecomputeAll.svelte

@@ -35,7 +35,7 @@
 
 	initializing = false
 
-	let css = initCss($app.css?.recomputeallcomponent, customCss)
+	let css = initCss(app.val.css?.recomputeallcomponent, customCss)
 
 	$: resolvedConfig.defaultRefreshInterval && handleRefreshInterval()
 
@@ -68,7 +68,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.recomputeallcomponent}
+		componentStyle={app.val.css?.recomputeallcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppScatterChart.svelte

@@ -80,7 +80,7 @@
 		datasets: result ?? []
 	} as ChartData<'scatter', (number | Point)[], unknown>
 
-	let css = initCss($app.css?.scatterchartcomponent, customCss)
+	let css = initCss(app.val.css?.scatterchartcomponent, customCss)
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
@@ -89,7 +89,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.scatterchartcomponent}
+		componentStyle={app.val.css?.scatterchartcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppStatCard.svelte

@@ -26,7 +26,7 @@
 
 	initOutput($worldStore, id, {})
 
-	let css = initCss($app.css?.statcomponent, customCss)
+	let css = initCss(app.val.css?.statcomponent, customCss)
 
 	let iconComponent: any
 
@@ -62,7 +62,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.imagecomponent}
+		componentStyle={app.val.css?.imagecomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/AppText.svelte

@@ -39,7 +39,7 @@
 	const { app, worldStore, mode, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	let css = initCss($app.css?.textcomponent, customCss)
+	let css = initCss(app.val.css?.textcomponent, customCss)
 
 	let result: string | undefined = undefined
 
@@ -157,7 +157,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.textcomponent}
+		componentStyle={app.val.css?.textcomponent}
 	/>
 {/each}
 
@@ -187,8 +187,8 @@
 						horizontalAlignment === 'center'
 							? 'text-center'
 							: horizontalAlignment === 'right'
-							? 'text-right'
-							: 'text-left'
+								? 'text-right'
+								: 'text-left'
 					)}
 					on:pointerdown|stopPropagation
 					style={css?.text?.style}
@@ -232,8 +232,8 @@
 								horizontalAlignment === 'center'
 									? 'text-center'
 									: horizontalAlignment === 'right'
-									? 'text-right'
-									: 'text-left'
+										? 'text-right'
+										: 'text-left'
 							)}
 							style={css?.text?.style}
 						>

frontend/src/lib/components/apps/components/display/AppTimeseries.svelte

@@ -94,7 +94,7 @@
 		datasets: result ?? []
 	} as ChartData<'scatter', (number | Point)[], unknown>
 
-	let css = initCss($app.css?.timeseriescomponent, customCss)
+	let css = initCss(app.val.css?.timeseriescomponent, customCss)
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
@@ -103,7 +103,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.timeseriescomponent}
+		componentStyle={app.val.css?.timeseriescomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte

@@ -56,7 +56,7 @@
 		configuration
 	)
 
-	let css = initCss($app.css?.agchartscomponent, customCss)
+	let css = initCss(app.val.css?.agchartscomponent, customCss)
 	let chartInstance: AgChartInstance | undefined = undefined
 
 	function getChartStyleByTheme() {
@@ -373,7 +373,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.chartjscomponent}
+		componentStyle={app.val.css?.chartjscomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte

@@ -66,7 +66,7 @@
 	}
 
 	function clearColumnDefs() {
-		const gridItem = findGridItem($app, id)
+		const gridItem = findGridItem(app.val, id)
 
 		if (!gridItem) {
 			return
@@ -75,7 +75,7 @@
 		// @ts-ignore
 		gridItem.data.configuration.columnDefs = { value: [], type: 'static', loading: false }
 
-		$app = $app
+		app.val = app.val
 	}
 
 	const resolvedConfig = initConfig(
@@ -210,7 +210,7 @@
 
 		if (lastResource === resource) return
 		lastResource = resource
-		const gridItem = findGridItem($app, id)
+		const gridItem = findGridItem(app.val, id)
 
 		if (!gridItem) {
 			return
@@ -228,7 +228,7 @@
 		)
 
 		if (!resolvedConfig.type?.configuration?.[resolvedConfig.type.selected]?.resource) {
-			$app = $app
+			app.val = app.val
 			return
 		}
 
@@ -261,7 +261,7 @@
 				}
 			)
 
-			$app = $app
+			app.val = app.val
 		} catch (e) {}
 	}
 
@@ -365,7 +365,7 @@
 
 		lastTable = table
 
-		const gridItem = findGridItem($app, id)
+		const gridItem = findGridItem(app.val, id)
 		if (!gridItem) return
 
 		let columnDefs = gridItem.data.configuration.columnDefs as StaticInput<TableMetadata>
@@ -375,7 +375,7 @@
 		//@ts-ignore
 		gridItem.data.configuration.columnDefs.loading = true
 		gridItem.data = gridItem.data
-		$app = $app
+		app.val = app.val
 
 		let tableMetadata = await loadTableMetaData(
 			resolvedConfig.type.configuration[selected].resource,
@@ -400,7 +400,7 @@
 			gridItem.data.configuration.columnDefs.loading = false
 			gridItem.data = gridItem.data
 
-			$app = $app
+			app.val = app.val
 			return
 		}
 
@@ -453,7 +453,7 @@
 		gridItem.data.configuration.columnDefs = { value: ncols, type: 'static', loading: false }
 		gridItem.data = gridItem.data
 
-		$app = $app
+		app.val = app.val
 		let oldS = $selectedComponent
 		$selectedComponent = []
 		await tick()

frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte

@@ -43,7 +43,7 @@
 	const contextPanel = getContext<ContextPanelContext>('ContextPanel')
 	const { app, selectedComponent, componentControl, darkMode, mode } = context
 
-	let css = initCss($app.css?.aggridcomponent, customCss)
+	let css = initCss(app.val.css?.aggridcomponent, customCss)
 
 	let selectedRowIndex = -1
 
@@ -443,7 +443,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.tablecomponent}
+		componentStyle={app.val.css?.tablecomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte

@@ -40,7 +40,7 @@
 	const context = getContext<AppViewerContext>('AppViewerContext')
 	const { app, worldStore } = context
 
-	let css = initCss($app.css?.aggridcomponent, customCss)
+	let css = initCss(app.val.css?.aggridcomponent, customCss)
 	let result: any[] | undefined = undefined
 	let loading: boolean = false
 
@@ -166,7 +166,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.tablecomponent}
+		componentStyle={app.val.css?.tablecomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte

@@ -68,7 +68,7 @@
 		comfortable: 50
 	}
 
-	let css = initCss($app.css?.aggridcomponent, customCss)
+	let css = initCss(app.val.css?.aggridcomponent, customCss)
 
 	let result: any[] | undefined = undefined
 
@@ -559,7 +559,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.tablecomponent}
+		componentStyle={app.val.css?.tablecomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/table/AppTable.svelte

@@ -240,7 +240,7 @@
 
 	$: filteredResult != undefined && rerender()
 
-	let css = initCss($app.css?.tablecomponent, customCss)
+	let css = initCss(app.val.css?.tablecomponent, customCss)
 
 	$componentControl[id] = {
 		right: (skipActions: boolean | undefined) => {
@@ -347,7 +347,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.tablecomponent}
+		componentStyle={app.val.css?.tablecomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte

@@ -16,7 +16,7 @@
 	const { app, mode, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
 	async function syncColumns() {
-		let gridItem = findGridItem($app, id)
+		let gridItem = findGridItem(app.val, id)
 
 		if (gridItem && result) {
 			const keys = Object.keys(result[0] ?? {}) ?? []
@@ -42,7 +42,7 @@
 	}
 
 	async function setEmptyColumns() {
-		let gridItem = findGridItem($app, id)
+		let gridItem = findGridItem(app.val, id)
 		if (gridItem && gridItem.data.configuration.columnDefs.type === 'static') {
 			gridItem.data.configuration.columnDefs.value = []
 			await updateConfiguration()

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -369,7 +369,7 @@
 				const uuid = await executeRunnable(
 					runnable,
 					workspace,
-					$app.version,
+					app.val.version,
 					$userStore?.username,
 					$appPath,
 					id,
@@ -436,7 +436,7 @@
 			}
 		}
 
-		const oneOfRunnableInputs = isEditor ? collectOneOfFields(fields, $app) : {}
+		const oneOfRunnableInputs = isEditor ? collectOneOfFields(fields, app.val) : {}
 
 		const requestBody: ExecuteComponentData['requestBody'] = {
 			args: nonStaticRunnableInputs,
@@ -608,7 +608,7 @@
 
 	function handleInputClick(e: CustomEvent) {
 		const event = e as unknown as PointerEvent
-		!$connectingInput.opened && selectId(event, id, selectedComponent, $app)
+		!$connectingInput.opened && selectId(event, id, selectedComponent, app.val)
 	}
 
 	let cancellableRun: ((inlineScript?: InlineScript) => CancelablePromise<void>) | undefined =

frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte

@@ -93,7 +93,7 @@
 
 	$: resolvedConfig.defaultValue != undefined && handleDefault()
 
-	let css = initCss($app.css?.checkboxcomponent, customCss)
+	let css = initCss(app.val.css?.checkboxcomponent, customCss)
 </script>
 
 {#each Object.keys(components['checkboxcomponent'].initialData.configuration) as key (key)}
@@ -112,7 +112,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.checkboxcomponent}
+		componentStyle={app.val.css?.checkboxcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte

@@ -77,7 +77,7 @@
 	function handleDefault(defaultValue: string | undefined) {
 		value = defaultValue
 	}
-	let css = initCss($app.css?.dateinputcomponent, customCss)
+	let css = initCss(app.val.css?.dateinputcomponent, customCss)
 </script>
 
 {#each Object.keys(components['dateinputcomponent'].initialData.configuration) as key (key)}
@@ -95,7 +95,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.dateinputcomponent}
+		componentStyle={app.val.css?.dateinputcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte

@@ -82,7 +82,7 @@
 		}
 	}
 
-	let css = initCss($app.css?.dateinputcomponent, customCss)
+	let css = initCss(app.val.css?.dateinputcomponent, customCss)
 
 	let selectedDay: string | undefined = undefined
 	let selectedMonth: string | undefined = undefined
@@ -209,7 +209,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.dateselectcomponent}
+		componentStyle={app.val.css?.dateselectcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppDateSliderInput.svelte

@@ -92,7 +92,7 @@
 		}
 	}
 
-	let css = initCss($app.css?.dateslidercomponent, customCss)
+	let css = initCss(app.val.css?.dateslidercomponent, customCss)
 
 	let lastStyle: string | undefined = undefined
 	$: if (css && slider && lastStyle !== css?.handle?.style) {
@@ -143,7 +143,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.dateslidercomponent}
+		componentStyle={app.val.css?.dateslidercomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte

@@ -138,7 +138,7 @@
 		value = defaultValue
 	}
 
-	let css = initCss($app.css?.datetimeinputcomponent, customCss)
+	let css = initCss(app.val.css?.datetimeinputcomponent, customCss)
 </script>
 
 {#each Object.keys(components['datetimeinputcomponent'].initialData.configuration) as key (key)}
@@ -156,7 +156,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.datetimeinputcomponent}
+		componentStyle={app.val.css?.datetimeinputcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte

@@ -41,7 +41,7 @@
 		onFileChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
 	}
 
-	let css = initCss($app.css?.fileinputcomponent, customCss)
+	let css = initCss(app.val.css?.fileinputcomponent, customCss)
 
 	let fileInput: FileInput | undefined = undefined
 
@@ -70,7 +70,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.fileinputcomponent}
+		componentStyle={app.val.css?.fileinputcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte

@@ -7,7 +7,9 @@
 	import MultiSelect from 'svelte-multiselect'
 
 	export let id: string
+	// svelte-ignore export_let_unused
 	export let configuration: RichConfigurations
+	// svelte-ignore export_let_unused
 	export let customCss: ComponentCustomCSS<'multiselectcomponent'> | undefined = undefined
 	export let render: boolean
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined

frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte

@@ -134,7 +134,7 @@
 		}
 	}
 
-	let css = initCss($app.css?.multiselectcomponent, customCss)
+	let css = initCss(app.val.css?.multiselectcomponent, customCss)
 
 	function setOuterDivStyle(outerDiv: HTMLDivElement, portalRef: HTMLDivElement, style: string) {
 		outerDiv.setAttribute('style', style)
@@ -185,7 +185,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.multiselectcomponent}
+		componentStyle={app.val.css?.multiselectcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte

@@ -80,7 +80,7 @@
 		value = defaultValue
 	}
 
-	let css = initCss($app.css?.numberinputcomponent, customCss)
+	let css = initCss(app.val.css?.numberinputcomponent, customCss)
 </script>
 
 {#each Object.keys(components['numberinputcomponent'].initialData.configuration) as key (key)}
@@ -98,7 +98,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.numberinputcomponent}
+		componentStyle={app.val.css?.numberinputcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte

@@ -64,7 +64,7 @@
 		}
 	}
 
-	let css = initCss($app.css?.rangecomponent, customCss)
+	let css = initCss(app.val.css?.rangecomponent, customCss)
 
 	let lastStyle: string | undefined = undefined
 	$: if (css && slider && lastStyle !== css?.handles?.style) {
@@ -95,7 +95,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.rangecomponent}
+		componentStyle={app.val.css?.rangecomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppS3FileInput.svelte

@@ -47,7 +47,7 @@
 
 	$: resolvedConfigS3 = resolvedConfig.type.configuration.s3
 
-	let css = initCss($app.css?.fileinputcomponent, customCss)
+	let css = initCss(app.val.css?.fileinputcomponent, customCss)
 	/*
 
 		{#if resolvedConfig.displayDirectLink && fileUpload.progress === 100}
@@ -77,7 +77,10 @@
 		if (!isEditor) {
 			return undefined
 		}
-		const policy = computeS3FileInputPolicy((configuration as any)?.type?.configuration?.s3, $app)
+		const policy = computeS3FileInputPolicy(
+			(configuration as any)?.type?.configuration?.s3,
+			app.val
+		)
 		return policy
 	}
 </script>
@@ -90,7 +93,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.fileinputcomponent}
+		componentStyle={app.val.css?.fileinputcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppSelect.svelte

@@ -189,7 +189,7 @@
 		setContextValue(undefined)
 	}
 
-	let css = $state(initCss($app.css?.selectcomponent, customCss))
+	let css = $state(initCss(app.val.css?.selectcomponent, customCss))
 
 	let previsousFilter = ''
 
@@ -246,7 +246,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.selectcomponent}
+		componentStyle={app.val.css?.selectcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppSelectStep.svelte

@@ -80,7 +80,7 @@
 		return typeof item == 'string' ? item : item.label
 	}
 
-	let css = initCss($app.css?.selectstepcomponent, customCss)
+	let css = initCss(app.val.css?.selectstepcomponent, customCss)
 	$: selected && handleSelection(selected)
 </script>
 
@@ -99,7 +99,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.selectstepcomponent}
+		componentStyle={app.val.css?.selectstepcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte

@@ -83,7 +83,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.selecttabcomponent, customCss))
+	let css = $state(initCss(app.val.css?.selecttabcomponent, customCss))
 	$effect.pre(() => {
 		selected === '' && resolvedConfig.defaultValue && untrack(() => setDefaultValue())
 	})
@@ -107,7 +107,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.selecttabcomponent}
+		componentStyle={app.val.css?.selecttabcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte

@@ -73,7 +73,7 @@
 		}
 	}
 
-	let css = initCss($app.css?.slidercomponent, customCss)
+	let css = initCss(app.val.css?.slidercomponent, customCss)
 
 	let lastStyle: string | undefined = undefined
 	$: if (css && slider && lastStyle !== css?.handle?.style) {
@@ -121,7 +121,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.slidercomponent}
+		componentStyle={app.val.css?.slidercomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte

@@ -96,7 +96,7 @@
 		value = defaultValue
 	}
 
-	let css = initCss($app.css?.[appCssKey], customCss)
+	let css = initCss(app.val.css?.[appCssKey], customCss)
 
 	$: classInput = twMerge(
 		'windmillapp w-full py-1.5 px-2 text-sm',
@@ -152,7 +152,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.textinputcomponent}
+		componentStyle={app.val.css?.textinputcomponent}
 	/>
 {/each}
 
@@ -170,7 +170,7 @@
 			)}
 			style="resize:none; {css?.input?.style ?? ''}"
 			on:pointerdown|stopPropagation={(e) =>
-				!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+				!$connectingInput.opened && selectId(e, id, selectedComponent, app.val)}
 			on:keydown|stopPropagation
 			bind:value
 			placeholder={resolvedConfig.placeholder}
@@ -196,7 +196,7 @@
 						)}
 						style={css?.input?.style ?? ''}
 						on:pointerdown|stopPropagation={(e) =>
-							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+							!$connectingInput.opened && selectId(e, id, selectedComponent, app.val)}
 						on:keydown|stopPropagation
 						type="password"
 						autocomplete="new-password"
@@ -213,7 +213,7 @@
 						)}
 						style={css?.input?.style ?? ''}
 						on:pointerdown|stopPropagation={(e) =>
-							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+							!$connectingInput.opened && selectId(e, id, selectedComponent, app.val)}
 						on:keydown|stopPropagation
 						type="text"
 						bind:value
@@ -229,7 +229,7 @@
 						)}
 						style={css?.input?.style ?? ''}
 						on:pointerdown|stopPropagation={(e) =>
-							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+							!$connectingInput.opened && selectId(e, id, selectedComponent, app.val)}
 						on:keydown|stopPropagation
 						type="email"
 						bind:value

frontend/src/lib/components/apps/components/inputs/AppTimeInput.svelte

@@ -91,7 +91,7 @@
 	function handleDefault(defaultValue: string | undefined) {
 		value = defaultValue
 	}
-	let css = initCss($app.css?.timeinputcomponent, customCss)
+	let css = initCss(app.val.css?.timeinputcomponent, customCss)
 </script>
 
 {#each Object.keys(components['timeinputcomponent'].initialData.configuration) as key (key)}
@@ -109,7 +109,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.timeinputcomponent}
+		componentStyle={app.val.css?.timeinputcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/AppUserResource.svelte

@@ -37,7 +37,7 @@
 		result: undefined as string | undefined
 	})
 
-	let css = initCss($app.css?.['userresourcecomponent'], customCss)
+	let css = initCss(app.val.css?.['userresourcecomponent'], customCss)
 
 	$: classInput = twMerge(
 		'windmillapp w-full px-2',
@@ -94,7 +94,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.textinputcomponent}
+		componentStyle={app.val.css?.textinputcomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -76,7 +76,7 @@
 
 	$: value != undefined && handleInput()
 
-	let css = initCss($app.css?.currencycomponent, customCss)
+	let css = initCss(app.val.css?.currencycomponent, customCss)
 </script>
 
 {#each Object.keys(components['currencycomponent'].initialData.configuration) as key (key)}
@@ -94,7 +94,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.currencycomponent}
+		componentStyle={app.val.css?.currencycomponent}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte

@@ -54,7 +54,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.conditionalwrapper, customCss))
+	let css = $state(initCss(app.val.css?.conditionalwrapper, customCss))
 
 	let resolvedConditions: boolean[] = $state(conditions.map((_x) => false))
 	let selectedConditionIndex = $state(0)
@@ -109,7 +109,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.conditionalwrapper}
+		componentStyle={app.val.css?.conditionalwrapper}
 	/>
 {/each}
 
@@ -117,7 +117,7 @@
 
 {#if everRender}
 	<div class="w-full h-full">
-		{#if $app.subgrids}
+		{#if app.val.subgrids}
 			{#each resolvedConditions ?? [] as _res, i}
 				<SubGridEditor
 					visible={render && i == selectedConditionIndex}
@@ -136,7 +136,7 @@
 			{/each}
 		{/if}
 	</div>
-{:else if $app.subgrids}
+{:else if app.val.subgrids}
 	{#each resolvedConditions ?? [] as _res, i}
 		<SubGridEditor visible={false} {id} subGridId={`${id}-${i}`} />
 	{/each}

frontend/src/lib/components/apps/components/layout/AppContainer.svelte

@@ -66,7 +66,7 @@
 		}
 	})
 
-	let css = $state(initCss($app.css?.containercomponent, customCss))
+	let css = $state(initCss(app.val.css?.containercomponent, customCss))
 </script>
 
 <InitializeComponent {id} />
@@ -77,7 +77,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.containercomponent}
+		componentStyle={app.val.css?.containercomponent}
 	/>
 {/each}
 
@@ -89,7 +89,7 @@
 
 {#if everRender}
 	<div class="w-full h-full">
-		{#if $app.subgrids?.[`${id}-0`]}
+		{#if app.val.subgrids?.[`${id}-0`]}
 			<GroupWrapper {id} context={groupContext}>
 				<SubGridEditor
 					visible={render}
@@ -108,7 +108,7 @@
 			</GroupWrapper>
 		{/if}
 	</div>
-{:else if $app.subgrids?.[`${id}-0`]}
+{:else if app.val.subgrids?.[`${id}-0`]}
 	<GroupWrapper {id} context={groupContext}>
 		<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
 	</GroupWrapper>

frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte

@@ -53,12 +53,12 @@
 		debuggingComponents
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	let css = $state(initCss($app.css?.conditionalwrapper, customCss))
+	let css = $state(initCss(app.val.css?.conditionalwrapper, customCss))
 	let selectedConditionIndex = 0
 	let currentNodeId = $state(getFirstNode(nodes)?.id ?? '')
 
 	let outputs = initOutput($worldStore, id, {
-		currentNodeId,
+		currentNodeId: untrack(() => currentNodeId),
 		currentNodeIndex: selectedConditionIndex
 	})
 
@@ -195,7 +195,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.conditionalwrapper}
+		componentStyle={app.val.css?.conditionalwrapper}
 	/>
 {/each}
 
@@ -204,7 +204,7 @@
 {#if everRender}
 	<div class="w-full overflow-auto">
 		<div class="w-full">
-			{#if $app.subgrids}
+			{#if app.val.subgrids}
 				{#each Object.values(nodes) ?? [] as node, i}
 					<SubGridEditor
 						visible={render && node.id === currentNodeId}
@@ -256,7 +256,7 @@
 			</Button>
 		</div>
 	{/if}
-{:else if $app.subgrids}
+{:else if app.val.subgrids}
 	{#each Object.values(nodes) ?? [] as _node, i}
 		<SubGridEditor visible={false} {id} subGridId={`${id}-${i}`} />
 	{/each}

frontend/src/lib/components/apps/components/layout/AppDivider.svelte

@@ -29,7 +29,7 @@
 	let size = 2
 	let color = '#00000060'
 
-	let css = initCss($app.css?.[position + 'dividercomponent'], customCss)
+	let css = initCss(app.val.css?.[position + 'dividercomponent'], customCss)
 
 	//used so that we can count number of outputs setup for first refresh
 	initOutput($worldStore, id, {})
@@ -57,7 +57,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.[position + 'dividercomponent']}
+		componentStyle={app.val.css?.[position + 'dividercomponent']}
 	/>
 {/each}
 

frontend/src/lib/components/apps/components/layout/AppDrawer.svelte

@@ -76,7 +76,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.drawercomponent, customCss))
+	let css = $state(initCss(app.val.css?.drawercomponent, customCss))
 </script>
 
 {#each Object.keys(components['drawercomponent'].initialData.configuration) as key (key)}
@@ -94,7 +94,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.drawercomponent}
+		componentStyle={app.val.css?.drawercomponent}
 	/>
 {/each}
 
@@ -178,7 +178,7 @@
 							}
 						}}
 					>
-						{#if $app.subgrids?.[`${id}-0`]}
+						{#if app.val.subgrids?.[`${id}-0`]}
 							<SubGridEditor
 								visible={open && render}
 								{id}
@@ -200,6 +200,6 @@
 			{/snippet}
 		</Drawer>
 	</Portal>
-{:else if $app.subgrids?.[`${id}-0`]}
+{:else if app.val.subgrids?.[`${id}-0`]}
 	<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
 {/if}

frontend/src/lib/components/apps/components/layout/AppList.svelte

@@ -60,7 +60,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.listcomponent, customCss))
+	let css = $state(initCss(app.val.css?.listcomponent, customCss))
 	let result: any[] | undefined = $state(undefined)
 
 	let isCard = $derived(resolvedConfig.width?.selected == 'card')
@@ -138,7 +138,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.listcomponent}
+		componentStyle={app.val.css?.listcomponent}
 	/>
 {/each}
 
@@ -169,7 +169,7 @@
 						? 'divide-y flex-col'
 						: 'flex-col'}"
 			>
-				{#if $app.subgrids?.[`${id}-0`] && Array.isArray(result) && result.length > 0}
+				{#if app.val.subgrids?.[`${id}-0`] && Array.isArray(result) && result.length > 0}
 					{#each result ?? [] as value, index (index)}
 						{@const inRange = index <= pagination.maxIndex && index >= pagination.indexOffset}
 						<div
@@ -288,7 +288,7 @@
 				</div>
 			{/if}
 		</div>
-	{:else if $app.subgrids}
+	{:else if app.val.subgrids}
 		<ListWrapper disabled value={undefined} index={0}>
 			<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
 		</ListWrapper>

frontend/src/lib/components/apps/components/layout/AppModal.svelte

@@ -65,7 +65,7 @@
 		open: false
 	})
 
-	let css = $state(initCss($app.css?.modalcomponent, customCss))
+	let css = $state(initCss(app.val.css?.modalcomponent, customCss))
 	let disposable: Disposable | undefined = $state(undefined)
 
 	let resolvedConfig = $state(
@@ -103,7 +103,8 @@
 	let containerHeight = $derived(
 		Math.min(
 			// 8px * 2 of padding
-			maxHeight($app.subgrids?.[`${id}-0`] ?? [], 0, $breakpoint) * (ROW_HEIGHT + ROW_GAP_Y) + 16,
+			maxHeight(app.val.subgrids?.[`${id}-0`] ?? [], 0, $breakpoint) * (ROW_HEIGHT + ROW_GAP_Y) +
+				16,
 			// 32px (2rem) of top and bottom margin
 			wrapperHeight - headerHeight - 64
 		)
@@ -131,7 +132,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.modalcomponent}
+		componentStyle={app.val.css?.modalcomponent}
 	/>
 {/each}
 
@@ -237,7 +238,7 @@
 								}
 							}}
 						>
-							{#if $app.subgrids?.[`${id}-0`]}
+							{#if app.val.subgrids?.[`${id}-0`]}
 								<SubGridEditor
 									visible={open && render}
 									{id}
@@ -260,6 +261,6 @@
 			{/snippet}
 		</Disposable>
 	</Portal>
-{:else if $app.subgrids?.[`${id}-0`]}
+{:else if app.val.subgrids?.[`${id}-0`]}
 	<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
 {/if}

frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte

@@ -51,7 +51,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.containercomponent, customCss))
+	let css = $state(initCss(app.val.css?.containercomponent, customCss))
 
 	$componentControl[id] = {
 		left: () => {
@@ -93,7 +93,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.[
+		componentStyle={app.val.css?.[
 			horizontal ? 'horizontalsplitpanescomponent' : 'verticalsplitpanescomponent'
 		]}
 	/>
@@ -117,7 +117,7 @@
 								}
 							})}
 						>
-							{#if $app.subgrids?.[`${id}-${index}`]}
+							{#if app.val.subgrids?.[`${id}-${index}`]}
 								<SubGridEditor
 									visible={render}
 									{id}

frontend/src/lib/components/apps/components/layout/AppStepper.svelte

@@ -60,7 +60,7 @@
 	let tabHeight: number = $state(0)
 	let footerHeight: number = $state(0)
 	let runnableComponent: RunnableComponent | undefined = $state()
-	let selectedIndex = $state(tabs?.indexOf(selected) ?? -1)
+	let selectedIndex = $state(tabs?.indexOf(untrack(() => selected)) ?? -1)
 	let maxReachedIndex = $state(-1)
 	let statusByStep = $state([] as Array<'success' | 'error' | 'pending'>)
 	let debugMode: boolean = false
@@ -152,7 +152,7 @@
 	$effect.pre(() => {
 		selected != undefined && untrack(() => handleTabSelection())
 	})
-	let css = $state(initCss($app.css?.steppercomponent, customCss))
+	let css = $state(initCss(app.val.css?.steppercomponent, customCss))
 	let lastStep = $derived(selectedIndex === tabs.length - 1)
 
 	let directionClicked: 'left' | 'right' | undefined = $state(undefined)
@@ -164,7 +164,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.steppercomponent}
+		componentStyle={app.val.css?.steppercomponent}
 	/>
 {/each}
 
@@ -205,7 +205,7 @@
 			{/if}
 
 			<div class="w-full">
-				{#if $app.subgrids}
+				{#if app.val.subgrids}
 					{#each tabs ?? [] as _res, i}
 						<SubGridEditor
 							{id}
@@ -284,7 +284,7 @@
 				</div>
 			{/if}
 		</div>
-	{:else if $app.subgrids}
+	{:else if app.val.subgrids}
 		{#each tabs ?? [] as _res, i}
 			<SubGridEditor {id} visible={false} subGridId={`${id}-${i}`} />
 		{/each}

frontend/src/lib/components/apps/components/layout/AppTabs.svelte

@@ -62,8 +62,8 @@
 	} = getContext<AppViewerContext>('AppViewerContext')
 
 	let selected: string = $state(tabs[0])
-	let selectedIndex = $state(tabs?.indexOf(selected) ?? -1)
-	let css = $state(initCss($app.css?.tabscomponent, customCss))
+	let selectedIndex = $state(tabs?.indexOf(untrack(() => selected)) ?? -1)
+	let css = $state(initCss(app.val.css?.tabscomponent, customCss))
 
 	let tabHeight: number = $state(0)
 
@@ -154,7 +154,7 @@
 		{customCss}
 		{key}
 		bind:css={css[key]}
-		componentStyle={$app.css?.tabscomponent}
+		componentStyle={app.val.css?.tabscomponent}
 	/>
 {/each}
 
@@ -278,7 +278,7 @@
 			</div>
 		{:else}
 			<div class="w-full">
-				{#if $app.subgrids}
+				{#if app.val.subgrids}
 					{#each tabs ?? [] as _res, i}
 						<SubGridEditor
 							{id}
@@ -301,7 +301,7 @@
 			</div>
 		{/if}
 	</div>
-{:else if $app.subgrids}
+{:else if app.val.subgrids}
 	{#each tabs ?? [] as _res, i}
 		<SubGridEditor {id} visible={false} subGridId={`${id}-${i}`} />
 	{/each}

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -26,7 +26,13 @@
 	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
 	import Tabs from '$lib/components/common/tabs/TabsV2.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
-	import { classNames, encodeState, getModifierKey, sendUserToast } from '$lib/utils'
+	import {
+		classNames,
+		encodeState,
+		getModifierKey,
+		sendUserToast,
+		type StateStore
+	} from '$lib/utils'
 	import AppPreview from './AppPreview.svelte'
 	import ComponentList from './componentsPanel/ComponentList.svelte'
 	import ContextPanel from './contextPanel/ContextPanel.svelte'
@@ -57,7 +63,7 @@
 	import panzoom from 'panzoom'
 
 	interface Props {
-		app: App
+		appInitial: App
 		path: string
 		policy: Policy
 		summary: string
@@ -83,7 +89,7 @@
 	}
 
 	let {
-		app,
+		appInitial,
 		path,
 		policy,
 		summary,
@@ -98,10 +104,10 @@
 		unsavedConfirmationModal
 	}: Props = $props()
 
-	migrateApp(app)
+	migrateApp(appInitial)
 
-	const stateApp = $state(app)
-	const appStore = writable<App>(stateApp)
+	const stateApp = $state(appInitial)
+	const appStore: StateStore<App> = $state({ val: stateApp })
 	const selectedComponent = writable<string[] | undefined>(undefined)
 
 	// $: selectedComponent.subscribe((s) => {
@@ -118,7 +124,7 @@
 
 	const cssEditorOpen = writable<boolean>(false)
 
-	const history = initHistory(app)
+	const history = initHistory(appInitial)
 
 	const jobsById = writable<
 		Record<
@@ -243,7 +249,7 @@
 		timeout && clearTimeout(timeout)
 		timeout = setTimeout(() => {
 			try {
-				localStorage.setItem(path != '' ? `app-${path}` : 'app', encodeState($appStore))
+				localStorage.setItem(path != '' ? `app-${path}` : 'app', encodeState(appStore.val))
 			} catch (err) {
 				console.error('Error storing frontend draft in localStorage', err)
 			}
@@ -263,7 +269,7 @@
 		selectedTab = 'settings'
 		if (befSelected) {
 			if (!['ctx', 'state'].includes(befSelected) && !befSelected?.startsWith(BG_PREFIX)) {
-				let item = findGridItem($appStore, befSelected)
+				let item = findGridItem(appStore.val, befSelected)
 				if (
 					item?.data.type === 'containercomponent' ||
 					item?.data.type === 'listcomponent' ||
@@ -289,7 +295,7 @@
 							($worldStore.outputsById?.[befSelected]?.selectedTabIndex?.peak() as number) ?? 0
 					}
 				} else {
-					let subgrid = findGridItemParentGrid($appStore, befSelected)
+					let subgrid = findGridItemParentGrid(appStore.val, befSelected)
 					if (subgrid) {
 						try {
 							$focusedGrid = {
@@ -398,22 +404,25 @@
 	let css: string | undefined = $state(undefined)
 
 	let lastTheme: string | undefined = undefined
-	appStore.subscribe(async (currentAppStore) => {
-		if (!currentAppStore.theme) {
-			return
-		}
-
-		if (JSON.stringify(currentAppStore.theme) != lastTheme) {
-			if (currentAppStore.theme.type === 'inlined') {
-				css = currentAppStore.theme.css
-			} else if (currentAppStore.theme.type === 'path' && currentAppStore.theme?.path) {
-				let loadedCss = await getTheme($workspaceStore!, currentAppStore.theme.path)
-				if (loadedCss) {
-					css = loadedCss.value
-				}
+	$effect(() => {
+		;[appStore.val]
+		untrack(async () => {
+			if (!appStore.val.theme) {
+				return
 			}
-			lastTheme = JSON.stringify(currentAppStore.theme)
-		}
+
+			if (JSON.stringify(appStore.val.theme) != lastTheme) {
+				if (appStore.val.theme.type === 'inlined') {
+					css = appStore.val.theme.css
+				} else if (appStore.val.theme.type === 'path' && appStore.val.theme?.path) {
+					let loadedCss = await getTheme($workspaceStore!, appStore.val.theme.path)
+					if (loadedCss) {
+						css = loadedCss.value
+					}
+				}
+				lastTheme = JSON.stringify(appStore.val.theme)
+			}
+		})
 	})
 
 	function addOrRemoveCss(isPremium: boolean, isPreview: boolean = false) {
@@ -771,15 +780,15 @@
 		path && untrack(() => onPathChange())
 	})
 	$effect(() => {
-		$appStore && untrack(() => saveFrontendDraft())
+		appStore.val && untrack(() => saveFrontendDraft())
 	})
 	$effect(() => {
 		context.mode = $mode == 'dnd' ? 'editor' : 'viewer'
 	})
 	let width = $derived(
-		$breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
+		$breakpoint === 'sm' && appStore.val?.mobileViewOnSmallerScreens !== false
 			? 'min-w-[400px] max-w-[656px]'
-			: `min-w-[710px] ${$appStore.fullscreen ? 'w-full' : 'max-w-7xl'}`
+			: `min-w-[710px] ${appStore.val.fullscreen ? 'w-full' : 'max-w-7xl'}`
 	)
 	$effect(() => {
 		if ($selectedComponent?.[0] != befSelected) {
@@ -858,7 +867,7 @@
 
 <!-- {$focusedGrid?.parentComponentId} -->
 {#if !$userStore?.operator}
-	{#if $appStore}
+	{#if appStore.val}
 		<AppEditorHeader
 			{newPath}
 			{newApp}
@@ -897,15 +906,15 @@
 				<div
 					class={twMerge(
 						'h-full w-full relative',
-						$appStore.css?.['app']?.['viewer']?.class,
+						appStore.val.css?.['app']?.['viewer']?.class,
 						'wm-app-viewer'
 					)}
-					style={$appStore.css?.['app']?.['viewer']?.style}
+					style={appStore.val.css?.['app']?.['viewer']?.style}
 				>
 					<AppPreview
 						workspace={$workspaceStore ?? ''}
 						summary={$summaryStore}
-						app={$appStore}
+						app={appStore.val}
 						appPath={path}
 						{breakpoint}
 						{policy}
@@ -963,11 +972,11 @@
 									}}
 									class={twMerge(
 										'bg-surface-secondary h-full w-full relative',
-										$appStore.css?.['app']?.['viewer']?.class,
+										appStore.val.css?.['app']?.['viewer']?.class,
 										'wm-app-viewer h-full overflow-visible',
 										$panzoomActive ? 'cursor-grab' : ''
 									)}
-									style={$appStore.css?.['app']?.['viewer']?.style}
+									style={appStore.val.css?.['app']?.['viewer']?.style}
 									bind:clientWidth={centerPanelWidth}
 								>
 									{#if leftPanelSize === 0}
@@ -1097,7 +1106,7 @@
 										)}
 										style={$componentActive ? `top: -${$yTop}px;` : ''}
 									>
-										{#if $appStore.grid}
+										{#if appStore.val.grid}
 											{#if !$connectingInput?.opened}
 												<ComponentNavigation />
 											{/if}
@@ -1114,7 +1123,7 @@
 												<GridEditor {policy} />
 											</div>
 										{/if}
-										{#if !$appStore?.mobileViewOnSmallerScreens && $breakpoint === 'sm'}
+										{#if !appStore.val?.mobileViewOnSmallerScreens && $breakpoint === 'sm'}
 											<div
 												class="absolute inset-0 flex bg-surface center-center z-10000 bg-opacity-60"
 											>
@@ -1131,7 +1140,7 @@
 														variant="border"
 														size="xs"
 														on:click={() => {
-															$appStore.mobileViewOnSmallerScreens = true
+															appStore.val.mobileViewOnSmallerScreens = true
 														}}
 														startIcon={{
 															icon: Smartphone

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -187,7 +187,7 @@
 	}
 
 	async function computeTriggerables() {
-		const items = allItems($app.grid, $app.subgrids)
+		const items = allItems(app.val.grid, app.val.subgrids)
 
 		console.debug('items', items)
 
@@ -277,7 +277,7 @@
 					return processed as Promise<[string, TriggerableV2] | undefined>[]
 				})
 				.concat(
-					Object.values($app.hiddenInlineScripts ?? {}).map(async (v, i) => {
+					Object.values(app.val.hiddenInlineScripts ?? {}).map(async (v, i) => {
 						return await processRunnable(BG_PREFIX + i, v, v.fields)
 					}) as Promise<[string, TriggerableV2] | undefined>[]
 				)
@@ -294,7 +294,7 @@
 			.map((x) => {
 				const c = x.data as AppComponent
 				const config = c.configuration as any
-				return computeS3FileInputPolicy(config?.type?.configuration?.s3, $app)
+				return computeS3FileInputPolicy(config?.type?.configuration?.s3, app.val)
 			})
 			.filter(Boolean) as {
 			allowed_resources: string[]
@@ -345,7 +345,7 @@
 		fields: Record<string, any>
 	): Promise<[string, TriggerableV2] | undefined> {
 		const staticInputs = collectStaticFields(fields)
-		const oneOfInputs = collectOneOfFields(fields, $app)
+		const oneOfInputs = collectOneOfFields(fields, app.val)
 		const allowUserResources: string[] = Object.entries(fields)
 			.map(([k, v]) => {
 				return v['allowUserResources'] ? k : undefined
@@ -382,7 +382,7 @@
 			await AppService.createApp({
 				workspace: $workspaceStore!,
 				requestBody: {
-					value: $app,
+					value: app.val,
 					path,
 					summary: $summary,
 					policy,
@@ -392,7 +392,7 @@
 			})
 			savedApp = {
 				summary: $summary,
-				value: structuredClone($state.snapshot($app)),
+				value: structuredClone($state.snapshot(app.val)),
 				path: path,
 				policy: policy,
 				custom_path: customPath
@@ -425,12 +425,12 @@
 			if (
 				deployedValue &&
 				savedApp &&
-				$app &&
+				app.val &&
 				orderedJsonStringify(deployedValue) ===
 					orderedJsonStringify(
 						replaceFalseWithUndefined({
 							summary: $summary,
-							value: $app,
+							value: app.val,
 							path: newEditedPath || savedApp.draft?.path || savedApp.path,
 							policy,
 							custom_path: customPath
@@ -475,7 +475,7 @@
 			workspace: $workspaceStore!,
 			path: $appPath!,
 			requestBody: {
-				value: $app!,
+				value: app.val!,
 				summary: $summary,
 				policy,
 				path: npath,
@@ -488,7 +488,7 @@
 		})
 		savedApp = {
 			summary: $summary,
-			value: structuredClone($state.snapshot($app)),
+			value: structuredClone($state.snapshot(app.val)),
 			path: npath,
 			policy,
 			custom_path: customPath
@@ -548,7 +548,7 @@
 			await AppService.createApp({
 				workspace: $workspaceStore!,
 				requestBody: {
-					value: $app,
+					value: app.val,
 					path: newEditedPath,
 					summary: $summary,
 					policy,
@@ -562,7 +562,7 @@
 					path: newEditedPath,
 					typ: 'app',
 					value: {
-						value: $app,
+						value: app.val,
 						path: newEditedPath,
 						summary: $summary,
 						policy,
@@ -572,13 +572,13 @@
 			})
 			savedApp = {
 				summary: $summary,
-				value: structuredClone($state.snapshot($app)),
+				value: structuredClone($state.snapshot(app.val)),
 				path: newEditedPath,
 				policy,
 				draft_only: true,
 				draft: {
 					summary: $summary,
-					value: structuredClone($state.snapshot($app)),
+					value: structuredClone($state.snapshot(app.val)),
 					path: newEditedPath,
 					policy,
 					custom_path: customPath
@@ -606,7 +606,7 @@
 		const draftOrDeployed = cleanValueProperties(savedApp.draft || savedApp)
 		const current = cleanValueProperties({
 			summary: $summary,
-			value: $app,
+			value: app.val,
 			path: newEditedPath || savedApp.draft?.path || savedApp.path,
 			policy
 		})
@@ -633,7 +633,7 @@
 				await AppService.createApp({
 					workspace: $workspaceStore!,
 					requestBody: {
-						value: $app!,
+						value: app.val!,
 						summary: $summary,
 						policy,
 						path: newEditedPath || path,
@@ -648,7 +648,7 @@
 					path: savedApp.draft_only ? newEditedPath || path : path,
 					typ: 'app',
 					value: {
-						value: $app!,
+						value: app.val!,
 						summary: $summary,
 						policy,
 						path: newEditedPath || path
@@ -660,7 +660,7 @@
 				...(savedApp?.draft_only
 					? {
 							summary: $summary,
-							value: structuredClone($state.snapshot($app)),
+							value: structuredClone($state.snapshot(app.val)),
 							path: savedApp.draft_only ? newEditedPath || path : path,
 							policy,
 							draft_only: true,
@@ -669,7 +669,7 @@
 					: savedApp),
 				draft: {
 					summary: $summary,
-					value: structuredClone($state.snapshot($app)),
+					value: structuredClone($state.snapshot(app.val)),
 					path: newEditedPath || path,
 					policy,
 					custom_path: customPath
@@ -728,16 +728,16 @@
 				if (event.ctrlKey || event.metaKey) {
 					const napp = redo(history)
 					for (const key in napp) {
-						$app[key] = napp[key]
+						app.val[key] = napp[key]
 					}
 					event.preventDefault()
 				}
 				break
 			case 'z':
 				if (event.ctrlKey || event.metaKey) {
-					const napp = undo(history, $app)
+					const napp = undo(history, app.val)
 					for (const key in napp) {
-						$app[key] = napp[key]
+						app.val[key] = napp[key]
 					}
 					event.preventDefault()
 				}
@@ -786,14 +786,14 @@
 			displayName: 'Export',
 			icon: FileJson,
 			action: () => {
-				appExport?.open($app)
+				appExport?.open(app.val)
 			}
 		},
 		// {
 		// 	displayName: 'Publish to Hub',
 		// 	icon: faGlobe,
 		// 	action: () => {
-		// 		const url = appToHubUrl(toStatic($app, $staticExporter, $summary, $hubBaseUrlStore))
+		// 		const url = appToHubUrl(toStatic(app.val, $staticExporter, $summary, $hubBaseUrlStore))
 		// 		window.open(url.toString(), '_blank')
 		// 	}
 		// },
@@ -801,7 +801,7 @@
 			displayName: 'Hub compatible JSON',
 			icon: FileUp,
 			action: () => {
-				appExport?.open(toStatic($app, $staticExporter, $summary).app)
+				appExport?.open(toStatic(app.val, $staticExporter, $summary).app)
 			}
 		},
 		{
@@ -837,7 +837,7 @@
 					draft: savedApp.draft,
 					current: {
 						summary: $summary,
-						value: $app,
+						value: app.val,
 						path: newEditedPath || savedApp.draft?.path || savedApp.path,
 						policy,
 						custom_path: customPath
@@ -890,7 +890,7 @@
 	}
 
 	let priorDarkMode = document.documentElement.classList.contains('dark')
-	setTheme($app?.darkMode)
+	setTheme(app.val?.darkMode)
 
 	let customPath = $state(savedApp?.custom_path)
 	let dirtyCustomPath = $state(false)
@@ -956,7 +956,7 @@
 			savedValue: savedApp,
 			modifiedValue: {
 				summary: $summary,
-				value: $app,
+				value: app.val,
 				path: newEditedPath || savedApp?.draft?.path || savedApp?.path,
 				policy,
 				custom_path: customPath
@@ -972,7 +972,7 @@
 	bind:deployedValue
 	currentValue={{
 		summary: $summary,
-		value: $app,
+		value: app.val,
 		path: newEditedPath || savedApp?.draft?.path || savedApp?.path,
 		policy,
 		custom_path: customPath
@@ -1128,7 +1128,7 @@
 							draft: savedApp.draft,
 							current: {
 								summary: $summary,
-								value: $app,
+								value: app.val,
 								path: newEditedPath || savedApp.draft?.path || savedApp.path,
 								policy,
 								custom_path: customPath
@@ -1318,25 +1318,25 @@
 				undoProps={{ disabled: $history?.index === 0 }}
 				redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
 				on:undo={() => {
-					const napp = undo(history, $app)
+					const napp = undo(history, app.val)
 					for (const key in napp) {
-						$app[key] = napp[key]
+						app.val[key] = napp[key]
 					}
 				}}
 				on:redo={() => {
 					const napp = redo(history)
 					for (const key in napp) {
-						$app[key] = napp[key]
+						app.val[key] = napp[key]
 					}
 				}}
 			/>
 
-			{#if $app}
+			{#if app.val}
 				<ToggleButtonGroup
 					class="h-[30px]"
-					selected={$app.fullscreen ? 'true' : 'false'}
+					selected={app.val.fullscreen ? 'true' : 'false'}
 					on:selected={({ detail }) => {
-						$app.fullscreen = detail === 'true'
+						app.val.fullscreen = detail === 'true'
 					}}
 				>
 					{#snippet children({ item })}
@@ -1357,14 +1357,14 @@
 					{/snippet}
 				</ToggleButtonGroup>
 			{/if}
-			{#if $app}
+			{#if app.val}
 				<ToggleButtonGroup
 					class="h-[30px]"
 					on:selected={({ detail }) => {
 						const theme = detail === 'dark' ? true : detail === 'sun' ? false : undefined
 						setTheme(theme)
 					}}
-					selected={$app.darkMode === undefined ? 'auto' : $app.darkMode ? 'dark' : 'sun'}
+					selected={app.val.darkMode === undefined ? 'auto' : app.val.darkMode ? 'dark' : 'sun'}
 				>
 					{#snippet children({ item })}
 						<ToggleButton
@@ -1417,7 +1417,7 @@
 										'Desktop view is enabled by default. Enable this to customize the layout of the components for the mobile view'
 								}}
 								textClass="text-2xs whitespace-nowrap white !w-full"
-								bind:checked={$app.mobileViewOnSmallerScreens}
+								bind:checked={app.val.mobileViewOnSmallerScreens}
 								class="flex flex-row px-2 items-center"
 							/>
 						{/if}

frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte

@@ -23,7 +23,7 @@
 		const forkedFromTemplate = urlParams.get('template')
 
 		if (
-			!isAppTainted($app) &&
+			!isAppTainted(app.val) &&
 			!$ignoredTutorials.includes(7) &&
 			$tutorialsToDo.includes(7) &&
 			!forkedFromTheHub &&

frontend/src/lib/components/apps/editor/AppInputs.svelte

@@ -19,7 +19,7 @@
 	<Toggle bind:checked={resourceOnly} options={{ right: 'Resource only' }} />
 </div>
 <div class="gap-4 flex flex-col pt-4">
-	{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)}
+	{#each allItems(app.val.grid, app.val.subgrids) as gridItem (gridItem.data.id)}
 		{#if gridItem?.data?.type === 'tablecomponent'}
 			<div>
 				<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
@@ -52,10 +52,10 @@
 	{/each}
 </div>
 
-{#if $app?.hiddenInlineScripts?.length > 0}
+{#if app.val?.hiddenInlineScripts?.length > 0}
 	<div class="font-bold text-lg">Background runnable inputs</div>
 	<div class="gap-4 flex flex-col pt-4">
-		{#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
+		{#each app.val?.hiddenInlineScripts ?? [] as script, index (script.name)}
 			<div class="border p-2">
 				<div class="text-sm font-bold">{script.name}</div>
 

frontend/src/lib/components/apps/editor/AppPreview.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { getContext, onDestroy, setContext } from 'svelte'
 	import { get, writable, type Writable } from 'svelte/store'
 	import { buildWorld } from '../rx'
@@ -23,29 +25,45 @@
 	import { getTheme } from './componentsPanel/themeUtils'
 	import HiddenComponent from '../components/helpers/HiddenComponent.svelte'
 	import RecomputeAllComponents from './RecomputeAllComponents.svelte'
+	import type { StateStore } from '$lib/utils'
 
-	export let app: App
-	export let appPath: string = ''
-	export let breakpoint: Writable<EditorBreakpoint> = writable('lg')
-	export let policy: Policy = {}
-	export let summary: string = ''
-	export let workspace: string = $workspaceStore!
-	export let isEditor: boolean = false
-	export let context: Record<string, any>
-	export let noBackend: boolean = false
-	export let isLocked = false
-	export let hideRefreshBar = false
+	interface Props {
+		app: App
+		appPath?: string
+		breakpoint?: Writable<EditorBreakpoint>
+		policy?: Policy
+		summary?: string
+		workspace?: string
+		isEditor?: boolean
+		context: Record<string, any>
+		noBackend?: boolean
+		isLocked?: boolean
+		hideRefreshBar?: boolean
+		class?: string
+		replaceStateFn?: (path: string) => void
+		gotoFn?: (path: string, opt?: Record<string, any> | undefined) => void
+	}
 
-	export let replaceStateFn: (path: string) => void = (path: string) =>
-		window.history.replaceState(null, '', path)
-	export let gotoFn: (path: string, opt?: Record<string, any> | undefined) => void = (
-		path: string,
-		opt?: Record<string, any>
-	) => window.history.pushState(null, '', path)
+	let {
+		app,
+		appPath = '',
+		breakpoint = writable('lg'),
+		policy = {},
+		summary = '',
+		workspace = $workspaceStore!,
+		isEditor = false,
+		context,
+		noBackend = false,
+		isLocked = $bindable(false),
+		hideRefreshBar = false,
+		class: className = '',
+		replaceStateFn = (path: string) => window.history.replaceState(null, '', path),
+		gotoFn = (path: string, opt?: Record<string, any>) => window.history.pushState(null, '', path)
+	}: Props = $props()
 
 	migrateApp(app)
 
-	const appStore = writable<App>(app)
+	const appStore: StateStore<App> = $state({ val: app })
 	const selectedComponent = writable<string[] | undefined>(undefined)
 	const mode = writable<EditorMode>('preview')
 
@@ -93,12 +111,11 @@
 
 	setTheme($darkMode)
 
-	const state = writable({})
+	const state_ = writable({})
 
 	let parentContext = getContext<AppViewerContext>('AppViewerContext')
 
 	let worldStore = buildWorld(ncontext)
-	$: onContextChange(context)
 
 	function onContextChange(context: any) {
 		Object.assign(ncontext, context)
@@ -118,7 +135,6 @@
 	}
 
 	let writablePath = writable(appPath)
-	$: appPath && onPathChange()
 
 	function onPathChange() {
 		writablePath.set(appPath)
@@ -152,7 +168,7 @@
 		focusedGrid: writable(undefined),
 		stateId: writable(0),
 		parentWidth,
-		state: state,
+		state: state_,
 		componentControl: writable({}),
 		hoverStore: writable(undefined),
 		allIdsInPath,
@@ -172,19 +188,7 @@
 		panzoomActive: writable(false)
 	})
 
-	let previousSelectedIds: string[] | undefined = undefined
-	$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
-		previousSelectedIds = $selectedComponent
-		$allIdsInPath = ($selectedComponent ?? [])
-			.flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
-			.filter((x) => x != undefined) as string[]
-	}
-
-	$: width =
-		$breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
-			? 'max-w-[640px]'
-			: 'w-full min-w-[768px]'
-	$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : ''
+	let previousSelectedIds: string[] | undefined = $state(undefined)
 
 	function onThemeChange() {
 		$darkMode = app?.darkMode ?? document.documentElement.classList.contains('dark')
@@ -192,9 +196,11 @@
 
 	const cssId = 'wm-global-style'
 
-	let css: string | undefined = undefined
+	let css: string | undefined = $state(undefined)
 
-	appStore.subscribe(loadTheme)
+	$effect(() => {
+		loadTheme(appStore.val)
+	})
 
 	async function loadTheme(currentAppStore: App) {
 		if (!currentAppStore.theme) {
@@ -211,8 +217,6 @@
 		}
 	}
 
-	$: addOrRemoveCss($enterpriseLicense !== undefined || isEditor, css)
-
 	function addOrRemoveCss(isPremium: boolean, cssString: string | undefined) {
 		const existingElement = document.getElementById(cssId)
 
@@ -237,33 +241,55 @@
 		}
 	}
 
-	let appHeight: number = 0
+	let appHeight: number = $state(0)
 
-	$: maxRow = maxHeight($appStore.grid, appHeight, $breakpoint)
+	run(() => {
+		onContextChange(context)
+	})
+	run(() => {
+		appPath && onPathChange()
+	})
+	run(() => {
+		if (!deepEqual(previousSelectedIds, $selectedComponent)) {
+			previousSelectedIds = $selectedComponent
+			$allIdsInPath = ($selectedComponent ?? [])
+				.flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
+				.filter((x) => x != undefined) as string[]
+		}
+	})
+	let width = $derived(
+		$breakpoint === 'sm' && appStore.val?.mobileViewOnSmallerScreens !== false
+			? 'max-w-[640px]'
+			: 'w-full min-w-[768px]'
+	)
+	let lockedClasses = $derived(isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '')
+	run(() => {
+		addOrRemoveCss($enterpriseLicense !== undefined || isEditor, css)
+	})
+	let maxRow = $derived(maxHeight(appStore.val.grid, appHeight, $breakpoint))
 </script>
 
-<svelte:head>
-</svelte:head>
+<svelte:head></svelte:head>
 
 <DarkModeObserver on:change={onThemeChange} />
 
-<svelte:window on:hashchange={hashchange} on:resize={resizeWindow} />
+<svelte:window onhashchange={hashchange} onresize={resizeWindow} />
 
 <div class="relative min-h-full grow" bind:clientHeight={appHeight}>
 	<div id="app-editor-top-level-drawer"></div>
 	<div id="app-editor-select"></div>
 
 	<div
-		class="{$$props.class} {lockedClasses} {width} h-full bg-surface {app.fullscreen
+		class="{className} {lockedClasses} {width} h-full bg-surface {app.fullscreen
 			? ''
 			: 'max-w-7xl'} mx-auto"
 		id="app-content"
 	>
-		{#if $appStore.grid}
+		{#if appStore.val.grid}
 			<div
 				class={twMerge(
 					'mx-auto',
-					hideRefreshBar || $appStore?.norefreshbar || $appStore.hideLegacyTopBar === true
+					hideRefreshBar || appStore.val?.norefreshbar || appStore.val.hideLegacyTopBar === true
 						? 'invisible h-0 overflow-hidden'
 						: ''
 				)}
@@ -290,36 +316,32 @@
 			bind:clientWidth={$parentWidth}
 		>
 			<div>
-				<GridViewer
-					allIdsInPath={$allIdsInPath}
-					items={app.grid}
-					let:dataItem
-					{maxRow}
-					breakpoint={$breakpoint}
-				>
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						class={'h-full w-full center-center'}
-						on:pointerdown={() => ($selectedComponent = [dataItem.id])}
-					>
-						<Component
-							render={true}
-							component={dataItem.data}
-							selected={false}
-							locked={true}
-							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
-						/>
-					</div>
+				<GridViewer allIdsInPath={$allIdsInPath} items={app.grid} {maxRow} breakpoint={$breakpoint}>
+					{#snippet children({ dataItem })}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<div
+							class={'h-full w-full center-center'}
+							onpointerdown={() => ($selectedComponent = [dataItem.id])}
+						>
+							<Component
+								render={true}
+								component={dataItem.data}
+								selected={false}
+								locked={true}
+								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+							/>
+						</div>
+					{/snippet}
 				</GridViewer>
 			</div>
 		</div>
 	</div>
 
 	{#if isLocked}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			on:click={() => (isLocked = false)}
+			onclick={() => (isLocked = false)}
 			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
 		>
 			<Button on:click={() => (isLocked = false)}>

frontend/src/lib/components/apps/editor/GridEditor.svelte

@@ -56,27 +56,27 @@
 			untrack(() => {
 				previousSelectedIds = $selectedComponent
 				$allIdsInPath = ($selectedComponent ?? [])
-					.flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
+					.flatMap((id) => dfs(app.val.grid, id, app.val.subgrids ?? {}))
 					.filter((x) => x != undefined) as string[]
 			})
 		}
 	})
 
 	function handleLock(id: string) {
-		const gridItem = findGridItem($app, id)
+		const gridItem = findGridItem(app.val, id)
 		if (gridItem) {
 			toggleFixed(gridItem)
 		}
-		$app = $app
+		app.val = app.val
 	}
 
 	function handleFillHeight(id: string) {
-		const gridItem = findGridItem($app, id)
+		const gridItem = findGridItem(app.val, id)
 		const b = $breakpoint === 'sm' ? 3 : 12
 		if (gridItem?.[b]) {
 			gridItem[b].fullHeight = !gridItem[b].fullHeight
 		}
-		$app = $app
+		app.val = app.val
 	}
 
 	export function moveComponentBetweenSubgrids(
@@ -86,25 +86,25 @@
 		position?: { x: number; y: number }
 	) {
 		// Find the component in the source subgrid
-		const component = findGridItem($app, componentId)
+		const component = findGridItem(app.val, componentId)
 
 		if (!component) {
 			return
 		}
 
-		let parentGrid = findGridItemParentGrid($app, component.id)
+		let parentGrid = findGridItemParentGrid(app.val, component.id)
 		if (parentGrid) {
-			$app.subgrids &&
-				($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter(
+			app.val.subgrids &&
+				(app.val.subgrids[parentGrid] = app.val.subgrids[parentGrid].filter(
 					(item) => item.id !== component?.id
 				))
 		} else {
-			$app.grid = $app.grid.filter((item) => item.id !== component?.id)
+			app.val.grid = app.val.grid.filter((item) => item.id !== component?.id)
 		}
 
 		const gridItem = component
 		insertNewGridItem(
-			$app,
+			app.val,
 			(id) => ({ ...gridItem.data, id }),
 			{ parentComponentId: parentComponentId, subGridIndex: subGridIndex },
 			Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])),
@@ -117,7 +117,7 @@
 		)
 
 		// Update the app state
-		$app = $app
+		app.val = app.val
 
 		$selectedComponent = [parentComponentId]
 		$focusedGrid = {
@@ -128,7 +128,7 @@
 </script>
 
 <div class="w-full z-[1000] overflow-visible h-full">
-	<div class={$app.hideLegacyTopBar ? 'hidden' : ''}>
+	<div class={app.val.hideLegacyTopBar ? 'hidden' : ''}>
 		<div
 			class="w-full sticky top-0 flex justify-between border-b {$componentActive
 				? 'invisible'
@@ -165,7 +165,7 @@
 			<div class="flex text-2xs gap-8 items-center">
 				<div class="py-2 pr-2 text-secondary flex gap-1 items-center">
 					Hide bar on view
-					<Toggle size="xs" bind:checked={$app.norefreshbar} />
+					<Toggle size="xs" bind:checked={app.val.norefreshbar} />
 				</div>
 				<div>
 					{policy.on_behalf_of ? `Author ${policy.on_behalf_of_email}` : ''}
@@ -179,10 +179,10 @@
 	</div>
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<div
-		style={$app.css?.['app']?.['grid']?.style}
+		style={app.val.css?.['app']?.['grid']?.style}
 		class={twMerge(
 			'p-2 overflow-visible z-50',
-			$app.css?.['app']?.['grid']?.class ?? '',
+			app.val.css?.['app']?.['grid']?.class ?? '',
 			'wm-app-grid !static h-full w-full'
 		)}
 		onpointerdown={() => {
@@ -198,16 +198,16 @@
 			<Grid
 				allIdsInPath={$allIdsInPath}
 				selectedIds={$selectedComponent}
-				items={$app.grid}
+				items={app.val.grid}
 				on:redraw={(e) => {
-					push(history, $app)
-					$app.grid = e.detail
+					push(history, app.val)
+					app.val.grid = e.detail
 				}}
 				root
 				on:dropped={(e) => {
 					const { id, overlapped, x, y } = e.detail
 
-					const overlappedComponent = findGridItem($app, overlapped)
+					const overlappedComponent = findGridItem(app.val, overlapped)
 
 					if (overlappedComponent && !isContainer(overlappedComponent.data.type)) {
 						return
@@ -242,10 +242,10 @@
 						<GridEditorMenu
 							id={dataItem.id}
 							on:expand={() => {
-								push(history, $app)
+								push(history, app.val)
 								$selectedComponent = [dataItem.id]
-								expandGriditem($app.grid, dataItem.id, $breakpoint)
-								$app = $app
+								expandGriditem(app.val.grid, dataItem.id, $breakpoint)
+								app.val = app.val
 							}}
 							on:lock={() => {
 								handleLock(dataItem.id)
@@ -269,10 +269,10 @@
 									handleFillHeight(dataItem.id)
 								}}
 								on:expand={() => {
-									push(history, $app)
+									push(history, app.val)
 									$selectedComponent = [dataItem.id]
-									expandGriditem($app.grid, dataItem.id, $breakpoint)
-									$app = $app
+									expandGriditem(app.val.grid, dataItem.id, $breakpoint)
+									app.val = app.val
 								}}
 								{overlapped}
 								{moveMode}
@@ -286,8 +286,8 @@
 	</div>
 </div>
 
-{#if $app.hiddenInlineScripts}
-	{#each $app.hiddenInlineScripts as runnable, index}
+{#if app.val.hiddenInlineScripts}
+	{#each app.val.hiddenInlineScripts as runnable, index}
 		{#if runnable}
 			<HiddenComponent id={BG_PREFIX + index} {runnable} />
 		{/if}

frontend/src/lib/components/apps/editor/GridViewer.svelte

@@ -35,7 +35,7 @@
 	let showSkeleton = false
 
 	let getComputedCols: 3 | 12 | undefined =
-		$app.mobileViewOnSmallerScreens == false ? WIDE_GRID_COLUMNS : undefined
+		app.val.mobileViewOnSmallerScreens == false ? WIDE_GRID_COLUMNS : undefined
 
 	let container
 
@@ -68,7 +68,7 @@
 					width = 1
 				}
 				if (width === containerWidth) return
-				if ($app.mobileViewOnSmallerScreens != false || !getComputedCols) {
+				if (app.val.mobileViewOnSmallerScreens != false || !getComputedCols) {
 					getComputedCols = getColumn(parentWidth ?? width, cols)
 				}
 

frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte

@@ -14,7 +14,7 @@
 	let progressTimer: NodeJS.Timeout | undefined = undefined
 
 	$: !firstLoad &&
-		canInitializeAll($initialized?.initializedComponents, $app) &&
+		canInitializeAll($initialized?.initializedComponents, app.val) &&
 		refresh('all initialized')
 
 	// $: console.log('canInitializeAll', firstLoad, $initialized?.initializedComponents)

frontend/src/lib/components/apps/editor/SettingsPanel.svelte

@@ -17,13 +17,13 @@
 
 	$: $selectedComponent?.[0] != firstComponent && (firstComponent = $selectedComponent?.[0])
 
-	$: hiddenInlineScript = $app?.hiddenInlineScripts
+	$: hiddenInlineScript = app.val?.hiddenInlineScripts
 		?.map((x, i) => ({ script: x, index: i }))
 		.find(({ script, index }) => $selectedComponent?.includes(BG_PREFIX + index))
 
-	$: gridItemWithLocation = findGridItemWithLocation($app, firstComponent)
-	$: tableActionSettings = findTableActionSettings($app, firstComponent)
-	$: menuItemsSettings = findMenuItemsSettings($app, firstComponent)
+	$: gridItemWithLocation = findGridItemWithLocation(app.val, firstComponent)
+	$: tableActionSettings = findTableActionSettings(app.val, firstComponent)
+	$: menuItemsSettings = findMenuItemsSettings(app.val, firstComponent)
 
 	function findTableActionSettings(app: App, id: string | undefined) {
 		return allItemsWithLocation(app.grid, app.subgrids)
@@ -116,17 +116,17 @@
 				() => gridItemWithLocation,
 				(cs) => {
 					if (gridItemWithLocation?.location.type === 'grid') {
-						$app.grid[gridItemWithLocation.location.gridItemIndex] = cs.item
+						app.val.grid[gridItemWithLocation.location.gridItemIndex] = cs.item
 					} else if (
 						gridItemWithLocation?.location.type === 'subgrid' &&
-						Array.isArray($app.subgrids?.[gridItemWithLocation.location.subgridKey])
+						Array.isArray(app.val.subgrids?.[gridItemWithLocation.location.subgridKey])
 					) {
 						if (
-							$app.subgrids[gridItemWithLocation.location.subgridKey][
+							app.val.subgrids[gridItemWithLocation.location.subgridKey][
 								gridItemWithLocation.location.subgridItemIndex
 							]
 						) {
-							$app.subgrids[gridItemWithLocation.location.subgridKey][
+							app.val.subgrids[gridItemWithLocation.location.subgridKey][
 								gridItemWithLocation.location.subgridItemIndex
 							] = cs.item
 						}
@@ -149,14 +149,14 @@
 						if (tableActionSettings.gridItemLocation.type === 'grid') {
 							const { gridItemIndex } = tableActionSettings.gridItemLocation
 							const { key, index } = tableActionSettings.location
-							if ($app.grid[gridItemIndex]?.data?.[key]) {
-								$app.grid[gridItemIndex].data[key][index] = cs.item.data
+							if (app.val.grid[gridItemIndex]?.data?.[key]) {
+								app.val.grid[gridItemIndex].data[key][index] = cs.item.data
 							}
 						} else if (tableActionSettings.gridItemLocation.type === 'subgrid') {
 							const { subgridKey, subgridItemIndex } = tableActionSettings.gridItemLocation
 							const { key, index } = tableActionSettings.location
-							if ($app.subgrids?.[subgridKey]?.[subgridItemIndex]?.data?.[key]) {
-								$app.subgrids[subgridKey][subgridItemIndex].data[key][index] = cs.item.data
+							if (app.val.subgrids?.[subgridKey]?.[subgridItemIndex]?.data?.[key]) {
+								app.val.subgrids[subgridKey][subgridItemIndex].data[key][index] = cs.item.data
 							}
 						}
 					}
@@ -165,7 +165,7 @@
 			duplicateMoveAllowed={false}
 			onDelete={() => {
 				if (tableActionSettings) {
-					const item = findGridItemWithLocation($app, tableActionSettings.parent)
+					const item = findGridItemWithLocation(app.val, tableActionSettings.parent)
 					if (!item) return
 					const { item: parent, location } = item
 					if (parent.data.type === 'tablecomponent') {
@@ -174,15 +174,15 @@
 						)
 						if (location.type === 'grid') {
 							const { gridItemIndex } = location
-							if ($app.grid[gridItemIndex]?.data?.type === 'tablecomponent') {
-								$app.grid[gridItemIndex].data.actionButtons = newActionButtons
+							if (app.val.grid[gridItemIndex]?.data?.type === 'tablecomponent') {
+								app.val.grid[gridItemIndex].data.actionButtons = newActionButtons
 							}
 						} else if (location.type === 'subgrid') {
 							const { subgridKey, subgridItemIndex } = location
 							if (
-								$app.subgrids?.[subgridKey]?.[subgridItemIndex]?.data?.type === 'tablecomponent'
+								app.val.subgrids?.[subgridKey]?.[subgridItemIndex]?.data?.type === 'tablecomponent'
 							) {
-								$app.subgrids[subgridKey][subgridItemIndex].data.actionButtons = newActionButtons
+								app.val.subgrids[subgridKey][subgridItemIndex].data.actionButtons = newActionButtons
 							}
 						}
 					}
@@ -192,13 +192,13 @@
 						)
 						if (location.type === 'grid') {
 							const { gridItemIndex } = location
-							if (itemHasActions($app.grid[gridItemIndex])) {
-								$app.grid[gridItemIndex].data.actions = newActions
+							if (itemHasActions(app.val.grid[gridItemIndex])) {
+								app.val.grid[gridItemIndex].data.actions = newActions
 							}
 						} else {
 							const { subgridKey, subgridItemIndex } = location
-							if (itemHasActions($app.subgrids?.[subgridKey]?.[subgridItemIndex])) {
-								$app.subgrids[subgridKey][subgridItemIndex].data.actions = newActions
+							if (itemHasActions(app.val.subgrids?.[subgridKey]?.[subgridItemIndex])) {
+								app.val.subgrids[subgridKey][subgridItemIndex].data.actions = newActions
 							}
 						}
 					}
@@ -216,13 +216,16 @@
 					if (menuItemsSettings) {
 						if (menuItemsSettings.gridItemLocation.type === 'grid') {
 							const { gridItemIndex } = menuItemsSettings.gridItemLocation
-							if ($app.grid[gridItemIndex]?.data?.type === 'menucomponent') {
-								$app.grid[gridItemIndex].data.menuItems[cs.index] = cs.item.data
+							if (app.val.grid[gridItemIndex]?.data?.type === 'menucomponent') {
+								app.val.grid[gridItemIndex].data.menuItems[cs.index] = cs.item.data
 							}
 						} else if (menuItemsSettings.gridItemLocation.type === 'subgrid') {
 							const { subgridKey, subgridItemIndex } = menuItemsSettings.gridItemLocation
-							if ($app.subgrids?.[subgridKey]?.[subgridItemIndex]?.data?.type === 'menucomponent') {
-								$app.subgrids[subgridKey][subgridItemIndex].data.menuItems[cs.index] = cs.item.data
+							if (
+								app.val.subgrids?.[subgridKey]?.[subgridItemIndex]?.data?.type === 'menucomponent'
+							) {
+								app.val.subgrids[subgridKey][subgridItemIndex].data.menuItems[cs.index] =
+									cs.item.data
 							}
 						}
 					}
@@ -230,7 +233,7 @@
 			}
 			onDelete={() => {
 				if (menuItemsSettings) {
-					const item = findGridItemWithLocation($app, menuItemsSettings.parent)
+					const item = findGridItemWithLocation(app.val, menuItemsSettings.parent)
 					if (!item) return
 					const { item: parent, location } = item
 					if (parent.data.type === 'menucomponent') {
@@ -239,13 +242,15 @@
 						)
 						if (location.type === 'grid') {
 							const { gridItemIndex } = location
-							if ($app.grid[gridItemIndex]?.data?.type === 'menucomponent') {
-								$app.grid[gridItemIndex].data.menuItems = newItems
+							if (app.val.grid[gridItemIndex]?.data?.type === 'menucomponent') {
+								app.val.grid[gridItemIndex].data.menuItems = newItems
 							}
 						} else if (location.type === 'subgrid') {
 							const { subgridKey, subgridItemIndex } = location
-							if ($app.subgrids?.[subgridKey]?.[subgridItemIndex]?.data?.type === 'menucomponent') {
-								$app.subgrids[subgridKey][subgridItemIndex].data.menuItems = newItems
+							if (
+								app.val.subgrids?.[subgridKey]?.[subgridItemIndex]?.data?.type === 'menucomponent'
+							) {
+								app.val.subgrids[subgridKey][subgridItemIndex].data.menuItems = newItems
 							}
 						}
 					}
@@ -260,7 +265,7 @@
 			bind:runnable={
 				() => hiddenInlineScript.script,
 				(r) => {
-					$app.hiddenInlineScripts[hiddenInlineScript.index] = r
+					app.val.hiddenInlineScripts[hiddenInlineScript.index] = r
 				}
 			}
 			{id}
@@ -276,8 +281,8 @@
 							bind:inputSpecs={
 								() => hiddenInlineScript.script.fields,
 								(is) => {
-									if ($app.hiddenInlineScripts[hiddenInlineScript.index]) {
-										$app.hiddenInlineScripts[hiddenInlineScript.index].fields = is
+									if (app.val.hiddenInlineScripts[hiddenInlineScript.index]) {
+										app.val.hiddenInlineScripts[hiddenInlineScript.index].fields = is
 									}
 								}
 							}
@@ -301,8 +306,8 @@
 				bind:value={
 					() => hiddenInlineScript.script.recomputeIds ?? [],
 					(v) => {
-						if ($app.hiddenInlineScripts[hiddenInlineScript.index]) {
-							$app.hiddenInlineScripts[hiddenInlineScript.index].recomputeIds = v
+						if (app.val.hiddenInlineScripts[hiddenInlineScript.index]) {
+							app.val.hiddenInlineScripts[hiddenInlineScript.index].recomputeIds = v
 						}
 					}
 				}

frontend/src/lib/components/apps/editor/SubGridEditor.svelte

@@ -85,22 +85,22 @@
 
 	function selectComponent(e: PointerEvent, id: string) {
 		if (!$connectingInput.opened) {
-			selectId(e, id, selectedComponent, $app)
+			selectId(e, id, selectedComponent, app.val)
 		}
 	}
 
 	function lock(dataItem: GridItem) {
-		let fComponent = findGridItem($app, dataItem.id)
+		let fComponent = findGridItem(app.val, dataItem.id)
 		if (fComponent) {
 			fComponent = toggleFixed(fComponent)
 		}
-		$app = $app
+		app.val = app.val
 	}
 
 	let container: HTMLElement | undefined = $state(undefined)
 
 	let maxRow = $derived(
-		maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $breakpoint)
+		maxHeight(app.val.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $breakpoint)
 	)
 
 	export function moveComponentBetweenSubgrids(
@@ -110,27 +110,27 @@
 		position?: { x: number; y: number }
 	) {
 		// Find the component in the source subgrid
-		const component = findGridItem($app, componentId)
+		const component = findGridItem(app.val, componentId)
 
 		if (!component) {
 			return
 		}
 
-		let parentGrid = findGridItemParentGrid($app, component.id)
+		let parentGrid = findGridItemParentGrid(app.val, component.id)
 
 		if (parentGrid) {
-			$app.subgrids &&
-				($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter(
+			app.val.subgrids &&
+				(app.val.subgrids[parentGrid] = app.val.subgrids[parentGrid].filter(
 					(item) => item.id !== component?.id
 				))
 		} else {
-			$app.grid = $app.grid.filter((item) => item.id !== component?.id)
+			app.val.grid = app.val.grid.filter((item) => item.id !== component?.id)
 		}
 
 		const gridItem = component
 
 		insertNewGridItem(
-			$app,
+			app.val,
 			(id) => ({ ...gridItem.data, id }),
 			{ parentComponentId: parentComponentId, subGridIndex: subGridIndex },
 			Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])),
@@ -143,7 +143,7 @@
 		)
 
 		// Update the app state
-		$app = $app
+		app.val = app.val
 
 		if (parentGrid) {
 			$focusedGrid = {
@@ -159,27 +159,27 @@
 
 	export function moveToRoot(componentId: string, position?: { x: number; y: number }) {
 		// Find the component in the source subgrid
-		const component = findGridItem($app, componentId)
+		const component = findGridItem(app.val, componentId)
 
 		if (!component) {
 			return
 		}
 
-		let parentGrid = findGridItemParentGrid($app, component.id)
+		let parentGrid = findGridItemParentGrid(app.val, component.id)
 
 		if (parentGrid) {
-			$app.subgrids &&
-				($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter(
+			app.val.subgrids &&
+				(app.val.subgrids[parentGrid] = app.val.subgrids[parentGrid].filter(
 					(item) => item.id !== component?.id
 				))
 		} else {
-			$app.grid = $app.grid.filter((item) => item.id !== component?.id)
+			app.val.grid = app.val.grid.filter((item) => item.id !== component?.id)
 		}
 
 		const gridItem = component
 
 		insertNewGridItem(
-			$app,
+			app.val,
 			(id) => ({ ...gridItem.data, id }),
 			undefined,
 			Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])),
@@ -192,13 +192,13 @@
 		)
 
 		// Update the app state
-		$app = $app
+		app.val = app.val
 	}
 </script>
 
 <!-- {visible}
 {everVisible} -->
-{#if everVisible || $app.eagerRendering}
+{#if everVisible || app.val.eagerRendering}
 	<div
 		class="translate-x-0 translate-y-0 w-full subgrid {visible
 			? 'visible'
@@ -225,14 +225,14 @@
 							}`
 						: ''}
 				>
-					<!-- A{JSON.stringify($app.subgrids?.[subGridId]) ?? []}B -->
+					<!-- A{JSON.stringify(app.val.subgrids?.[subGridId]) ?? []}B -->
 					<Grid
 						allIdsInPath={$allIdsInPath}
-						items={$app.subgrids?.[subGridId] ?? []}
+						items={app.val.subgrids?.[subGridId] ?? []}
 						on:redraw={(e) => {
-							push(editorContext?.history, $app)
-							if ($app.subgrids) {
-								$app.subgrids[subGridId] = e.detail
+							push(editorContext?.history, app.val)
+							if (app.val.subgrids) {
+								app.val.subgrids[subGridId] = e.detail
 							}
 						}}
 						selectedIds={$selectedComponent}
@@ -245,7 +245,7 @@
 							if (!overlapped) {
 								moveToRoot(id, { x, y })
 							} else {
-								const overlappedComponent = findGridItem($app, overlapped)
+								const overlappedComponent = findGridItem(app.val, overlapped)
 
 								if (overlappedComponent && !isContainer(overlappedComponent.data.type)) {
 									return
@@ -288,31 +288,31 @@
 										locked={isFixed(dataItem)}
 										on:lock={() => lock(dataItem)}
 										on:expand={() => {
-											const parentGridItem = findGridItem($app, id)
+											const parentGridItem = findGridItem(app.val, id)
 
 											if (!parentGridItem) {
 												return
 											}
 
 											$selectedComponent = [dataItem.id]
-											push(editorContext?.history, $app)
+											push(editorContext?.history, app.val)
 
 											expandGriditem(
-												$app.subgrids?.[subGridId] ?? [],
+												app.val.subgrids?.[subGridId] ?? [],
 												dataItem.id,
 												$breakpoint,
 												parentGridItem
 											)
-											$app = $app
+											app.val = app.val
 										}}
 										on:fillHeight={() => {
-											const gridItem = findGridItem($app, dataItem.id)
+											const gridItem = findGridItem(app.val, dataItem.id)
 											const b = $breakpoint === 'sm' ? 3 : 12
 
 											if (gridItem?.[b]) {
 												gridItem[b].fullHeight = !gridItem[b].fullHeight
 											}
-											$app = $app
+											app.val = app.val
 										}}
 										{moveMode}
 										{componentDraggedId}
@@ -325,7 +325,7 @@
 			{:else}
 				<GridViewer
 					allIdsInPath={$allIdsInPath}
-					items={$app.subgrids?.[subGridId] ?? []}
+					items={app.val.subgrids?.[subGridId] ?? []}
 					breakpoint={$breakpoint}
 					parentWidth={$parentWidth - 17}
 					{containerWidth}
@@ -352,8 +352,8 @@
 			{/if}
 		</div>
 	</div>
-{:else if $app.lazyInitRequire == undefined}
-	{#each $app?.subgrids?.[subGridId] ?? [] as item}
+{:else if app.val.lazyInitRequire == undefined}
+	{#each app.val?.subgrids?.[subGridId] ?? [] as item}
 		<Component selected={false} fullHeight={false} render={false} component={item.data} />
 	{/each}
 {/if}

frontend/src/lib/components/apps/editor/appUtilsInfer.ts

@@ -1,14 +1,14 @@
 import { parseOutputs } from '$lib/infer'
 import { deepEqual } from 'fast-equals'
 import type { EvalV2AppInput, TemplateV2Input } from '../inputType'
-import type { Writable } from 'svelte/store'
 import type { App } from '../types'
+import type { StateStore } from '$lib/utils'
 
 export async function inferDeps(
 	code: string,
 	worldOutputs: Record<string, any>,
 	componentInput: EvalV2AppInput | TemplateV2Input,
-	app: Writable<App>
+	app: StateStore<App>
 ) {
 	const outputs = await parseOutputs(code, true)
 	if (outputs && componentInput) {
@@ -28,7 +28,7 @@ export async function inferDeps(
 			}))
 		if (!deepEqual(noutputs, componentInput.connections)) {
 			componentInput.connections = noutputs
-			app.update((old) => old)
+			app.val = app.val
 		}
 	}
 }

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -20,7 +20,7 @@
 	$: render && !everRender && (everRender = true)
 </script>
 
-{#if everRender || $app.eagerRendering}
+{#if everRender || app.val.eagerRendering}
 	<ComponentRendered
 		on:expand
 		on:lock

frontend/src/lib/components/apps/editor/component/ComponentRendered.svelte

@@ -63,14 +63,15 @@
 	}
 
 	function componentDraggedIsNotChild(componentDraggedId: string, componentId: string) {
-		let parentGrid = findGridItemParentGrid($app, componentDraggedId)
+		let parentGrid = findGridItemParentGrid(app.val, componentDraggedId)
 
 		return !parentGrid?.startsWith(`${componentId}-`)
 	}
 
 	function areOnTheSameSubgrid(componentDraggedId: string, componentId: string) {
 		return (
-			findGridItemParentGrid($app, componentDraggedId) === findGridItemParentGrid($app, componentId)
+			findGridItemParentGrid(app.val, componentDraggedId) ===
+			findGridItemParentGrid(app.val, componentId)
 		)
 	}
 
@@ -183,11 +184,11 @@
 			selected && $mode !== 'preview' ? 'outline outline-blue-600' : '',
 			$mode != 'preview' ? 'cursor-pointer' : '',
 			'relative z-auto',
-			$app.css?.['app']?.['component']?.class,
+			app.val.css?.['app']?.['component']?.class,
 			'wm-app-component',
 			ismoving ? 'animate-pulse' : ''
 		)}
-		style={$app.css?.['app']?.['component']?.style}
+		style={app.val.css?.['app']?.['component']?.style}
 		bind:clientHeight={componentContainerHeight}
 		bind:clientWidth={componentContainerWidth}
 	>

frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte

@@ -13,7 +13,7 @@
 
 	function selectComponent(e: PointerEvent, id: string) {
 		if (!$connectingInput.opened) {
-			selectId(e, id, selectedComponent, $app)
+			selectId(e, id, selectedComponent, app.val)
 		}
 	}
 
@@ -29,7 +29,7 @@
 		if (!$connectingInput.opened) {
 			selectComponent(e, id)
 		} else {
-			const allIdsInPath = dfs($app.grid, id, $app.subgrids ?? {}) ?? []
+			const allIdsInPath = dfs(app.val.grid, id, app.val.subgrids ?? {}) ?? []
 
 			allIdsInPath.forEach((id) => {
 				$manuallyOpened[id] = true

frontend/src/lib/components/apps/editor/component/componentCallbacks.svelte.ts

@@ -29,10 +29,10 @@ function getSortedGridItemsOfChildren(ctx: {
 }): GridItem[] {
 	const focusedGrid = get(ctx.focusedGrid)
 	if (!focusedGrid) {
-		return get(ctx.app).grid
+		return ctx.app.val.grid
 	}
 
-	let subgrids = get(ctx.app).subgrids
+	let subgrids = ctx.app.val.subgrids
 	if (!subgrids) {
 		return []
 	}
@@ -44,10 +44,10 @@ function getGridItems(ctx: {
 	app: AppViewerContext['app']
 	selectedComponent: AppViewerContext['selectedComponent']
 }): GridItem[] {
-	const app = get(ctx.app)
+	const app = ctx.app.val
 	const selectedComponent = get(ctx.selectedComponent)
 	if (app.grid.find((item) => item.id === selectedComponent?.[0])) {
-		return get(ctx.app).grid
+		return ctx.app.val.grid
 	}
 
 	if (!app.subgrids) {
@@ -141,7 +141,7 @@ export function down(
 ) {
 	const focusedGrid = get(ctx.focusedGrid)
 	const selectedComponent = get(ctx.selectedComponent)
-	const app = get(ctx.app)
+	const app = ctx.app.val
 	if (!focusedGrid) {
 		ctx.selectedComponent.set([getSortedGridItemsOfChildren(ctx)[0]?.id])
 		event.preventDefault()
@@ -182,7 +182,7 @@ export function handleArrowUp(
 ) {
 	const selectedComponent = get(ctx.selectedComponent)
 	if (!selectedComponent) return
-	let parentId = findGridItemParentGrid(get(ctx.app), selectedComponent?.[0])?.split('-')[0]
+	let parentId = findGridItemParentGrid(ctx.app.val, selectedComponent?.[0])?.split('-')[0]
 
 	if (parentId) {
 		ctx.selectedComponent.set([parentId])
@@ -206,7 +206,7 @@ export async function handleCopy(
 	}
 	tempGridItems = undefined
 	const copiedGridItems = selectedComponent
-		.map((x) => findGridItem(get(ctx.app), x))
+		.map((x) => findGridItem(ctx.app.val, x))
 		.filter((x) => x != undefined) as GridItem[]
 
 	copyGridItemsToClipboard(copiedGridItems, ctx, 'copy')
@@ -219,7 +219,7 @@ async function copyGridItemsToClipboard(
 	},
 	type: 'copy' | 'cut' | undefined = undefined
 ) {
-	const app = get(ctx.app)
+	const app = ctx.app.val
 	let allSubgrids = {}
 	for (let item of items) {
 		let subgrids = getAllSubgridsAndComponentIds(app, item.data)[0]
@@ -250,7 +250,7 @@ export function handleCut(
 	}
 ) {
 	const selectedComponent = get(ctx.selectedComponent)
-	const app = get(ctx.app)
+	const app = ctx.app.val
 	if (!selectedComponent) {
 		return
 	}
@@ -290,7 +290,7 @@ export async function handlePaste(
 		return
 	}
 	event.preventDefault()
-	const app = get(ctx.app)
+	const app = ctx.app.val
 	const focusedGrid = get(ctx.focusedGrid)
 
 	push(ctx.history, app)
@@ -353,5 +353,5 @@ export async function handlePaste(
 		ctx.selectedComponent.set(nitems.map((x) => x))
 	}
 
-	ctx.app.update((x) => x)
+	ctx.app.val = ctx.app.val
 }

frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -53,16 +53,16 @@
 	}
 
 	function addComponent(appComponentType: TypedComponent['type']): string {
-		push(history, $app)
+		push(history, app.val)
 
 		const id = insertNewGridItem(
-			$app,
+			app.val,
 			appComponentFromType(appComponentType) as (id: string) => AppComponent,
 			$focusedGrid
 		)
 
 		$selectedComponent = [id]
-		$app = $app
+		app.val = app.val
 		return id
 	}
 
@@ -72,21 +72,21 @@
 
 		if (!res) return
 
-		push(history, $app)
+		push(history, app.val)
 
-		const id = copyComponent($app, res.value.item, $focusedGrid, res.value.subgrids, [])
+		const id = copyComponent(app.val, res.value.item, $focusedGrid, res.value.subgrids, [])
 
 		if (id) {
 			$selectedComponent = [id]
-			$app = $app
+			app.val = app.val
 		}
 	}
 
 	async function addNewGroup() {
-		push(history, $app)
+		push(history, app.val)
 
 		const id = insertNewGridItem(
-			$app,
+			app.val,
 			appComponentFromType('containercomponent', undefined, { groupFields: {} }) as (
 				id: string
 			) => AppComponent,
@@ -95,7 +95,7 @@
 
 		if (id) {
 			$selectedComponent = [id]
-			$app = $app
+			app.val = app.val
 		}
 	}
 
@@ -114,10 +114,10 @@
 
 		if (!res) return
 
-		push(history, $app)
+		push(history, app.val)
 
 		const id = insertNewGridItem(
-			$app,
+			app.val,
 			appComponentFromType('customcomponent', undefined, {
 				customComponent: {
 					name: cc.name.replace(/-/g, '_').replace(/\s/g, '_'),
@@ -131,17 +131,17 @@
 
 		if (id) {
 			$selectedComponent = [id]
-			$app = $app
+			app.val = app.val
 		}
 	}
 
 	function addPresetComponent(appComponentType: string): void {
 		const preset = presetsRecord[appComponentType]
 
-		push(history, $app)
+		push(history, app.val)
 
 		const id = insertNewGridItem(
-			$app,
+			app.val,
 			appComponentFromType(preset.targetComponent, preset.configuration, undefined) as (
 				id: string
 			) => AppComponent,
@@ -158,10 +158,10 @@
 		$selectedComponent = [id]
 
 		if (appComponentType === 'topbarcomponent') {
-			setUpTopBarComponentContent(id, $app)
+			setUpTopBarComponentContent(id, app.val)
 		}
 
-		$app = $app
+		app.val = app.val
 	}
 
 	let search = ''

frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte

@@ -91,9 +91,9 @@
 				title={name}
 				prefix={TITLE_PREFIX}
 				on:open={(e) => {
-					if ($app.css != undefined) {
-						if (type && e.detail && $app.css[type] == undefined) {
-							$app.css[type] = Object.fromEntries((ids ?? []).map(({ id }) => [id, {}]))
+					if (app.val.css != undefined) {
+						if (type && e.detail && app.val.css[type] == undefined) {
+							app.val.css[type] = Object.fromEntries((ids ?? []).map(({ id }) => [id, {}]))
 						}
 					}
 				}}

frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte

@@ -22,7 +22,7 @@
 	let selectedTab: 'css' | 'theme' = 'css'
 
 	function insertSelector(selector: string) {
-		if ($app?.theme?.type === 'path') {
+		if (app.val?.theme?.type === 'path') {
 			sendUserToast(
 				'You cannot edit the theme because it is a path theme. Fork the theme to edit it.',
 				true
@@ -32,7 +32,7 @@
 
 		const code = cssEditor?.getCode()
 		cssEditor?.setCode(code + '\n' + selector)
-		$app = $app
+		app.val = app.val
 	}
 </script>
 
@@ -71,25 +71,25 @@
 							</div>
 						{/if}
 						<div style="height: calc(100% - {alertHeight || 0}px);">
-							{#if $app.theme?.type === 'inlined'}
+							{#if app.val.theme?.type === 'inlined'}
 								<SimpleEditor
 									class="h-full"
 									lang="css"
-									bind:code={$app.theme.css}
+									bind:code={app.val.theme.css}
 									fixedOverflowWidgets={true}
 									small
 									automaticLayout
 									bind:this={cssEditor}
 								/>
 							{:else}
-								<ThemeCodePreview theme={$app.theme}>
+								<ThemeCodePreview theme={app.val.theme}>
 									<div class="p-2 w-min">
 										<Button
 											size="xs"
 											color="dark"
 											on:click={async () => {
-												const theme = await resolveTheme($app.theme, $workspaceStore)
-												$app.theme = {
+												const theme = await resolveTheme(app.val.theme, $workspaceStore)
+												app.val.theme = {
 													type: 'inlined',
 													css: theme
 												}

frontend/src/lib/components/apps/editor/componentsPanel/GroupList.svelte

@@ -32,9 +32,9 @@
 
 	function getSubgrids(item: GridItem) {
 		let allSubgrids = {}
-		let subgrids = getAllSubgridsAndComponentIds($app, item.data)[0]
+		let subgrids = getAllSubgridsAndComponentIds(app.val, item.data)[0]
 		for (let key of subgrids) {
-			allSubgrids[key] = $app.subgrids?.[key]
+			allSubgrids[key] = app.val.subgrids?.[key]
 		}
 		return allSubgrids
 	}

frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte

@@ -116,17 +116,17 @@
 	function collectStyles() {
 		const styles: string[] = []
 		// Getting global app styles
-		Object.values($app.css || {}).forEach((element) => {
+		Object.values(app.val.css || {}).forEach((element) => {
 			Object.values(element).filter(({ style }) => style && styles.push(style))
 		})
 		// Getting styles from individual components
-		$app.grid.map((component) => {
+		app.val.grid.map((component) => {
 			Object.values(component.data.customCss || {}).forEach(({ style }) => {
 				style && styles.push(style)
 			})
 		})
 		// Getting style from subgrids
-		Object.values($app.subgrids || {}).forEach((grid) => {
+		Object.values(app.val.subgrids || {}).forEach((grid) => {
 			grid.map((component) => {
 				Object.values(component.data.customCss || {}).forEach(({ style }) => {
 					style && styles.push(style)
@@ -193,7 +193,7 @@
 		mounted && (!value || value) && untrack(() => parseStyle())
 	})
 	$effect(() => {
-		$app && untrack(() => setTopColors())
+		app.val && untrack(() => setTopColors())
 	})
 </script>
 

frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte

@@ -18,8 +18,9 @@
 
 	const { previewTheme, app } = getContext<AppViewerContext>('AppViewerContext')
 
-	let cssString: string | undefined = $app?.theme?.type === 'inlined' ? $app.theme.css : undefined
-	$: type = $app?.theme?.type
+	let cssString: string | undefined =
+		app.val?.theme?.type === 'inlined' ? app.val.theme.css : undefined
+	$: type = app.val?.theme?.type
 
 	let themes: Array<{
 		name: string
@@ -56,7 +57,7 @@
 
 		sendUserToast('Theme created:' + message)
 
-		$app.theme = {
+		app.val.theme = {
 			type: 'path',
 			path: theme.path
 		}

frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte

@@ -25,8 +25,9 @@
 
 	const { previewTheme, app } = getContext<AppViewerContext>('AppViewerContext')
 
-	let cssString: string | undefined = $app?.theme?.type === 'inlined' ? $app.theme.css : undefined
-	$: type = $app?.theme?.type
+	let cssString: string | undefined =
+		app.val?.theme?.type === 'inlined' ? app.val.theme.css : undefined
+	$: type = app.val?.theme?.type
 
 	const dispatch = createEventDispatcher()
 
@@ -41,7 +42,7 @@
 				}
 			})
 
-			$app.theme = {
+			app.val.theme = {
 				type: 'path',
 				path: row.path
 			}
@@ -71,7 +72,7 @@
 		})
 
 		stopPreview()
-		$app.theme = {
+		app.val.theme = {
 			type: 'path',
 			path: DEFAULT_THEME
 		}
@@ -111,7 +112,7 @@
 
 		const resolvedTheme = await resolveTheme(theme, $workspaceStore)
 
-		$app.theme = {
+		app.val.theme = {
 			type: 'inlined',
 			css: resolvedTheme
 		}
@@ -126,7 +127,7 @@
 
 	function apply() {
 		stopPreview()
-		$app.theme = {
+		app.val.theme = {
 			type: 'path',
 			path: row.path ?? ''
 		}
@@ -179,7 +180,7 @@
 				<Badge color="blue" small>Default</Badge>
 			{/if}
 
-			{#if $app?.theme?.type === 'path' && $app.theme.path === row.path}
+			{#if app.val?.theme?.type === 'path' && app.val.theme.path === row.path}
 				<Badge color="green" small>Active</Badge>
 			{/if}
 
@@ -193,7 +194,7 @@
 					Update
 				</Button>
 			{/if}
-			{#if $app?.theme?.type !== 'path' || $app.theme.path !== row.path}
+			{#if app.val?.theme?.type !== 'path' || app.val.theme.path !== row.path}
 				<Button color="light" size="xs" on:click={preview} startIcon={{ icon: Eye }}>
 					Preview
 				</Button>

frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -95,7 +95,7 @@
 
 					<div>
 						<span class="text-xs font-semibold text-secondary p-2">Components</span>
-						{#each $app.grid as gridItem, index (gridItem.id)}
+						{#each app.val.grid as gridItem, index (gridItem.id)}
 							<ComponentOutput {gridItem} first={index === 0} />
 						{/each}
 					</div>

frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte

@@ -12,15 +12,15 @@
 
 	const { app, initialized } = getContext<AppViewerContext>('AppViewerContext')
 
-	$: unintitializedComponents = allItems($app.grid, $app.subgrids)
+	$: unintitializedComponents = allItems(app.val.grid, app.val.subgrids)
 		.map((x) => x.id)
 		.filter((x) => !$initialized.initializedComponents?.includes(x))
 		.sort()
 
-	$: subgridsErrors = Object.keys($app.subgrids ?? {})
+	$: subgridsErrors = Object.keys(app.val.subgrids ?? {})
 		.map((x) => {
 			const parentId = x.split('-')[0]
-			const parent = findGridItem($app, parentId)
+			const parent = findGridItem(app.val, parentId)
 			const subgrid = x.replace(`${parentId}-`, '')
 			if (subgrid == '-1') {
 				return {
@@ -79,7 +79,7 @@
 
 					<!-- Iterate over uninitializedComponents to display each component in the grid -->
 					{#each unintitializedComponents as c}
-						{@const item = findGridItem($app, c)}
+						{@const item = findGridItem(app.val, c)}
 						{#if !item}
 							<div>Item {c} not found</div>
 						{:else}
@@ -107,9 +107,9 @@
 									}}
 									size="xs2"
 									on:click={() => {
-										let parent = findGridItemParentGrid($app, c)
-										deleteGridItem($app, item.data, parent)
-										$app = $app
+										let parent = findGridItemParentGrid(app.val, c)
+										deleteGridItem(app.val, item.data, parent)
+										app.val = app.val
 									}}
 								>
 									Remove
@@ -163,9 +163,9 @@
 								}}
 								size="xs2"
 								on:click={() => {
-									if ($app.subgrids && s) {
-										delete $app.subgrids[s.subGridId]
-										$app = $app
+									if (app.val.subgrids && s) {
+										delete app.val.subgrids[s.subGridId]
+										app.val = app.val
 									}
 								}}
 							>

frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte

@@ -9,10 +9,10 @@
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 
 	const { app } = getContext<AppViewerContext>('AppViewerContext')
-	let code = $state(JSON.stringify($app.lazyInitRequire))
+	let code = $state(JSON.stringify(app.val.lazyInitRequire))
 
 	let selectedRendering = $state(
-		$app.eagerRendering ? 'eager' : $app.lazyInitRequire ? 'lazy' : 'semi-lazy'
+		app.val.eagerRendering ? 'eager' : app.val.lazyInitRequire ? 'lazy' : 'semi-lazy'
 	)
 </script>
 
@@ -32,15 +32,15 @@
 		bind:selected={selectedRendering}
 		on:selected={(e) => {
 			if (e.detail == 'eager') {
-				$app.eagerRendering = true
-				$app.lazyInitRequire = undefined
+				app.val.eagerRendering = true
+				app.val.lazyInitRequire = undefined
 			} else if (e.detail == 'semi-lazy') {
-				$app.eagerRendering = undefined
-				$app.lazyInitRequire = undefined
+				app.val.eagerRendering = undefined
+				app.val.lazyInitRequire = undefined
 			} else {
-				$app.eagerRendering = undefined
-				$app.lazyInitRequire = []
-				code = JSON.stringify($app.lazyInitRequire)
+				app.val.eagerRendering = undefined
+				app.val.lazyInitRequire = []
+				code = JSON.stringify(app.val.lazyInitRequire)
 			}
 		}}
 	>
@@ -65,7 +65,7 @@
 		</Section>
 	{:else if selectedRendering == 'lazy'}
 		<Section label="Component ids to wait the initialization of before the initial refresh">
-			<JsonEditor bind:value={$app.lazyInitRequire} {code} />
+			<JsonEditor bind:value={app.val.lazyInitRequire} {code} />
 			<span class="text-tertiary text-xs">
 				{'e.g: ["a", "b"]'}, no need to put background runnables ids
 			</span>

frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte

@@ -22,7 +22,7 @@
 
 	$: subgridItems = subGrids.map((k) => ({
 		k,
-		items: $app.subgrids?.[k] ?? []
+		items: app.val.subgrids?.[k] ?? []
 	}))
 
 	$: if (outputs?.selectedTabIndex) {

frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptsOutput.svelte

@@ -7,7 +7,7 @@
 	const { app } = getContext<AppViewerContext>('AppViewerContext')
 </script>
 
-{#each $app.hiddenInlineScripts ?? [] as action, index}
+{#each app.val.hiddenInlineScripts ?? [] as action, index}
 	{#if !action.hidden}
 		<BackgroundScriptOutput id={BG_PREFIX + index} name={action.name} first={index === 0} />
 	{/if}

frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte

@@ -12,7 +12,7 @@
 
 	const dispatch = createEventDispatcher()
 
-	$: reservedIds = allItems($app.grid, $app.subgrids).map((item) => item.id)
+	$: reservedIds = allItems(app.val.grid, app.val.subgrids).map((item) => item.id)
 </script>
 
 <Popover

frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -25,7 +25,7 @@
 	const { selectedComponent, app, hoverStore, allIdsInPath, connectingInput, worldStore } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	$: subids = $search != '' ? allsubIds($app, id) : []
+	$: subids = $search != '' ? allsubIds(app.val, id) : []
 	$: inSearch =
 		$search != '' &&
 		($hasResult[id] ||
@@ -55,7 +55,7 @@
 	}
 
 	function renameId(newId: string): void {
-		const item = findGridItem($app, id)
+		const item = findGridItem(app.val, id)
 
 		if (!item) {
 			return
@@ -63,23 +63,23 @@
 		item.data.id = newId
 		item.id = newId
 
-		const oldSubgrids = Object.keys($app.subgrids ?? {}).filter((subgrid) =>
+		const oldSubgrids = Object.keys(app.val.subgrids ?? {}).filter((subgrid) =>
 			subgrid.startsWith(id + '-')
 		)
 
 		oldSubgrids.forEach((subgrid) => {
-			if ($app.subgrids) {
-				$app.subgrids[subgrid.replace(id, newId)] = $app.subgrids[subgrid]
-				delete $app.subgrids[subgrid]
+			if (app.val.subgrids) {
+				app.val.subgrids[subgrid.replace(id, newId)] = app.val.subgrids[subgrid]
+				delete app.val.subgrids[subgrid]
 			}
 		})
 
 		function propagateRename(from: string, to: string) {
-			allItems($app.grid, $app.subgrids).forEach((item) => {
+			allItems(app.val.grid, app.val.subgrids).forEach((item) => {
 				renameComponent(from, to, item.data)
 			})
 
-			$app.hiddenInlineScripts?.forEach((x) => {
+			app.val.hiddenInlineScripts?.forEach((x) => {
 				processRunnable(from, to, x)
 			})
 		}
@@ -114,7 +114,7 @@
 			}
 		}
 
-		$app = $app
+		app.val = app.val
 		$selectedComponent = [newId]
 
 		delete $worldStore.outputsById[id]
@@ -221,8 +221,8 @@
 				$selectedComponent?.includes(id)
 					? openBackground[color]
 					: $connectingInput.hoveredComponent === id
-					? 'bg-[#fab157]'
-					: 'bg-surface-secondary',
+						? 'bg-[#fab157]'
+						: 'bg-surface-secondary',
 				first ? 'border-t' : '',
 				nested ? 'border-l' : '',
 				'transition-all'
@@ -271,8 +271,8 @@
 						docLink={id === 'state'
 							? 'https://www.windmill.dev/docs/apps/outputs#state'
 							: id === 'ctx'
-							? 'https://www.windmill.dev/docs/apps/outputs#app-context'
-							: ''}
+								? 'https://www.windmill.dev/docs/apps/outputs#app-context'
+								: ''}
 						size="xs2"
 					/>
 				{/if}

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -196,7 +196,7 @@
 					$stateId++
 				}
 			}
-			$app = $app
+			app.val = app.val
 		}
 	}
 
@@ -271,7 +271,7 @@
 							placeholder="Inline script name"
 							class="!text-xs !rounded-sm !shadow-none"
 							onkeyup={() => {
-								$app = $app
+								app.val = app.val
 								if (stateId) {
 									$stateId++
 								}
@@ -385,7 +385,7 @@
 									loadSchemaAndInputsByName()
 								}
 							}
-							$app = $app
+							app.val = app.val
 						}}
 						args={Object.entries(fields).reduce((acc, [key, obj]) => {
 							acc[key] = obj.type === 'static' ? obj.value : undefined
@@ -413,7 +413,7 @@
 						}}
 						on:change={async (e) => {
 							inferSuggestions(e.detail.code)
-							$app = $app
+							app.val = app.val
 						}}
 					/>
 				{/if}

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte

@@ -19,7 +19,7 @@
 	function clear() {
 		if (componentInput && componentInput.type == 'runnable') {
 			componentInput = clearResultAppInput(componentInput)
-			$app = $app
+			app.val = app.val
 		}
 	}
 
@@ -76,7 +76,7 @@
 			/>
 		{:else}
 			<EmptyInlineScript
-				unusedInlineScripts={$app?.unusedInlineScripts}
+				unusedInlineScripts={app.val?.unusedInlineScripts}
 				{componentType}
 				on:delete={clear}
 				on:new={(e) => {
@@ -88,7 +88,7 @@
 						componentInput.runnable.inlineScript = e.detail
 						componentInput.autoRefresh = true
 						componentInput.recomputeOnInputChanged = true
-						$app = $app
+						app.val = app.val
 					}
 				}}
 			/>

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte

@@ -69,7 +69,7 @@
 	/>
 {:else}
 	<EmptyInlineScript
-		unusedInlineScripts={$app?.unusedInlineScripts}
+		unusedInlineScripts={app.val?.unusedInlineScripts}
 		on:pick={(e) => onPick(e.detail)}
 		on:delete
 		showScriptPicker

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -18,11 +18,11 @@
 
 	function deleteBackgroundScript(index: number) {
 		// remove the script from the array at the index
-		if ($app.hiddenInlineScripts.length - 1 == index) {
-			$app.hiddenInlineScripts.splice(index, 1)
-			$app.hiddenInlineScripts = [...$app.hiddenInlineScripts]
+		if (app.val.hiddenInlineScripts.length - 1 == index) {
+			app.val.hiddenInlineScripts.splice(index, 1)
+			app.val.hiddenInlineScripts = [...app.val.hiddenInlineScripts]
 		} else {
-			$app.hiddenInlineScripts[index] = {
+			app.val.hiddenInlineScripts[index] = {
 				hidden: true,
 				inlineScript: undefined,
 				name: `Background Runnable ${index}`,
@@ -30,7 +30,7 @@
 				type: 'runnableByName',
 				recomputeIds: undefined
 			}
-			$app.hiddenInlineScripts = $app.hiddenInlineScripts
+			app.val.hiddenInlineScripts = app.val.hiddenInlineScripts
 		}
 
 		$selectedComponentInEditor = undefined
@@ -42,10 +42,10 @@
 
 	$: gridItem =
 		$selectedComponentInEditor && !$selectedComponentInEditor.startsWith(BG_PREFIX)
-			? findGridItem($app, $selectedComponentInEditor?.split('_')?.[0])
+			? findGridItem(app.val, $selectedComponentInEditor?.split('_')?.[0])
 			: undefined
 
-	$: hiddenInlineScript = $app?.hiddenInlineScripts?.findIndex((k_, index) => {
+	$: hiddenInlineScript = app.val?.hiddenInlineScripts?.findIndex((k_, index) => {
 		const [prefix, id] = $selectedComponentInEditor?.split('_') || []
 
 		if (prefix !== 'bg') return false
@@ -53,7 +53,7 @@
 		return Number(id) === index
 	})
 
-	$: unusedInlineScript = $app?.unusedInlineScripts?.findIndex(
+	$: unusedInlineScript = app.val?.unusedInlineScripts?.findIndex(
 		(k_, index) => `unused-${index}` === $selectedComponentInEditor
 	)
 
@@ -86,24 +86,24 @@
 					bind:gridItem
 				/>
 			{/key}
-		{:else if unusedInlineScript > -1 && $app.unusedInlineScripts?.[unusedInlineScript]}
+		{:else if unusedInlineScript > -1 && app.val.unusedInlineScripts?.[unusedInlineScript]}
 			{#key unusedInlineScript}
 				<InlineScriptEditor
 					on:createScriptFromInlineScript={() =>
 						sendUserToast('Cannot save to workspace unused scripts', true)}
 					id={`unused-${unusedInlineScript}`}
-					bind:name={$app.unusedInlineScripts[unusedInlineScript].name}
-					bind:inlineScript={$app.unusedInlineScripts[unusedInlineScript].inlineScript}
+					bind:name={app.val.unusedInlineScripts[unusedInlineScript].name}
+					bind:inlineScript={app.val.unusedInlineScripts[unusedInlineScript].inlineScript}
 					on:delete={() => {
 						// remove the script from the array at the index
-						$app.unusedInlineScripts.splice(unusedInlineScript, 1)
-						$app.unusedInlineScripts = [...$app.unusedInlineScripts]
+						app.val.unusedInlineScripts.splice(unusedInlineScript, 1)
+						app.val.unusedInlineScripts = [...app.val.unusedInlineScripts]
 					}}
 				/>
 			{/key}
 		{:else if hiddenInlineScript > -1}
 			{#key hiddenInlineScript}
-				{#if $app.hiddenInlineScripts?.[hiddenInlineScript]}
+				{#if app.val.hiddenInlineScripts?.[hiddenInlineScript]}
 					<InlineScriptHiddenRunnable
 						on:createScriptFromInlineScript={(e) => {
 							createScriptFromInlineScript(
@@ -112,12 +112,12 @@
 								$workspaceStore ?? '',
 								$appPath
 							)
-							$app = $app
+							app.val = app.val
 						}}
 						transformer={$selectedComponentInEditor?.endsWith('_transformer')}
 						on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
 						id={BG_PREFIX + hiddenInlineScript}
-						bind:runnable={$app.hiddenInlineScripts[hiddenInlineScript]}
+						bind:runnable={app.val.hiddenInlineScripts[hiddenInlineScript]}
 					/>{/if}{/key}
 		{:else}
 			<div class="text-sm text-tertiary text-center py-8 px-2">

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -26,7 +26,7 @@
 		}
 	}
 
-	$: runnables = getAppScripts($app.grid, $app.subgrids)
+	$: runnables = getAppScripts(app.val.grid, app.val.subgrids)
 
 	// When selected component changes, update selectedScriptComponentId
 	$: selectedComponent && handleSelectedComponent($selectedComponent)
@@ -45,10 +45,10 @@
 			appTutorials?.runTutorialById('backgroundrunnables', { skipStepsCount: 2 })
 		}
 
-		for (const [index, script] of $app.hiddenInlineScripts.entries()) {
+		for (const [index, script] of app.val.hiddenInlineScripts.entries()) {
 			if (script.hidden) {
 				delete script.hidden
-				$app.hiddenInlineScripts = $app.hiddenInlineScripts
+				app.val.hiddenInlineScripts = app.val.hiddenInlineScripts
 				selectScript(BG_PREFIX + index)
 				return
 			}
@@ -56,18 +56,18 @@
 		let index = 0
 		let newScriptPath = `Background Runnable ${index}`
 
-		const names = getAllScriptNames($app)
+		const names = getAllScriptNames(app.val)
 
 		// Find a name that is not used by any other inline script
 		while (names.includes(newScriptPath)) {
 			newScriptPath = `Background Runnable ${++index}`
 		}
 
-		if (!$app.hiddenInlineScripts) {
-			$app.hiddenInlineScripts = []
+		if (!app.val.hiddenInlineScripts) {
+			app.val.hiddenInlineScripts = []
 		}
 
-		$app.hiddenInlineScripts.push({
+		app.val.hiddenInlineScripts.push({
 			name: newScriptPath,
 			inlineScript: undefined,
 			autoRefresh: true,
@@ -75,8 +75,8 @@
 			fields: {},
 			recomputeIds: undefined
 		})
-		$app.hiddenInlineScripts = $app.hiddenInlineScripts
-		selectScript(`${BG_PREFIX}${$app.hiddenInlineScripts.length - 1}`)
+		app.val.hiddenInlineScripts = app.val.hiddenInlineScripts
+		selectScript(`${BG_PREFIX}${app.val.hiddenInlineScripts.length - 1}`)
 	}
 
 	let appTutorials: AppTutorials | undefined = undefined
@@ -161,9 +161,9 @@
 					{/if}
 				{/each}
 
-				{#if $app.unusedInlineScripts?.length > 0}
+				{#if app.val.unusedInlineScripts?.length > 0}
 					<div class="flex gap-1 flex-col">
-						{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
+						{#each app.val.unusedInlineScripts as unusedInlineScript, index (index)}
 							{@const id = `unused-${index}`}
 							<button
 								id={PREFIX + id}
@@ -179,7 +179,7 @@
 						{/each}
 					</div>
 				{/if}
-				{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0 && runnables.imported.length == 0}
+				{#if runnables.inline.length == 0 && app.val.unusedInlineScripts?.length == 0 && runnables.imported.length == 0}
 					<div class="text-xs text-tertiary">No scripts/flows</div>
 				{/if}
 			</div>
@@ -210,8 +210,8 @@
 				</Button>
 			</div>
 			<div class="flex flex-col gap-1 w-full">
-				{#if $app.hiddenInlineScripts?.length > 0}
-					{#each $app.hiddenInlineScripts as { name, hidden, transformer }, index (index)}
+				{#if app.val.hiddenInlineScripts?.length > 0}
+					{#each app.val.hiddenInlineScripts as { name, hidden, transformer }, index (index)}
 						{#if !hidden}
 							{@const id = BG_PREFIX + index}
 							<button