windmill-components 1.86.0 → 1.89.0

package/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 allIdsInPath = 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 = allIdsInPath?.includes(item.id)}
+			{@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/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;
+        allIdsInPath?: 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/package/components/apps/editor/PreviewToggle.svelte

@@ -0,0 +1,18 @@
+<script>import { Eye, Pen } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+export let loading = false;
+const { mode } = getContext('AppViewerContext');
+</script>
+
+<ToggleButtonGroup class="h-[30px]" bind:selected={$mode}>
+	<ToggleButton label="Editor" value="dnd" icon={Pen} disabled={loading} />
+	<ToggleButton
+		label="Preview"
+		value="preview"
+		icon={Eye}
+		tooltip="Preview mode"
+		disabled={loading}
+	/>
+</ToggleButtonGroup>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        loading?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PreviewToggleProps = typeof __propDef.props;
+export type PreviewToggleEvents = typeof __propDef.events;
+export type PreviewToggleSlots = typeof __propDef.slots;
+export default class PreviewToggle extends SvelteComponentTyped<PreviewToggleProps, PreviewToggleEvents, PreviewToggleSlots> {
+}
+export {};

package/package/components/apps/editor/RecomputeAllComponents.svelte

@@ -0,0 +1,107 @@
+<script>import Dropdown from '../../Dropdown.svelte';
+import { ChevronDown, RefreshCw } from 'lucide-svelte';
+import { getContext, onMount } from 'svelte';
+import Button from '../../common/button/Button.svelte';
+import { allItems } from '../utils';
+const { runnableComponents, app, initialized } = getContext('AppViewerContext');
+let loading = false;
+let timeout = undefined;
+let interval = undefined;
+let shouldRefresh = false;
+let firstLoad = false;
+$: !firstLoad &&
+    $initialized.initializedComponents?.length ==
+        allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length &&
+    refresh();
+$: componentNumber = Object.values($runnableComponents).filter((x) => x.autoRefresh).length;
+function onClick(stopAfterClear = true) {
+    if (timeout) {
+        clearInterval(timeout);
+        timeout = undefined;
+        shouldRefresh = false;
+        if (stopAfterClear)
+            return;
+    }
+    refresh();
+    if (interval) {
+        shouldRefresh = true;
+        timeout = setInterval(refresh, interval);
+    }
+}
+function setInter(inter) {
+    interval = inter;
+    onClick(!inter);
+}
+function refresh() {
+    let isFirstLoad = false;
+    if (!firstLoad) {
+        $initialized.initialized = true;
+        firstLoad = true;
+        isFirstLoad = true;
+    }
+    loading = true;
+    Promise.all(Object.keys($runnableComponents).map((id) => {
+        if (!$runnableComponents?.[id]?.autoRefresh &&
+            (!isFirstLoad || !$runnableComponents?.[id]?.refreshOnStart)) {
+            return;
+        }
+        return $runnableComponents?.[id]?.cb?.();
+    })).finally(() => {
+        loading = false;
+    });
+}
+function visChange() {
+    if (document.visibilityState === 'hidden') {
+        if (timeout) {
+            clearInterval(timeout);
+            timeout = undefined;
+        }
+    }
+    else if (shouldRefresh) {
+        timeout = setInterval(refresh, interval);
+    }
+}
+onMount(() => {
+    document.addEventListener('visibilitychange', visChange);
+    // setTimeout(() => refresh(), 1000)
+    return () => {
+        document.removeEventListener('visibilitychange', visChange);
+        if (timeout)
+            clearInterval(timeout);
+    };
+});
+</script>
+
+<div class="flex items-center">
+	<Button
+		disabled={componentNumber == 0}
+		on:click={() => onClick()}
+		color={timeout ? 'blue' : 'light'}
+		variant={timeout ? 'contained' : 'border'}
+		size="xs"
+		btnClasses="!rounded-r-none {timeout ? '!border !border-blue-500' : ''}"
+		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
+			? `every ${interval / 1000} seconds`
+			: 'once'}"
+	>
+		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} /> &nbsp;({componentNumber})
+	</Button>
+	<Dropdown
+		btnClasses="!rounded-l-none !border-l-0 min-w-[4rem] !px-2"
+		color={timeout ? 'blue' : 'light'}
+		variant="border"
+		dropdownItems={[
+			{
+				displayName: 'Once',
+				action: () => setInter(undefined)
+			},
+			...[1, 2, 3, 4, 5, 6].map((i) => ({
+				displayName: `Every ${i * 5} seconds`,
+				action: () => setInter(i * 5000)
+			}))
+		]}
+	>
+		<span class="grow text center">{interval ? `${interval / 1000}s` : 'once'}</span>
+		<ChevronDown class="ml-0.5" size={14} />
+	</Dropdown>
+</div>

package/package/components/apps/editor/RecomputeAllComponents.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 RecomputeAllComponentsProps = typeof __propDef.props;
+export type RecomputeAllComponentsEvents = typeof __propDef.events;
+export type RecomputeAllComponentsSlots = typeof __propDef.slots;
+export default class RecomputeAllComponents extends SvelteComponentTyped<RecomputeAllComponentsProps, RecomputeAllComponentsEvents, RecomputeAllComponentsSlots> {
+}
+export {};

package/package/components/apps/editor/SettingsPanel.svelte

@@ -0,0 +1,119 @@
+<script>import Toggle from '../../Toggle.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { getContext } from 'svelte';
+import { allItems } from '../utils';
+import { findGridItem } from './appUtils';
+import PanelSection from './settingsPanel/common/PanelSection.svelte';
+import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
+import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
+import BackgroundScriptTriggerList from './settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte';
+const { selectedComponent, app, stateId } = getContext('AppViewerContext');
+$: hiddenInlineScript = $app?.hiddenInlineScripts
+    ?.map((x, i) => ({ script: x, index: i }))
+    .find(({ script, index }) => $selectedComponent?.includes(`bg_${index}`));
+$: componentSettings = findComponentSettings($app, $selectedComponent?.[0]);
+$: tableActionSettings = findTableActionSettings($app, $selectedComponent?.[0]);
+function findTableActionSettings(app, id) {
+    return allItems(app.grid, app.subgrids)
+        .map((x) => {
+        if (x?.data?.type === 'tablecomponent') {
+            if (x?.data?.actionButtons) {
+                const tableAction = x.data.actionButtons.find((x) => x.id === id);
+                if (tableAction) {
+                    return { item: { data: tableAction, id: tableAction.id }, parent: x.data.id };
+                }
+            }
+        }
+    })
+        .find((x) => x);
+}
+function findComponentSettings(app, id) {
+    if (!id)
+        return undefined;
+    if (app?.grid) {
+        const gridItem = app.grid.find((x) => x.data?.id === id);
+        if (gridItem) {
+            return { item: gridItem, parent: undefined };
+        }
+    }
+    if (app?.subgrids) {
+        for (const key of Object.keys(app.subgrids ?? {})) {
+            const gridItem = app.subgrids[key].find((x) => x.data?.id === id);
+            if (gridItem) {
+                return { item: gridItem, parent: key };
+            }
+        }
+    }
+    return undefined;
+}
+</script>
+
+{#if componentSettings}
+	{#key componentSettings?.item?.id}
+		<ComponentPanel bind:componentSettings />
+	{/key}
+{:else if tableActionSettings}
+	{#key tableActionSettings?.item?.data?.id}
+		<ComponentPanel
+			noGrid
+			rowColumns
+			bind:componentSettings={tableActionSettings}
+			duplicateMoveAllowed={false}
+			onDelete={() => {
+				if (tableActionSettings) {
+					const parent = findGridItem($app, tableActionSettings.parent)
+					if (!parent) return
+
+					if (parent.data.type === 'tablecomponent') {
+						parent.data.actionButtons = parent.data.actionButtons.filter(
+							(x) => x.id !== tableActionSettings?.item.id
+						)
+					}
+				}
+			}}
+		/>
+	{/key}
+{:else if hiddenInlineScript}
+	<div class="min-h-full flex flex-col divide-y">
+		<PanelSection title={`Configuration`}>
+			<div class="flex items-center">
+				<Toggle
+					bind:checked={hiddenInlineScript.script.autoRefresh}
+					options={{ right: 'Run on start and app refresh' }}
+				/>
+				<Tooltip>
+					You may want to disable this so that the background script is only triggered by changes to
+					other values or triggered by another computation on a button (See 'Recompute Others')
+				</Tooltip>
+			</div>
+		</PanelSection>
+
+		<div class="p-2">
+			{#if hiddenInlineScript.script.inlineScript}
+				<BackgroundScriptTriggerList
+					fields={hiddenInlineScript.script.fields}
+					autoRefresh={hiddenInlineScript.script.autoRefresh}
+					id={`bg_${hiddenInlineScript.index}`}
+					bind:recomputeOnInputChanged={hiddenInlineScript.script.recomputeOnInputChanged}
+					bind:doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged}
+					bind:inlineScript={hiddenInlineScript.script.inlineScript}
+				/>
+			{:else}
+				<span class="text-gray-600 text-xs">No script defined</span>
+			{/if}
+		</div>
+		{#if Object.keys(hiddenInlineScript.script.fields).length > 0}
+			<PanelSection title={`Inputs`}>
+				{#key $stateId}
+					<InputsSpecsEditor
+						id={`bg_${hiddenInlineScript.index}`}
+						shouldCapitalize={false}
+						bind:inputSpecs={hiddenInlineScript.script.fields}
+						userInputEnabled={false}
+					/>
+				{/key}
+			</PanelSection>
+		{/if}
+		<div class="grow shrink" />
+	</div>
+{/if}

package/package/components/apps/editor/SettingsPanel.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 SettingsPanelProps = typeof __propDef.props;
+export type SettingsPanelEvents = typeof __propDef.events;
+export type SettingsPanelSlots = typeof __propDef.slots;
+export default class SettingsPanel extends SvelteComponentTyped<SettingsPanelProps, SettingsPanelEvents, SettingsPanelSlots> {
+}
+export {};

package/package/components/apps/editor/SubGridEditor.svelte

@@ -0,0 +1,144 @@
+<script>import { push } from '../../../history';
+import { classNames } from '../../../utils';
+import { createEventDispatcher, getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
+import Grid from '../svelte-grid/Grid.svelte';
+import { expandGriditem, findGridItem, selectId } from './appUtils';
+import Component from './component/Component.svelte';
+import ComponentWrapper from './component/ComponentWrapper.svelte';
+import GridViewer from './GridViewer.svelte';
+export let containerHeight = undefined;
+export let containerWidth = undefined;
+let classes = '';
+export { classes as class };
+export let style = '';
+export let noPadding = false;
+export let noYPadding = false;
+export let subGridId;
+export let visible = true;
+export let id;
+export let shouldHighlight = true;
+const dispatch = createEventDispatcher();
+const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
+const editorContext = getContext('AppEditorContext');
+$: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight;
+const onpointerdown = (e) => {
+    dispatch('focus');
+};
+function selectComponent(e, id) {
+    if (!$connectingInput.opened) {
+        selectId(e, id, selectedComponent, $app);
+    }
+}
+function lock(dataItem) {
+    let fComponent = findGridItem($app, dataItem.id);
+    if (fComponent) {
+        fComponent = toggleFixed(fComponent);
+    }
+    $app = $app;
+}
+let container = undefined;
+</script>
+
+<div
+	class="translate-x-0 translate-y-0 relative w-full subgrid {visible
+		? 'visible'
+		: 'invisible h-0 overflow-hidden'} 	"
+	bind:this={container}
+	on:pointerdown={onpointerdown}
+>
+	<div
+		class={twMerge(
+			'overflow-auto',
+			noYPadding ? '' : 'py-2',
+			classes ?? '',
+			noPadding ? 'px-0' : 'px-2'
+		)}
+		style="height: {containerHeight}px; {style ?? ''}"
+	>
+		{#if $mode !== 'preview'}
+			<div class={highlight ? 'border-gray-400  border border-dashed min-h-full' : ''}>
+				<Grid
+					allIdsInPath={$allIdsInPath}
+					items={$app.subgrids?.[subGridId] ?? []}
+					on:redraw={(e) => {
+						push(editorContext?.history, $app)
+						if ($app.subgrids) {
+							$app.subgrids[subGridId] = e.detail
+						}
+					}}
+					selectedIds={$selectedComponent}
+					let:dataItem
+					rowHeight={36}
+					cols={columnConfiguration}
+					fastStart={true}
+					gap={[4, 2]}
+					scroller={container}
+					parentWidth={$parentWidth - 17}
+					{containerWidth}
+				>
+					<ComponentWrapper
+						id={dataItem.id}
+						type={dataItem.data.type}
+						class={classNames(
+							'h-full w-full center-center',
+							$selectedComponent?.includes(dataItem.id) ? 'active-grid-item' : '',
+							'top-0'
+						)}
+					>
+						<Component
+							render={visible}
+							component={dataItem.data}
+							selected={Boolean($selectedComponent?.includes(dataItem.id))}
+							locked={isFixed(dataItem)}
+							on:lock={() => lock(dataItem)}
+							on:expand={() => {
+								const parentGridItem = findGridItem($app, id)
+
+								if (!parentGridItem) {
+									return
+								}
+
+								$selectedComponent = [dataItem.id]
+								push(editorContext?.history, $app)
+
+								expandGriditem(
+									$app.subgrids?.[subGridId] ?? [],
+									dataItem.id,
+									$breakpoint,
+									parentGridItem
+								)
+								$app = $app
+							}}
+						/>
+					</ComponentWrapper>
+				</Grid>
+			</div>
+		{:else}
+			<GridViewer
+				allIdsInPath={$allIdsInPath}
+				items={$app.subgrids?.[subGridId] ?? []}
+				let:dataItem
+				rowHeight={36}
+				cols={columnConfiguration}
+				gap={[4, 2]}
+				parentWidth={$parentWidth - 17}
+				{containerWidth}
+			>
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					on:pointerdown|stopPropagation={(e) => selectComponent(e, dataItem.id)}
+					class={classNames('h-full w-full center-center', 'top-0')}
+				>
+					<Component
+						render={visible}
+						component={dataItem.data}
+						selected={Boolean($selectedComponent?.includes(dataItem.id))}
+						locked={isFixed(dataItem)}
+					/>
+				</div>
+			</GridViewer>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        containerHeight?: number | undefined;
+        containerWidth?: number | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+        noPadding?: boolean | undefined;
+        noYPadding?: boolean | undefined;
+        subGridId: string;
+        visible?: boolean | undefined;
+        id: string;
+        shouldHighlight?: boolean | undefined;
+    };
+    events: {
+        focus: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SubGridEditorProps = typeof __propDef.props;
+export type SubGridEditorEvents = typeof __propDef.events;
+export type SubGridEditorSlots = typeof __propDef.slots;
+export default class SubGridEditor extends SvelteComponentTyped<SubGridEditorProps, SubGridEditorEvents, SubGridEditorSlots> {
+}
+export {};

package/package/components/apps/editor/appUtils.d.ts

@@ -0,0 +1,75 @@
+import type { App, BaseAppComponent, ConnectingInput, EditorBreakpoint, FocusedGrid, GridItem } from '../types';
+import { components, type AppComponent, type BaseComponent } from './component';
+import type { Output, World } from '../rx';
+import type { FilledItem } from '../svelte-grid/types';
+import type { EvalAppInput, StaticAppInput } from '../inputType';
+import { type Writable } from 'svelte/store';
+export declare function dfs(grid: GridItem[], id: string, subgrids: Record<string, GridItem[]>): string[] | undefined;
+export declare function selectId(e: PointerEvent, id: string, selectedComponent: Writable<string[] | undefined>, app: App): void;
+export declare function findGridItemParentGrid(app: App, id: string): string | undefined;
+export declare function allsubIds(app: App, parentId: string): string[];
+export declare function findGridItem(app: App, id: string): GridItem | undefined;
+export declare function getNextGridItemId(app: App): string;
+export declare function getAllRecomputeIdsForComponent(app: App, id: string | undefined): string[];
+export declare function createNewGridItem(grid: GridItem[], id: string, data: AppComponent, columns?: Record<number, any>): GridItem;
+export declare function getGridItems(app: App, focusedGrid: FocusedGrid | undefined): GridItem[];
+export declare function appComponentFromType<T extends keyof typeof components>(type: T): (id: string) => BaseAppComponent & BaseComponent<T>;
+export declare function insertNewGridItem(app: App, builddata: (id: string) => AppComponent, focusedGrid: FocusedGrid | undefined, columns?: Record<string, any>, keepId?: string): string;
+export declare function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]];
+export declare function deleteGridItem(app: App, component: AppComponent, parent: string | undefined, shouldKeepSubGrid: boolean): string[];
+type AvailableSpace = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+export declare function findAvailableSpace(grid: GridItem[], gridItem: GridItem, editorBreakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): AvailableSpace | undefined;
+type Outputtable<Type> = {
+    -readonly [Property in keyof Type]: Output<Type[Property]>;
+};
+export declare function initOutput<I extends Record<string, any>>(world: World, id: string, init: I): Outputtable<I>;
+export declare function initConfig<T extends Record<string, StaticAppInput | EvalAppInput | {
+    type: 'oneOf';
+    selected: string;
+    configuration: Record<string, Record<string, StaticAppInput | EvalAppInput>>;
+}>>(r: T, configuration?: Record<string, StaticAppInput | {
+    type: 'oneOf';
+    selected: string;
+    configuration: Record<string, Record<string, StaticAppInput | EvalAppInput>>;
+} | any>): {
+    [Property in keyof T]: T[Property] extends StaticAppInput ? T[Property]['value'] | undefined : T[Property] extends {
+        type: 'oneOf';
+    } ? {
+        type: 'oneOf';
+        selected: keyof T[Property]['configuration'];
+        configuration: {
+            [Choice in keyof T[Property]['configuration']]: {
+                [IT in keyof T[Property]['configuration'][Choice]]: T[Property]['configuration'][Choice][IT] extends StaticAppInput ? T[Property]['configuration'][Choice][IT]['value'] | undefined : undefined;
+            };
+        };
+    } : undefined;
+};
+export declare function expandGriditem(grid: GridItem[], id: string, $breakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): void;
+export declare function sortGridItemsPosition<T>(gridItems: FilledItem<T>[], width: number): FilledItem<T>[];
+export declare function connectInput(connectingInput: ConnectingInput, componentId: string, path: string): ConnectingInput;
+export declare function recursivelyFilterKeyInJSON(json: object, search: string, extraSearch?: string | undefined): object;
+export declare function clearErrorByComponentId(id: string, errorByComponent: Record<string, {
+    error: string;
+    componentId: string;
+}>): {};
+export declare function clearJobsByComponentId(id: string, jobs: {
+    job: string;
+    component: string;
+}[]): {
+    job: string;
+    component: string;
+}[];
+export declare function getErrorFromLatestResult(id: string, errorByComponent: Record<string, // job id
+{
+    error: string;
+    componentId: string;
+}>, jobs: {
+    job: string;
+    component: string;
+}[]): string | undefined;
+export {};