windmill-components 1.405.0 → 1.406.0

package/package/components/TestConnection.svelte

@@ -49,6 +49,7 @@ export async function main(s3: S3) {
 		},
 		body: JSON.stringify({
 			type: "S3",
+			region: s3.region,
 			bucket: s3.bucket,
 			endpoint: s3.endPoint,
 			port: s3.port,

package/package/components/TimeAgo.svelte

@@ -2,8 +2,8 @@
 import { displayDate } from '../utils';
 import { onDestroy, onMount } from 'svelte';
 export let date;
-export let withDate = false;
 export let agoOnlyIfRecent = false;
+export let noDate = false;
 let computedTimeAgo = undefined;
 let isRecent = true;
 let interval;
@@ -52,22 +52,21 @@ async function displayDaysAgo(dateString) {
         if (dAgo == 0) {
             return `yesterday at ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
         }
-        else if (dAgo > 7 && withDate) {
+        else if (dAgo > 7 && !noDate) {
             return `${dAgo + 1} days ago at ${date.toLocaleTimeString([], {
                 hour: '2-digit',
                 minute: '2-digit'
             })}`;
         }
         else {
-            return !withDate ? displayDate(dateString, false, withDate) : '';
+            return displayDate(dateString, false, !noDate);
         }
     }
 }
 </script>
 
-{#if withDate}
-	{displayDate(date)}
-{/if}
 {#if computedTimeAgo && (!agoOnlyIfRecent || isRecent)}
 	{computedTimeAgo}
+{:else}
+	{displayDate(date)}
 {/if}

package/package/components/TimeAgo.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         date: string;
-        withDate?: boolean | undefined;
         agoOnlyIfRecent?: boolean | undefined;
+        noDate?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/buttons/AppButton.svelte

@@ -199,7 +199,7 @@ let css = initCss($app.css?.buttoncomponent, customCss);
 </RunnableWrapper>
 
 {#if resolvedConfig?.confirmationModal?.selected === 'confirmationModal'}
-	<Portal target="#app-editor-top-level-drawer">
+	<Portal name="app-button" target="#app-editor-top-level-drawer">
 		<ConfirmationModal
 			open={Boolean(confirmedCallback)}
 			title={resolvedConfig?.confirmationModal?.configuration?.confirmationModal?.title ?? ''}

package/package/components/apps/components/display/dbtable/AppDbExplorer.svelte

@@ -511,7 +511,7 @@ let loading = false;
 		{/if}
 	</div>
 </RunnableWrapper>
-<Portal>
+<Portal name="db-explorer">
 	<Drawer bind:this={insertDrawer} size="800px">
 		<DrawerContent title="Insert row" on:close={insertDrawer.closeDrawer}>
 			<svelte:fragment slot="actions">

package/package/components/apps/components/inputs/AppMultiSelect.svelte

@@ -160,7 +160,7 @@ let open = false;
 					{option}
 				</div>
 			</MultiSelect>
-			<Portal>
+			<Portal name="app-multiselect">
 				<div use:floatingContent class="z5000" hidden={!open}>
 					<!-- svelte-ignore a11y-no-static-element-interactions -->
 					<!-- svelte-ignore a11y-click-events-have-key-events -->

package/package/components/apps/components/inputs/AppMultiSelectV2.svelte

@@ -159,7 +159,7 @@ let open = false;
 					{option}
 				</div>
 			</MultiSelect>
-			<Portal>
+			<Portal name="app-multiselect-v2">
 				<div use:floatingContent class="z5000" hidden={!open}>
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<!-- svelte-ignore a11y-no-static-element-interactions -->

package/package/components/apps/components/layout/AppDrawer.svelte

@@ -92,7 +92,7 @@ let css = initCss($app.css?.drawercomponent, customCss);
 	</AlignWrapper>
 </div>
 
-<Portal target="#app-editor-top-level-drawer">
+<Portal target="#app-editor-top-level-drawer" name="app-drawer">
 	<Drawer
 		let:open
 		bind:this={appDrawer}

package/package/components/apps/components/layout/AppModal.svelte

@@ -118,7 +118,7 @@ wrapperHeight - headerHeight - 64);
 		</AlignWrapper>
 	</div>
 {/if}
-<Portal target="#app-editor-top-level-drawer">
+<Portal target="#app-editor-top-level-drawer" name="app-modal">
 	<Disposable
 		{id}
 		let:handleClickAway

package/package/components/apps/editor/AppEditor.svelte

@@ -6,11 +6,11 @@ import { writable } from 'svelte/store';
 import { buildWorld } from '../rx';
 import AppEditorHeader from './AppEditorHeader.svelte';
 import GridEditor from './GridEditor.svelte';
-import { Button, Tab } from '../../common';
+import { Alert, Button, Tab } from '../../common';
 import TabContent from '../../common/tabs/TabContent.svelte';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import { userStore, workspaceStore } from '../../../stores';
-import { classNames, encodeState, sendUserToast } from '../../../utils';
+import { classNames, encodeState, getModifierKey, sendUserToast } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
 import ComponentList from './componentsPanel/ComponentList.svelte';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
@@ -548,7 +548,15 @@ let jobToWatch = undefined;
 			{#if $componentActive}
 				<div
 					class="absolute z-50 inset-0 h-full w-full bg-surface-secondary [background-size:16px_16px]"
-				/>
+				>
+					<div class="w-min whitespace-nowrap mx-auto pt-0.5 z-50">
+						<Alert
+							title={`Press ${getModifierKey()} to drop component inside a container.`}
+							size="xs"
+							class="h-10 py-1"
+						/>
+					</div>
+				</div>
 			{/if}
 
 			<SplitPanesWrapper>

package/package/components/apps/editor/GridEditor.svelte

@@ -1,10 +1,10 @@
 <script>import { getContext } from 'svelte';
-import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
+import { columnConfiguration, gridColumns, isFixed, toggleFixed } from '../gridUtils';
 import { twMerge } from 'tailwind-merge';
 import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
 import Component from './component/Component.svelte';
 import { push } from '../../../history';
-import { dfs, expandGriditem, findGridItem } from './appUtils';
+import { dfs, expandGriditem, findGridItem, findGridItemParentGrid, insertNewGridItem, isContainer, subGridIndexKey } from './appUtils';
 import Grid from '../svelte-grid/Grid.svelte';
 import { deepEqual } from 'fast-equals';
 import ComponentWrapper from './component/ComponentWrapper.svelte';
@@ -17,7 +17,7 @@ import Tooltip from '../../Tooltip.svelte';
 import { Loader2 } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
 export let policy;
-const { selectedComponent, app, connectingInput, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath, bgRuns } = getContext('AppViewerContext');
+const { selectedComponent, app, connectingInput, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath, bgRuns, worldStore } = getContext('AppViewerContext');
 const { history, scale, componentActive } = getContext('AppEditorContext');
 let previousSelectedIds = undefined;
 $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
@@ -41,6 +41,30 @@ function handleFillHeight(id) {
     }
     $app = $app;
 }
+export function moveComponentBetweenSubgrids(componentId, parentComponentId, subGridIndex, position) {
+    // Find the component in the source subgrid
+    const component = findGridItem($app, componentId);
+    if (!component) {
+        return;
+    }
+    let parentGrid = findGridItemParentGrid($app, component.id);
+    if (parentGrid) {
+        $app.subgrids &&
+            ($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter((item) => item.id !== component?.id));
+    }
+    else {
+        $app.grid = $app.grid.filter((item) => item.id !== component?.id);
+    }
+    const gridItem = component;
+    insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), { parentComponentId: parentComponentId, subGridIndex: subGridIndex }, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), component.id, position, undefined, undefined, undefined, true);
+    // Update the app state
+    $app = { ...$app };
+    $selectedComponent = [parentComponentId];
+    $focusedGrid = {
+        parentComponentId,
+        subGridIndex
+    };
+}
 </script>
 
 <div class="w-full z-[1000] overflow-visible h-full">
@@ -114,10 +138,37 @@ function handleFillHeight(id) {
 					push(history, $app)
 					$app.grid = e.detail
 				}}
+				root
 				let:dataItem
 				let:hidden
 				let:overlapped
+				let:moveMode
+				let:componentDraggedId
 				cols={columnConfiguration}
+				on:dropped={(e) => {
+					const { id, overlapped, x, y } = e.detail
+
+					const overlappedComponent = findGridItem($app, overlapped)
+
+					if (overlappedComponent && !isContainer(overlappedComponent.data.type)) {
+						return
+					}
+
+					if (!overlapped) {
+						return
+					}
+
+					if (id === overlapped) {
+						return
+					}
+
+					moveComponentBetweenSubgrids(
+						id,
+						overlapped,
+						subGridIndexKey(overlappedComponent?.data?.type, overlapped, $worldStore),
+						{ x, y }
+					)
+				}}
 			>
 				<ComponentWrapper
 					id={dataItem.id}
@@ -157,7 +208,9 @@ function handleFillHeight(id) {
 							on:fillHeight={() => {
 								handleFillHeight(dataItem.id)
 							}}
-							overlapped={overlapped !== undefined}
+							{overlapped}
+							{moveMode}
+							{componentDraggedId}
 						/>
 					</GridEditorMenu>
 				</ComponentWrapper>

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

@@ -3,6 +3,10 @@ import type { Policy } from '../../../gen';
 declare const __propDef: {
     props: {
         policy: Policy;
+        moveComponentBetweenSubgrids?: ((componentId: string, parentComponentId: string, subGridIndex: number, position?: {
+            x: number;
+            y: number;
+        }) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -13,5 +17,9 @@ export type GridEditorProps = typeof __propDef.props;
 export type GridEditorEvents = typeof __propDef.events;
 export type GridEditorSlots = typeof __propDef.slots;
 export default class GridEditor extends SvelteComponent<GridEditorProps, GridEditorEvents, GridEditorSlots> {
+    get moveComponentBetweenSubgrids(): (componentId: string, parentComponentId: string, subGridIndex: number, position?: {
+        x: number;
+        y: number;
+    } | undefined) => void;
 }
 export {};

package/package/components/apps/editor/GridEditorMenu.svelte

@@ -135,7 +135,7 @@ const menuItems = [
 	<slot />
 
 	{#if contextMenuVisible}
-		<Portal>
+		<Portal name="grid-editor">
 			<div style="position: fixed; top: {menuY}px; left: {menuX}px; z-index:6000;">
 				<div class="rounded-md bg-surface border shadow-md divide-y w-64">
 					<div class="p-1" use:clickOutside={false}>

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

@@ -2,9 +2,9 @@
 import { classNames } from '../../../utils';
 import { createEventDispatcher, getContext, onDestroy } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
+import { columnConfiguration, gridColumns, isFixed, toggleFixed } from '../gridUtils';
 import Grid from '../svelte-grid/Grid.svelte';
-import { expandGriditem, findGridItem, maxHeight, selectId } from './appUtils';
+import { expandGriditem, findGridItem, findGridItemParentGrid, insertNewGridItem, isContainer, maxHeight, selectId, subGridIndexKey } from './appUtils';
 import Component from './component/Component.svelte';
 import ComponentWrapper from './component/ComponentWrapper.svelte';
 import GridViewer from './GridViewer.svelte';
@@ -21,7 +21,7 @@ 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 { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint, allIdsInPath, worldStore } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 let isActive = false;
 let sber = editorContext?.componentActive?.subscribe((x) => (isActive = x));
@@ -46,6 +46,54 @@ function lock(dataItem) {
 }
 let container = undefined;
 $: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $breakpoint);
+export function moveComponentBetweenSubgrids(componentId, parentComponentId, subGridIndex, position) {
+    // Find the component in the source subgrid
+    const component = findGridItem($app, componentId);
+    if (!component) {
+        return;
+    }
+    let parentGrid = findGridItemParentGrid($app, component.id);
+    if (parentGrid) {
+        $app.subgrids &&
+            ($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter((item) => item.id !== component?.id));
+    }
+    else {
+        $app.grid = $app.grid.filter((item) => item.id !== component?.id);
+    }
+    const gridItem = component;
+    insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), { parentComponentId: parentComponentId, subGridIndex: subGridIndex }, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), component.id, position, undefined, undefined, undefined, true);
+    // Update the app state
+    $app = { ...$app };
+    if (parentGrid) {
+        $focusedGrid = {
+            parentComponentId,
+            subGridIndex
+        };
+        $selectedComponent = [parentComponentId];
+    }
+    else {
+        $focusedGrid = undefined;
+    }
+}
+export function moveToRoot(componentId, position) {
+    // Find the component in the source subgrid
+    const component = findGridItem($app, componentId);
+    if (!component) {
+        return;
+    }
+    let parentGrid = findGridItemParentGrid($app, component.id);
+    if (parentGrid) {
+        $app.subgrids &&
+            ($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter((item) => item.id !== component?.id));
+    }
+    else {
+        $app.grid = $app.grid.filter((item) => item.id !== component?.id);
+    }
+    const gridItem = component;
+    insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), undefined, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), component.id, position, undefined, undefined, undefined, true);
+    // Update the app state
+    $app = { ...$app };
+}
 </script>
 
 <div
@@ -87,10 +135,39 @@ $: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $b
 					let:dataItem
 					let:hidden
 					let:overlapped
+					let:moveMode
+					let:componentDraggedId
 					cols={columnConfiguration}
 					scroller={container}
 					parentWidth={$parentWidth - 17}
 					{containerWidth}
+					on:dropped={(e) => {
+						const { id, overlapped, x, y } = e.detail
+
+						if (!overlapped) {
+							moveToRoot(id, { x, y })
+						} else {
+							const overlappedComponent = findGridItem($app, overlapped)
+
+							if (overlappedComponent && !isContainer(overlappedComponent.data.type)) {
+								return
+							}
+							if (!overlapped) {
+								return
+							}
+
+							if (id === overlapped) {
+								return
+							}
+
+							moveComponentBetweenSubgrids(
+								id,
+								overlapped,
+								subGridIndexKey(overlappedComponent?.data?.type, overlapped, $worldStore),
+								{ x, y }
+							)
+						}
+					}}
 				>
 					<ComponentWrapper
 						id={dataItem.id}
@@ -138,6 +215,8 @@ $: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $b
 									}
 									$app = $app
 								}}
+								{moveMode}
+								{componentDraggedId}
 							/>
 						</GridEditorMenu>
 					</ComponentWrapper>

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

@@ -11,6 +11,14 @@ declare const __propDef: {
         visible?: boolean | undefined;
         id: string;
         shouldHighlight?: boolean | undefined;
+        moveComponentBetweenSubgrids?: ((componentId: string, parentComponentId: string, subGridIndex: number, position?: {
+            x: number;
+            y: number;
+        }) => void) | undefined;
+        moveToRoot?: ((componentId: string, position?: {
+            x: number;
+            y: number;
+        }) => void) | undefined;
     };
     events: {
         focus: CustomEvent<any>;
@@ -23,5 +31,13 @@ export type SubGridEditorProps = typeof __propDef.props;
 export type SubGridEditorEvents = typeof __propDef.events;
 export type SubGridEditorSlots = typeof __propDef.slots;
 export default class SubGridEditor extends SvelteComponent<SubGridEditorProps, SubGridEditorEvents, SubGridEditorSlots> {
+    get moveComponentBetweenSubgrids(): (componentId: string, parentComponentId: string, subGridIndex: number, position?: {
+        x: number;
+        y: number;
+    } | undefined) => void;
+    get moveToRoot(): (componentId: string, position?: {
+        x: number;
+        y: number;
+    } | undefined) => void;
 }
 export {};

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

@@ -23,7 +23,7 @@ export declare function getAllRecomputeIdsForComponent(app: App, id: string | un
 export declare function createNewGridItem(grid: GridItem[], id: string, data: AppComponent, columns?: Record<number, any>, initialPosition?: {
     x: number;
     y: number;
-}, recOverride?: Record<number, Size>, fixed?: boolean): GridItem;
+}, recOverride?: Record<number, Size>, fixed?: boolean, shouldNotFindSpace?: boolean): GridItem;
 export declare function getGridItems(app: App, focusedGrid: FocusedGrid | undefined): GridItem[];
 export declare function cleanseOneOfConfiguration(configuration: Record<string, Record<string, GeneralAppInput & (StaticAppInput | EvalAppInput | EvalV2AppInput)>>): {
     [k: string]: any;
@@ -37,7 +37,7 @@ export declare function appComponentFromType<T extends keyof typeof components>(
 export declare function insertNewGridItem(app: App, builddata: (id: string) => AppComponent, focusedGrid: FocusedGrid | undefined, columns?: Record<string, any>, keepId?: string, initialPosition?: {
     x: number;
     y: number;
-}, recOverride?: Record<number, Size>, keepSubgrids?: boolean, fixed?: boolean): string;
+}, recOverride?: Record<number, Size>, keepSubgrids?: boolean, fixed?: boolean, shouldNotFindSpace?: boolean): string;
 export declare function copyComponent(app: App, item: GridItem, parentGrid: FocusedGrid | undefined, subgrids: Record<string, GridItem[]>, alreadyVisited: string[]): string | undefined;
 export declare function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]];
 export declare function getAllGridItems(app: App): GridItem[];
@@ -90,4 +90,21 @@ export declare const ROW_GAP_X = 4;
 export declare function maxHeight(grid: GridItem[], windowHeight: number, breakpoint?: EditorBreakpoint): number;
 export declare function isTableAction(id: string, app: App): boolean;
 export declare function setUpTopBarComponentContent(id: string, app: App): void;
+export declare function isContainer(type: string): boolean;
+export declare function subGridIndexKey(type: string | undefined, id: string, world: World): number;
+export declare function computePosition(clientX: number, clientY: number, xPerPx: number, yPerPx: number, overlapped?: string, element?: HTMLElement): {
+    x: number;
+    y: number;
+};
+export declare function getDeltaYByComponent(type: string): "0px" | "36px + 0.5rem" | "32px";
+export declare function getDeltaXByComponent(type: string): "0px" | "0.5rem";
+export type GridShadow = {
+    x: number;
+    y: number;
+    xPerPx: number;
+    yPerPx: number;
+    w: number;
+    h: number;
+};
+export declare function areShadowsTheSame(shadow1: GridShadow | undefined, shadow2: GridShadow | undefined): boolean;
 export {};

package/package/components/apps/editor/appUtils.js

@@ -1,12 +1,12 @@
 import { ccomponents, components, getRecommendedDimensionsByComponent } from './component';
 import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
-import gridHelp from '../svelte-grid/utils/helper';
 import { get } from 'svelte/store';
 import { deepMergeWithPriority } from '../../../utils';
 import { sendUserToast } from '../../../toast';
 import { getNextId } from '../../flows/idUtils';
 import { enterpriseLicense } from '../../../stores';
+import gridHelp from '../svelte-grid/utils/helper';
 export function findComponentSettings(app, id) {
     if (!id)
         return undefined;
@@ -183,7 +183,7 @@ export function getAllRecomputeIdsForComponent(app, id) {
     });
     return recomputedBy;
 }
-export function createNewGridItem(grid, id, data, columns, initialPosition = { x: 0, y: 0 }, recOverride, fixed) {
+export function createNewGridItem(grid, id, data, columns, initialPosition = { x: 0, y: 0 }, recOverride, fixed, shouldNotFindSpace) {
     const newComponent = {
         fixed: fixed ?? false,
         x: initialPosition.x,
@@ -206,10 +206,24 @@ export function createNewGridItem(grid, id, data, columns, initialPosition = { x
             };
         }
         else {
-            newItem[column] = columns[column];
+            newItem[column] = {
+                ...columns[column],
+                x: initialPosition.x,
+                y: initialPosition.y
+            };
+        }
+        let shouldComputePosition = false;
+        // Fallback to avoid component disapearing
+        if (initialPosition.x === undefined || initialPosition.y === undefined) {
+            newItem[column].x = 0;
+            newItem[column].y = 0;
+            shouldComputePosition = true;
+        }
+        // Either the final position is controlled using initialPosition or the position is computed because the component positions are wrong
+        if (!shouldNotFindSpace || shouldComputePosition) {
+            const position = gridHelp.findSpace(newItem, grid, column);
+            newItem[column] = { ...newItem[column], ...position };
         }
-        const position = gridHelp.findSpace(newItem, grid, column);
-        newItem[column] = { ...newItem[column], ...position };
     });
     return newItem;
 }
@@ -283,7 +297,7 @@ export function appComponentFromType(type, overrideConfiguration, extra, overrid
         };
     };
 }
-export function insertNewGridItem(app, builddata, focusedGrid, columns, keepId, initialPosition = { x: 0, y: 0 }, recOverride, keepSubgrids, fixed) {
+export function insertNewGridItem(app, builddata, focusedGrid, columns, keepId, initialPosition = { x: 0, y: 0 }, recOverride, keepSubgrids, fixed, shouldNotFindSpace) {
     const id = keepId ?? getNextGridItemId(app);
     const data = builddata(id);
     if (data.type == 'aggridcomponentee' && !get(enterpriseLicense)) {
@@ -316,7 +330,7 @@ export function insertNewGridItem(app, builddata, focusedGrid, columns, keepId,
         app.subgrids[key] = [];
     }
     let grid = focusedGrid ? app.subgrids[key] : app.grid;
-    const newItem = createNewGridItem(grid, id, data, columns, initialPosition, recOverride, fixed);
+    const newItem = createNewGridItem(grid, id, data, columns, initialPosition, recOverride, fixed, shouldNotFindSpace);
     grid.push(newItem);
     return id;
 }
@@ -790,3 +804,85 @@ export function setUpTopBarComponentContent(id, app) {
         }
     });
 }
+export function isContainer(type) {
+    return (type === 'containercomponent' ||
+        type === 'tabscomponent' ||
+        type === 'verticalsplitpanescomponent' ||
+        type === 'horizontalsplitpanescomponent' ||
+        type === 'steppercomponent' ||
+        type === 'listcomponent' ||
+        type === 'decisiontreecomponent');
+}
+export function subGridIndexKey(type, id, world) {
+    switch (type) {
+        case 'containercomponent':
+        case 'verticalsplitpanescomponent':
+        case 'horizontalsplitpanescomponent':
+        case 'listcomponent':
+            return 0;
+        case 'tabscomponent': {
+            return world?.outputsById?.[id]?.selectedTabIndex?.peak() ?? 0;
+        }
+        case 'steppercomponent': {
+            return world?.outputsById?.[id]?.currentStepIndex?.peak() ?? 0;
+        }
+        case 'decisiontreecomponent': {
+            return world?.outputsById?.[id]?.currentNodeIndex?.peak() ?? 0;
+        }
+    }
+    return 0;
+}
+export function computePosition(clientX, clientY, xPerPx, yPerPx, overlapped, element) {
+    const overlappedElement = overlapped
+        ? document.getElementById(`component-${overlapped}`)
+        : document.getElementById('root-grid');
+    const xRelativeToElement = element ? clientX - element.getBoundingClientRect().left : 0;
+    const yRelativeToElement = element ? clientY - element.getBoundingClientRect().top : 0;
+    const xRelativeToOverlappedElement = overlappedElement
+        ? clientX - overlappedElement.getBoundingClientRect().left - xRelativeToElement
+        : 0;
+    const yRelativeToOverlappedElement = overlappedElement
+        ? clientY - overlappedElement.getBoundingClientRect().top - yRelativeToElement
+        : 0;
+    const gridX = Math.max(Math.round(xRelativeToOverlappedElement / xPerPx) ?? 0, 0);
+    const gridY = Math.max(Math.round(yRelativeToOverlappedElement / yPerPx) ?? 0, 0);
+    return {
+        x: gridX,
+        y: gridY
+    };
+}
+export function getDeltaYByComponent(type) {
+    switch (type) {
+        case 'steppercomponent': {
+            return '36px + 0.5rem';
+        }
+        case 'tabscomponent': {
+            return '32px';
+        }
+        default:
+            return '0px';
+    }
+}
+export function getDeltaXByComponent(type) {
+    switch (type) {
+        case 'steppercomponent': {
+            return '0.5rem';
+        }
+        case 'tabscomponent': {
+            return '0px';
+        }
+        default:
+            return '0px';
+    }
+}
+export function areShadowsTheSame(shadow1, shadow2) {
+    if (!shadow1 || !shadow2) {
+        return false;
+    }
+    return (shadow1.x === shadow2.x &&
+        shadow1.y === shadow2.y &&
+        shadow1.xPerPx === shadow2.xPerPx &&
+        shadow1.yPerPx === shadow2.yPerPx &&
+        shadow1.w === shadow2.w &&
+        shadow1.h === shadow2.h);
+}