windmill-components 1.79.0 → 1.82.1

package/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte

@@ -0,0 +1,46 @@
+<script>import { allItems } from '../../../utils';
+import { getContext } from 'svelte';
+export let componentInput;
+const { app } = getContext('AppViewerContext');
+const tabComponents = allItems($app.grid, $app.subgrids).filter((component) => component.data.type === 'tabscomponent');
+</script>
+
+{#if componentInput.value && tabComponents.length > 0}
+	<div>
+		<div class="flex flex-row gap-2 w-full">
+			<div class="flex flex-col">
+				<label for="tabId" class="text-xs font-semibold">Tab ID</label>
+
+				<select
+					id="tabId"
+					bind:value={componentInput.value.id}
+					class="border border-gray-300 rounded-md p-1 !w-16"
+				>
+					{#each tabComponents as tabComponent}
+						<option value={tabComponent.data.id}>
+							{tabComponent.data.id}
+						</option>
+					{/each}
+				</select>
+			</div>
+			<div class="flex flex-col">
+				<label for="tabIndex" class="text-xs font-semibold">Tab Index</label>
+				<select
+					id="tabIndex"
+					bind:value={componentInput.value.index}
+					class="border border-gray-300 rounded-md p-1 !w-16"
+				>
+					{#each tabComponents as tabComponent}
+						{#if tabComponent.data.id === componentInput.value.id}
+							{#each Array(tabComponent.data.numberOfSubgrids) as _, i}
+								<option value={i}>{i}</option>
+							{/each}
+						{/if}
+					{/each}
+				</select>
+			</div>
+		</div>
+	</div>
+{:else}
+	<div class="text-xs text-gray-500"> No tab component found in the app </div>
+{/if}

package/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { StaticInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: StaticInput<{
+            id: string;
+            index: number;
+        }>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TabSelectInputProps = typeof __propDef.props;
+export type TabSelectInputEvents = typeof __propDef.events;
+export type TabSelectInputSlots = typeof __propDef.slots;
+export default class TabSelectInput extends SvelteComponentTyped<TabSelectInputProps, TabSelectInputEvents, TabSelectInputSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -10,10 +10,12 @@ import { getAllScriptNames, loadSchema, schemaToInputsSpec } from '../../../util
 import { emptySchema } from '../../../../../utils';
 export let appInput;
 export let defaultUserInput = false;
+export let id;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
 const { app, workspace } = getContext('AppViewerContext');
+const { selectedComponentInEditor } = getContext('AppEditorContext');
 async function loadSchemaFromTriggerable(path, runType) {
     return loadSchema(workspace, path, runType) ?? emptySchema();
 }
@@ -28,6 +30,7 @@ async function pickScript(path) {
             schema
         };
         appInput.fields = fields;
+        $selectedComponentInEditor = id;
     }
 }
 async function pickFlow(path) {
@@ -41,6 +44,7 @@ async function pickFlow(path) {
             schema
         };
         appInput.fields = fields;
+        $selectedComponentInEditor = id;
     }
 }
 async function pickHubScript(path) {
@@ -54,6 +58,7 @@ async function pickHubScript(path) {
             schema
         };
         appInput.fields = fields;
+        $selectedComponentInEditor = id;
     }
 }
 function pickInlineScript(name) {
@@ -67,6 +72,7 @@ function pickInlineScript(name) {
         };
         $app.unusedInlineScripts.splice(unusedInlineScriptIndex, 1);
     }
+    $selectedComponentInEditor = id;
     $app = $app;
 }
 function createScript() {
@@ -83,6 +89,7 @@ function createScript() {
         inlineScript: undefined
     };
     appInput = appInput;
+    $selectedComponentInEditor = id;
     return newScriptPath;
 }
 </script>

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         appInput: ResultAppInput;
         defaultUserInput?: boolean | undefined;
+        id: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte

@@ -0,0 +1,47 @@
+<script>import { fly } from 'svelte/transition';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { Badge, Button } from '../../../../common';
+import { secondaryMenu, SECONDARY_MENU_ID } from './';
+import { getContext } from 'svelte';
+const { selectedComponent } = getContext('AppViewerContext');
+let width;
+let lastSelected = $selectedComponent;
+$: if (lastSelected !== $selectedComponent) {
+    secondaryMenu.close();
+    lastSelected = $selectedComponent;
+}
+</script>
+
+<div
+	bind:clientWidth={width}
+	class="absolute z-50 inset-0 overflow-hidden"
+	class:pointer-events-none={!$secondaryMenu.isOpen}
+>
+	{#if $secondaryMenu.isOpen && $secondaryMenu.component}
+		<div
+			transition:fly|local={{ duration: 300, x: width, y: 0, opacity: 1 }}
+			id={SECONDARY_MENU_ID}
+			class="flex flex-col w-full h-full bg-white"
+		>
+			<div class="flex justify-between items-center bg-white gap-1 p-3">
+				<Button
+					color="light"
+					size="xs"
+					variant="border"
+					startIcon={{ icon: faChevronLeft }}
+					on:click={secondaryMenu.close}
+				>
+					Back
+				</Button>
+				<Badge color="blue">{$selectedComponent}</Badge>
+			</div>
+			<div class="relative h-full overflow-y-auto px-3 pb-3">
+				{#if typeof $secondaryMenu.component === 'string'}
+					{@html $secondaryMenu.component}
+				{:else}
+					<svelte:component this={$secondaryMenu.component} {...$secondaryMenu.props} />
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>

package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.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 SecondaryMenuProps = typeof __propDef.props;
+export type SecondaryMenuEvents = typeof __propDef.events;
+export type SecondaryMenuSlots = typeof __propDef.slots;
+export default class SecondaryMenu extends SvelteComponentTyped<SecondaryMenuProps, SecondaryMenuEvents, SecondaryMenuSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/secondaryMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SecondaryMenu } from './SecondaryMenu.svelte';
+export * from './menuStore';

package/components/apps/editor/settingsPanel/secondaryMenu/index.js

@@ -0,0 +1,2 @@
+export { default as SecondaryMenu } from './SecondaryMenu.svelte';
+export * from './menuStore';

package/components/apps/editor/settingsPanel/secondaryMenu/menuStore.d.ts

@@ -0,0 +1,12 @@
+import type { SvelteComponent } from 'svelte';
+export declare const SECONDARY_MENU_ID: "app-secondary-menu";
+export interface SecondaryMenuStore {
+    isOpen: boolean;
+    component?: typeof SvelteComponent | string;
+    props: Record<string, any>;
+}
+export declare const secondaryMenu: {
+    readonly subscribe: (this: void, run: import("svelte/store").Subscriber<SecondaryMenuStore>, invalidate?: ((value?: SecondaryMenuStore | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    readonly open: (component: SecondaryMenuStore['component'], props?: SecondaryMenuStore['props']) => void;
+    readonly close: () => void;
+};

package/components/apps/editor/settingsPanel/secondaryMenu/menuStore.js

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+export const SECONDARY_MENU_ID = 'app-secondary-menu';
+const store = writable({ isOpen: false, component: undefined, props: {} });
+export const secondaryMenu = {
+    subscribe: store.subscribe,
+    open: (component, props = {}) => {
+        store.set({ isOpen: true, component, props });
+    },
+    close: () => store.set({ isOpen: false, component: undefined, props: {} })
+};

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

@@ -1,81 +1,31 @@
-<script>import { Button } from '../../../../common';
-import { Plus } from 'lucide-svelte';
-import { getContext } from 'svelte';
+<script>import Toggle from '../../../../Toggle.svelte';
+import Tooltip from '../../../../Tooltip.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();
+export let doNotRecomputeOnInputChanged = false;
+$: dependencies = getDependencies(fields);
 </script>
 
+{#if inlineScript.language !== 'frontend'}
+	<div class="flex items-center px-1">
+		<Toggle
+			size="xs"
+			color="red"
+			bind:checked={doNotRecomputeOnInputChanged}
+			options={{ right: 'do NOT recompute on input changes' }}
+		/>
+		<Tooltip>If not toggled, whenever an input is changed, the script will be re-run.</Tooltip>
+	</div>
+{/if}
+
 <TriggerBadgesList
+	bind:inlineScript
 	{id}
-	inputDependencies={getDependencies(fields)}
-	frontendDependencies={inlineScript?.language === 'frontend'
-		? inlineScript?.refreshOn?.map((x) => `${x.id} - ${x.key}`) ?? undefined
-		: undefined}
+	inputDependencies={dependencies}
 	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>
+	{doNotRecomputeOnInputChanged}
+/>

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         autoRefresh?: boolean | undefined;
         id: string;
         inlineScript: InlineScript;
+        doNotRecomputeOnInputChanged?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

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

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

@@ -1,8 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../../inputType';
+import type { ConnectedAppInput, RowAppInput, RunnableByName, StaticAppInput, UserAppInput } from '../../../inputType';
+import type { AppComponent } from '../../component';
 declare const __propDef: {
     props: {
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        appComponent: AppComponent;
+        runnable: RunnableByName;
+        doNotRecomputeOnInputChanged?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,12 +1,14 @@
-<script>import { classNames } from '../../../../../utils';
-import { X } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+<script>import { Button } from '../../../../common';
+import { classNames } from '../../../../../utils';
+import { Plus, X } from 'lucide-svelte';
+import { getContext } from 'svelte';
 import { getAllRecomputeIdsForComponent } from '../../appUtils';
 export let inputDependencies = [];
-export let frontendDependencies = undefined;
+export let inlineScript;
 export let onClick = false;
 export let onLoad = false;
 export let id = undefined;
+export let doNotRecomputeOnInputChanged = false;
 const colors = {
     red: 'text-red-800 border-red-600 bg-red-100',
     green: 'text-green-800 border-green-600 bg-green-100',
@@ -14,17 +16,52 @@ const colors = {
     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);
-        });
+const { app, worldStore } = getContext('AppViewerContext');
+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
+        };
+        $app = $app;
+        $worldStore = $worldStore;
     }
 }
+$: frontendDependencies =
+    inlineScript?.language === 'frontend'
+        ? inlineScript?.refreshOn?.map((x) => `${x.id} - ${x.key}`) ?? []
+        : undefined;
+$: $connectingInput && applyConnection();
+$: recomputedBadges = getAllRecomputeIdsForComponent($app, id);
+function deleteDep(index) {
+    if (inlineScript) {
+        inlineScript.refreshOn?.splice(index, 1);
+    }
+    inlineScript = inlineScript;
+}
 </script>
 
 <div class="flex w-full flex-col items-start gap-2 mt-2 mb-1">
@@ -33,28 +70,29 @@ $: if ($app && $selectedComponent && id) {
 			This script has no triggers. It will never run.
 		</p>
 	{:else}
-		<div class="text-sm font-semibold text-slate-800 ">Triggered by</div>
+		<div class="text-sm font-semibold text-gray-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="text-xs font-semibold text-slate-800 mb-1">Events</div>
 				<div class="flex flex-row gap-2 flex-wrap">
 					{#if onLoad}
-						<span class={classNames(badgeClass, colors['green'])}>On load</span>
+						<span class={classNames(badgeClass, colors['green'])}>Start</span>
+						<span class={classNames(badgeClass, colors['green'])}>Refresh</span>
 					{/if}
 					{#if onClick}
-						<span class={classNames(badgeClass, colors['green'])}>On click</span>
+						<span class={classNames(badgeClass, colors['green'])}>Click</span>
 					{/if}
 				</div>
 			</div>
 		{/if}
-		{#if inputDependencies.length > 0}
+		{#if inputDependencies.length > 0 && !doNotRecomputeOnInputChanged}
 			<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 class="flex justify-between items-center mb-1">
+					<div class="text-xs font-semibold text-slate-800">Change on values</div>
 				</div>
 				<div class="flex flex-row gap-2 flex-wrap">
-					{#each inputDependencies as label, index}
+					{#each inputDependencies as label}
 						<span class={classNames(badgeClass, colors['blue'])}>
 							{label}
 						</span>
@@ -65,7 +103,7 @@ $: if ($app && $selectedComponent && id) {
 
 		{#if recomputedBadges?.length > 0}
 			<div class="w-full">
-				<div class="text-xs font-semibold text-slate-800 mb-1">Success of</div>
+				<div class="text-xs font-semibold text-slate-800 mb-1">Computation of</div>
 				<div class="flex flex-row gap-2 flex-wrap">
 					{#each recomputedBadges as badge}
 						<span class={classNames(badgeClass, colors['indigo'])}>{badge}</span>
@@ -74,18 +112,38 @@ $: if ($app && $selectedComponent && id) {
 			</div>
 		{/if}
 	{/if}
-	{#if frontendDependencies}
+	{#if frontendDependencies && !doNotRecomputeOnInputChanged}
 		<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 class="flex justify-between items-center">
+				<div class="text-xs font-semibold text-slate-800 mb-1">Change on values</div>
+				{#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}
 			</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 })}
+							on:click={() => deleteDep(index)}
 							class="bg-red-300 cursor-pointer hover:bg-red-400 ml-1 rounded-md"
 						>
 							<X size={18} class="p-0.5" />

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

@@ -1,20 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
+import type { InlineScript } from '../../../types';
 declare const __propDef: {
     props: {
         inputDependencies?: string[] | undefined;
-        frontendDependencies?: string[] | undefined;
+        inlineScript: InlineScript | undefined;
         onClick?: boolean | undefined;
         onLoad?: boolean | undefined;
         id?: string | undefined;
+        doNotRecomputeOnInputChanged?: boolean | undefined;
     };
     events: {
-        delete: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type TriggerBadgesListProps = typeof __propDef.props;
 export type TriggerBadgesListEvents = typeof __propDef.events;

package/components/apps/gridUtils.js

@@ -10,7 +10,7 @@ const columnConfiguration = [
 ];
 const gridColumns = columnConfiguration.map((value) => value[1]);
 function toggleFixed(component) {
-    const nValue = !component[gridColumns[0]].fixed;
+    const nValue = !(component[gridColumns[0]]?.fixed ?? false);
     gridColumns.forEach((column) => {
         component[column].fixed = nValue;
     });

package/components/apps/inputType.d.ts

@@ -1,7 +1,6 @@
 import type { ReadFileAs } from '../common/fileInput/model';
-import type { staticValues } from './editor/componentsPanel/componentStaticValues';
 import type { InlineScript } from './types';
-export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource';
+export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'tab-select';
 export type InputConnection = {
     componentId: string;
     path: string;
@@ -40,7 +39,7 @@ export type RunnableByPath = {
     runType: 'script' | 'flow' | 'hubscript';
     type: 'runnableByPath';
 };
-type RunnableByName = {
+export type RunnableByName = {
     name: string;
     inlineScript: InlineScript | undefined;
     type: 'runnableByName';
@@ -48,9 +47,13 @@ type RunnableByName = {
 export type Runnable = RunnableByPath | RunnableByName | undefined;
 export type ResultInput = {
     runnable: Runnable;
+    transformer?: InlineScript & {
+        language: 'frontend';
+    };
     fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
     type: 'runnable';
     value?: any;
+    doNotRecomputeOnInputChanged?: boolean;
 };
 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> = {
@@ -72,20 +75,13 @@ type InputConfiguration<T extends InputType, V extends InputType> = {
         convertTo?: ReadFileAs;
     };
 };
-type StaticOptions = {
-    /**
-     * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
-     */
-    optionValuesKey: keyof typeof staticValues;
+export type StaticOptions = {
+    selectOptions: readonly string[] | readonly {
+        value: string;
+        label: string;
+    }[];
 };
-export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & {
-    /**
-     * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
-     */
-    optionValuesKey: keyof typeof staticValues;
-}) | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & {
-    optionValuesKey: keyof typeof staticValues;
-}) | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'labeledresource', object>;
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;