windmill-components 1.77.0 → 1.79.0

package/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte

@@ -0,0 +1,81 @@
+<script>import { Button } from '../../../../common';
+import { Plus } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import TriggerBadgesList from './TriggerBadgesList.svelte';
+import { getDependencies } from './triggerListUtils';
+export let fields;
+export let autoRefresh = false;
+export let id;
+export let inlineScript;
+const { connectingInput } = getContext('AppViewerContext');
+let addingDependency = false;
+function applyConnection() {
+    if (!$connectingInput.opened && $connectingInput.input !== undefined && addingDependency) {
+        if ($connectingInput.input.connection) {
+            const x = {
+                id: $connectingInput.input.connection.componentId,
+                key: $connectingInput.input.connection.path
+            };
+            if (!inlineScript) {
+                return;
+            }
+            if (inlineScript.refreshOn?.find((y) => y.id === x.id && y.key === x.key)) {
+                return;
+            }
+            if (!inlineScript.refreshOn) {
+                inlineScript.refreshOn = [x];
+            }
+            else {
+                inlineScript.refreshOn.push(x);
+            }
+            inlineScript = JSON.parse(JSON.stringify(inlineScript));
+            addingDependency = false;
+        }
+        $connectingInput = {
+            opened: false,
+            input: undefined,
+            hoveredComponent: undefined
+        };
+    }
+}
+$: $connectingInput && applyConnection();
+</script>
+
+<TriggerBadgesList
+	{id}
+	inputDependencies={getDependencies(fields)}
+	frontendDependencies={inlineScript?.language === 'frontend'
+		? inlineScript?.refreshOn?.map((x) => `${x.id} - ${x.key}`) ?? undefined
+		: undefined}
+	onLoad={autoRefresh}
+	on:delete={(e) => {
+		const index = e.detail.index
+		if (inlineScript) {
+			inlineScript.refreshOn?.splice(index, 1)
+		}
+
+		inlineScript = JSON.parse(JSON.stringify(inlineScript))
+	}}
+>
+	{#if inlineScript?.language === 'frontend'}
+		<Button
+			variant="border"
+			size="xs"
+			color="light"
+			btnClasses="!px-1 !py-0.5"
+			on:click={() => {
+				addingDependency = true
+				$connectingInput = {
+					opened: true,
+					input: undefined,
+					hoveredComponent: undefined
+				}
+			}}
+		>
+			<div class="flex flex-row gap-1 items-center">
+				Add dependency
+				<Plus size={14} />
+			</div>
+		</Button>
+	{/if}
+</TriggerBadgesList>

package/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../../inputType';
+import type { InlineScript } from '../../../types';
+declare const __propDef: {
+    props: {
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        autoRefresh?: boolean | undefined;
+        id: string;
+        inlineScript: InlineScript;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BackgroundScriptTriggerListProps = typeof __propDef.props;
+export type BackgroundScriptTriggerListEvents = typeof __propDef.events;
+export type BackgroundScriptTriggerListSlots = typeof __propDef.slots;
+export default class BackgroundScriptTriggerList extends SvelteComponentTyped<BackgroundScriptTriggerListProps, BackgroundScriptTriggerListEvents, BackgroundScriptTriggerListSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte

@@ -0,0 +1,18 @@
+<script>import { getContext } from 'svelte';
+import { findGridItem } from '../../appUtils';
+import TriggerBadgesList from './TriggerBadgesList.svelte';
+import { getDependencies } from './triggerListUtils';
+const { selectedComponent, app } = getContext('AppViewerContext');
+export let fields;
+$: gridItem = $selectedComponent ? findGridItem($app, $selectedComponent) : undefined;
+$: onClick =
+    gridItem?.data.type &&
+        ['buttoncomponent', 'formbuttoncomponent', 'formcomponent'].includes(gridItem?.data.type);
+</script>
+
+<TriggerBadgesList
+	inputDependencies={getDependencies(fields)}
+	onLoad={!onClick}
+	id={$selectedComponent}
+	{onClick}
+/>

package/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentTriggerListProps = typeof __propDef.props;
+export type ComponentTriggerListEvents = typeof __propDef.events;
+export type ComponentTriggerListSlots = typeof __propDef.slots;
+export default class ComponentTriggerList extends SvelteComponentTyped<ComponentTriggerListProps, ComponentTriggerListEvents, ComponentTriggerListSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte

@@ -0,0 +1,98 @@
+<script>import { classNames } from '../../../../../utils';
+import { X } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import { getAllRecomputeIdsForComponent } from '../../appUtils';
+export let inputDependencies = [];
+export let frontendDependencies = undefined;
+export let onClick = false;
+export let onLoad = false;
+export let id = undefined;
+const colors = {
+    red: 'text-red-800 border-red-600 bg-red-100',
+    green: 'text-green-800 border-green-600 bg-green-100',
+    indigo: 'text-indigo-800 border-indigo-600 bg-indigo-100',
+    blue: 'text-blue-800 border-blue-600 bg-blue-100'
+};
+let badgeClass = 'inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border';
+const recomputedBadges = [];
+const { app, selectedComponent } = getContext('AppViewerContext');
+const dispatch = createEventDispatcher();
+$: if ($app && $selectedComponent && id) {
+    const recomputeIds = getAllRecomputeIdsForComponent($app, id);
+    if ($selectedComponent && recomputeIds) {
+        recomputeIds.forEach((x) => {
+            recomputedBadges.push(x);
+        });
+    }
+}
+</script>
+
+<div class="flex w-full flex-col items-start gap-2 mt-2 mb-1">
+	{#if recomputedBadges.length === 0 && !onLoad && !onClick && inputDependencies?.length === 0 && !frontendDependencies}
+		<p class="text-xs font-semibold text-slate-800 ">
+			This script has no triggers. It will never run.
+		</p>
+	{:else}
+		<div class="text-sm font-semibold text-slate-800 ">Triggered by</div>
+
+		{#if onLoad || onClick}
+			<div class="w-full">
+				<div class="text-xs font-semibold text-slate-800 mb-1">Event</div>
+				<div class="flex flex-row gap-2 flex-wrap">
+					{#if onLoad}
+						<span class={classNames(badgeClass, colors['green'])}>On load</span>
+					{/if}
+					{#if onClick}
+						<span class={classNames(badgeClass, colors['green'])}>On click</span>
+					{/if}
+				</div>
+			</div>
+		{/if}
+		{#if inputDependencies.length > 0}
+			<div class="w-full">
+				<div class="flex justify-between items-center mb-2">
+					<div class="text-xs font-semibold text-slate-800 mb-1">Values change </div>
+				</div>
+				<div class="flex flex-row gap-2 flex-wrap">
+					{#each inputDependencies as label, index}
+						<span class={classNames(badgeClass, colors['blue'])}>
+							{label}
+						</span>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		{#if recomputedBadges?.length > 0}
+			<div class="w-full">
+				<div class="text-xs font-semibold text-slate-800 mb-1">Success of</div>
+				<div class="flex flex-row gap-2 flex-wrap">
+					{#each recomputedBadges as badge}
+						<span class={classNames(badgeClass, colors['indigo'])}>{badge}</span>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	{/if}
+	{#if frontendDependencies}
+		<div class="w-full">
+			<div class="flex justify-between items-center mb-2">
+				<div class="text-xs font-semibold text-slate-800 mb-1">Values change (Frontend)</div>
+				<slot />
+			</div>
+			<div class="flex flex-row gap-2 flex-wrap">
+				{#each frontendDependencies as label, index}
+					<span class={classNames(badgeClass, colors['red'])}>
+						{label}
+						<button
+							on:click={() => dispatch('delete', { index })}
+							class="bg-red-300 cursor-pointer hover:bg-red-400 ml-1 rounded-md"
+						>
+							<X size={18} class="p-0.5" />
+						</button>
+					</span>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>

package/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        inputDependencies?: string[] | undefined;
+        frontendDependencies?: string[] | undefined;
+        onClick?: boolean | undefined;
+        onLoad?: boolean | undefined;
+        id?: string | undefined;
+    };
+    events: {
+        delete: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TriggerBadgesListProps = typeof __propDef.props;
+export type TriggerBadgesListEvents = typeof __propDef.events;
+export type TriggerBadgesListSlots = typeof __propDef.slots;
+export default class TriggerBadgesList extends SvelteComponentTyped<TriggerBadgesListProps, TriggerBadgesListEvents, TriggerBadgesListSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/triggerLists/triggerListUtils.d.ts

@@ -0,0 +1,2 @@
+import type { StaticAppInput, ConnectedAppInput, RowAppInput, UserAppInput } from '../../../inputType';
+export declare function getDependencies(fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput> | undefined): string[];

package/components/apps/editor/settingsPanel/triggerLists/triggerListUtils.js

@@ -0,0 +1,11 @@
+export function getDependencies(fields) {
+    let dependencies = [];
+    if (!fields)
+        return dependencies;
+    Object.values(fields).forEach((field) => {
+        if (field.type === 'connected' && dependencies && field.connection) {
+            dependencies.push(`${field.connection.componentId} - ${field.connection.path}`);
+        }
+    });
+    return dependencies;
+}

package/components/apps/gridUtils.d.ts

@@ -8,8 +8,6 @@ declare const WIDE_GRID_COLUMNS: 12;
 declare const NARROW_GRID_COLUMNS: 3;
 declare const columnConfiguration: ColumnConfiguration;
 declare const gridColumns: number[];
-declare function disableDrag(component: GridItem): GridItem;
 declare function toggleFixed(component: GridItem): GridItem;
 declare function isFixed(component: GridItem): boolean;
-declare function enableDrag(component: GridItem): GridItem;
-export { gridColumns, WIDE_GRID_COLUMNS, NARROW_GRID_COLUMNS, columnConfiguration, disableDrag, enableDrag, Breakpoints, toggleFixed, isFixed };
+export { gridColumns, WIDE_GRID_COLUMNS, NARROW_GRID_COLUMNS, columnConfiguration, Breakpoints, toggleFixed, isFixed };

package/components/apps/gridUtils.js

@@ -9,13 +9,6 @@ const columnConfiguration = [
     [Breakpoints.sm, NARROW_GRID_COLUMNS]
 ];
 const gridColumns = columnConfiguration.map((value) => value[1]);
-function disableDrag(component) {
-    gridColumns.forEach((column) => {
-        component[column].customDragger = true;
-        component[column].customResizer = true;
-    });
-    return component;
-}
 function toggleFixed(component) {
     const nValue = !component[gridColumns[0]].fixed;
     gridColumns.forEach((column) => {
@@ -32,11 +25,4 @@ function isFixed(component) {
     });
     return fixed;
 }
-function enableDrag(component) {
-    gridColumns.forEach((column) => {
-        component[column].customDragger = false;
-        component[column].customResizer = false;
-    });
-    return component;
-}
-export { gridColumns, WIDE_GRID_COLUMNS, NARROW_GRID_COLUMNS, columnConfiguration, disableDrag, enableDrag, Breakpoints, toggleFixed, isFixed };
+export { gridColumns, WIDE_GRID_COLUMNS, NARROW_GRID_COLUMNS, columnConfiguration, Breakpoints, toggleFixed, isFixed };

package/components/apps/inputType.d.ts

@@ -52,8 +52,8 @@ export type ResultInput = {
     type: 'runnable';
     value?: any;
 };
-type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | RowInput | EvalInput | UploadInput | ResultInput | TemplateInput) & InputConfiguration<T, U, V>;
-type InputConfiguration<T extends InputType, U, V extends InputType> = {
+type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | RowInput | EvalInput | UploadInput | ResultInput | TemplateInput) & InputConfiguration<T, V>;
+type InputConfiguration<T extends InputType, V extends InputType> = {
     fieldType: T;
     subFieldType?: V;
     format?: string | undefined;
@@ -107,5 +107,14 @@ export type EvalAppInput = Extract<AppInput, {
 export type UploadAppInput = Extract<AppInput, {
     type: 'upload';
 }>;
+export type RichAppInput = AppInput | {
+    type: 'oneOf';
+    oneOf: string[];
+    configuration: Record<string, AppInput>;
+} | {
+    type: 'group';
+    title: string;
+    configuration: Record<string, AppInput>;
+};
 export type AppInputs = Record<string, AppInput>;
 export {};

package/components/apps/rx.d.ts

@@ -20,7 +20,7 @@ export type World = {
     stateId: Writable<number>;
     newOutput: <T>(id: string, name: string, previousValue: T) => Output<T>;
 };
-export declare function buildWorld(components: Record<string, string[]>, previousWorld: World | undefined, context: Record<string, any>): World;
+export declare function buildWorld(context: Record<string, any>): Writable<World>;
 export declare function buildObservableWorld(): {
     connect: <T>(inputSpec: AppInput, next: (x: T) => void, id?: string) => Input<T>;
     newOutput: <T_1>(id: string, name: string, state: Writable<number>, previousValue: T_1) => Output<T_1>;

package/components/apps/rx.js

@@ -1,22 +1,18 @@
 import { writable } from 'svelte/store';
 import { deepEqual } from 'fast-equals';
-export function buildWorld(components, previousWorld, context) {
+export function buildWorld(context) {
     const newWorld = buildObservableWorld();
     const stateId = writable(0);
+    let writableWorld = undefined;
     const outputsById = {
         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(id, name, previousValue) {
         if (outputsById[id]?.[name]) {
+            writableWorld?.update((x) => x);
             return outputsById[id][name];
         }
         let o = newWorld.newOutput(id, name, stateId, previousValue);
@@ -24,10 +20,12 @@ export function buildWorld(components, previousWorld, context) {
             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() {
     const observables = {};
@@ -40,7 +38,6 @@ export function buildObservableWorld() {
             };
         }
         else if (inputSpec.type === 'connected') {
-            const input = cachedInput(next, id);
             const connection = inputSpec.connection;
             if (!connection) {
                 return {
@@ -50,6 +47,8 @@ export function buildObservableWorld() {
                 };
             }
             const { componentId, path } = connection;
+            console.log('connection', connection);
+            const input = cachedInput(next, `${componentId}-${path}-${id}`);
             const [p] = path ? path.split('.')[0].split('[') : [undefined];
             let obs = observables[`${componentId}.${p}`];
             if (!obs) {

package/components/apps/svelte-grid/Grid.svelte

@@ -1,10 +1,10 @@
 <script>import { getContainerHeight } from './utils/container';
-import { moveItemsAroundItem, moveItem, getItemById, specifyUndefinedColumns } from './utils/item';
+import { moveItem, getItemById, specifyUndefinedColumns } from './utils/item';
 import { onMount, createEventDispatcher } from 'svelte';
 import { getColumn, throttle } from './utils/other';
 import MoveResize from './MoveResize.svelte';
+import { sortGridItemsPosition } from '../editor/appUtils';
 const dispatch = createEventDispatcher();
-export let fillSpace = false;
 export let items;
 export let rowHeight;
 export let cols;
@@ -63,6 +63,8 @@ onMount(() => {
     sizeObserver.observe(container);
     return () => sizeObserver.disconnect();
 });
+let sortedItems = [];
+$: sortedItems = JSON.parse(JSON.stringify(items)).sort((a, b) => a.id.localeCompare(b.id));
 let initItems = undefined;
 const updateMatrix = ({ detail }) => {
     let isPointerUp = detail.isPointerUp;
@@ -72,13 +74,13 @@ const updateMatrix = ({ detail }) => {
             citems = JSON.parse(JSON.stringify(initItems));
         }
         catch (e) {
-            citems = JSON.parse(JSON.stringify(items));
+            citems = JSON.parse(JSON.stringify(sortedItems));
         }
         initItems = undefined;
     }
     else {
         if (initItems == undefined) {
-            initItems = JSON.parse(JSON.stringify(items));
+            initItems = JSON.parse(JSON.stringify(sortedItems));
         }
         citems = JSON.parse(JSON.stringify(initItems));
     }
@@ -91,12 +93,7 @@ const updateMatrix = ({ detail }) => {
                 ...detail.shadow
             }
         };
-        if (fillSpace) {
-            items = moveItemsAroundItem(activeItem, citems, getComputedCols, getItemById(detail.id, citems));
-        }
-        else {
-            items = moveItem(activeItem, citems, getComputedCols, getItemById(detail.id, citems));
-        }
+        sortedItems = moveItem(activeItem, citems, getComputedCols, getItemById(detail.id, citems));
         if (detail.onUpdate)
             detail.onUpdate();
         dispatch('change', {
@@ -106,7 +103,7 @@ const updateMatrix = ({ detail }) => {
         });
     }
     if (isPointerUp) {
-        dispatch('redraw', items);
+        dispatch('redraw', sortGridItemsPosition(JSON.parse(JSON.stringify(sortedItems)), getComputedCols));
     }
 };
 const throttleMatrix = throttle(updateMatrix, throttleResize);
@@ -122,7 +119,7 @@ const handleRepaint = ({ detail }) => {
 
 <div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
 	{#if xPerPx || !fastStart}
-		{#each items as item, i (item.id)}
+		{#each sortedItems as item (item.id)}
 			<MoveResize
 				on:repaint={handleRepaint}
 				on:pointerup={pointerup}
@@ -156,7 +153,6 @@ const handleRepaint = ({ detail }) => {
 						{resizePointerDown}
 						dataItem={item}
 						item={item[getComputedCols]}
-						index={i}
 					/>
 				{/if}
 			</MoveResize>

package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 import type { FilledItem } from './types';
 declare class __sveltets_Render<T> {
     props(): {
-        fillSpace?: boolean | undefined;
         items: FilledItem<T>[];
         rowHeight: number;
         cols: [number, number][];
@@ -35,7 +34,6 @@ declare class __sveltets_Render<T> {
             resizePointerDown: (e: any) => void;
             dataItem: FilledItem<T>;
             item: Required<import("./types").ItemLayout>;
-            index: any;
         };
     };
 }

package/components/apps/svelte-grid/MoveResize.svelte

@@ -242,7 +242,7 @@ const resizePointerUp = (e) => {
 	class:svlt-grid-active={active || (trans && rect)}
 	style="width: {active ? newSize.width : width}px; height:{active
 		? newSize.height
-		: height}px; {onTop ? 'z-index: 100;' : ''}
+		: height}px; {onTop ? 'z-index: 1000;' : ''}
   {active
 		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;`
 		: trans

package/components/apps/svelte-grid/types.d.ts

@@ -1,25 +1,21 @@
-
 export interface Size {
-    w: number
-    h: number
+	w: number
+	h: number
 }
 
 export interface Positon {
-    x: number
-    y: number
+	x: number
+	y: number
 }
 
 interface ItemLayout extends Size, Positon {
-    fixed?: boolean
-    resizable?: boolean
-    draggable?: boolean
-    customDragger?: boolean
-    customResizer?: boolean
-    min?: Size
-    max?: Size
+	fixed?: boolean
+	resizable?: boolean
+	draggable?: boolean
+	customDragger?: boolean
+	customResizer?: boolean
+	min?: Size
+	max?: Size
 }
 
-export type FilledItem<T> = T & { [width: number]: Required<ItemLayout>; data: any, id: string }
-
-
-
+export type FilledItem<T> = { [width: number]: Required<ItemLayout>; data: T; id: string }

package/components/apps/svelte-grid/utils/helper.d.ts

@@ -1,10 +1,6 @@
 declare const gridHelp: {
     normalize(items: any, col: any): any;
-    adjust(items: any, col: any): {
-        [width: number]: Required<import("../types").ItemLayout>;
-        data: any;
-        id: string;
-    }[];
+    adjust(items: any, col: any): import("../types").FilledItem<unknown>[];
     item(obj: any): any;
     findSpace(item: any, items: any, cols: any): {
         x: number;

package/components/apps/types.d.ts

@@ -22,11 +22,23 @@ export type ComponentCssProperty = {
     style?: string;
 };
 export type ComponentCustomCSS<T extends string = string> = Record<T, ComponentCssProperty>;
+export type Configuration = GeneralAppInput & (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput | UploadAppInput);
+export type RichConfiguration = (Configuration & {
+    ctype?: undefined;
+}) | {
+    ctype: 'oneOf';
+    selected: string;
+    configuration: Record<string, Record<string, Configuration>>;
+} | {
+    ctype: 'group';
+    title: string;
+    configuration: Record<string, Configuration>;
+};
+export type RichConfigurations = Record<string, RichConfiguration>;
 export interface BaseAppComponent extends Partial<Aligned> {
     id: ComponentID;
     componentInput: AppInput | undefined;
-    configuration: Record<string, GeneralAppInput & (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput | UploadAppInput)>;
-    card: boolean | undefined;
+    configuration: RichConfigurations;
     customCss?: ComponentCustomCSS;
     /**
      * If `true` then the wrapper will allow items to flow outside of it's borders.
@@ -45,15 +57,16 @@ export type AppSection = {
     components: AppComponent[];
     id: SectionID;
 };
-export type GridItem = FilledItem<{
-    data: AppComponent;
-    id: string;
-}>;
+export type GridItem = FilledItem<AppComponent>;
 export type InlineScript = {
     content: string;
     language: Preview.language | 'frontend';
     path?: string;
     schema?: Schema;
+    refreshOn?: {
+        id: string;
+        key: string;
+    }[];
 };
 export type App = {
     grid: GridItem[];
@@ -78,8 +91,7 @@ export type ConnectingInput = {
     hoveredComponent: string | undefined;
 };
 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>;
@@ -108,13 +120,15 @@ export type AppViewerContext = {
     state: Writable<Record<string, any>>;
     componentControl: Writable<Record<string, {
         left?: () => boolean;
-        right?: () => boolean;
+        right?: (skipTableActions?: boolean | undefined) => string | boolean;
         setTab?: (index: number) => void;
     }>>;
+    hoverStore: Writable<string | undefined>;
 };
 export type AppEditorContext = {
     history: History<App> | undefined;
     pickVariableCallback: Writable<((path: string) => void) | undefined>;
+    ontextfocus: Writable<(() => void) | undefined>;
 };
 export type FocusedGrid = {
     parentComponentId: string;
@@ -124,4 +138,10 @@ export type EditorMode = 'dnd' | 'preview';
 export type EditorBreakpoint = 'sm' | 'lg';
 export declare const IS_APP_PUBLIC_CONTEXT_KEY: "isAppPublicContext";
 type ComponentID = string;
+export type ContextPanelContext = {
+    search: Writable<string>;
+    manuallyOpened: Writable<Record<string, boolean>>;
+    expanded: Writable<boolean>;
+    hasResult: Writable<Record<string, boolean>>;
+};
 export {};

package/components/apps/utils.js

@@ -144,8 +144,8 @@ export function getAllScriptNames(app) {
             componentInput?.runnable?.type === 'runnableByName') {
             acc.push(componentInput.runnable.name);
         }
-        if (componentInput?.type === 'tablecomponent') {
-            componentInput.actionButtons.forEach((actionButton) => {
+        if (gridItem.data.type === 'tablecomponent') {
+            gridItem.data.actionButtons.forEach((actionButton) => {
                 if (actionButton.componentInput?.type === 'runnable') {
                     if (actionButton.componentInput.runnable?.type === 'runnableByName') {
                         acc.push(actionButton.componentInput.runnable.name);