windmill-components 1.60.4 → 1.75.0

package/components/apps/editor/AppInputs.svelte

@@ -0,0 +1,60 @@
+<script>import { Alert } from '../../common';
+import Toggle from '../../Toggle.svelte';
+import { getContext } from 'svelte';
+import AppComponentInput from './AppComponentInput.svelte';
+import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
+const { app } = getContext('AppViewerContext');
+let resourceOnly = true;
+</script>
+
+<Alert type="info" title="Configurations">
+	In order to properly configure the app, you need to fill in the inputs below.
+</Alert>
+<div class="mt-2 flex flex-row-reverse">
+	<Toggle bind:checked={resourceOnly} options={{ right: 'Resource only' }} />
+</div>
+<div class="gap-4 flex flex-col pt-4">
+	{#each $app.grid as gridItem (gridItem.data.id)}
+		<div>
+			{#if gridItem?.data?.type === 'tablecomponent'}
+				<div>
+					<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
+					<div class="ml-4 mt-4">
+						{#each gridItem.data.actionButtons as actionButton (actionButton.id)}
+							<AppComponentInput bind:component={actionButton.data} {resourceOnly} />
+						{/each}
+					</div>
+				</div>
+			{:else}
+				<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
+			{/if}
+		</div>
+	{/each}
+</div>
+
+{#if $app?.hiddenInlineScripts?.length > 0}
+	<div class="font-bold text-lg">Background script inputs</div>
+	<div class="gap-4 flex flex-col pt-4">
+		{#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
+			<div class="border p-2">
+				<div class="text-sm font-bold">{script.name}</div>
+
+				{#if resourceOnly && Object.keys(script.fields).filter((fieldKey) => {
+						const fields = script.fields
+						const field = fields[fieldKey]
+						return field.fieldType === 'object' && field.format?.startsWith('resource-')
+					}).length === 0}
+					<span class="text-sm text-gray-600">No resource input</span>
+				{:else}
+					<InputsSpecsEditor
+						id={`bg_${index}`}
+						shouldCapitalize={false}
+						bind:inputSpecs={script.fields}
+						userInputEnabled={false}
+						{resourceOnly}
+					/>
+				{/if}
+			</div>
+		{/each}
+	</div>
+{/if}

package/components/apps/editor/AppInputs.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppInputsProps = typeof __propDef.props;
+export type AppInputsEvents = typeof __propDef.events;
+export type AppInputsSlots = typeof __propDef.slots;
+export default class AppInputs extends SvelteComponentTyped<AppInputsProps, AppInputsEvents, AppInputsSlots> {
+}
+export {};

package/components/apps/editor/AppPreview.svelte

@@ -1,6 +1,4 @@
 <script>import { onMount, setContext } from 'svelte';
-import { fade } from 'svelte/transition';
-import { cubicOut } from 'svelte/easing';
 import { writable } from 'svelte/store';
 import { buildWorld } from '../rx';
 import GridEditor from './GridEditor.svelte';
@@ -28,10 +26,9 @@ const connectingInput = writable({
     hoveredComponent: undefined
 });
 const runnableComponents = writable({});
-setContext('AppEditorContext', {
+setContext('AppViewerContext', {
     worldStore,
     staticOutputs,
-    lazyGrid: writable(app.grid),
     app: appStore,
     summary: writable(summary),
     selectedComponent,
@@ -45,34 +42,55 @@ setContext('AppEditorContext', {
     isEditor,
     jobs: writable([]),
     staticExporter: writable({}),
-    noBackend
+    noBackend,
+    errorByComponent: writable({}),
+    openDebugRun: writable(undefined),
+    focusedGrid: writable(undefined),
+    stateId: writable(0),
+    parentWidth: writable(0)
+});
+setContext('AppEditorContext', {
+    history: undefined,
+    componentControl: writable({}),
+    pickVariableCallback: writable(undefined)
 });
 let mounted = false;
 onMount(() => {
     mounted = true;
 });
-$: mounted && ($worldStore = buildWorld($staticOutputs, undefined, context));
+let ncontext = context;
+function hashchange(e) {
+    ncontext.hash = e.newURL.split('#')[1];
+    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>
 
+<svelte:window on:hashchange={hashchange} />
+
+<div id="app-editor-top-level-drawer" />
+
 <div class="relative">
-	<div class="{$$props.class} {lockedClasses} h-full max-h-[calc(100%-41px)] overflow-auto 
-	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto">
+	<div
+		class="{$$props.class} {lockedClasses} h-full 
+	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto"
+	>
 		{#if $appStore.grid}
-			<div class={classNames('mx-auto pb-4', width)}>
+			<div class={classNames('mx-auto', width)}>
 				<GridEditor {policy} />
 			</div>
 		{/if}
 	</div>
+
 	{#if isLocked}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div
-			transition:fade|local={{ duration: 200, easing: cubicOut }}
-			on:click={() => isLocked = false}
+			on:click={() => (isLocked = false)}
 			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
 		>
-			<Button on:click={() => isLocked = false}>
+			<Button on:click={() => (isLocked = false)}>
 				Unlock preview
 				<Unlock size={18} class="ml-1" strokeWidth={2.5} />
 			</Button>

package/components/apps/editor/ComponentHeader.svelte

@@ -1,12 +1,21 @@
 <script>import { classNames } from '../../../utils';
-import { Anchor, Move } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+import { Anchor, Bug, Expand, Move } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import Popover from '../../Popover.svelte';
+import { Alert, Button } from '../../common';
 export let component;
 export let selected;
 export let locked = false;
 export let pointerdown = false;
 export let hover = false;
 const dispatch = createEventDispatcher();
+const { errorByComponent, openDebugRun } = getContext('AppViewerContext');
+$: error = Object.values($errorByComponent).find((e) => e.componentId === component.id);
+function openDebugRuns() {
+    if ($openDebugRun) {
+        $openDebugRun(component.id);
+    }
+}
 </script>
 
 <span
@@ -38,6 +47,17 @@ const dispatch = createEventDispatcher();
 			<Anchor aria-label="Lock position" size={14} />
 		{/if}
 	</button>
+	<button
+		title="Expand"
+		class={classNames(
+			'text-gray-800 px-1 text-2xs py-0.5 font-bold w-fit shadow border border-gray-300 absolute  -top-1  right-[4.5rem] z-50 cursor-pointer',
+			' hover:bg-gray-300',
+			selected ? 'bg-gray-200/80' : 'bg-gray-200/80'
+		)}
+		on:click={() => dispatch('expand')}
+	>
+		<Expand aria-label="Expand position" size={14} />
+	</button>
 {/if}
 
 {#if selected || hover}
@@ -45,10 +65,39 @@ const dispatch = createEventDispatcher();
 		title="Move"
 		on:mousedown|stopPropagation|capture
 		class={classNames(
-			'text-gray-600 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute border border-gray-300 -top-1 shadow right-[4.5rem] z-50 cursor-move',
+			'text-gray-600 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute border border-gray-300 -top-1 shadow right-[0.5rem] z-50 cursor-move',
 			'bg-gray-200/80'
 		)}
 	>
 		<Move size={14} />
 	</span>
 {/if}
+
+{#if error}
+	{@const json = JSON.parse(JSON.stringify(error.error))}
+	<span
+		title="Error"
+		class={classNames(
+			'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-1  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer',
+			'bg-red-100/80'
+		)}
+	>
+		<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+			<Bug size={14} />
+			<span slot="text">
+				<div class="bg-white">
+					<Alert type="error" title={`${json?.name}: ${json?.message}`}>
+						<div class="flex flex-col gap-2">
+							<div>
+								<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs"
+									>{json?.stack ?? ''}
+									</pre>
+							</div>
+							<Button color="red" variant="border" on:click={openDebugRuns}>Open Debug Runs</Button>
+						</div>
+					</Alert>
+				</div>
+			</span>
+		</Popover>
+	</span>
+{/if}

package/components/apps/editor/ComponentHeader.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from '../types';
+import type { AppComponent } from './component';
 declare const __propDef: {
     props: {
         component: AppComponent;
@@ -11,6 +11,7 @@ declare const __propDef: {
     events: {
         mousedown: MouseEvent;
         lock: CustomEvent<any>;
+        expand: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/apps/editor/GridEditor.svelte

@@ -1,20 +1,31 @@
-<script>import { getContext } from 'svelte';
-import Grid from 'svelte-grid';
-import ComponentEditor from './ComponentEditor.svelte';
+<script>import { getContext, afterUpdate, setContext } from 'svelte';
+import Grid from '@windmill-labs/svelte-grid';
 import { classNames } from '../../../utils';
 import { columnConfiguration, disableDrag, enableDrag, isFixed, toggleFixed } from '../gridUtils';
+import { twMerge } from 'tailwind-merge';
 import RecomputeAllComponents from './RecomputeAllComponents.svelte';
+import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
+import Component from './component/Component.svelte';
+import { deepEqual } from 'fast-equals';
+import { push } from '../../../history';
+import { expandGriditem, findGridItem } from './appUtils';
 export let policy;
-const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents, lazyGrid, summary } = getContext('AppEditorContext');
+const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents, summary, focusedGrid, parentWidth, breakpoint } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
 // The drag is disabled when the user is connecting an input
+// or when the user is previewing the app
+// or when the focused grid is a subgrid
 $: setAllDrags($mode === 'preview' || $connectingInput.opened);
 function setAllDrags(enable) {
-    if (enable) {
-        $app.grid.map((gridItem) => disableDrag(gridItem));
-    }
-    else {
-        $app.grid.map((gridItem) => enableDrag(gridItem));
-    }
+    const fct = enable ? disableDrag : enableDrag;
+    $app.grid.map((gridItem) => {
+        const disabledGridItem = fct(gridItem);
+        if (disabledGridItem?.data?.subGrids) {
+            disabledGridItem.data.subGrids = disabledGridItem.data.subGrids.map((subgrid) => subgrid?.map((subgridItem) => fct(subgridItem)) ?? []);
+        }
+        return disabledGridItem;
+    });
+    Object.values($app.subgrids ?? {}).map((subgrid) => subgrid?.map((subgridItem) => fct(subgridItem)) ?? []);
 }
 function removeGridElement(component) {
     if (component) {
@@ -45,111 +56,157 @@ function removeGridElement(component) {
     }
 }
 function selectComponent(id) {
+    // Component selection is handled manually in the Map component (pointerdown
+    // event propagation is stopped to enable paning).
+    // Update the 'selectComponent()' function as well when this is updated.
     if (!$connectingInput.opened) {
         $selectedComponent = id;
-    }
-}
-$: $app.grid && recomputeLazyGrid();
-let intervalId = undefined;
-function recomputeLazyGrid() {
-    {
-        if (intervalId) {
-            clearTimeout(intervalId);
-        }
-        intervalId = setTimeout(() => {
-            lazyGrid.set($app.grid);
-            intervalId = undefined;
-        }, 100);
+        $focusedGrid = undefined;
     }
 }
 let pointerdown = false;
+let lastapp = undefined;
 const onpointerdown = () => {
-    pointerdown = true;
+    if (history) {
+        lastapp = JSON.parse(JSON.stringify($app));
+        pointerdown = true;
+    }
 };
 const onpointerup = () => {
-    pointerdown = false;
+    if (history) {
+        pointerdown = false;
+        if (!deepEqual(lastapp, $app)) {
+            push(history, lastapp, false, true);
+        }
+    }
 };
+afterUpdate(() => {
+    if ($selectedComponent) {
+        const parents = document.querySelectorAll('.svlt-grid-item');
+        parents.forEach((parent) => {
+            const hasActiveChild = !!parent.querySelector('.active-grid-item');
+            if (hasActiveChild) {
+                parent.style.setProperty('z-index', '100');
+            }
+            else {
+                parent.style.removeProperty('z-index');
+            }
+        });
+    }
+});
 </script>
 
-<div class="pb-2 relative z-20">
+<div class="relative w-full z-20 overflow-visible">
 	<div
-		class="w-full flex justify-between border-b {$connectingInput?.opened
+		class="w-full sticky top-0 flex justify-between border-b {$connectingInput?.opened
 			? ''
-			: 'bg-gray-50 '}px-4 py-2 items-center gap-4"
+			: 'bg-gray-50 '} px-4 py-1 items-center gap-4"
+		style="z-index: 1000;"
 	>
 		<h2 class="truncate">{$summary}</h2>
 		{#if !$connectingInput.opened}
 			<RecomputeAllComponents />
 		{/if}
-		<div class="text-2xs text-gray-600"
-			>{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}</div
-		>
+		<div class="text-2xs text-gray-600">
+			{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
+		</div>
 	</div>
+
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
-		class="px-4 pt-4 {$connectingInput?.opened ? '' : ''}"
+		style={$app.css?.['app']?.['grid']?.style}
+		class={twMerge('px-4 pt-4 pb-2 overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
 		on:pointerdown={onpointerdown}
 		on:pointerleave={onpointerup}
 		on:pointerup={onpointerup}
+		on:click={() => {
+			$selectedComponent = undefined
+			$focusedGrid = undefined
+		}}
+		bind:clientWidth={$parentWidth}
 	>
-		<Grid
-			bind:items={$app.grid}
-			let:dataItem
-			rowHeight={36}
-			cols={columnConfiguration}
-			fastStart={true}
-			gap={[4, 2]}
-		>
-			{#each $lazyGrid as gridComponent (gridComponent.id)}
-				{#if gridComponent.data.id === dataItem.data.id}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					{#if $connectingInput.opened}
+		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
+			<Grid
+				onTopId={$selectedComponent}
+				fillSpace={false}
+				bind:items={$app.grid}
+				let:dataItem
+				rowHeight={36}
+				cols={columnConfiguration}
+				fastStart={true}
+				gap={[4, 2]}
+			>
+				{#each $app.grid as gridComponent (gridComponent.id)}
+					{#if gridComponent?.data?.id && gridComponent?.data?.id === dataItem?.data?.id}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						{#if $connectingInput.opened}
 							<div
 								on:pointerenter={() => ($connectingInput.hoveredComponent = gridComponent.data.id)}
 								on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
-								class="absolute  w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
+								class="absolute w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
 							/>
+							<div
+								style="transform: translate(-50%, -50%);"
+								class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
+							>
+								{dataItem.data.id}
+							</div>
 						{/if}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<div
-							style="transform: translate(-50%, -50%);"
-							class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
-							>{dataItem.data.id}</div
+							on:click|stopPropagation
+							on:pointerdown={() => selectComponent(dataItem.data.id)}
+							class={classNames(
+								'h-full w-full center-center',
+								$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
+								gridComponent.data.card ? 'border border-gray-100' : ''
+							)}
 						>
+							<Component
+								render={true}
+								{pointerdown}
+								component={gridComponent.data}
+								selected={$selectedComponent === dataItem.data.id}
+								locked={isFixed(gridComponent)}
+								on:delete={() => removeGridElement(gridComponent.data)}
+								on:lock={() => {
+									const gridItem = findGridItem($app, gridComponent.data.id)
+									if (gridItem) {
+										toggleFixed(gridItem)
+									}
+								}}
+								on:expand={() => {
+									push(history, $app)
+									expandGriditem($app.grid, gridComponent, $breakpoint)
+									$app = { ...$app }
+								}}
+							/>
+						</div>
 					{/if}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						on:pointerdown={() => {
-							selectComponent(dataItem.data.id)
-						}}
-						class={classNames(
-							'h-full w-full flex justify-center align-center items-center',
-							gridComponent.data.card ? 'border border-gray-100' : ''
-						)}
-					>
-						<ComponentEditor
-							{pointerdown}
-							bind:component={gridComponent.data}
-							selected={$selectedComponent === dataItem.data.id}
-							locked={isFixed(gridComponent)}
-							on:delete={() => removeGridElement(gridComponent.data)}
-							on:lock={() => {
-								let fComponent = $app.grid.find((c) => c.id === gridComponent.id)
-								if (fComponent) {
-									fComponent = toggleFixed(fComponent)
-								}
-							}}
-						/>
-					</div>
-				{/if}
-			{/each}
-		</Grid>
+				{/each}
+			</Grid>
+		</div>
 	</div>
 </div>
 
-<style>
+{#if $app.hiddenInlineScripts}
+	{#each $app.hiddenInlineScripts as script, index}
+		{#if script}
+			<HiddenComponent
+				id={`bg_${index}`}
+				inlineScript={script.inlineScript}
+				name={script.name}
+				fields={script.fields}
+				bind:staticOutputs={$staticOutputs[`bg_${index}`]}
+			/>
+		{/if}
+	{/each}
+{/if}
+
+<style global>
 	:global(.svlt-grid-shadow) {
 		/* Back shadow */
-		background: rgb(147 197 253) !important;
+		background: #93c4fdd0 !important;
 	}
 	:global(.svlt-grid-active) {
 		opacity: 1 !important;

package/components/apps/editor/GridEditor.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         policy: Policy;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/editor/GridPanel.svelte

@@ -0,0 +1,29 @@
+<script>import { getContext } from 'svelte';
+import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
+const { selectedComponent } = getContext('AppViewerContext');
+export let gridItems;
+export let parent;
+</script>
+
+{#each gridItems as gridItem, i (gridItem?.data?.id ?? i)}
+	{#if gridItem?.data?.id === $selectedComponent}
+		<ComponentPanel {parent} bind:component={gridItem.data} />
+	{:else if gridItem?.data?.type === 'tablecomponent'}
+		{#each gridItem.data.actionButtons as actionButton (actionButton.id)}
+			{#if actionButton.id === $selectedComponent}
+				<ComponentPanel
+					parent={undefined}
+					noGrid
+					rowColumns
+					bind:component={actionButton}
+					duplicateMoveAllowed={false}
+					onDelete={() => {
+						gridItem.data.actionButtons = gridItem.data.actionButtons.filter(
+							(c) => c.id !== actionButton.id
+						)
+					}}
+				/>
+			{/if}
+		{/each}
+	{/if}
+{/each}

package/components/apps/editor/GridPanel.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GridItem } from '../types';
+declare const __propDef: {
+    props: {
+        gridItems: GridItem[];
+        parent: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridPanelProps = typeof __propDef.props;
+export type GridPanelEvents = typeof __propDef.events;
+export type GridPanelSlots = typeof __propDef.slots;
+export default class GridPanel extends SvelteComponentTyped<GridPanelProps, GridPanelEvents, GridPanelSlots> {
+}
+export {};

package/components/apps/editor/RecomputeAllComponents.svelte

@@ -2,7 +2,7 @@
 import { ChevronDown, RefreshCw } from 'lucide-svelte';
 import { getContext, onMount } from 'svelte';
 import Button from '../../common/button/Button.svelte';
-const { runnableComponents } = getContext('AppEditorContext');
+const { runnableComponents } = getContext('AppViewerContext');
 let loading = false;
 let timeout = undefined;
 let interval = undefined;
@@ -58,17 +58,19 @@ onMount(() => {
 <div class="flex items-center">
 	<Button
 		on:click={() => onClick()}
-		color="{timeout ? 'blue' : 'light'}"
-		variant="{timeout ? 'contained' : 'border'}"
+		color={timeout ? 'blue' : 'light'}
+		variant={timeout ? 'contained' : 'border'}
 		size="xs"
 		btnClasses="!rounded-r-none {timeout ? '!border !border-blue-500' : ''}"
-		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval ? `every ${interval / 1000} seconds` : 'once'}"
+		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
+			? `every ${interval / 1000} seconds`
+			: 'once'}"
 	>
 		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} />
 	</Button>
 	<Dropdown
 		btnClasses="!rounded-l-none !border-l-0 min-w-[4rem] !px-2"
-		color="{timeout ? 'blue' : 'light'}"
+		color={timeout ? 'blue' : 'light'}
 		variant="border"
 		dropdownItems={[
 			{
@@ -78,7 +80,7 @@ onMount(() => {
 			...[1, 2, 3, 4, 5, 6].map((i) => ({
 				displayName: `Every ${i * 5} seconds`,
 				action: () => setInter(i * 5000)
-			})),
+			}))
 		]}
 	>
 		<span class="grow text center">{interval ? `${interval / 1000}s` : 'once'}</span>

package/components/apps/editor/SettingsPanel.svelte

@@ -1,13 +1,31 @@
 <script>import { getContext } from 'svelte';
-import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
-import TablePanel from './TablePanel.svelte';
-const { selectedComponent, lazyGrid } = getContext('AppEditorContext');
+import GridPanel from './GridPanel.svelte';
+import PanelSection from './settingsPanel/common/PanelSection.svelte';
+import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
+const { selectedComponent, app, stateId } = getContext('AppViewerContext');
 </script>
 
-{#each $lazyGrid as gridItem (gridItem.data.id)}
-	{#if gridItem.data.id === $selectedComponent}
-		<ComponentPanel bind:component={gridItem.data} />
-	{:else if gridItem.data.type === 'tablecomponent'}
-		<TablePanel bind:component={gridItem.data} />
+{#if $app.grid}
+	<GridPanel parent={undefined} bind:gridItems={$app.grid} />
+{/if}
+
+{#if $app.subgrids}
+	{#each Object.keys($app.subgrids ?? {}) as key (key)}
+		<GridPanel parent={key} bind:gridItems={$app.subgrids[key]} />
+	{/each}
+{/if}
+
+{#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
+	{#if $selectedComponent === `bg_${index}`}
+		<PanelSection title={`Background script inputs`}>
+			{#key $stateId}
+				<InputsSpecsEditor
+					id={`bg_${index}`}
+					shouldCapitalize={false}
+					bind:inputSpecs={script.fields}
+					userInputEnabled={false}
+				/>
+			{/key}
+		</PanelSection>
 	{/if}
 {/each}