windmill-components 1.623.1 → 1.623.2

package/package/components/triggers/native/services/nextcloud/NextcloudTriggerForm.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">import { NativeTriggerService } from '../../../../../gen/services.gen';
+import { workspaceStore } from '../../../../../stores';
+import { sendUserToast } from '../../../../../utils';
+import { Button } from '../../../../common';
+import SchemaForm from '../../../../SchemaForm.svelte';
+import Section from '../../../../Section.svelte';
+import { Loader2 } from 'lucide-svelte';
+import { getNextcloudSchema } from '../../utils';
+let { serviceConfig = $bindable(), errors = $bindable(), disabled = false, externalData = undefined, token = $bindable(''), triggerTokens = $bindable(undefined), loading = $bindable() } = $props();
+let availableEvents = $state([]);
+let serviceSchema = $state(null);
+async function loadAvailableEvents() {
+    if (!$workspaceStore) {
+        availableEvents = [];
+        return;
+    }
+    loading = true;
+    try {
+        const events = await NativeTriggerService.listNextCloudEvents({
+            workspace: $workspaceStore
+        });
+        availableEvents = events;
+        serviceSchema = getNextcloudSchema(events);
+    }
+    catch (err) {
+        console.error('Failed to load NextCloud events:', err);
+        sendUserToast(`Failed to load available events: ${err.body || err.message}`, true);
+        availableEvents = [];
+    }
+    finally {
+        loading = false;
+    }
+}
+export function validate() {
+    let serviceErrors = {};
+    if (serviceSchema && serviceSchema.required) {
+        for (const requiredField of serviceSchema.required) {
+            if (!serviceConfig[requiredField]) {
+                const fieldTitle = serviceSchema.properties?.[requiredField]?.title || requiredField;
+                serviceErrors[requiredField] = `${fieldTitle} is required`;
+            }
+        }
+    }
+    if (!serviceConfig.event && availableEvents.length === 0 && !loading) {
+        serviceErrors.event =
+            'Unable to load available events. Please check your resource configuration.';
+    }
+    return serviceErrors;
+}
+let externalDataApplied = $state(false);
+$effect(() => {
+    if ($workspaceStore) {
+        loadAvailableEvents();
+    }
+});
+$effect(() => {
+    if (externalData && !externalDataApplied) {
+        serviceConfig = { ...serviceConfig, ...externalData };
+        externalDataApplied = true;
+    }
+});
+$effect(() => {
+    if (!externalData) {
+        externalDataApplied = false;
+    }
+});
+</script>
+
+<Section label="Nextcloud configuration">
+	{#if loading}
+		<div class="flex items-center gap-2 text-secondary text-xs">
+			<Loader2 class="animate-spin" size={16} />
+			Loading available events...
+		</div>
+	{:else if availableEvents.length === 0}
+		<div class="text-red-500 text-xs space-y-2">
+			<div
+				>No events available. Please ensure your workspace has a connected Nextcloud integration.</div
+			>
+			<div class="flex gap-2">
+				<Button variant="default" on:click={loadAvailableEvents} {disabled}>
+					Retry loading events
+				</Button>
+				<Button variant="subtle" href="/workspace_settings?tab=integrations" target="_blank">
+					Manage integrations
+				</Button>
+			</div>
+		</div>
+	{:else if serviceSchema}
+		<SchemaForm
+			schema={serviceSchema}
+			bind:args={serviceConfig}
+			isValid={true}
+			compact={true}
+			prettifyHeader={true}
+			{disabled}
+		/>
+	{:else}
+		<div class="text-secondary text-xs">
+			Please ensure Nextcloud workspace integration is connected to load available configuration
+			options.
+		</div>
+	{/if}
+</Section>

package/package/components/triggers/native/services/nextcloud/NextcloudTriggerForm.svelte.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    serviceConfig: Record<string, any>;
+    errors: Record<string, string>;
+    disabled?: boolean;
+    externalData?: any;
+    path?: string;
+    isFlow?: boolean;
+    hash?: string;
+    token?: string;
+    triggerTokens?: any;
+    scopes?: string[];
+    loading: boolean;
+}
+declare const NextcloudTriggerForm: import("svelte").Component<Props, {
+    validate: () => Record<string, string>;
+}, "token" | "loading" | "errors" | "triggerTokens" | "serviceConfig">;
+type NextcloudTriggerForm = ReturnType<typeof NextcloudTriggerForm>;
+export default NextcloudTriggerForm;

package/package/components/triggers/native/utils.d.ts

@@ -0,0 +1,74 @@
+import type { NativeServiceName, NativeTrigger } from '../../../gen/types.gen';
+import { type Writable } from 'svelte/store';
+export interface NativeTriggerConfig {
+    readonly serviceDisplayName: string;
+    readonly serviceKey: NativeServiceName;
+    readonly supportsSync: boolean;
+    readonly supportsFetchConfig: boolean;
+    readonly isCloudCompatible: boolean;
+    readonly templates?: {
+        script?: string;
+        flow?: string;
+    };
+}
+export declare const NATIVE_TRIGGER_SERVICES: Record<NativeServiceName, NativeTriggerConfig>;
+export declare function isServiceAvailable(service: NativeServiceName, workspace: string): Promise<boolean>;
+export declare function getAvailableServices(): NativeServiceName[];
+export declare function getAvailableNativeTriggerServices(workspace: string): Promise<NativeServiceName[]>;
+export declare function getServiceConfig(service: NativeServiceName): NativeTriggerConfig | undefined;
+export type ExtendedNativeTrigger = NativeTrigger & {
+    marked?: string;
+};
+export interface ServiceFormProps {
+    config: Record<string, any>;
+    errors: Record<string, string>;
+    resources: Array<{
+        path: string;
+        description?: string;
+    }>;
+    onConfigChange: (newConfig: Record<string, any>) => void;
+    onTest?: () => Promise<void>;
+    disabled?: boolean;
+}
+export declare function validateCommonFields(config: Record<string, any>): Record<string, string>;
+export declare function formatTriggerDisplayName(trigger: NativeTrigger): string;
+export declare function getTriggerIconName(service: NativeServiceName): string;
+export declare function getServiceIcon(service: NativeServiceName): Promise<any>;
+export declare function getServiceTemplates(service: NativeServiceName): {
+    script?: string;
+    flow?: string;
+} | undefined;
+export declare function getTemplatePath(service: NativeServiceName, type: 'script' | 'flow'): string | undefined;
+export interface NextcloudEvent {
+    path: string;
+    description?: string;
+}
+export declare function getNextcloudSchema(availableEvents: NextcloudEvent[]): {
+    type: string;
+    properties: {
+        event: {
+            type: string;
+            title: string;
+            description: string;
+            enum: string[];
+            enumLabels: Record<string, string>;
+        };
+        eventFilter: {
+            type: string;
+            title: string;
+            description: string;
+        };
+        userIdFilter: {
+            type: string;
+            title: string;
+            description: string;
+        };
+        headers: {
+            type: string;
+            title: string;
+            description: string;
+        };
+    };
+    required: string[];
+};
+export declare function saveNativeTriggerFromCfg(service: NativeServiceName, initialExternalId: string, triggerCfg: Record<string, any>, edit: boolean, workspace: string, usedTriggerKinds: Writable<string[]>): Promise<string | null>;

package/package/components/triggers/native/utils.js

@@ -0,0 +1,152 @@
+import { isCloudHosted } from '../../../cloud';
+import { NativeTriggerService, WorkspaceIntegrationService } from '../../../gen';
+import { get } from 'svelte/store';
+import { sendUserToast } from '../../../toast';
+export const NATIVE_TRIGGER_SERVICES = {
+    nextcloud: {
+        serviceDisplayName: 'Nextcloud',
+        serviceKey: 'nextcloud',
+        supportsSync: true,
+        supportsFetchConfig: true,
+        isCloudCompatible: true,
+        templates: {
+            script: '/scripts/add?hub=hub%2F28115',
+            flow: '/flows/add?hub=73'
+        }
+    }
+};
+export async function isServiceAvailable(service, workspace) {
+    const config = NATIVE_TRIGGER_SERVICES[service];
+    if (!config)
+        return false;
+    if (isCloudHosted() && !config.isCloudCompatible) {
+        return false;
+    }
+    try {
+        const response = await WorkspaceIntegrationService.checkIfNativeTriggersServiceExists({
+            workspace,
+            serviceName: service
+        });
+        return response;
+    }
+    catch (workspaceErr) {
+        console.debug(`Workspace integration check failed for ${service}:`, workspaceErr);
+        return false;
+    }
+}
+export function getAvailableServices() {
+    return Object.keys(NATIVE_TRIGGER_SERVICES);
+}
+export async function getAvailableNativeTriggerServices(workspace) {
+    const services = getAvailableServices();
+    const availableServices = [];
+    for (const service of services) {
+        const available = await isServiceAvailable(service, workspace);
+        if (available) {
+            availableServices.push(service);
+        }
+    }
+    return availableServices;
+}
+export function getServiceConfig(service) {
+    return NATIVE_TRIGGER_SERVICES[service];
+}
+export function validateCommonFields(config) {
+    const errors = {};
+    if (!config.script_path?.trim()) {
+        errors.script_path = 'Script/Flow path is required';
+    }
+    return errors;
+}
+export function formatTriggerDisplayName(trigger) {
+    return `${trigger.script_path} (external id: ${trigger.external_id})`;
+}
+export function getTriggerIconName(service) {
+    switch (service) {
+        case 'nextcloud':
+            return 'NextcloudIcon';
+        default:
+            return 'NextcloudIcon';
+    }
+}
+export async function getServiceIcon(service) {
+    switch (service) {
+        case 'nextcloud':
+            return (await import('../../icons/NextcloudIcon.svelte')).default;
+    }
+}
+export function getServiceTemplates(service) {
+    const config = getServiceConfig(service);
+    return config?.templates;
+}
+export function getTemplatePath(service, type) {
+    const templates = getServiceTemplates(service);
+    return templates?.[type];
+}
+export function getNextcloudSchema(availableEvents) {
+    return {
+        type: 'object',
+        properties: {
+            event: {
+                type: 'string',
+                title: 'Event',
+                description: 'The type of Nextcloud event to listen for',
+                enum: availableEvents.map((e) => e.path),
+                enumLabels: availableEvents.reduce((acc, cur) => ({ ...acc, [cur.path]: cur.description ?? cur.path }), {})
+            },
+            eventFilter: {
+                type: 'object',
+                title: 'Event filter',
+                description: 'Optional filter criteria for the event (JSON object)'
+            },
+            userIdFilter: {
+                type: 'string',
+                title: 'User ID filter',
+                description: 'Filter events by specific user ID'
+            },
+            headers: {
+                type: 'object',
+                title: 'Headers',
+                description: 'Optional HTTP headers to include (JSON object)'
+            }
+        },
+        required: ['event']
+    };
+}
+export async function saveNativeTriggerFromCfg(service, initialExternalId, triggerCfg, edit, workspace, usedTriggerKinds) {
+    const requestBody = {
+        script_path: triggerCfg.script_path,
+        is_flow: triggerCfg.is_flow,
+        service_config: triggerCfg.service_config
+    };
+    const serviceName = NATIVE_TRIGGER_SERVICES[service].serviceDisplayName;
+    try {
+        let externalId = initialExternalId;
+        if (edit) {
+            await NativeTriggerService.updateNativeTrigger({
+                workspace: workspace,
+                serviceName: service,
+                externalId: initialExternalId,
+                requestBody
+            });
+            sendUserToast(`${serviceName} trigger ${externalId} updated`);
+        }
+        else {
+            const response = await NativeTriggerService.createNativeTrigger({
+                workspace: workspace,
+                serviceName: service,
+                requestBody
+            });
+            externalId = response.external_id;
+            sendUserToast(`${serviceName} trigger ${externalId} created`);
+        }
+        if (!get(usedTriggerKinds).includes(service)) {
+            usedTriggerKinds.update((t) => [...t, service]);
+        }
+        return externalId;
+    }
+    catch (error) {
+        sendUserToast(error.body || error.message, true);
+        return null;
+    }
+}

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

@@ -1,4 +1,4 @@
-import { type TriggersCount } from '../../gen';
+import { type TriggersCount, type NativeServiceName } from '../../gen';
 import { type Trigger } from './utils';
 import { type Writable } from 'svelte/store';
 import type { TriggerType } from './utils';
@@ -28,5 +28,6 @@ export declare class Triggers {
     fetchGcpTriggers(triggersCountStore: Writable<TriggersCount | undefined>, workspaceId: string | undefined, path: string, isFlow: boolean, user?: UserExt | undefined): Promise<void>;
     fetchHttpTriggers(triggersCountStore: Writable<TriggersCount | undefined>, workspaceId: string | undefined, path: string, isFlow: boolean, user?: UserExt | undefined): Promise<void>;
     fetchEmailTriggers(triggersCountStore: Writable<TriggersCount | undefined>, workspaceId: string | undefined, path: string, isFlow: boolean, user?: UserExt | undefined): Promise<void>;
+    fetchNativeTriggers(serviceName: NativeServiceName, workspaceId: string | undefined, path: string, isFlow: boolean, user?: UserExt | undefined): Promise<void>;
     fetchTriggers(triggersCountStore: Writable<TriggersCount | undefined>, workspaceId: string | undefined, path: string, isFlow: boolean, primarySchedule?: ScheduleTrigger | undefined | false, user?: UserExt | undefined): Promise<void>;
 }

package/package/components/triggers/triggers.svelte.js

@@ -1,4 +1,4 @@
-import { KafkaTriggerService, MqttTriggerService, NatsTriggerService, PostgresTriggerService, ScheduleService, SqsTriggerService, WebsocketTriggerService, HttpTriggerService, GcpTriggerService, EmailTriggerService } from '../../gen';
+import { KafkaTriggerService, MqttTriggerService, NatsTriggerService, PostgresTriggerService, ScheduleService, SqsTriggerService, WebsocketTriggerService, NativeTriggerService, HttpTriggerService, GcpTriggerService, EmailTriggerService } from '../../gen';
 import { enterpriseLicense } from '../../stores';
 import { getLightConfig, sortTriggers, updateTriggersCount } from './utils';
 import { get } from 'svelte/store';
@@ -38,6 +38,7 @@ export class Triggers {
         this.#updateDraftCallback?.();
     }
     setDraftConfig(triggerIndex, draftConfig) {
+        console.log('setDraftConfig', triggerIndex, draftConfig);
         if (triggerIndex === undefined || triggerIndex < 0 || triggerIndex >= this.#triggers.length) {
             return;
         }
@@ -339,6 +340,30 @@ export class Triggers {
             console.error('Failed to fetch email triggers:', error);
         }
     }
+    async fetchNativeTriggers(serviceName, workspaceId, path, isFlow, user = undefined) {
+        if (!workspaceId)
+            return;
+        try {
+            const triggers = await NativeTriggerService.listNativeTriggers({
+                workspace: workspaceId,
+                serviceName,
+                path,
+                isFlow
+            });
+            // Convert to the trigger format used by updateTriggers
+            const triggerData = triggers.map((t) => ({
+                path: t.external_id,
+                script_path: t.script_path,
+                is_flow: t.is_flow,
+                extra_perms: {},
+                service_config: t.service_config
+            }));
+            this.updateTriggers(triggerData, serviceName, user);
+        }
+        catch (error) {
+            console.debug(`Failed to fetch ${serviceName} triggers:`, error);
+        }
+    }
     async fetchTriggers(triggersCountStore, workspaceId, path, isFlow, primarySchedule = undefined, user = undefined) {
         if (!workspaceId)
             return;
@@ -348,14 +373,17 @@ export class Triggers {
             this.fetchHttpTriggers(triggersCountStore, workspaceId, path, isFlow, user),
             this.fetchWebsocketTriggers(triggersCountStore, workspaceId, path, isFlow, user),
             this.fetchPostgresTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-            this.fetchNatsTriggers(triggersCountStore, workspaceId, path, isFlow, user),
             this.fetchMqttTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-            this.fetchEmailTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-            ...(get(enterpriseLicense) ? [
-                this.fetchKafkaTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-                this.fetchSqsTriggers(triggersCountStore, workspaceId, path, isFlow, user),
-                this.fetchGcpTriggers(triggersCountStore, workspaceId, path, isFlow, user)
-            ] : [])
+            this.fetchNativeTriggers('nextcloud', workspaceId, path, isFlow, user),
+            ...(get(enterpriseLicense)
+                ? [
+                    this.fetchKafkaTriggers(triggersCountStore, workspaceId, path, isFlow, user),
+                    this.fetchSqsTriggers(triggersCountStore, workspaceId, path, isFlow, user),
+                    this.fetchGcpTriggers(triggersCountStore, workspaceId, path, isFlow, user),
+                    this.fetchEmailTriggers(triggersCountStore, workspaceId, path, isFlow, user),
+                    this.fetchNatsTriggers(triggersCountStore, workspaceId, path, isFlow, user)
+                ]
+                : [])
         ]);
     }
 }

package/package/components/triggers/utils.js

@@ -5,7 +5,6 @@ import MqttIcon from '../icons/MqttIcon.svelte';
 import AwsIcon from '../icons/AwsIcon.svelte';
 import GoogleCloudIcon from '../icons/GoogleCloudIcon.svelte';
 import SchedulePollIcon from '../icons/SchedulePollIcon.svelte';
-import {} from './';
 import { saveScheduleFromCfg } from '../flows/scheduleUtils';
 import { saveHttpRouteFromCfg } from './http/utils';
 import { saveWebsocketTriggerFromCfg } from './websocket/utils';
@@ -17,6 +16,8 @@ import { saveMqttTriggerFromCfg } from './mqtt/utils';
 import { saveGcpTriggerFromCfg } from './gcp/utils';
 import { emptyString } from '../../utils';
 import { saveEmailTriggerFromCfg } from './email/utils';
+import NextcloudIcon from '../icons/NextcloudIcon.svelte';
+import { saveNativeTriggerFromCfg } from './native/utils';
 export const CLOUD_DISABLED_TRIGGER_TYPES = [
     'nats',
     'kafka',
@@ -56,7 +57,8 @@ export const triggerIconMap = {
     gcp: GoogleCloudIcon,
     primary_schedule: Calendar,
     poll: SchedulePollIcon,
-    cli: Terminal
+    cli: Terminal,
+    nextcloud: NextcloudIcon
 };
 export const triggerDisplayNamesMap = {
     schedule: 'Schedule',
@@ -72,7 +74,8 @@ export const triggerDisplayNamesMap = {
     poll: 'Scheduled Poll',
     webhook: 'Webhook',
     default_email: 'Default Email',
-    cli: 'CLI'
+    cli: 'CLI',
+    nextcloud: 'Nextcloud'
 };
 /**
  * Converts a TriggerType to a CaptureTriggerKind when a mapping exists
@@ -116,7 +119,8 @@ export function updateTriggersCount(triggersCountStore, type, action, primaryCfg
         gcp: 'gcp_count',
         email: 'email_count',
         poll: undefined,
-        cli: undefined
+        cli: undefined,
+        nextcloud: undefined
     };
     const countProperty = countPropertyMap[type];
     triggersCountStore.update((triggersCount) => {
@@ -221,7 +225,8 @@ export async function deployTriggers(triggersToDeploy, workspaceId, isAdmin, use
         gcp: (trigger) => saveGcpTriggerFromCfg(trigger.path ?? trigger.draftConfig?.path ?? '', trigger.draftConfig ?? {}, !trigger.isDraft, workspaceId, usedTriggerKinds),
         email: (trigger) => saveEmailTriggerFromCfg(trigger.path ?? trigger.draftConfig?.path ?? '', trigger.draftConfig ?? {}, !trigger.isDraft, workspaceId, isAdmin, usedTriggerKinds),
         poll: undefined,
-        cli: undefined
+        cli: undefined,
+        nextcloud: (trigger) => saveNativeTriggerFromCfg('nextcloud', trigger.path ?? '', trigger.draftConfig ?? {}, !trigger.isDraft, workspaceId, usedTriggerKinds)
     };
     await Promise.all(triggersToDeploy.map(async (trigger) => {
         const saveFunction = triggerSaveFunctions[trigger.type];
@@ -302,6 +307,9 @@ export function getLightConfig(triggerType, trigger) {
     else if (triggerType === 'email') {
         return { local_part: trigger.local_part };
     }
+    else if (triggerType === 'nextcloud') {
+        return { event: trigger.service_config?.event ?? trigger.event };
+    }
     else {
         return undefined;
     }
@@ -346,6 +354,9 @@ export function getTriggerLabel(trigger) {
     else if (type === 'email' && config?.local_part) {
         return `${config?.local_part}`;
     }
+    else if (type === 'nextcloud' && path) {
+        return `${path}`;
+    }
     else if (isDraft && draftConfig?.path) {
         return `${draftConfig?.path}`;
     }
@@ -371,7 +382,8 @@ export function sortTriggers(triggers) {
         'mqtt',
         'sqs',
         'gcp',
-        'email'
+        'email',
+        'nextcloud'
     ];
     return triggers.sort((a, b) => {
         // Draft triggers always come last

package/package/components/triggers.d.ts

@@ -16,5 +16,5 @@ export type TriggerContext = {
     triggersState: Triggers;
 };
 export declare function setScheduledPollSchedule(triggersState: Triggers, triggersCount: Writable<TriggersCount | undefined>): void;
-export type TriggerKind = 'webhooks' | 'emails' | 'default_emails' | 'schedules' | 'cli' | 'routes' | 'websockets' | 'scheduledPoll' | 'kafka' | 'nats' | 'postgres' | 'mqtt' | 'sqs' | 'gcp';
+export type TriggerKind = 'webhooks' | 'emails' | 'default_emails' | 'schedules' | 'cli' | 'routes' | 'websockets' | 'scheduledPoll' | 'kafka' | 'nats' | 'postgres' | 'mqtt' | 'sqs' | 'gcp' | 'nextcloud';
 export declare function captureTriggerKindToTriggerKind(kind: CaptureTriggerKind): TriggerKind;

package/package/components/tutorials/FlowBuilderLiveTutorial.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { getContext } from 'svelte';
-import { isFlowTainted, triggerPointerDown, clickButtonBySelector } from './utils';
+import { isFlowTainted, triggerPointerDown, clickButtonBySelector, DELAY_SHORT, DELAY_MEDIUM, DELAY_LONG, DELAY_ANIMATION, DELAY_ANIMATION_LONG, DELAY_TYPING, DELAY_CODE_CHAR, DELAY_CODE_NEWLINE, moveCursorToElement, createFakeCursor } from './utils';
 import Tutorial from './Tutorial.svelte';
 import { initFlow } from '../flows/flowStore.svelte';
 import { loadFlowModuleState } from '../flows/flowStateUtils.svelte';
@@ -16,15 +16,6 @@ let step3Complete = $state(false);
 let step4Complete = $state(false);
 let step5Complete = $state(false);
 let step6Complete = $state(false);
-// Constants for delays
-const DELAY_SHORT = 100;
-const DELAY_MEDIUM = 300;
-const DELAY_LONG = 500;
-const DELAY_ANIMATION = 1500;
-const DELAY_ANIMATION_LONG = 2500;
-const DELAY_TYPING = 50;
-const DELAY_CODE_CHAR = 2;
-const DELAY_CODE_NEWLINE = 5;
 // Helper function to get driver overlay
 function getDriverOverlay() {
     return document.querySelector('.driver-overlay');
@@ -70,29 +61,9 @@ function cleanupCustomOverlay() {
         customOverlay.remove();
     }
 }
-// Helper function to move cursor to element (for continuous cursor movement)
-async function moveCursorToElement(cursor, element, duration = DELAY_ANIMATION) {
-    const rect = element.getBoundingClientRect();
-    cursor.style.transition = `all ${duration / 1000}s ease-in-out`;
-    cursor.style.left = `${rect.left + rect.width / 2}px`;
-    cursor.style.top = `${rect.top + rect.height / 2}px`;
-    await wait(duration);
-}
-// Helper function to create and animate a fake cursor
-async function createFakeCursor(startElement, endElement, transitionDuration = 1.5) {
-    const fakeCursor = document.createElement('div');
-    fakeCursor.style.cssText = `
-			position: fixed;
-			width: 20px;
-			height: 20px;
-			border-radius: 50%;
-			background-color: rgba(59, 130, 246, 0.8);
-			border: 2px solid white;
-			pointer-events: none;
-			z-index: 10000;
-			transition: all ${transitionDuration}s ease-in-out;
-		`;
-    document.body.appendChild(fakeCursor);
+// Helper function to create and animate a fake cursor (extended version with start element support)
+async function createFakeCursorWithStart(startElement, endElement, transitionDuration = 1.5) {
+    const fakeCursor = createFakeCursor();
     const endRect = endElement.getBoundingClientRect();
     let startX, startY;
     if (startElement) {
@@ -281,7 +252,7 @@ const flowJson = {
 					// Animate cursor to the add step button
 					const button = document.querySelector('#flow-editor-add-step-0') as HTMLElement
 					if (button) {
-						const fakeCursor1 = await createFakeCursor(null, button, 1.5)
+						const fakeCursor1 = await createFakeCursorWithStart(null, button, 1.5)
 						await wait(DELAY_SHORT)
 						button.click()
 						fakeCursor1.remove()
@@ -299,7 +270,7 @@ const flowJson = {
 
 					if (bunSpan) {
 						// Animate cursor from add step button to TypeScript (Bun) span
-						const fakeCursor2 = await createFakeCursor(button, bunSpan, 1.5)
+						const fakeCursor2 = await createFakeCursorWithStart(button, bunSpan, 1.5)
 						await wait(DELAY_MEDIUM)
 						fakeCursor2.remove()