windmill-components 1.511.1 → 1.531.0

package/package/components/apps/editor/component/componentCallbacks.svelte.js

@@ -5,6 +5,7 @@ import { sendUserToast } from '../../../../toast';
 import { gridColumns } from '../../gridUtils';
 import { copyToClipboard } from '../../../../utils';
 import { get } from 'svelte/store';
+import { processSubcomponents } from '../../utils';
 // const { app, selectedComponent, focusedGrid, componentControl } =
 // 	getContext<AppViewerContext>('AppViewerContext')
 // const { history, movingcomponents, jobsDrawerOpen } =
@@ -203,7 +204,13 @@ export async function handlePaste(event, ctx) {
                 app.grid = app.grid.filter((item) => item.id !== tempGridItem?.id);
             }
             const gridItem = tempGridItem;
-            insertNewGridItem(app, (id) => ({ ...gridItem.data, id }), focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
+            insertNewGridItem(app, (id) => {
+                let newComponent = { ...gridItem.data, id };
+                processSubcomponents(newComponent, (c) => {
+                    c.id = c.id.replace(tempGridItem.id + '_', id + '_');
+                });
+                return newComponent;
+            }, focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
         }
         copyGridItemsToClipboard(tempGridItems, ctx);
         ctx.selectedComponent.set(tempGridItems.map((x) => x.id));

package/package/components/apps/editor/contextPanel/components/IdEditor.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">import { allItems } from '../../../utils';
 import { Pencil } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+import { getContext } from 'svelte';
 import IdEditorInput from '../../../../IdEditorInput.svelte';
 import Popover from '../../../../meltComponents/Popover.svelte';
 const { app, selectedComponent } = getContext('AppViewerContext');
-let { id } = $props();
-const dispatch = createEventDispatcher();
+let { id, onChange, onClose } = $props();
 let reservedIds = $derived(allItems($app.grid, $app.subgrids).map((item) => item.id));
 </script>
 
@@ -29,11 +28,12 @@ let reservedIds = $derived(allItems($app.grid, $app.subgrids).map((item) => item
 	{#snippet content({ close })}
 		<IdEditorInput
 			initialId={id}
-			on:close={() => close()}
-			on:save={(e) => {
-				dispatch('save', e.detail)
-				close()
+			{onClose}
+			onSave={(e) => {
+				onChange(e)
+				onClose?.()
 			}}
+			reservedPrefixes={['bg_', 'unused-']}
 			{reservedIds}
 		/>
 	{/snippet}

package/package/components/apps/editor/contextPanel/components/IdEditor.svelte.d.ts

@@ -1,23 +1,11 @@
 interface Props {
     id: string;
+    onChange: ({ oldId, newId }: {
+        oldId: string;
+        newId: string;
+    }) => void;
+    onClose?: () => void;
 }
-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 IdEditor: $$__sveltets_2_IsomorphicComponent<Props, {
-    save: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type IdEditor = InstanceType<typeof IdEditor>;
+declare const IdEditor: import("svelte").Component<Props, {}, "">;
+type IdEditor = ReturnType<typeof IdEditor>;
 export default IdEditor;

package/package/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
-import { allItems } from '../../../utils';
+import { allItems, processSubcomponents } from '../../../utils';
 import { classNames } from '../../../../../utils';
 import { ChevronDown, ChevronUp, Pointer } from 'lucide-svelte';
 import { getContext } from 'svelte';
@@ -30,17 +30,17 @@ const idClass = {
     blue: 'bg-blue-500 text-white',
     indigo: 'bg-indigo-500 text-white'
 };
-function renameId(newId) {
+function renameId(oldId, newId) {
     const item = findGridItem($app, id);
     if (!item) {
         return;
     }
     item.data.id = newId;
     item.id = newId;
-    const oldSubgrids = Object.keys($app.subgrids ?? {}).filter((subgrid) => subgrid.startsWith(id + '-'));
+    const oldSubgrids = Object.keys($app.subgrids ?? {}).filter((subgrid) => subgrid.startsWith(oldId + '-'));
     oldSubgrids.forEach((subgrid) => {
         if ($app.subgrids) {
-            $app.subgrids[subgrid.replace(id, newId)] = $app.subgrids[subgrid];
+            $app.subgrids[subgrid.replace(oldId, newId)] = $app.subgrids[subgrid];
             delete $app.subgrids[subgrid];
         }
     });
@@ -52,57 +52,20 @@ function renameId(newId) {
             processRunnable(from, to, x);
         });
     }
-    propagateRename(id, newId);
-    if (item?.data.type == 'tablecomponent') {
-        for (let c of item.data.actionButtons) {
-            let old = c.id;
-            c.id = c.id.replace(id + '_', newId + '_');
-            propagateRename(old, c.id);
-        }
-    }
-    if (item?.data.type == 'aggridcomponent' ||
-        item?.data.type == 'aggridcomponentee' ||
-        item?.data.type == 'dbexplorercomponent' ||
-        item?.data.type == 'aggridinfinitecomponent' ||
-        item?.data.type == 'aggridinfinitecomponentee') {
-        for (let c of item.data.actions ?? []) {
-            let old = c.id;
-            c.id = c.id.replace(id + '_', newId + '_');
-            propagateRename(old, c.id);
-        }
-    }
-    if (item?.data.type === 'menucomponent') {
-        for (let c of item.data.menuItems) {
-            let old = c.id;
-            c.id = c.id.replace(id + '_', newId + '_');
-            propagateRename(old, c.id);
-        }
-    }
+    propagateRename(oldId, newId);
+    processSubcomponents(item.data, (c) => {
+        let old = c.id;
+        c.id = c.id.replace(oldId + '_', newId + '_');
+        propagateRename(old, c.id);
+    });
     $app = $app;
     $selectedComponent = [newId];
     delete $worldStore.outputsById[id];
 }
 function renameComponent(from, to, data) {
-    if (data.type == 'tablecomponent') {
-        for (let c of data.actionButtons) {
-            renameComponent(from, to, c);
-        }
-    }
-    if ((data.type == 'aggridcomponent' ||
-        data.type == 'aggridcomponentee' ||
-        data.type == 'dbexplorercomponent' ||
-        data.type == 'aggridinfinitecomponent' ||
-        data.type == 'aggridinfinitecomponentee') &&
-        Array.isArray(data.actions)) {
-        for (let c of data.actions) {
-            renameComponent(from, to, c);
-        }
-    }
-    if (data.type === 'menucomponent') {
-        for (let c of data.menuItems) {
-            renameComponent(from, to, c);
-        }
-    }
+    processSubcomponents(data, (c) => {
+        renameComponent(from, to, c);
+    });
     let componentInput = data.componentInput;
     if (componentInput?.type == 'connected') {
         if (componentInput.connection?.componentId === from) {
@@ -212,11 +175,7 @@ function processRunnable(from, to, runnable) {
 				</button>
 				{#if selectable && renamable && $selectedComponent?.includes(id)}
 					<div class="h-3">
-						<IdEditor
-							{id}
-							on:selected={() => ($selectedComponent = [id])}
-							on:save={({ detail }) => renameId(detail)}
-						/></div
+						<IdEditor {id} onChange={({ oldId, newId }) => renameId(oldId, newId)} /></div
 					>
 				{/if}
 			</div>

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte.d.ts

@@ -30,6 +30,6 @@ declare const InlineScriptEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     delete: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "name" | "fields" | "editor" | "inlineScript">;
+}, {}, {}, "name" | "fields" | "inlineScript" | "editor">;
 type InlineScriptEditor = InstanceType<typeof InlineScriptEditor>;
 export default InlineScriptEditor;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte.d.ts

@@ -26,6 +26,6 @@ declare const InlineScriptEditorDrawer: $$__sveltets_2_IsomorphicComponent<Props
     [evt: string]: CustomEvent<any>;
 }, {}, {
     openDrawer: () => void;
-}, "isOpen" | "inlineScript">;
+}, "inlineScript" | "isOpen">;
 type InlineScriptEditorDrawer = InstanceType<typeof InlineScriptEditorDrawer>;
 export default InlineScriptEditorDrawer;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte.d.ts

@@ -26,6 +26,6 @@ declare const InlineScriptRunnableByPath: $$__sveltets_2_IsomorphicComponent<Pro
     fork: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "fields" | "runnable">;
+}, {}, {}, "runnable" | "fields">;
 type InlineScriptRunnableByPath = InstanceType<typeof InlineScriptRunnableByPath>;
 export default InlineScriptRunnableByPath;

package/package/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">import { Alert, Button, Drawer, DrawerContent } from '../../../common';
-import { Network, Plus, Trash } from 'lucide-svelte';
+import { Network, Trash } from 'lucide-svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { getContext, setContext } from 'svelte';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 import Section from '../../../Section.svelte';
 import { writable } from 'svelte/store';
 import DecisionTreePreview from './decisionTree/DecisionTreePreview.svelte';
-import { addNewBranch, removeNode } from './decisionTree/utils';
+import { removeNode } from './decisionTree/utils';
 import Label from '../../../Label.svelte';
 import { debounce } from '../../../../utils';
 import Badge from '../../../common/badge/Badge.svelte';
@@ -23,14 +23,14 @@ const { debounced: debouncedNodes } = debounce(() => {
 }, 300);
 let selectedNode = $derived(nodes?.find((node) => node.id == $selectedNodeId));
 setContext('DecisionTreeEditor', { selectedNodeId });
-let sortedSelectedNextNodes = $derived(selectedNode?.next.sort((n1, n2) => n1.id.localeCompare(n2.id)));
 </script>
 
-<Drawer bind:this={drawer} on:close={() => {}} on:open={() => {}} size="1200px">
+<Drawer bind:this={drawer} size="1800px" on:close={() => {}} on:open={() => {}}>
 	<DrawerContent
 		title="Decision tree"
 		on:close={drawer.closeDrawer}
 		noPadding
+		forceOverflowVisible
 		tooltip="Decision tree graph editor"
 	>
 		<Splitpanes>
@@ -96,31 +96,37 @@ let sortedSelectedNextNodes = $derived(selectedNode?.next.sort((n1, n2) => n1.id
 								/>
 							</Label>
 
-							{#if selectedNode.next.length > 1 && sortedSelectedNextNodes}
-								{#each sortedSelectedNextNodes as subNode, index (subNode.id)}
+							{#if selectedNode.next.length > 1}
+								{#each selectedNode.next ?? [] as subNode, index (subNode.id)}
 									{#if subNode.condition}
 										<div class="flex flex-row gap-4 items-center w-full justify-center">
 											<div class="grow relative">
 												<InputsSpecEditor
 													key={`condition-${selectedNode.id}-${index}`}
 													customTitle={index === 0
-														? 'Goes to the default branch'
-														: `${index > 0 ? 'Otherwise ' : ''}Goes to branch ${index}`}
+														? 'Goes to branch 1'
+														: `${index > 0 ? 'Otherwise g' : 'G'}oes to branch ${index + 1}`}
 													bind:componentInput={subNode.condition}
 													id={selectedNode.id}
 													userInputEnabled={false}
 													shouldCapitalize={true}
 													resourceOnly={false}
-													fieldType={subNode.condition?.['fieldType']}
-													subFieldType={subNode.condition?.['subFieldType']}
-													format={subNode.condition?.['format']}
-													selectOptions={subNode.condition?.['selectOptions']}
-													tooltip={subNode.condition?.['tooltip']}
-													fileUpload={subNode.condition?.['fileUpload']}
-													placeholder={subNode.condition?.['placeholder']}
+													fieldType={'boolean'}
+													subFieldType={undefined}
+													format={undefined}
+													selectOptions={undefined}
+													tooltip={undefined}
+													fileUpload={undefined}
+													placeholder={undefined}
 													displayType={false}
 													fixedOverflowWidgets={false}
 												/>
+												{#if index == selectedNode.next.length - 1}
+													<div class="text-xs text-secondary">
+														If no branch evaluates to true, clicking next will show an error toast.
+													</div>
+												{/if}
+
 												<div class="flex flex-row gap-1 mt-2">
 													<Badge>
 														{`Next node id: ${subNode.id}`}
@@ -133,7 +139,6 @@ let sortedSelectedNextNodes = $derived(selectedNode?.next.sort((n1, n2) => n1.id
 										</div>
 									{/if}
 								{/each}
-
 								<Alert type="info" class="mt-4" title="Multiple branches" size="xs">
 									The conditions above are evaluated in order. The first condition that is met will
 									be the branch that is taken.
@@ -142,44 +147,25 @@ let sortedSelectedNextNodes = $derived(selectedNode?.next.sort((n1, n2) => n1.id
 							{#key selectedNode.id}
 								{#if selectedNode.allowed}
 									<InputsSpecEditor
-										key={`Can proceed to next step if:`}
+										customTitle={`Can proceed to next step if:`}
+										key={`allowed-${selectedNode.id}`}
 										bind:componentInput={selectedNode.allowed}
-										id={'allowed'}
+										id={component.id}
 										userInputEnabled={false}
 										shouldCapitalize={true}
+										fieldType={'boolean'}
+										subFieldType={undefined}
+										format={undefined}
+										selectOptions={undefined}
+										tooltip={undefined}
+										fileUpload={undefined}
+										placeholder={undefined}
 										resourceOnly={false}
-										fieldType={selectedNode.allowed?.['fieldType']}
-										subFieldType={selectedNode.allowed?.['subFieldType']}
-										format={selectedNode.allowed?.['format']}
-										selectOptions={selectedNode.allowed?.['selectOptions']}
-										tooltip={selectedNode.allowed?.['tooltip']}
-										fileUpload={selectedNode.allowed?.['fileUpload']}
-										placeholder={selectedNode.allowed?.['placeholder']}
-										customTitle={selectedNode.allowed?.['customTitle']}
 										displayType={false}
 										fixedOverflowWidgets={false}
 									/>
 								{/if}
 							{/key}
-
-							{#if selectedNode?.next.length > 0}
-								<div>
-									<Button
-										startIcon={{ icon: Plus }}
-										color="light"
-										variant="border"
-										size="xs"
-										on:click={() => {
-											if (!selectedNode) return
-
-											nodes = addNewBranch(nodes, selectedNode)
-											renderCount++
-										}}
-									>
-										Add branch
-									</Button>
-								</div>
-							{/if}
 						</Section>
 					{/if}
 				</div>

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -15,7 +15,7 @@ import { fieldTypeToTsType } from '../../utils';
 import EvalV2InputEditor from './inputEditor/EvalV2InputEditor.svelte';
 import ConnectionButton from '../../../common/button/ConnectionButton.svelte';
 import Toggle from '../../../Toggle.svelte';
-let { id, componentInput = $bindable(), key, userInputEnabled = false, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, fileUpload = undefined, fileUploadS3 = undefined, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, shouldFormatExpression = false, fixedOverflowWidgets = true, loading = false, acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = true, documentationLink = undefined, markdownTooltip = undefined, securedContext = false } = $props();
+let { id, componentInput = $bindable(), key, userInputEnabled = false, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, fileUpload = undefined, fileUploadS3 = undefined, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, disabled = false, shouldFormatExpression = false, fixedOverflowWidgets = true, loading = false, acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = true, documentationLink = undefined, markdownTooltip = undefined, securedContext = false } = $props();
 $effect.pre(() => {
     if (componentInput == undefined) {
         //@ts-ignore
@@ -196,6 +196,7 @@ function openConnection() {
 				{recomputeOnInputChanged}
 				{showOnDemandOnlyToggle}
 				{securedContext}
+				{disabled}
 			/>
 		{:else if componentInput?.type === 'upload'}
 			<UploadInputEditor bind:componentInput {fileUpload} />

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte.d.ts

@@ -27,6 +27,7 @@ interface Props {
     documentationLink?: string | undefined;
     markdownTooltip?: string | undefined;
     securedContext?: boolean;
+    disabled?: boolean;
 }
 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> & {

package/package/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte

@@ -140,9 +140,7 @@ function graphBuilder(decisionTreeNodes) {
                     position: { x: -1, y: -1 },
                     data: {
                         node: {
-                            label: positionRelativeToParent === 0
-                                ? 'Default branch'
-                                : `Branch ${positionRelativeToParent}`,
+                            label: `Branch ${(positionRelativeToParent ?? 0) + 1}`,
                             id: branchHeaderId,
                             allowed: undefined,
                             next: [],

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

@@ -8,7 +8,7 @@ import { Pane, Splitpanes } from 'svelte-splitpanes';
 import Toggle from '../../../../Toggle.svelte';
 import { zIndexes } from '../../../../../zIndexes';
 import Popover from '../../../../Popover.svelte';
-let { componentInput = $bindable(), id, field, fixedOverflowWidgets = true, acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = false, securedContext = false } = $props();
+let { componentInput = $bindable(), id, field, fixedOverflowWidgets = true, acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = false, securedContext = false, disabled = false } = $props();
 const { onchange, worldStore, state: stateStore, app } = getContext('AppViewerContext');
 const { evalPreview } = getContext('AppEditorContext');
 let editor = $state();
@@ -29,7 +29,6 @@ if (componentInput && componentInput.connections == undefined) {
     componentInput.connections = [];
 }
 function inferDepsFromCode(code) {
-    console.log('inferDepsFromCode', id);
     if (componentInput) {
         inferDeps(code, $worldStore.outputsById, componentInput, app);
     }
@@ -97,6 +96,7 @@ let focus = $state(false);
 				shouldBindKey={false}
 				{extraLib}
 				autoHeight
+				{disabled}
 				{fixedOverflowWidgets}
 				on:focus={() => {
 					focus = true

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

@@ -8,6 +8,7 @@ interface Props {
     recomputeOnInputChanged?: boolean;
     showOnDemandOnlyToggle?: boolean;
     securedContext?: boolean;
+    disabled?: boolean;
 }
 declare const EvalV2InputEditor: import("svelte").Component<Props, {
     setCode: (code: string) => void;

package/package/components/apps/svelte-grid/Grid.svelte

@@ -10,23 +10,22 @@ import gridHelp from './utils/helper';
 import { twMerge } from 'tailwind-merge';
 import { getContainerHeight } from './utils/container';
 import { moveItem, getItemById, specifyUndefinedColumns } from './utils/item';
-import { onMount, createEventDispatcher, getContext } from 'svelte';
+import { onMount, getContext } from 'svelte';
 import { getColumn, throttle } from './utils/other';
 import MoveResize from './MoveResize.svelte';
 import { areShadowsTheSame, findGridItemParentGrid, getDeltaXByComponent, getDeltaYByComponent, isContainer, ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT, sortGridItemsPosition, subGridIndexKey } from '../editor/appUtils';
-const dispatch = createEventDispatcher();
 const { app, worldStore } = getContext('AppViewerContext');
-let { items, rowHeight = ROW_HEIGHT, gap = [ROW_GAP_X, ROW_GAP_Y], throttleUpdate = 100, throttleResize = 100, selectedIds, allIdsInPath, containerWidth = $bindable(undefined), scroller = undefined, sensor = 20, root = false, parentWidth = undefined, disableMove = false, children } = $props();
+let { items, rowHeight = ROW_HEIGHT, gap = [ROW_GAP_X, ROW_GAP_Y], throttleUpdate = 100, throttleResize = 100, selectedIds, allIdsInPath, containerWidth = $bindable(undefined), scroller = undefined, sensor = 20, root = false, parentWidth = undefined, disableMove = false, children, onDropped, onRedraw, onResize, onMounted } = $props();
 const cols = columnConfiguration;
 let getComputedCols = $state($app.mobileViewOnSmallerScreens == false ? WIDE_GRID_COLUMNS : undefined);
 let container = $state();
 let xPerPx = $state(0);
 let yPerPx = rowHeight;
-const onResize = throttle(() => {
+const onResizeThrottled = throttle(() => {
     if (!getComputedCols)
         return;
     sortedItems = specifyUndefinedColumns(sortedItems, getComputedCols, cols);
-    dispatch('resize', {
+    onResize?.({
         cols: getComputedCols,
         xPerPx,
         yPerPx,
@@ -51,14 +50,15 @@ onMount(() => {
             xPerPx = width / getComputedCols;
             if (!containerWidth && getComputedCols) {
                 sortedItems = specifyUndefinedColumns(sortedItems, getComputedCols, cols);
-                dispatch('mount', {
+                onMounted?.({
                     cols: getComputedCols,
                     xPerPx,
-                    yPerPx // same as rowHeight
+                    yPerPx,
+                    width
                 });
             }
             else {
-                onResize();
+                onResizeThrottled();
             }
             containerWidth = width;
             mounted = true;
@@ -89,8 +89,7 @@ function smartCopy(items) {
         })
         : [];
 }
-const updateMatrix = ({ detail }) => {
-    let isPointerUp = detail.isPointerUp;
+const updateMatrix = ({ isPointerUp, id, activate }) => {
     let citems;
     if (isPointerUp) {
         if (initItems == undefined) {
@@ -108,8 +107,8 @@ const updateMatrix = ({ detail }) => {
         citems = smartCopy(initItems);
     }
     let nselectedIds = selectedIds ?? [];
-    if (detail.id && !selectedIds?.includes(detail.id)) {
-        nselectedIds = [detail.id, ...(selectedIds ?? [])];
+    if (id && !selectedIds?.includes(id)) {
+        nselectedIds = [id, ...(selectedIds ?? [])];
     }
     for (let id of nselectedIds) {
         let activeItem = getItemById(id, citems);
@@ -155,23 +154,23 @@ const updateMatrix = ({ detail }) => {
         }
     }
     for (let id of nselectedIds ?? []) {
-        if (detail.activate) {
+        if (activate) {
             moveResizes?.[id]?.inActivate();
         }
     }
     if (isPointerUp && getComputedCols) {
-        dispatch('redraw', sortGridItemsPosition(smartCopy(sortedItems), getComputedCols));
+        onRedraw?.(sortGridItemsPosition(smartCopy(sortedItems), getComputedCols));
     }
 };
 const throttleMatrix = throttle(updateMatrix, throttleResize);
 //let hiddenComponents = writable({})
 let lastDetail = $state(undefined);
-const handleRepaint = ({ detail }) => {
-    if (!detail.isPointerUp) {
-        throttleMatrix({ detail });
+const handleRepaint = ({ isPointerUp, id, activate }) => {
+    if (!isPointerUp) {
+        throttleMatrix({ isPointerUp, id, activate });
     }
     else {
-        updateMatrix({ detail });
+        updateMatrix({ isPointerUp, id, activate });
     }
     /**
     setTimeout(() => {
@@ -367,19 +366,19 @@ $effect.pre(() => {
 				{/if}
 				<MoveResize
 					{mounted}
-					on:initmove={() => handleInitMove(item.id)}
+					onInitMove={() => handleInitMove(item.id)}
 					onMove={handleMove}
 					bind:shadow={shadows[item.id]}
 					bind:this={moveResizes[item.id]}
-					on:repaint={handleRepaint}
-					on:resizeStart={() => (resizing = true)}
-					on:resizeEnd={() => (resizing = false)}
+					onRepaint={handleRepaint}
+					onResizeStart={() => (resizing = true)}
+					onResizeEnd={() => (resizing = false)}
 					onTop={Boolean(allIdsInPath?.includes(item.id))}
 					id={item.id}
 					{xPerPx}
 					{yPerPx}
 					fakeShadow={$fakeShadowStore}
-					on:dropped={(e) => {
+					onDropped={({ id, overlapped, x, y }) => {
 						$componentDraggedIdStore = undefined
 						$componentDraggedParentIdStore = undefined
 						$overlappedStore = undefined
@@ -389,8 +388,7 @@ $effect.pre(() => {
 						if ($moveMode === 'move') {
 							return
 						}
-
-						dispatch('dropped', e.detail)
+						onDropped?.({ id, overlapped, x, y })
 					}}
 					width={xPerPx == 0
 						? 0

package/package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -16,13 +16,27 @@ declare class __sveltets_Render<T> {
         parentWidth?: number | undefined;
         disableMove?: boolean;
         children?: import("svelte").Snippet<[any]>;
+        onDropped?: ((e: {
+            id: string;
+            overlapped: string | undefined;
+            x: number;
+            y: number;
+        }) => void) | undefined;
+        onRedraw?: ((grid: FilledItem<T>[]) => void) | undefined;
+        onResize?: ((e: {
+            cols: number;
+            xPerPx: number;
+            yPerPx: number;
+            width: number | undefined;
+        }) => void) | undefined;
+        onMounted?: ((e: {
+            cols: number;
+            xPerPx: number;
+            yPerPx: number;
+            width: number | undefined;
+        }) => void) | undefined;
     };
-    events(): {
-        dropped: CustomEvent<any>;
-        resize: CustomEvent<any>;
-        mount: CustomEvent<any>;
-        redraw: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "containerWidth";
     exports(): {
@@ -43,9 +57,7 @@ interface $$IsomorphicComponent {
     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']>;
-    }): ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Grid: $$IsomorphicComponent;