windmill-components 1.504.6 → 1.511.0

package/package/components/copilot/lib.js

@@ -66,6 +66,23 @@ function getModelMaxTokens(model) {
     }
     return 8192;
 }
+export function getModelContextWindow(model) {
+    if (model.startsWith('gpt-4.1') || model.startsWith('gemini')) {
+        return 1000000;
+    }
+    else if (model.startsWith('gpt-4o') || model.startsWith('llama-3.3')) {
+        return 128000;
+    }
+    else if (model.startsWith('claude') || model.startsWith('o4-mini') || model.startsWith('o3')) {
+        return 200000;
+    }
+    else if (model.startsWith('codestral')) {
+        return 32000;
+    }
+    else {
+        return 128000;
+    }
+}
 function getModelSpecificConfig(modelProvider, tools) {
     if ((modelProvider.provider === 'openai' || modelProvider.provider === 'azure_openai') &&
         modelProvider.model.startsWith('o')) {
@@ -373,6 +390,7 @@ const mistralFimResponseSchema = z.object({
     }))
 });
 export const FIM_MAX_TOKENS = 256;
+const FIM_MAX_LINES = 8;
 export async function getFimCompletion(prompt, suffix, providerModel, abortController) {
     const fetchOptions = {
         signal: abortController.signal,
@@ -396,16 +414,19 @@ export async function getFimCompletion(prompt, suffix, providerModel, abortContr
     const body = await response.json();
     const parsedBody = mistralFimResponseSchema.parse(body);
     const choice = parsedBody.choices[0];
-    if (choice) {
-        if (choice.finish_reason === 'length' && choice.message.content) {
-            // take all the lines before the last
-            const lines = choice.message.content.split('\n');
-            const joined = lines.slice(0, -1).join('\n');
-            return joined;
-        }
-        else {
-            return choice.message.content || '';
+    if (choice && choice.message.content !== undefined) {
+        let lines = choice.message.content.split('\n');
+        // If finish_reason is 'length', remove the last line
+        if (choice.finish_reason === 'length') {
+            if (lines.length > 1) {
+                lines = lines.slice(0, -1);
+            }
+            else {
+                lines = [];
+            }
         }
+        lines = lines.slice(0, FIM_MAX_LINES);
+        return lines.join('\n');
     }
     else {
         return undefined;

package/package/components/custom_ui.d.ts

@@ -53,6 +53,7 @@ export type PreviewPanelUi = {
     displayResult?: DisplayResultUi;
     disableVariablePicker?: boolean;
     disableDownload?: boolean;
+    tagLabel?: string;
 };
 export type EditorBarUi = {
     contextVar?: boolean;

package/package/components/flows/FlowAssetsHandler.svelte

@@ -0,0 +1,133 @@
+<script lang="ts" module>export function initFlowGraphAssetsCtx({ getModules }) {
+    let s = $state({
+        val: {
+            selectedAsset: undefined,
+            dbManagerDrawer: undefined,
+            s3FilePicker: undefined,
+            resourceEditorDrawer: undefined,
+            resourceMetadataCache: {},
+            additionalAssetsMap: {},
+            computeAssetsCount: (asset) => {
+                return getAllModules(getModules())
+                    .flatMap((m) => getFlowModuleAssets(m, s.val.additionalAssetsMap) ?? [])
+                    .filter((a) => assetEq(asset, a)).length;
+            }
+        }
+    });
+    return s;
+}
+</script>
+
+<script lang="ts">import { inferAssets } from '../../infer';
+import { assetEq, getFlowModuleAssets } from '../assets/lib';
+import OnChange from '../common/OnChange.svelte';
+import { getAllModules } from './flowExplorer';
+import { getContext, untrack } from 'svelte';
+import { AssetService, ResourceService } from '../../gen';
+import { deepEqual } from 'fast-equals';
+import { workspaceStore } from '../../stores';
+import S3FilePicker from '../S3FilePicker.svelte';
+import DbManagerDrawer from '../DBManagerDrawer.svelte';
+import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
+let { modules, enableParser = false, enableDbExplore = false, enablePathScriptAndFlowAssets = false } = $props();
+const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
+let allModules = $derived(getAllModules(modules));
+// Fetch resource metadata for the ExploreAssetButton
+const resMetadataCache = $derived(flowGraphAssetsCtx?.val.resourceMetadataCache);
+$effect(() => {
+    if (!resMetadataCache || !enableDbExplore)
+        return;
+    const assets = allModules.flatMap((m) => getFlowModuleAssets(m, flowGraphAssetsCtx?.val.additionalAssetsMap) ?? []) ?? [];
+    for (const asset of assets) {
+        if (asset.kind !== 'resource' || asset.path in resMetadataCache)
+            continue;
+        resMetadataCache[asset.path] = undefined; // avoid fetching multiple times because of async
+        ResourceService.getResource({ path: asset.path, workspace: $workspaceStore })
+            .then((r) => (resMetadataCache[asset.path] = { resource_type: r.resource_type }))
+            .catch((err) => {
+            console.error("Couldn't fetch resource", asset.path, err);
+        });
+    }
+});
+// Fetch transitive assets (path scripts and flows)
+$effect(() => {
+    if (!$workspaceStore || !flowGraphAssetsCtx || !enablePathScriptAndFlowAssets)
+        return;
+    let usages = [];
+    let modIds = [];
+    for (const mod of allModules) {
+        if (mod.id in flowGraphAssetsCtx.val.additionalAssetsMap)
+            continue;
+        flowGraphAssetsCtx.val.additionalAssetsMap[mod.id] = []; // avoid fetching multiple times because of async
+        if (mod.value.type === 'flow' || mod.value.type === 'script') {
+            usages.push({ path: mod.value.path, kind: mod.value.type });
+            modIds.push(mod.id);
+        }
+    }
+    if (usages.length) {
+        AssetService.listAssetsByUsage({
+            workspace: $workspaceStore,
+            requestBody: { usages }
+        }).then((result) => {
+            result.forEach((assets, idx) => {
+                flowGraphAssetsCtx.val.additionalAssetsMap[modIds[idx]] = assets;
+            });
+        });
+    }
+});
+// Prune all additionalAssetsMap entries from deleted modules
+$effect(() => {
+    if (!flowGraphAssetsCtx)
+        return;
+    const modulesSet = new Set(allModules.map((m) => m.id));
+    for (const key of Object.keys(flowGraphAssetsCtx.val.additionalAssetsMap)) {
+        if (!modulesSet.has(key)) {
+            delete flowGraphAssetsCtx.val.additionalAssetsMap[key];
+        }
+    }
+});
+async function parseAndUpdateRawScriptModule(v) {
+    try {
+        let parsedAssets = await inferAssets(v.language, v.content);
+        for (const asset of parsedAssets) {
+            const old = v.assets?.find((a) => assetEq(a, asset));
+            if (old?.alt_access_type)
+                asset.alt_access_type = old.alt_access_type;
+        }
+        if (!deepEqual(v.assets, parsedAssets))
+            v.assets = parsedAssets;
+    }
+    catch (e) { }
+}
+// Check for raw script modules whose assets were not parsed. Useful for flows created
+// before the assets feature was introduced.
+$effect(() => {
+    if (!enableParser)
+        return;
+    untrack(() => {
+        setTimeout(() => {
+            for (const mod of allModules) {
+                if (mod.value.type === 'rawscript' && mod.value.assets === undefined) {
+                    console.log('RawScript module', mod.id, 'without assets field, parsing');
+                    parseAndUpdateRawScriptModule(mod.value);
+                }
+            }
+        }, 500); // ensure modules are loaded
+    });
+});
+</script>
+
+{#if enableParser}
+	{#each allModules as mod (mod.id)}
+		{#if mod.value.type === 'rawscript'}
+			{@const v = mod.value}
+			<OnChange key={v.content} onChange={() => parseAndUpdateRawScriptModule(v)} />
+		{/if}
+	{/each}
+{/if}
+
+{#if flowGraphAssetsCtx}
+	<S3FilePicker bind:this={flowGraphAssetsCtx.val.s3FilePicker} readOnlyMode />
+	<DbManagerDrawer bind:this={flowGraphAssetsCtx.val.dbManagerDrawer} />
+	<ResourceEditorDrawer bind:this={flowGraphAssetsCtx.val.resourceEditorDrawer} />
+{/if}

package/package/components/flows/FlowAssetsHandler.svelte.d.ts

@@ -0,0 +1,14 @@
+export declare function initFlowGraphAssetsCtx({ getModules }: {
+    getModules: () => FlowModule[];
+}): FlowGraphAssetContext;
+import type { FlowGraphAssetContext } from './types';
+import { type FlowModule } from '../../gen';
+type $$ComponentProps = {
+    modules: FlowModule[];
+    enableParser?: boolean;
+    enableDbExplore?: boolean;
+    enablePathScriptAndFlowAssets?: boolean;
+};
+declare const FlowAssetsHandler: import("svelte").Component<$$ComponentProps, {}, "">;
+type FlowAssetsHandler = ReturnType<typeof FlowAssetsHandler>;
+export default FlowAssetsHandler;

package/package/components/flows/content/FlowModuleCache.svelte

@@ -3,18 +3,18 @@ import Section from '../../Section.svelte';
 import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { SecondsInput } from '../../common';
-export let flowModule;
-$: isCacheEnabled = Boolean(flowModule.cache_ttl);
+let { flowModule = $bindable() } = $props();
+let isCacheEnabled = $derived(Boolean(flowModule.cache_ttl));
 </script>
 
 <Section label="Cache" class="flex flex-col gap-4">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		<Tooltip documentationLink="https://www.windmill.dev/docs/flows/cache">
 			If defined, the result of the step will be cached for the number of seconds defined such that
 			if this step were to be re-triggered with the same input it would retrieve and return its
 			cached value instead of recomputing it.
 		</Tooltip>
-	</svelte:fragment>
+	{/snippet}
 
 	{#if flowModule.value.type != 'rawscript'}
 		<p

package/package/components/flows/content/FlowModuleCache.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 FlowModuleCache: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleCache = InstanceType<typeof FlowModuleCache>;
+}
+declare const FlowModuleCache: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleCache = ReturnType<typeof FlowModuleCache>;
 export default FlowModuleCache;

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -45,10 +45,9 @@ import { JobService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { checkIfParentLoop } from '../utils';
 import ModulePreviewResultViewer from '../../ModulePreviewResultViewer.svelte';
-import { refreshStateStore, usePromise } from '../../../svelte5Utils.svelte';
+import { refreshStateStore } from '../../../svelte5Utils.svelte';
 import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
 import AssetsDropdownButton from '../../assets/AssetsDropdownButton.svelte';
-import { inferAssets } from '../../../infer';
 const { selectedId, currentEditor, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, customUi, executionCount } = getContext('FlowEditorContext');
 let { flowModule = $bindable(), failureModule = false, preprocessorModule = false, parentModule = $bindable(), previousModule, scriptKind = 'script', scriptTemplate = 'script', noEditor, enableAi, savedModule = undefined, forceTestTab = false, highlightArg = undefined } = $props();
 let workspaceScriptTag = $state(undefined);
@@ -74,6 +73,7 @@ let lastJob = $state(undefined);
 let testJob = $state(undefined);
 let testIsLoading = $state(false);
 let scriptProgress = $state(undefined);
+let assets = $derived((flowModule.value.type === 'rawscript' && flowModule.value.assets) || []);
 function onModulesChange(savedModule, flowModule) {
     // console.log('onModulesChange', savedModule, flowModule)
     return savedModule?.value?.type === 'rawscript' &&
@@ -136,10 +136,12 @@ let forceReload = $state(0);
 let editorPanelSize = $state(noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50);
 let editorSettingsPanelSize = $state(100 - untrack(() => editorPanelSize));
 let stepHistoryLoader = getStepHistoryLoaderContext();
+let lastJobId = undefined;
 function onSelectedIdChange() {
     if (!$flowStateStore?.[$selectedId]?.schema && flowModule) {
         reload(flowModule);
     }
+    lastJobId = undefined;
 }
 async function getLastJob() {
     if (!$flowStateStore ||
@@ -149,11 +151,19 @@ async function getLastJob() {
         !$flowStateStore[flowModule.id]?.previewWorkspaceId) {
         return;
     }
+    if (lastJobId == $flowStateStore[flowModule.id]?.previewJobId ||
+        lastJob?.id == $flowStateStore[flowModule.id]?.previewJobId ||
+        $flowStateStore[flowModule.id]?.previewSuccess == undefined) {
+        return;
+    }
+    lastJobId = $flowStateStore[flowModule.id]?.previewJobId;
     const job = await JobService.getJob({
         workspace: $flowStateStore[flowModule.id]?.previewWorkspaceId ?? '',
-        id: $flowStateStore[flowModule.id]?.previewJobId ?? ''
+        id: $flowStateStore[flowModule.id]?.previewJobId ?? '',
+        noCode: true
     });
-    if (job) {
+    if (job && job.type === 'CompletedJob') {
+        lastJobId = $flowStateStore[flowModule.id]?.previewJobId;
         lastJob = job;
     }
 }
@@ -222,15 +232,6 @@ $effect(() => {
         }, 100);
     }
 });
-let assets = usePromise(async () => flowModule.value.type === 'rawscript'
-    ? await inferAssets(flowModule.value.language, flowModule.value.content)
-    : undefined, { clearValueOnRefresh: false, loadInit: false });
-$effect(() => {
-    if (flowModule.value.type !== 'rawscript')
-        return;
-    [flowModule.value.content, flowModule.value.language];
-    untrack(() => assets.refresh());
-});
 let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.value.language : undefined);
 </script>
 
@@ -339,11 +340,8 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 								{#if !noEditor}
 									{#key flowModule.id}
 										<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
-											{#if assets.value?.length}
-												<AssetsDropdownButton
-													assets={assets.value}
-													bind:fallbackAccessTypes={flowModule.value.asset_fallback_access_types}
-												/>
+											{#if assets?.length}
+												<AssetsDropdownButton {assets} />
 											{/if}
 										</div>
 										<Editor
@@ -354,7 +352,6 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 											bind:this={editor}
 											class="h-full relative"
 											code={flowModule.value.content}
-											lang={scriptLangToEditorLang(flowModule?.value?.language)}
 											scriptLang={flowModule?.value?.language}
 											automaticLayout={true}
 											cmdEnterAction={async () => {

package/package/components/flows/content/FlowModuleDeleteAfterUse.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import Section from '../../Section.svelte';
-export let flowModule;
-export let disabled = false;
+let { flowModule = $bindable(), disabled = false } = $props();
 </script>
 
 <Section label="Delete after use">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		<Tooltip>
 			The logs, arguments and results of this flow step will be completely deleted from Windmill
 			once the flow is complete. They might be temporarily visible in UI while the flow is running.
@@ -21,7 +20,7 @@ export let disabled = false;
 				This option is only available on Windmill Enterprise Edition.
 			{/if}
 		</Tooltip>
-	</svelte:fragment>
+	{/snippet}
 
 	<Toggle
 		{disabled}

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

@@ -1,22 +1,8 @@
 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 FlowModuleDeleteAfterUse: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
     disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleDeleteAfterUse = InstanceType<typeof FlowModuleDeleteAfterUse>;
+}
+declare const FlowModuleDeleteAfterUse: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleDeleteAfterUse = ReturnType<typeof FlowModuleDeleteAfterUse>;
 export default FlowModuleDeleteAfterUse;

package/package/components/flows/content/FlowModuleSleep.svelte

@@ -7,25 +7,24 @@ import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import { SecondsInput } from '../../common';
 import Section from '../../Section.svelte';
 import Label from '../../Label.svelte';
-export let flowModule;
-export let previousModuleId;
+let { flowModule = $bindable(), previousModuleId } = $props();
 const { selectedId, flowStateStore } = getContext('FlowEditorContext');
-let schema = emptySchema();
+let schema = $state(emptySchema());
 schema.properties['sleep'] = {
     type: 'number'
 };
-let editor = undefined;
+let editor = $state(undefined);
 const result = $flowStateStore[$selectedId]?.previewResult ?? {};
-$: isSleepEnabled = Boolean(flowModule.sleep);
+let isSleepEnabled = $derived(Boolean(flowModule.sleep));
 </script>
 
 <Section label="Sleep" class="w-full">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		<Tooltip documentationLink="https://www.windmill.dev/docs/flows/sleep">
 			If defined, at the end of the step, the flow will sleep for a number of seconds before
 			scheduling the next job (if any, no effect if the step is the last one).
 		</Tooltip>
-	</svelte:fragment>
+	{/snippet}
 
 	<Toggle
 		checked={isSleepEnabled}

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

@@ -1,22 +1,8 @@
 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 FlowModuleSleep: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
     previousModuleId: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleSleep = InstanceType<typeof FlowModuleSleep>;
+}
+declare const FlowModuleSleep: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleSleep = ReturnType<typeof FlowModuleSleep>;
 export default FlowModuleSleep;

package/package/components/flows/content/FlowModuleSuspend.svelte

@@ -1,7 +1,8 @@
-<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 InputTransformForm from '../../InputTransformForm.svelte';
-import { getContext, tick } from 'svelte';
+import { getContext, tick, untrack } from 'svelte';
 import { Alert, Tab, Tabs } from '../../common';
 import { GroupService } from '../../../gen';
 import { emptySchema, emptyString } from '../../../utils';
@@ -15,13 +16,12 @@ import EditableSchemaDrawer from '../../schema/EditableSchemaDrawer.svelte';
 import AddProperty from '../../schema/AddProperty.svelte';
 const { selectedId, flowStateStore } = getContext('FlowEditorContext');
 const result = $flowStateStore[$selectedId]?.previewResult ?? {};
-let editor = undefined;
-export let flowModule;
-export let previousModuleId;
-let schema = emptySchema();
-let allUserGroups = [];
-let suspendTabSelected = 'core';
-$: isSuspendEnabled = Boolean(flowModule.suspend);
+let editor = $state(undefined);
+let { flowModule = $bindable(), previousModuleId } = $props();
+let schema = $state(emptySchema());
+let allUserGroups = $state([]);
+let suspendTabSelected = $state('core');
+let isSuspendEnabled = $derived(Boolean(flowModule.suspend));
 async function loadGroups() {
     allUserGroups = await GroupService.listGroupNames({ workspace: $workspaceStore });
     schema.properties['groups'] = {
@@ -32,19 +32,21 @@ async function loadGroups() {
         }
     };
 }
-$: {
+run(() => {
     if ($workspaceStore && allUserGroups.length === 0) {
-        loadGroups();
+        untrack(() => {
+            loadGroups();
+        });
     }
-}
-let jsonView = false;
+});
+let jsonView = $state(false);
 </script>
 
 <Section label="Suspend/Approval/Prompt" class="w-full">
-	<svelte:fragment slot="action">
+	{#snippet action()}
 		<SuspendDrawer text="Approval/Prompt helpers" />
-	</svelte:fragment>
-	<svelte:fragment slot="header">
+	{/snippet}
+	{#snippet header()}
 		<div class="flex flex-row items-center gap-2">
 			<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_approval">
 				If defined, at the end of the step, the flow will be suspended until it receives external
@@ -69,7 +71,7 @@ let jsonView = false;
 				}}
 			/>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 
 	<div class="overflow-x-auto scrollbar-hidden">
 		<Tabs bind:selected={suspendTabSelected}>

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

@@ -1,22 +1,8 @@
 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 FlowModuleSuspend: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
     previousModuleId: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleSuspend = InstanceType<typeof FlowModuleSuspend>;
+}
+declare const FlowModuleSuspend: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleSuspend = ReturnType<typeof FlowModuleSuspend>;
 export default FlowModuleSuspend;

package/package/components/flows/content/FlowModuleTimeout.svelte

@@ -2,17 +2,17 @@
 import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { Alert, SecondsInput } from '../../common';
-export let flowModule;
-$: istimeoutEnabled = Boolean(flowModule.timeout);
+let { flowModule = $bindable() } = $props();
+let istimeoutEnabled = $derived(Boolean(flowModule.timeout));
 </script>
 
 <Section label="Timeout">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		<Tooltip>
 			If defined, the custom timeout will be used instead of the instance timeout for the step. The
 			step's timeout cannot be greater than the instance timeout.
 		</Tooltip>
-	</svelte:fragment>
+	{/snippet}
 
 	<Toggle
 		checked={istimeoutEnabled}

package/package/components/flows/content/FlowModuleTimeout.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 FlowModuleTimeout: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleTimeout = InstanceType<typeof FlowModuleTimeout>;
+}
+declare const FlowModuleTimeout: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleTimeout = ReturnType<typeof FlowModuleTimeout>;
 export default FlowModuleTimeout;

package/package/components/flows/flowStore.d.ts

@@ -14,7 +14,7 @@ export declare function getFirstStepSchema(flowState: FlowState, flow: OpenFlow)
         value: {
             language?: "deno" | "bun" | "python3" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "oracledb" | "graphql" | "nativets" | "php" | undefined;
             path?: string | undefined;
-            type: "rawscript" | "script" | "flow" | "forloopflow" | "branchone" | "branchall" | "identity" | "whileloopflow";
+            type: "rawscript" | "script" | "flow" | "forloopflow" | "whileloopflow" | "branchone" | "branchall" | "identity";
         };
     };
     connectFirstNode: () => void;

package/package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -358,6 +358,7 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
 				onclick={stopPropagation(
 					preventDefault((event) => dispatch('delete', { id, type: modType }))
 				)}
+				onpointerdown={stopPropagation(preventDefault(() => {}))}
 			>
 				<X class="mx-[3px]" size={12} strokeWidth={2} />
 			</button>