windmill-components 1.75.0 → 1.78.0

package/components/apps/editor/AppEditorHeader.svelte

@@ -9,6 +9,7 @@ import ToggleButtonGroup from '../../common/toggleButton/ToggleButtonGroup.svelt
 import DisplayResult from '../../DisplayResult.svelte';
 import Dropdown from '../../Dropdown.svelte';
 import FlowProgressBar from '../../flows/FlowProgressBar.svelte';
+import { idMutex } from '../../flows/flowStateUtils';
 import FlowStatusViewer from '../../FlowStatusViewer.svelte';
 import JobArgs from '../../JobArgs.svelte';
 import LogViewer from '../../LogViewer.svelte';
@@ -173,7 +174,11 @@ let job = undefined;
 let testIsLoading = false;
 $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 $: hasErrors = Object.keys($errorByComponent).length > 0;
+let lock = false;
 function onKeyDown(event) {
+    if (lock)
+        return;
+    lock = true;
     switch (event.key) {
         case 'Z':
             if (event.ctrlKey) {
@@ -212,6 +217,7 @@ function onKeyDown(event) {
         // 	break
         // }
     }
+    lock = false;
 }
 </script>
 
@@ -417,12 +423,12 @@ function onKeyDown(event) {
 				<ToggleButton position="left" value="dnd" size="xs">
 					<div class="inline-flex gap-1 items-center">
 						<Pencil size={14} />
-						<span class="hidden md:inline">Editor</span>
+						<span class="hidden lg:inline">Editor</span>
 					</div>
 				</ToggleButton>
 				<ToggleButton position="right" value="preview" size="xs">
 					<div class="inline-flex gap-1 items-center">
-						<Eye size={14} /> <span class="hidden md:inline">Preview</span>
+						<Eye size={14} /> <span class="hidden lg:inline">Preview</span>
 					</div>
 				</ToggleButton>
 			</ToggleButtonGroup>
@@ -439,42 +445,46 @@ function onKeyDown(event) {
 		</div>
 
 		<div class="hidden lg:block">
-			<ToggleButtonGroup bind:selected={$app.fullscreen}>
-				<ToggleButton position="left" value={false} size="xs">
-					<div class="flex gap-1 justify-start items-center">
-						<AlignHorizontalSpaceAround size={14} />
-						<Tooltip light class="mb-0.5">
-							The max width is 1168px and the content stay centered instead of taking the full page
-							width
-						</Tooltip>
-					</div>
-				</ToggleButton>
-				<ToggleButton position="right" value={true} size="xs">
-					<Expand size={14} />
-				</ToggleButton>
-			</ToggleButtonGroup>
+			{#if $app}
+				<ToggleButtonGroup bind:selected={$app.fullscreen}>
+					<ToggleButton position="left" value={false} size="xs">
+						<div class="flex gap-1 justify-start items-center">
+							<AlignHorizontalSpaceAround size={14} />
+							<Tooltip light class="mb-0.5">
+								The max width is 1168px and the content stay centered instead of taking the full
+								page width
+							</Tooltip>
+						</div>
+					</ToggleButton>
+					<ToggleButton position="right" value={true} size="xs">
+						<Expand size={14} />
+					</ToggleButton>
+				</ToggleButtonGroup>
+			{/if}
 		</div>
 	</div>
 	{#if $focusedGrid !== undefined}
-		<Badge color="indigo">
-			<div class="flex flex-row gap-2 justify-center items-center">
-				<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
-				<button
-					on:click={() => {
-						$selectedComponent = undefined
-						$focusedGrid = undefined
-					}}
-				>
-					<X size={14} />
-				</button>
-			</div>
-		</Badge>
+		<div class="hidden lg:block">
+			<Badge color="indigo">
+				<div class="flex flex-row gap-2 justify-center items-center">
+					<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
+					<button
+						on:click={() => {
+							$selectedComponent = undefined
+							$focusedGrid = undefined
+						}}
+					>
+						<X size={14} />
+					</button>
+				</div>
+			</Badge>
+		</div>
 	{/if}
 
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px] hidden lg:block"
+			btnClasses="hidden lg:block"
 			dropdownItems={[
 				{
 					displayName: 'JSON',
@@ -499,9 +509,7 @@ function onKeyDown(event) {
 					}
 				}
 			]}
-		>
-			<MoreVertical size={20} />
-		</Dropdown>
+		/>
 		<span class="hidden md:inline">
 			<Button on:click={() => (inputsDrawerOpen = true)} color="light" size="xs" variant="border">
 				<span class="flex gap-2">
@@ -518,7 +526,7 @@ function onKeyDown(event) {
 				variant="border"
 				startIcon={{ icon: faBug }}
 			>
-				<span class="hidden md:inline">Debug Runs</span>
+				<span class="hidden xl:inline">Debug Runs</span>
 			</Button>
 		</span>
 		<AppExportButton bind:this={appExport} />
@@ -529,7 +537,7 @@ function onKeyDown(event) {
 			variant="border"
 			startIcon={{ icon: faExternalLink }}
 		>
-			<span class="hidden md:inline">Publish</span>
+			<span class="hidden xl:inline">Publish</span>
 		</Button>
 		{#if appPath == ''}
 			<Button

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,23 +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,
-    componentControl: writable({}),
-    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>
@@ -79,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}
@@ -97,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/ComponentHeader.svelte

@@ -33,13 +33,14 @@ function openDebugRuns() {
 
 {#if pointerdown || selected || hover}
 	<button
-		title="Position locking"
+		title="Lock Position"
 		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-[2.5rem] z-50 cursor-pointer',
 			' hover:bg-gray-300',
 			selected ? 'bg-gray-200/80' : 'bg-gray-200/80'
 		)}
 		on:click={() => dispatch('lock')}
+		on:pointerdown|stopPropagation
 	>
 		{#if locked}
 			<Anchor aria-label="Unlock position" size={14} class="text-orange-500" />
@@ -55,6 +56,7 @@ function openDebugRuns() {
 			selected ? 'bg-gray-200/80' : 'bg-gray-200/80'
 		)}
 		on:click={() => dispatch('expand')}
+		on:pointerdown|stopPropagation
 	>
 		<Expand aria-label="Expand position" size={14} />
 	</button>

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         hover?: boolean | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
         mousedown: MouseEvent;
         lock: CustomEvent<any>;
         expand: CustomEvent<any>;

package/components/apps/editor/GridEditor.svelte

@@ -1,7 +1,6 @@
-<script>import { getContext, afterUpdate, setContext } from 'svelte';
-import Grid from '@windmill-labs/svelte-grid';
+<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,24 +8,10 @@ import Component from './component/Component.svelte';
 import { deepEqual } from 'fast-equals';
 import { push } from '../../../history';
 import { expandGriditem, findGridItem } from './appUtils';
+import Grid from '../svelte-grid/Grid.svelte';
 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) => {
@@ -47,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;
     }
 }
@@ -128,62 +109,62 @@ afterUpdate(() => {
 		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
 			<Grid
 				onTopId={$selectedComponent}
-				fillSpace={false}
-				bind:items={$app.grid}
+				items={$app.grid}
+				on:redraw={(e) => {
+					push(history, $app)
+					$app.grid = e.detail
+				}}
 				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"
-							/>
-							<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
-							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}
-				{/each}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				{#if $connectingInput.opened}
+					<div
+						on:pointerenter={() => ($connectingInput.hoveredComponent = dataItem.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"
+					/>
+					<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
+					on:click|stopPropagation
+					on:pointerdown={() => selectComponent(dataItem.data.id)}
+					class={classNames(
+						'h-full w-full center-center',
+						$selectedComponent === dataItem.data.id ? 'active-grid-item' : ''
+					)}
+				>
+					<Component
+						render={true}
+						{pointerdown}
+						component={dataItem.data}
+						selected={$selectedComponent === dataItem.data.id}
+						locked={isFixed(dataItem)}
+						on:delete={() => removeGridElement(dataItem.data)}
+						on:lock={() => {
+							const gridItem = findGridItem($app, dataItem.data.id)
+							if (gridItem) {
+								toggleFixed(gridItem)
+							}
+							$app = $app
+						}}
+						on:expand={() => {
+							push(history, $app)
+							$selectedComponent = dataItem.data.id
+							expandGriditem($app.grid, dataItem, $breakpoint)
+							$app = $app
+						}}
+					/>
+				</div>
 			</Grid>
 		</div>
 	</div>
@@ -197,7 +178,7 @@ afterUpdate(() => {
 				inlineScript={script.inlineScript}
 				name={script.name}
 				fields={script.fields}
-				bind:staticOutputs={$staticOutputs[`bg_${index}`]}
+				autoRefresh={script.autoRefresh ?? false}
 			/>
 		{/if}
 	{/each}

package/components/apps/editor/GridPanel.svelte

@@ -3,9 +3,10 @@ import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
 const { selectedComponent } = getContext('AppViewerContext');
 export let gridItems;
 export let parent;
+//$: sortedItems = gridItems.sort((a, b) => a.id.localeCompare - b.id)
 </script>
 
-{#each gridItems as gridItem, i (gridItem?.data?.id ?? i)}
+{#each gridItems as gridItem (gridItem.id)}
 	{#if gridItem?.data?.id === $selectedComponent}
 		<ComponentPanel {parent} bind:component={gridItem.data} />
 	{:else if gridItem?.data?.type === 'tablecomponent'}
@@ -18,6 +19,7 @@ export let parent;
 					bind:component={actionButton}
 					duplicateMoveAllowed={false}
 					onDelete={() => {
+						//@ts-ignore
 						gridItem.data.actionButtons = gridItem.data.actionButtons.filter(
 							(c) => c.id !== actionButton.id
 						)

package/components/apps/editor/GridViewer.svelte

@@ -0,0 +1,91 @@
+<script>import { onMount, createEventDispatcher } from 'svelte';
+import { getColumn, throttle } from '../svelte-grid/utils/other';
+import { getContainerHeight } from '../svelte-grid/utils/container';
+import { specifyUndefinedColumns } from '../svelte-grid/utils/item';
+const dispatch = createEventDispatcher();
+export let items;
+export let rowHeight;
+export let cols;
+export let gap = [10, 10];
+export let throttleUpdate = 100;
+export let onTopId = undefined;
+export let containerWidth = undefined;
+export let parentWidth = undefined;
+let getComputedCols;
+let container;
+$: [gapX, gapY] = gap;
+let xPerPx = 0;
+let yPerPx = rowHeight;
+$: containerHeight = getContainerHeight(items, yPerPx, getComputedCols);
+const onResize = throttle(() => {
+    items = specifyUndefinedColumns(items, getComputedCols, cols);
+    dispatch('resize', {
+        cols: getComputedCols,
+        xPerPx,
+        yPerPx,
+        width: containerWidth
+    });
+}, throttleUpdate);
+onMount(() => {
+    const sizeObserver = new ResizeObserver((entries) => {
+        requestAnimationFrame(() => {
+            let width = entries[0].contentRect.width;
+            if (width === containerWidth)
+                return;
+            getComputedCols = getColumn(parentWidth ?? width, cols);
+            xPerPx = width / getComputedCols;
+            if (!containerWidth) {
+                items = specifyUndefinedColumns(items, getComputedCols, cols);
+                dispatch('mount', {
+                    cols: getComputedCols,
+                    xPerPx,
+                    yPerPx // same as rowHeight
+                });
+            }
+            else {
+                onResize();
+            }
+            containerWidth = width;
+        });
+    });
+    sizeObserver.observe(container);
+    return () => sizeObserver.disconnect();
+});
+</script>
+
+<div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
+	{#if xPerPx}
+		{#each items as item (item.id)}
+			{@const onTop = item.id == onTopId}
+			{@const width =
+				Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
+				gapX * 2}
+			{@const height = (item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
+			{@const top = (item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
+			{@const left = (item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
+			<div
+				class="svlt-grid-item"
+				style="width: {width}px; height:{height}px; {onTop
+					? 'z-index: 1000;'
+					: ''} top: {top}px; left: {left}px;"
+			>
+				{#if item[getComputedCols]}
+					<slot dataItem={item} item={item[getComputedCols]} />
+				{/if}
+			</div>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.svlt-grid-container {
+		position: relative;
+		width: 100%;
+	}
+	.svlt-grid-item {
+		touch-action: none;
+		position: absolute;
+		will-change: auto;
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}</style>

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

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FilledItem } from '../svelte-grid/types';
+declare class __sveltets_Render<T> {
+    props(): {
+        items: FilledItem<T>[];
+        rowHeight: number;
+        cols: [number, number][];
+        gap?: number[] | undefined;
+        throttleUpdate?: number | undefined;
+        onTopId?: string | undefined;
+        containerWidth?: number | undefined;
+        parentWidth?: number | undefined;
+    };
+    events(): {
+        resize: CustomEvent<any>;
+        mount: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            dataItem: FilledItem<T>;
+            item: Required<import("../svelte-grid/types").ItemLayout>;
+        };
+    };
+}
+export type GridViewerProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type GridViewerEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type GridViewerSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class GridViewer<T> extends SvelteComponentTyped<GridViewerProps<T>, GridViewerEvents<T>, GridViewerSlots<T>> {
+}
+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('AppViewerContext');
+const { runnableComponents, app } = getContext('AppViewerContext');
 let loading = false;
 let timeout = undefined;
 let interval = undefined;
@@ -29,6 +29,12 @@ function setInter(inter) {
 function refresh() {
     loading = true;
     Promise.all(Object.keys($runnableComponents).map((id) => {
+        if (id.startsWith('bg_')) {
+            let index = parseInt(id.split('_')[1]);
+            if (!$app.hiddenInlineScripts[index]?.autoRefresh) {
+                return;
+            }
+        }
         return $runnableComponents?.[id]?.();
     })).finally(() => {
         loading = false;