windmill-components 1.70.0 → 1.77.0

package/components/apps/editor/GridEditor.svelte

@@ -1,13 +1,18 @@
 <script>import { getContext, afterUpdate } from 'svelte';
-import Grid from '@windmill-labs/svelte-grid';
 import { classNames } from '../../../utils';
 import { columnConfiguration, disableDrag, enableDrag, isFixed, toggleFixed } from '../gridUtils';
 import { twMerge } from 'tailwind-merge';
 import RecomputeAllComponents from './RecomputeAllComponents.svelte';
 import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
 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';
+import { settableOutput } from '../rx';
 export let policy;
-const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents, lazyGrid, summary, focusedGrid } = getContext('AppEditorContext');
+const { selectedComponent, app, mode, connectingInput, staticOutputs, 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
@@ -16,7 +21,7 @@ function setAllDrags(enable) {
     const fct = enable ? disableDrag : enableDrag;
     $app.grid.map((gridItem) => {
         const disabledGridItem = fct(gridItem);
-        if (disabledGridItem.data.subGrids) {
+        if (disabledGridItem?.data?.subGrids) {
             disabledGridItem.data.subGrids = disabledGridItem.data.subGrids.map((subgrid) => subgrid?.map((subgridItem) => fct(subgridItem)) ?? []);
         }
         return disabledGridItem;
@@ -52,30 +57,29 @@ function removeGridElement(component) {
     }
 }
 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;
         $focusedGrid = undefined;
     }
 }
-$: $app.grid && recomputeLazyGrid();
-let intervalId = undefined;
-function recomputeLazyGrid() {
-    {
-        if (intervalId) {
-            clearTimeout(intervalId);
-        }
-        intervalId = setTimeout(() => {
-            lazyGrid.set($app.grid);
-            intervalId = undefined;
-        }, 100);
-    }
-}
 let pointerdown = false;
+let lastapp = undefined;
 const onpointerdown = () => {
-    pointerdown = true;
+    if (history) {
+        lastapp = JSON.parse(JSON.stringify($app));
+        pointerdown = true;
+    }
 };
 const onpointerup = () => {
-    pointerdown = false;
+    if (history) {
+        pointerdown = false;
+        if (!deepEqual(lastapp, $app)) {
+            push(history, lastapp, false, true);
+        }
+    }
 };
 afterUpdate(() => {
     if ($selectedComponent) {
@@ -95,9 +99,9 @@ afterUpdate(() => {
 
 <div class="relative w-full z-20 overflow-visible">
 	<div
-		class="w-full sticky  top-0 flex justify-between border-l border-r border-b {$connectingInput?.opened
+		class="w-full sticky top-0 flex justify-between border-b {$connectingInput?.opened
 			? ''
-			: 'bg-gray-50 '} px-4 py-2 items-center gap-4"
+			: 'bg-gray-50 '} px-4 py-1 items-center gap-4"
 		style="z-index: 1000;"
 	>
 		<h2 class="truncate">{$summary}</h2>
@@ -109,9 +113,10 @@ afterUpdate(() => {
 		</div>
 	</div>
 
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
 		style={$app.css?.['app']?.['grid']?.style}
-		class={twMerge('px-4 pt-4 pb-2  overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
+		class={twMerge('px-4 pt-4 pb-2 overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
 		on:pointerdown={onpointerdown}
 		on:pointerleave={onpointerup}
 		on:pointerup={onpointerup}
@@ -119,59 +124,69 @@ afterUpdate(() => {
 			$selectedComponent = undefined
 			$focusedGrid = undefined
 		}}
+		bind:clientWidth={$parentWidth}
 	>
-		<Grid
-			onTopId={$selectedComponent}
-			fillSpace={false}
-			bind:items={$app.grid}
-			let:dataItem
-			rowHeight={36}
-			cols={columnConfiguration}
-			fastStart={true}
-			gap={[4, 2]}
-		>
-			{#each $lazyGrid as gridComponent (gridComponent.id)}
-				{#if 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 class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
+			<Grid
+				onTopId={$selectedComponent}
+				fillSpace={false}
+				items={$app.grid}
+				on:redraw={(e) => {
+					$app.grid = e.detail
+				}}
+				let:dataItem
+				rowHeight={36}
+				cols={columnConfiguration}
+				fastStart={true}
+				gap={[4, 2]}
+			>
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				{#if $connectingInput.opened}
 					<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' : ''
-						)}
+						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"
 					>
-						<Component
-							{pointerdown}
-							bind:pComponent={gridComponent.data}
-							selected={$selectedComponent === dataItem.data.id}
-							locked={isFixed(gridComponent)}
-							on:delete={() => removeGridElement(gridComponent.data)}
-							on:lock={() => {
-								let fComponent = $app.grid.find((c) => c.id === gridComponent.id)
-								if (fComponent) {
-									fComponent = toggleFixed(fComponent)
-								}
-							}}
-						/>
+						{dataItem.data.id}
 					</div>
 				{/if}
-			{/each}
-		</Grid>
+				<!-- 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>
 </div>
 
@@ -182,7 +197,8 @@ afterUpdate(() => {
 				id={`bg_${index}`}
 				inlineScript={script.inlineScript}
 				name={script.name}
-				bind:fields={script.fields}
+				fields={script.fields}
+				autoRefresh={script.autoRefresh ?? false}
 				bind:staticOutputs={$staticOutputs[`bg_${index}`]}
 			/>
 		{/if}

package/components/apps/editor/GridPanel.svelte

@@ -0,0 +1,29 @@
+<script>import { getContext } from 'svelte';
+import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
+const { selectedComponent } = getContext('AppViewerContext');
+export let gridItems;
+export let parent;
+</script>
+
+{#each gridItems as gridItem, i (gridItem?.data?.id ?? i)}
+	{#if gridItem?.data?.id === $selectedComponent}
+		<ComponentPanel {parent} bind:component={gridItem.data} />
+	{:else if gridItem?.data?.type === 'tablecomponent'}
+		{#each gridItem.data.actionButtons as actionButton (actionButton.id)}
+			{#if actionButton.id === $selectedComponent}
+				<ComponentPanel
+					parent={undefined}
+					noGrid
+					rowColumns
+					bind:component={actionButton}
+					duplicateMoveAllowed={false}
+					onDelete={() => {
+						gridItem.data.actionButtons = gridItem.data.actionButtons.filter(
+							(c) => c.id !== actionButton.id
+						)
+					}}
+				/>
+			{/if}
+		{/each}
+	{/if}
+{/each}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GridItem } from '../types';
+declare const __propDef: {
+    props: {
+        gridItems: GridItem[];
+        parent: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridPanelProps = typeof __propDef.props;
+export type GridPanelEvents = typeof __propDef.events;
+export type GridPanelSlots = typeof __propDef.slots;
+export default class GridPanel extends SvelteComponentTyped<GridPanelProps, GridPanelEvents, GridPanelSlots> {
+}
+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('AppEditorContext');
+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;
@@ -58,17 +64,19 @@ onMount(() => {
 <div class="flex items-center">
 	<Button
 		on:click={() => onClick()}
-		color="{timeout ? 'blue' : 'light'}"
-		variant="{timeout ? 'contained' : 'border'}"
+		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'}"
+		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
+			? `every ${interval / 1000} seconds`
+			: 'once'}"
 	>
 		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} />
 	</Button>
 	<Dropdown
 		btnClasses="!rounded-l-none !border-l-0 min-w-[4rem] !px-2"
-		color="{timeout ? 'blue' : 'light'}"
+		color={timeout ? 'blue' : 'light'}
 		variant="border"
 		dropdownItems={[
 			{
@@ -78,7 +86,7 @@ onMount(() => {
 			...[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>

package/components/apps/editor/SettingsPanel.svelte

@@ -1,41 +1,44 @@
-<script>import { getContext } from 'svelte';
-import { allItems, allItemsWithParent } from '../utils';
+<script>import Toggle from '../../Toggle.svelte';
+import { getContext } from 'svelte';
+import GridPanel from './GridPanel.svelte';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
-import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
 import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
-import TablePanel from './TablePanel.svelte';
-const { selectedComponent, app } = getContext('AppEditorContext');
+const { selectedComponent, app, stateId } = getContext('AppViewerContext');
 </script>
 
-{#each $app.grid as gridItem (gridItem.data.id)}
-	{#if gridItem.data.id === $selectedComponent}
-		<ComponentPanel parent={undefined} bind:component={gridItem.data} />
-	{:else if gridItem.data.type === 'tablecomponent'}
-		<TablePanel bind:component={gridItem.data} />
-	{/if}
-{/each}
+{#if $app.grid}
+	<GridPanel parent={undefined} bind:gridItems={$app.grid} />
+{/if}
 
 {#if $app.subgrids}
 	{#each Object.keys($app.subgrids ?? {}) as key (key)}
-		{#each $app.subgrids[key] as gridItem (gridItem.data.id)}
-			{#if gridItem.data.id === $selectedComponent}
-				<ComponentPanel parent={key} bind:component={gridItem.data} />
-			{:else if gridItem.data.type === 'tablecomponent'}
-				<TablePanel bind:component={gridItem.data} />
-			{/if}
-		{/each}
+		<GridPanel parent={key} bind:gridItems={$app.subgrids[key]} />
 	{/each}
 {/if}
 
 {#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
 	{#if $selectedComponent === `bg_${index}`}
-		<PanelSection title={`Background script inputs`}>
-			<InputsSpecsEditor
-				id={`bg_${index}`}
-				shouldCapitalize={false}
-				bind:inputSpecs={script.fields}
-				userInputEnabled={false}
-			/>
-		</PanelSection>
+		<div class="min-h-full flex flex-col divide-y">
+			<PanelSection title={`Configuration`}>
+				<Toggle
+					bind:checked={script.autoRefresh}
+					options={{ right: 'Run on start and app refresh' }}
+				/>
+			</PanelSection>
+
+			{#if Object.keys(script.fields).length > 0}
+				<PanelSection title={`Inputs`}>
+					{#key $stateId}
+						<InputsSpecsEditor
+							id={`bg_${index}`}
+							shouldCapitalize={false}
+							bind:inputSpecs={script.fields}
+							userInputEnabled={false}
+						/>
+					{/key}
+				</PanelSection>
+			{/if}
+			<div class="grow shrink" />
+		</div>
 	{/if}
 {/each}

package/components/apps/editor/SubGridEditor.svelte

@@ -1,15 +1,26 @@
 <script>import { classNames } from '../../../utils';
 import { createEventDispatcher, getContext } from 'svelte';
-import Grid from '@windmill-labs/svelte-grid';
+import { twMerge } from 'tailwind-merge';
 import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
 import Component from './component/Component.svelte';
+import { expandGriditem, findGridItem } from './appUtils';
+import { push } from '../../../history';
+import Grid from '../svelte-grid/Grid.svelte';
 export let containerHeight;
+export let containerWidth = undefined;
+let classes = '';
+export { classes as class };
+export let style = '';
 export let noPadding = false;
-//export let id: string
+export let noYPadding = false;
 export let subGrid = [];
 export let visible = true;
+export let id;
+export let shouldHighlight = true;
 const dispatch = createEventDispatcher();
-const { app, connectingInput, selectedComponent, focusedGrid } = getContext('AppEditorContext');
+const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
+$: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight;
 let pointerdown = false;
 let onComponent = undefined;
 const onpointerdown = (e) => {
@@ -36,75 +47,96 @@ function selectComponent(id) {
         */
     }
 }
-function lock(gridComponent) {
-    let fComponent = $app.grid.find((c) => c.id === gridComponent.id);
+function lock(dataItem) {
+    let fComponent = findGridItem($app, dataItem.data.id);
     if (fComponent) {
         fComponent = toggleFixed(fComponent);
     }
+    $app = $app;
 }
 // @ts-ignore
 let container;
 </script>
 
-<div class="relative w-full subgrid {visible ? 'visible' : 'invisible h-0 '}" bind:this={container}>
+<div
+	class="translate-x-0 translate-y-0 relative w-full subgrid {visible
+		? 'visible'
+		: 'invisible h-0 overflow-hidden'} 	"
+	bind:this={container}
+>
 	<div
-		class:px-2={!noPadding}
-		class="py-2 overflow-auto  {$connectingInput?.opened ? '' : ''}"
+		class={twMerge(
+			'overflow-auto',
+			noYPadding ? '' : 'py-2',
+			classes ?? '',
+			noPadding ? 'px-0' : 'px-2'
+		)}
 		on:pointerdown|stopPropagation={onpointerdown}
 		on:pointerleave={onpointerup}
 		on:pointerup={onpointerup}
-		style="height: {containerHeight}px;"
+		style="height: {containerHeight}px; {style ?? ''}"
 	>
-		<div>
+		<div class={highlight && $mode !== 'preview' ? 'border-gray-400  border border-dashed' : ''}>
 			<Grid
-				bind:items={subGrid}
+				items={subGrid}
+				on:redraw={(e) => {
+					subGrid = e.detail
+				}}
 				let:dataItem
 				rowHeight={36}
 				cols={columnConfiguration}
 				fastStart={true}
 				gap={[4, 2]}
 				scroller={container}
+				parentWidth={$parentWidth - 17}
+				{containerWidth}
 			>
-				{#each subGrid as gridComponent (gridComponent.id)}
-					{#if gridComponent.data.id === dataItem.data.id}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						{#if $connectingInput.opened}
-							{#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"
-								/>
-							{/if}
-							<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 -->
+				{#if $connectingInput.opened}
+					<div
+						on:pointerenter={() => ($connectingInput.hoveredComponent = dataItem.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: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' : '',
-								'top-0'
-							)}
-						>
-							<Component
-								{pointerdown}
-								bind:pComponent={gridComponent.data}
-								selected={$selectedComponent === dataItem.data.id}
-								locked={isFixed(gridComponent)}
-								on:lock={() => lock(gridComponent)}
-							/>
-						</div>
-					{/if}
-				{/each}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					on:pointerdown={() => selectComponent(dataItem.data.id)}
+					class={classNames(
+						'h-full w-full center-center',
+						$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
+						dataItem.data.card ? 'border border-gray-100' : '',
+						'top-0'
+					)}
+				>
+					<Component
+						render={visible}
+						{pointerdown}
+						component={dataItem.data}
+						selected={$selectedComponent === dataItem.data.id}
+						locked={isFixed(dataItem)}
+						on:lock={() => lock(dataItem)}
+						on:expand={() => {
+							const parentGridItem = findGridItem($app, id)
+
+							if (!parentGridItem) {
+								return
+							}
+							$selectedComponent = dataItem.data.id
+							push(history, $app)
+
+							expandGriditem(subGrid, dataItem, $breakpoint, parentGridItem)
+							$app = $app
+						}}
+					/>
+				</div>
 			</Grid>
 		</div>
 	</div>

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

@@ -1,13 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
+import type { GridItem } from '../types';
 declare const __propDef: {
     props: {
         containerHeight: number;
+        containerWidth?: number | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
         noPadding?: boolean | undefined;
-        subGrid?: FilledItem<{
-            data: import("./component").AppComponent;
-            id: string;
-        }>[] | undefined;
+        noYPadding?: boolean | undefined;
+        subGrid?: GridItem[] | undefined;
         visible?: boolean | undefined;
+        id: string;
+        shouldHighlight?: boolean | undefined;
     };
     events: {
         focus: CustomEvent<any>;

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

@@ -1,9 +1,28 @@
-import type { App, FocusedGrid, GridItem } from '../types';
+import type { App, ConnectingInput, EditorBreakpoint, FocusedGrid, GridItem } from '../types';
 import { type AppComponent } from './component';
+import type { Output, World } from '../rx';
+export declare function findGridItemParentGrid(app: App, id: string): string | undefined;
+export declare function isIdInsideGriditem(app: App, gridItem: GridItem, id: string | undefined): boolean;
 export declare function findGridItem(app: App, id: string): GridItem | undefined;
 export declare function getNextGridItemId(app: App): string;
 export declare function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem;
+export declare function getGridItems(app: App, focusedGrid: FocusedGrid | undefined): GridItem[];
 export declare function insertNewGridItem(app: App, data: AppComponent, focusedGrid: FocusedGrid | undefined, keepId?: boolean): string;
 export declare function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]];
-export declare function deleteGridItem(app: App, component: AppComponent, parent: string | undefined): string[];
-export declare function duplicateGridItem(app: App, parent: string | undefined, id: string): string | undefined;
+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 | undefined, id: string, init: I): Outputtable<I>;
+export declare function expandGriditem(grid: GridItem[], gridComponent: GridItem, $breakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): void;
+export declare function sortGridItemsPosition(gridItems: GridItem[], breakpoint: EditorBreakpoint): GridItem[];
+export declare function connectInput(connectingInput: ConnectingInput, componentId: string, path: string): ConnectingInput;
+export declare function recursivelyFilterKeyInJSON(json: object, search: string, extraSearch?: string | undefined): object;
+export {};