refactor: add callback props alongside createEventDispatcher for svelte 5 migration

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/lib/components/AppConnectDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-
 	import { createEventDispatcher } from 'svelte'
 	import { Button, Drawer } from './common'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
@@ -9,9 +8,10 @@
 
 	interface Props {
 		expressOAuthSetup?: boolean
+		onclose?: (...args: any[]) => any
 	}
 
-	let { expressOAuthSetup = false }: Props = $props()
+	let { expressOAuthSetup = false, onclose = undefined }: Props = $props()
 
 	let drawer: Drawer | undefined = $state()
 	let resourceType = $state('')
@@ -47,6 +47,7 @@
 	on:close={() => {
 		step = 1
 		dispatch('close')
+		onclose?.()
 	}}
 	size="800px"
 >

frontend/src/lib/components/AppConnectInner.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-
 	import { superadmin, userStore, workspaceStore } from '$lib/stores'
 	import IconedResourceType from './IconedResourceType.svelte'
 	import {
@@ -41,6 +40,9 @@
 		disabled?: boolean
 		manual?: boolean
 		express?: boolean
+		onerror?: (...args: any[]) => any
+		onrefresh?: (...args: any[]) => any
+		onclose?: (...args: any[]) => any
 	}
 
 	let {
@@ -49,7 +51,10 @@
 		isGoogleSignin = $bindable(false),
 		disabled = $bindable(false),
 		manual = $bindable(true),
-		express = false
+		express = false,
+		onerror = undefined,
+		onrefresh = undefined,
+		onclose = undefined
 	}: Props = $props()
 
 	let isValid = $state(true)
@@ -146,6 +151,7 @@
 		manual = !connects?.includes(resourceType)
 		if (manual && express) {
 			dispatch('error', 'Express OAuth setup is not available for non OAuth resource types')
+			onerror?.('Express OAuth setup is not available for non OAuth resource types')
 			return
 		}
 		if (rt) {
@@ -492,7 +498,9 @@
 				}
 			})
 			dispatch('refresh', path)
+			onrefresh?.(path)
 			dispatch('close')
+			onclose?.()
 			sendUserToast(`Saved resource${saveVariable ? ' and variable' : ''} path: ${path}`)
 			step = 1
 			resourceType = ''

frontend/src/lib/components/ArgEnum.svelte

@@ -14,6 +14,8 @@
 		enumLabels?: Record<string, string> | undefined
 		selectClass?: string
 		onClear?: () => void
+		onfocus?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
 	}
 
 	let {
@@ -26,7 +28,9 @@
 		create,
 		enumLabels = undefined,
 		selectClass = '',
-		onClear = undefined
+		onClear = undefined,
+		onfocus = undefined,
+		onblur = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -79,8 +83,8 @@
 				cleared = true
 				value = undefined
 			}}
-			onFocus={() => dispatch('focus')}
-			onBlur={() => dispatch('blur')}
+			onFocus={() => (dispatch('focus'), onfocus?.())}
+			onBlur={() => (dispatch('blur'), onblur?.())}
 			inputClass={selectClass}
 		/>
 	</div>

frontend/src/lib/components/ArgInput.svelte

@@ -126,6 +126,13 @@
 		actions?: import('svelte').Snippet
 		innerBottomSnippet?: import('svelte').Snippet
 		fieldHeaderActions?: import('svelte').Snippet
+		onkeydownCmdEnter?: (...args: any[]) => any
+		onchange?: (...args: any[]) => any
+		onacceptChange?: (...args: any[]) => any
+		onrejectChange?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
+		onnestedChange?: (...args: any[]) => any
 	}
 
 	let {
@@ -187,7 +194,14 @@
 		actions,
 		innerBottomSnippet,
 		fieldHeaderActions,
-		lightHeaderFont = false
+		lightHeaderFont = false,
+		onkeydownCmdEnter = undefined,
+		onchange = undefined,
+		onacceptChange = undefined,
+		onrejectChange = undefined,
+		onfocus = undefined,
+		onblur = undefined,
+		onnestedChange = undefined
 	}: Props = $props()
 
 	$effect(() => {
@@ -475,6 +489,7 @@
 		) {
 			if (e.key == 'Enter') {
 				dispatch('keydownCmdEnter')
+				onkeydownCmdEnter?.()
 			}
 			return
 		}
@@ -490,6 +505,7 @@
 		if (!deepEqual(oldValue, value)) {
 			oldValue = value
 			dispatch('change')
+			onchange?.()
 		}
 	}
 
@@ -603,6 +619,7 @@
 				onclick={stopPropagation(
 					preventDefault(() => {
 						dispatch('acceptChange', { label, nestedParent })
+						onacceptChange?.({ label, nestedParent })
 					})
 				)}
 			>
@@ -613,6 +630,7 @@
 				onclick={stopPropagation(
 					preventDefault(() => {
 						dispatch('rejectChange', { label, nestedParent })
+						onrejectChange?.({ label, nestedParent })
 					})
 				)}
 			>
@@ -752,8 +770,8 @@
 				{defaultValue}
 				{setNewValueFromCode}
 				{workspace}
-				onFocus={() => dispatch('focus')}
-				onBlur={() => dispatch('blur')}
+				onFocus={() => (dispatch('focus'), onfocus?.())}
+				onBlur={() => (dispatch('blur'), onblur?.())}
 				bind:editor
 				{appPath}
 				{computeS3ForceViewerPolicies}
@@ -786,6 +804,7 @@
 							// Update the value to trigger reactivity
 							value = { ...value }
 							dispatch('change')
+							onchange?.()
 						}
 					}}
 				/>
@@ -836,7 +855,7 @@
 								{disabled}
 								bind:value
 								items={safeSelectItems(itemsType?.multiselect)}
-								onOpen={() => dispatch('focus')}
+								onOpen={() => (dispatch('focus'), onfocus?.())}
 								reorderable
 							/>
 						</div>
@@ -846,7 +865,7 @@
 								{disabled}
 								bind:value
 								items={safeSelectItems(enum_)}
-								onOpen={() => dispatch('focus')}
+								onOpen={() => (dispatch('focus'), onfocus?.())}
 								reorderable
 							/>
 						</div>
@@ -856,7 +875,7 @@
 								{disabled}
 								bind:value
 								items={safeSelectItems(itemsType?.enum)}
-								onOpen={() => dispatch('focus')}
+								onOpen={() => (dispatch('focus'), onfocus?.())}
 								reorderable
 							/>
 						</div>
@@ -892,8 +911,7 @@
 												{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
 													<FileInput
 														class="w-full"
-														onChange={(x) =>
-															fileChangedInner(x?.[0], (val) => (value[i] = val))}
+														onChange={(x) => fileChangedInner(x?.[0], (val) => (value[i] = val))}
 														multiple={false}
 													/>
 													{@render deleteItemBtn()}
@@ -912,9 +930,11 @@
 														create={extra['disableCreate'] != true}
 														on:focus={() => {
 															dispatch('focus')
+															onfocus?.()
 														}}
 														on:blur={(e) => {
 															dispatch('blur')
+															onblur?.()
 														}}
 														{defaultValue}
 														valid={valid ?? true}
@@ -946,9 +966,11 @@
 															bind:editor
 															on:focus={(e) => {
 																dispatch('focus')
+																onfocus?.()
 															}}
 															on:blur={(e) => {
 																dispatch('blur')
+																onblur?.()
 															}}
 															code={JSON.stringify(v, null, 2)}
 															bind:value={value[i]}
@@ -1132,6 +1154,7 @@
 												}),
 												() => {
 													dispatch('nestedChange')
+													onnestedChange?.()
 												}
 											}
 											bind:args={value}
@@ -1175,6 +1198,7 @@
 											{shouldDispatchChanges}
 											on:change={() => {
 												dispatch('nestedChange')
+												onnestedChange?.()
 											}}
 											on:nestedChange
 										/>
@@ -1198,9 +1222,11 @@
 										bind:editor
 										on:focus={(e) => {
 											dispatch('focus')
+											onfocus?.()
 										}}
 										on:blur={(e) => {
 											dispatch('blur')
+											onblur?.()
 										}}
 										code={rawValue}
 										on:changeValue={(e) => {
@@ -1220,9 +1246,11 @@
 								bind:editor
 								on:focus={(e) => {
 									dispatch('focus')
+									onfocus?.()
 								}}
 								on:blur={(e) => {
 									dispatch('blur')
+									onblur?.()
 								}}
 								code={rawValue}
 								on:change={(e) => {
@@ -1257,9 +1285,11 @@
 							diff={diffStatus && typeof diffStatus.diff === 'object' ? diffStatus.diff : {}}
 							on:acceptChange={(e) => {
 								dispatch('acceptChange', e.detail)
+								onacceptChange?.(e.detail)
 							}}
 							on:rejectChange={(e) => {
 								dispatch('rejectChange', e.detail)
+								onrejectChange?.(e.detail)
 							}}
 							on:nestedChange
 							nestedParent={{ label, nestedParent }}
@@ -1285,12 +1315,15 @@
 							nestedParent={{ label, nestedParent }}
 							on:acceptChange={(e) => {
 								dispatch('acceptChange', e.detail)
+								onacceptChange?.(e.detail)
 							}}
 							on:rejectChange={(e) => {
 								dispatch('rejectChange', e.detail)
+								onrejectChange?.(e.detail)
 							}}
 							on:change={() => {
 								dispatch('nestedChange')
+								onnestedChange?.()
 							}}
 							on:nestedChange
 							{shouldDispatchChanges}
@@ -1307,9 +1340,11 @@
 						bind:editor
 						on:focus={(e) => {
 							dispatch('focus')
+							onfocus?.()
 						}}
 						on:blur={(e) => {
 							dispatch('blur')
+							onblur?.()
 						}}
 						code={rawValue}
 						on:changeValue={(e) => {
@@ -1347,9 +1382,11 @@
 					{autofocus}
 					on:focus={() => {
 						dispatch('focus')
+						onfocus?.()
 					}}
 					on:blur={(e) => {
 						dispatch('blur')
+						onblur?.()
 					}}
 					enumLabels={extra['enumLabels']}
 				/>
@@ -1373,9 +1410,11 @@
 						<Module.default
 							on:focus={(e) => {
 								dispatch('focus')
+								onfocus?.()
 							}}
 							on:blur={(e) => {
 								dispatch('blur')
+								onblur?.()
 							}}
 							on:change={(e) => {
 								setNewValueFromCode(e.detail?.code)
@@ -1448,8 +1487,8 @@
 							<TextInput
 								inputProps={{
 									autofocus,
-									onfocus: () => dispatch('focus'),
-									onblur: () => dispatch('blur'),
+									onfocus: () => (dispatch('focus'), onfocus?.()),
+									onblur: () => (dispatch('blur'), onblur?.()),
 									disabled,
 									onkeydown: onKeyDown,
 									placeholder: placeholder ?? defaultValue ?? '',

frontend/src/lib/components/AssignableTagsInner.svelte

@@ -15,9 +15,10 @@
 
 	interface Props {
 		variant?: 'popover' | 'drawer'
+		onrefresh?: (...args: any[]) => any
 	}
 
-	let { variant = 'popover' }: Props = $props()
+	let { variant = 'popover', onrefresh = undefined }: Props = $props()
 
 	let newTag: string = $state('')
 	let customTags: string[] | undefined = $state(undefined)
@@ -82,6 +83,7 @@
 				requestBody: { value: [...(customTags ?? []), tag.trim().replaceAll(' ', '_')] }
 			})
 			dispatch('refresh')
+			onrefresh?.()
 			loadCustomTags()
 			sendUserToast(restoreCustomTags ? 'Tag restored' : 'Tag added')
 			if (!restoreCustomTags) {
@@ -119,6 +121,7 @@
 										requestBody: { value: customTags?.filter((x) => x != customTag) }
 									})
 									dispatch('refresh')
+									onrefresh?.()
 									loadCustomTags()
 									sendUserToast('Tag removed', false, [
 										{

frontend/src/lib/components/ChangeInstanceUsernameInner.svelte

@@ -6,18 +6,22 @@
 	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
-		email: string;
-		username: string;
-		isConflict?: boolean;
-		noPadding?: boolean;
+		email: string
+		username: string
+		isConflict?: boolean
+		noPadding?: boolean
+		onrenamed?: (...args: any[]) => any
+		onclose?: (...args: any[]) => any
 	}
 
 	let {
 		email,
 		username = $bindable(),
 		isConflict = false,
-		noPadding = false
-	}: Props = $props();
+		noPadding = false,
+		onrenamed = undefined,
+		onclose = undefined
+	}: Props = $props()
 
 	let loading = $state(false)
 
@@ -75,6 +79,7 @@
 			sendUserToast(`Renamed user ${email} to ${username}`)
 
 			dispatch('renamed')
+			onrenamed?.()
 		} finally {
 			loading = false
 		}
@@ -134,6 +139,7 @@
 		on:click={() => {
 			renameUser().then(() => {
 				dispatch('close')
+				onclose?.()
 			})
 		}}
 		disabled={email === undefined || !username}

frontend/src/lib/components/ContentSearchInner.svelte

@@ -23,9 +23,10 @@
 	const dispatch = createEventDispatcher()
 	interface Props {
 		search?: string
+		onclose?: (...args: any[]) => any
 	}
 
-	let { search = $bindable('') }: Props = $props()
+	let { search = $bindable(''), onclose = undefined }: Props = $props()
 
 	export async function open(nsearch?: string) {
 		await Promise.all([loadScripts(), loadResources(), loadApps(), loadFlows()])
@@ -252,7 +253,7 @@
 								<Button
 									href={`/scripts/get/${item.path}`}
 									startIcon={{ icon: ExternalLink }}
-									on:click={() => dispatch('close')}
+									on:click={() => (dispatch('close'), onclose?.())}
 								>
 									Open
 								</Button>
@@ -319,7 +320,7 @@
 								<Button
 									href={`/flows/get/${item.path}`}
 									startIcon={{ icon: ExternalLink }}
-									on:click={() => dispatch('close')}
+									on:click={() => (dispatch('close'), onclose?.())}
 								>
 									Open
 								</Button>
@@ -359,7 +360,7 @@
 								<Button
 									href={`/apps/get/${item.path}`}
 									startIcon={{ icon: ExternalLink }}
-									on:click={() => dispatch('close')}
+									on:click={() => (dispatch('close'), onclose?.())}
 								>
 									Open
 								</Button>

frontend/src/lib/components/ContentSearchInnerItem.svelte

@@ -6,9 +6,10 @@
 		href: string
 		actions?: import('svelte').Snippet
 		children?: import('svelte').Snippet
+		onclose?: (...args: any[]) => any
 	}
 
-	let { title, href, actions, children }: Props = $props()
+	let { title, href, actions, children, onclose = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -20,6 +21,7 @@
 			{href}
 			onclick={() => {
 				dispatch('close')
+				onclose?.()
 			}}
 		>
 			{title}

frontend/src/lib/components/DarkModeObserver.svelte

@@ -36,10 +36,13 @@
 	import { onMount, onDestroy } from 'svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	let { darkMode = $bindable(false) }: { darkMode?: boolean } = $props()
+	let {
+		darkMode = $bindable(false),
+		onchange = undefined
+	}: { darkMode?: boolean; onchange?: (...args: any[]) => any } = $props()
 	const dispatch = createEventDispatcher()
 	let isDarkMode = useIsDarkMode({
-		onChange: (newDarkMode) => dispatch('change', newDarkMode)
+		onChange: (newDarkMode) => (dispatch('change', newDarkMode), onchange?.(newDarkMode))
 	})
 	$effect(() => {
 		if (darkMode !== isDarkMode.val) {

frontend/src/lib/components/DateInput.svelte

@@ -12,6 +12,7 @@
 		maxDate?: string | undefined
 		dateFormat?: string | undefined
 		disabled?: boolean
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -20,7 +21,8 @@
 		minDate = undefined,
 		maxDate = undefined,
 		dateFormat = 'dd-MM-yyyy',
-		disabled = false
+		disabled = false,
+		onchange = undefined
 	}: Props = $props()
 
 	const defaultDateFormat = 'dd-MM-yyyy'
@@ -60,6 +62,7 @@
 				const parsedDate = format(dateFromValue, getFormat())
 				value = parsedDate
 				dispatch('change', value)
+				onchange?.(value)
 			} catch (error) {
 				console.error('Failed to parse date:', error)
 			}
@@ -91,6 +94,7 @@
 			} else {
 				value = null
 				dispatch('change', value)
+				onchange?.(value)
 			}
 		}}
 	/>

frontend/src/lib/components/DateTimeInput.svelte

@@ -25,6 +25,8 @@
 		 * 'local' will use the local timezone of the user
 		 */
 		timezone?: 'naive' | 'local'
+		onchange?: (...args: any[]) => any
+		onclear?: (...args: any[]) => any
 	}
 
 	let {
@@ -36,7 +38,9 @@
 		maxDate = undefined,
 		disabled = undefined,
 		inputClass = undefined,
-		timezone = 'local'
+		timezone = 'local',
+		onchange = undefined,
+		onclear = undefined
 	}: Props = $props()
 
 	let date: string | undefined = $state(undefined)
@@ -80,6 +84,7 @@
 		if (date === '' && value) {
 			value = null
 			dispatchIfMounted('change', value)
+			onchange?.(value)
 			return
 		}
 
@@ -89,6 +94,7 @@
 			if (newDate.getFullYear() < 1900) return
 			value = newDate.toISOString()
 			dispatchIfMounted('change', value)
+			onchange?.(value)
 		}
 	}
 
@@ -114,6 +120,7 @@
 		newDate.setMinutes(newDate.getMinutes() + mins)
 		value = newDate.toISOString()
 		dispatch('change', value)
+		onchange?.(value)
 	}
 
 	let randomId = 'datetarget-' + Math.random().toString(36).substring(7)
@@ -189,6 +196,7 @@
 			on:click={() => {
 				value = null
 				dispatch('clear')
+				onclear?.()
 			}}
 		></Button>
 	{/if}

frontend/src/lib/components/DeployButton.svelte

@@ -7,7 +7,8 @@
 		loading = false,
 		loadingSave = false,
 		newFlow = false,
-		dropdownItems = []
+		dropdownItems = [],
+		onsave = undefined
 	}: {
 		loading?: boolean
 		loadingSave?: boolean
@@ -16,6 +17,7 @@
 			label: string
 			onClick: () => void
 		}>
+		onsave?: (...args: any[]) => any
 	} = $props()
 
 	const dispatch = createEventDispatcher()
@@ -32,7 +34,7 @@
 	variant="accent"
 	unifiedSize="md"
 	startIcon={{ icon: Save }}
-	on:click={() => dispatch('save')}
+	on:click={() => (dispatch('save'), onsave?.())}
 	dropdownItems={!newFlow ? dropdownItems : undefined}
 	tooltipPopover={{
 		placement: 'bottom-end',
@@ -66,6 +68,7 @@
 				onkeydown={async (e) => {
 					if (e.key === 'Enter') {
 						dispatch('save', deploymentMsg)
+						onsave?.(deploymentMsg)
 					}
 				}}
 				bind:this={msgInput}
@@ -73,7 +76,7 @@
 			<Button
 				unifiedSize="md"
 				variant="accent"
-				on:click={async () => dispatch('save', deploymentMsg)}
+				on:click={async () => (dispatch('save', deploymentMsg), onsave?.(deploymentMsg))}
 				endIcon={{ icon: CornerDownLeft }}
 				loading={loadingSave}
 			>

frontend/src/lib/components/DeployWorkspace.svelte

@@ -48,6 +48,7 @@
 		workspaceToDeployTo?: string | undefined
 		hideButton?: boolean
 		canDeployToWorkspace?: boolean
+		onupdate?: (...args: any[]) => any
 	}
 
 	let {
@@ -56,7 +57,8 @@
 		additionalInformation = undefined,
 		workspaceToDeployTo = $bindable(undefined),
 		hideButton = false,
-		canDeployToWorkspace = $bindable(true)
+		canDeployToWorkspace = $bindable(true),
+		onupdate = undefined
 	}: Props = $props()
 
 	let canSeeTarget: 'yes' | 'cant-deploy-to-workspace' | 'cant-see-all-deps' | undefined =
@@ -99,9 +101,7 @@
 			if (!$superadmin) {
 				const targetUser = await UserService.whoami({ workspace: workspaceToDeployTo! })
 				canPreserveOnBehalfOf =
-					targetUser.is_admin ||
-					targetUser.groups?.includes('wm_deployers') ||
-					false
+					targetUser.is_admin || targetUser.groups?.includes('wm_deployers') || false
 			} else {
 				canPreserveOnBehalfOf = true
 			}
@@ -315,6 +315,7 @@
 			}
 		})
 		dispatch('update', initialPath)
+		onupdate?.(initialPath)
 	}
 
 	function computeStatusPath(kind: Kind, path: string) {
@@ -538,16 +539,14 @@
 							{#if kind === 'trigger'}
 								You must set the "edited by" user for all triggers before deploying
 								<Tooltip class="text-yellow-600">
-									The "edited by" field defines which user's permissions will be applied
-									when the trigger runs. Make sure this is set to an appropriate user
-									before deploying.
+									The "edited by" field defines which user's permissions will be applied when the
+									trigger runs. Make sure this is set to an appropriate user before deploying.
 								</Tooltip>
 							{:else}
 								You must set the "on behalf of" user for all items before deploying
 								<Tooltip class="text-yellow-600">
-									The "run on behalf of" field defines which user's permissions will be
-									applied during execution. Make sure this is set to an appropriate user
-									before deploying.
+									The "run on behalf of" field defines which user's permissions will be applied
+									during execution. Make sure this is set to an appropriate user before deploying.
 								</Tooltip>
 							{/if}
 						</span>

frontend/src/lib/components/DisplayResult.svelte

@@ -100,6 +100,7 @@
 		copilot_fix?: import('svelte').Snippet
 		children?: import('svelte').Snippet
 		growVertical?: boolean
+		ontoolbarLocationChanged?: (...args: any[]) => any
 	}
 
 	let {
@@ -124,7 +125,8 @@
 		copilot_fix,
 		children,
 		loading = false,
-		growVertical = false
+		growVertical = false,
+		ontoolbarLocationChanged = undefined
 	}: Props = $props()
 	let enableHtml = $state(false)
 	let s3FileDisplayRawMode = $state(false)
@@ -469,6 +471,7 @@
 			toolbarLocation = 'self'
 		}
 		dispatch('toolbar-location-changed', toolbarLocation)
+		ontoolbarLocationChanged?.(toolbarLocation)
 	}
 
 	export function getToolbarLocation() {
@@ -477,6 +480,7 @@
 
 	onDestroy(() => {
 		dispatch('toolbar-location-changed', undefined)
+		ontoolbarLocationChanged?.(undefined)
 	})
 
 	$effect(() => {

frontend/src/lib/components/DisplayResultControlBar.svelte

@@ -15,6 +15,7 @@
 		base: string
 		result: any
 		disableTooltips?: boolean
+		onopenDrawer?: (...args: any[]) => any
 	}
 
 	let {
@@ -25,7 +26,8 @@
 		nodeId = undefined,
 		base,
 		result,
-		disableTooltips = false
+		disableTooltips = false,
+		onopenDrawer = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -67,7 +69,7 @@
 	<button onclick={() => copyToClipboard(toJsonStr(result))}>
 		<ClipboardCopy size={14} />
 	</button>
-	<button onclick={() => dispatch('open-drawer')}>
+	<button onclick={() => (dispatch('open-drawer'), onopenDrawer?.())}>
 		<Expand size={14} />
 	</button>
 </div>

frontend/src/lib/components/EditableSchemaForm.svelte

@@ -81,6 +81,8 @@
 		extraTab?: import('svelte').Snippet
 		schemaFormClassName?: string
 		onChange?: (args: Record<string, any>) => void
+		oneditPanelSizeChanged?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
@@ -117,7 +119,9 @@
 		runButton,
 		extraTab,
 		schemaFormClassName = undefined,
-		onChange = undefined
+		onChange = undefined,
+		oneditPanelSizeChanged = undefined,
+		ondelete = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -322,6 +326,7 @@
 		editPanelSize = editSize
 		inputPanelSize = inputSize
 		dispatch('editPanelSizeChanged', editSize)
+		oneditPanelSizeChanged?.(editSize)
 	}
 
 	let panelButtonWidth: number = $state(0)
@@ -647,6 +652,7 @@
 													aria-label="Clear"
 													onclick={() => {
 														dispatch('delete', argName)
+														ondelete?.(argName)
 													}}
 												>
 													<X size={16} />

frontend/src/lib/components/Editor.svelte

@@ -144,6 +144,12 @@
 		preparedAssetsSqlQueries?: InferAssetsSqlQueryDetails[] | undefined
 		// To execute preview scripts with the right worker group
 		customTag?: string
+		onchange?: (...args: any[]) => any
+		onsaveDraft?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		ontoggleTestPanel?: (...args: any[]) => any
+		onataReady?: (...args: any[]) => any
 	}
 
 	let {
@@ -174,7 +180,13 @@
 		enablePreprocessorSnippet = false,
 		rawAppRunnableKey = undefined,
 		preparedAssetsSqlQueries,
-		customTag
+		customTag,
+		onchange = undefined,
+		onsaveDraft = undefined,
+		onblur = undefined,
+		onfocus = undefined,
+		ontoggleTestPanel = undefined,
+		onataReady = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -395,6 +407,7 @@
 		}
 		code = ncode
 		dispatch('change', ncode)
+		onchange?.(ncode)
 	}
 
 	export function append(code: string): void {
@@ -1237,6 +1250,7 @@
 
 	function saveDraft() {
 		dispatch('saveDraft', code)
+		onsaveDraft?.(code)
 	}
 
 	let vimDisposable: IDisposable | undefined = $state(undefined)
@@ -1450,6 +1464,7 @@
 
 		editor?.onDidBlurEditorText(() => {
 			dispatch('blur')
+			onblur?.()
 		})
 
 		editor?.onDidChangeCursorPosition((event) => {
@@ -1458,6 +1473,7 @@
 
 		editor?.onDidFocusEditorText(() => {
 			dispatch('focus')
+			onfocus?.()
 
 			// for escape we use onkeydown instead of addCommand because addCommand on escape specifically prevents default behavior (like autocomplete cancellation)
 			editor?.onKeyDown((e) => {
@@ -1526,6 +1542,7 @@
 
 			editor?.addCommand(KeyMod.CtrlCmd | KeyCode.KeyU, function () {
 				dispatch('toggleTestPanel')
+				ontoggleTestPanel?.()
 			})
 
 			if (
@@ -1705,6 +1722,7 @@
 				ata?.(code ?? '')
 			}
 			dispatch('ataReady')
+			onataReady?.()
 		}
 	}
 

frontend/src/lib/components/EditorBar.svelte

@@ -94,6 +94,9 @@
 		right?: import('svelte').Snippet
 		openAiChat?: boolean
 		moduleId?: string
+		ontoggleCollabMode?: (...args: any[]) => any
+		oncollabPopup?: (...args: any[]) => any
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
 	}
 
 	let {
@@ -116,7 +119,10 @@
 		showHistoryDrawer = $bindable(false),
 		right,
 		openAiChat = false,
-		moduleId = undefined
+		moduleId = undefined,
+		ontoggleCollabMode = undefined,
+		oncollabPopup = undefined,
+		oncreateScriptFromInlineScript = undefined
 	}: Props = $props()
 
 	let contextualVariablePicker: ItemPicker | undefined = $state()
@@ -1054,7 +1060,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						options={{ right: '' }}
 						size="xs"
 						checked={collabLive}
-						on:change={() => dispatch('toggleCollabMode')}
+						on:change={() => (dispatch('toggleCollabMode'), ontoggleCollabMode?.())}
 					/>
 					<Popover>
 						{#snippet text()}
@@ -1066,7 +1072,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						<button
 							title="Show invite link"
 							class="p-1 rounded hover:bg-gray-400 mx-1 border"
-							onclick={() => dispatch('collabPopup')}><Link size={14} /></button
+							onclick={() => (dispatch('collabPopup'), oncollabPopup?.())}
+							><Link size={14} /></button
 						>
 						<div class="isolate flex -space-x-2 pl-2">
 							{#each collabUsers as user}
@@ -1125,7 +1132,10 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				unifiedSize="sm"
 				variant="subtle"
 				startIcon={{ icon: Save }}
-				on:click={() => dispatch('createScriptFromInlineScript')}
+				on:click={() => (
+					dispatch('createScriptFromInlineScript'),
+					oncreateScriptFromInlineScript?.()
+				)}
 				iconOnly={false}
 			>
 				Save to workspace

frontend/src/lib/components/FlowGraphViewer.svelte

@@ -9,24 +9,25 @@
 	import { dfs } from './flows/dfs'
 	import { workspaceStore } from '$lib/stores'
 
-
 	interface Props {
 		flow: {
-		summary: string
-		description?: string
-		value: FlowValue
-		schema?: any
-		path?: string
-	};
-		overflowAuto?: boolean;
-		noSide?: boolean;
-		download?: boolean;
-		noGraph?: boolean;
-		triggerNode?: boolean;
-		stepDetail?: FlowModule | string | undefined;
-		workspace?: string | undefined;
-		minHeight?: number;
-		noBorder?: boolean;
+			summary: string
+			description?: string
+			value: FlowValue
+			schema?: any
+			path?: string
+		}
+		overflowAuto?: boolean
+		noSide?: boolean
+		download?: boolean
+		noGraph?: boolean
+		triggerNode?: boolean
+		stepDetail?: FlowModule | string | undefined
+		workspace?: string | undefined
+		minHeight?: number
+		noBorder?: boolean
+		ontriggerDetail?: (...args: any[]) => any
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -39,8 +40,10 @@
 		stepDetail = $bindable(undefined),
 		workspace = $workspaceStore,
 		minHeight = 400,
-		noBorder = false
-	}: Props = $props();
+		noBorder = false,
+		ontriggerDetail = undefined,
+		onselect = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -67,6 +70,7 @@
 				onSelect={(nodeId) => {
 					if (nodeId === 'Trigger') {
 						dispatch('triggerDetail')
+						ontriggerDetail?.()
 						return
 					} else if (nodeId === 'failure') {
 						stepDetail = flow?.value?.failure_module
@@ -77,6 +81,7 @@
 					}
 					stepDetail = stepDetail ?? nodeId
 					dispatch('select', stepDetail)
+					onselect?.(stepDetail)
 				}}
 			/>
 		</div>

frontend/src/lib/components/FlowHistoryJobPicker.svelte

@@ -12,13 +12,19 @@
 		selected?: string | undefined
 		selectInitial?: boolean
 		loading?: boolean
+		onselect?: (...args: any[]) => any
+		onnohistory?: (...args: any[]) => any
+		onunselect?: (...args: any[]) => any
 	}
 
 	let {
 		path,
 		selected = undefined,
 		selectInitial = false,
-		loading = $bindable(false)
+		loading = $bindable(false),
+		onselect = undefined,
+		onnohistory = undefined,
+		onunselect = undefined
 	}: Props = $props()
 	const dispatch = createEventDispatcher()
 
@@ -33,9 +39,11 @@
 		if (jobs.length > 0) {
 			if (selectInitial) {
 				dispatch('select', { jobId: jobs[0].id, initial: true })
+				onselect?.({ jobId: jobs[0].id, initial: true })
 			}
 		} else {
 			dispatch('nohistory')
+			onnohistory?.()
 		}
 		loading = false
 	}
@@ -55,8 +63,10 @@
 				on:select={(e) => {
 					if (e.detail) {
 						dispatch('select', { jobId: e.detail?.jobId, initial: false })
+						onselect?.({ jobId: e.detail?.jobId, initial: false })
 					} else {
 						dispatch('unselect')
+						onunselect?.()
 					}
 				}}
 				{selected}

frontend/src/lib/components/FlowLoopIterationPreview.svelte

@@ -18,6 +18,7 @@
 		modules: FlowModule[]
 		previewArgs?: Record<string, any>
 		whileLoop?: boolean
+		onclose?: (...args: any[]) => any
 	}
 
 	let {
@@ -26,7 +27,8 @@
 		job = $bindable(undefined),
 		modules,
 		previewArgs = $bindable({}),
-		whileLoop = false
+		whileLoop = false,
+		onclose = undefined
 	}: Props = $props()
 
 	export const forloopSchema: Schema = {
@@ -112,7 +114,7 @@
 	<div class="flex flex-row justify-between w-full items-center gap-x-2">
 		<div class="w-8">
 			<Button
-				on:click={() => dispatch('close')}
+				on:click={() => (dispatch('close'), onclose?.())}
 				startIcon={{ icon: X }}
 				iconOnly
 				unifiedSize="md"

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -65,6 +65,7 @@
 			tagLabel?: string | undefined
 		}
 		suspendStatus: StateStore<Record<string, { job: Job; nb: number }>>
+		onclose?: (...args: any[]) => any
 	}
 
 	let {
@@ -86,7 +87,8 @@
 		render = false,
 		onJobDone,
 		upToId = undefined,
-		suspendStatus
+		suspendStatus,
+		onclose = undefined
 	}: Props = $props()
 
 	let restartBranchNames: [number, string][] = []
@@ -384,7 +386,7 @@
 		<div class="flex flex-row w-full items-center gap-x-2 px-4">
 			<div class="w-8">
 				<Button
-					on:click={() => dispatch('close')}
+					on:click={() => (dispatch('close'), onclose?.())}
 					startIcon={{ icon: X }}
 					iconOnly
 					unifiedSize="md"
@@ -437,7 +439,8 @@
 							startIcon={{ icon: isRunning ? RefreshCw : Play }}
 							size="sm"
 							btnClasses="w-full max-w-lg"
-							on:click={() => recordingMode ? recordAndTest() : runPreview(previewArgs.val, undefined)}
+							on:click={() =>
+								recordingMode ? recordAndTest() : runPreview(previewArgs.val, undefined)}
 							id="flow-editor-test-flow-drawer"
 							shortCut={{ Icon: CornerDownLeft }}
 						>

frontend/src/lib/components/FolderEditor.svelte

@@ -24,9 +24,10 @@
 
 	interface Props {
 		name: string
+		onupdate?: (...args: any[]) => any
 	}
 
-	let { name }: Props = $props()
+	let { name, onupdate = undefined }: Props = $props()
 	let can_write = $state(false)
 
 	type Role = 'viewer' | 'writer' | 'admin'
@@ -137,6 +138,7 @@
 		})
 		sendUserToast('Folder summary updated')
 		dispatch('update')
+		onupdate?.()
 		loadFolder()
 	}
 	$effect.pre(() => {

frontend/src/lib/components/GitRepoPopoverPicker.svelte

@@ -8,9 +8,10 @@
 	interface Props {
 		isOpen?: boolean
 		children?: import('svelte').Snippet
+		onselected?: (...args: any[]) => any
 	}
 
-	let { isOpen = $bindable(false), children }: Props = $props()
+	let { isOpen = $bindable(false), children, onselected = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher<{
 		selected: { resourcePath: string }
@@ -46,6 +47,7 @@
 
 	function handleSelect(resourcePath: string) {
 		dispatch('selected', { resourcePath })
+		onselected?.({ resourcePath })
 		isOpen = false
 	}
 </script>

frontend/src/lib/components/GitRepoResourcePicker.svelte

@@ -13,6 +13,8 @@
 		currentInventories?: string
 		currentPlaybook?: string
 		gitSshIdentity?: string[]
+		onselected?: (...args: any[]) => any
+		onaddInventories?: (...args: any[]) => any
 	}
 
 	let {
@@ -21,7 +23,9 @@
 		currentCommit = undefined,
 		currentInventories = undefined,
 		currentPlaybook = undefined,
-		gitSshIdentity = undefined
+		gitSshIdentity = undefined,
+		onselected = undefined,
+		onaddInventories = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher<{
@@ -79,6 +83,7 @@
 	function handleSelect() {
 		if (selectedResource) {
 			dispatch('selected', { resourcePath: selectedResource, playbook, inventoriesLocation })
+			onselected?.({ resourcePath: selectedResource, playbook, inventoriesLocation })
 			selectedResource = undefined
 			open = false
 		}
@@ -147,6 +152,9 @@
 				inventoryPaths: inventoryFiles
 			})
 
+			onaddInventories?.({
+				inventoryPaths: inventoryFiles
+			})
 			// TODO: Add success feedback
 		} catch (error) {
 			console.error('Failed to load inventory files:', error)

frontend/src/lib/components/GroupEditor.svelte

@@ -25,9 +25,10 @@
 
 	interface Props {
 		name: string
+		onupdate?: (...args: any[]) => any
 	}
 
-	let { name }: Props = $props()
+	let { name, onupdate = undefined }: Props = $props()
 	let can_write = $state(false)
 
 	type Role = 'member' | 'manager' | 'admin'
@@ -141,6 +142,7 @@
 						requestBody: { summary }
 					})
 					dispatch('update')
+					onupdate?.()
 					sendUserToast('Group summary updated')
 					loadGroup()
 				}}>Save</Button

frontend/src/lib/components/HistoricInputs.svelte

@@ -17,6 +17,7 @@
 		placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end'
 		limitPayloadSize?: boolean
 		searchArgs?: Record<string, any> | undefined
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -26,7 +27,8 @@
 		showAuthor = false,
 		placement = 'top-end',
 		limitPayloadSize = false,
-		searchArgs = undefined
+		searchArgs = undefined,
+		onselect = undefined
 	}: Props = $props()
 
 	let historicList: HistoricList | undefined = $state(undefined)
@@ -44,11 +46,16 @@
 		if (data.payloadData === 'WINDMILL_TOO_BIG') {
 			const fullPayload = await data.getFullPayload?.()
 			dispatch('select', { args: fullPayload, jobId: data.id })
+			onselect?.({ args: fullPayload, jobId: data.id })
 		} else {
 			dispatch('select', {
 				args: structuredClone($state.snapshot(data.payloadData)),
 				jobId: data.id
 			})
+			onselect?.({
+				args: structuredClone($state.snapshot(data.payloadData)),
+				jobId: data.id
+			})
 		}
 	}
 
@@ -84,6 +91,7 @@
 		selected = undefined
 		if (dispatchEvent) {
 			dispatch('select', undefined)
+			onselect?.(undefined)
 		}
 	}
 

frontend/src/lib/components/InfiniteList.svelte

@@ -22,6 +22,8 @@
 		extra_row?: import('svelte').Snippet<[any]>
 		children?: import('svelte').Snippet<[any]>
 		empty?: import('svelte').Snippet<[any]>
+		onerror?: (...args: any[]) => any
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -43,7 +45,9 @@
 		columns,
 		extra_row,
 		children,
-		empty
+		empty,
+		onerror = undefined,
+		onselect = undefined
 	}: Props = $props()
 
 	const perPage = 20
@@ -125,6 +129,7 @@
 			if (hasAlreadyFailed) return
 			hasAlreadyFailed = true
 			dispatch('error', { type: 'load', error: err })
+			onerror?.({ type: 'load', error: err })
 		} finally {
 			loading = false
 			loadingMore = false
@@ -145,6 +150,7 @@
 			}, 100)
 		} catch (err) {
 			dispatch('error', { type: 'delete', error: err })
+			onerror?.({ type: 'delete', error: err })
 		}
 	}
 
@@ -178,7 +184,7 @@
 	<tbody class="h-full w-full">
 		{#if extra_row}
 			<Row
-				onclick={() => dispatch('select', 'extraRow')}
+				onclick={() => (dispatch('select', 'extraRow'), onselect?.('extraRow'))}
 				class={twMerge(
 					extraRowClasses.class,
 					selectedItemId === 'extraRow' ? extraRowClasses.bgSelected : extraRowClasses.bgHover,
@@ -195,7 +201,7 @@
 				{@render customRow?.({ item, hover })}
 			{:else}
 				<Row
-					onclick={() => dispatch('select', item)}
+					onclick={() => (dispatch('select', item), onselect?.(item))}
 					class={twMerge(
 						selectedItemId === item.id ? 'bg-surface-selected' : 'hover:bg-surface-hover',
 						'cursor-pointer rounded-md',

frontend/src/lib/components/InputTransformForm.svelte

@@ -68,6 +68,7 @@
 		allowedAiTransforms?: string[] | undefined
 		s3StorageConfigured?: boolean
 		chatInputEnabled?: boolean
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -95,7 +96,8 @@
 		isAgentTool = false,
 		allowedAiTransforms = isAgentTool ? undefined : [],
 		s3StorageConfigured = true,
-		chatInputEnabled = false
+		chatInputEnabled = false,
+		onchange = undefined
 	}: Props = $props()
 
 	let monaco: SimpleEditor | undefined = $state(undefined)
@@ -300,6 +302,7 @@
 
 		// Dispatch change
 		dispatch('change', { argName, arg })
+		onchange?.({ argName, arg })
 	}
 
 	async function switchToJsAndConnect(onPath: (path: string) => void) {
@@ -579,6 +582,7 @@
 									focusProp?.(argName, (path) => {
 										connectProperty(path)
 										dispatch('change', { argName })
+										onchange?.({ argName })
 										return true
 									})
 								}
@@ -774,6 +778,7 @@
 										fontSize={12}
 										on:change={() => {
 											dispatch('change', { argName, arg })
+											onchange?.({ argName, arg })
 										}}
 										loadAsync
 										class="bg-surface-input"
@@ -792,6 +797,7 @@
 								shouldDispatchChanges
 								on:change={() => {
 									dispatch('change', { argName, arg })
+									onchange?.({ argName, arg })
 								}}
 								label={argName}
 								bind:editor={monaco}
@@ -867,6 +873,7 @@
 									}}
 									on:change={() => {
 										dispatch('change', { argName, arg })
+										onchange?.({ argName, arg })
 									}}
 									autoHeight
 									loadAsync

frontend/src/lib/components/InstanceGroupEditor.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-
 	import { GroupService, type InstanceGroup } from '$lib/gen'
 	import { createEventDispatcher } from 'svelte'
 	import autosize from '$lib/autosize'
@@ -10,10 +9,11 @@
 	import { Loader2 } from 'lucide-svelte'
 
 	interface Props {
-		name: string;
+		name: string
+		onupdate?: (...args: any[]) => any
 	}
 
-	let { name }: Props = $props();
+	let { name, onupdate = undefined }: Props = $props()
 
 	let email = $state('')
 	let instance_group: InstanceGroup | undefined = $state()
@@ -21,7 +21,6 @@
 
 	const dispatch = createEventDispatcher()
 
-
 	async function load() {
 		return Promise.all([loadInstanceGroup()])
 	}
@@ -36,7 +35,7 @@
 	}
 	$effect(() => {
 		load()
-	});
+	})
 </script>
 
 <div class="flex flex-col gap-6">
@@ -58,6 +57,7 @@
 							requestBody: { new_summary: instance_group?.summary ?? '' }
 						})
 						dispatch('update')
+						onupdate?.()
 						sendUserToast('New summary saved')
 					}}>Save Summary</Button
 				>
@@ -81,6 +81,7 @@
 						requestBody: { email: email }
 					})
 					dispatch('update')
+					onupdate?.()
 					sendUserToast('User added')
 					loadInstanceGroup()
 				}}
@@ -97,26 +98,27 @@
 					</tr>
 				{/snippet}
 				{#snippet body()}
-								<tbody >
+					<tbody>
 						{#each members as { member_email }}<tr>
 								<td>{member_email}</td>
 								<td>
 									<button
 										class="ml-2 text-red-500"
 										onclick={async () => {
-										await GroupService.removeUserFromInstanceGroup({
-											name,
-											requestBody: { email: member_email }
-										})
-										dispatch('update')
-										sendUserToast('User removed')
-										loadInstanceGroup()
-									}}>remove</button
+											await GroupService.removeUserFromInstanceGroup({
+												name,
+												requestBody: { email: member_email }
+											})
+											dispatch('update')
+											onupdate?.()
+											sendUserToast('User removed')
+											loadInstanceGroup()
+										}}>remove</button
 									>
 								</td>
 							</tr>{/each}
 					</tbody>
-							{/snippet}
+				{/snippet}
 			</TableCustom>
 		{:else}
 			<div class="flex flex-col">

frontend/src/lib/components/InstanceNameEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { stopPropagation, createBubbler } from 'svelte/legacy';
+	import { stopPropagation, createBubbler } from 'svelte/legacy'
 
-	const bubble = createBubbler();
+	const bubble = createBubbler()
 	import { Pencil } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Button from './common/button/Button.svelte'
@@ -13,11 +13,13 @@
 	import TextInput from './text_input/TextInput.svelte'
 
 	interface Props {
-		value: string | undefined;
-		email: string;
-		username?: string | undefined;
-		automateUsernameCreation?: boolean;
-		login_type: string;
+		value: string | undefined
+		email: string
+		username?: string | undefined
+		automateUsernameCreation?: boolean
+		login_type: string
+		onsave?: (...args: any[]) => any
+		onrefresh?: (...args: any[]) => any
 	}
 
 	let {
@@ -25,8 +27,10 @@
 		email,
 		username = undefined,
 		automateUsernameCreation = false,
-		login_type = $bindable()
-	}: Props = $props();
+		login_type = $bindable(),
+		onsave = undefined,
+		onrefresh = undefined
+	}: Props = $props()
 
 	let password: string = $state('')
 
@@ -34,6 +38,7 @@
 
 	function saveName() {
 		dispatch('save', value)
+		onsave?.(value)
 	}
 	async function savePassword() {
 		if (password.length < 5) {
@@ -48,6 +53,7 @@
 		await UserService.setLoginTypeForUser({ user: email, requestBody: { login_type } })
 		sendUserToast(`Login type updated for ${email}`)
 		dispatch('refresh')
+		onrefresh?.()
 	}
 </script>
 
@@ -60,115 +66,111 @@
 	closeButton
 >
 	{#snippet trigger()}
-	
-			<Button unifiedSize="sm" nonCaptureEvent={true} variant="subtle" startIcon={{ icon: Pencil }}
-				>Edit</Button
-			>
-		
+		<Button unifiedSize="sm" nonCaptureEvent={true} variant="subtle" startIcon={{ icon: Pencil }}
+			>Edit</Button
+		>
 	{/snippet}
 	{#snippet content()}
-	
-			<div class="flex flex-col gap-8 max-w-sm p-4">
-				{#if automateUsernameCreation && username}
-					<ChangeInstanceUsernameInner {email} {username} on:renamed noPadding />
-				{/if}
-				<label class="block text-primary">
-					<div class="pb-1 text-xs font-semibold text-emphasis">Name</div>
-					<div class="flex w-full">
-						<TextInput
-							inputProps={{
-								onclick: (e) => {
-									e.stopPropagation()
-								},
-								onkeydown: (e) => {
-									e.stopPropagation()
-								},
-								onkeypress: ({ key }) => {
-									if (key === 'Enter') {
-										saveName()
-									}
+		<div class="flex flex-col gap-8 max-w-sm p-4">
+			{#if automateUsernameCreation && username}
+				<ChangeInstanceUsernameInner {email} {username} on:renamed noPadding />
+			{/if}
+			<label class="block text-primary">
+				<div class="pb-1 text-xs font-semibold text-emphasis">Name</div>
+				<div class="flex w-full">
+					<TextInput
+						inputProps={{
+							onclick: (e) => {
+								e.stopPropagation()
+							},
+							onkeydown: (e) => {
+								e.stopPropagation()
+							},
+							onkeypress: ({ key }) => {
+								if (key === 'Enter') {
+									saveName()
 								}
-							}}
-							bind:value
-						/>
-					</div>
-					<Button
-						unifiedSize="md"
-						variant="default"
-						buttonType="button"
-						btnClasses="mt-2 "
-						aria-label="Save ID"
-						onclick={() => {
-							saveName()
+							}
 						}}
-					>
-						Update name
-					</Button>
-				</label>
-				<label class="block text-primary">
-					<div class="pb-1 text-xs font-semibold text-emphasis">Password</div>
-					<div class="flex w-full">
-						<input
-							type="password"
-							bind:value={password}
-							class="!w-auto grow"
-							onclick={stopPropagation(() => {})}
-							onkeydown={stopPropagation(bubble('keydown'))}
-							onkeypress={stopPropagation((e: Event) => {
+						bind:value
+					/>
+				</div>
+				<Button
+					unifiedSize="md"
+					variant="default"
+					buttonType="button"
+					btnClasses="mt-2 "
+					aria-label="Save ID"
+					onclick={() => {
+						saveName()
+					}}
+				>
+					Update name
+				</Button>
+			</label>
+			<label class="block text-primary">
+				<div class="pb-1 text-xs font-semibold text-emphasis">Password</div>
+				<div class="flex w-full">
+					<input
+						type="password"
+						bind:value={password}
+						class="!w-auto grow"
+						onclick={stopPropagation(() => {})}
+						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeypress={stopPropagation((e: Event) => {
 							if ((e as KeyboardEvent).key === 'Enter') {
 								savePassword()
 							}
 						})}
-						/>
-					</div>
-					<Button
-						unifiedSize="md"
-						variant="default"
-						buttonType="button"
-						btnClasses="mt-2 "
-						aria-label="Save ID"
-						on:click={() => {
-							savePassword()
-						}}
-					>
-						Update password
-					</Button>
-				</label>
-				<label class="block text-primary">
-					<div class="mb-1 text-xs font-semibold text-emphasis">Login type</div>
+					/>
+				</div>
+				<Button
+					unifiedSize="md"
+					variant="default"
+					buttonType="button"
+					btnClasses="mt-2 "
+					aria-label="Save ID"
+					on:click={() => {
+						savePassword()
+					}}
+				>
+					Update password
+				</Button>
+			</label>
+			<label class="block text-primary">
+				<div class="mb-1 text-xs font-semibold text-emphasis">Login type</div>
 
-					<div class="flex w-full">
-						<input
-							type="text"
-							bind:value={login_type}
-							class="!w-auto grow"
-							onclick={stopPropagation(() => {})}
-							onkeydown={stopPropagation(bubble('keydown'))}
-							onkeypress={stopPropagation((e: Event) => {
+				<div class="flex w-full">
+					<input
+						type="text"
+						bind:value={login_type}
+						class="!w-auto grow"
+						onclick={stopPropagation(() => {})}
+						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeypress={stopPropagation((e: Event) => {
 							if ((e as KeyboardEvent).key === 'Enter') {
 								saveLoginType()
 							}
 						})}
-						/>
-					</div>
-					<div class="text-2xs text-secondary mb-1">
-						Must match exact SSO name, "password" or "saml". Examples: password, google, saml,
-						microsoft
-					</div>
-					<Button
-						unifiedSize="md"
-						variant="default"
-						buttonType="button"
-						btnClasses="mt-2 "
-						aria-label="Save login type"
-						on:click={() => {
-							saveLoginType()
-						}}
-					>
-						Update login type
-					</Button>
-				</label>
-			</div>
-		
+					/>
+				</div>
+				<div class="text-2xs text-secondary mb-1">
+					Must match exact SSO name, "password" or "saml". Examples: password, google, saml,
+					microsoft
+				</div>
+				<Button
+					unifiedSize="md"
+					variant="default"
+					buttonType="button"
+					btnClasses="mt-2 "
+					aria-label="Save login type"
+					on:click={() => {
+						saveLoginType()
+					}}
+				>
+					Update login type
+				</Button>
+			</label>
+		</div>
 	{/snippet}
 </Popover>

frontend/src/lib/components/InstanceSetting.svelte

@@ -36,6 +36,7 @@
 		openSmtpSettings?: () => void
 		oauths?: Record<string, any>
 		warning?: string
+		oncloseDrawer?: (...args: any[]) => any
 	}
 
 	let {
@@ -45,7 +46,8 @@
 		loading = true,
 		openSmtpSettings,
 		oauths,
-		warning
+		warning,
+		oncloseDrawer = undefined
 	}: Props = $props()
 	const dispatch = createEventDispatcher()
 
@@ -523,6 +525,7 @@
 								on:click={() => {
 									isCriticalAlertsUIOpen.set(true)
 									dispatch('closeDrawer')
+									oncloseDrawer?.()
 								}}
 							>
 								Show critical alerts

frontend/src/lib/components/InstanceSettings.svelte

@@ -30,6 +30,7 @@
 		quickSetup?: boolean
 		yamlMode?: boolean
 		hasUnsavedChanges?: boolean
+		onsaved?: (...args: any[]) => any
 	}
 
 	let {
@@ -40,7 +41,8 @@
 		onNavigateToTab,
 		quickSetup = false,
 		yamlMode = $bindable(false),
-		hasUnsavedChanges = $bindable(false)
+		hasUnsavedChanges = $bindable(false),
+		onsaved = undefined
 	}: Props = $props()
 
 	let values: Writable<Record<string, any>> = writable({})
@@ -229,6 +231,7 @@
 		} else {
 			sendUserToast('Settings updated')
 			dispatch('saved')
+			onsaved?.()
 		}
 	}
 
@@ -571,6 +574,7 @@
 		} else {
 			sendUserToast('Settings updated')
 			dispatch('saved')
+			onsaved?.()
 		}
 	}
 

frontend/src/lib/components/InviteGlobalUser.svelte

@@ -9,10 +9,11 @@
 	import { globalEmailInvite } from '$lib/stores'
 
 	interface Props {
-		close?: (() => void) | undefined;
+		close?: (() => void) | undefined
+		onnew?: (...args: any[]) => any
 	}
 
-	let { close = undefined }: Props = $props();
+	let { close = undefined, onnew = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -35,6 +36,7 @@
 		$globalEmailInvite = ''
 		password = generateRandomString(10)
 		dispatch('new')
+		onnew?.()
 		close?.()
 	}
 </script>

frontend/src/lib/components/JsonEditor.svelte

@@ -18,6 +18,9 @@
 		class?: string | undefined
 		disabled?: boolean
 		fixedOverflowWidgets?: boolean
+		onchangeValue?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
 	}
 
 	let {
@@ -29,7 +32,10 @@
 		loadAsync = false,
 		class: clazz = undefined,
 		disabled = false,
-		fixedOverflowWidgets = true
+		fixedOverflowWidgets = true,
+		onchangeValue = undefined,
+		onfocus = undefined,
+		onblur = undefined
 	}: Props = $props()
 
 	let tooBig = $derived(code && code?.length > 1000000)
@@ -47,6 +53,7 @@
 				value = JSON.parse(code ?? '')
 			}
 			dispatchIfMounted('changeValue', value)
+			onchangeValue?.(value)
 			error = ''
 		} catch (e) {
 			error = e.message
@@ -75,8 +82,8 @@
 			<SimpleEditor
 				{loadAsync}
 				{small}
-				on:focus={() => (dispatch('focus'), (focused = true))}
-				on:blur={() => (dispatch('blur'), (focused = false))}
+				on:focus={() => ((dispatch('focus'), onfocus?.()), (focused = true))}
+				on:blur={() => ((dispatch('blur'), onblur?.()), (focused = false))}
 				bind:this={editor}
 				on:change
 				autoHeight

frontend/src/lib/components/JsonInputs.svelte

@@ -8,12 +8,18 @@
 		updateOnBlur?: boolean
 		placeholder?: string
 		selected?: boolean
+		onselect?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
 	}
 
 	let {
 		updateOnBlur = true,
 		placeholder = 'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}',
-		selected = false
+		selected = false,
+		onselect = undefined,
+		onfocus = undefined,
+		onblur = undefined
 	}: Props = $props()
 
 	let pendingJson = $state('')
@@ -23,13 +29,16 @@
 	function updatePayloadFromJson(jsonInput: string) {
 		if (jsonInput === undefined || jsonInput === null || jsonInput.trim() === '') {
 			dispatch('select', undefined)
+			onselect?.(undefined)
 			return
 		}
 		try {
 			const parsed = JSON.parse(jsonInput)
 			dispatch('select', parsed)
+			onselect?.(parsed)
 		} catch (error) {
 			dispatch('select', undefined)
+			onselect?.(undefined)
 		}
 	}
 
@@ -40,6 +49,7 @@
 	export function resetSelected(dispatchEvent?: boolean) {
 		if (dispatchEvent) {
 			dispatch('select', undefined)
+			onselect?.(undefined)
 		}
 	}
 
@@ -62,12 +72,14 @@
 		on:focus={() => {
 			if (updateOnBlur) {
 				dispatch('focus')
+				onfocus?.()
 				updatePayloadFromJson(pendingJson)
 			}
 		}}
 		on:blur={async () => {
 			if (updateOnBlur) {
 				dispatch('blur')
+				onblur?.()
 			}
 		}}
 		on:change={(e) => {

frontend/src/lib/components/Path.svelte

@@ -72,6 +72,7 @@
 		hideFullPath?: boolean
 		size?: 'sm' | 'md'
 		drawerOffset?: number
+		onenter?: (...args: any[]) => any
 	}
 
 	let {
@@ -89,7 +90,8 @@
 		disableEditing = false,
 		hideFullPath = false,
 		size = 'md',
-		drawerOffset = 0
+		drawerOffset = 0,
+		onenter = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -133,6 +135,7 @@
 		if (key === 'Enter') {
 			event.preventDefault()
 			dispatch('enter')
+			onenter?.()
 		}
 	}
 

frontend/src/lib/components/RadioButton.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-
 	import { createEventDispatcher } from 'svelte'
 	import Tooltip from './Tooltip.svelte'
 	interface Props {
-		label?: string;
-		options: [string | { title: string; desc: string }, any][];
-		value: any;
-		disabled?: boolean;
-		labelClass?: string;
-		inputClass?: string;
+		label?: string
+		options: [string | { title: string; desc: string }, any][]
+		value: any
+		disabled?: boolean
+		labelClass?: string
+		inputClass?: string
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -17,8 +17,9 @@
 		value = $bindable(),
 		disabled = false,
 		labelClass = '',
-		inputClass = ''
-	}: Props = $props();
+		inputClass = '',
+		onchange = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -39,7 +40,7 @@
 					class="sr-only"
 					bind:group={value}
 					aria-labelledby="memory-option-0-label"
-					onclick={() => dispatch('change', val)}
+					onclick={() => (dispatch('change', val), onchange?.(val))}
 				/>
 				<p>
 					{#if typeof label !== 'string'}

frontend/src/lib/components/ResourceEditor.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-
 	import type { Schema } from '$lib/common'
 	import { ResourceService, type Resource, type ResourceType } from '$lib/gen'
 	import { canWrite, emptyString, isOwner, urlize } from '$lib/utils'
@@ -32,6 +31,7 @@
 		hidePath?: boolean
 		onChange?: (args: { path: string; args: Record<string, any>; description: string }) => void
 		defaultValues?: Record<string, any> | undefined
+		onrefresh?: (...args: any[]) => any
 	}
 
 	let {
@@ -41,7 +41,8 @@
 		newResource = false,
 		hidePath = false,
 		onChange,
-		defaultValues = undefined
+		defaultValues = undefined,
+		onrefresh = undefined
 	}: Props = $props()
 
 	let isValid = $state(true)
@@ -100,6 +101,7 @@
 			}
 			sendUserToast(`Updated resource at ${path}`)
 			dispatch('refresh', path)
+			onrefresh?.(path)
 		} else {
 			throw Error('Cannot edit undefined resource')
 		}
@@ -112,6 +114,7 @@
 		})
 		sendUserToast(`Updated resource at ${path}`)
 		dispatch('refresh', path)
+		onrefresh?.(path)
 	}
 
 	async function loadResourceType(): Promise<void> {
@@ -295,9 +298,7 @@
 				{#if loadingSchema}
 					<Skeleton layout={[[4]]} />
 				{:else if !viewJsonSchema && resourceTypeInfo?.is_fileset}
-					<h5 class="mt-1 inline-flex items-center gap-4">
-						Fileset
-					</h5>
+					<h5 class="mt-1 inline-flex items-center gap-4"> Fileset </h5>
 					<FilesetEditor bind:args />
 				{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
 					{#if resourceTypeInfo?.format_extension}

frontend/src/lib/components/ResourceTypePicker.svelte

@@ -13,9 +13,15 @@
 		value: string | undefined
 		notPickable?: boolean
 		nonePickable?: boolean
+		onclick?: (...args: any[]) => any
 	}
 
-	let { value = $bindable(), notPickable = false, nonePickable = false }: Props = $props()
+	let {
+		value = $bindable(),
+		notPickable = false,
+		nonePickable = false,
+		onclick = undefined
+	}: Props = $props()
 
 	let resources: string[] = $state([])
 
@@ -28,6 +34,7 @@
 	function onClick(resource: string | undefined) {
 		value = resource
 		dispatch('click', resource)
+		onclick?.(resource)
 	}
 
 	$effect(() => {

frontend/src/lib/components/S3FilePickerInner.svelte

@@ -92,6 +92,7 @@
 		testConnectionRequest?: (
 			d: DatasetStorageTestConnectionData
 		) => CancelablePromise<DatasetStorageTestConnectionResponse>
+		onselectAndClose?: (...args: any[]) => any
 	}
 
 	let {
@@ -113,7 +114,8 @@
 		loadFileMetadataRequest = HelpersService.loadFileMetadata,
 		deleteS3FileRequest = HelpersService.deleteS3File,
 		moveS3FileRequest = HelpersService.moveS3File,
-		testConnectionRequest = HelpersService.datasetStorageTestConnection
+		testConnectionRequest = HelpersService.datasetStorageTestConnection,
+		onselectAndClose = undefined
 	}: Props = $props()
 
 	let rootPathNestingLevel = $derived(1 * (rootPath.split('/').length - 1))
@@ -470,6 +472,7 @@
 	export async function selectAndClose() {
 		if (selectedFileKey?.s3) {
 			dispatch('selectAndClose', { s3: selectedFileKey.s3, storage })
+			onselectAndClose?.({ s3: selectedFileKey.s3, storage })
 		}
 	}
 

frontend/src/lib/components/S3ObjectPicker.svelte

@@ -12,11 +12,12 @@
 	import FileUpload from './common/fileUpload/FileUpload.svelte'
 
 	interface Props {
-		value: any;
-		editor?: SimpleEditor | undefined;
+		value: any
+		editor?: SimpleEditor | undefined
+		onfocus?: (...args: any[]) => any
 	}
 
-	let { value = $bindable(), editor = $bindable(undefined) }: Props = $props();
+	let { value = $bindable(), editor = $bindable(undefined), onfocus = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -65,6 +66,7 @@
 				bind:editor
 				on:focus={(e) => {
 					dispatch('focus')
+					onfocus?.()
 				}}
 				code={JSON.stringify(value ?? { s3: '' }, null, 2)}
 				bind:value

frontend/src/lib/components/SaveInputsButton.svelte

@@ -11,12 +11,13 @@
 	const dispatch = createEventDispatcher()
 
 	interface Props {
-		runnableId: string | undefined;
-		runnableType: RunnableType | undefined;
-		args: object;
-		disabled?: boolean;
-		small?: boolean | undefined;
-		showTooltip?: boolean | undefined;
+		runnableId: string | undefined
+		runnableType: RunnableType | undefined
+		args: object
+		disabled?: boolean
+		small?: boolean | undefined
+		showTooltip?: boolean | undefined
+		onupdate?: (...args: any[]) => any
 	}
 
 	let {
@@ -25,8 +26,9 @@
 		args,
 		disabled = false,
 		small = undefined,
-		showTooltip = undefined
-	}: Props = $props();
+		showTooltip = undefined,
+		onupdate = undefined
+	}: Props = $props()
 
 	let savingInputs = $state(false)
 
@@ -52,6 +54,7 @@
 
 		savingInputs = false
 		dispatch('update')
+		onupdate?.()
 	}
 </script>
 

frontend/src/lib/components/SavedInputsPicker.svelte

@@ -21,6 +21,8 @@
 		noButton?: boolean
 		jsonView?: boolean
 		limitPayloadSize?: boolean
+		onselect?: (...args: any[]) => any
+		onisEditing?: (...args: any[]) => any
 	}
 
 	let {
@@ -30,7 +32,9 @@
 		isValid = false,
 		noButton = false,
 		jsonView = false,
-		limitPayloadSize = false
+		limitPayloadSize = false,
+		onselect = undefined,
+		onisEditing = undefined
 	}: Props = $props()
 
 	interface EditableInput extends Input {
@@ -136,9 +140,11 @@
 			if (input.payloadData === 'WINDMILL_TOO_BIG') {
 				const fullPayload = await input.getFullPayload?.()
 				dispatch('select', fullPayload)
+				onselect?.(fullPayload)
 			} else {
 				selectedArgs = structuredClone($state.snapshot(input.payloadData) ?? {})
 				dispatch('select', selectedArgs)
+				onselect?.(selectedArgs)
 			}
 		}
 	}
@@ -170,6 +176,7 @@
 	function setEditing(input: EditableInput | null) {
 		isEditing = input
 		dispatch('isEditing', !!input)
+		onisEditing?.(!!input)
 	}
 
 	function handleError(error: { type: string; error: any }) {
@@ -189,6 +196,7 @@
 		selectedArgs = undefined
 		if (dispatchEvent) {
 			dispatch('select', undefined)
+			onselect?.(undefined)
 		}
 	}
 

frontend/src/lib/components/SavedInputsV2.svelte

@@ -24,6 +24,7 @@
 		// Are the current Inputs valid and able to be saved?
 		isValid: boolean
 		args: object
+		onselected_args?: (...args: any[]) => any
 	}
 
 	let {
@@ -34,7 +35,8 @@
 		jsonView = false,
 		schema,
 		isValid,
-		args
+		args,
+		onselected_args = undefined
 	}: Props = $props()
 
 	export function resetSelected() {
@@ -59,9 +61,11 @@
 			}
 			inputSelected = type
 			dispatch('selected_args', selected_args)
+			onselected_args?.(selected_args)
 		} else if (savedArgs) {
 			inputSelected = type
 			dispatch('selected_args', savedArgs)
+			onselected_args?.(savedArgs)
 		}
 	}
 

frontend/src/lib/components/SchemaForm.svelte

@@ -72,6 +72,12 @@
 		workspace?: string | undefined
 		chatInputEnabled?: boolean
 		actions?: import('svelte').Snippet<[{ item: { id: string; value: string } }]> | undefined
+		onchange?: (...args: any[]) => any
+		onclick?: (...args: any[]) => any
+		onnestedChange?: (...args: any[]) => any
+		onacceptChange?: (...args: any[]) => any
+		onrejectChange?: (...args: any[]) => any
+		onkeydownCmdEnter?: (...args: any[]) => any
 	}
 
 	let {
@@ -114,7 +120,13 @@
 		computeS3ForceViewerPolicies = undefined,
 		workspace = undefined,
 		chatInputEnabled = false,
-		actions: actions_render = undefined
+		actions: actions_render = undefined,
+		onchange = undefined,
+		onclick = undefined,
+		onnestedChange = undefined,
+		onacceptChange = undefined,
+		onrejectChange = undefined,
+		onkeydownCmdEnter = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -188,6 +200,7 @@
 			if (!deepEqual(keys, nkeys)) {
 				keys = nkeys
 				dispatch('change')
+				onchange?.()
 			}
 		}
 		// let missingKeys = keys.filter((x) => args && !(x in args))
@@ -360,6 +373,7 @@
 						class="flex flex-row items-center {largeGap ? 'pb-4' : 'pb-2'} "
 						onclick={() => {
 							dispatch('click', argName)
+							onclick?.(argName)
 						}}
 					>
 						{#if args && typeof args == 'object' && prop}
@@ -371,13 +385,21 @@
 									{lightHeaderFont}
 									on:change={() => {
 										dispatch('change')
+										onchange?.()
 									}}
 									on:nestedChange={() => {
 										dispatch('nestedChange')
+										onnestedChange?.()
 									}}
-									on:acceptChange={(e) => dispatch('acceptChange', e.detail)}
-									on:rejectChange={(e) => dispatch('rejectChange', e.detail)}
-									on:keydownCmdEnter={() => dispatch('keydownCmdEnter')}
+									on:acceptChange={(e) => (
+										dispatch('acceptChange', e.detail),
+										onacceptChange?.(e.detail)
+									)}
+									on:rejectChange={(e) => (
+										dispatch('rejectChange', e.detail),
+										onrejectChange?.(e.detail)
+									)}
+									on:keydownCmdEnter={() => (dispatch('keydownCmdEnter'), onkeydownCmdEnter?.())}
 									{disablePortal}
 									{resourceTypes}
 									{prettifyHeader}
@@ -398,17 +420,19 @@
 									customErrorMessage={prop?.customErrorMessage}
 									bind:properties={
 										() => prop?.properties,
-										(v) => { if (prop) prop.properties = v }
+										(v) => {
+											if (prop) prop.properties = v
+										}
 									}
 									bind:order={
 										() => prop?.order,
-										(v) => { if (prop) prop.order = v }
+										(v) => {
+											if (prop) prop.order = v
+										}
 									}
 									nestedRequired={prop?.required}
 									itemsType={prop?.items}
-									disabled={disabledArgs.includes(argName) ||
-										disabled ||
-										prop?.disabled}
+									disabled={disabledArgs.includes(argName) || disabled || prop?.disabled}
 									{compact}
 									{variableEditor}
 									{itemPicker}

frontend/src/lib/components/SchemaFormWithArgPicker.svelte

@@ -19,6 +19,7 @@
 		isValid?: boolean
 		jsonView?: boolean
 		children?: import('svelte').Snippet
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -28,7 +29,8 @@
 		previewArgs,
 		isValid = true,
 		jsonView = false,
-		children
+		children,
+		onselect = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -142,6 +144,7 @@
 								{runnableType}
 								on:select={(e) => {
 									dispatch('select', { payload: e.detail?.args, type: 'history' })
+									onselect?.({ payload: e.detail?.args, type: 'history' })
 								}}
 							/>
 						</FlowInputEditor>
@@ -155,6 +158,7 @@
 								bind:this={savedInputsPicker}
 								on:select={(e) => {
 									dispatch('select', { payload: e.detail, type: 'saved' })
+									onselect?.({ payload: e.detail, type: 'saved' })
 								}}
 								{jsonView}
 							/>
@@ -173,6 +177,7 @@
 									path={stablePathForCaptures}
 									on:select={(e) => {
 										dispatch('select', { payload: e.detail, type: 'captures' })
+										onselect?.({ payload: e.detail, type: 'captures' })
 									}}
 									bind:this={captureTable}
 									isFlow={true}

frontend/src/lib/components/ScriptEditor.svelte

@@ -119,6 +119,8 @@
 		assets?: AssetWithAltAccessType[]
 		editor_bar_right?: import('svelte').Snippet
 		enablePreprocessorSnippet?: boolean
+		onchange?: (...args: any[]) => any
+		onformat?: (...args: any[]) => any
 	}
 
 	let {
@@ -150,7 +152,9 @@
 		disableAi = false,
 		assets = $bindable(),
 		editor_bar_right,
-		enablePreprocessorSnippet = false
+		enablePreprocessorSnippet = false,
+		onchange = undefined,
+		onformat = undefined
 	}: Props = $props()
 
 	let initialArgs = structuredClone($state.snapshot(args))
@@ -187,6 +191,7 @@
 		watchChanges &&
 			(code != undefined || schema != undefined) &&
 			dispatch('change', { code, schema })
+		onchange?.({ code, schema })
 	})
 
 	watch(
@@ -1407,6 +1412,7 @@
 					console.error('Could not save last_save to local storage', e)
 				}
 				dispatch('format')
+				onformat?.()
 			}}
 			class="flex flex-1 h-full !overflow-visible"
 			scriptLang={lang}

frontend/src/lib/components/ScriptPicker.svelte

@@ -30,6 +30,7 @@
 		allowEdit?: boolean
 		allowView?: boolean
 		clearable?: boolean
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -42,7 +43,8 @@
 		allowRefresh = false,
 		allowEdit = true,
 		allowView = true,
-		clearable = false
+		clearable = false,
+		onselect = undefined
 	}: Props = $props()
 
 	let items: { value: string; label: string }[] = $state([])
@@ -130,6 +132,7 @@
 				(path) => {
 					scriptPath = path
 					dispatch('select', { path, itemKind })
+					onselect?.({ path, itemKind })
 				}
 			}
 			class="grow shrink max-w-full"

frontend/src/lib/components/ScriptVersionHistory.svelte

@@ -13,7 +13,15 @@
 
 	const dispatch = createEventDispatcher()
 
-	let { openDetails = false, scriptPath }: { openDetails?: boolean; scriptPath: string } = $props()
+	let {
+		openDetails = false,
+		scriptPath,
+		onopenDetails = undefined
+	}: {
+		openDetails?: boolean
+		scriptPath: string
+		onopenDetails?: (...args: any[]) => any
+	} = $props()
 
 	let deploymentMsgUpdateMode = $state(false)
 	let deploymentMsgUpdate: string | undefined = $state()
@@ -102,6 +110,7 @@
 									<Button
 										on:click={() => {
 											dispatch('openDetails', { version: version.script_hash })
+											onopenDetails?.({ version: version.script_hash })
 										}}
 										class="ml-2 inline-flex gap-1 text-xs items-center"
 										size="xs"

frontend/src/lib/components/SimpleEditor.svelte

@@ -95,7 +95,10 @@
 		disabled = false,
 		minHeight = 1000,
 		renderLineHighlight = 'none',
-		suggestion
+		suggestion,
+		onchange = undefined,
+		onfocus = undefined,
+		onblur = undefined
 	}: {
 		lang: string
 		code?: string
@@ -124,6 +127,9 @@
 		minHeight?: number
 		renderLineHighlight?: 'all' | 'line' | 'gutter' | 'none'
 		suggestion?: string
+		onchange?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
 	} = $props()
 
 	let yPadding = MONACO_Y_PADDING
@@ -166,6 +172,7 @@
 		}
 		code = ncode
 		dispatch('change', { code: ncode })
+		onchange?.({ code: ncode })
 	}
 
 	function updatePlaceholderVisibility(value: string) {
@@ -390,6 +397,7 @@
 		editor.onDidFocusEditorText(() => {
 			if (!editor) return
 			dispatch('focus')
+			onfocus?.()
 			loadExtraLib()
 
 			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
@@ -431,10 +439,12 @@
 				shouldBindKey && cmdEnterAction && cmdEnterAction()
 			})
 			dispatch('focus')
+			onfocus?.()
 		})
 
 		editor.onDidBlurEditorText(() => {
 			dispatch('blur')
+			onblur?.()
 			updateCode()
 		})
 

frontend/src/lib/components/TemplateEditor.svelte

@@ -389,6 +389,9 @@
 		fontSize?: number
 		loadAsync?: boolean
 		class?: string | undefined
+		onfocus?: (...args: any[]) => any
+		onchange?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
 	}
 
 	let {
@@ -400,7 +403,10 @@
 		fixedOverflowWidgets = true,
 		fontSize = 12,
 		loadAsync = false,
-		class: clazz = ''
+		class: clazz = '',
+		onfocus = undefined,
+		onchange = undefined,
+		onblur = undefined
 	}: Props = $props()
 
 	let yPadding = MONACO_Y_PADDING
@@ -515,6 +521,7 @@
 
 		editor.onDidFocusEditorText(() => {
 			dispatch('focus')
+			onfocus?.()
 
 			editor?.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {})
 
@@ -528,6 +535,7 @@
 			}
 			code = ncode
 			dispatch('change', { code: ncode })
+			onchange?.({ code: ncode })
 		}
 
 		editor.onDidChangeModelContent((event) => {
@@ -555,11 +563,13 @@
 
 		editor.onDidFocusEditorText(() => {
 			dispatch('focus')
+			onfocus?.()
 			isFocus = true
 		})
 
 		editor.onDidBlurEditorText(() => {
 			dispatch('blur')
+			onblur?.()
 			isFocus = false
 			updateCode()
 		})

frontend/src/lib/components/Toggle.svelte

@@ -33,6 +33,7 @@
 		size?: '2xs' | 'xs' | 'sm' | 'md'
 		textDisabled?: boolean
 		right?: import('svelte').Snippet
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -50,7 +51,8 @@
 		class: className = undefined,
 		size = 'sm',
 		textDisabled = false,
-		right
+		right,
+		onchange = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher<{ change: boolean }>()
@@ -104,6 +106,7 @@
 			bind:checked
 			onchange={stopPropagation((e) => {
 				dispatch('change', !!checked)
+				onchange?.(!!checked)
 			})}
 		/>
 		<div

frontend/src/lib/components/UserSettings.svelte

@@ -15,6 +15,7 @@
 		newToken?: string | undefined
 		showMcpMode?: boolean
 		disableChatOffset?: boolean
+		ontokenCreated?: (...args: any[]) => any
 	}
 
 	let {
@@ -23,7 +24,8 @@
 		newTokenWorkspace = undefined,
 		newToken = $bindable(undefined),
 		showMcpMode = false,
-		disableChatOffset = false
+		disableChatOffset = false,
+		ontokenCreated = undefined
 	}: Props = $props()
 
 	let drawer: Drawer | undefined = $state()
@@ -48,6 +50,7 @@
 	function handleTokenCreated(token: string) {
 		newToken = token
 		dispatch('tokenCreated', token)
+		ontokenCreated?.(token)
 	}
 </script>
 

frontend/src/lib/components/WorkerGroup.svelte

@@ -210,6 +210,7 @@
 		onDeleted?: (deletedGroupName: string) => void
 		onOpenYamlEditor?: () => void
 		selectGroup?: import('svelte').Snippet
+		onreload?: (...args: any[]) => any
 	}
 
 	let {
@@ -225,7 +226,8 @@
 		onDrawerOpened = () => {},
 		onDeleted = () => {},
 		onOpenYamlEditor = undefined,
-		selectGroup = undefined
+		selectGroup = undefined,
+		onreload = undefined
 	}: Props = $props()
 
 	let workspaces: Workspace[] = $state([])
@@ -243,6 +245,7 @@
 	async function deleteWorkerGroup() {
 		await ConfigService.deleteConfig({ name: 'worker__' + name })
 		dispatch('reload')
+		onreload?.()
 		onDeleted(name)
 	}
 
@@ -345,6 +348,7 @@
 		}
 		sendUserToast('Worker caches clearing in 5s. Require a restart.')
 		dispatch('reload')
+		onreload?.()
 		openClean = false
 	}}
 >
@@ -1121,6 +1125,7 @@
 								await ConfigService.updateConfig({ name: 'worker__' + name, requestBody: nconfig })
 								sendUserToast('Configuration set')
 								dispatch('reload')
+								onreload?.()
 							}}
 							disabled={(!hasChanges && nconfig?.dedicated_worker == undefined) || !canEditConfig}
 						>

frontend/src/lib/components/WorkerTagSelect.svelte

@@ -16,7 +16,8 @@
 		nullTag = undefined,
 		disabled = false,
 		placeholder,
-		inputClass
+		inputClass,
+		onchange = undefined
 	}: {
 		tag: string | undefined
 		noLabel?: boolean
@@ -26,6 +27,7 @@
 		language?: string
 		class?: string
 		inputClass?: string
+		onchange?: (...args: any[]) => any
 	} = $props()
 
 	let loading = $state(false)
@@ -142,7 +144,9 @@
 		{disabled}
 		placeholder={nullTag ? nullTag : (placeholder ?? 'lang default')}
 		items={safeSelectItems(items)}
-		bind:value={() => tag, (value) => ((tag = value), dispatch('change', value))}
+		bind:value={
+			() => tag, (value) => ((tag = value), (dispatch('change', value), onchange?.(value)))
+		}
 		{startSnippet}
 		bottomSnippet={refreshAll}
 	/>

frontend/src/lib/components/apps/components/display/dbtable/DeleteRow.svelte

@@ -12,9 +12,10 @@
 
 	interface Props {
 		id: string
+		ondeleted?: (...args: any[]) => any
 	}
 
-	let { id }: Props = $props()
+	let { id, ondeleted = undefined }: Props = $props()
 
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -58,6 +59,7 @@
 					onDone: (_x) => {
 						sendUserToast('Row deleted', false)
 						dispatch('deleted')
+						ondeleted?.()
 					},
 					onCancel: () => {
 						sendUserToast('Error deleting row', true)

frontend/src/lib/components/apps/components/display/dbtable/InsertRowRunnable.svelte

@@ -12,9 +12,10 @@
 
 	interface Props {
 		id: string
+		oninsert?: (...args: any[]) => any
 	}
 
-	let { id }: Props = $props()
+	let { id, oninsert = undefined }: Props = $props()
 
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -54,6 +55,7 @@
 			await runnableComponent?.runComponent(undefined, undefined, undefined, values, {
 				onDone: (_x) => {
 					dispatch('insert')
+					oninsert?.()
 					sendUserToast('Row inserted', false)
 				},
 				onCancel: () => {

frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte

@@ -42,6 +42,9 @@
 		result?: any[] | undefined
 		allowColumnDefsActions?: boolean
 		onChange?: string[] | undefined
+		onupdate?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
+		onrecompute?: (...args: any[]) => any
 	}
 
 	let {
@@ -56,7 +59,10 @@
 		actions = [],
 		result = undefined,
 		allowColumnDefsActions = true,
-		onChange = undefined
+		onChange = undefined,
+		onupdate = undefined,
+		ondelete = undefined,
+		onrecompute = undefined
 	}: Props = $props()
 	let inputs = {}
 
@@ -129,6 +135,14 @@
 			columnDef: event.colDef
 		})
 
+		onupdate?.({
+			row: event.node.rowIndex,
+			column: event.colDef.field,
+			value: dataCell,
+			data: event.node.data,
+			oldValue: event.oldValue,
+			columnDef: event.colDef
+		})
 		resolvedConfig?.extraConfig?.['defaultColDef']?.['onCellValueChanged']?.(event)
 		fireOnChange()
 	}
@@ -253,6 +267,7 @@
 				cellRendererParams: {
 					onClick: (e) => {
 						dispatch('delete', e)
+						ondelete?.(e)
 					}
 				},
 				lockPosition: 'right',
@@ -383,6 +398,7 @@
 							},
 							recompute: () => {
 								dispatch('recompute')
+								onrecompute?.()
 							}
 						}
 						api = e.api

frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte

@@ -33,6 +33,7 @@
 		wrapActions?: boolean | undefined
 		selectRow: (params: ICellRendererParams<any>) => void
 		setModalRow: (row?: ICellRendererParams<any>) => void
+		ontoggleRow?: (...args: any[]) => any
 	}
 
 	let {
@@ -46,7 +47,8 @@
 		onRemove,
 		wrapActions = undefined,
 		selectRow,
-		setModalRow
+		setModalRow,
+		ontoggleRow = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -197,6 +199,7 @@
 							noWFull
 							preclickAction={async () => {
 								dispatch('toggleRow')
+								ontoggleRow?.()
 								p && selectRow(p)
 							}}
 							id={action.id}
@@ -223,6 +226,7 @@
 							verticalAlignment="center"
 							preclickAction={async () => {
 								dispatch('toggleRow')
+								ontoggleRow?.()
 								p && (selectRow(p), setModalRow(p))
 							}}
 							onClose={() => setModalRow(undefined)}
@@ -239,6 +243,7 @@
 							onToggle={action.onToggle}
 							preclickAction={async () => {
 								dispatch('toggleRow')
+								ontoggleRow?.()
 								p && selectRow(p)
 							}}
 							verticalAlignment="center"
@@ -259,6 +264,7 @@
 								onSelect={action.onSelect}
 								preclickAction={async () => {
 									dispatch('toggleRow')
+									ontoggleRow?.()
 									p && selectRow(p)
 								}}
 								{controls}
@@ -272,6 +278,7 @@
 						{render}
 						preclickAction={async () => {
 							dispatch('toggleRow')
+							ontoggleRow?.()
 							p && selectRow(p)
 						}}
 						noWFull
@@ -297,6 +304,7 @@
 						verticalAlignment="center"
 						preclickAction={async () => {
 							dispatch('toggleRow')
+							ontoggleRow?.()
 							p && (selectRow(p), setModalRow(p))
 						}}
 						onClose={() => setModalRow(undefined)}
@@ -313,6 +321,7 @@
 						onToggle={action.onToggle}
 						preclickAction={async () => {
 							dispatch('toggleRow')
+							ontoggleRow?.()
 							p && selectRow(p)
 						}}
 					/>
@@ -331,6 +340,7 @@
 							onSelect={action.onSelect}
 							preclickAction={async () => {
 								dispatch('toggleRow')
+								ontoggleRow?.()
 								p && selectRow(p)
 							}}
 						/>

frontend/src/lib/components/apps/components/display/table/AppCell.svelte

@@ -12,9 +12,10 @@
 		type?: 'text' | 'badge' | 'link'
 		value: any
 		width: number
+		onupdate?: (...args: any[]) => any
 	}
 
-	let { type = 'text', value = $bindable(), width }: Props = $props()
+	let { type = 'text', value = $bindable(), width, onupdate = undefined }: Props = $props()
 
 	let isEditable = writable(false)
 	let tempValue = $state(value)
@@ -44,6 +45,9 @@
 			value
 		})
 
+		onupdate?.({
+			value
+		})
 		toggleEdit()
 	}
 </script>

frontend/src/lib/components/apps/components/helpers/InputValue.svelte

@@ -33,6 +33,7 @@
 		field?: string
 		onDemandOnly?: boolean
 		exportValueFunction?: boolean
+		ondone?: (...args: any[]) => any
 	}
 
 	let {
@@ -43,7 +44,8 @@
 		key = '',
 		field = key,
 		onDemandOnly = false,
-		exportValueFunction = false
+		exportValueFunction = false,
+		ondone = undefined
 	}: Props = $props()
 
 	const { componentControl, runnableComponents, recomputeAllContext } =
@@ -67,6 +69,7 @@
 		// How did this ever do anything at the top level in svelte 4 if
 		// events were not being picked up before the component fully mounted?
 		dispatch('done')
+		ondone?.()
 	}
 
 	const { worldStore, state: stateStore, mode } = getContext<AppViewerContext>('AppViewerContext')
@@ -211,6 +214,7 @@
 
 		await tick()
 		dispatchIfMounted('done')
+		ondone?.()
 	}
 
 	function onEvalChange(previousValueKey: string) {

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -75,6 +75,15 @@
 		onSuccess?: (result: any) => void
 		children?: import('svelte').Snippet
 		nonRenderedPlaceholder?: import('svelte').Snippet
+		onstarted?: (...args: any[]) => any
+		ondone?: (...args: any[]) => any
+		onstreamupdate?: (...args: any[]) => any
+		oncancel?: (...args: any[]) => any
+		ondoneError?: (...args: any[]) => any
+		onresultSet?: (...args: any[]) => any
+		onhandleError?: (...args: any[]) => any
+		onrecompute?: (...args: any[]) => any
+		onargsChanged?: (...args: any[]) => any
 	}
 
 	let {
@@ -106,7 +115,16 @@
 		replaceCallback = false,
 		children,
 		nonRenderedPlaceholder,
-		onSuccess
+		onSuccess,
+		onstarted = undefined,
+		ondone = undefined,
+		onstreamupdate = undefined,
+		oncancel = undefined,
+		ondoneError = undefined,
+		onresultSet = undefined,
+		onhandleError = undefined,
+		onrecompute = undefined,
+		onargsChanged = undefined
 	}: Props = $props()
 
 	const {
@@ -190,6 +208,7 @@
 				loading = true
 				outputs.jobId?.set(id)
 				dispatch('started', id)
+				onstarted?.(id)
 			},
 			doneWithoutCompute(r: any) {
 				onDone?.(r)
@@ -200,6 +219,7 @@
 				setResult(result, id)
 				loading = false
 				dispatch('done', { id, result })
+				ondone?.({ id, result })
 			},
 			resultStreamUpdate({
 				id,
@@ -210,6 +230,7 @@
 			}) {
 				setResult(nresult_stream, id, false)
 				dispatch('streamupdate', { id, result_stream: nresult_stream })
+				onstreamupdate?.({ id, result_stream: nresult_stream })
 			},
 			cancel({ id }: { id: string }) {
 				onCancel?.()
@@ -224,12 +245,14 @@
 					}
 				}
 				dispatch('cancel', { id })
+				oncancel?.({ id })
 			},
 			doneError({ id, error }: { id?: string; error: any }) {
 				onError?.(error)
 				setResult({ error }, id)
 				loading = false
 				dispatch('doneError', { id, error })
+				ondoneError?.({ id, error })
 			}
 		}
 		if (isEditor) {
@@ -649,6 +672,7 @@
 
 	async function setResult(res: any, jobId: string | undefined, dispatchSuccess: boolean = true) {
 		dispatch('resultSet', res)
+		onresultSet?.(res)
 		const errors = getResultErrors(res)
 
 		if (errors) {
@@ -659,6 +683,7 @@
 			recordJob(jobId, errors, errors, transformerResult)
 			updateResult(res)
 			dispatch('handleError', errors)
+			onhandleError?.(errors)
 			// callbacks?.done(res)
 			return
 		}
@@ -678,6 +703,7 @@
 			recordJob(jobId, res, undefined, transformerResult)
 			updateResult(transformerResult)
 			dispatch('handleError', transformerResult.error)
+			onhandleError?.(transformerResult.error)
 			// callbacks?.done(res)
 			return
 		}
@@ -708,6 +734,7 @@
 				let rejectCb: (err: Error) => void
 				let p: Partial<CancelablePromise<any>> = new Promise<any>((resolve, reject) => {
 					dispatch('recompute')
+					onrecompute?.()
 					rejectCb = reject
 					executeComponent(true, inlineScript, setRunnableJobEditorPanel, undefined, {
 						onDone: (x) => {
@@ -834,7 +861,7 @@
 	})
 	let ignoreFirst = true
 	$effect(() => {
-		runnableInputValues && !ignoreFirst && dispatch('argsChanged')
+		runnableInputValues && !ignoreFirst && (dispatch('argsChanged'), onargsChanged?.())
 		ignoreFirst = false
 	})
 	let refreshOn = $derived(

frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte

@@ -30,6 +30,8 @@
 		selectedJobId?: string | undefined
 		refreshComponents?: (() => void) | undefined
 		errorByComponent?: Record<string, { id?: string; error: string }>
+		onclear?: (...args: any[]) => any
+		onclearErrors?: (...args: any[]) => any
 	}
 
 	let {
@@ -39,7 +41,9 @@
 		hasErrors = false,
 		selectedJobId = $bindable(undefined),
 		refreshComponents = undefined,
-		errorByComponent = {}
+		errorByComponent = {},
+		onclear = undefined,
+		onclearErrors = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -301,11 +305,16 @@
 				variant="default"
 				on:click={() => {
 					dispatch('clear')
+					onclear?.()
 				}}
 				>Clear jobs
 			</Button>
 			{#if hasErrors}
-				<Button size="md" variant="default" on:click={() => dispatch('clearErrors')}>
+				<Button
+					size="md"
+					variant="default"
+					on:click={() => (dispatch('clearErrors'), onclearErrors?.())}
+				>
 					Clear Errors &nbsp;<BellOff size={14} />
 				</Button>
 			{/if}

frontend/src/lib/components/apps/editor/ComponentHeader.svelte

@@ -28,6 +28,11 @@
 		errorHandledByComponent?: boolean
 		fullHeight?: boolean
 		componentContainerWidth: number
+		onmouseover?: (...args: any[]) => any
+		onfillHeight?: (...args: any[]) => any
+		onlock?: (...args: any[]) => any
+		onexpand?: (...args: any[]) => any
+		ontriggerInlineEditor?: (...args: any[]) => any
 	}
 
 	let {
@@ -40,7 +45,12 @@
 		inlineEditorOpened = false,
 		errorHandledByComponent = false,
 		fullHeight = false,
-		componentContainerWidth
+		componentContainerWidth,
+		onmouseover = undefined,
+		onfillHeight = undefined,
+		onlock = undefined,
+		onexpand = undefined,
+		ontriggerInlineEditor = undefined
 	}: Props = $props()
 
 	const DECISION_TREE_THRESHOLD = 300
@@ -130,6 +140,7 @@
 			onmouseover={stopPropagation(() => {
 				hoverHeader = true
 				dispatch('mouseover')
+				onmouseover?.()
 			})}
 			onmouseleave={stopPropagation(() => {
 				hoverHeader = false
@@ -163,7 +174,7 @@
 								? 'bg-blue-300 text-blue-800'
 								: 'text-white hover:bg-blue-400 hover:text-white'
 						)}
-						onclick={() => dispatch('fillHeight')}
+						onclick={() => (dispatch('fillHeight'), onfillHeight?.())}
 						onpointerdown={stopPropagation(bubble('pointerdown'))}
 					>
 						<ArrowDownFromLine aria-label="Full height" size={11} />
@@ -175,7 +186,7 @@
 							'px-1 py-0.5 text-2xs font-bold rounded cursor-pointer w-fit h-full',
 							locked ? 'bg-blue-300 text-blue-800' : 'text-white hover:bg-blue-400 hover:text-white'
 						)}
-						onclick={() => dispatch('lock')}
+						onclick={() => (dispatch('lock'), onlock?.())}
 						onpointerdown={stopPropagation(bubble('pointerdown'))}
 					>
 						{#if locked}
@@ -190,7 +201,7 @@
 							class={twMerge(
 								'px-1 py-0.5 text-2xs font-bold rounded cursor-pointer w-fit h-full text-white hover:bg-blue-400 hover:text-white'
 							)}
-							onclick={() => dispatch('expand')}
+							onclick={() => (dispatch('expand'), onexpand?.())}
 							onpointerdown={stopPropagation(bubble('pointerdown'))}
 						>
 							<Expand aria-label="Expand" size={11} />
@@ -217,7 +228,7 @@
 								? 'bg-blue-300 text-blue-800'
 								: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 						)}
-						onclick={() => dispatch('triggerInlineEditor')}
+						onclick={() => (dispatch('triggerInlineEditor'), ontriggerInlineEditor?.())}
 						onpointerdown={stopPropagation(bubble('pointerdown'))}
 					>
 						<Pen aria-label="Edit" size={11} />

frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte

@@ -15,9 +15,16 @@
 		id: string
 		isSmall?: boolean
 		componentIsDebugging?: boolean
+		ontriggerInlineEditor?: (...args: any[]) => any
 	}
 
-	let { nodes = [], id, isSmall = false, componentIsDebugging = $bindable(false) }: Props = $props()
+	let {
+		nodes = [],
+		id,
+		isSmall = false,
+		componentIsDebugging = $bindable(false),
+		ontriggerInlineEditor = undefined
+	}: Props = $props()
 
 	$effect(() => {
 		componentIsDebugging = isDebugging($debuggingComponents, id)
@@ -119,7 +126,7 @@
 						? ' hover:bg-red-300 hover:text-red-800'
 						: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 				)}
-				onclick={() => dispatch('triggerInlineEditor')}
+				onclick={() => (dispatch('triggerInlineEditor'), ontriggerInlineEditor?.())}
 				onpointerdown={stopPropagation(bubble('pointerdown'))}
 			>
 				{#if componentIsDebugging}

frontend/src/lib/components/apps/editor/DeploymentHistory.svelte

@@ -14,9 +14,10 @@
 
 	interface Props {
 		appPath: string | undefined
+		onrestore?: (...args: any[]) => any
 	}
 
-	let { appPath }: Props = $props()
+	let { appPath, onrestore = undefined }: Props = $props()
 	let loading: boolean = $state(false)
 
 	let versions: AppHistory[] = $state([])
@@ -186,7 +187,9 @@
 							>
 								Restore as fork
 							</Button>
-							<Button size="xs" on:click={() => dispatch('restore', selected)}
+							<Button
+								size="xs"
+								on:click={() => (dispatch('restore', selected), onrestore?.(selected))}
 								>Redeploy with that version
 							</Button>
 						</div>

frontend/src/lib/components/apps/editor/GridEditorMenu.svelte

@@ -71,9 +71,20 @@
 		fullHeight?: boolean
 		id: string
 		children?: import('svelte').Snippet
+		onfillHeight?: (...args: any[]) => any
+		onexpand?: (...args: any[]) => any
+		onlock?: (...args: any[]) => any
 	}
 
-	let { locked = false, fullHeight = false, id, children }: Props = $props()
+	let {
+		locked = false,
+		fullHeight = false,
+		id,
+		children,
+		onfillHeight = undefined,
+		onexpand = undefined,
+		onlock = undefined
+	}: Props = $props()
 
 	const { selectedComponent, focusedGrid, componentControl, app } = getContext<AppViewerContext>(
 		'AppViewerContext'
@@ -116,6 +127,7 @@
 			label: () => (fullHeight ? 'Undo fill height' : 'Fill height'),
 			onClick: () => {
 				dispatch('fillHeight')
+				onfillHeight?.()
 			},
 			icon: ArrowDownFromLine,
 			tooltip: {
@@ -127,6 +139,7 @@
 			label: () => 'Expand',
 			onClick: () => {
 				dispatch('expand')
+				onexpand?.()
 			},
 			icon: Expand,
 			tooltip: {
@@ -138,6 +151,7 @@
 			label: () => (locked ? 'Unlock' : 'Lock'),
 			onClick: () => {
 				dispatch('lock')
+				onlock?.()
 			},
 			icon: Anchor,
 			tooltip: {

frontend/src/lib/components/apps/editor/GridViewer.svelte

@@ -29,6 +29,8 @@
 		containerWidth?: number | undefined
 		parentWidth?: number | undefined
 		children?: import('svelte').Snippet<[any]>
+		onresize?: (...args: any[]) => any
+		onmount?: (...args: any[]) => any
 	}
 
 	let {
@@ -41,7 +43,9 @@
 		allIdsInPath = undefined,
 		containerWidth = $bindable(undefined),
 		parentWidth = undefined,
-		children
+		children,
+		onresize = undefined,
+		onmount = undefined
 	}: Props = $props()
 
 	const cols = columnConfiguration
@@ -71,6 +75,12 @@
 			yPerPx,
 			width: containerWidth
 		})
+		onresize?.({
+			cols: getComputedCols,
+			xPerPx,
+			yPerPx,
+			width: containerWidth
+		})
 	}, throttleUpdate)
 
 	onMount(() => {
@@ -99,6 +109,11 @@
 						xPerPx,
 						yPerPx // same as rowHeight
 					})
+					onmount?.({
+						cols: getComputedCols,
+						xPerPx,
+						yPerPx // same as rowHeight
+					})
 				} else {
 					onResize()
 				}

frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte

@@ -12,6 +12,7 @@
 		refreshing?: string[]
 		progress?: number
 		loading?: boolean | undefined
+		onsetInter?: (...args: any[]) => any
 	}
 
 	let {
@@ -19,7 +20,8 @@
 		interval = undefined,
 		refreshing = [],
 		progress = 100,
-		loading = false
+		loading = false,
+		onsetInter = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -27,11 +29,11 @@
 	const items = [
 		{
 			displayName: 'Once',
-			action: () => dispatch('setInter', undefined)
+			action: () => (dispatch('setInter', undefined), onsetInter?.(undefined))
 		},
 		...[1, 2, 3, 4, 5, 6].map((i) => ({
 			displayName: `Every ${i * 5} seconds`,
-			action: () => dispatch('setInter', i * 5000)
+			action: () => (dispatch('setInter', i * 5000), onsetInter?.(i * 5000))
 		}))
 	]
 </script>

frontend/src/lib/components/apps/editor/TabsDebug.svelte

@@ -17,6 +17,7 @@
 		isConditionalDebugMode?: boolean
 		isSmall?: boolean
 		isManuallySelected?: boolean
+		ontriggerInlineEditor?: (...args: any[]) => any
 	}
 
 	let {
@@ -24,7 +25,8 @@
 		id,
 		isConditionalDebugMode = false,
 		isSmall = false,
-		isManuallySelected = $bindable(false)
+		isManuallySelected = $bindable(false),
+		ontriggerInlineEditor = undefined
 	}: Props = $props()
 	let selected: number | null = $state(null)
 
@@ -68,7 +70,7 @@
 						? 'hover:bg-red-200 hover:text-red-800'
 						: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 				)}
-				onclick={() => dispatch('triggerInlineEditor')}
+				onclick={() => (dispatch('triggerInlineEditor'), ontriggerInlineEditor?.())}
 				onpointerdown={stopPropagation(bubble('pointerdown'))}
 			>
 				{#if isManuallySelected}

frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte

@@ -33,6 +33,9 @@
 		overriden?: boolean
 		overridding?: boolean
 		wmClass?: string | undefined
+		onchange?: (...args: any[]) => any
+		onleft?: (...args: any[]) => any
+		onright?: (...args: any[]) => any
 	}
 
 	let {
@@ -47,7 +50,10 @@
 		shouldDisplayRight = false,
 		overriden = false,
 		overridding = false,
-		wmClass = undefined
+		wmClass = undefined,
+		onchange = undefined,
+		onleft = undefined,
+		onright = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -58,6 +64,7 @@
 		if (deepEqual(prevValue, value)) return
 		prevValue = structuredClone($state.snapshot(value))
 		dispatch('change', value)
+		onchange?.(value)
 	})
 
 	function toggleQuickMenu() {
@@ -93,7 +100,7 @@
 						size="xs2"
 						iconOnly
 						startIcon={{ icon: MoveLeft }}
-						on:click={() => dispatch('left')}
+						on:click={() => (dispatch('left'), onleft?.())}
 					/>
 					{#snippet text()}
 						{'Copy for this component'}
@@ -107,7 +114,7 @@
 						size="xs2"
 						iconOnly
 						startIcon={{ icon: MoveRight }}
-						on:click={() => dispatch('right')}
+						on:click={() => (dispatch('right'), onright?.())}
 					/>
 					{#snippet text()}
 						Copy for every {componentType ? ccomponents[componentType].name : 'component'}

frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte

@@ -14,9 +14,10 @@
 			name: string
 			path: string
 		}
+		onreload?: (...args: any[]) => any
 	}
 
-	let { row }: Props = $props()
+	let { row, onreload = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -28,6 +29,7 @@
 			})
 		}
 		dispatch('reload')
+		onreload?.()
 		sendUserToast('Component deleted:\n' + row.name)
 	}
 
@@ -49,6 +51,7 @@
 			}
 		})
 		dispatch('reload')
+		onreload?.()
 
 		sendUserToast('Component name updated:\n' + name)
 	}

frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte

@@ -13,9 +13,10 @@
 			name: string
 			path: string
 		}
+		onreloadGroups?: (...args: any[]) => any
 	}
 
-	let { row }: Props = $props()
+	let { row, onreloadGroups = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -24,6 +25,7 @@
 			await deleteGroup($workspaceStore, row.path)
 		}
 		dispatch('reloadGroups')
+		onreloadGroups?.()
 		sendUserToast('Group deleted:\n' + row.name)
 	}
 
@@ -54,6 +56,7 @@
 						}
 					})
 					dispatch('reloadGroups')
+					onreloadGroups?.()
 
 					sendUserToast('Group name updated:\n' + e.detail.name)
 				}}

frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte

@@ -20,6 +20,7 @@
 		subtitle?: string | undefined
 		titleSlot?: import('svelte').Snippet
 		children?: import('svelte').Snippet
+		onopen?: (...args: any[]) => any
 	}
 
 	let {
@@ -34,7 +35,8 @@
 		documentationLink = undefined,
 		subtitle = undefined,
 		titleSlot,
-		children
+		children,
+		onopen = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -46,6 +48,7 @@
 
 	$effect(() => {
 		dispatch('open', isOpen ?? false)
+		onopen?.(isOpen ?? false)
 	})
 
 	onMount(() => {

frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte

@@ -10,9 +10,10 @@
 			name: string
 			path: string
 		}
+		onupdate?: (...args: any[]) => any
 	}
 
-	let { kind, row }: Props = $props()
+	let { kind, row, onupdate = undefined }: Props = $props()
 
 	let editedName = $state(row.name)
 
@@ -20,6 +21,7 @@
 	function onkeydown(e) {
 		if (e.key === 'Enter') {
 			dispatch('update', { path: row.path, name: editedName })
+			onupdate?.({ path: row.path, name: editedName })
 		}
 	}
 </script>
@@ -42,6 +44,7 @@
 					size="xs"
 					on:click={() => {
 						dispatch('update', { path: row.path, name: editedName })
+						onupdate?.({ path: row.path, name: editedName })
 						close()
 					}}
 				>

frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte

@@ -12,9 +12,10 @@
 			name: string
 			path: string
 		}
+		onreloadThemes?: (...args: any[]) => any
 	}
 
-	let { row }: Props = $props()
+	let { row, onreloadThemes = undefined }: Props = $props()
 
 	let editedName = $state(row.name)
 
@@ -49,6 +50,7 @@
 						}
 					})
 					dispatch('reloadThemes')
+					onreloadThemes?.()
 					close()
 					sendUserToast('Theme name updated:\n' + editedName)
 				}}

frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte

@@ -22,9 +22,16 @@
 			name: string
 			path: string
 		}
+		onreloadThemes?: (...args: any[]) => any
+		onsetCodeTab?: (...args: any[]) => any
 	}
 
-	let { previewThemePath = $bindable(undefined), row }: Props = $props()
+	let {
+		previewThemePath = $bindable(undefined),
+		row,
+		onreloadThemes = undefined,
+		onsetCodeTab = undefined
+	}: Props = $props()
 
 	const { previewTheme, app } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -80,6 +87,7 @@
 		}
 
 		dispatch('reloadThemes')
+		onreloadThemes?.()
 	}
 
 	async function toggleDelete() {
@@ -88,6 +96,7 @@
 			await deleteTheme($workspaceStore, row.path)
 		}
 		dispatch('reloadThemes')
+		onreloadThemes?.()
 		sendUserToast('Theme deleted:\n' + row.name)
 	}
 
@@ -120,6 +129,7 @@
 		}
 
 		dispatch('setCodeTab')
+		onsetCodeTab?.()
 	}
 
 	function stopPreview() {

frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte

@@ -25,13 +25,17 @@
 		showScriptPicker?: boolean
 		rawApps?: boolean
 		unusedInlineScripts: { name: string; inlineScript: InlineScript }[]
+		onnew?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
 		componentType = undefined,
 		showScriptPicker = false,
 		rawApps = false,
-		unusedInlineScripts
+		unusedInlineScripts,
+		onnew = undefined,
+		ondelete = undefined
 	}: Props = $props()
 
 	let tab = $state('workspacescripts')
@@ -75,6 +79,7 @@
 			schema
 		}
 		dispatch('new', newInlineScript)
+		onnew?.(newInlineScript)
 	}
 
 	async function pickScript(path: string) {
@@ -147,7 +152,7 @@
 			</Button>
 
 			<Button
-				on:click={() => dispatch('delete')}
+				on:click={() => (dispatch('delete'), ondelete?.())}
 				size="xs"
 				color="red"
 				variant="border"
@@ -216,6 +221,7 @@ return state.foo`,
 								schema: undefined
 							}
 							dispatch('new', newInlineScript)
+							onnew?.(newInlineScript)
 						}}
 					/>
 				</div>

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -46,6 +46,8 @@
 		transformer?: boolean
 		componentType?: string | undefined
 		editor?: Editor | undefined
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
@@ -57,7 +59,9 @@
 		syncFields = false,
 		transformer = false,
 		componentType = undefined,
-		editor = $bindable(undefined)
+		editor = $bindable(undefined),
+		oncreateScriptFromInlineScript = undefined,
+		ondelete = undefined
 	}: Props = $props()
 	let diffEditor: DiffEditor | undefined = $state()
 	let simpleEditor: SimpleEditor | undefined = $state()
@@ -221,6 +225,7 @@
 			bind:inlineScript
 			on:createScriptFromInlineScript={() => {
 				dispatch('createScriptFromInlineScript')
+				oncreateScriptFromInlineScript?.()
 				drawerIsOpen = false
 			}}
 		/>
@@ -280,7 +285,7 @@
 					variant="subtle"
 					destructive
 					aria-label="Delete"
-					on:click={() => dispatch('delete')}
+					on:click={() => (dispatch('delete'), ondelete?.())}
 					endIcon={{ icon: Trash2 }}
 					iconOnly
 				/>

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte

@@ -14,6 +14,7 @@
 		componentType: string
 		id: string
 		transformer: boolean
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
 	}
 
 	let {
@@ -21,7 +22,8 @@
 		defaultUserInput = false,
 		componentType,
 		id,
-		transformer
+		transformer,
+		oncreateScriptFromInlineScript = undefined
 	}: Props = $props()
 
 	const { app } = getContext<AppViewerContext>('AppViewerContext')
@@ -70,6 +72,7 @@
 				on:createScriptFromInlineScript={() => {
 					if (componentInput?.type == 'runnable' && isRunnableByName(componentInput.runnable)) {
 						dispatch('createScriptFromInlineScript', componentInput?.runnable)
+						oncreateScriptFromInlineScript?.(componentInput?.runnable)
 					}
 				}}
 				{defaultUserInput}

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte

@@ -15,9 +15,15 @@
 		runnable: HiddenRunnable
 		id: string
 		transformer: boolean
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
 	}
 
-	let { runnable = $bindable(), id, transformer }: Props = $props()
+	let {
+		runnable = $bindable(),
+		id,
+		transformer,
+		oncreateScriptFromInlineScript = undefined
+	}: Props = $props()
 
 	const { runnableComponents, app } = getContext<AppViewerContext>('AppViewerContext')
 	async function fork(nrunnable: Runnable) {
@@ -60,7 +66,10 @@
 	{/if}
 {:else if isRunnableByName(runnable) && runnable.inlineScript}
 	<InlineScriptEditor
-		on:createScriptFromInlineScript={() => dispatch('createScriptFromInlineScript', runnable)}
+		on:createScriptFromInlineScript={() => (
+			dispatch('createScriptFromInlineScript', runnable),
+			oncreateScriptFromInlineScript?.(runnable)
+		)}
 		{id}
 		bind:inlineScript={runnable.inlineScript}
 		bind:name={runnable.name}

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte

@@ -36,13 +36,18 @@
 	interface Props {
 		runnable: RunnableByPath
 		fields:
-			| Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput | CtxAppInput>
+			| Record<
+					string,
+					StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput | CtxAppInput
+			  >
 			| undefined
 		id: string
 		rawApps?: boolean
 		isLoading?: boolean
 		onRun?: any
 		onCancel?: any
+		onfork?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
@@ -52,7 +57,9 @@
 		rawApps = false,
 		isLoading = false,
 		onRun = async () => {},
-		onCancel = async () => {}
+		onCancel = async () => {},
+		onfork = undefined,
+		ondelete = undefined
 	}: Props = $props()
 
 	const viewerContext = getContext<AppViewerContext>('AppViewerContext')
@@ -118,6 +125,16 @@
 				path
 			}
 		})
+		onfork?.({
+			type: 'inline',
+			name: path,
+			inlineScript: {
+				content,
+				language,
+				schema,
+				path
+			}
+		})
 	}
 
 	async function openScriptEditor(path: string) {
@@ -227,6 +244,7 @@
 			startIcon={{ icon: Trash }}
 			on:click={() => {
 				dispatch('delete')
+				ondelete?.()
 			}}
 		>
 			Clear

frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte

@@ -19,13 +19,15 @@
 		subFieldType?: InputType | undefined
 		selectOptions?: StaticOptions['selectOptions'] | undefined
 		id: string | undefined
+		ondeleteArrayItem?: (...args: any[]) => any
 	}
 
 	let {
 		componentInput = $bindable(),
 		subFieldType = undefined,
 		selectOptions = undefined,
-		id
+		id,
+		ondeleteArrayItem = undefined
 	}: Props = $props()
 
 	const appContext = getContext<AppViewerContext>('AppViewerContext')
@@ -223,6 +225,7 @@
 			items = items
 			componentInput.value = componentInput.value
 			dispatch('deleteArrayItem', { index })
+			ondeleteArrayItem?.({ index })
 		}
 	}
 

frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte

@@ -13,9 +13,15 @@
 		componentInput: AppInput
 		disableStatic?: boolean
 		evalV2editor: EvalV2InputEditor | undefined
+		onselect?: (...args: any[]) => any
 	}
 
-	let { componentInput = $bindable(), disableStatic = false, evalV2editor }: Props = $props()
+	let {
+		componentInput = $bindable(),
+		disableStatic = false,
+		evalV2editor,
+		onselect = undefined
+	}: Props = $props()
 
 	const { onchange, connectingInput, app } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -66,6 +72,7 @@
 							onConnect: () => {}
 						}
 						dispatch('select', true)
+						onselect?.(true)
 					}}
 					openConnection={() => {
 						$connectingInput = {

frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -58,6 +58,8 @@
 		markdownTooltip?: string | undefined
 		securedContext?: boolean
 		disabled?: boolean
+		oncloseConnection?: (...args: any[]) => any
+		onopenConnection?: (...args: any[]) => any
 	}
 
 	let {
@@ -87,7 +89,9 @@
 		showOnDemandOnlyToggle = true,
 		documentationLink = undefined,
 		markdownTooltip = undefined,
-		securedContext = false
+		securedContext = false,
+		oncloseConnection = undefined,
+		onopenConnection = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -140,6 +144,7 @@
 
 	function closeConnection() {
 		dispatch('closeConnection')
+		oncloseConnection?.()
 		$connectingInput = {
 			opened: false,
 			hoveredComponent: undefined,
@@ -150,6 +155,7 @@
 
 	function openConnection() {
 		dispatch('openConnection')
+		onopenConnection?.()
 		$connectingInput = {
 			opened: true,
 			input: undefined,

frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -21,6 +21,7 @@
 		showOnDemandOnlyToggle?: boolean
 		securedContext?: boolean
 		overridenByComponent?: string[]
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
@@ -36,7 +37,8 @@
 		recomputeOnInputChanged = true,
 		showOnDemandOnlyToggle = false,
 		securedContext = false,
-		overridenByComponent = []
+		overridenByComponent = [],
+		ondelete = undefined
 	}: Props = $props()
 
 	let finalInputSpecsConfiguration = $derived(inputSpecsConfiguration ?? inputSpecs)
@@ -104,7 +106,7 @@
 				/>
 				{#if deletable}
 					<div class="flex flex-row-reverse -mt-4">
-						<CloseButton noBg on:close={() => dispatch('delete', k)} />
+						<CloseButton noBg on:close={() => (dispatch('delete', k), ondelete?.(k))} />
 					</div>
 				{/if}
 			{/if}

frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte

@@ -9,9 +9,10 @@
 	interface Props {
 		columns?: string[]
 		id: string | undefined
+		onadd?: (...args: any[]) => any
 	}
 
-	let { columns = [], id }: Props = $props()
+	let { columns = [], id, onadd = undefined }: Props = $props()
 
 	let remainingColumns: string[] = $state([])
 
@@ -64,7 +65,7 @@
 	<div class="flex flex-row gap-2 items-center flex-wrap">
 		{#each remainingColumns as column}
 			<Button
-				on:click={() => dispatch('add', column)}
+				on:click={() => (dispatch('add', column), onadd?.(column))}
 				size="xs2"
 				color="light"
 				variant="border"

frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/InsertDecisionTreeNode.svelte

@@ -8,9 +8,16 @@
 	interface Props {
 		canAddBranch?: boolean
 		canAddNode?: boolean
+		onnode?: (...args: any[]) => any
+		onaddBranch?: (...args: any[]) => any
 	}
 
-	let { canAddBranch = true, canAddNode = true }: Props = $props()
+	let {
+		canAddBranch = true,
+		canAddNode = true,
+		onnode = undefined,
+		onaddBranch = undefined
+	}: Props = $props()
 </script>
 
 <div class="relative flex flex-row gap-1">
@@ -19,6 +26,7 @@
 			title="Add step"
 			onpointerdown={() => {
 				dispatch('node')
+				onnode?.()
 			}}
 			type="button"
 			class="text-primary bg-surface outline-[1px] outline dark:outline-gray-500 outline-gray-300 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
@@ -30,7 +38,7 @@
 		<button
 			title="Add branch"
 			type="button"
-			onclick={() => dispatch('addBranch')}
+			onclick={() => (dispatch('addBranch'), onaddBranch?.())}
 			class={twMerge(
 				'text-secondary bg-surface outline-[1px] outline dark:outline-gray-500 outline-gray-300 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center',
 				!canAddNode && 'ml-16 mb-2'

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte

@@ -8,9 +8,10 @@
 
 	interface Props {
 		value?: string
+		onchange?: (...args: any[]) => any
 	}
 
-	let { value = $bindable('#fff') }: Props = $props()
+	let { value = $bindable('#fff'), onchange = undefined }: Props = $props()
 	const dispatch = createEventDispatcher()
 	const [popperRef, popperContent] = createPopperActions()
 	let isOpen = $state(false)
@@ -18,6 +19,7 @@
 
 	$effect(() => {
 		dispatch('change', value)
+		onchange?.(value)
 	})
 
 	function open() {

frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte

@@ -11,9 +11,10 @@
 		filter?: string
 		inlineScripts?: string[]
 		children?: import('svelte').Snippet
+		onpick?: (...args: any[]) => any
 	}
 
-	let { filter = $bindable(''), inlineScripts = [], children }: Props = $props()
+	let { filter = $bindable(''), inlineScripts = [], children, onpick = undefined }: Props = $props()
 
 	type Item = { title: string }
 	let filteredItems: (Item & { marked?: string })[] = $state([])
@@ -47,7 +48,7 @@
 			<li class="flex flex-row w-full">
 				<button
 					class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
-					onclick={() => dispatch('pick', item.title)}
+					onclick={() => (dispatch('pick', item.title), onpick?.(item.title))}
 				>
 					<div class="flex items-center gap-4">
 						<RowIcon kind="script" />

frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -21,6 +21,7 @@
 		onlyFlow?: boolean
 		rawApps?: boolean
 		unusedInlineScripts: { name: string; inlineScript: InlineScript }[]
+		onpick?: (...args: any[]) => any
 	}
 
 	let {
@@ -28,7 +29,8 @@
 		hideCreateScript = false,
 		onlyFlow = false,
 		rawApps = false,
-		unusedInlineScripts = $bindable()
+		unusedInlineScripts = $bindable(),
+		onpick = undefined
 	}: Props = $props()
 
 	// const { app, workspace } = getContext<AppViewerContext>('AppViewerContext')
@@ -76,6 +78,10 @@
 			runnable,
 			fields
 		})
+		onpick?.({
+			runnable,
+			fields
+		})
 	}
 
 	async function pickFlow(path: string) {
@@ -92,6 +98,10 @@
 			runnable,
 			fields
 		})
+		onpick?.({
+			runnable,
+			fields
+		})
 	}
 
 	async function pickHubScript(path: string) {
@@ -108,6 +118,10 @@
 			runnable,
 			fields
 		})
+		onpick?.({
+			runnable,
+			fields
+		})
 	}
 
 	function pickInlineScript(name: string) {
@@ -122,6 +136,14 @@
 			fields: {}
 		})
 
+		onpick?.({
+			runnable: {
+				type: 'inline',
+				name,
+				inlineScript: unusedInlineScript.inlineScript
+			},
+			fields: {}
+		})
 		unusedInlineScripts.splice(unusedInlineScriptIndex, 1)
 		unusedInlineScripts = unusedInlineScripts
 	}
@@ -137,6 +159,14 @@
 			},
 			fields: {}
 		})
+		onpick?.({
+			runnable: {
+				type: 'inline',
+				name: newScriptName,
+				inlineScript: undefined
+			},
+			fields: {}
+		})
 	}
 </script>
 

frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte

@@ -14,9 +14,10 @@
 	interface Props {
 		filter?: string
 		children?: import('svelte').Snippet
+		onpick?: (...args: any[]) => any
 	}
 
-	let { filter = $bindable(''), children }: Props = $props()
+	let { filter = $bindable(''), children, onpick = undefined }: Props = $props()
 
 	let flows: Flow[] | undefined = $state(undefined)
 	let filteredItems: (Flow & { marked?: string })[] = $state([])
@@ -65,7 +66,7 @@
 				<li class="flex flex-row w-full">
 					<button
 						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
-						onclick={() => dispatch('pick', item.path)}
+						onclick={() => (dispatch('pick', item.path), onpick?.(item.path))}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="flow" />

frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte

@@ -14,9 +14,10 @@
 	interface Props {
 		filter?: string
 		children?: import('svelte').Snippet
+		onpick?: (...args: any[]) => any
 	}
 
-	let { filter = $bindable(''), children }: Props = $props()
+	let { filter = $bindable(''), children, onpick = undefined }: Props = $props()
 
 	let scripts: Script[] | undefined = $state(undefined)
 	let filteredItems: (Script & { marked?: string })[] = $state([])
@@ -65,7 +66,7 @@
 				<li class="flex flex-row w-full">
 					<button
 						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
-						onclick={() => dispatch('pick', item.path)}
+						onclick={() => (dispatch('pick', item.path), onpick?.(item.path))}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="script" />

frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte

@@ -10,6 +10,7 @@
 		canConfigureRecomputeOnInputChanged?: boolean
 		canConfigureRunOnStart?: boolean
 		children?: import('svelte').Snippet
+		onupdateAutoRefresh?: (...args: any[]) => any
 	}
 
 	let {
@@ -17,7 +18,8 @@
 		recomputeOnInputChanged = $bindable(false),
 		canConfigureRecomputeOnInputChanged = true,
 		canConfigureRunOnStart = true,
-		children
+		children,
+		onupdateAutoRefresh = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -41,6 +43,7 @@
 						size="xs"
 						on:change={() => {
 							dispatch('updateAutoRefresh')
+							onupdateAutoRefresh?.()
 						}}
 					/>
 				</div>
@@ -56,6 +59,7 @@
 						size="xs"
 						on:change={() => {
 							dispatch('updateAutoRefresh')
+							onupdateAutoRefresh?.()
 						}}
 					/>
 				</div>

frontend/src/lib/components/common/CloseButton.svelte

@@ -11,15 +11,24 @@
 		class?: string
 		id?: string | undefined
 		onClick?: () => void | undefined | any
+		onclose?: (...args: any[]) => any
 	}
 
-	let { noBg = false, small = false, Icon, class: className, id, onClick }: Props = $props()
+	let {
+		noBg = false,
+		small = false,
+		Icon,
+		class: className,
+		id,
+		onClick,
+		onclose = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 </script>
 
 <Button
-	on:click={() => (dispatch('close'), onClick?.())}
+	on:click={() => ((dispatch('close'), onclose?.()), onClick?.())}
 	on:pointerdown={(e) => e.stopPropagation()}
 	{id}
 	startIcon={{ icon: Icon ?? X }}

frontend/src/lib/components/common/button/Button.svelte

@@ -97,6 +97,8 @@
 		[key: string]: any
 		dropdownOpen?: boolean
 		dropdownWidth?: number | undefined
+		ontooltipOpen?: (...args: any[]) => any
+		ondropdownOpen?: (...args: any[]) => any
 	}
 
 	let {
@@ -139,6 +141,8 @@
 		onClick,
 		dropdownOpen = $bindable(false),
 		dropdownWidth = undefined,
+		ontooltipOpen = undefined,
+		ondropdownOpen = undefined,
 		...rest
 	}: Props = $props()
 
@@ -323,7 +327,7 @@
 	}) //This option is reactive
 
 	$effect(() => {
-		$open !== undefined && dispatchIfMounted('tooltipOpen', $open)
+		$open !== undefined && (dispatchIfMounted('tooltipOpen', $open), ontooltipOpen?.($open))
 	})
 
 	const dividerClass = $derived(getDividerClass(color, variant))
@@ -466,8 +470,8 @@
 			class="h-auto w-fit"
 			hidePopup={hideDropdown}
 			usePointerDownOutside
-			onOpen={() => dispatch('dropdownOpen', true)}
-			onClose={() => dispatch('dropdownOpen', false)}
+			onOpen={() => (dispatch('dropdownOpen', true), ondropdownOpen?.(true))}
+			onClose={() => (dispatch('dropdownOpen', false), ondropdownOpen?.(false))}
 			bind:open={dropdownOpen}
 			enableFlyTransition
 			customWidth={dropdownWidth}

frontend/src/lib/components/common/button/UndoRedo.svelte

@@ -4,11 +4,13 @@
 	import { Button } from '..'
 
 	interface Props {
-		undoProps?: Record<string, any>;
-		redoProps?: Record<string, any>;
+		undoProps?: Record<string, any>
+		redoProps?: Record<string, any>
+		onundo?: (...args: any[]) => any
+		onredo?: (...args: any[]) => any
 	}
 
-	let { undoProps = {}, redoProps = {} }: Props = $props();
+	let { undoProps = {}, redoProps = {}, onundo = undefined, onredo = undefined }: Props = $props()
 	const dispatch = createEventDispatcher()
 </script>
 
@@ -17,7 +19,7 @@
 		title="Undo"
 		variant="default"
 		btnClasses="!min-h-[30px] !rounded-r-none"
-		on:click={() => dispatch('undo')}
+		on:click={() => (dispatch('undo'), onundo?.())}
 		startIcon={{ icon: Undo }}
 		iconOnly
 		{...undoProps}
@@ -26,7 +28,7 @@
 		title="Redo"
 		variant="default"
 		btnClasses="!min-h-[30px] !rounded-l-none !border-l-0"
-		on:click={() => dispatch('redo')}
+		on:click={() => (dispatch('redo'), onredo?.())}
 		startIcon={{ icon: Redo }}
 		iconOnly
 		{...redoProps}

frontend/src/lib/components/common/clearableInput/ClearableInput.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation, preventDefault } from 'svelte/legacy';
+	import { createBubbler, stopPropagation, preventDefault } from 'svelte/legacy'
 
-	const bubble = createBubbler();
+	const bubble = createBubbler()
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import { X } from 'lucide-svelte'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
 	interface Props {
-		value?: any;
-		placeholder?: string;
-		type?: 'text' | 'textarea' | 'number';
-		inputClass?: string;
-		wrapperClass?: string;
-		buttonClass?: string;
-		children?: import('svelte').Snippet;
+		value?: any
+		placeholder?: string
+		type?: 'text' | 'textarea' | 'number'
+		inputClass?: string
+		wrapperClass?: string
+		buttonClass?: string
+		children?: import('svelte').Snippet
 		[key: string]: any
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -26,8 +27,9 @@
 		wrapperClass = '',
 		buttonClass = '',
 		children,
+		onchange = undefined,
 		...rest
-	}: Props = $props();
+	}: Props = $props()
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 	let isHovered = $state(false)
@@ -35,7 +37,8 @@
 	let isNumeric = $derived(['number', 'range'].includes(type))
 	$effect(() => {
 		dispatchIfMounted('change', value)
-	});
+		onchange?.(value)
+	})
 
 	function handleInput(e) {
 		value = isNumeric ? +e.target.value : e.target.value
@@ -47,7 +50,7 @@
 
 	$effect(() => {
 		if (value === undefined) value = ''
-	});
+	})
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->

frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte

@@ -16,9 +16,17 @@
 		open?: boolean
 		draftTriggers?: Trigger[]
 		isFlow?: boolean
+		oncanceled?: (...args: any[]) => any
+		onconfirmed?: (...args: any[]) => any
 	}
 
-	let { open = $bindable(false), draftTriggers = [], isFlow = false }: Props = $props()
+	let {
+		open = $bindable(false),
+		draftTriggers = [],
+		isFlow = false,
+		oncanceled = undefined,
+		onconfirmed = undefined
+	}: Props = $props()
 
 	let selectedTriggers: Trigger[] = $state(draftTriggers)
 
@@ -74,8 +82,11 @@
 	confirmationText={isFlow ? 'Deploy Flow' : 'Deploy Script'}
 	type="reload"
 	showIcon={false}
-	on:canceled={() => dispatch('canceled')}
-	on:confirmed={() => dispatch('confirmed', { selectedTriggers })}
+	on:canceled={() => (dispatch('canceled'), oncanceled?.())}
+	on:confirmed={() => (
+		dispatch('confirmed', { selectedTriggers }),
+		onconfirmed?.({ selectedTriggers })
+	)}
 >
 	<div class="flex flex-col w-full gap-8 pb-4">
 		<div class="text-secondary text-sm">