refactor: replace createBubbler with explicit callback forwarding

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

frontend/src/lib/components/ArgInput.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { preventDefault, stopPropagation, createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { preventDefault, stopPropagation } from 'svelte/legacy'
 	import type { EnumType, SchemaProperty } from '$lib/common'
 	import {
 		setInputCat as computeInputCat,
@@ -688,7 +686,7 @@
 				<div class="w-full">
 					<SecondsInput
 						bind:seconds={value}
-						onfocus={bubble('focus')}
+						onfocus={(e) => onfocus?.(e)}
 						{defaultValue}
 						clearable={extra['clearable'] !== false}
 					/>
@@ -713,8 +711,8 @@
 					<TextInput
 						inputProps={{
 							autofocus,
-							onfocus: bubble('focus'),
-							onblur: bubble('blur'),
+							onfocus: (e) => onfocus?.(e),
+							onblur: (e) => onblur?.(e),
 							disabled,
 							type: 'number',
 							onkeydown: () => (ignoreValueUndefined = true),
@@ -727,8 +725,8 @@
 					/>
 					<!-- <input
 						{autofocus}
-						onfocus={bubble('focus')}
-						onblur={bubble('blur')}
+						onfocus={((e) => onfocus?.(e))}
+						onblur={((e) => onblur?.(e))}
 						{disabled}
 						type="number"
 						onkeydown={() => {
@@ -1455,8 +1453,8 @@
 		{:else if inputCat == 'email'}
 			<input
 				{autofocus}
-				onfocus={bubble('focus')}
-				onblur={bubble('blur')}
+				onfocus={(e) => onfocus?.(e)}
+				onblur={(e) => onblur?.(e)}
 				{disabled}
 				type="email"
 				class={valid

frontend/src/lib/components/CustomPopover.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { createPopperActions, type PopperOptions } from 'svelte-popperjs'
 	import type { PopoverPlacement } from './Popover.model'
 	import Portal from '$lib/components/Portal.svelte'
@@ -18,6 +15,7 @@
 		class?: string
 		children?: import('svelte').Snippet
 		overlay?: import('svelte').Snippet
+		onclick?: (...args: any[]) => any
 	}
 
 	let {
@@ -31,7 +29,8 @@
 		focusEl = undefined,
 		class: clazz = '',
 		children,
-		overlay
+		overlay,
+		onclick = undefined
 	}: Props = $props()
 	const [popperRef, popperContent] = createPopperActions({ placement })
 
@@ -83,7 +82,7 @@
 		use:popperRef
 		onmouseenter={open}
 		onmouseleave={close}
-		onclick={bubble('click')}
+		onclick={(e) => onclick?.(e)}
 		class={clazz}
 	>
 		{@render children?.()}

frontend/src/lib/components/DateInput.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte'
 	import { format, isValid, parse } from 'date-fns'
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 
 	interface Props {
 		value?: string | null | undefined
@@ -13,6 +10,8 @@
 		dateFormat?: string | undefined
 		disabled?: boolean
 		onchange?: (...args: any[]) => any
+		onpointerdown?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
 	}
 
 	let {
@@ -22,7 +21,9 @@
 		maxDate = undefined,
 		dateFormat = 'dd-MM-yyyy',
 		disabled = false,
-		onchange = undefined
+		onchange = undefined,
+		onpointerdown = undefined,
+		onfocus = undefined
 	}: Props = $props()
 
 	const defaultDateFormat = 'dd-MM-yyyy'
@@ -75,8 +76,8 @@
 <div
 	class="flex flex-row gap-1 items-center w-full"
 	id={randomId}
-	onpointerdown={bubble('pointerdown')}
-	onfocus={bubble('focus')}
+	onpointerdown={(e) => onpointerdown?.(e)}
+	onfocus={(e) => onfocus?.(e)}
 >
 	<!-- svelte-ignore a11y_autofocus -->
 	<input

frontend/src/lib/components/DateTimeInput.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { createEventDispatcher, untrack } from 'svelte'
 	import { Button } from './common'
 	import { Clock, X } from 'lucide-svelte'
@@ -27,6 +24,8 @@
 		timezone?: 'naive' | 'local'
 		onchange?: (...args: any[]) => any
 		onclear?: (...args: any[]) => any
+		onpointerdown?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
 	}
 
 	let {
@@ -40,7 +39,9 @@
 		inputClass = undefined,
 		timezone = 'local',
 		onchange = undefined,
-		onclear = undefined
+		onclear = undefined,
+		onpointerdown = undefined,
+		onfocus = undefined
 	}: Props = $props()
 
 	let date: string | undefined = $state(undefined)
@@ -129,8 +130,8 @@
 <div
 	class="flex flex-row gap-1 items-center w-full relative"
 	id={randomId}
-	onpointerdown={bubble('pointerdown')}
-	onfocus={bubble('focus')}
+	onpointerdown={(e) => onpointerdown?.(e)}
+	onfocus={(e) => onfocus?.(e)}
 >
 	<!-- svelte-ignore a11y_autofocus -->
 	<TextInput

frontend/src/lib/components/EditableSchemaForm.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, preventDefault, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { preventDefault, stopPropagation } from 'svelte/legacy'
 	import type { Schema } from '$lib/common'
 	import { VariableService, type ScriptLang } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -83,6 +81,7 @@
 		onChange?: (args: Record<string, any>) => void
 		oneditPanelSizeChanged?: (...args: any[]) => any
 		ondelete?: (...args: any[]) => any
+		onclick?: (...args: any[]) => any
 	}
 
 	let {
@@ -121,7 +120,8 @@
 		schemaFormClassName = undefined,
 		onChange = undefined,
 		oneditPanelSizeChanged = undefined,
-		ondelete = undefined
+		ondelete = undefined,
+		onclick = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -596,7 +596,7 @@
 											<div class="flex flex-row gap-2 text-sm">
 												{argName}
 												{#if !uiOnly}
-													<div onclick={stopPropagation(preventDefault(bubble('click')))}>
+													<div onclick={stopPropagation(preventDefault((e) => onclick?.(e)))}>
 														<Popover placement="bottom-end" contentClasses="p-4" closeButton>
 															{#snippet trigger()}
 																<Button

frontend/src/lib/components/IdEditorInput.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { stopPropagation, createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { ArrowRight } from 'lucide-svelte'
 	import { Button } from './common'
 	import { forbiddenIds } from './flows/idUtils'
@@ -18,6 +16,7 @@
 		acceptUnderScores?: boolean
 		onSave: ({ oldId, newId }: { oldId: string; newId: string }) => void
 		onClose?: () => void
+		onkeypress?: (...args: any[]) => any
 	}
 
 	let {
@@ -30,7 +29,8 @@
 		btnClasses = '!p-1 !w-[34px] !ml-1',
 		acceptUnderScores = false,
 		onSave,
-		onClose
+		onClose,
+		onkeypress = undefined
 	}: Props = $props()
 
 	let error = $state('')
@@ -84,7 +84,7 @@
 					onClose?.()
 				}
 			}}
-			onkeypress={stopPropagation(bubble('keypress'))}
+			onkeypress={stopPropagation((e) => onkeypress?.(e))}
 		/>
 		<Button
 			size="xs"

frontend/src/lib/components/InstanceNameEditor.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { stopPropagation, createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { Pencil } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Button from './common/button/Button.svelte'
@@ -20,6 +18,7 @@
 		login_type: string
 		onsave?: (...args: any[]) => any
 		onrefresh?: (...args: any[]) => any
+		onkeydown?: (...args: any[]) => any
 	}
 
 	let {
@@ -29,7 +28,8 @@
 		automateUsernameCreation = false,
 		login_type = $bindable(),
 		onsave = undefined,
-		onrefresh = undefined
+		onrefresh = undefined,
+		onkeydown = undefined
 	}: Props = $props()
 
 	let password: string = $state('')
@@ -116,7 +116,7 @@
 						bind:value={password}
 						class="!w-auto grow"
 						onclick={stopPropagation(() => {})}
-						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeydown={stopPropagation((e) => onkeydown?.(e))}
 						onkeypress={stopPropagation((e: Event) => {
 							if ((e as KeyboardEvent).key === 'Enter') {
 								savePassword()
@@ -146,7 +146,7 @@
 						bind:value={login_type}
 						class="!w-auto grow"
 						onclick={stopPropagation(() => {})}
-						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeydown={stopPropagation((e) => onkeydown?.(e))}
 						onkeypress={stopPropagation((e: Event) => {
 							if ((e as KeyboardEvent).key === 'Enter') {
 								saveLoginType()

frontend/src/lib/components/Password.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
 	import Button from './common/button/Button.svelte'
 	import TextInput from './text_input/TextInput.svelte'
 	import { Eye, EyeClosed } from 'lucide-svelte'
-
-	const bubble = createBubbler()
 	interface Props {
 		password: string | undefined
 		placeholder?: string
@@ -14,6 +11,7 @@
 		id?: string
 		onKeyDown?: (event: KeyboardEvent) => void
 		onBlur?: (event: FocusEvent) => void
+		onkeydown?: (...args: any[]) => any
 	}
 
 	let {
@@ -24,7 +22,8 @@
 		small = false,
 		id,
 		onKeyDown,
-		onBlur
+		onBlur,
+		onkeydown = undefined
 	}: Props = $props()
 
 	let red = $derived(required && (password == '' || password == undefined))
@@ -55,7 +54,7 @@
 			onblur: (e) => onBlur?.(e),
 			onkeydown: (e) => {
 				onKeyDown?.(e)
-				bubble('keydown')(e)
+				onkeydown?.(e)
 			},
 			type: hideValue ? 'password' : 'text'
 		}}

frontend/src/lib/components/Range.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy';
-
-	const bubble = createBubbler();
+	import { stopPropagation } from 'svelte/legacy'
 	import RangeSlider from 'svelte-range-slider-pips'
 
 	interface Props {
-		min?: number;
-		max?: number;
-		initialValue?: number;
-		value?: any;
-		disabled?: boolean;
-		defaultValue?: number | undefined;
-		format?: (value: number) => string;
-		hideInput?: boolean;
+		min?: number
+		max?: number
+		initialValue?: number
+		value?: any
+		disabled?: boolean
+		defaultValue?: number | undefined
+		format?: (value: number) => string
+		hideInput?: boolean
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -23,8 +22,9 @@
 		disabled = false,
 		defaultValue = undefined,
 		format = (v) => `${v}`,
-		hideInput = false
-	}: Props = $props();
+		hideInput = false,
+		onpointerdown = undefined
+	}: Props = $props()
 
 	let step: number = 1
 
@@ -39,7 +39,7 @@
 		if (value === null) {
 			value = 0
 		}
-	});
+	})
 
 	let axisStep = $derived(calculateAxisStep(min, max))
 
@@ -71,7 +71,7 @@
 	<div
 		class={'grow'}
 		style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; --handle-width: {handleWidth}; --handle-border: 4px;"
-		onpointerdown={stopPropagation(bubble('pointerdown'))}
+		onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 		onkeydown={handleKeyDown}
 		>{#if max <= min}
 			<div class="text-secondary text-sm"

frontend/src/lib/components/S3FilePickerInner.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import {
 		File as FileIcon,
 		FolderClosed,
@@ -93,6 +91,8 @@
 			d: DatasetStorageTestConnectionData
 		) => CancelablePromise<DatasetStorageTestConnectionResponse>
 		onselectAndClose?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		onclick?: (...args: any[]) => any
 	}
 
 	let {
@@ -115,7 +115,9 @@
 		deleteS3FileRequest = HelpersService.deleteS3File,
 		moveS3FileRequest = HelpersService.moveS3File,
 		testConnectionRequest = HelpersService.datasetStorageTestConnection,
-		onselectAndClose = undefined
+		onselectAndClose = undefined,
+		onfocus = undefined,
+		onclick = undefined
 	}: Props = $props()
 
 	let rootPathNestingLevel = $derived(1 * (rootPath.split('/').length - 1))
@@ -799,8 +801,8 @@
 								Header row:
 								<div class="inline-flex item-center w-4 ml-2 mr-2">
 									<input
-										onfocus={bubble('focus')}
-										onclick={bubble('click')}
+										onfocus={(e) => onfocus?.(e)}
+										onclick={(e) => onclick?.(e)}
 										disabled={false}
 										type="checkbox"
 										id="csv-header"

frontend/src/lib/components/SchemaForm.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import type { Schema } from '$lib/common'
 	import { VariableService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -78,6 +75,8 @@
 		onacceptChange?: (...args: any[]) => any
 		onrejectChange?: (...args: any[]) => any
 		onkeydownCmdEnter?: (...args: any[]) => any
+		onfinalize?: (...args: any[]) => any
+		onconsider?: (...args: any[]) => any
 	}
 
 	let {
@@ -126,7 +125,9 @@
 		onnestedChange = undefined,
 		onacceptChange = undefined,
 		onrejectChange = undefined,
-		onkeydownCmdEnter = undefined
+		onkeydownCmdEnter = undefined,
+		onfinalize = undefined,
+		onconsider = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -296,8 +297,8 @@
 <div
 	class="w-full {className} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 ' : ''} {nestedClasses}"
 	use:dragHandleZone={dndConfig ?? { items: [], dragDisabled: true }}
-	onfinalize={bubble('finalize')}
-	onconsider={bubble('consider')}
+	onfinalize={(e) => onfinalize?.(e)}
+	onconsider={(e) => onconsider?.(e)}
 >
 	{#if keys.length > 0 && args}
 		{#each fields as item, i (item.id)}

frontend/src/lib/components/ScriptBuilder.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import {
 		DraftService,
 		type NewScript,
@@ -131,7 +128,8 @@
 		onSeeDetails,
 		onSaveDraftError,
 		onSaveDraft,
-		disableAi
+		disableAi,
+		onfocus = undefined
 	}: ScriptBuilderProps = $props()
 
 	export function getInitialAndModifiedValues(): SavedAndModifiedValue {
@@ -1550,7 +1548,7 @@
 														class="!w-16 ml-4"
 														disabled={script.priority === undefined}
 														bind:value={script.priority}
-														onfocus={bubble('focus')}
+														onfocus={(e) => onfocus?.(e)}
 														onchange={() => {
 															if (script.priority && script.priority > 100) {
 																script.priority = 100

frontend/src/lib/components/ServiceLogsInner.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, preventDefault } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { preventDefault } from 'svelte/legacy'
 	import { IndexSearchService, ServiceLogsService } from '$lib/gen'
 
 	import TimeframeSelect, {
@@ -29,9 +27,15 @@
 		searchTerm: string
 		queryParseErrors?: string[]
 		tagLabel?: string
+		onclick?: (...args: any[]) => any
 	}
 
-	let { searchTerm, queryParseErrors = $bindable(), tagLabel }: Props = $props()
+	let {
+		searchTerm,
+		queryParseErrors = $bindable(),
+		tagLabel,
+		onclick = undefined
+	}: Props = $props()
 
 	let minTs: undefined | string = $state(undefined)
 	let maxTs: undefined | string = $state(undefined)
@@ -719,7 +723,7 @@
 									{:else if logsContent[file.file_path].content}
 										<!-- svelte-ignore a11y_click_events_have_key_events -->
 										<!-- svelte-ignore a11y_no_static_element_interactions -->
-										<div onclick={preventDefault(bubble('click'))} class="pr-2"
+										<div onclick={preventDefault((e) => onclick?.(e))} class="pr-2"
 											><LogViewer
 												noAutoScroll
 												noMaxH

frontend/src/lib/components/Toggle.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -34,6 +32,8 @@
 		textDisabled?: boolean
 		right?: import('svelte').Snippet
 		onchange?: (...args: any[]) => any
+		onclick?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
 	}
 
 	let {
@@ -52,7 +52,9 @@
 		size = 'sm',
 		textDisabled = false,
 		right,
-		onchange = undefined
+		onchange = undefined,
+		onclick = undefined,
+		onfocus = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher<{ change: boolean }>()
@@ -87,7 +89,7 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="relative"
-		onclick={stopPropagation(bubble('click'))}
+		onclick={stopPropagation((e) => onclick?.(e))}
 		use:triggerableByAI={{
 			id: aiId,
 			description: aiDescription,
@@ -97,8 +99,8 @@
 		}}
 	>
 		<input
-			onfocus={bubble('focus')}
-			onclick={bubble('click')}
+			onfocus={(e) => onfocus?.(e)}
+			onclick={(e) => onclick?.(e)}
 			{disabled}
 			type="checkbox"
 			{id}

frontend/src/lib/components/apps/components/display/AppAccordionList.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { getContext } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
@@ -21,6 +19,7 @@
 		render: boolean
 		initializing: boolean | undefined
 		componentContainerHeight: number
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -29,7 +28,8 @@
 		customCss = undefined,
 		render,
 		initializing = $bindable(),
-		componentContainerHeight
+		componentContainerHeight,
+		onpointerdown = undefined
 	}: Props = $props()
 
 	type AccordionListValue = { header: string; [key: string]: any }
@@ -113,7 +113,7 @@
 					{#each result ?? [] as value, index}
 						<div class="border-b">
 							<button
-								onpointerdown={stopPropagation(bubble('pointerdown'))}
+								onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 								onclick={() => toggleAccordion(index)}
 								class={twMerge(
 									'w-full text-left bg-surface !truncate text-sm hover:text-primary px-1 py-2',

frontend/src/lib/components/apps/components/display/AppImage.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, preventDefault } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { preventDefault } from 'svelte/legacy'
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initConfig, initOutput } from '../../editor/appUtils'
@@ -21,9 +19,16 @@
 		configuration: RichConfigurations
 		customCss?: ComponentCustomCSS<'imagecomponent'> | undefined
 		render: boolean
+		onpointerdown?: (...args: any[]) => any
 	}
 
-	let { id, configuration, customCss = undefined, render }: Props = $props()
+	let {
+		id,
+		configuration,
+		customCss = undefined,
+		render,
+		onpointerdown = undefined
+	}: Props = $props()
 
 	const resolvedConfig = $state(
 		initConfig(components['imagecomponent'].initialData.configuration, configuration)
@@ -115,7 +120,7 @@
 	<Loader loading={imageUrl === undefined}>
 		{#if imageUrl}
 			<img
-				onpointerdown={preventDefault(bubble('pointerdown'))}
+				onpointerdown={preventDefault((e) => onpointerdown?.(e))}
 				src={imageUrl}
 				alt={resolvedConfig.altText}
 				style={css?.image?.style ?? ''}

frontend/src/lib/components/apps/components/display/AppNavbar.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, preventDefault } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { preventDefault } from 'svelte/legacy'
 	import { getContext } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
@@ -20,9 +18,17 @@
 		customCss?: ComponentCustomCSS<'navbarcomponent'> | undefined
 		render: boolean
 		navbarItems?: NavbarItem[]
+		onpointerdown?: (...args: any[]) => any
 	}
 
-	let { id, configuration, customCss = undefined, render, navbarItems = [] }: Props = $props()
+	let {
+		id,
+		configuration,
+		customCss = undefined,
+		render,
+		navbarItems = [],
+		onpointerdown = undefined
+	}: Props = $props()
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -71,7 +77,7 @@
 	>
 		{#if resolvedConfig.logo?.selected === 'yes'}
 			<img
-				onpointerdown={preventDefault(bubble('pointerdown'))}
+				onpointerdown={preventDefault((e) => onpointerdown?.(e))}
 				src={resolvedConfig.logo?.configuration?.yes?.sourceKind == 'png encoded as base64'
 					? 'data:image/png;base64,' + resolvedConfig.logo?.configuration?.yes?.source
 					: resolvedConfig.logo?.configuration?.yes?.sourceKind == 'jpeg encoded as base64'

frontend/src/lib/components/apps/components/display/AppStatCard.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, preventDefault } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { preventDefault } from 'svelte/legacy'
 	import { getContext, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
@@ -20,9 +18,16 @@
 		configuration: RichConfigurations
 		customCss?: ComponentCustomCSS<'statcomponent'> | undefined
 		render: boolean
+		onpointerdown?: (...args: any[]) => any
 	}
 
-	let { id, configuration, customCss = undefined, render }: Props = $props()
+	let {
+		id,
+		configuration,
+		customCss = undefined,
+		render,
+		onpointerdown = undefined
+	}: Props = $props()
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -104,7 +109,7 @@
 			{:else}
 				<Loader loading={resolvedConfig?.media?.configuration?.image?.source == undefined}>
 					<img
-						onpointerdown={preventDefault(bubble('pointerdown'))}
+						onpointerdown={preventDefault((e) => onpointerdown?.(e))}
 						src={getImageDataURL(
 							resolvedConfig?.media?.configuration?.image?.sourceKind,
 							resolvedConfig?.media?.configuration?.image?.source

frontend/src/lib/components/apps/components/display/AppText.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { Copy } from 'lucide-svelte'
 	import { getContext, untrack } from 'svelte'
@@ -28,6 +26,8 @@
 		customCss?: ComponentCustomCSS<'textcomponent'> | undefined
 		render: boolean
 		editorMode?: boolean
+		onkeydown?: (...args: any[]) => any
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -39,7 +39,9 @@
 		initializing = $bindable(undefined),
 		customCss = undefined,
 		render,
-		editorMode = $bindable(false)
+		editorMode = $bindable(false),
+		onkeydown = undefined,
+		onpointerdown = undefined
 	}: Props = $props()
 
 	let resolvedConfig = $state(
@@ -193,7 +195,7 @@
 				document.getElementById(`text-${id}`)?.focus()
 			}
 		}}
-		onkeydown={stopPropagation(bubble('keydown'))}
+		onkeydown={stopPropagation((e) => onkeydown?.(e))}
 	>
 		{#if $mode == 'dnd' && editorMode && (componentInput?.type == 'template' || componentInput?.type == 'templatev2')}
 			<AlignWrapper {verticalAlignment}>
@@ -211,7 +213,7 @@
 								? 'text-right'
 								: 'text-left'
 					)}
-					onpointerdown={stopPropagation(bubble('pointerdown'))}
+					onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 					style={css?.text?.style}
 					id={`text-${id}`}
 					onpointerenter={() => {

frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { Alert } from '$lib/components/common'
 	import { getContext, onMount, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
@@ -17,6 +14,7 @@
 		configuration: RichConfigurations
 		initializing?: boolean | undefined
 		render: boolean
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -24,7 +22,8 @@
 		componentInput,
 		configuration,
 		initializing = $bindable(undefined),
-		render
+		render,
+		onpointerdown = undefined
 	}: Props = $props()
 
 	const { worldStore, darkMode } = getContext<AppViewerContext>('AppViewerContext')
@@ -125,7 +124,7 @@
 					</Alert>
 				</div>
 			{/if}
-			<div onpointerdown={bubble('pointerdown')} bind:this={divEl}></div>
+			<div onpointerdown={(e) => onpointerdown?.(e)} bind:this={divEl}></div>
 		</RunnableWrapper>
 	</div>
 {:else}

frontend/src/lib/components/apps/components/display/PlotlyHtmlV2.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { Alert } from '$lib/components/common'
 	import { getContext, onMount, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
@@ -19,6 +16,7 @@
 		xData: RichConfiguration | undefined
 		initializing?: boolean | undefined
 		render: boolean
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -28,7 +26,8 @@
 		datasets,
 		xData,
 		initializing = $bindable(undefined),
-		render
+		render,
+		onpointerdown = undefined
 	}: Props = $props()
 
 	const { worldStore, darkMode } = getContext<AppViewerContext>('AppViewerContext')
@@ -207,7 +206,7 @@
 					</Alert>
 				</div>
 			{/if}
-			<div onpointerdown={bubble('pointerdown')} bind:this={divEl}></div>
+			<div onpointerdown={(e) => onpointerdown?.(e)} bind:this={divEl}></div>
 		</RunnableWrapper>
 	</div>
 {:else}

frontend/src/lib/components/apps/components/display/VegaLiteHtml.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { getContext, onMount } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
@@ -15,6 +12,7 @@
 		configuration: RichConfigurations
 		initializing?: boolean | undefined
 		render: boolean
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -22,7 +20,8 @@
 		componentInput,
 		configuration,
 		initializing = $bindable(undefined),
-		render
+		render,
+		onpointerdown = undefined
 	}: Props = $props()
 
 	let result: object | undefined = $state(undefined)
@@ -85,7 +84,7 @@
 {#if render}
 	<div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
 		<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
-			<div onpointerdown={bubble('pointerdown')} bind:this={divEl}></div>
+			<div onpointerdown={(e) => onpointerdown?.(e)} bind:this={divEl}></div>
 		</RunnableWrapper>
 	</div>
 {:else}

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

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import { createEventDispatcher, tick } from 'svelte'
 	import { writable } from 'svelte/store'
@@ -13,9 +10,18 @@
 		value: any
 		width: number
 		onupdate?: (...args: any[]) => any
+		onkeydown?: (...args: any[]) => any
+		onclick?: (...args: any[]) => any
 	}
 
-	let { type = 'text', value = $bindable(), width, onupdate = undefined }: Props = $props()
+	let {
+		type = 'text',
+		value = $bindable(),
+		width,
+		onupdate = undefined,
+		onkeydown = undefined,
+		onclick = undefined
+	}: Props = $props()
 
 	let isEditable = writable(false)
 	let tempValue = $state(value)
@@ -53,8 +59,8 @@
 </script>
 
 <td
-	onkeydown={bubble('keydown')}
-	onclick={bubble('click')}
+	onkeydown={(e) => onkeydown?.(e)}
+	onclick={(e) => onclick?.(e)}
 	class={twMerge(
 		'p-4 whitespace-pre-wrap truncate text-xs text-primary',
 		$isEditable && 'bg-gray-100'

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { onMount } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 
@@ -14,6 +12,8 @@
 		debounceDelay?: number
 		class?: string | undefined
 		[key: string]: any
+		onpointerdown?: (...args: any[]) => any
+		onkeydown?: (...args: any[]) => any
 	}
 
 	let {
@@ -21,6 +21,8 @@
 		value = $bindable(),
 		debounceDelay = 100,
 		class: parentClass = undefined,
+		onpointerdown = undefined,
+		onkeydown = undefined,
 		...rest
 	}: Props = $props()
 
@@ -46,9 +48,9 @@
 <input
 	bind:this={inputElement}
 	{placeholder}
-	onpointerdown={stopPropagation(bubble('pointerdown'))}
+	onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 	onkeyup={debounce}
-	onkeydown={stopPropagation(bubble('keydown'))}
+	onkeydown={stopPropagation((e) => onkeydown?.(e))}
 	class={twMerge(parentClass, 'mb-1 h-8 !rounded-md !shadow-none')}
 	{...rest}
 />

frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { getContext, untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initConfig, initOutput } from '../../editor/appUtils'
@@ -22,6 +20,7 @@
 		customCss?: ComponentCustomCSS<'dateinputcomponent'> | undefined
 		render: boolean
 		onChange?: string[] | undefined
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -31,7 +30,8 @@
 		verticalAlignment = undefined,
 		customCss = undefined,
 		render,
-		onChange = undefined
+		onChange = undefined,
+		onpointerdown = undefined
 	}: Props = $props()
 
 	const { app, worldStore, selectedComponent, componentControl, runnableComponents } =
@@ -124,7 +124,7 @@
 				e.stopPropagation()
 			}}
 			onfocus={() => ($selectedComponent = [id])}
-			onpointerdown={stopPropagation(bubble('pointerdown'))}
+			onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 			type="date"
 			bind:value
 			disabled={resolvedConfig.disabled}

frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { getContext, onDestroy, untrack } from 'svelte'
 	import RangeSlider from 'svelte-range-slider-pips'
 	import { twMerge } from 'tailwind-merge'
@@ -26,6 +24,7 @@
 		verticalAlignment?: 'top' | 'center' | 'bottom' | undefined
 		customCss?: ComponentCustomCSS<'rangecomponent'> | undefined
 		render: boolean
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -33,7 +32,8 @@
 		configuration,
 		verticalAlignment = undefined,
 		customCss = undefined,
-		render
+		render,
+		onpointerdown = undefined
 	}: Props = $props()
 
 	const { app, worldStore, componentControl } = getContext<AppViewerContext>('AppViewerContext')
@@ -123,7 +123,7 @@
 				class={twMerge('grow', 'wm-slider-bar')}
 				style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
 					''}"
-				onpointerdown={stopPropagation(bubble('pointerdown'))}
+				onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 			>
 				<RangeSlider
 					id="range-slider"

frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { stopPropagation, createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { getContext, onDestroy, untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initConfig, initOutput, selectId } from '../../editor/appUtils'
@@ -33,6 +31,7 @@
 			| 'textareainputcomponent'
 		render: boolean
 		onChange?: string[] | undefined
+		onkeydown?: (...args: any[]) => any
 	}
 
 	let {
@@ -43,7 +42,8 @@
 		customCss = undefined,
 		appCssKey = 'textinputcomponent',
 		render,
-		onChange = undefined
+		onChange = undefined,
+		onkeydown = undefined
 	}: Props = $props()
 
 	const {
@@ -198,7 +198,7 @@
 				e.stopPropagation()
 				!$connectingInput.opened && selectId(e, id, selectedComponent, $app)
 			}}
-			onkeydown={stopPropagation(bubble('keydown'))}
+			onkeydown={stopPropagation((e) => onkeydown?.(e))}
 			bind:value
 			placeholder={resolvedConfig.placeholder}
 			disabled={resolvedConfig.disabled}
@@ -226,7 +226,7 @@
 							e.stopPropagation()
 							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)
 						}}
-						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeydown={stopPropagation((e) => onkeydown?.(e))}
 						type="password"
 						autocomplete="new-password"
 						bind:value
@@ -245,7 +245,7 @@
 							e.stopPropagation()
 							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)
 						}}
-						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeydown={stopPropagation((e) => onkeydown?.(e))}
 						type="text"
 						bind:value
 						placeholder={resolvedConfig.placeholder}
@@ -263,7 +263,7 @@
 							e.stopPropagation()
 							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)
 						}}
-						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeydown={stopPropagation((e) => onkeydown?.(e))}
 						type="email"
 						bind:value
 						placeholder={resolvedConfig.placeholder}

frontend/src/lib/components/apps/components/layout/AppTabs.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { Tab, Tabs } from '$lib/components/common'
 	import { getContext, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
@@ -30,6 +28,7 @@
 		disabledTabs: RichConfiguration[]
 		hiddenTabs: RichConfiguration[]
 		onTabChange?: string[] | undefined
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -41,7 +40,8 @@
 		render,
 		disabledTabs,
 		hiddenTabs,
-		onTabChange = undefined
+		onTabChange = undefined,
+		onpointerdown = undefined
 	}: Props = $props()
 
 	let resolvedConfig = $state(
@@ -246,7 +246,7 @@
 				{#each tabs ?? [] as res, index}
 					{#if !resolvedHiddenTabs[index]}
 						<button
-							onpointerdown={stopPropagation(bubble('pointerdown'))}
+							onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 							onclick={() => !resolvedDisabledTabs[index] && (selected = res)}
 							disabled={resolvedDisabledTabs[index]}
 							class={twMerge(
@@ -280,7 +280,7 @@
 					{#if !resolvedHiddenTabs[index]}
 						<div class="border-b">
 							<button
-								onpointerdown={stopPropagation(bubble('pointerdown'))}
+								onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 								onclick={() => !resolvedDisabledTabs[index] && (selected = res)}
 								disabled={resolvedDisabledTabs[index]}
 								class={twMerge(

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import SplitPanesWrapper from '$lib/components/splitPanes/SplitPanesWrapper.svelte'
 	import { onMount, setContext, untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -77,7 +75,8 @@
 		replaceStateFn = (path: string) => window.history.replaceState(null, '', path),
 		gotoFn = (path: string, opt?: Record<string, any>) => window.history.pushState(null, '', path),
 		unsavedConfirmationModal,
-		onSavedNewAppPath
+		onSavedNewAppPath,
+		onpointerdown = undefined
 	}: AppEditorProps = $props()
 
 	migrateApp(app)
@@ -991,7 +990,7 @@
 									<div
 										class="absolute bottom-2 left-2 z-50 border bg-surface"
 										data-connection-button
-										onpointerdown={stopPropagation(bubble('pointerdown'))}
+										onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 									>
 										<div class="flex flex-row gap-2 text-xs items-center h-8 px-1">
 											<Button

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

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte'
 	import RunnableJobPanel from './RunnableJobPanel.svelte'
 
@@ -9,17 +6,25 @@
 		rightPanelSize?: number
 		centerPanelWidth?: number
 		runnablePanelSize?: number
+		onmouseenter?: (...args: any[]) => any
+		onmouseleave?: (...args: any[]) => any
 	}
 
-	let { rightPanelSize = 0, centerPanelWidth = 0, runnablePanelSize = 0 }: Props = $props()
+	let {
+		rightPanelSize = 0,
+		centerPanelWidth = 0,
+		runnablePanelSize = 0,
+		onmouseenter = undefined,
+		onmouseleave = undefined
+	}: Props = $props()
 </script>
 
 {#if rightPanelSize !== 0}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="relative h-full w-full overflow-x-visible"
-		onmouseenter={bubble('mouseenter')}
-		onmouseleave={bubble('mouseleave')}
+		onmouseenter={(e) => onmouseenter?.(e)}
+		onmouseleave={(e) => onmouseleave?.(e)}
 	>
 		<InlineScriptsPanel on:hidePanel />
 		<RunnableJobPanel hidden={runnablePanelSize === 0} />

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { stopPropagation, createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { classNames } from '$lib/utils'
 	import type { AppViewerContext } from '../types'
 	import { Anchor, ArrowDownFromLine, Bug, Expand, Network, Pen, Plug } from 'lucide-svelte'
@@ -33,6 +31,8 @@
 		onlock?: (...args: any[]) => any
 		onexpand?: (...args: any[]) => any
 		ontriggerInlineEditor?: (...args: any[]) => any
+		onmousedown?: (...args: any[]) => any
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -50,7 +50,9 @@
 		onfillHeight = undefined,
 		onlock = undefined,
 		onexpand = undefined,
-		ontriggerInlineEditor = undefined
+		ontriggerInlineEditor = undefined,
+		onmousedown = undefined,
+		onpointerdown = undefined
 	}: Props = $props()
 
 	const DECISION_TREE_THRESHOLD = 300
@@ -145,7 +147,7 @@
 			onmouseleave={stopPropagation(() => {
 				hoverHeader = false
 			})}
-			onmousedowncapture={stopPropagation(bubble('mousedown'))}
+			onmousedowncapture={stopPropagation((e) => onmousedown?.(e))}
 			draggable="false"
 			title={`Id: ${component.id}`}
 			class={twMerge(
@@ -175,7 +177,7 @@
 								: 'text-white hover:bg-blue-400 hover:text-white'
 						)}
 						onclick={() => (dispatch('fillHeight'), onfillHeight?.())}
-						onpointerdown={stopPropagation(bubble('pointerdown'))}
+						onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 					>
 						<ArrowDownFromLine aria-label="Full height" size={11} />
 					</button>
@@ -187,7 +189,7 @@
 							locked ? 'bg-blue-300 text-blue-800' : 'text-white hover:bg-blue-400 hover:text-white'
 						)}
 						onclick={() => (dispatch('lock'), onlock?.())}
-						onpointerdown={stopPropagation(bubble('pointerdown'))}
+						onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 					>
 						{#if locked}
 							<Anchor aria-label="Unlock position" size={11} />
@@ -202,7 +204,7 @@
 								'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'), onexpand?.())}
-							onpointerdown={stopPropagation(bubble('pointerdown'))}
+							onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 						>
 							<Expand aria-label="Expand" size={11} />
 						</button>
@@ -229,7 +231,7 @@
 								: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 						)}
 						onclick={() => (dispatch('triggerInlineEditor'), ontriggerInlineEditor?.())}
-						onpointerdown={stopPropagation(bubble('pointerdown'))}
+						onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 					>
 						<Pen aria-label="Edit" size={11} />
 					</button>
@@ -264,7 +266,7 @@
 								element.click()
 							}
 						}}
-						onpointerdown={stopPropagation(bubble('pointerdown'))}
+						onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 					>
 						<Network size={11} />
 					</button>

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import Dropdown from '$lib/components/DropdownV2.svelte'
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher, getContext } from 'svelte'
@@ -16,6 +14,7 @@
 		isSmall?: boolean
 		componentIsDebugging?: boolean
 		ontriggerInlineEditor?: (...args: any[]) => any
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -23,7 +22,8 @@
 		id,
 		isSmall = false,
 		componentIsDebugging = $bindable(false),
-		ontriggerInlineEditor = undefined
+		ontriggerInlineEditor = undefined,
+		onpointerdown = undefined
 	}: Props = $props()
 
 	$effect(() => {
@@ -127,7 +127,7 @@
 						: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 				)}
 				onclick={() => (dispatch('triggerInlineEditor'), ontriggerInlineEditor?.())}
-				onpointerdown={stopPropagation(bubble('pointerdown'))}
+				onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 			>
 				{#if componentIsDebugging}
 					<div class="flex flex-row items-center gap-2">

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { stopPropagation, createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import PanelSection from './settingsPanel/common/PanelSection.svelte'
 	import { classNames, displayDate, emptyString } from '$lib/utils'
@@ -15,9 +13,10 @@
 	interface Props {
 		appPath: string | undefined
 		onrestore?: (...args: any[]) => any
+		onkeydown?: (...args: any[]) => any
 	}
 
-	let { appPath, onrestore = undefined }: Props = $props()
+	let { appPath, onrestore = undefined, onkeydown = undefined }: Props = $props()
 	let loading: boolean = $state(false)
 
 	let versions: AppHistory[] = $state([])
@@ -128,7 +127,7 @@
 										bind:value={deploymentMsgUpdate}
 										class="!w-auto grow"
 										onclick={stopPropagation(() => {})}
-										onkeydown={stopPropagation(bubble('keydown'))}
+										onkeydown={stopPropagation((e) => onkeydown?.(e))}
 										onkeypress={(e) => {
 											e.stopPropagation()
 											if (e.key === 'Enter')

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import Dropdown from '$lib/components/DropdownV2.svelte'
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher, getContext } from 'svelte'
@@ -18,6 +16,7 @@
 		isSmall?: boolean
 		isManuallySelected?: boolean
 		ontriggerInlineEditor?: (...args: any[]) => any
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -26,7 +25,8 @@
 		isConditionalDebugMode = false,
 		isSmall = false,
 		isManuallySelected = $bindable(false),
-		ontriggerInlineEditor = undefined
+		ontriggerInlineEditor = undefined,
+		onpointerdown = undefined
 	}: Props = $props()
 	let selected: number | null = $state(null)
 
@@ -71,7 +71,7 @@
 						: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 				)}
 				onclick={() => (dispatch('triggerInlineEditor'), ontriggerInlineEditor?.())}
-				onpointerdown={stopPropagation(bubble('pointerdown'))}
+				onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 			>
 				{#if isManuallySelected}
 					<div class="whitespace-nowrap">

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import type { Preview } from '$lib/gen'
 	import { createEventDispatcher, getContext, onMount, untrack } from 'svelte'
@@ -48,6 +46,7 @@
 		editor?: Editor | undefined
 		oncreateScriptFromInlineScript?: (...args: any[]) => any
 		ondelete?: (...args: any[]) => any
+		onkeydown?: (...args: any[]) => any
 	}
 
 	let {
@@ -61,7 +60,8 @@
 		componentType = undefined,
 		editor = $bindable(undefined),
 		oncreateScriptFromInlineScript = undefined,
-		ondelete = undefined
+		ondelete = undefined,
+		onkeydown = undefined
 	}: Props = $props()
 	let diffEditor: DiffEditor | undefined = $state()
 	let simpleEditor: SimpleEditor | undefined = $state()
@@ -245,7 +245,7 @@
 									}
 								},
 								placeholder: 'Inline script name',
-								onkeydown: () => stopPropagation(bubble('keydown'))
+								onkeydown: () => stopPropagation((e) => onkeydown?.(e))
 							}}
 							size="sm"
 						/>

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { Button, Drawer, DrawerContent } from '$lib/components/common'
 	import { base } from '$lib/base'
 	import FlowModuleScript from '$lib/components/flows/content/FlowModuleScript.svelte'
@@ -48,6 +46,7 @@
 		onCancel?: any
 		onfork?: (...args: any[]) => any
 		ondelete?: (...args: any[]) => any
+		onkeydown?: (...args: any[]) => any
 	}
 
 	let {
@@ -59,7 +58,8 @@
 		onRun = async () => {},
 		onCancel = async () => {},
 		onfork = undefined,
-		ondelete = undefined
+		ondelete = undefined,
+		onkeydown = undefined
 	}: Props = $props()
 
 	const viewerContext = getContext<AppViewerContext>('AppViewerContext')
@@ -337,7 +337,7 @@
 		</Popover>
 
 		<input
-			onkeydown={stopPropagation(bubble('keydown'))}
+			onkeydown={stopPropagation((e) => onkeydown?.(e))}
 			bind:value={runnable.name}
 			placeholder="Background runnable name"
 			class="!text-xs !rounded-xs"

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { getContext } from 'svelte'
 	import type { AppViewerContext } from '../../types'
@@ -13,9 +11,10 @@
 	interface Props {
 		panes: number[]
 		component: AppComponent
+		onkeydown?: (...args: any[]) => any
 	}
 
-	let { panes = $bindable(), component = $bindable() }: Props = $props()
+	let { panes = $bindable(), component = $bindable(), onkeydown = undefined }: Props = $props()
 
 	const { app, runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -61,7 +60,7 @@
 		{#each panes as _, index (index)}
 			<div class="w-full flex flex-row gap-1 items-center relative">
 				<input
-					onkeydown={stopPropagation(bubble('keydown'))}
+					onkeydown={stopPropagation((e) => onkeydown?.(e))}
 					type="number"
 					bind:value={panes[index]}
 				/>

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import CloseButton from '$lib/components/common/CloseButton.svelte'
 	import { getContext, tick, untrack } from 'svelte'
@@ -23,6 +21,7 @@
 		canHideTabs?: boolean
 		word?: string
 		component: AppComponent
+		onkeydown?: (...args: any[]) => any
 	}
 
 	let {
@@ -32,7 +31,8 @@
 		canDisableTabs = false,
 		canHideTabs = false,
 		word = 'Tab',
-		component = $bindable()
+		component = $bindable(),
+		onkeydown = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -199,7 +199,7 @@
 				<div class="border rounded-md p-2 mb-2 bg-surface">
 					<div class="w-full flex flex-row gap-2 items-center relative my-1">
 						<input
-							onkeydown={stopPropagation(bubble('keydown'))}
+							onkeydown={stopPropagation((e) => onkeydown?.(e))}
 							oninput={(e) => updateItemValue(index, e)}
 							type="text"
 							bind:value={items[index].value}

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

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { Badge } from '$lib/components/common'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { getNextId } from '$lib/components/flows/idUtils'
@@ -16,9 +13,10 @@
 	interface Props {
 		components: (BaseAppComponent & ButtonComponent)[]
 		id: string
+		onkeypress?: (...args: any[]) => any
 	}
 
-	let { components = $bindable(), id }: Props = $props()
+	let { components = $bindable(), id, onkeypress = undefined }: Props = $props()
 
 	const { selectedComponent, app, errorByComponent } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -59,7 +57,7 @@
 			onclick={() => {
 				$selectedComponent = [component.id]
 			}}
-			onkeypress={bubble('keypress')}
+			onkeypress={(e) => onkeypress?.(e)}
 		>
 			<Badge color="dark-indigo">
 				{component.id}

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

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { Badge } from '$lib/components/common'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { getNextId } from '$lib/components/flows/idUtils'
@@ -31,9 +28,15 @@
 			| undefined
 		actionsOrder?: RichConfiguration | undefined
 		id: string
+		onkeypress?: (...args: any[]) => any
 	}
 
-	let { components = $bindable(), actionsOrder = $bindable(undefined), id }: Props = $props()
+	let {
+		components = $bindable(),
+		actionsOrder = $bindable(undefined),
+		id,
+		onkeypress = undefined
+	}: Props = $props()
 
 	// Migration code:
 	onMount(() => {
@@ -173,7 +176,7 @@
 							onmouseover={() => {
 								$hoverStore = component.id
 							}}
-							onkeypress={bubble('keypress')}
+							onkeypress={(e) => onkeypress?.(e)}
 						>
 							<div class="flex flex-row gap-2 items-center">
 								<Badge color="dark-indigo">

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import type { InputType, StaticInput, StaticOptions } from '../../../inputType'
 	import ArrayStaticInputEditor from '../ArrayStaticInputEditor.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
@@ -40,6 +38,7 @@
 		placeholder?: string | undefined
 		format?: string | undefined
 		id: string | undefined
+		onkeydown?: (...args: any[]) => any
 	}
 
 	let {
@@ -49,7 +48,8 @@
 		selectOptions = undefined,
 		placeholder = undefined,
 		format = undefined,
-		id
+		id,
+		onkeydown = undefined
 	}: Props = $props()
 
 	const appContext = getContext<AppViewerContext>('AppViewerContext')
@@ -69,25 +69,25 @@
 	{#if componentInput?.type === 'static'}
 		{#if fieldType === 'number' || fieldType === 'integer'}
 			<input
-				onkeydown={stopPropagation(bubble('keydown'))}
+				onkeydown={stopPropagation((e) => onkeydown?.(e))}
 				type="number"
 				bind:value={componentInput.value}
 			/>
 		{:else if fieldType === 'textarea'}
 			<textarea
 				use:autosize
-				onkeydown={stopPropagation(bubble('keydown'))}
+				onkeydown={stopPropagation((e) => onkeydown?.(e))}
 				bind:value={componentInput.value}
 			></textarea>
 		{:else if fieldType === 'date'}
 			<input
-				onkeydown={stopPropagation(bubble('keydown'))}
+				onkeydown={stopPropagation((e) => onkeydown?.(e))}
 				type="date"
 				bind:value={componentInput.value}
 			/>
 		{:else if fieldType === 'time'}
 			<input
-				onkeydown={stopPropagation(bubble('keydown'))}
+				onkeydown={stopPropagation((e) => onkeydown?.(e))}
 				type="time"
 				bind:value={componentInput.value}
 			/>
@@ -99,7 +99,10 @@
 			{#if subFieldType === 'db-table'}
 				<DBTableSelect bind:componentInput {selectOptions} {id} />
 			{:else}
-				<select onkeydown={stopPropagation(bubble('keydown'))} bind:value={componentInput.value}>
+				<select
+					onkeydown={stopPropagation((e) => onkeydown?.(e))}
+					bind:value={componentInput.value}
+				>
 					{#each selectOptions ?? [] as option}
 						{#if typeof option == 'string'}
 							<option value={option}>
@@ -173,7 +176,7 @@
 			{#if componentInput?.value && typeof componentInput?.value == 'object' && 'label' in componentInput?.value && (componentInput.value?.['value'] == undefined || typeof componentInput.value?.['value'] == 'string')}
 				<div class="flex flex-col gap-1 w-full">
 					<input
-						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeydown={stopPropagation((e) => onkeydown?.(e))}
 						placeholder="Label"
 						type="text"
 						bind:value={
@@ -489,7 +492,7 @@
 				<textarea
 					rows="1"
 					use:autosize
-					onkeydown={stopPropagation(bubble('keydown'))}
+					onkeydown={stopPropagation((e) => onkeydown?.(e))}
 					placeholder={placeholder ?? 'Static value'}
 					bind:value={componentInput.value}
 					class="!pr-12"

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { createEventDispatcher } from 'svelte'
 	import SearchItems from '$lib/components/SearchItems.svelte'
 	import NoItemFound from '$lib/components/home/NoItemFound.svelte'
@@ -12,9 +10,16 @@
 		inlineScripts?: string[]
 		children?: import('svelte').Snippet
 		onpick?: (...args: any[]) => any
+		onkeydown?: (...args: any[]) => any
 	}
 
-	let { filter = $bindable(''), inlineScripts = [], children, onpick = undefined }: Props = $props()
+	let {
+		filter = $bindable(''),
+		inlineScripts = [],
+		children,
+		onpick = undefined,
+		onkeydown = undefined
+	}: Props = $props()
 
 	type Item = { title: string }
 	let filteredItems: (Item & { marked?: string })[] = $state([])
@@ -28,7 +33,7 @@
 <div class="w-full flex mt-1 items-center gap-2">
 	{@render children?.()}
 	<input
-		onkeydown={stopPropagation(bubble('keydown'))}
+		onkeydown={stopPropagation((e) => onkeydown?.(e))}
 		type="text"
 		placeholder="Search inline scripts"
 		bind:value={filter}

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { createEventDispatcher, onMount } from 'svelte'
 	import SearchItems from '$lib/components/SearchItems.svelte'
 	import NoItemFound from '$lib/components/home/NoItemFound.svelte'
@@ -15,9 +13,15 @@
 		filter?: string
 		children?: import('svelte').Snippet
 		onpick?: (...args: any[]) => any
+		onkeydown?: (...args: any[]) => any
 	}
 
-	let { filter = $bindable(''), children, onpick = undefined }: Props = $props()
+	let {
+		filter = $bindable(''),
+		children,
+		onpick = undefined,
+		onkeydown = undefined
+	}: Props = $props()
 
 	let flows: Flow[] | undefined = $state(undefined)
 	let filteredItems: (Flow & { marked?: string })[] = $state([])
@@ -51,7 +55,7 @@
 	<input
 		type="text"
 		placeholder="Search workspace flows"
-		onkeydown={stopPropagation(bubble('keydown'))}
+		onkeydown={stopPropagation((e) => onkeydown?.(e))}
 		bind:value={filter}
 		class="text-2xl grow mb-4"
 	/>

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { createEventDispatcher, onMount } from 'svelte'
 	import SearchItems from '$lib/components/SearchItems.svelte'
 	import NoItemFound from '$lib/components/home/NoItemFound.svelte'
@@ -15,9 +13,15 @@
 		filter?: string
 		children?: import('svelte').Snippet
 		onpick?: (...args: any[]) => any
+		onkeydown?: (...args: any[]) => any
 	}
 
-	let { filter = $bindable(''), children, onpick = undefined }: Props = $props()
+	let {
+		filter = $bindable(''),
+		children,
+		onpick = undefined,
+		onkeydown = undefined
+	}: Props = $props()
 
 	let scripts: Script[] | undefined = $state(undefined)
 	let filteredItems: (Script & { marked?: string })[] = $state([])
@@ -50,7 +54,7 @@
 	{@render children?.()}
 	<input
 		type="text"
-		onkeydown={stopPropagation(bubble('keydown'))}
+		onkeydown={stopPropagation((e) => onkeydown?.(e))}
 		placeholder="Search workspace scripts"
 		bind:value={filter}
 		class="text-2xl grow mb-4"

frontend/src/lib/components/apps/types.ts

@@ -164,6 +164,7 @@ export interface AppEditorProps {
 	gotoFn?: (path: string, opt?: Record<string, any> | undefined) => void
 	unsavedConfirmationModal?: import('svelte').Snippet<[any]>
 	onSavedNewAppPath?: (path: string) => void
+	onpointerdown?: (...args: any[]) => any
 }
 
 export type App = {

frontend/src/lib/components/chat/ChatInput.svelte

@@ -2,10 +2,7 @@
 	import { Button } from '$lib/components/common'
 	import { ArrowUp, Square } from 'lucide-svelte'
 	import autosize from '$lib/autosize'
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
-
+	import { stopPropagation } from 'svelte/legacy'
 	interface Props {
 		value: string
 		placeholder?: string
@@ -22,6 +19,7 @@
 		onCancel?: () => void
 		cancelTitle?: string
 		sendTitle?: string
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -35,7 +33,8 @@
 		showCancelButton = false,
 		onCancel = undefined,
 		cancelTitle = 'Cancel execution',
-		sendTitle = 'Send message'
+		sendTitle = 'Send message',
+		onpointerdown = undefined
 	}: Props = $props()
 
 	function handleKeydown(e: KeyboardEvent) {
@@ -53,7 +52,7 @@
 		bind:value
 		use:autosize
 		onkeydown={handleKeydown}
-		onpointerdown={stopPropagation(bubble('pointerdown'))}
+		onpointerdown={stopPropagation((e) => onpointerdown?.(e))}
 		{placeholder}
 		class="flex-1 min-h-[24px] max-h-32 resize-none !border-0 text-sm placeholder-gray-400 !outline-none !ring-0 p-0 !shadow-none focus:!border-0 focus:!outline-none focus:!ring-0 focus:!shadow-none {customCss
 			?.input?.class ?? ''}"

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

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { createEventDispatcher } from 'svelte'
 	import { ButtonType } from './model'
 	import { twMerge } from 'tailwind-merge'
@@ -99,6 +96,11 @@
 		dropdownWidth?: number | undefined
 		ontooltipOpen?: (...args: any[]) => any
 		ondropdownOpen?: (...args: any[]) => any
+		onpointerdown?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
+		onmouseenter?: (...args: any[]) => any
+		onmouseleave?: (...args: any[]) => any
 	}
 
 	let {
@@ -143,6 +145,11 @@
 		dropdownWidth = undefined,
 		ontooltipOpen = undefined,
 		ondropdownOpen = undefined,
+		onpointerdown = undefined,
+		onfocus = undefined,
+		onblur = undefined,
+		onmouseenter = undefined,
+		onmouseleave = undefined,
 		...rest
 	}: Props = $props()
 
@@ -354,11 +361,11 @@
 	{#if href && !disabled}
 		<a
 			bind:this={element}
-			onpointerdown={bubble('pointerdown')}
-			onfocus={bubble('focus')}
-			onblur={bubble('blur')}
-			onmouseenter={bubble('mouseenter')}
-			onmouseleave={bubble('mouseleave')}
+			onpointerdown={(e) => onpointerdown?.(e)}
+			onfocus={(e) => onfocus?.(e)}
+			onblur={(e) => onblur?.(e)}
+			onmouseenter={(e) => onmouseenter?.(e)}
+			onmouseleave={(e) => onmouseleave?.(e)}
 			onclick={() => {
 				loading = true
 				dispatch('click', event)
@@ -408,12 +415,12 @@
 	{:else}
 		<button
 			bind:this={element}
-			onpointerdown={bubble('pointerdown')}
+			onpointerdown={(e) => onpointerdown?.(e)}
 			{onclick}
-			onfocus={bubble('focus')}
-			onblur={bubble('blur')}
-			onmouseenter={bubble('mouseenter')}
-			onmouseleave={bubble('mouseleave')}
+			onfocus={(e) => onfocus?.(e)}
+			onblur={(e) => onblur?.(e)}
+			onmouseenter={(e) => onmouseenter?.(e)}
+			onmouseleave={(e) => onmouseleave?.(e)}
 			class={buttonClass}
 			{id}
 			tabindex={disabled ? -1 : 0}

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation, preventDefault } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation, preventDefault } from 'svelte/legacy'
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import { X } from 'lucide-svelte'
@@ -17,6 +15,9 @@
 		children?: import('svelte').Snippet
 		[key: string]: any
 		onchange?: (...args: any[]) => any
+		onkeydown?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
 	}
 
 	let {
@@ -28,6 +29,9 @@
 		buttonClass = '',
 		children,
 		onchange = undefined,
+		onkeydown = undefined,
+		onfocus = undefined,
+		onblur = undefined,
 		...rest
 	}: Props = $props()
 	const dispatch = createEventDispatcher()
@@ -67,9 +71,9 @@
 			class="resize-y {inputClass}"
 			{...rest}
 			oninput={handleInput}
-			onkeydown={stopPropagation(bubble('keydown'))}
-			onfocus={bubble('focus')}
-			onblur={bubble('blur')}
+			onkeydown={stopPropagation((e) => onkeydown?.(e))}
+			onfocus={(e) => onfocus?.(e)}
+			onblur={(e) => onblur?.(e)}
 		></textarea>
 	{:else}
 		<input
@@ -79,9 +83,9 @@
 			class=" {(value ? '!pr-[26px] ' : '') + inputClass}"
 			{...rest}
 			oninput={handleInput}
-			onkeydown={stopPropagation(bubble('keydown'))}
-			onfocus={bubble('focus')}
-			onblur={bubble('blur')}
+			onkeydown={stopPropagation((e) => onkeydown?.(e))}
+			onfocus={(e) => onfocus?.(e)}
+			onblur={(e) => onblur?.(e)}
 		/>
 	{/if}
 	{#if value && isHovered}

frontend/src/lib/components/common/menu/MenuItem.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 	interface Props {
-		children?: import('svelte').Snippet;
+		children?: import('svelte').Snippet
+		onclick?: (...args: any[]) => any
 	}
 
-	let { children }: Props = $props();
+	let { children, onclick = undefined }: Props = $props()
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div onclick={bubble('click')} class="py-1">
+<div onclick={(e) => onclick?.(e)} class="py-1">
 	<span
 		class="text-secondary block px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
 		role="menuitem"

frontend/src/lib/components/common/modal/Modal.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import Button from '../button/Button.svelte'
@@ -20,6 +18,7 @@
 		actions?: import('svelte').Snippet
 		onconfirmed?: (...args: any[]) => any
 		oncanceled?: (...args: any[]) => any
+		onclick?: (...args: any[]) => any
 	}
 
 	let {
@@ -33,7 +32,8 @@
 		children,
 		actions,
 		onconfirmed = undefined,
-		oncanceled = undefined
+		oncanceled = undefined,
+		onclick = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -85,7 +85,7 @@
 			<div class="flex min-h-full items-center justify-center p-4">
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					onclick={stopPropagation(bubble('click'))}
+					onclick={stopPropagation((e) => onclick?.(e))}
 					class={twMerge(
 						'relative transform overflow-hidden rounded-md bg-surface px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
 						c,

frontend/src/lib/components/flows/FlowHistoryInner.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { stopPropagation, createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { classNames, displayDate, emptyString, sendUserToast } from '$lib/utils'
 	import { type Flow, FlowService, type FlowVersion } from '$lib/gen'
@@ -14,9 +12,10 @@
 		path: string
 		allowFork?: boolean
 		onHistoryRestore?: () => void
+		onkeydown?: (...args: any[]) => any
 	}
 
-	let { path, allowFork = false, onHistoryRestore }: Props = $props()
+	let { path, allowFork = false, onHistoryRestore, onkeydown = undefined }: Props = $props()
 	let loading: boolean = $state(false)
 
 	let versions: FlowVersion[] = $state([])
@@ -140,7 +139,7 @@
 											bind:value={deploymentMsgUpdate}
 											class="!w-auto grow"
 											onclick={stopPropagation(() => {})}
-											onkeydown={stopPropagation(bubble('keydown'))}
+											onkeydown={stopPropagation((e) => onkeydown?.(e))}
 											onkeypress={(e) => {
 												e.stopPropagation()
 												if (e.key === 'Enter') updateDeploymentMsg(selectedVersion?.id)

frontend/src/lib/components/flows/content/FlowModuleComponent.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import Tab from '$lib/components/common/tabs/Tab.svelte'
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
@@ -110,6 +107,7 @@
 		forceTestTab?: boolean
 		highlightArg?: string
 		isAgentTool?: boolean
+		onfocus?: (...args: any[]) => any
 	}
 
 	let {
@@ -125,7 +123,8 @@
 		savedModule = undefined,
 		forceTestTab = false,
 		highlightArg = undefined,
-		isAgentTool = false
+		isAgentTool = false,
+		onfocus = undefined
 	}: Props = $props()
 
 	let workspaceScriptTag: string | undefined = $state(undefined)
@@ -1062,8 +1061,8 @@
 														{enableAi}
 														{isAgentTool}
 														allowedAiTransforms={isAgentTool && flowModule.value.type === 'aiagent'
-														? ['user_message']
-														: undefined}
+															? ['user_message']
+															: undefined}
 														helperScript={retrieveDynCodeAndLang(flowModule.value)}
 														chatInputEnabled={flowStore.val.value?.chat_input_enabled ?? false}
 													/>
@@ -1267,7 +1266,7 @@
 																class="!w-24"
 																disabled={flowModule.priority === undefined}
 																bind:value={flowModule.priority}
-																onfocus={bubble('focus')}
+																onfocus={(e) => onfocus?.(e)}
 																onchange={() => {
 																	if (flowModule.priority && flowModule.priority > 100) {
 																		flowModule.priority = 100

frontend/src/lib/components/flows/content/FlowSettings.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import Path from '$lib/components/Path.svelte'
 	import FlowCard from '../common/FlowCard.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
@@ -33,9 +30,10 @@
 	interface Props {
 		noEditor: boolean
 		enableAi?: boolean
+		onfocus?: (...args: any[]) => any
 	}
 
-	let { noEditor, enableAi }: Props = $props()
+	let { noEditor, enableAi, onfocus = undefined }: Props = $props()
 
 	const {
 		flowStore,
@@ -561,7 +559,7 @@
 							)}
 							disabled={flowStore.val.value.priority === undefined}
 							bind:value={flowStore.val.value.priority}
-							onfocus={bubble('focus')}
+							onfocus={(e) => onfocus?.(e)}
 							onchange={() => {
 								if (flowStore.val.value.priority && flowStore.val.value.priority > 100) {
 									flowStore.val.value.priority = 100
@@ -610,9 +608,9 @@
 				{#if flowStore.val.schema && enableAi}
 					<AIFormSettings
 						bind:prompt={
-						() => flowStore.val.schema!.prompt_for_ai as string | undefined,
-						(v) => (flowStore.val.schema!.prompt_for_ai = v)
-					}
+							() => flowStore.val.schema!.prompt_for_ai as string | undefined,
+							(v) => (flowStore.val.schema!.prompt_for_ai = v)
+						}
 						type="flow"
 					/>
 				{/if}

frontend/src/lib/components/flows/content/GenAiQuick.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { Wand2 } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 
@@ -29,7 +26,7 @@
 	class="px-3 py-2 gap-2 w-full text-left hover:bg-surface-hover flex flex-row items-center transition-all rounded-md {selected
 		? 'bg-surface-hover'
 		: ''}"
-	onclick={bubble('click')}
+	onclick={(e) => onclick?.(e)}
 >
 	<Wand2 size={14} class="text-ai" />
 

frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 	import { twMerge } from 'tailwind-merge'
 
 	interface Props {
-		selected: boolean;
-		children?: import('svelte').Snippet;
+		selected: boolean
+		children?: import('svelte').Snippet
+		onclick?: (...args: any[]) => any
 	}
 
-	let { selected, children }: Props = $props();
+	let { selected, children, onclick = undefined }: Props = $props()
 </script>
 
 <button
-	onclick={bubble('click')}
+	onclick={(e) => onclick?.(e)}
 	class={twMerge(
 		'hover:bg-surface-hover rounded-md border text-xs w-[23px] h-[23px] relative center-center cursor-pointer bg-surface',
 		selected ? 'outline-1 outline-tertiary outline' : 'outline-0'

frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy'
-
-	const bubble = createBubbler()
+	import { stopPropagation } from 'svelte/legacy'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import type { Preview, ScriptLang } from '$lib/gen'
 	import { createEventDispatcher, onDestroy, onMount, untrack } from 'svelte'
@@ -61,6 +59,7 @@
 			} | null
 		) => void
 		ondelete?: (...args: any[]) => any
+		onkeydown?: (...args: any[]) => any
 	}
 
 	let {
@@ -73,7 +72,8 @@
 		editor = $bindable(undefined),
 		lastDeployedCode,
 		onSelectionChange,
-		ondelete = undefined
+		ondelete = undefined,
+		onkeydown = undefined
 	}: Props = $props()
 	let diffEditor = $state() as DiffEditor | undefined
 	let validCode = $state(true)
@@ -606,7 +606,7 @@
 				<div class="flex flex-row gap-2 w-full items-center">
 					<TextInput
 						inputProps={{
-							onkeydown: () => stopPropagation(bubble('keydown')),
+							onkeydown: () => stopPropagation((e) => onkeydown?.(e)),
 							placeholder: 'Inline script name'
 						}}
 						bind:value={name}

frontend/src/lib/components/script_builder.ts

@@ -36,4 +36,5 @@ export interface ScriptBuilderProps {
 	onSaveDraft?: (e: { path: string; savedAtNewPath: boolean; script: NewScript }) => void
 	onSeeDetails?: (e: { path: string }) => void
 	onSaveDraftError?: (e: { path: string; error: any }) => void
+	onfocus?: (...args: any[]) => any
 }