fix(frontend): remove staticOutputs from apps

backend/windmill-worker/src/worker.rs

@@ -236,8 +236,7 @@ pub async fn create_token_for_owner<'c>(
 ) -> error::Result<(Transaction<'c, Postgres>, String)> {
     // TODO: Bad implementation. We should not have access to this DB here.
     let token: String = rd_string(30);
-    let is_super_admin = owner.contains('@')
-        && sqlx::query_scalar!("SELECT super_admin FROM password WHERE email = $1", owner)
+    let is_super_admin = sqlx::query_scalar!("SELECT super_admin FROM password WHERE email = $1", email)
             .fetch_optional(&mut tx)
             .await?
             .unwrap_or(false);

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

@@ -11,6 +11,7 @@
 	import { loadIcon } from '../icon'
 	import { twMerge } from 'tailwind-merge'
 	import { goto } from '$app/navigation'
+	import { initOutput } from '../../editor/appUtils'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -25,8 +26,6 @@
 	export let render: boolean
 	export let initializing: boolean | undefined = true
 
-	export const staticOutputs: string[] = ['loading', 'result']
-
 	const { worldStore, app } = getContext<AppViewerContext>('AppViewerContext')
 
 	let labelValue: string
@@ -63,10 +62,10 @@
 		}
 	}
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<Array<any>>
-		loading: Output<boolean>
-	}
+	let outputs = initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 
 	$: triggerOnAppLoad && runnableComponent?.runComponent()
 

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

@@ -26,7 +26,7 @@
 
 	export const staticOutputs: string[] = ['loading', 'result']
 
-	const { app, runnableComponents, worldStore } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let labelValue: string = 'Default label'
 	let color: ButtonType.Color

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

@@ -18,6 +18,7 @@
 	import { concatCustomCss } from '../../utils'
 	import { getContext } from 'svelte'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
+	import { initOutput } from '../../editor/appUtils'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -26,8 +27,12 @@
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 	export let render: boolean
 
-	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
+
+	initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 
 	ChartJS.register(
 		Title,

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

@@ -2,6 +2,7 @@
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
+	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import {
 		IS_APP_PUBLIC_CONTEXT_KEY,
@@ -17,10 +18,13 @@
 	export let render: boolean
 
 	const requireHtmlApproval = getContext<boolean | undefined>(IS_APP_PUBLIC_CONTEXT_KEY)
-	const { app } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 	let result: any = undefined
 
-	export const staticOutputs: string[] = ['result', 'loading']
+	initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 </script>
 
 <RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
+	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
@@ -11,8 +12,12 @@
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 	export let render: boolean
 
-	export const staticOutputs: string[] = ['result', 'loading']
-	const { app } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
+
+	initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 
 	let result: string | undefined = undefined
 	let h: number | undefined = undefined

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

@@ -10,7 +10,6 @@
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = 'left'
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export let configuration: Record<string, AppInput>
-	export const staticOutputs: string[] = []
 	export let customCss: ComponentCustomCSS<'container' | 'icon'> | undefined = undefined
 	export let render: boolean
 

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

@@ -11,7 +11,6 @@
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
-	export const staticOutputs: string[] = ['loading']
 	export let customCss: ComponentCustomCSS<'image'> | undefined = undefined
 	export let render: boolean
 

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

@@ -11,8 +11,7 @@
 	import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer'
 	import { Point } from 'ol/geom'
 	import { defaults as defaultControls } from 'ol/control'
-	import { findGridItem } from '../../editor/appUtils'
-	import type { Output } from '../../rx'
+	import { findGridItem, initOutput } from '../../editor/appUtils'
 
 	interface Marker {
 		lon: number
@@ -30,19 +29,18 @@
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
-	export const staticOutputs: string[] = ['mapRegion']
 	export let customCss: ComponentCustomCSS<'map'> | undefined = undefined
 	export let render: boolean
 
 	const { app, worldStore, selectedComponent, connectingInput, focusedGrid, mode } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		mapRegion: Output<{
-			topLeft: { lat: number; lon: number }
-			bottomRight: { lat: number; lon: number }
-		}>
-	}
+	let outputs = initOutput($worldStore, id, {
+		mapRegion: {
+			topLeft: { lat: 0, lon: 0 },
+			bottomRight: { lat: 0, lon: 0 }
+		}
+	})
 
 	let map: Map
 	let mapElement: HTMLDivElement

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

@@ -11,15 +11,20 @@
 	import { Button } from '../../../common'
 	import { Download, Loader2, MoveHorizontal, ZoomIn, ZoomOut } from 'lucide-svelte'
 	import { fade } from 'svelte/transition'
-	import { findGridItem } from '../../editor/appUtils'
+	import { findGridItem, initOutput } from '../../editor/appUtils'
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
-	export const staticOutputs: string[] = ['loading']
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 	export let render: boolean
 
-	const { app, mode, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, mode, worldStore, selectedComponent } =
+		getContext<AppViewerContext>('AppViewerContext')
+
+	initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 
 	let source: string | ArrayBuffer | undefined = undefined
 	let wrapper: HTMLDivElement | undefined = undefined

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

@@ -17,6 +17,7 @@
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import { getContext } from 'svelte'
+	import { initOutput } from '../../editor/appUtils'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -25,8 +26,12 @@
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 	export let render: boolean
 
-	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
+
+	initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 
 	ChartJS.register(
 		Title,

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

@@ -20,6 +20,7 @@
 	import { concatCustomCss } from '../../utils'
 	import { getContext } from 'svelte'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
+	import { initOutput } from '../../editor/appUtils'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -31,8 +32,12 @@
 	let zoomable = false
 	let pannable = false
 
-	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
+
+	initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 
 	ChartJS.register(
 		Title,

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

@@ -11,6 +11,7 @@
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { getContext } from 'svelte'
 	import ResizeWrapper from '../helpers/ResizeWrapper.svelte'
+	import { initOutput } from '../../editor/appUtils'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -21,9 +22,12 @@
 	export let customCss: ComponentCustomCSS<'text'> | undefined = undefined
 	export let render: boolean
 
-	export const staticOutputs: string[] = ['result', 'loading']
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	const { app } = getContext<AppViewerContext>('AppViewerContext')
+	initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 
 	let result: string | undefined = undefined
 	let style: 'Title' | 'Subtitle' | 'Body' | 'Caption' | 'Label' | undefined = undefined

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

@@ -23,6 +23,7 @@
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { getContext } from 'svelte'
 	import { concatCustomCss } from '../../utils'
+	import { initOutput } from '../../editor/appUtils'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -31,8 +32,12 @@
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 	export let render: boolean
 
-	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
+
+	initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 
 	let logarithmicScale = false
 	let zoomable = false

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

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import { onMount } from 'svelte'
+	import { getContext, onMount } from 'svelte'
+	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
+	import type { AppViewerContext } from '../../types'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 
 	export let id: string
@@ -9,7 +11,12 @@
 	export let initializing: boolean | undefined = undefined
 	export let render: boolean
 
-	export const staticOutputs: string[] = ['result', 'loading']
+	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
+
+	initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 
 	let result: object | undefined = undefined
 	let divEl: HTMLDivElement | null = null
@@ -34,7 +41,7 @@
 		Plotly.newPlot(
 			divEl,
 			[result],
-			{ width: w, height: h, margin: { l: 40, r: 40, b: 40, t: 40, pad: 4 } },
+			{ width: w, height: h, margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 } },
 			{ responsive: true, displayModeBar: false }
 		)
 </script>

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

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import { onMount } from 'svelte'
+	import { getContext, onMount } from 'svelte'
+	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
+	import type { AppViewerContext } from '../../types'
 	import InputValue from '../helpers/InputValue.svelte'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 
@@ -10,11 +12,16 @@
 	export let initializing: boolean | undefined = undefined
 	export let render: boolean
 
-	export const staticOutputs: string[] = ['result', 'loading']
-
 	let result: object | undefined = undefined
 	let divEl: HTMLDivElement | null = null
 
+	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
+
+	initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
+
 	let vegaEmbed
 	onMount(async () => {
 		if (divEl) {

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

@@ -12,6 +12,7 @@
 	import { isObject } from '$lib/utils'
 
 	import Alert from '$lib/components/common/alert/Alert.svelte'
+	import { initOutput } from '$lib/components/apps/editor/appUtils'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -19,12 +20,17 @@
 	export let initializing: boolean | undefined = undefined
 	export let render: boolean
 
-	export const staticOutputs: string[] = ['selectedRow', 'loading', 'result', 'selectedRowIndex']
-
-	let result: Record<string, any>[] | undefined = undefined
+	let result: Record<number, any>[] | undefined = undefined
 
 	const { worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
+	let outputs = initOutput($worldStore, id, {
+		selectedRowIndex: 0,
+		selectedRow: {},
+		result: [] as Record<number, any>[],
+		loading: false
+	})
+
 	let selectedRowIndex = -1
 
 	function toggleRow(row: Record<string, any>, rowIndex: number) {
@@ -48,13 +54,7 @@
 		outputs &&
 		toggleRow({ original: result[0] }, 0)
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		selectedRowIndex: Output<number>
-		selectedRow: Output<any>
-		result: Output<any>
-	}
-
-	$: outputs?.result?.set(result)
+	$: outputs?.result?.set(result ?? [])
 
 	let clientHeight
 	let clientWidth

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

@@ -16,6 +16,7 @@
 	import type { ButtonComponent } from '../../../editor/component'
 	import { concatCustomCss } from '../../../utils'
 	import { twMerge } from 'tailwind-merge'
+	import { initOutput } from '$lib/components/apps/editor/appUtils'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -27,14 +28,6 @@
 		| undefined = undefined
 	export let render: boolean
 
-	export const staticOutputs: string[] = [
-		'selectedRow',
-		'loading',
-		'result',
-		'search',
-		'selectedRowIndex'
-	]
-
 	type T = Record<string, any>
 
 	let result: Record<string, any>[] | undefined = undefined
@@ -57,11 +50,7 @@
 
 	let table = createSvelteTable(options)
 
-	const {
-		app,
-		worldStore,
-		staticOutputs: staticOutputsStore
-	} = getContext<AppViewerContext>('AppViewerContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let selectedRowIndex = -1
 
@@ -131,11 +120,13 @@
 	$: filteredResult && setOptions(filteredResult)
 	$: search === 'By Component' && (filteredResult = searchInResult(result ?? [], searchValue))
 	$: (search === 'By Runnable' || search === 'Disabled') && (filteredResult = result ?? [])
-	$: outputs = $worldStore?.outputsById[id] as {
-		selectedRowIndex: Output<number>
-		selectedRow: Output<any>
-		search: Output<string>
-	}
+	let outputs = initOutput($worldStore, id, {
+		selectedRowIndex: 0,
+		selectedRow: undefined,
+		loading: false,
+		result: [],
+		search: ''
+	})
 
 	function rerender() {
 		table = createSvelteTable(options)
@@ -243,7 +234,11 @@
 								{/each}
 
 								{#if actionButtons.length > 0}
-									<td class="p-2 " on:click={() => toggleRow(row, rowIndex)}>
+									<td
+										class="p-2"
+										on:keypress={() => toggleRow(row, rowIndex)}
+										on:click={() => toggleRow(row, rowIndex)}
+									>
 										<div class="center-center h-full w-full flex-wrap gap-1">
 											{#each actionButtons as actionButton, actionIndex (actionIndex)}
 												{#if rowIndex == 0}
@@ -256,7 +251,6 @@
 														}}
 														extraQueryParams={{ row: row.original }}
 														bind:componentInput={actionButton.componentInput}
-														bind:staticOutputs={$staticOutputsStore[actionButton.id]}
 													/>
 												{:else}
 													<AppButton

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

@@ -1,11 +1,13 @@
 <script lang="ts">
+	import { getContext } from 'svelte'
+	import { initOutput } from '../../editor/appUtils'
 	import type {
 		ConnectedAppInput,
 		RowAppInput,
 		StaticAppInput,
 		UserAppInput
 	} from '../../inputType'
-	import type { InlineScript } from '../../types'
+	import type { AppViewerContext, InlineScript } from '../../types'
 	import RunnableComponent from './RunnableComponent.svelte'
 
 	export let id: string
@@ -16,7 +18,12 @@
 
 	let result: any = undefined
 
-	export const staticOutputs: string[] = ['result', 'loading']
+	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
+
+	initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
 </script>
 
 <RunnableComponent

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

@@ -15,7 +15,7 @@
 	// Sync the result to the output
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	$: outputs = $worldStore?.outputsById[id] as {
+	$: outputs = $worldStore?.outputsById?.[id] as {
 		loading: Output<boolean>
 		result: Output<any>
 	}
@@ -25,7 +25,7 @@
 	}
 
 	function setOutput(v: any) {
-		outputs.result?.set(v, true)
+		outputs?.result?.set(v, true)
 	}
 
 	$: result && outputs && setOutput(result)

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

@@ -113,7 +113,7 @@
 	let testJob: CompletedJob | undefined = undefined
 	let testJobLoader: TestJobLoader | undefined = undefined
 
-	$: outputs = initOutput($worldStore, id, { result: undefined, loading: false })
+	let outputs = initOutput($worldStore, id, { result: undefined, loading: false })
 
 	$: outputs?.loading?.set(testIsLoading)
 	$: schemaStripped = stripSchema(fields, $stateId)

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { getContext } from 'svelte'
+	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
@@ -17,17 +18,15 @@
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	export const staticOutputs: string[] = ['result']
-
 	let defaultValue: boolean | undefined = undefined
 	let labelValue: string = 'Default label'
 
 	// As the checkbox is a special case and has no input
 	// we need to manually set the output
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<boolean>
-	}
+	let outputs = initOutput($worldStore, id, {
+		result: false
+	})
 
 	$: defaultValue != undefined && outputs?.result.set(defaultValue)
 

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
+	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
@@ -12,7 +13,6 @@
 	export let configuration: Record<string, AppInput>
 	export let inputType: 'date'
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 	export let render: boolean
 
@@ -24,9 +24,9 @@
 
 	let value: string | undefined = undefined
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<string | undefined>
-	}
+	let outputs = initOutput($worldStore, id, {
+		result: undefined as string | undefined
+	})
 
 	$: handleDefault(defaultValue)
 

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

@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { FileInput } from '../../../common'
+	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
@@ -10,7 +11,6 @@
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
-	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 	export let render: boolean
 
@@ -20,9 +20,9 @@
 	let allowMultiple: boolean | undefined = undefined
 	let text: string | undefined = undefined
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<string[] | undefined>
-	}
+	let outputs = initOutput($worldStore, id, {
+		result: [] as string[] | undefined
+	})
 
 	// Receives Base64 encoded strings from the input component
 	async function handleChange(files: string[] | undefined) {

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

@@ -8,8 +8,8 @@
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults'
+	import { initOutput } from '../../editor/appUtils'
 
-	export const staticOutputs: string[] = ['result']
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
@@ -22,9 +22,9 @@
 	let items: { label: string; value: string }[]
 	let placeholder: string = 'Select an item'
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<string[] | undefined>
-	}
+	let outputs = initOutput($worldStore, id, {
+		result: [] as string[]
+	})
 
 	// $: outputs && handleOutputs()
 

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
+	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
@@ -11,7 +12,6 @@
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 	export let render: boolean
 
@@ -25,9 +25,9 @@
 	let max: number | undefined = undefined
 	let step = 1
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<number | undefined>
-	}
+	let outputs = initOutput($worldStore, id, {
+		result: undefined as number | undefined
+	})
 
 	$: handleDefault(defaultValue)
 

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

@@ -8,11 +8,11 @@
 	import InputValue from '../helpers/InputValue.svelte'
 	import { concatCustomCss } from '../../utils'
 	import { twMerge } from 'tailwind-merge'
+	import { initOutput } from '../../editor/appUtils'
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'handles' | 'bar' | 'limits' | 'values'> | undefined =
 		undefined
 	export let render: boolean
@@ -25,9 +25,11 @@
 
 	let values: [number, number] = [0, 0]
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<[number, number] | null>
-	}
+	let outputs = initOutput($worldStore, id, {
+		result: null as [number, number] | null
+	})
+
+	console.log('reset')
 
 	$: outputs?.result.set(values)
 

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

@@ -8,8 +8,8 @@
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults'
+	import { initOutput } from '../../editor/appUtils'
 
-	export const staticOutputs: string[] = ['result']
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
@@ -22,9 +22,9 @@
 	let items: { label: string; value: any; created?: boolean }[]
 	let placeholder: string = 'Select an item'
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<any | undefined>
-	}
+	let outputs = initOutput($worldStore, id, {
+		result: undefined
+	})
 
 	let value: string | undefined = outputs?.result.peak()
 

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

@@ -8,11 +8,11 @@
 	import InputValue from '../helpers/InputValue.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { concatCustomCss } from '../../utils'
+	import { initOutput } from '../../editor/appUtils'
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'handle' | 'limits' | 'value' | 'bar'> | undefined =
 		undefined
 	export let render: boolean
@@ -23,9 +23,9 @@
 	let step = 1
 	let slider: HTMLElement
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<number | null>
-	}
+	let outputs = initOutput($worldStore, id, {
+		result: (0 as number) || null
+	})
 
 	let values: [number] = [outputs?.result.peak() ?? 0]
 

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
+	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
@@ -12,7 +13,6 @@
 	export let configuration: Record<string, AppInput>
 	export let inputType = 'text'
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 	export let appCssKey: 'textinputcomponent' | 'passwordinputcomponent' | 'emailinputcomponent' =
 		'textinputcomponent'
@@ -24,13 +24,13 @@
 	let defaultValue: string | undefined = undefined
 	let value: string | undefined = undefined
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		result: Output<string | undefined>
-	}
+	let outputs = initOutput($worldStore, id, {
+		result: ''
+	})
 
 	$: handleDefault(defaultValue)
 
-	$: outputs?.result.set(value)
+	$: outputs?.result.set(value ?? '')
 
 	function handleDefault(defaultValue: string | undefined) {
 		value = defaultValue

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { initOutput } from '$lib/components/apps/editor/appUtils'
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../../inputType'
@@ -12,12 +13,15 @@
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 	export let render: boolean
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
+	initOutput($worldStore, id, {
+		result: undefined
+	})
+
 	let defaultValue: number | undefined = undefined
 
 	let isNegativeAllowed: boolean | undefined = undefined

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

@@ -11,7 +11,6 @@
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 	export let render: boolean
 
-	export const staticOutputs: string[] = []
 	const { app, focusedGrid, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
 	function onFocus() {

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

@@ -18,7 +18,6 @@
 	export let render: boolean
 	export let initializing: boolean | undefined = configuration.tabsKind != undefined
 
-	export const staticOutputs: string[] = ['selectedTabIndex']
 	const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
@@ -26,11 +25,9 @@
 	let kind: 'tabs' | 'sidebar' | 'invisibleOnView' | undefined = undefined
 	let tabHeight: number = 0
 
-	$: outputs = $worldStore
-		? initOutput($worldStore, id, {
-				selectedTabIndex: 0
-		  })
-		: undefined
+	let outputs = initOutput($worldStore, id, {
+		selectedTabIndex: 0
+	})
 
 	function handleTabSelection() {
 		const selectedIndex = tabs?.indexOf(selected)

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

@@ -49,8 +49,6 @@
 	export let fromHub: boolean = false
 
 	const appStore = writable<App>(app)
-	const worldStore = writable<World | undefined>(undefined)
-	const staticOutputs = writable<Record<string, string[]>>({})
 	const selectedComponent = writable<string | undefined>(undefined)
 	const mode = writable<EditorMode>(initialMode)
 	const breakpoint = writable<EditorBreakpoint>('lg')
@@ -66,10 +64,15 @@
 	const errorByComponent = writable<Record<string, { error: string; componentId: string }>>({})
 	const focusedGrid = writable<FocusedGrid | undefined>(undefined)
 	const pickVariableCallback: Writable<((path: string) => void) | undefined> = writable(undefined)
+	let context = {
+		email: $userStore?.email,
+		username: $userStore?.username,
+		query: Object.fromEntries($page.url.searchParams.entries()),
+		hash: $page.url.hash
+	}
 
 	setContext<AppViewerContext>('AppViewerContext', {
-		worldStore,
-		staticOutputs,
+		worldStore: buildWorld(context),
 		app: appStore,
 		summary: summaryStore,
 		selectedComponent,
@@ -119,19 +122,11 @@
 		mounted = true
 	})
 
-	let context = {
-		email: $userStore?.email,
-		username: $userStore?.username,
-		query: Object.fromEntries($page.url.searchParams.entries()),
-		hash: $page.url.hash
-	}
-
 	function hashchange(e: HashChangeEvent) {
 		context.hash = e.newURL.split('#')[1]
 		context = context
 	}
 
-	$: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, context))
 	$: previewing = $mode === 'preview'
 	$: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full'
 

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

@@ -29,7 +29,6 @@
 
 	const appStore = writable<App>(app)
 	const worldStore = writable<World | undefined>(undefined)
-	const staticOutputs = writable<Record<string, string[]>>({})
 	const selectedComponent = writable<string | undefined>(undefined)
 	const mode = writable<EditorMode>('preview')
 
@@ -42,8 +41,7 @@
 	const runnableComponents = writable<Record<string, () => Promise<void>>>({})
 
 	setContext<AppViewerContext>('AppViewerContext', {
-		worldStore,
-		staticOutputs,
+		worldStore: buildWorld(context),
 		app: appStore,
 		summary: writable(summary),
 		selectedComponent,
@@ -85,7 +83,6 @@
 		ncontext = ncontext
 	}
 
-	$: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, ncontext))
 	$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full '
 	$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : ''
 </script>

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

@@ -13,7 +13,6 @@
 	import { push } from '$lib/history'
 	import { expandGriditem, findGridItem, sortGridItemsPosition } from './appUtils'
 	import Grid from '../svelte-grid/Grid.svelte'
-	import { settableOutput } from '../rx'
 
 	export let policy: Policy
 
@@ -22,7 +21,6 @@
 		app,
 		mode,
 		connectingInput,
-		staticOutputs,
 		runnableComponents,
 		summary,
 		focusedGrid,
@@ -84,10 +82,6 @@
 				return gridComponent.data.id !== component?.id
 			})
 
-			// Delete static inputs
-			delete $staticOutputs[component.id]
-			$staticOutputs = $staticOutputs
-
 			delete $runnableComponents[component.id]
 			$runnableComponents = $runnableComponents
 
@@ -240,7 +234,6 @@
 				name={script.name}
 				fields={script.fields}
 				autoRefresh={script.autoRefresh ?? false}
-				bind:staticOutputs={$staticOutputs[`bg_${index}`]}
 			/>
 		{/if}
 	{/each}

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

@@ -306,15 +306,9 @@ export function initOutput<I extends Record<string, any>>(
 	if (!world) {
 		return {} as any
 	}
-	const output = world.outputsById[id] as Outputtable<I>
-	if (init) {
-		for (const key in init) {
-			if (output && output[key] && output[key].peak() == undefined) {
-				output[key].set(init[key] as any)
-			}
-		}
-	}
-	return output
+	return Object.fromEntries(
+		Object.entries(init).map(([key, value]) => [key, world.newOutput(id, key, value)])
+	) as Outputtable<I>
 }
 export function expandGriditem(
 	grid: GridItem[],
@@ -391,6 +385,9 @@ export function recursivelyFilterKeyInJSON(
 	search: string,
 	extraSearch?: string | undefined
 ): object {
+	if (!search || search == '') {
+		return json
+	}
 	let filteredJSON = {}
 	Object.keys(json).forEach((key) => {
 		if (

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

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import { fade } from 'svelte/transition'
 	import { Loader2 } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
 	import type { AppViewerContext } from '../../types'
@@ -48,7 +47,7 @@
 	export let pointerdown: boolean = false
 	export let render: boolean
 
-	const { staticOutputs, mode, connectingInput, app, errorByComponent } =
+	const { mode, connectingInput, app, errorByComponent } =
 		getContext<AppViewerContext>('AppViewerContext')
 	let hover = false
 	let initializing: boolean | undefined = undefined
@@ -104,7 +103,6 @@
 				customCss={component.customCss}
 				bind:initializing
 				componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'barchartcomponent'}
@@ -114,7 +112,6 @@
 				customCss={component.customCss}
 				bind:initializing
 				componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'timeseriescomponent'}
@@ -124,7 +121,6 @@
 				configuration={component.configuration}
 				bind:initializing
 				componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'htmlcomponent'}
@@ -133,7 +129,6 @@
 				customCss={component.customCss}
 				bind:initializing
 				componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'vegalitecomponent'}
@@ -142,7 +137,6 @@
 				id={component.id}
 				bind:initializing
 				componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'plotlycomponent'}
@@ -150,7 +144,6 @@
 				id={component.id}
 				bind:initializing
 				componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'scatterchartcomponent'}
@@ -160,7 +153,6 @@
 				customCss={component.customCss}
 				bind:initializing
 				componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'piechartcomponent'}
@@ -169,7 +161,6 @@
 				id={component.id}
 				customCss={component.customCss}
 				bind:initializing
-				bind:staticOutputs={$staticOutputs[component.id]}
 				componentInput={component.componentInput}
 				{render}
 			/>
@@ -179,7 +170,6 @@
 				id={component.id}
 				customCss={component.customCss}
 				bind:initializing
-				bind:staticOutputs={$staticOutputs[component.id]}
 				componentInput={component.componentInput}
 				bind:actionButtons={component.actionButtons}
 				{render}
@@ -189,7 +179,6 @@
 				id={component.id}
 				configuration={component.configuration}
 				bind:initializing
-				bind:staticOutputs={$staticOutputs[component.id]}
 				componentInput={component.componentInput}
 				{render}
 			/>
@@ -202,7 +191,6 @@
 				customCss={component.customCss}
 				bind:initializing
 				componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'buttoncomponent'}
@@ -213,7 +201,6 @@
 				configuration={component.configuration}
 				customCss={component.customCss}
 				componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				recomputeIds={component.recomputeIds}
 				bind:initializing
 				{render}
@@ -225,7 +212,6 @@
 				horizontalAlignment={component.horizontalAlignment}
 				configuration={component.configuration}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'multiselectcomponent'}
@@ -235,7 +221,6 @@
 				horizontalAlignment={component.horizontalAlignment}
 				configuration={component.configuration}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'formcomponent'}
@@ -245,7 +230,6 @@
 				configuration={component.configuration}
 				customCss={component.customCss}
 				componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				recomputeIds={component.recomputeIds}
 				{render}
 			/>
@@ -257,7 +241,6 @@
 				configuration={component.configuration}
 				customCss={component.customCss}
 				componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				recomputeIds={component.recomputeIds}
 				{render}
 			/>
@@ -268,7 +251,6 @@
 				horizontalAlignment={component.horizontalAlignment}
 				configuration={component.configuration}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'textinputcomponent'}
@@ -277,7 +259,6 @@
 				verticalAlignment={component.verticalAlignment}
 				configuration={component.configuration}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'emailinputcomponent'}
@@ -288,7 +269,6 @@
 				appCssKey="emailinputcomponent"
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'passwordinputcomponent'}
@@ -299,7 +279,6 @@
 				appCssKey="passwordinputcomponent"
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'dateinputcomponent'}
@@ -309,7 +288,6 @@
 				inputType="date"
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'numberinputcomponent'}
@@ -318,7 +296,6 @@
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'currencycomponent'}
@@ -327,7 +304,6 @@
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'slidercomponent'}
@@ -336,7 +312,6 @@
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'horizontaldividercomponent'}
@@ -365,7 +340,6 @@
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'tabscomponent'}
@@ -374,7 +348,6 @@
 				id={component.id}
 				tabs={component.tabs}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{componentContainerHeight}
 				{render}
 				bind:initializing
@@ -384,7 +357,6 @@
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{componentContainerHeight}
 				{render}
 			/>
@@ -414,7 +386,6 @@
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'fileinputcomponent'}
@@ -422,7 +393,6 @@
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'imagecomponent'}
@@ -430,7 +400,6 @@
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'drawercomponent'}
@@ -447,7 +416,6 @@
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{:else if component.type === 'pdfcomponent'}
@@ -455,7 +423,6 @@
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
-				bind:staticOutputs={$staticOutputs[component.id]}
 				{render}
 			/>
 		{/if}

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

@@ -10,7 +10,7 @@
 	import { push } from '$lib/history'
 	import { sendUserToast } from '$lib/utils'
 
-	const { app, selectedComponent, breakpoint, focusedGrid, componentControl } =
+	const { app, selectedComponent, worldStore, focusedGrid, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
 	const { history } = getContext<AppEditorContext>('AppEditorContext')
@@ -164,6 +164,7 @@
 			insertNewGridItem($app, copiedGridItem.data, $focusedGrid, false)
 		}
 
+		$worldStore = $worldStore
 		$app = $app
 	}
 

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

@@ -10,7 +10,8 @@
 	import { push } from '$lib/history'
 	import { flip } from 'svelte/animate'
 
-	const { app, selectedComponent, focusedGrid } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, selectedComponent, focusedGrid, worldStore } =
+		getContext<AppViewerContext>('AppViewerContext')
 
 	const { history } = getContext<AppEditorContext>('AppEditorContext')
 
@@ -23,6 +24,7 @@
 		const id = insertNewGridItem($app, data, $focusedGrid)
 
 		$selectedComponent = id
+		$worldStore = $worldStore
 	}
 
 	let search = ''

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

@@ -14,7 +14,7 @@
 	export let parentId: string | undefined = undefined
 	export let expanded: boolean = false
 
-	const { app, staticOutputs, selectedComponent, connectingInput } =
+	const { app, selectedComponent, connectingInput } =
 		getContext<AppViewerContext>('AppViewerContext')
 	const name = getComponentNameById(gridItem.id)
 
@@ -51,33 +51,30 @@
 	}
 </script>
 
-{#if $staticOutputs[gridItem.id] || gridItem.data.numberOfSubgrids > 1}
-	<OutputHeader
-		{shouldOpen}
-		on:handleClick={(e) => {
-			if (!$connectingInput.opened) {
-				onHeaderClick(e.detail.manuallyOpen)
-			}
-		}}
-		id={gridItem.id}
-		name={getComponentNameById(gridItem.id)}
-		{first}
-		{nested}
-		{expanded}
-	>
-		<div class="py-1">
-			<ComponentOutputViewer
-				componentId={gridItem.id}
-				outputs={$staticOutputs[gridItem.id]}
-				on:select={({ detail }) => {
-					if ($connectingInput.opened) {
-						$connectingInput = connectInput($connectingInput, gridItem.id, detail)
-					}
-				}}
-			/>
-		</div>
+<OutputHeader
+	{shouldOpen}
+	on:handleClick={(e) => {
+		if (!$connectingInput.opened) {
+			onHeaderClick(e.detail.manuallyOpen)
+		}
+	}}
+	id={gridItem.id}
+	name={getComponentNameById(gridItem.id)}
+	{first}
+	{nested}
+	{expanded}
+>
+	<div class="py-1">
+		<ComponentOutputViewer
+			componentId={gridItem.id}
+			on:select={({ detail }) => {
+				if ($connectingInput.opened) {
+					$connectingInput = connectInput($connectingInput, gridItem.id, detail)
+				}
+			}}
+		/>
+	</div>
 
-		<SubGridOutput {name} {expanded} {subGrids} parentId={gridItem.id} />
-		<TableActionsOutput {gridItem} {expanded} />
-	</OutputHeader>
-{/if}
+	<SubGridOutput {name} {expanded} {subGrids} parentId={gridItem.id} />
+	<TableActionsOutput {gridItem} {expanded} />
+</OutputHeader>

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

@@ -6,7 +6,6 @@
 	import type { AppViewerContext } from '../../types'
 	import { recursivelyFilterKeyInJSON } from '../appUtils'
 
-	export let outputs: string[] = []
 	export let componentId: string
 
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
@@ -14,22 +13,21 @@
 
 	let object = {}
 
-	function subscribeToAllOutputs(observableOutputs: Record<string, Output<any>>) {
+	function subscribeToAllOutputs(observableOutputs: Record<string, Output<any>> | undefined) {
 		if (observableOutputs) {
-			outputs?.forEach((output: string) => {
-				object[output] = undefined
-				observableOutputs[output]?.subscribe({
-					id: 'alloutputs' + output,
+			Object.entries(observableOutputs).forEach(([k, output]) => {
+				object[k] = undefined
+				output?.subscribe({
+					id: 'alloutputs' + componentId + '-' + k,
 					next: (value) => {
-						object[output] = value
+						object[k] = value
 					}
 				})
 			})
 		}
 	}
 
-	$: $worldStore?.outputsById[componentId] &&
-		subscribeToAllOutputs($worldStore.outputsById[componentId])
+	$: subscribeToAllOutputs($worldStore?.outputsById?.[componentId])
 
 	$: filtered = recursivelyFilterKeyInJSON(object, $search, componentId)
 </script>

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

@@ -13,7 +13,7 @@
 	import MinMaxButton from './components/MinMaxButton.svelte'
 	import OutputHeader from './components/OutputHeader.svelte'
 
-	const { connectingInput, app, state } = getContext<AppViewerContext>('AppViewerContext')
+	const { connectingInput, app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let search = writable<string>('')
 	let expanded = false
@@ -54,42 +54,42 @@
 			</div>
 
 			<div class="flex flex-col gap-4">
-				<div>
-					<span class="text-sm font-bold p-2">State & Context</span>
+				{#key $worldStore?.outputsById}
+					<div>
+						<span class="text-sm font-bold p-2">State & Context</span>
 
-					<OutputHeader id={'ctx'} name={'App Context'} first color="blue" {expanded}>
-						<ComponentOutputViewer
-							componentId={'ctx'}
-							outputs={['email', 'username', 'query', 'hash']}
-							on:select={({ detail }) => {
-								$connectingInput = connectInput($connectingInput, 'ctx', detail)
-							}}
-						/>
-					</OutputHeader>
+						<OutputHeader id={'ctx'} name={'App Context'} first color="blue" {expanded}>
+							<ComponentOutputViewer
+								componentId={'ctx'}
+								on:select={({ detail }) => {
+									$connectingInput = connectInput($connectingInput, 'ctx', detail)
+								}}
+							/>
+						</OutputHeader>
 
-					<OutputHeader id={'state'} name={'State'} color="blue" {expanded}>
-						<ComponentOutputViewer
-							componentId={'state'}
-							outputs={Object.keys($state)}
-							on:select={({ detail }) => {
-								$connectingInput = connectInput($connectingInput, 'state', detail)
-							}}
-						/>
-					</OutputHeader>
-				</div>
-
-				<div>
-					<span class="text-sm font-bold p-2">Components</span>
-					{#each $app.grid as gridItem, index (gridItem.id)}
-						<ComponentOutput {gridItem} first={index === 0} {expanded} />
-					{/each}
-				</div>
-				<div>
-					<span class="text-sm font-bold p-2">Background scripts</span>
-					<div class="border-t">
-						<BackgroundScriptsOutput {expanded} />
+						<OutputHeader id={'state'} name={'State'} color="blue" {expanded}>
+							<ComponentOutputViewer
+								componentId={'state'}
+								on:select={({ detail }) => {
+									$connectingInput = connectInput($connectingInput, 'state', detail)
+								}}
+							/>
+						</OutputHeader>
 					</div>
-				</div>
+
+					<div>
+						<span class="text-sm font-bold p-2">Components</span>
+						{#each $app.grid as gridItem, index (gridItem.id)}
+							<ComponentOutput {gridItem} first={index === 0} {expanded} />
+						{/each}
+					</div>
+					<div>
+						<span class="text-sm font-bold p-2">Background scripts</span>
+						<div class="border-t">
+							<BackgroundScriptsOutput {expanded} />
+						</div>
+					</div>
+				{/key}
 			</div>
 		</div>
 	</div>

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

@@ -14,7 +14,11 @@
 
 	function onHeaderClick(manuallyOpen: boolean) {
 		if (manuallyOpen) {
-			$selectedComponent = undefined
+			if (id) {
+				$selectedComponent = id
+			} else {
+				$selectedComponent = undefined
+			}
 		} else {
 			$selectedComponent = id
 		}
@@ -28,13 +32,14 @@
 	{first}
 	{expanded}
 	on:handleClick={(e) => {
-		onHeaderClick(e.detail.manuallyOpen)
+		if (!$connectingInput.opened) {
+			onHeaderClick(e.detail.manuallyOpen)
+		}
 	}}
 	shouldOpen={$selectedComponent === id}
 >
 	<ComponentOutputViewer
 		componentId={id}
-		outputs={['loading', 'result']}
 		on:select={({ detail }) => {
 			$connectingInput = connectInput($connectingInput, id, detail)
 		}}

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

@@ -5,7 +5,7 @@
 	import ComponentOutputViewer from '../ComponentOutputViewer.svelte'
 	import OutputHeader from './OutputHeader.svelte'
 
-	const { staticOutputs, connectingInput } = getContext<AppViewerContext>('AppViewerContext')
+	const { connectingInput } = getContext<AppViewerContext>('AppViewerContext')
 
 	export let id: string
 	export let expanded: boolean = false
@@ -15,7 +15,6 @@
 <OutputHeader {id} name={'Table action'} {first} {expanded}>
 	<ComponentOutputViewer
 		componentId={id}
-		outputs={$staticOutputs[id]}
 		on:select={({ detail }) => {
 			$connectingInput = connectInput($connectingInput, id, detail)
 		}}

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

@@ -56,7 +56,7 @@
 	}
 
 	async function newInlineScript(content: string, language: Preview.language, path: string) {
-		const fullPath = `${appPath}/inline-script/${path}`
+		const fullPath = `${appPath}/${path}`
 
 		let schema: Schema = emptySchema()
 

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

@@ -27,7 +27,7 @@
 	export let fields: Record<string, AppInput> = {}
 	export let syncFields: boolean = false
 
-	const { runnableComponents, stateId, worldStore, state } =
+	const { runnableComponents, stateId, worldStore, state, appPath } =
 		getContext<AppViewerContext>('AppViewerContext')
 
 	let editor: Editor
@@ -49,6 +49,8 @@
 		return schema
 	}
 
+	$: inlineScript.path = `${appPath}/${name}`
+
 	onMount(async () => {
 		if (inlineScript && !inlineScript.schema) {
 			if (inlineScript.language != 'frontend') {

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

@@ -8,8 +8,7 @@
 	import EmptyInlineScript from './EmptyInlineScript.svelte'
 	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
 
-	const { app, staticOutputs, runnableComponents } =
-		getContext<AppViewerContext>('AppViewerContext')
+	const { app, runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 
 	let selectedScriptComponentId: string | undefined = undefined
 
@@ -18,9 +17,7 @@
 		$app.hiddenInlineScripts.splice(index, 1)
 		$app.hiddenInlineScripts = [...$app.hiddenInlineScripts]
 
-		delete $staticOutputs[`bg_${index}`]
 		delete $runnableComponents[`bg_${index}`]
-		$staticOutputs = $staticOutputs
 	}
 </script>
 

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -35,7 +35,6 @@
 
 	const {
 		app,
-		staticOutputs,
 		runnableComponents,
 		selectedComponent,
 		worldStore,
@@ -53,15 +52,12 @@
 		if (component && !noGrid) {
 			let ids = deleteGridItem($app, component, parent, false)
 			for (const key of ids) {
-				delete $staticOutputs[key]
 				delete $runnableComponents[key]
 			}
 		}
 
-		delete $staticOutputs[component.id]
 		delete $runnableComponents[component.id]
 		$app = $app
-		$staticOutputs = $staticOutputs
 		$runnableComponents = $runnableComponents
 
 		onDelete?.()

frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte

@@ -10,8 +10,7 @@
 	export let panes: number[]
 	export let component: AppComponent
 
-	const { app, staticOutputs, runnableComponents } =
-		getContext<AppViewerContext>('AppViewerContext')
+	const { app, runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 
 	function addTab() {
 		const numberOfPanes = panes.length
@@ -33,11 +32,9 @@
 			const components = deleteGridItem($app, item.data, subgrid, false)
 			console.log(components)
 			for (const key in components) {
-				delete $staticOutputs[key]
 				delete $runnableComponents[key]
 			}
 		}
-		$staticOutputs = $staticOutputs
 		$runnableComponents = $runnableComponents
 		for (let i = index; i < panes.length - 1; i++) {
 			$app!.subgrids![`${component.id}-${i}`] = $app!.subgrids![`${component.id}-${i + 1}`]

frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte

@@ -12,8 +12,7 @@
 	export let tabs: string[]
 	export let component: AppComponent
 
-	const { app, staticOutputs, runnableComponents, focusedGrid } =
-		getContext<AppViewerContext>('AppViewerContext')
+	const { app, runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 
 	function addTab() {
 		const numberOfTabs = tabs.length
@@ -33,11 +32,9 @@
 			const components = deleteGridItem($app, item.data, subgrid, false)
 			console.log(components)
 			for (const key in components) {
-				delete $staticOutputs[key]
 				delete $runnableComponents[key]
 			}
 		}
-		$staticOutputs = $staticOutputs
 		$runnableComponents = $runnableComponents
 		for (let i = index; i < tabs.length - 1; i++) {
 			$app!.subgrids![`${component.id}-${i}`] = $app!.subgrids![`${component.id}-${i + 1}`]

frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte

@@ -14,7 +14,7 @@
 	export let components: (BaseAppComponent & ButtonComponent)[]
 	export let id: string
 
-	const { selectedComponent, staticOutputs } = getContext<AppViewerContext>('AppViewerContext')
+	const { selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
 	function addComponent() {
 		const actionId = getNextId(components.map((x) => x.id.split('_')[1]))
@@ -90,8 +90,6 @@
 
 	function deleteComponent(cid: string) {
 		components = components.filter((x) => x.id !== cid)
-		delete $staticOutputs[cid]
-		$staticOutputs = $staticOutputs
 		$selectedComponent = id
 	}
 </script>

frontend/src/lib/components/apps/rx.ts

@@ -1,5 +1,5 @@
 import type { AppInput } from './inputType'
-import { writable, type Writable } from 'svelte/store'
+import { get, writable, type Writable } from 'svelte/store'
 import { deepEqual } from 'fast-equals'
 
 export interface Subscriber<T> {
@@ -26,36 +26,22 @@ export type World = {
 	newOutput: <T>(id: string, name: string, previousValue: T) => Output<T>
 }
 
-export function buildWorld(
-	components: Record<string, string[]>,
-	previousWorld: World | undefined,
-	context: Record<string, any>
-): World {
+export function buildWorld(context: Record<string, any>): Writable<World> {
 	const newWorld = buildObservableWorld()
 	const stateId = writable(0)
-
+	let writableWorld: Writable<World> | undefined = undefined
 	const outputsById: Record<string, Record<string, Output<any>>> = {
 		ctx: Object.fromEntries(
 			Object.entries(context).map(([k, v]) => {
 				return [k, newWorld.newOutput('ctx', k, stateId, v)]
 			})
 		),
-		state: previousWorld?.outputsById?.state ?? {}
+		state: {}
 	}
-	for (const [k, outputs] of Object.entries(components)) {
-		outputsById[k] = {}
 
-		for (const o of outputs) {
-			outputsById[k][o] = newWorld.newOutput(
-				k,
-				o,
-				stateId,
-				previousWorld?.outputsById[k]?.[o]?.peak()
-			)
-		}
-	}
 	function newOutput<T>(id: string, name: string, previousValue: T) {
 		if (outputsById[id]?.[name]) {
+			writableWorld?.update((x) => x)
 			return outputsById[id][name]
 		}
 		let o = newWorld.newOutput(id, name, stateId, previousValue)
@@ -63,11 +49,12 @@ export function buildWorld(
 			outputsById[id] = {}
 		}
 		outputsById[id][name] = o
+		writableWorld?.update((x) => x)
 		return o
 	}
 	stateId.update((x) => x + 1)
-
-	return { outputsById, connect: newWorld.connect, stateId, newOutput }
+	writableWorld = writable({ outputsById, connect: newWorld.connect, stateId, newOutput })
+	return writableWorld
 }
 
 export function buildObservableWorld() {

frontend/src/lib/components/apps/types.ts

@@ -114,8 +114,7 @@ export type ConnectingInput = {
 }
 
 export type AppViewerContext = {
-	worldStore: Writable<World | undefined>
-	staticOutputs: Writable<Record<string, string[]>>
+	worldStore: Writable<World>
 	app: Writable<App>
 	summary: Writable<string>
 	selectedComponent: Writable<string | undefined>