windmill-components 1.77.0 → 1.78.0

package/components/apps/components/inputs/AppFileInput.svelte

@@ -1,18 +1,20 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { FileInput } from '../../../common';
+import { initOutput } from '../../editor/appUtils';
 import { concatCustomCss } from '../../utils';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
-export const staticOutputs = ['result'];
 export let customCss = undefined;
 export let render;
 const { app, worldStore } = getContext('AppViewerContext');
 let acceptedFileTypes = undefined;
 let allowMultiple = undefined;
 let text = undefined;
-$: outputs = $worldStore?.outputsById[id];
+let outputs = initOutput($worldStore, id, {
+    result: []
+});
 // Receives Base64 encoded strings from the input component
 async function handleChange(files) {
     outputs?.result.set(files);

package/components/apps/components/inputs/AppFileInput.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
-        staticOutputs?: string[] | undefined;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;
     };
@@ -18,6 +17,5 @@ export type AppFileInputProps = typeof __propDef.props;
 export type AppFileInputEvents = typeof __propDef.events;
 export type AppFileInputSlots = typeof __propDef.slots;
 export default class AppFileInput extends SvelteComponentTyped<AppFileInputProps, AppFileInputEvents, AppFileInputSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/AppMultiSelect.svelte

@@ -4,7 +4,7 @@ import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults';
-export const staticOutputs = ['result'];
+import { initOutput } from '../../editor/appUtils';
 export let id;
 export let configuration;
 export let horizontalAlignment = undefined;
@@ -14,7 +14,9 @@ export let render;
 const { app, worldStore, connectingInput, selectedComponent } = getContext('AppViewerContext');
 let items;
 let placeholder = 'Select an item';
-$: outputs = $worldStore?.outputsById[id];
+let outputs = initOutput($worldStore, id, {
+    result: []
+});
 // $: outputs && handleOutputs()
 // function handleOutputs() {
 // 	value = outputs.result.peak()

package/components/apps/components/inputs/AppMultiSelect.svelte.d.ts

@@ -3,7 +3,6 @@ import type { AppInput } from '../../inputType';
 import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
-        staticOutputs?: string[] | undefined;
         id: string;
         configuration: Record<string, AppInput>;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
@@ -22,6 +21,5 @@ export type AppMultiSelectProps = typeof __propDef.props;
 export type AppMultiSelectEvents = typeof __propDef.events;
 export type AppMultiSelectSlots = typeof __propDef.slots;
 export default class AppMultiSelect extends SvelteComponentTyped<AppMultiSelectProps, AppMultiSelectEvents, AppMultiSelectSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/AppNumberInput.svelte

@@ -1,12 +1,12 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../editor/appUtils';
 import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
 export let verticalAlignment = undefined;
-export const staticOutputs = ['result'];
 export let customCss = undefined;
 export let render;
 const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
@@ -16,7 +16,9 @@ let value = undefined;
 let min = undefined;
 let max = undefined;
 let step = 1;
-$: outputs = $worldStore?.outputsById[id];
+let outputs = initOutput($worldStore, id, {
+    result: undefined
+});
 $: handleDefault(defaultValue);
 $: outputs?.result.set(value);
 function handleDefault(defaultValue) {

package/components/apps/components/inputs/AppNumberInput.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         id: string;
         configuration: Record<string, AppInput>;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        staticOutputs?: string[] | undefined;
         customCss?: ComponentCustomCSS<'input'> | undefined;
         render: boolean;
     };
@@ -21,6 +20,5 @@ export type AppNumberInputProps = typeof __propDef.props;
 export type AppNumberInputEvents = typeof __propDef.events;
 export type AppNumberInputSlots = typeof __propDef.slots;
 export default class AppNumberInput extends SvelteComponentTyped<AppNumberInputProps, AppNumberInputEvents, AppNumberInputSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/AppRangeInput.svelte

@@ -4,10 +4,10 @@ import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import { concatCustomCss } from '../../utils';
 import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../editor/appUtils';
 export let id;
 export let configuration;
 export let verticalAlignment = undefined;
-export const staticOutputs = ['result'];
 export let customCss = undefined;
 export let render;
 const { app, worldStore } = getContext('AppViewerContext');
@@ -16,7 +16,10 @@ let max = 42;
 let step = 1;
 let slider;
 let values = [0, 0];
-$: outputs = $worldStore?.outputsById[id];
+let outputs = initOutput($worldStore, id, {
+    result: null
+});
+console.log('reset');
 $: outputs?.result.set(values);
 $: css = concatCustomCss($app.css?.rangecomponent, customCss);
 let lastStyle = undefined;

package/components/apps/components/inputs/AppRangeInput.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         id: string;
         configuration: Record<string, AppInput>;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        staticOutputs?: string[] | undefined;
         customCss?: ComponentCustomCSS<'handles' | 'bar' | 'limits' | 'values'> | undefined;
         render: boolean;
     };
@@ -21,6 +20,5 @@ export type AppRangeInputProps = typeof __propDef.props;
 export type AppRangeInputEvents = typeof __propDef.events;
 export type AppRangeInputSlots = typeof __propDef.slots;
 export default class AppRangeInput extends SvelteComponentTyped<AppRangeInputProps, AppRangeInputEvents, AppRangeInputSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/AppSelect.svelte

@@ -4,7 +4,7 @@ import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults';
-export const staticOutputs = ['result'];
+import { initOutput } from '../../editor/appUtils';
 export let id;
 export let configuration;
 export let horizontalAlignment = undefined;
@@ -14,7 +14,9 @@ export let render;
 const { app, worldStore, connectingInput, selectedComponent } = getContext('AppViewerContext');
 let items;
 let placeholder = 'Select an item';
-$: outputs = $worldStore?.outputsById[id];
+let outputs = initOutput($worldStore, id, {
+    result: undefined
+});
 let value = outputs?.result.peak();
 $: items && handleItems();
 let listItems = [];

package/components/apps/components/inputs/AppSelect.svelte.d.ts

@@ -3,7 +3,6 @@ import type { AppInput } from '../../inputType';
 import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
-        staticOutputs?: string[] | undefined;
         id: string;
         configuration: Record<string, AppInput>;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
@@ -22,6 +21,5 @@ export type AppSelectProps = typeof __propDef.props;
 export type AppSelectEvents = typeof __propDef.events;
 export type AppSelectSlots = typeof __propDef.slots;
 export default class AppSelect extends SvelteComponentTyped<AppSelectProps, AppSelectEvents, AppSelectSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/AppSliderInputs.svelte

@@ -4,10 +4,10 @@ import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import { twMerge } from 'tailwind-merge';
 import { concatCustomCss } from '../../utils';
+import { initOutput } from '../../editor/appUtils';
 export let id;
 export let configuration;
 export let verticalAlignment = undefined;
-export const staticOutputs = ['result'];
 export let customCss = undefined;
 export let render;
 const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
@@ -15,7 +15,9 @@ let min = 0;
 let max = 42;
 let step = 1;
 let slider;
-$: outputs = $worldStore?.outputsById[id];
+let outputs = initOutput($worldStore, id, {
+    result: 0 || null
+});
 let values = [outputs?.result.peak() ?? 0];
 $: values && handleValues();
 function handleValues() {

package/components/apps/components/inputs/AppSliderInputs.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         id: string;
         configuration: Record<string, AppInput>;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        staticOutputs?: string[] | undefined;
         customCss?: ComponentCustomCSS<'handle' | 'limits' | 'value' | 'bar'> | undefined;
         render: boolean;
     };
@@ -19,6 +18,5 @@ export type AppSliderInputsProps = typeof __propDef.props;
 export type AppSliderInputsEvents = typeof __propDef.events;
 export type AppSliderInputsSlots = typeof __propDef.slots;
 export default class AppSliderInputs extends SvelteComponentTyped<AppSliderInputsProps, AppSliderInputsEvents, AppSliderInputsSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/AppTextInput.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../editor/appUtils';
 import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
@@ -7,7 +8,6 @@ export let id;
 export let configuration;
 export let inputType = 'text';
 export let verticalAlignment = undefined;
-export const staticOutputs = ['result'];
 export let customCss = undefined;
 export let appCssKey = 'textinputcomponent';
 export let render;
@@ -15,9 +15,11 @@ const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
 let placeholder = undefined;
 let defaultValue = undefined;
 let value = undefined;
-$: outputs = $worldStore?.outputsById[id];
+let outputs = initOutput($worldStore, id, {
+    result: ''
+});
 $: handleDefault(defaultValue);
-$: outputs?.result.set(value);
+$: outputs?.result.set(value ?? '');
 function handleDefault(defaultValue) {
     value = defaultValue;
 }

package/components/apps/components/inputs/AppTextInput.svelte.d.ts

@@ -7,7 +7,6 @@ declare const __propDef: {
         configuration: Record<string, AppInput>;
         inputType?: string | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        staticOutputs?: string[] | undefined;
         customCss?: ComponentCustomCSS<'input'> | undefined;
         appCssKey?: "textinputcomponent" | "passwordinputcomponent" | "emailinputcomponent" | undefined;
         render: boolean;
@@ -23,6 +22,5 @@ export type AppTextInputProps = typeof __propDef.props;
 export type AppTextInputEvents = typeof __propDef.events;
 export type AppTextInputSlots = typeof __propDef.slots;
 export default class AppTextInput extends SvelteComponentTyped<AppTextInputProps, AppTextInputEvents, AppTextInputSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -1,4 +1,5 @@
-<script>import { getContext } from 'svelte';
+<script>import { initOutput } from '../../../editor/appUtils';
+import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { concatCustomCss } from '../../../utils';
 import AlignWrapper from '../../helpers/AlignWrapper.svelte';
@@ -7,10 +8,12 @@ import CurrencyInput from './CurrencyInput.svelte';
 export let id;
 export let configuration;
 export let verticalAlignment = undefined;
-export const staticOutputs = ['result'];
 export let customCss = undefined;
 export let render;
 const { app, worldStore } = getContext('AppViewerContext');
+initOutput($worldStore, id, {
+    result: undefined
+});
 let defaultValue = undefined;
 let isNegativeAllowed = undefined;
 let currency = undefined;

package/components/apps/components/inputs/currency/AppCurrencyInput.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         id: string;
         configuration: Record<string, AppInput>;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        staticOutputs?: string[] | undefined;
         customCss?: ComponentCustomCSS<'input'> | undefined;
         render: boolean;
     };
@@ -19,6 +18,5 @@ export type AppCurrencyInputProps = typeof __propDef.props;
 export type AppCurrencyInputEvents = typeof __propDef.events;
 export type AppCurrencyInputSlots = typeof __propDef.slots;
 export default class AppCurrencyInput extends SvelteComponentTyped<AppCurrencyInputProps, AppCurrencyInputEvents, AppCurrencyInputSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/layout/AppContainer.svelte

@@ -6,7 +6,6 @@ export let configuration;
 export let componentContainerHeight;
 export let customCss = undefined;
 export let render;
-export const staticOutputs = [];
 const { app, focusedGrid, selectedComponent } = getContext('AppViewerContext');
 function onFocus() {
     $focusedGrid = {

package/components/apps/components/layout/AppContainer.svelte.d.ts

@@ -8,7 +8,6 @@ declare const __propDef: {
         componentContainerHeight: number;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,6 +18,5 @@ export type AppContainerProps = typeof __propDef.props;
 export type AppContainerEvents = typeof __propDef.events;
 export type AppContainerSlots = typeof __propDef.slots;
 export default class AppContainer extends SvelteComponentTyped<AppContainerProps, AppContainerEvents, AppContainerSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/layout/AppTabs.svelte

@@ -11,16 +11,13 @@ export let tabs;
 export let customCss = undefined;
 export let render;
 export let initializing = configuration.tabsKind != undefined;
-export const staticOutputs = ['selectedTabIndex'];
 const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl } = getContext('AppViewerContext');
 let selected = tabs[0];
 let kind = undefined;
 let tabHeight = 0;
-$: outputs = $worldStore
-    ? initOutput($worldStore, id, {
-        selectedTabIndex: 0
-    })
-    : undefined;
+let outputs = initOutput($worldStore, id, {
+    selectedTabIndex: 0
+});
 function handleTabSelection() {
     const selectedIndex = tabs?.indexOf(selected);
     outputs?.selectedTabIndex.set(selectedIndex, true);

package/components/apps/components/layout/AppTabs.svelte.d.ts

@@ -10,7 +10,6 @@ declare const __propDef: {
         customCss?: ComponentCustomCSS<'tabRow' | 'tabs' | 'selectedTab' | 'container'> | undefined;
         render: boolean;
         initializing?: boolean | undefined;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         pointerdown: PointerEvent;
@@ -23,6 +22,5 @@ export type AppTabsProps = typeof __propDef.props;
 export type AppTabsEvents = typeof __propDef.events;
 export type AppTabsSlots = typeof __propDef.slots;
 export default class AppTabs extends SvelteComponentTyped<AppTabsProps, AppTabsEvents, AppTabsSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/editor/AppComponentInput.svelte

@@ -25,7 +25,8 @@ export let resourceOnly = false;
 				id={component.id}
 				shouldCapitalize={false}
 				bind:inputSpecs={component.componentInput.fields}
-				userInputEnabled={component.type !== 'buttoncomponent'}
+				userInputEnabled={component.type === 'formcomponent' ||
+					component.type === 'formbuttoncomponent'}
 				{resourceOnly}
 			/>
 		{/if}

package/components/apps/editor/AppEditor.svelte

@@ -33,8 +33,6 @@ export let policy;
 export let summary;
 export let fromHub = false;
 const appStore = writable(app);
-const worldStore = writable(undefined);
-const staticOutputs = writable({});
 const selectedComponent = writable(undefined);
 const mode = writable(initialMode);
 const breakpoint = writable('lg');
@@ -49,9 +47,14 @@ const runnableComponents = writable({});
 const errorByComponent = writable({});
 const focusedGrid = writable(undefined);
 const pickVariableCallback = writable(undefined);
+let context = {
+    email: $userStore?.email,
+    username: $userStore?.username,
+    query: Object.fromEntries($page.url.searchParams.entries()),
+    hash: $page.url.hash
+};
 setContext('AppViewerContext', {
-    worldStore,
-    staticOutputs,
+    worldStore: buildWorld(context),
     app: appStore,
     summary: summaryStore,
     selectedComponent,
@@ -76,7 +79,8 @@ setContext('AppViewerContext', {
 });
 setContext('AppEditorContext', {
     history,
-    pickVariableCallback
+    pickVariableCallback,
+    ontextfocus: writable(undefined)
 });
 let timeout = undefined;
 $: $appStore && saveDraft();
@@ -95,17 +99,10 @@ let mounted = false;
 onMount(() => {
     mounted = true;
 });
-let context = {
-    email: $userStore?.email,
-    username: $userStore?.username,
-    query: Object.fromEntries($page.url.searchParams.entries()),
-    hash: $page.url.hash
-};
 function hashchange(e) {
     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';
 let selectedTab = 'insert';

package/components/apps/editor/AppPreview.svelte

@@ -1,10 +1,15 @@
-<script>import { onMount, setContext } from 'svelte';
+<script>import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { buildWorld } from '../rx';
-import GridEditor from './GridEditor.svelte';
 import { classNames } from '../../../utils';
 import Button from '../../common/button/Button.svelte';
 import { Unlock } from 'lucide-svelte';
+import RecomputeAllComponents from './RecomputeAllComponents.svelte';
+import GridViewer from './GridViewer.svelte';
+import { Component } from './component';
+import { twMerge } from 'tailwind-merge';
+import { columnConfiguration } from '../gridUtils';
+import { HiddenComponent } from '../components';
 export let app;
 export let appPath;
 export let breakpoint;
@@ -16,8 +21,6 @@ export let context;
 export let noBackend = false;
 export let isLocked = false;
 const appStore = writable(app);
-const worldStore = writable(undefined);
-const staticOutputs = writable({});
 const selectedComponent = writable(undefined);
 const mode = writable('preview');
 const connectingInput = writable({
@@ -26,9 +29,9 @@ const connectingInput = writable({
     hoveredComponent: undefined
 });
 const runnableComponents = writable({});
+const parentWidth = writable(0);
 setContext('AppViewerContext', {
-    worldStore,
-    staticOutputs,
+    worldStore: buildWorld(context),
     app: appStore,
     summary: writable(summary),
     selectedComponent,
@@ -47,24 +50,20 @@ setContext('AppViewerContext', {
     openDebugRun: writable(undefined),
     focusedGrid: writable(undefined),
     stateId: writable(0),
-    parentWidth: writable(0),
+    parentWidth,
     state: writable({}),
     componentControl: writable({})
 });
 setContext('AppEditorContext', {
     history: undefined,
-    pickVariableCallback: writable(undefined)
-});
-let mounted = false;
-onMount(() => {
-    mounted = true;
+    pickVariableCallback: writable(undefined),
+    ontextfocus: writable(undefined)
 });
 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>
@@ -80,9 +79,48 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 	>
 		{#if $appStore.grid}
 			<div class={classNames('mx-auto', width)}>
-				<GridEditor {policy} />
+				<div
+					class="w-full sticky top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
+					style="z-index: 1000;"
+				>
+					<h2 class="truncate">{summary}</h2>
+					<RecomputeAllComponents />
+					<div class="text-2xs text-gray-600">
+						{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
+					</div>
+				</div>
 			</div>
 		{/if}
+		<div
+			style={app.css?.['app']?.['grid']?.style}
+			class={twMerge('px-4 pt-4 pb-2 overflow-visible', app.css?.['app']?.['grid']?.class ?? '')}
+			bind:clientWidth={$parentWidth}
+		>
+			<div>
+				<GridViewer
+					onTopId={$selectedComponent}
+					items={app.grid}
+					let:dataItem
+					rowHeight={36}
+					cols={columnConfiguration}
+					gap={[4, 2]}
+				>
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						class={'h-full w-full center-center'}
+						on:pointerdown={() => ($selectedComponent = dataItem.data.id)}
+					>
+						<Component
+							render={true}
+							pointerdown={false}
+							component={dataItem.data}
+							selected={false}
+							locked={true}
+						/>
+					</div>
+				</GridViewer>
+			</div>
+		</div>
 	</div>
 
 	{#if isLocked}
@@ -98,3 +136,17 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 		</div>
 	{/if}
 </div>
+
+{#if app.hiddenInlineScripts}
+	{#each app.hiddenInlineScripts as script, index}
+		{#if script}
+			<HiddenComponent
+				id={`bg_${index}`}
+				inlineScript={script.inlineScript}
+				name={script.name}
+				fields={script.fields}
+				autoRefresh={script.autoRefresh ?? false}
+			/>
+		{/if}
+	{/each}
+{/if}

package/components/apps/editor/GridEditor.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext, afterUpdate } from 'svelte';
 import { classNames } from '../../../utils';
-import { columnConfiguration, disableDrag, enableDrag, isFixed, toggleFixed } from '../gridUtils';
+import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
 import { twMerge } from 'tailwind-merge';
 import RecomputeAllComponents from './RecomputeAllComponents.svelte';
 import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
@@ -9,25 +9,9 @@ import { deepEqual } from 'fast-equals';
 import { push } from '../../../history';
 import { expandGriditem, findGridItem } from './appUtils';
 import Grid from '../svelte-grid/Grid.svelte';
-import { settableOutput } from '../rx';
 export let policy;
-const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents, summary, focusedGrid, parentWidth, breakpoint } = getContext('AppViewerContext');
+const { selectedComponent, app, mode, connectingInput, 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) {
-    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) {
         $app.grid = $app.grid.filter((gridComponent) => {
@@ -48,20 +32,16 @@ function removeGridElement(component) {
             }
             return gridComponent.data.id !== component?.id;
         });
-        // Delete static inputs
-        delete $staticOutputs[component.id];
-        $staticOutputs = $staticOutputs;
         delete $runnableComponents[component.id];
         $runnableComponents = $runnableComponents;
         $selectedComponent = undefined;
     }
 }
 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;
+        if ($selectedComponent !== id) {
+            $selectedComponent = id;
+        }
         $focusedGrid = undefined;
     }
 }
@@ -129,9 +109,9 @@ afterUpdate(() => {
 		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
 			<Grid
 				onTopId={$selectedComponent}
-				fillSpace={false}
 				items={$app.grid}
 				on:redraw={(e) => {
+					push(history, $app)
 					$app.grid = e.detail
 				}}
 				let:dataItem
@@ -199,7 +179,6 @@ afterUpdate(() => {
 				name={script.name}
 				fields={script.fields}
 				autoRefresh={script.autoRefresh ?? false}
-				bind:staticOutputs={$staticOutputs[`bg_${index}`]}
 			/>
 		{/if}
 	{/each}