windmill-components 1.493.10 → 1.501.4

package/package/components/apps/editor/DeploymentHistory.svelte

@@ -1,20 +1,21 @@
-<script lang="ts">import { Pane, Splitpanes } from 'svelte-splitpanes';
+<script lang="ts">import { stopPropagation, createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { Pane, Splitpanes } from 'svelte-splitpanes';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import { classNames, displayDate, emptyString } from '../../../utils';
 import { AppService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { Skeleton } from '../../common';
 import Button from '../../common/button/Button.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import { Pencil, ArrowRight, X, Loader2 } from 'lucide-svelte';
-export let appPath;
-let loading = false;
-let versions = [];
-let selectedVersion = undefined;
-let selected = undefined;
-let deploymentMsgUpdateMode = false;
-let deploymentMsgUpdate = undefined;
-$: selectedVersion !== undefined && loadValue(selectedVersion.version);
+let { appPath } = $props();
+let loading = $state(false);
+let versions = $state([]);
+let selectedVersion = $state(undefined);
+let selected = $state(undefined);
+let deploymentMsgUpdateMode = $state(false);
+let deploymentMsgUpdate = $state(undefined);
 async function loadVersions() {
     if (appPath === undefined) {
         return;
@@ -51,6 +52,12 @@ async function updateDeploymentMsg(appId, appVersion) {
 }
 const dispatch = createEventDispatcher();
 loadVersions();
+$effect(() => {
+    selectedVersion?.version !== undefined &&
+        untrack(() => {
+            selectedVersion && loadValue(selectedVersion.version);
+        });
+});
 </script>
 
 <Splitpanes class="!overflow-visible">
@@ -61,14 +68,14 @@ loadVersions();
 					{#if versions.length > 0}
 						<div class="flex gap-2 flex-col">
 							{#each versions ?? [] as version}
-								<!-- svelte-ignore a11y-click-events-have-key-events -->
-								<!-- svelte-ignore a11y-no-static-element-interactions -->
+								<!-- svelte-ignore a11y_click_events_have_key_events -->
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
 								<div
 									class={classNames(
 										'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
 										selectedVersion?.version == version.version ? 'bg-blue-100 text-blue-600' : ''
 									)}
-									on:click={() => {
+									onclick={() => {
 										selectedVersion = version
 										deploymentMsgUpdateMode = false
 										deploymentMsgUpdate = undefined
@@ -101,10 +108,11 @@ loadVersions();
 										type="text"
 										bind:value={deploymentMsgUpdate}
 										class="!w-auto grow"
-										on:click|stopPropagation={() => {}}
-										on:keydown|stopPropagation
-										on:keypress|stopPropagation={({ key }) => {
-											if (key === 'Enter')
+										onclick={stopPropagation(() => {})}
+										onkeydown={stopPropagation(bubble('keydown'))}
+										onkeypress={(e) => {
+											e.stopPropagation()
+											if (e.key === 'Enter')
 												updateDeploymentMsg(selected?.id, selectedVersion?.version)
 										}}
 									/>
@@ -141,7 +149,7 @@ loadVersions();
 									Deployed {displayDate(selected.created_at)} by {selected.created_by}
 								{/if}
 								<button
-									on:click={() => {
+									onclick={() => {
 										deploymentMsgUpdate = selectedVersion?.deployment_msg
 										deploymentMsgUpdateMode = true
 									}}

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

@@ -1,3 +1,6 @@
+interface Props {
+    appPath: string | undefined;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,13 +14,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const DeploymentHistory: $$__sveltets_2_IsomorphicComponent<{
-    appPath: string | undefined;
-}, {
-    keydown: KeyboardEvent;
+declare const DeploymentHistory: $$__sveltets_2_IsomorphicComponent<Props, {
     restore: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type DeploymentHistory = InstanceType<typeof DeploymentHistory>;
 export default DeploymentHistory;

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

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { gridColumns, isFixed, toggleFixed } from '../gridUtils';
 import { twMerge } from 'tailwind-merge';
 import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
@@ -16,16 +16,20 @@ import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { Loader2 } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
-export let policy;
+let { policy } = $props();
 const { selectedComponent, app, connectingInput, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath, bgRuns, worldStore } = getContext('AppViewerContext');
 const { history, componentActive } = getContext('AppEditorContext');
-let previousSelectedIds = undefined;
-$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
-    previousSelectedIds = $selectedComponent;
-    $allIdsInPath = ($selectedComponent ?? [])
-        .flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
-        .filter((x) => x != undefined);
-}
+let previousSelectedIds = $state(undefined);
+$effect(() => {
+    if (!deepEqual(previousSelectedIds, $selectedComponent)) {
+        untrack(() => {
+            previousSelectedIds = $selectedComponent;
+            $allIdsInPath = ($selectedComponent ?? [])
+                .flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
+                .filter((x) => x != undefined);
+        });
+    }
+});
 function handleLock(id) {
     const gridItem = findGridItem($app, id);
     if (gridItem) {
@@ -58,7 +62,7 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
     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 };
+    $app = $app;
     $selectedComponent = [parentComponentId];
     $focusedGrid = {
         parentComponentId,
@@ -67,6 +71,7 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 }
 </script>
 
+<input />
 <div class="w-full z-[1000] overflow-visible h-full">
 	<div class={$app.hideLegacyTopBar ? 'hidden' : ''}>
 		<div
@@ -86,15 +91,17 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 						<span class="!text-2xs text-tertiary inline-flex gap-1 items-center"
 							><Loader2 size={10} class="animate-spin" /> {$bgRuns.length}
 						</span>
-						<span slot="text"
-							><div class="flex flex-col">
-								{#each $bgRuns as bgRun}
-									<div class="flex gap-2 items-center">
-										<div class="text-2xs text-tertiary">{bgRun}</div>
-									</div>
-								{/each}
-							</div></span
-						>
+						{#snippet text()}
+							<span
+								><div class="flex flex-col">
+									{#each $bgRuns as bgRun}
+										<div class="flex gap-2 items-center">
+											<div class="text-2xs text-tertiary">{bgRun}</div>
+										</div>
+									{/each}
+								</div></span
+							>
+						{/snippet}
 					</Popover>
 				{:else}
 					<span class="w-9"></span>
@@ -115,7 +122,7 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 			</div>
 		</div>
 	</div>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<div
 		style={$app.css?.['app']?.['grid']?.style}
 		class={twMerge(
@@ -123,7 +130,7 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 			$app.css?.['app']?.['grid']?.class ?? '',
 			'wm-app-grid !static h-full w-full'
 		)}
-		on:pointerdown={() => {
+		onpointerdown={() => {
 			$selectedComponent = undefined
 			$focusedGrid = undefined
 		}}
@@ -142,10 +149,6 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 					$app.grid = e.detail
 				}}
 				root
-				let:dataItem
-				let:overlapped
-				let:moveMode
-				let:componentDraggedId
 				on:dropped={(e) => {
 					const { id, overlapped, x, y } = e.detail
 
@@ -172,55 +175,56 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 				}}
 				disableMove={!!$connectingInput.opened}
 			>
-				<ComponentWrapper
-					id={dataItem.id}
-					type={dataItem.data.type}
-					class={classNames(
-						'h-full w-full center-center outline outline-surface-secondary',
-						Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
-					)}
-				>
-					<GridEditorMenu
+				{#snippet children({ dataItem, overlapped, componentDraggedId })}
+					<ComponentWrapper
 						id={dataItem.id}
-						on:expand={() => {
-							push(history, $app)
-							$selectedComponent = [dataItem.id]
-							expandGriditem($app.grid, dataItem.id, $breakpoint)
-							$app = $app
-						}}
-						on:lock={() => {
-							handleLock(dataItem.id)
-						}}
-						on:fillHeight={() => {
-							handleFillHeight(dataItem.id)
-						}}
-						locked={isFixed(dataItem)}
-						fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+						type={dataItem.data.type}
+						class={classNames(
+							'h-full w-full center-center outline outline-surface-secondary',
+							Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
+						)}
 					>
-						<Component
-							render={true}
-							component={dataItem.data}
-							selected={Boolean($selectedComponent?.includes(dataItem.id))}
-							locked={isFixed(dataItem)}
-							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
-							on:lock={() => {
-								handleLock(dataItem.id)
-							}}
-							on:fillHeight={() => {
-								handleFillHeight(dataItem.id)
-							}}
+						<GridEditorMenu
+							id={dataItem.id}
 							on:expand={() => {
 								push(history, $app)
 								$selectedComponent = [dataItem.id]
 								expandGriditem($app.grid, dataItem.id, $breakpoint)
 								$app = $app
 							}}
-							{overlapped}
-							{moveMode}
-							{componentDraggedId}
-						/>
-					</GridEditorMenu>
-				</ComponentWrapper>
+							on:lock={() => {
+								handleLock(dataItem.id)
+							}}
+							on:fillHeight={() => {
+								handleFillHeight(dataItem.id)
+							}}
+							locked={isFixed(dataItem)}
+							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+						>
+							<Component
+								render={true}
+								component={dataItem.data}
+								selected={Boolean($selectedComponent?.includes(dataItem.id))}
+								locked={isFixed(dataItem)}
+								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+								on:lock={() => {
+									handleLock(dataItem.id)
+								}}
+								on:fillHeight={() => {
+									handleFillHeight(dataItem.id)
+								}}
+								on:expand={() => {
+									push(history, $app)
+									$selectedComponent = [dataItem.id]
+									expandGriditem($app.grid, dataItem.id, $breakpoint)
+									$app = $app
+								}}
+								{overlapped}
+								{componentDraggedId}
+							/>
+						</GridEditorMenu>
+					</ComponentWrapper>
+				{/snippet}
 			</Grid>
 		</div>
 	</div>

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

@@ -1,30 +1,12 @@
 import type { Policy } from '../../../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const GridEditor: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     policy: Policy;
-    moveComponentBetweenSubgrids?: (componentId: string, parentComponentId: string, subGridIndex: number, position?: {
-        x: number;
-        y: number;
-    }) => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+}
+declare const GridEditor: import("svelte").Component<Props, {
     moveComponentBetweenSubgrids: (componentId: string, parentComponentId: string, subGridIndex: number, position?: {
         x: number;
         y: number;
     }) => void;
-}, string>;
-type GridEditor = InstanceType<typeof GridEditor>;
+}, "">;
+type GridEditor = ReturnType<typeof GridEditor>;
 export default GridEditor;

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

@@ -1,23 +1,21 @@
-<script context="module" lang="ts">import { writable } from 'svelte/store';
+<script module lang="ts">import { writable } from 'svelte/store';
 import Popover from '../../Popover.svelte';
+import { handleCut, handleCopy } from './component/componentCallbacks.svelte';
 // Using a Svelte store for global state management
 const openedContextMenus = writable(new Set());
 </script>
 
 <script lang="ts">import { getModifierKey } from '../../../utils';
 import { Anchor, ArrowDownFromLine, Copy, Expand, ExternalLink, Paintbrush2, Scissors, Trash } from 'lucide-svelte';
-import ComponentCallbacks from './component/ComponentCallbacks.svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import DeleteComponent from './settingsPanel/DeleteComponent.svelte';
 import { secondaryMenuLeft } from './settingsPanel/secondaryMenu';
 import { clickOutside } from '../../../utils';
 import Portal from '../../Portal.svelte';
 import { twMerge } from 'tailwind-merge';
-let contextMenuVisible = false;
-let menuX = 0;
-let menuY = 0;
-export let locked = false;
-export let fullHeight = false;
+let contextMenuVisible = $state(false);
+let menuX = $state(0);
+let menuY = $state(0);
 function handleRightClick(event) {
     event.preventDefault();
     contextMenuVisible = true;
@@ -42,17 +40,25 @@ function handleClickOutside(event) {
         closeContextMenu();
     }
 }
-export let id;
-let componentCallbacks = undefined;
-const { selectedComponent } = getContext('AppViewerContext');
-const { movingcomponents, stylePanel } = getContext('AppEditorContext');
+let { locked = false, fullHeight = false, id, children } = $props();
+const { selectedComponent, focusedGrid, componentControl, app } = getContext('AppViewerContext');
+const { movingcomponents, stylePanel, jobsDrawerOpen, history } = getContext('AppEditorContext');
+const ctx = {
+    history,
+    app,
+    selectedComponent,
+    focusedGrid,
+    componentControl,
+    movingcomponents,
+    jobsDrawerOpen
+};
 const dispatch = createEventDispatcher();
-let deleteComponent = undefined;
+let deleteComponent = $state(undefined);
 const menuItems = [
     {
         label: () => 'Cut',
         onClick: () => {
-            componentCallbacks?.handleCut(new KeyboardEvent('keydown'));
+            handleCut(new KeyboardEvent('keydown'), ctx);
         },
         icon: Scissors,
         shortcut: `${getModifierKey()}X`,
@@ -61,7 +67,7 @@ const menuItems = [
     {
         label: () => 'Copy',
         onClick: () => {
-            componentCallbacks?.handleCopy(new KeyboardEvent('keydown'));
+            handleCopy(new KeyboardEvent('keydown'), ctx);
         },
         icon: Copy,
         shortcut: `${getModifierKey()}C`
@@ -123,26 +129,25 @@ const menuItems = [
 ];
 </script>
 
-<ComponentCallbacks bind:this={componentCallbacks} />
 <DeleteComponent bind:this={deleteComponent} />
 
-<svelte:window on:click={handleClickOutside} />
+<svelte:window onclick={handleClickOutside} />
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div on:click={closeContextMenu} on:contextmenu={handleRightClick} class="h-full w-full">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<slot />
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div onclick={closeContextMenu} oncontextmenu={handleRightClick} class="h-full w-full">
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	{@render children?.()}
 
 	{#if contextMenuVisible}
 		<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}>
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
 						{#each menuItems as item}
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
 
 							<Popover
 								notClickable
@@ -151,8 +156,8 @@ const menuItems = [
 								disablePopup={!item.tooltip}
 								appearTimeout={800}
 							>
-								<svelte:fragment slot="text"
-									>{item.tooltip?.text}
+								{#snippet text()}
+									{item.tooltip?.text}
 									{#if item.tooltip?.link}
 										<a href={item.tooltip.link} target="_blank" class="text-blue-300 text-xs">
 											<div class="flex flex-row gap-2 mt-4">
@@ -160,8 +165,8 @@ const menuItems = [
 												<ExternalLink size="16" />
 											</div>
 										</a>
-									{/if}</svelte:fragment
-								>
+									{/if}
+								{/snippet}
 
 								<button
 									class={twMerge(
@@ -171,14 +176,13 @@ const menuItems = [
 										item.color === 'blue' && 'text-blue-500',
 										item.disabled && 'opacity-50 cursor-not-allowed'
 									)}
-									on:click={() => {
+									onclick={() => {
 										item.onClick()
 										closeContextMenu()
 									}}
 									disabled={item.disabled}
 								>
-									<!-- svelte-ignore missing-declaration -->
-									<svelte:component this={item.icon} class="w-4 h-4" />
+									<item.icon class="w-4 h-4" />
 
 									<span class="ml-2 text-xs">{item.label()}</span>
 									{#if item.shortcut}

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

@@ -1,3 +1,9 @@
+interface Props {
+    locked?: boolean;
+    fullHeight?: boolean;
+    id: string;
+    children?: import('svelte').Snippet;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,25 +17,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const GridEditorMenu: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    locked?: boolean;
-    fullHeight?: boolean;
-    id: string;
-}, {
-    default: {};
-}>, {
+declare const GridEditorMenu: $$__sveltets_2_IsomorphicComponent<Props, {
     fillHeight: CustomEvent<any>;
     expand: CustomEvent<any>;
     lock: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
+}, {}, {}, "">;
 type GridEditorMenu = InstanceType<typeof GridEditorMenu>;
 export default GridEditorMenu;

package/package/components/apps/editor/GridViewer.svelte

@@ -6,24 +6,18 @@ import { getContainerHeight } from '../svelte-grid/utils/container';
 import { specifyUndefinedColumns } from '../svelte-grid/utils/item';
 const dispatch = createEventDispatcher();
 const { app } = getContext('AppViewerContext');
-export let items;
-export let rowHeight = ROW_HEIGHT;
-export let gap = [ROW_GAP_X, ROW_GAP_Y];
-export let throttleUpdate = 100;
-export let maxRow;
-export let breakpoint;
-export let allIdsInPath = undefined;
-export let containerWidth = undefined;
-export let parentWidth = undefined;
+let { items = $bindable(), rowHeight = ROW_HEIGHT, gap = [ROW_GAP_X, ROW_GAP_Y], throttleUpdate = 100, maxRow, breakpoint, allIdsInPath = undefined, containerWidth = $bindable(undefined), parentWidth = undefined, children } = $props();
 const cols = columnConfiguration;
-let showSkeleton = false;
-let getComputedCols = $app.mobileViewOnSmallerScreens == false ? WIDE_GRID_COLUMNS : undefined;
-let container;
-$: [gapX, gapY] = gap;
-let xPerPx = 0;
+let showSkeleton = $state(false);
+let getComputedCols = $state($app.mobileViewOnSmallerScreens == false ? WIDE_GRID_COLUMNS : undefined);
+let container = $state();
+let [gapX, gapY] = $derived(gap);
+let xPerPx = $state(0);
 let yPerPx = rowHeight;
-$: containerHeight = getContainerHeight(items, yPerPx, getComputedCols);
+let containerHeight = $derived(getContainerHeight(items, yPerPx, getComputedCols));
 const onResize = throttle(() => {
+    if (!getComputedCols)
+        return;
     items = specifyUndefinedColumns(items, getComputedCols, cols);
     dispatch('resize', {
         cols: getComputedCols,
@@ -49,6 +43,8 @@ onMount(() => {
             }
             xPerPx = width / getComputedCols;
             if (!containerWidth) {
+                if (!getComputedCols)
+                    return;
                 items = specifyUndefinedColumns(items, getComputedCols, cols);
                 dispatch('mount', {
                     cols: getComputedCols,
@@ -90,7 +86,7 @@ onMount(() => {
 					: ''} top: {top}px; left: {left}px;"
 			>
 				{#if item[getComputedCols]}
-					<slot dataItem={item} item={item[getComputedCols]} />
+					{@render children?.({ dataItem: item, item: item[getComputedCols] })}
 				{/if}
 			</div>
 		{/each}

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

@@ -4,39 +4,29 @@ declare class __sveltets_Render<T> {
     props(): {
         items: FilledItem<T>[];
         rowHeight?: number;
-        gap?: number[];
+        gap?: any;
         throttleUpdate?: number;
         maxRow: number;
         breakpoint: EditorBreakpoint;
         allIdsInPath?: string[] | undefined;
         containerWidth?: number | undefined;
         parentWidth?: number | undefined;
+        children?: import("svelte").Snippet<[any]>;
     };
     events(): {
         resize: CustomEvent<any>;
         mount: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
     };
-    slots(): {
-        default: {
-            dataItem: FilledItem<T>;
-            item: any;
-        };
-    };
-    bindings(): string;
+    slots(): {};
+    bindings(): "items" | "containerWidth";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']> & {
-        children?: any;
-    }>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
     } & ReturnType<__sveltets_Render<T>['exports']>;
     <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
         $$events?: ReturnType<__sveltets_Render<T>['events']>;
-        $$slots?: ReturnType<__sveltets_Render<T>['slots']>;
-        children?: any;
     }): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }