windmill-components 1.493.10 → 1.501.5

package/package/components/flows/content/FlowModuleHeader.svelte

@@ -6,8 +6,7 @@ import Popover from '../../Popover.svelte';
 import { sendUserToast } from '../../../utils';
 import { getLatestHashForScript } from '../../../scripts';
 import FlowModuleWorkerTagSelect from './FlowModuleWorkerTagSelect.svelte';
-export let module;
-export let tag;
+let { module, tag } = $props();
 const { scriptEditorDrawer } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 let customUi = getContext('customUi');
@@ -19,70 +18,84 @@ let customUi = getContext('customUi');
 			<Popover
 				placement="bottom"
 				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
-				on:click={() => dispatch('toggleRetry')}
+				onClick={() => dispatch('toggleRetry')}
 			>
 				<Repeat size={14} />
-				<svelte:fragment slot="text">Retries</svelte:fragment>
+				{#snippet text()}
+					Retries
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if module?.value?.['concurrent_limit'] != undefined}
 			<Popover
 				placement="bottom"
 				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
-				on:click={() => dispatch('toggleConcurrency')}
+				onClick={() => dispatch('toggleConcurrency')}
 			>
 				<Gauge size={14} />
-				<svelte:fragment slot="text">Concurrency Limits</svelte:fragment>
+				{#snippet text()}
+					Concurrency Limits
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if module.cache_ttl != undefined}
 			<Popover
 				placement="bottom"
 				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
-				on:click={() => dispatch('toggleCache')}
+				onClick={() => dispatch('toggleCache')}
 			>
 				<Database size={14} />
-				<svelte:fragment slot="text">Cache</svelte:fragment>
+				{#snippet text()}
+					Cache
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if module.stop_after_if || module.stop_after_all_iters_if}
 			<Popover
 				placement="bottom"
 				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
-				on:click={() => dispatch('toggleStopAfterIf')}
+				onClick={() => dispatch('toggleStopAfterIf')}
 			>
 				<Square size={14} />
-				<svelte:fragment slot="text">Early stop/break</svelte:fragment>
+				{#snippet text()}
+					Early stop/break
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if module.suspend}
 			<Popover
 				placement="bottom"
 				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
-				on:click={() => dispatch('toggleSuspend')}
+				onClick={() => dispatch('toggleSuspend')}
 			>
 				<PhoneIncoming size={14} />
-				<svelte:fragment slot="text">Suspend</svelte:fragment>
+				{#snippet text()}
+					Suspend
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if module.sleep}
 			<Popover
 				placement="bottom"
 				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
-				on:click={() => dispatch('toggleSleep')}
+				onClick={() => dispatch('toggleSleep')}
 			>
 				<Bed size={14} />
-				<svelte:fragment slot="text">Sleep</svelte:fragment>
+				{#snippet text()}
+					Sleep
+				{/snippet}
 			</Popover>
 		{/if}
 		{#if module.mock?.enabled}
 			<Popover
 				placement="bottom"
 				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
-				on:click={() => dispatch('togglePin')}
+				onClick={() => dispatch('togglePin')}
 			>
 				<Pin size={14} />
-				<svelte:fragment slot="text">This step is pinned</svelte:fragment>
+				{#snippet text()}
+					This step is pinned
+				{/snippet}
 			</Popover>
 		{/if}
 	{/if}
@@ -93,7 +106,7 @@ let customUi = getContext('customUi');
 			<Button
 				size="xs"
 				color="light"
-				on:click={async () => {
+				onClick={async () => {
 					if (module.value.type == 'script') {
 						const hash = module.value.hash ?? (await getLatestHashForScript(module.value.path))
 						$scriptEditorDrawer?.openDrawer(hash, () => {
@@ -104,9 +117,6 @@ let customUi = getContext('customUi');
 				}}
 				startIcon={{ icon: Pen }}
 				iconOnly={false}
-				tooltip={module.value.hash != undefined
-					? 'Script is locked with a specific hash'
-					: undefined}
 				disabled={module.value.hash != undefined}
 			>
 				Edit

package/package/components/flows/content/FlowModuleHeader.svelte.d.ts

@@ -1,4 +1,8 @@
 import { type FlowModule } from '../../../gen';
+interface Props {
+    module: FlowModule;
+    tag: string | undefined;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,10 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowModuleHeader: $$__sveltets_2_IsomorphicComponent<{
-    module: FlowModule;
-    tag: string | undefined;
-}, {
+declare const FlowModuleHeader: $$__sveltets_2_IsomorphicComponent<Props, {
     toggleRetry: CustomEvent<any>;
     toggleConcurrency: CustomEvent<any>;
     toggleCache: CustomEvent<any>;
@@ -29,6 +30,6 @@ declare const FlowModuleHeader: $$__sveltets_2_IsomorphicComponent<{
     createScriptFromInlineScript: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type FlowModuleHeader = InstanceType<typeof FlowModuleHeader>;
 export default FlowModuleHeader;

package/package/components/flows/content/FlowModuleMock.svelte

@@ -1,15 +1,17 @@
-<script lang="ts">import Toggle from '../../Toggle.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { Section } from '../../common';
 import JsonEditor from '../../JsonEditor.svelte';
-export let flowModule;
-let code = flowModule.mock?.return_value
+import { untrack } from 'svelte';
+let { flowModule = $bindable() } = $props();
+let code = $state(flowModule.mock?.return_value
     ? JSON.stringify(flowModule.mock?.return_value, null, 2)
-    : undefined;
-let isMockEnabled = Boolean(flowModule.mock?.enabled);
+    : undefined);
+let isMockEnabled = $state(Boolean(flowModule.mock?.enabled));
 // Track the last value to prevent circular updates
 let lastMockValue = JSON.stringify(flowModule.mock);
-let renderCount = 0;
+let renderCount = $state(0);
 function updateMock(newMock) {
     if (!newMock)
         return;
@@ -22,7 +24,9 @@ function updateMock(newMock) {
         isMockEnabled = Boolean(newMock?.enabled);
     }
 }
-$: updateMock(flowModule.mock);
+run(() => {
+    flowModule.mock, untrack(() => updateMock(flowModule.mock));
+});
 function updateMockValue({ detail }) {
     const newMock = {
         enabled: true,
@@ -35,7 +39,7 @@ function updateMockValue({ detail }) {
 </script>
 
 <Section label="Mock">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		<div class="flex flex-row items-center gap-2">
 			<Tooltip>
 				If defined and enabled, the step will immediately return the mock value instead of being
@@ -60,7 +64,7 @@ function updateMockValue({ detail }) {
 				size="xs"
 			/>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 
 	<div>
 		<span class="text-xs py-1">Mocked Return value</span>

package/package/components/flows/content/FlowModuleMock.svelte.d.ts

@@ -1,21 +1,7 @@
 import type { FlowModule } from '../../../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowModuleMock: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleMock = InstanceType<typeof FlowModuleMock>;
+}
+declare const FlowModuleMock: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleMock = ReturnType<typeof FlowModuleMock>;
 export default FlowModuleMock;

package/package/components/flows/content/FlowModuleSkip.svelte

@@ -6,22 +6,20 @@ import { getContext } from 'svelte';
 import Section from '../../Section.svelte';
 import { getStepPropPicker } from '../previousResults';
 const { flowStateStore, flowStore, previewArgs } = getContext('FlowEditorContext');
-export let flowModule;
-export let parentModule;
-export let previousModule;
-let editor = undefined;
-$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, $flowStore, $previewArgs, false);
-$: isSkipEnabled = Boolean(flowModule.skip_if);
+let { flowModule = $bindable(), parentModule, previousModule } = $props();
+let editor = $state(undefined);
+let stepPropPicker = $derived(getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, flowStore.val, previewArgs.val, false));
+let isSkipEnabled = $derived(Boolean(flowModule.skip_if));
 </script>
 
-<div class="flex flex-col items-start space-y-2 {$$props.class}">
+<div class="flex flex-col items-start space-y-2">
 	<Section label="Skip" class="w-full">
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			<Tooltip>
 				If the condition is met, the step will behave as an identity step, passing the previous
 				step's result through unchanged.
 			</Tooltip>
-		</svelte:fragment>
+		{/snippet}
 
 		<Toggle
 			checked={isSkipEnabled}
@@ -39,7 +37,11 @@ $: isSkipEnabled = Boolean(flowModule.skip_if);
 			}}
 		/>
 
-		<div class="w-full border p-2 mt-2 flex flex-col {flowModule.skip_if ? '' : 'bg-surface-secondary'}">
+		<div
+			class="w-full border p-2 mt-2 flex flex-col {flowModule.skip_if
+				? ''
+				: 'bg-surface-secondary'}"
+		>
 			{#if flowModule.skip_if}
 				<span class="mt-2 text-xs font-bold">Skip condition expression</span>
 				<div class="border w-full">

package/package/components/flows/content/FlowModuleSkip.svelte.d.ts

@@ -1,24 +1,9 @@
 import type { FlowModule } from '../../../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowModuleSkip: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+interface Props {
     flowModule: FlowModule;
     parentModule: FlowModule | undefined;
     previousModule: FlowModule | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleSkip = InstanceType<typeof FlowModuleSkip>;
+}
+declare const FlowModuleSkip: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleSkip = ReturnType<typeof FlowModuleSkip>;
 export default FlowModuleSkip;

package/package/components/flows/content/FlowModuleWorkerTagSelect.svelte

@@ -16,7 +16,7 @@ async function loadWorkerGroups() {
 {#if $workerTags}
 	{#if $workerTags?.length > 0}
 		<div class="w-40">
-			{#if $flowStore.tag == undefined}
+			{#if flowStore.val.tag == undefined}
 				<WorkerTagSelect {nullTag} bind:tag on:change={(e) => dispatch('change', e.detail)} />
 			{:else}
 				<button
@@ -24,7 +24,7 @@ async function loadWorkerGroups() {
 					class="w-full text-left items-center font-normal p-1 py-2 border text-xs rounded"
 					onclick={() => ($selectedId = 'settings-worker-group')}
 				>
-					Flow's WG: {$flowStore.tag}
+					Flow's WG: {flowStore.val.tag}
 				</button>
 			{/if}
 		</div>

package/package/components/flows/content/FlowModuleWrapper.svelte

@@ -1,32 +1,23 @@
-<script lang="ts">import {} from '../../../gen';
+<script lang="ts">import FlowModuleWrapper from './FlowModuleWrapper.svelte';
+import {} from '../../../gen';
 import { getContext } from 'svelte';
 import FlowLoop from './FlowLoop.svelte';
 import FlowModuleComponent from './FlowModuleComponent.svelte';
 import FlowBranchAllWrapper from './FlowBranchAllWrapper.svelte';
 import FlowBranchOneWrapper from './FlowBranchOneWrapper.svelte';
-import { createInlineScriptModule, pickFlow, pickScript } from '../flowStateUtils';
+import { createInlineScriptModule, pickFlow, pickScript } from '../flowStateUtils.svelte';
 import FlowInputs from './FlowInputs.svelte';
 import { Alert } from '../../common';
 import FlowInputsFlow from './FlowInputsFlow.svelte';
 import FlowBranchesAllWrapper from './FlowBranchesAllWrapper.svelte';
 import FlowBranchesOneWrapper from './FlowBranchesOneWrapper.svelte';
 import FlowWhileLoop from './FlowWhileLoop.svelte';
-import { initFlowStepWarnings } from '../utils';
-import { dfs } from '../dfs';
 import { formatCron } from '../../../utils';
-export let flowModule;
-export let noEditor = false;
-export let enableAi = false;
-export let savedModule = undefined;
-const { selectedId, flowStateStore, flowInputsStore, flowStore } = getContext('FlowEditorContext');
+const { selectedId, flowStateStore } = getContext('FlowEditorContext');
 const { triggersState, triggersCount } = getContext('TriggerContext');
-let scriptKind = 'script';
-let scriptTemplate = 'script';
-// These pointers are used to easily access previewArgs of parent module, and previous module
-// Pointer to parent module, only defined within Branches or Loops.
-export let parentModule = undefined;
-// Pointer to previous module, for easy access to testing results
-export let previousModule = undefined;
+let scriptKind = $state('script');
+let scriptTemplate = $state('script');
+let { flowModule = $bindable(), noEditor = false, enableAi = false, savedModule = undefined, parentModule = $bindable(), previousModule = undefined, forceTestTab, highlightArg } = $props();
 function initializePrimaryScheduleForTriggerScript(module) {
     const primaryIndex = triggersState.triggers.findIndex((t) => t.isPrimary);
     if (primaryIndex === -1) {
@@ -71,11 +62,6 @@ async function createModuleFromScript(path, summary, kind, hash) {
     }
     flowModule = module;
     $flowStateStore[module.id] = state;
-    if ($flowInputsStore) {
-        $flowInputsStore[module?.id] = {
-            flowStepWarnings: await initFlowStepWarnings(module?.value, $flowStateStore[module?.id]?.schema, dfs($flowStore.value.modules, (fm) => fm.id))
-        };
-    }
 }
 </script>
 
@@ -152,16 +138,6 @@ async function createModuleFromScript(path, summary, kind, hash) {
 
 					flowModule = module
 					$flowStateStore[module.id] = state
-
-					if ($flowInputsStore) {
-						$flowInputsStore[module.id] = {
-							flowStepWarnings: await initFlowStepWarnings(
-								module.value,
-								$flowStateStore[module.id].schema,
-								dfs($flowStore.value.modules, (fm) => fm.id)
-							)
-						}
-					}
 				}}
 				failureModule={$selectedId === 'failure'}
 				preprocessorModule={$selectedId === 'preprocessor'}
@@ -179,11 +155,13 @@ async function createModuleFromScript(path, summary, kind, hash) {
 			{scriptTemplate}
 			{enableAi}
 			{savedModule}
+			forceTestTab={forceTestTab?.[flowModule.id]}
+			highlightArg={highlightArg?.[flowModule.id]}
 		/>
 	{/if}
 {:else if flowModule.value.type === 'forloopflow' || flowModule.value.type == 'whileloopflow'}
 	{#each flowModule.value.modules as _, index (index)}
-		<svelte:self
+		<FlowModuleWrapper
 			{noEditor}
 			bind:flowModule={flowModule.value.modules[index]}
 			bind:parentModule={flowModule}
@@ -193,6 +171,8 @@ async function createModuleFromScript(path, summary, kind, hash) {
 				? savedModule.value.modules[index]
 				: undefined}
 			{enableAi}
+			{forceTestTab}
+			{highlightArg}
 		/>
 	{/each}
 {:else if flowModule.value.type === 'branchone'}
@@ -203,7 +183,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 		</div>
 	{:else}
 		{#each flowModule.value.default as _, index}
-			<svelte:self
+			<FlowModuleWrapper
 				{noEditor}
 				bind:flowModule={flowModule.value.default[index]}
 				bind:parentModule={flowModule}
@@ -212,6 +192,8 @@ async function createModuleFromScript(path, summary, kind, hash) {
 					? savedModule.value.default[index]
 					: undefined}
 				{enableAi}
+				{forceTestTab}
+				{highlightArg}
 			/>
 		{/each}
 	{/if}
@@ -226,7 +208,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 			/>
 		{:else}
 			{#each branch.modules as _, index}
-				<svelte:self
+				<FlowModuleWrapper
 					{noEditor}
 					bind:flowModule={flowModule.value.branches[branchIndex].modules[index]}
 					bind:parentModule={flowModule}
@@ -235,6 +217,8 @@ async function createModuleFromScript(path, summary, kind, hash) {
 						? savedModule.value.branches[branchIndex]?.modules[index]
 						: undefined}
 					{enableAi}
+					{forceTestTab}
+					{highlightArg}
 				/>
 			{/each}
 		{/if}
@@ -245,7 +229,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 			<FlowBranchAllWrapper {noEditor} bind:branch={flowModule.value.branches[branchIndex]} />
 		{:else}
 			{#each branch.modules as _, index}
-				<svelte:self
+				<FlowModuleWrapper
 					{noEditor}
 					bind:flowModule={flowModule.value.branches[branchIndex].modules[index]}
 					bind:parentModule={flowModule}
@@ -254,6 +238,8 @@ async function createModuleFromScript(path, summary, kind, hash) {
 					savedModule={savedModule?.value.type === 'branchall'
 						? savedModule.value.branches[branchIndex]?.modules[index]
 						: undefined}
+					{forceTestTab}
+					{highlightArg}
 				/>
 			{/each}
 		{/if}

package/package/components/flows/content/FlowModuleWrapper.svelte.d.ts

@@ -1,26 +1,15 @@
+import FlowModuleWrapper from './FlowModuleWrapper.svelte';
 import { type FlowModule } from '../../../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowModuleWrapper: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
     noEditor?: boolean;
     enableAi?: boolean;
     savedModule?: FlowModule | undefined;
     parentModule?: FlowModule | undefined;
     previousModule?: FlowModule | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleWrapper = InstanceType<typeof FlowModuleWrapper>;
+    forceTestTab?: Record<string, boolean>;
+    highlightArg?: Record<string, string | undefined>;
+}
+declare const FlowModuleWrapper: import("svelte").Component<Props, {}, "flowModule" | "parentModule">;
+type FlowModuleWrapper = ReturnType<typeof FlowModuleWrapper>;
 export default FlowModuleWrapper;

package/package/components/flows/content/FlowPreprocessorModule.svelte

@@ -5,13 +5,10 @@ export let savedModule = undefined;
 const { flowStore } = getContext('FlowEditorContext');
 </script>
 
-{#if $flowStore.value.preprocessor_module}
+{#if flowStore.val.value.preprocessor_module}
 	<FlowModuleWrapper
 		{noEditor}
-		bind:flowModule={$flowStore.value.preprocessor_module}
-		on:delete={() => {
-			$flowStore.value.preprocessor_module = undefined
-		}}
+		bind:flowModule={flowStore.val.value.preprocessor_module}
 		previousModule={undefined}
 		{savedModule}
 	/>

package/package/components/flows/content/FlowRetries.svelte

@@ -3,10 +3,10 @@ import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.sv
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
 import { enterpriseLicense } from '../../../stores';
 import { AlertTriangle } from 'lucide-svelte';
-export let flowModuleRetry;
-export let disabled = false;
-let delayType;
-let loaded = false;
+import { untrack } from 'svelte';
+let { flowModuleRetry = $bindable(), disabled = false } = $props();
+let delayType = $state();
+let loaded = $state(false);
 function setConstantRetries() {
     flowModuleRetry = {
         ...flowModuleRetry,
@@ -39,12 +39,16 @@ function initialLoad() {
 function resetDelayType() {
     delayType = 'disabled';
 }
-$: flowModuleRetry === undefined && resetDelayType();
-$: !loaded && initialLoad();
+$effect(() => {
+    flowModuleRetry === undefined && resetDelayType();
+});
+$effect(() => {
+    !loaded && untrack(() => initialLoad());
+});
 const u32Max = 4294967295;
 </script>
 
-<div class="h-full flex flex-col {$$props.class ?? ''}">
+<div class="h-full flex flex-col">
 	<ToggleButtonGroup
 		bind:selected={delayType}
 		class={`h-10 ${disabled ? 'disabled' : ''}`}
@@ -58,11 +62,12 @@ const u32Max = 4294967295;
 				setExponentialRetries()
 			}
 		}}
-		let:item
 	>
-		<ToggleButton light value="disabled" label="Disabled" {item} />
-		<ToggleButton light value="constant" label="Constant" {item} />
-		<ToggleButton light value="exponential" label="Exponential" {item} />
+		{#snippet children({ item })}
+			<ToggleButton light value="disabled" label="Disabled" {item} />
+			<ToggleButton light value="constant" label="Constant" {item} />
+			<ToggleButton light value="exponential" label="Exponential" {item} />
+		{/snippet}
 	</ToggleButtonGroup>
 	<div class="flex h-[calc(100%-22px)]">
 		<div class="w-1/2 h-full overflow-auto pr-2">
@@ -77,7 +82,7 @@ const u32Max = 4294967295;
 						/>
 						<button
 							class="text-xs"
-							on:click={() =>
+							onclick={() =>
 								flowModuleRetry?.constant && (flowModuleRetry.constant.attempts = u32Max)}
 							>max</button
 						>
@@ -92,7 +97,7 @@ const u32Max = 4294967295;
 						<input max="100" bind:value={flowModuleRetry.exponential.attempts} type="number" />
 						<button
 							class="text-xs"
-							on:click={() =>
+							onclick={() =>
 								flowModuleRetry?.exponential && (flowModuleRetry.exponential.attempts = 100)}
 							>max</button
 						>

package/package/components/flows/content/FlowRetries.svelte.d.ts

@@ -1,23 +1,8 @@
 import type { Retry } from '../../../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowRetries: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+interface Props {
     flowModuleRetry: Retry | undefined;
-    disabled?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowRetries = InstanceType<typeof FlowRetries>;
+    disabled?: boolean;
+}
+declare const FlowRetries: import("svelte").Component<Props, {}, "flowModuleRetry">;
+type FlowRetries = ReturnType<typeof FlowRetries>;
 export default FlowRetries;