windmill-components 1.493.9 → 1.501.4

package/package/components/flows/content/FlowInputs.svelte

@@ -14,24 +14,20 @@ import SuspendDrawer from './SuspendDrawer.svelte';
 import { defaultScripts } from '../../../stores';
 import { defaultScriptLanguages, processLangs } from '../../../scripts';
 import DefaultScripts from '../../DefaultScripts.svelte';
-export let failureModule;
-export let preprocessorModule;
-export let shouldDisableTriggerScripts = false;
-export let noEditor;
-export let summary = undefined;
+let { failureModule, preprocessorModule, shouldDisableTriggerScripts = false, noEditor, summary = $bindable(undefined) } = $props();
 const dispatch = createEventDispatcher();
-let kind = failureModule
+let kind = $state(failureModule
     ? 'failure'
     : summary == 'Trigger'
         ? 'trigger'
         : summary == 'Approval'
             ? 'approval'
-            : 'script';
-let pick_existing = 'hub';
-let filter = '';
-$: langs = processLangs(undefined, $defaultScripts?.order ?? Object.keys(defaultScriptLanguages))
+            : 'script');
+let pick_existing = $state('hub');
+let filter = $state('');
+let langs = $derived(processLangs(undefined, $defaultScripts?.order ?? Object.keys(defaultScriptLanguages))
     .map((l) => [defaultScriptLanguages[l], l])
-    .filter((x) => $defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1]));
+    .filter((x) => $defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1])));
 function displayLang(lang, kind) {
     if (lang == 'bun' || lang == 'python3' || lang == 'deno') {
         return true;
@@ -49,43 +45,45 @@ let customUi = getContext('customUi');
 
 <div class="p-4 h-full flex flex-col" id="flow-editor-flow-inputs">
 	{#if summary == 'Terminate flow'}
-		<Alert role="info" title="The flow stops here"
+		<Alert type="info" title="The flow stops here"
 			>This is an identity step with an early stop that has 'true' for expression</Alert
 		>
 	{:else}{#if !failureModule && !preprocessorModule}
 			<div class="center-center">
 				<div class="max-w-min">
-					<ToggleButtonGroup bind:selected={kind} let:item>
-						<ToggleButton
-							value="script"
-							icon={Code}
-							label="Action"
-							tooltip="An action script is simply a script that is neither a trigger nor an approval script. Those are the majority of the scripts."
-							{item}
-						/>
-						{#if !shouldDisableTriggerScripts}
+					<ToggleButtonGroup bind:selected={kind}>
+						{#snippet children({ item })}
 							<ToggleButton
-								value="trigger"
-								icon={Zap}
-								label="Trigger"
-								tooltip="Used as a first step most commonly with a state and a schedule to watch for changes on an external system, compute the diff since last time and set the new state. The diffs are then treated one by one with a for-loop."
+								value="script"
+								icon={Code}
+								label="Action"
+								tooltip="An action script is simply a script that is neither a trigger nor an approval script. Those are the majority of the scripts."
 								{item}
 							/>
-						{/if}
-						<ToggleButton
-							value="approval"
-							icon={Check}
-							label="Approval"
-							tooltip="An approval step will suspend the execution of a flow until it has been approved through the resume endpoints or the approval page by and solely by the recipients of those secret urls."
-							{item}
-						/>
+							{#if !shouldDisableTriggerScripts}
+								<ToggleButton
+									value="trigger"
+									icon={Zap}
+									label="Trigger"
+									tooltip="Used as a first step most commonly with a state and a schedule to watch for changes on an external system, compute the diff since last time and set the new state. The diffs are then treated one by one with a for-loop."
+									{item}
+								/>
+							{/if}
+							<ToggleButton
+								value="approval"
+								icon={Check}
+								label="Approval"
+								tooltip="An approval step will suspend the execution of a flow until it has been approved through the resume endpoints or the approval page by and solely by the recipients of those secret urls."
+								{item}
+							/>
+						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 			</div>
 		{/if}
 		{#if kind == 'trigger'}
 			<div class="mt-2"></div>
-			<Alert title="Trigger scripts" role="info">
+			<Alert title="Trigger scripts" type="info">
 				Trigger scripts are designed to pull data from an external source and return all of the new
 				items since the last run, without resorting to external webhooks.<br /><br />
 
@@ -120,7 +118,7 @@ let customUi = getContext('customUi');
 
 		{#if kind == 'script' && !noEditor && !preprocessorModule}
 			<div class="mt-2"></div>
-			<Alert title="Action Scripts" role="info">
+			<Alert title="Action Scripts" type="info">
 				An action script is simply a script that is neither a trigger nor an approval script. Those
 				are the majority of the scripts.
 			</Alert>
@@ -129,7 +127,7 @@ let customUi = getContext('customUi');
 		{#if kind == 'approval'}
 			{#if !noEditor}
 				<div class="mt-2"></div>
-				<Alert title="Approval/Prompt Step" role="info">
+				<Alert title="Approval/Prompt Step" type="info">
 					An approval/prompt step will suspend the execution of a flow until it has been approved
 					and/or the prompts have been filled in the UI or through the resume endpoints or the
 					approval page by and solely by the recipients of the secret urls. See details in
@@ -164,10 +162,10 @@ let customUi = getContext('customUi');
 					documentationLink={kind === 'script'
 						? 'https://www.windmill.dev/docs/flows/editor_components#flow-actions'
 						: kind === 'trigger'
-						? 'https://www.windmill.dev/docs/flows/flow_trigger'
-						: kind === 'approval'
-						? 'https://www.windmill.dev/docs/flows/flow_approval'
-						: 'https://www.windmill.dev/docs/getting_started/flows_quickstart#flow-editor'}
+							? 'https://www.windmill.dev/docs/flows/flow_trigger'
+							: kind === 'approval'
+								? 'https://www.windmill.dev/docs/flows/flow_approval'
+								: 'https://www.windmill.dev/docs/getting_started/flows_quickstart#flow-editor'}
 				>
 					Embed <span>{kind == 'script' ? 'action' : kind}</span> script directly inside a flow instead
 					of saving the script into your workspace for reuse. You can always save an inline script to

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

@@ -1,3 +1,10 @@
+interface Props {
+    failureModule: boolean;
+    preprocessorModule: boolean;
+    shouldDisableTriggerScripts?: boolean;
+    noEditor: boolean;
+    summary?: 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;
@@ -11,17 +18,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowInputs: $$__sveltets_2_IsomorphicComponent<{
-    failureModule: boolean;
-    preprocessorModule: boolean;
-    shouldDisableTriggerScripts?: boolean;
-    noEditor: boolean;
-    summary?: string | undefined;
-}, {
+declare const FlowInputs: $$__sveltets_2_IsomorphicComponent<Props, {
     pick: CustomEvent<any>;
     new: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "summary">;
 type FlowInputs = InstanceType<typeof FlowInputs>;
 export default FlowInputs;

package/package/components/flows/content/FlowInputsQuick.svelte

@@ -4,13 +4,12 @@ import FlowScriptPickerQuick from '../pickers/FlowScriptPickerQuick.svelte';
 import WorkspaceScriptPickerQuick from '../pickers/WorkspaceScriptPickerQuick.svelte';
 import { defaultScriptLanguages, processLangs } from '../../../scripts';
 import { defaultScripts, enterpriseLicense, userStore } from '../../../stores';
-import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
+import { createEventDispatcher, getContext, onDestroy, onMount, untrack } from 'svelte';
 import PickHubScriptQuick from '../pickers/PickHubScriptQuick.svelte';
 import {} from '../../../gen';
 import ListFiltersQuick from '../../home/ListFiltersQuick.svelte';
 import { Folder, User } from 'lucide-svelte';
 import { copilotInfo } from '../../../stores';
-import { nextId } from '../../flows/flowModuleNextId';
 import { twMerge } from 'tailwind-merge';
 import { fade } from 'svelte/transition';
 import { flip } from 'svelte/animate';
@@ -21,31 +20,14 @@ import DefaultScriptsInner from '../../DefaultScriptsInner.svelte';
 import GenAiQuick from './GenAiQuick.svelte';
 import FlowToplevelNode from '../pickers/FlowToplevelNode.svelte';
 const dispatch = createEventDispatcher();
-export let summary = undefined;
-export let filter = '';
-export let disableAi = false;
-export let preFilter = 'hub';
-export let funcDesc;
-export let index;
-export let modules;
-export let owners = [];
-export let loading = false;
-export let small = false;
-export let kind;
-export let selectedKind = kind;
-export let displayPath = false;
-let lang = undefined;
-let selectedCompletion = undefined;
-let filteredWorkspaceItems = [];
-let hubCompletions = [];
-const { flowStore, flowStateStore, insertButtonOpen } = getContext('FlowEditorContext');
-const { modulesStore: copilotModulesStore, genFlow } = getContext('FlowCopilotContext');
-let selected = undefined;
-let integrations = [];
+let { summary = undefined, filter = $bindable(''), disableAi = false, preFilter = 'hub', funcDesc, owners = $bindable([]), loading = $bindable(false), small = false, kind, selectedKind = kind, displayPath = false } = $props();
+let lang = $state(undefined);
+let filteredWorkspaceItems = $state([]);
+let hubCompletions = $state([]);
+const { insertButtonOpen } = getContext('FlowEditorContext');
+let selected = $state(undefined);
+let integrations = $state([]);
 let customUi = getContext('customUi');
-$: langs = processLangs(undefined, $defaultScripts?.order ?? Object.keys(defaultScriptLanguages))
-    .map((l) => [defaultScriptLanguages[l], l])
-    .filter((x) => $defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1]));
 function displayLang(lang, kind) {
     if (kind == 'trigger') {
         return ['python3', 'bun', 'deno', 'go'].includes(lang);
@@ -67,33 +49,28 @@ function displayLang(lang, kind) {
     }
 }
 async function onGenerate() {
-    if (!selectedCompletion && !$copilotInfo.enabled) {
+    if (!$copilotInfo.enabled) {
         sendUserToast('Windmill AI is not enabled, you can activate it in the workspace settings', true);
         return;
     }
-    $copilotModulesStore = [
-        {
-            id: nextId($flowStateStore, $flowStore),
-            type: selectedKind == 'trigger' ? 'trigger' : 'script',
-            description: funcDesc,
-            code: '',
-            source: selectedCompletion ? 'hub' : 'custom',
-            hubCompletions,
-            selectedCompletion,
-            editor: undefined,
-            lang
+    console.log('ongenerate', selectedKind, lang, funcDesc);
+    dispatch('new', {
+        kind: selectedKind,
+        inlineScript: {
+            language: lang,
+            kind: selectedKind,
+            subkind: 'flow',
+            summary,
+            instructions: funcDesc
         }
-    ];
-    genFlow?.(index, modules, true);
-    dispatch('close');
+    });
 }
-let openScriptSettings = false;
-let selectedByKeyboard = 0;
-$: onSelectedKindChange(selectedKind);
+let openScriptSettings = $state(false);
+let selectedByKeyboard = $state(0);
 function onSelectedKindChange(_selectedKind) {
     selectedByKeyboard = 0;
 }
-let inlineScripts = [];
+let inlineScripts = $state([]);
 const enterpriseLangs = ['bigquery', 'snowflake', 'mssql', 'oracledb'];
 function computeInlineScriptChoices(funcDesc, selected, preFilter, selectedKind) {
     if (['script', 'trigger', 'failure', 'approval', 'preprocessor'].includes(selectedKind)) {
@@ -115,7 +92,7 @@ const allToplevelNodes = [
     ['Branch to one', 'branchone'],
     ['Branch to all', 'branchall']
 ];
-let topLevelNodes = [];
+let topLevelNodes = $state([]);
 function computeToplevelNodeChoices(funcDesc, preFilter) {
     if (funcDesc.length > 0 && preFilter == 'all' && kind == 'script') {
         topLevelNodes = allToplevelNodes.filter((node) => node[0].toLowerCase().startsWith(funcDesc.toLowerCase()));
@@ -124,9 +101,6 @@ function computeToplevelNodeChoices(funcDesc, preFilter) {
         topLevelNodes = [];
     }
 }
-$: computeToplevelNodeChoices(funcDesc, preFilter);
-$: computeInlineScriptChoices(funcDesc, selected, preFilter, selectedKind);
-$: onPrefilterChange(preFilter);
 function onPrefilterChange(preFilter) {
     if (preFilter == 'workspace') {
         hubCompletions = [];
@@ -136,9 +110,7 @@ function onPrefilterChange(preFilter) {
     }
     selectedByKeyboard = 0;
 }
-$: aiLength =
-    funcDesc?.length > 0 && !disableAi && selectedKind != 'flow' && preFilter == 'all' ? 2 : 0;
-let scrollable;
+let scrollable = $state();
 function onKeyDown(e) {
     let length = topLevelNodes?.length +
         inlineScripts.length +
@@ -162,9 +134,31 @@ onMount(() => {
 onDestroy(() => {
     $insertButtonOpen = false;
 });
+let langs = $derived(processLangs(undefined, $defaultScripts?.order ?? Object.keys(defaultScriptLanguages))
+    .map((l) => [defaultScriptLanguages[l], l])
+    .filter((x) => $defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1])));
+$effect(() => {
+    selectedKind;
+    untrack(() => onSelectedKindChange(selectedKind));
+});
+$effect(() => {
+    ;
+    [funcDesc, preFilter];
+    untrack(() => computeToplevelNodeChoices(funcDesc, preFilter));
+});
+$effect(() => {
+    ;
+    [funcDesc, selected, preFilter, selectedKind];
+    untrack(() => computeInlineScriptChoices(funcDesc, selected, preFilter, selectedKind));
+});
+$effect(() => {
+    preFilter;
+    untrack(() => onPrefilterChange(preFilter));
+});
+let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'flow' && preFilter == 'all' ? 2 : 0);
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 <div class="flex flex-row grow min-w-0 divide-x relative {!small ? 'shadow-inset' : ''}">
 	{#if selectedKind != 'preprocessor'}
 		<Scrollable shiftedShadow scrollableClass="w-32 grow-0 shrink-0 ">
@@ -186,7 +180,7 @@ onDestroy(() => {
 										'w-full text-left text-2xs text-primary font-normal py-2 px-3 hover:bg-surface-hover transition-all whitespace-nowrap flex flex-row gap-2 items-center rounded-md',
 										owner === selected?.name ? 'bg-surface-hover' : ''
 									)}
-									on:click={() => {
+									onclick={() => {
 										selected = selected?.name == owner ? undefined : { kind: 'owner', name: owner }
 									}}
 								>
@@ -230,7 +224,7 @@ onDestroy(() => {
 									'w-full text-left text-2xs text-primary font-normal py-2 px-3 hover:bg-surface-hover transition-all whitespace-nowrap flex flex-row gap-2 items-center rounded-md',
 									owner === selected?.name ? 'bg-surface-hover' : ''
 								)}
-								on:click={() => {
+								onclick={() => {
 									selected = selected?.name == owner ? undefined : { kind: 'owner', name: owner }
 								}}
 							>
@@ -329,8 +323,8 @@ onDestroy(() => {
 									lang == 'docker'
 										? 'docker'
 										: selectedKind == 'preprocessor'
-										? 'preprocessor'
-										: 'flow',
+											? 'preprocessor'
+											: 'flow',
 								summary
 							}
 						})

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

@@ -1,4 +1,16 @@
-import { type FlowModule } from '../../../gen';
+interface Props {
+    summary?: string | undefined;
+    filter?: string;
+    disableAi?: boolean;
+    preFilter?: 'all' | 'workspace' | 'hub';
+    funcDesc: string;
+    owners?: string[];
+    loading?: boolean;
+    small?: boolean;
+    kind: 'trigger' | 'script' | 'preprocessor' | 'failure' | 'approval';
+    selectedKind?: 'script' | 'flow' | 'approval' | 'trigger' | 'preprocessor' | 'failure';
+    displayPath?: boolean;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,27 +24,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowInputsQuick: $$__sveltets_2_IsomorphicComponent<{
-    summary?: string | undefined;
-    filter?: string;
-    disableAi?: boolean;
-    preFilter?: "all" | "workspace" | "hub";
-    funcDesc: string;
-    index: number;
-    modules: FlowModule[];
-    owners?: string[];
-    loading?: boolean;
-    small?: boolean;
-    kind: "trigger" | "script" | "preprocessor" | "failure" | "approval";
-    selectedKind?: "script" | "flow" | "approval" | "trigger" | "preprocessor" | "failure";
-    displayPath?: boolean;
-}, {
+declare const FlowInputsQuick: $$__sveltets_2_IsomorphicComponent<Props, {
     pickScript: CustomEvent<any>;
     pickFlow: CustomEvent<any>;
     new: CustomEvent<any>;
-    close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "owners" | "filter" | "loading">;
 type FlowInputsQuick = InstanceType<typeof FlowInputsQuick>;
 export default FlowInputsQuick;

package/package/components/flows/content/FlowLoop.svelte

@@ -6,7 +6,7 @@ import Tooltip from '../../Tooltip.svelte';
 import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
 import FlowModuleSuspend from './FlowModuleSuspend.svelte';
 // import FlowRetries from './FlowRetries.svelte'
-import { Button, Drawer, Tab, TabContent, Tabs } from '../../common';
+import { Button, Drawer, Tab, TabContent } from '../../common';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { getStepPropPicker } from '../previousResults';
 import { enterpriseLicense } from '../../../stores';
@@ -19,23 +19,20 @@ import IteratorGen from '../../copilot/IteratorGen.svelte';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
 import FlowPlugConnect from '../../FlowPlugConnect.svelte';
 import PropPickerWrapper, { CONNECT } from '../propPicker/PropPickerWrapper.svelte';
-const { previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
-export let mod;
-export let parentModule;
-export let previousModule;
-export let noEditor;
-export let enableAi = false;
-let editor = undefined;
-let selected = 'early-stop';
+import TabsV2 from '../../common/tabs/TabsV2.svelte';
+const { previewArgs, flowStateStore, flowStore, currentEditor } = getContext('FlowEditorContext');
+let { mod = $bindable(), parentModule, previousModule, noEditor, enableAi = false } = $props();
+let editor = $state(undefined);
+let selected = $state('early-stop');
 const { flowPropPickerConfig } = getContext('PropPickerContext');
 flowPropPickerConfig.set(undefined);
-$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, mod.id, $flowStore, $previewArgs, false);
-let previewOpen = false;
-let jobId = undefined;
-let job = undefined;
-let iteratorFieldFocused = false;
-let iteratorGen = undefined;
-$: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
+let stepPropPicker = $derived(getStepPropPicker($flowStateStore, parentModule, previousModule, mod.id, flowStore.val, previewArgs.val, false));
+let previewOpen = $state(false);
+let jobId = $state(undefined);
+let job = $state(undefined);
+let iteratorFieldFocused = $state(false);
+let iteratorGen = $state(undefined);
+let previewIterationArgs = $derived($flowStateStore[mod.id]?.previewArgs ?? {});
 function setExpr(code) {
     if (mod.value.type === 'forloopflow') {
         mod.value.iterator = {
@@ -46,6 +43,9 @@ function setExpr(code) {
     editor?.setCode('');
     editor?.insertAtCursor(code);
 }
+$effect(() => {
+    editor && currentEditor.set({ type: 'iterator', editor, stepId: mod.id });
+});
 </script>
 
 <Drawer bind:open={previewOpen} alwaysOpen size="75%">
@@ -62,27 +62,29 @@ function setExpr(code) {
 </Drawer>
 
 <FlowCard {noEditor} title="For loop">
-	<div slot="header" class="grow">
-		<div class="my-2 flex flex-row gap-2 items-center">
-			<div>
-				<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
-					Add steps inside the loop and specify an iterator expression that defines the sequence
-					over which your subsequent steps will iterate.
-				</Tooltip>
-			</div>
-			<div class="grow">
-				<input bind:value={mod.summary} placeholder={'Summary'} />
-			</div>
-			<div class="justify-end">
-				<Button
-					on:click={() => (previewOpen = true)}
-					startIcon={{ icon: Play }}
-					color="dark"
-					size="sm">Test an iteration</Button
-				>
+	{#snippet header()}
+		<div class="grow">
+			<div class="my-2 flex flex-row gap-2 items-center">
+				<div>
+					<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
+						Add steps inside the loop and specify an iterator expression that defines the sequence
+						over which your subsequent steps will iterate.
+					</Tooltip>
+				</div>
+				<div class="grow">
+					<input bind:value={mod.summary} placeholder={'Summary'} />
+				</div>
+				<div class="justify-end">
+					<Button
+						on:click={() => (previewOpen = true)}
+						startIcon={{ icon: Play }}
+						color="dark"
+						size="sm">Test an iteration</Button
+					>
+				</div>
 			</div>
 		</div>
-	</div>
+	{/snippet}
 
 	<Splitpanes horizontal class="h-full">
 		<Pane size={50} minSize={20} class="p-4">
@@ -172,11 +174,11 @@ function setExpr(code) {
 				</div>
 
 				{#if mod.value.iterator.type == 'javascript'}
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
 						class="border w-full"
 						id="flow-editor-iterator-expression"
-						on:keyup={iteratorGen?.onKeyUp}
+						onkeyup={iteratorGen?.onKeyUp}
 					>
 						<PropPickerWrapper
 							alwaysOn
@@ -220,7 +222,7 @@ function setExpr(code) {
 			{/if}
 		</Pane>
 		<Pane size={40} minSize={20} class="flex flex-col flex-1">
-			<Tabs bind:selected>
+			<TabsV2 bind:selected>
 				<!-- <Tab value="retries">Retries</Tab> -->
 				<Tab value="early-stop">Early Stop/Break</Tab>
 				<Tab value="skip">Skip</Tab>
@@ -229,13 +231,13 @@ function setExpr(code) {
 				<Tab value="mock">Mock</Tab>
 				<Tab value="lifetime">Lifetime</Tab>
 
-				<svelte:fragment slot="content">
+				{#snippet content()}
 					<div class="overflow-hidden bg-surface" style="height:calc(100% - 32px);">
 						<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowRetries bind:flowModule={mod} />
-								</div>
-							</TabContent> -->
+									<div class="p-4 overflow-y-auto">
+										<FlowRetries bind:flowModule={mod} />
+									</div>
+								</TabContent> -->
 
 						<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
 							<div class="p-4 overflow-y-auto">
@@ -268,8 +270,8 @@ function setExpr(code) {
 							</div>
 						</TabContent>
 					</div>
-				</svelte:fragment>
-			</Tabs>
+				{/snippet}
+			</TabsV2>
 		</Pane>
 	</Splitpanes>
 </FlowCard>

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

@@ -1,25 +1,11 @@
 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 FlowLoop: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     mod: FlowModule;
     parentModule: FlowModule | undefined;
     previousModule: FlowModule | undefined;
     noEditor: boolean;
     enableAi?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowLoop = InstanceType<typeof FlowLoop>;
+}
+declare const FlowLoop: import("svelte").Component<Props, {}, "mod">;
+type FlowLoop = ReturnType<typeof FlowLoop>;
 export default FlowLoop;