windmill-components 1.642.0 → 1.655.1

package/package/components/triggers/nats/NatsTriggerEditorInner.svelte

@@ -18,6 +18,7 @@ import { getHandlerType, handleConfigChange } from '../utils';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import { deepEqual } from 'fast-equals';
 import TriggerSuspendedJobsAlert from '../TriggerSuspendedJobsAlert.svelte';
 import TriggerSuspendedJobsModal from '../TriggerSuspendedJobsModal.svelte';
@@ -56,7 +57,7 @@ let suspendedJobsModal = $state(null);
 let hasChanged = $derived(!deepEqual(getSaveCfg(), originalConfig ?? {}));
 const saveDisabled = $derived(pathError != '' || emptyString(script_path) || !can_write || !isValid || !hasChanged);
 const natsConfig = $derived.by(getSaveCfg);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 $effect(() => {
     is_flow = itemKind === 'flow';
 });
@@ -379,7 +380,10 @@ $effect(() => {
 			/>
 
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="error_handler" label="Error Handler" />
@@ -399,6 +403,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/postgres/CheckPostgresRequirement.svelte

@@ -4,7 +4,7 @@ import { PostgresTriggerService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { sendUserToast } from '../../../toast';
 import { emptyString } from '../../../utils';
-let loadingConfiguration = false;
+let loadingConfiguration = $state(false);
 const checkDatabaseConfiguration = async () => {
     if (emptyString(postgres_resource_path)) {
         sendUserToast('You must first pick a database resource', true);
@@ -40,9 +40,7 @@ const checkConnectionAndDatabaseConfiguration = async () => {
     }
     loadingConfiguration = false;
 };
-export let can_write;
-export let postgres_resource_path;
-export let checkConnection = undefined;
+let { can_write, postgres_resource_path, checkConnection = undefined } = $props();
 </script>
 
 {#if postgres_resource_path}

package/package/components/triggers/postgres/CheckPostgresRequirement.svelte.d.ts

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

package/package/components/triggers/postgres/PostgresTriggerEditorInner.svelte

@@ -28,6 +28,7 @@ import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte';
 import TestingBadge from '../testingBadge.svelte';
 import { getHandlerType, handleConfigChange } from '../utils';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import { fade } from 'svelte/transition';
 import MultiSelect from '../../select/MultiSelect.svelte';
 import { safeSelectItems } from '../../select/utils.svelte';
@@ -102,7 +103,7 @@ const isValid = $derived(!emptyString(postgres_resource_path) &&
         (isBasicTab(tab) && (!relations || relations.length > 0))) &&
     !errorMessage);
 const postgresConfig = $derived.by(getSaveCfg);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 const saveDisabled = $derived(pathError !== '' ||
     emptyString(script_path) ||
     drawerLoading ||
@@ -555,8 +556,9 @@ $effect(() => {
 							disabled={!can_write}
 							bind:value={postgres_resource_path}
 							resourceType={'postgresql'}
+							datatableAsPgResource
 						/>
-						<CheckPostgresRequirement bind:postgres_resource_path bind:can_write />
+						<CheckPostgresRequirement {postgres_resource_path} {can_write} />
 					</div>
 					{#if loadingPostgres}
 						<div class="flex flex-col items-center justify-center h-full w-full">
@@ -683,7 +685,7 @@ $effect(() => {
 															</div>
 														{:else}
 															<SlotPicker
-																bind:edit
+																{edit}
 																{postgres_resource_path}
 																bind:replication_slot_name
 																disabled={!can_write}
@@ -768,7 +770,10 @@ $effect(() => {
 			</Section>
 
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="error_handler" label="Error Handler" />
@@ -788,6 +793,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/postgres/PublicationPicker.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { Button } from '../../common';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { Button } from '../../common';
 import Select from '../../select/Select.svelte';
 import { safeSelectItems } from '../../select/utils.svelte';
 import { PostgresTriggerService } from '../../../gen/services.gen';
@@ -6,16 +7,10 @@ import { workspaceStore } from '../../../stores';
 import { sendUserToast } from '../../../toast';
 import { emptyString } from '../../../utils';
 import { RefreshCw } from 'lucide-svelte';
-export let items = [];
-export let can_write = true;
-export let publication_name = '';
-export let postgres_resource_path = '';
-export let relations = undefined;
-export let transaction_to_track = [];
-export let disabled = false;
-let loadingPublication = false;
-let deletingPublication = false;
-let updatingPublication = false;
+let { items = $bindable([]), can_write = true, publication_name = $bindable(''), postgres_resource_path = '', relations = $bindable(undefined), transaction_to_track = $bindable([]), disabled = false } = $props();
+let loadingPublication = $state(false);
+let deletingPublication = $state(false);
+let updatingPublication = $state(false);
 async function listDatabasePublication() {
     try {
         loadingPublication = true;
@@ -92,7 +87,9 @@ async function getAllRelations() {
     }
 }
 listDatabasePublication();
-$: publication_name && getAllRelations();
+run(() => {
+    publication_name && getAllRelations();
+});
 </script>
 
 <div class="flex gap-1">

package/package/components/triggers/postgres/PublicationPicker.svelte.d.ts

@@ -1,18 +1,5 @@
 import type { Relations } 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 PublicationPicker: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     items?: string[];
     can_write?: boolean;
     publication_name?: string;
@@ -20,8 +7,7 @@ declare const PublicationPicker: $$__sveltets_2_IsomorphicComponent<{
     relations?: Relations[] | undefined;
     transaction_to_track?: string[];
     disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type PublicationPicker = InstanceType<typeof PublicationPicker>;
+}
+declare const PublicationPicker: import("svelte").Component<Props, {}, "transaction_to_track" | "relations" | "publication_name" | "items">;
+type PublicationPicker = ReturnType<typeof PublicationPicker>;
 export default PublicationPicker;

package/package/components/triggers/postgres/SlotPicker.svelte

@@ -6,13 +6,10 @@ import { workspaceStore } from '../../../stores';
 import { sendUserToast } from '../../../toast';
 import { emptyString } from '../../../utils';
 import { RefreshCw } from 'lucide-svelte';
-export let edit;
-export let replication_slot_name = '';
-export let postgres_resource_path = '';
-export let disabled = false;
-let deletingSlot = false;
-let loadingSlot = false;
-let items = [];
+let { edit, replication_slot_name = $bindable(''), postgres_resource_path = '', disabled = false } = $props();
+let deletingSlot = $state(false);
+let loadingSlot = $state(false);
+let items = $state([]);
 async function listDatabaseSlot() {
     try {
         loadingSlot = true;

package/package/components/triggers/postgres/SlotPicker.svelte.d.ts

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

package/package/components/triggers/schedules/ScheduleEditorInner.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import { Alert, Badge, Button, ButtonType, Tab, Tabs } from '../../common';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import CronInput from '../../CronInput.svelte';
@@ -858,8 +859,17 @@ $effect(() => {
 			</Section>
 
 			<Section label="Advanced" collapsable>
+				{#snippet header()}
+					<TriggerAdvancedBadges error_handler_path={errorHandlerPath} {retry} extraBadges={[
+						{ name: 'Recovery Handler', active: !!recoveryHandlerPath },
+						{ name: 'Success Handler', active: !!successHandlerPath },
+						{ name: 'Dynamic Skip', active: !!dynamicSkipPath },
+						{ name: 'Custom Tag', active: !!tag }
+					]} />
+				{/snippet}
 				{@render errorHandler()}
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/sqs/SqsTriggerEditorInner.svelte

@@ -18,6 +18,7 @@ import { getHandlerType, handleConfigChange } from '../utils';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import TriggerSuspendedJobsAlert from '../TriggerSuspendedJobsAlert.svelte';
 import TriggerSuspendedJobsModal from '../TriggerSuspendedJobsModal.svelte';
 import { deepEqual } from 'fast-equals';
@@ -375,7 +376,10 @@ $effect(() => {
 			/>
 
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="error_handler" label="Error Handler" />
@@ -395,6 +399,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/testingBadge.svelte

@@ -4,5 +4,7 @@ import { Tooltip } from '../meltComponents';
 
 <Tooltip>
 	<FlaskConical size={14} class="text-primary inline-block" />
-	<span slot="text">Config used for creating a testing endpoint</span>
+	{#snippet text()}
+		<span >Config used for creating a testing endpoint</span>
+	{/snippet}
 </Tooltip>

package/package/components/triggers/webhook/WebhooksConfigSection.svelte

@@ -10,7 +10,7 @@ import { Highlight } from 'svelte-highlight';
 import { typescript } from 'svelte-highlight/languages';
 import ClipboardPanel from '../../details/ClipboardPanel.svelte';
 import { copyToClipboard, isObject, readFieldsRecursively } from '../../../utils';
-// import { page } from '$app/stores'
+// import { page } from '$app/state'
 import { base } from '../../../base';
 import TriggerTokens from '../TriggerTokens.svelte';
 import { workspaceStore, userStore } from '../../../stores';

package/package/components/triggers/websocket/WebsocketCapture.svelte

@@ -17,22 +17,24 @@ let { captureInfo = undefined, isValid = undefined, hasPreprocessor = false, isF
 		{isFlow}
 		{captureLoading}
 	>
-		<svelte:fragment slot="description">
-			{#if captureInfo.active}
-				{#if captureInfo.connectionInfo?.connected}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Listenning to websocket events...
-					</p>
+		{#snippet description()}
+			
+				{#if captureInfo.active}
+					{#if captureInfo.connectionInfo?.connected}
+						<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
+							Listenning to websocket events...
+						</p>
+					{:else}
+						<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
+							Connecting to websocket...
+						</p>
+					{/if}
 				{:else}
 					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Connecting to websocket...
+						Start capturing to listen to websocket events.
 					</p>
 				{/if}
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to websocket events.
-				</p>
-			{/if}
-		</svelte:fragment>
+			
+			{/snippet}
 	</CaptureSection>
 {/if}

package/package/components/triggers/websocket/WebsocketTriggerEditorInner.svelte

@@ -22,6 +22,7 @@ import { getHandlerType, handleConfigChange } from '../utils';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import { deepEqual } from 'fast-equals';
 import TriggerSuspendedJobsAlert from '../TriggerSuspendedJobsAlert.svelte';
 import TriggerSuspendedJobsModal from '../TriggerSuspendedJobsModal.svelte';
@@ -61,7 +62,7 @@ let suspendedJobsModal = $state(null);
 let originalConfig = $state(undefined);
 let hasChanged = $derived(!deepEqual(getSaveCfg(), originalConfig ?? {}));
 const websocketCfg = $derived.by(getSaveCfg);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 const saveDisabled = $derived.by(() => {
     const invalidInitialMessages = initial_messages.some((v) => {
         if ('runnable_result' in v) {
@@ -595,10 +596,14 @@ $effect(() => {
 				</div>
 			</Section>
 
-			<TriggerFilters bind:filters disabled={!can_write} />
-
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} extraBadges={[
+						{ name: 'Filters', active: filters.length > 0 }
+					]} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
+					<TriggerFilters bind:filters disabled={!can_write} />
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="error_handler" label="Error Handler" />
@@ -618,6 +623,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/tutorials/Tutorial.svelte

@@ -6,13 +6,9 @@ import SkipTutorials from './SkipTutorials.svelte';
 import TutorialControls from './TutorialControls.svelte';
 import TutorialInner from './TutorialInner.svelte';
 import { isCurrentlyInTutorial } from '../../stores';
-export let index = 0;
-export let name = 'action';
-export let tainted = false;
-export let onDestroyed = undefined;
-export let getSteps = () => [];
+let { index = 0, name = 'action', tainted = false, onDestroyed = undefined, getSteps = () => [] } = $props();
 let totalSteps = 0;
-let tutorial = undefined;
+let tutorial = $state(undefined);
 const dispatch = createEventDispatcher();
 // Render controls needs to be exposed so steps that have a custom render can call it
 export function renderControls({ config, state }) {

package/package/components/tutorials/Tutorial.svelte.d.ts

@@ -1,4 +1,15 @@
 import { type Driver, type DriveStep } from 'driver.js';
+type Options = {
+    indexToInsertAt?: number;
+    skipStepsCount?: number;
+};
+interface Props {
+    index?: number;
+    name?: string;
+    tainted?: boolean;
+    onDestroyed?: (() => void) | undefined;
+    getSteps?: (driver: Driver, options?: Options | undefined) => DriveStep[];
+}
 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,24 +23,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Tutorial: $$__sveltets_2_IsomorphicComponent<{
-    index?: number;
-    name?: string;
-    tainted?: boolean;
-    onDestroyed?: (() => void) | undefined;
-    getSteps?: (driver: Driver, options?: {
-        indexToInsertAt?: number;
-        skipStepsCount?: number;
-    } | undefined) => DriveStep[];
-    renderControls?: ({ config, state }: {
-        config: any;
-        state: any;
-    }) => void;
-    runTutorial?: (options?: {
-        indexToInsertAt?: number;
-        skipStepsCount?: number;
-    } | undefined) => void;
-}, {
+declare const Tutorial: $$__sveltets_2_IsomorphicComponent<Props, {
     skipAll: CustomEvent<any>;
     error: CustomEvent<any>;
 } & {
@@ -39,10 +33,7 @@ declare const Tutorial: $$__sveltets_2_IsomorphicComponent<{
         config: any;
         state: any;
     }) => void;
-    runTutorial: (options?: {
-        indexToInsertAt?: number;
-        skipStepsCount?: number;
-    } | undefined) => void;
-}, string>;
+    runTutorial: (options?: Options | undefined) => void;
+}, "">;
 type Tutorial = InstanceType<typeof Tutorial>;
 export default Tutorial;

package/package/components/tutorials/TutorialControls.svelte

@@ -2,8 +2,7 @@
 import Button from '../common/button/Button.svelte';
 import { createEventDispatcher } from 'svelte';
 import Alert from '../common/alert/Alert.svelte';
-export let activeIndex = undefined;
-export let totalSteps = undefined;
+let { activeIndex = undefined, totalSteps = undefined } = $props();
 const dispatch = createEventDispatcher();
 </script>
 

package/package/components/tutorials/TutorialControls.svelte.d.ts

@@ -1,3 +1,7 @@
+interface Props {
+    activeIndex?: number | undefined;
+    totalSteps?: number | 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,14 +15,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TutorialControls: $$__sveltets_2_IsomorphicComponent<{
-    activeIndex?: number | undefined;
-    totalSteps?: number | undefined;
-}, {
+declare const TutorialControls: $$__sveltets_2_IsomorphicComponent<Props, {
     previous: CustomEvent<any>;
     next: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type TutorialControls = InstanceType<typeof TutorialControls>;
 export default TutorialControls;

package/package/components/tutorials/TutorialWrapper.svelte

@@ -1,7 +1,8 @@
-<script lang="ts">import { getTutorialIndex } from '../../tutorials/config';
+<script lang="ts">import { untrack } from 'svelte';
+import { getTutorialIndex } from '../../tutorials/config';
 let { id, component: Component, name, onInstanceReady, onSkipAll } = $props();
 let instance = $state(undefined);
-const index = getTutorialIndex(id);
+const index = getTutorialIndex(untrack(() => id));
 $effect(() => {
     if (instance) {
         onInstanceReady(id, instance);

package/package/components/tutorials/app/BackgroundRunnablesTutorial.svelte

@@ -2,9 +2,8 @@
 import {} from 'driver.js';
 import Tutorial from '../Tutorial.svelte';
 import { clickButtonBySelector } from '../utils';
-export let name;
-export let index;
-let tutorial = undefined;
+let { name, index } = $props();
+let tutorial = $state(undefined);
 export function runTutorial(skipStepsCount = undefined) {
     tutorial?.runTutorial({ skipStepsCount });
 }

package/package/components/tutorials/app/BackgroundRunnablesTutorial.svelte.d.ts

@@ -1,3 +1,7 @@
+interface Props {
+    name: string;
+    index: number;
+}
 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 +15,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const BackgroundRunnablesTutorial: $$__sveltets_2_IsomorphicComponent<{
-    name: string;
-    index: number;
-    runTutorial?: (skipStepsCount?: number | undefined) => void;
-}, {
+declare const BackgroundRunnablesTutorial: $$__sveltets_2_IsomorphicComponent<Props, {
     error: CustomEvent<any>;
     skipAll: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     runTutorial: (skipStepsCount?: number | undefined) => void;
-}, string>;
+}, "">;
 type BackgroundRunnablesTutorial = InstanceType<typeof BackgroundRunnablesTutorial>;
 export default BackgroundRunnablesTutorial;

package/package/components/tutorials/app/ConnectionTutorial.svelte

@@ -4,9 +4,8 @@ import { getContext } from 'svelte';
 import Tutorial from '../Tutorial.svelte';
 import { clickButtonBySelector } from '../utils';
 import { updateProgress } from '../../../tutorialUtils';
-export let name;
-export let index;
-let tutorial = undefined;
+let { name, index } = $props();
+let tutorial = $state(undefined);
 const { app, selectedComponent, focusedGrid } = getContext('AppViewerContext');
 const { history } = getContext('AppEditorContext');
 export function runTutorial() {

package/package/components/tutorials/app/ConnectionTutorial.svelte.d.ts

@@ -1,3 +1,7 @@
+interface Props {
+    name: string;
+    index: number;
+}
 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 +15,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ConnectionTutorial: $$__sveltets_2_IsomorphicComponent<{
-    name: string;
-    index: number;
-    runTutorial?: () => void;
-}, {
+declare const ConnectionTutorial: $$__sveltets_2_IsomorphicComponent<Props, {
     error: CustomEvent<any>;
     skipAll: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     runTutorial: () => void;
-}, string>;
+}, "">;
 type ConnectionTutorial = InstanceType<typeof ConnectionTutorial>;
 export default ConnectionTutorial;

package/package/components/tutorials/app/ExpressionEvaluationTutorial.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import Tutorial from '../Tutorial.svelte';
-export let name;
-export let index;
-let tutorial = undefined;
+let { name, index } = $props();
+let tutorial = $state(undefined);
 export function runTutorial() {
     tutorial?.runTutorial();
 }