windmill-components 1.623.1 → 1.642.0

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()
 

package/package/components/tutorials/RunsTutorial.svelte

@@ -0,0 +1,399 @@
+<script lang="ts">import Tutorial from './Tutorial.svelte';
+import { updateProgress } from '../../tutorialUtils';
+import { JobService, FlowService } from '../../gen';
+import { workspaceStore, userStore } from '../../stores';
+import { wait } from '../../utils';
+import { waitJob } from '../waitJob';
+import { DELAY_SHORT, DELAY_MEDIUM, DELAY_LONG, createFakeCursor, animateCursorToElementAndClick, animateFakeCursorClick } from './utils';
+import { goto } from '$app/navigation';
+import { base } from '../../base';
+import { sendUserToast } from '../../toast';
+let { index } = $props();
+let tutorial = $state(undefined);
+let tutorialFlowPaths = $state([]);
+// Flags to track if steps are complete
+let step2Complete = $state(false);
+let step3Complete = $state(false);
+let step5Complete = $state(false);
+let step6Complete = $state(false);
+// Create a simple flow
+async function createTutorialFlow() {
+    const flowPath = `f/tutorial/runs-tutorial-flow-${Date.now()}`;
+    const flow = {
+        summary: 'Tutorial: Simple Hello World Flow',
+        description: 'A simple flow created for the runs tutorial',
+        value: {
+            modules: [
+                {
+                    id: 'hello',
+                    value: {
+                        type: 'rawscript',
+                        content: 'export async function main() {\n  return {\n    message: "Hello from the Runs tutorial!",\n    timestamp: new Date().toISOString()\n  };\n}',
+                        language: 'bun',
+                        input_transforms: {}
+                    },
+                    summary: 'Say hello'
+                }
+            ]
+        },
+        schema: {
+            $schema: 'https://json-schema.org/draft/2020-12/schema',
+            type: 'object',
+            properties: {},
+            required: [],
+            order: []
+        },
+        path: flowPath,
+        edited_at: '',
+        edited_by: '',
+        archived: false,
+        extra_perms: {}
+    };
+    await FlowService.createFlow({
+        workspace: $workspaceStore,
+        requestBody: flow
+    });
+    return flowPath;
+}
+// Create a broken flow that will fail
+async function createBrokenFlow() {
+    const flowPath = `f/tutorial/runs-tutorial-broken-${Date.now()}`;
+    const flow = {
+        summary: 'Tutorial: Broken Flow Example',
+        description: 'A flow that intentionally fails to demonstrate error handling',
+        value: {
+            modules: [
+                {
+                    id: 'error',
+                    value: {
+                        type: 'rawscript',
+                        content: 'export async function main() {\n  throw new Error("Intentional error for tutorial - this demonstrates how failed jobs appear in the runs list");\n}',
+                        language: 'bun',
+                        input_transforms: {}
+                    },
+                    summary: 'Throw error'
+                }
+            ]
+        },
+        schema: {
+            $schema: 'https://json-schema.org/draft/2020-12/schema',
+            type: 'object',
+            properties: {},
+            required: [],
+            order: []
+        },
+        path: flowPath,
+        edited_at: '',
+        edited_by: '',
+        archived: false,
+        extra_perms: {}
+    };
+    await FlowService.createFlow({
+        workspace: $workspaceStore,
+        requestBody: flow
+    });
+    return flowPath;
+}
+// Run the flow and wait for completion
+async function runFlowAndWait(flowPath) {
+    const jobId = await JobService.runFlowByPath({
+        workspace: $workspaceStore,
+        path: flowPath,
+        requestBody: {},
+        skipPreprocessor: true
+    });
+    // Wait for job to complete
+    await waitJob(jobId);
+    return jobId;
+}
+function getTutorialSteps(driver) {
+    return [
+        {
+            popover: {
+                title: 'Welcome to your Monitoring Dashboard!',
+                description: "<p>Before we dive in, let's define a key term: a Job. A &quot;Job&quot; is simply a single run of a script or flow. Every time you run code, Windmill creates a Job to track if it succeeded or failed, how long it took, and what the results were.</p><p style='margin-top: 12px;'>In this tutorial, we will explore:</p><ul style='margin-top: 8px; padding-left: 20px;'><li style='margin-bottom: 8px;'><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' style='color: #22c55e; display: inline-block; vertical-align: middle; margin-right: 6px;'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>A successful job execution.</li><li style='margin-bottom: 8px;'><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' style='color: #ef4444; display: inline-block; vertical-align: middle; margin-right: 6px;'><circle cx='12' cy='12' r='10'/><path d='m12 8v4'/><path d='m12 16h.01'/></svg>A failed job execution.</li><li><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' style='color: #3b82f6; display: inline-block; vertical-align: middle; margin-right: 6px;'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>How to filter your monitoring view.</li></ul>",
+                onNextClick: () => {
+                    driver.moveNext();
+                },
+                onPrevClick: () => {
+                    sendUserToast('Previous is not available for this step', true, [], undefined, 3000);
+                }
+            }
+        },
+        {
+            element: '#runs-table-wrapper',
+            onHighlighted: async () => {
+                step2Complete = false;
+                await wait(DELAY_MEDIUM);
+                // Find all jobs
+                const allJobRows = Array.from(document.querySelectorAll('#runs-table-wrapper .cursor-pointer'));
+                // Find successful job (green badge/check icon) - first one that's not failed
+                const successfulJobRow = allJobRows.find((el) => {
+                    const hasRedBadge = el.querySelector('[class*="bg-red"], [class*="text-red"]');
+                    const hasGreenBadge = el.querySelector('[class*="bg-green"], [class*="text-green"]');
+                    return !hasRedBadge && hasGreenBadge !== null;
+                }) || allJobRows[0];
+                if (successfulJobRow) {
+                    // Create cursor
+                    const cursor = createFakeCursor();
+                    // Click on successful job
+                    await animateCursorToElementAndClick(cursor, successfulJobRow);
+                    // Wait for navigation to job details page
+                    await wait(DELAY_LONG);
+                    // Navigate back to runs page using SvelteKit navigation
+                    await goto(`${base}/runs?tutorial=runs-tutorial`, { replaceState: true });
+                    await wait(DELAY_LONG);
+                    // Remove the cursor
+                    cursor.remove();
+                    step2Complete = true;
+                }
+            },
+            popover: {
+                title: 'Exploring successful job runs <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #22c55e; display: inline-block; vertical-align: middle;"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',
+                description: 'Let\'s click on a successful job to see how to inspect a completed execution.',
+                side: 'bottom',
+                onNextClick: async () => {
+                    if (!step2Complete) {
+                        sendUserToast('Please wait for the job click to complete...', false, [], undefined, 3000);
+                        return;
+                    }
+                    // Click on the successful job again (without showing cursor)
+                    const successfulJobRow = Array.from(document.querySelectorAll('#runs-table-wrapper .cursor-pointer')).find((el) => {
+                        const hasRedBadge = el.querySelector('[class*="bg-red"], [class*="text-red"]');
+                        const hasGreenBadge = el.querySelector('[class*="bg-green"], [class*="text-green"]');
+                        return !hasRedBadge && hasGreenBadge !== null;
+                    }) || Array.from(document.querySelectorAll('#runs-table-wrapper .cursor-pointer'))[0];
+                    if (successfulJobRow) {
+                        successfulJobRow.click();
+                        await wait(DELAY_SHORT);
+                        // Wait for navigation to job details page
+                        await wait(DELAY_LONG);
+                        // Navigate back to runs page using SvelteKit navigation
+                        await goto(`${base}/runs?tutorial=runs-tutorial`, { replaceState: true });
+                        await wait(DELAY_LONG);
+                    }
+                    driver.moveNext();
+                },
+                onPrevClick: () => {
+                    sendUserToast('Previous is not available for this step', true, [], undefined, 3000);
+                }
+            }
+        },
+        {
+            element: '#runs-table-wrapper',
+            onHighlighted: async () => {
+                step3Complete = false;
+                await wait(DELAY_MEDIUM);
+                // Find all jobs
+                const allJobRows = Array.from(document.querySelectorAll('#runs-table-wrapper .cursor-pointer'));
+                // Find failed job (red badge/X icon)
+                const failedJobRow = allJobRows.find((el) => {
+                    const badge = el.querySelector('[class*="bg-red"], [class*="text-red"]');
+                    return badge !== null;
+                });
+                if (failedJobRow) {
+                    // Create cursor
+                    const cursor = createFakeCursor();
+                    // Click on failed job
+                    await animateCursorToElementAndClick(cursor, failedJobRow);
+                    // Wait for navigation to job details page
+                    await wait(DELAY_LONG);
+                    // Navigate back to runs page using SvelteKit navigation
+                    await goto(`${base}/runs?tutorial=runs-tutorial`, { replaceState: true });
+                    await wait(DELAY_LONG);
+                    // Remove the cursor
+                    cursor.remove();
+                    step3Complete = true;
+                }
+            },
+            popover: {
+                title: 'Exploring failed job runs <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #ef4444; display: inline-block; vertical-align: middle;"><circle cx="12" cy="12" r="10"/><path d="m12 8v4"/><path d="m12 16h.01"/></svg>',
+                description: 'Now let\'s click on a failed job to see how to inspect a failed execution.',
+                side: 'bottom',
+                onNextClick: async () => {
+                    if (!step3Complete) {
+                        sendUserToast('Please wait for the job click to complete...', false, [], undefined, 3000);
+                        return;
+                    }
+                    // Click on the failed job again (without showing cursor)
+                    const failedJobRow = Array.from(document.querySelectorAll('#runs-table-wrapper .cursor-pointer')).find((el) => {
+                        const badge = el.querySelector('[class*="bg-red"], [class*="text-red"]');
+                        return badge !== null;
+                    });
+                    if (failedJobRow) {
+                        failedJobRow.click();
+                        await wait(DELAY_SHORT);
+                        // Wait for navigation to job details page
+                        await wait(DELAY_LONG);
+                        // Navigate back to runs page using SvelteKit navigation
+                        await goto(`${base}/runs?tutorial=runs-tutorial`, { replaceState: true });
+                        await wait(DELAY_LONG);
+                    }
+                    driver.moveNext();
+                },
+                onPrevClick: () => {
+                    sendUserToast('Previous is not available for this step', true, [], undefined, 3000);
+                }
+            }
+        },
+        {
+            element: 'div.p-2.px-4.pt-8.w-full.border-b',
+            popover: {
+                title: 'Visual run history',
+                description: 'This chart gives you a visual overview of your run history at a glance. The duration chart shows how long each job takes to complete over time.',
+                side: 'bottom',
+                onNextClick: () => {
+                    driver.moveNext();
+                },
+                onPrevClick: () => {
+                    sendUserToast('Previous is not available for this step', true, [], undefined, 3000);
+                }
+            }
+        },
+        {
+            element: 'div.p-2.px-4.pt-8.w-full.border-b',
+            onHighlighted: async () => {
+                step5Complete = false;
+                await wait(DELAY_MEDIUM);
+                // Find the button with data-value="ConcurrencyChart"
+                const concurrencyButton = document.querySelector('button[data-value="ConcurrencyChart"]');
+                if (concurrencyButton) {
+                    await animateFakeCursorClick(concurrencyButton);
+                    await wait(DELAY_MEDIUM);
+                    step5Complete = true;
+                }
+            },
+            popover: {
+                title: 'Switching chart views',
+                description: 'You can switch between different chart views to analyze your runs. The concurrency chart allows you to see how many jobs are running concurrently over time.',
+                side: 'bottom',
+                onNextClick: () => {
+                    if (!step5Complete) {
+                        sendUserToast('Please wait for the chart switch to complete...', false, [], undefined, 3000);
+                        return;
+                    }
+                    driver.moveNext();
+                },
+                onPrevClick: () => {
+                    sendUserToast('Previous is not available for this step', true, [], undefined, 3000);
+                }
+            }
+        },
+        {
+            element: 'div.flex.flex-row.items-start.w-full.border-b.px-4.gap-8',
+            onHighlighted: async () => {
+                step6Complete = false;
+                await wait(DELAY_MEDIUM);
+                // Find the success and failure filter buttons
+                const successButton = document.querySelector('button[data-value="success"]');
+                const failureButton = document.querySelector('button[data-value="failure"]');
+                if (successButton && failureButton) {
+                    // Create cursor once for both clicks
+                    const cursor = createFakeCursor();
+                    // Click on failure button first
+                    await animateCursorToElementAndClick(cursor, failureButton);
+                    await wait(DELAY_MEDIUM);
+                    // Click on success button
+                    await animateCursorToElementAndClick(cursor, successButton);
+                    // Remove the cursor
+                    cursor.remove();
+                    await wait(DELAY_MEDIUM);
+                    step6Complete = true;
+                }
+            },
+            popover: {
+                title: 'Filtering jobs date, kind, status',
+                description: 'You can filter jobs, for example by status (failed, running, success). This helps you focus on specific types of executions.',
+                side: 'bottom',
+                onNextClick: () => {
+                    if (!step6Complete) {
+                        sendUserToast('Please wait for the filter clicks to complete...', false, [], undefined, 3000);
+                        return;
+                    }
+                    driver.moveNext();
+                },
+                onPrevClick: () => {
+                    sendUserToast('Previous is not available for this step', true, [], undefined, 3000);
+                }
+            }
+        },
+        {
+            element: 'div.flex.flex-row.gap-4.items-center.px-2.py-1.grow-0.justify-between',
+            popover: {
+                title: 'More filtering options',
+                description: 'Even more filters are available to help you find exactly what you\'re looking for. Explore the additional filtering options to refine your search.',
+                side: 'bottom',
+                onNextClick: () => {
+                    driver.moveNext();
+                },
+                onPrevClick: () => {
+                    sendUserToast('Previous is not available for this step', true, [], undefined, 3000);
+                }
+            }
+        },
+        {
+            popover: {
+                title: 'Tutorial complete! 🎉',
+                description: 'You now know how to use the Runs page to monitor your executions, view successful results, and debug failed jobs.<p style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(128,128,128,0.3); font-size: 0.9em; opacity: 0.9;"><strong>💡 Want to learn more?</strong> Access more tutorials from the <strong>Tutorials</strong> page in the main menu.</p>',
+                onNextClick: async () => {
+                    updateProgress(index);
+                    driver.destroy();
+                    // Cleanup tutorial flows silently
+                    await cleanupTutorialFlows();
+                }
+            }
+        }
+    ];
+}
+// Cleanup function to delete tutorial flows
+async function cleanupTutorialFlows() {
+    // Don't delete flows if user is an operator (they don't have permission)
+    if ($userStore?.operator) {
+        return;
+    }
+    for (const flowPath of tutorialFlowPaths) {
+        try {
+            await FlowService.deleteFlowByPath({
+                workspace: $workspaceStore,
+                path: flowPath
+            });
+        }
+        catch (error) {
+            console.error(`Error deleting tutorial flow ${flowPath}:`, error);
+        }
+    }
+}
+// Start tutorial - create and run both jobs first
+export async function runTutorial() {
+    // Create and run both flows at the beginning
+    try {
+        const successfulFlowPath = await createTutorialFlow();
+        const brokenFlowPath = await createBrokenFlow();
+        // Store flow paths for cleanup
+        tutorialFlowPaths = [successfulFlowPath, brokenFlowPath];
+        // Run both flows in parallel
+        await Promise.all([
+            runFlowAndWait(successfulFlowPath),
+            runFlowAndWait(brokenFlowPath)
+        ]);
+        // Wait a bit for jobs to appear
+        await wait(DELAY_LONG);
+    }
+    catch (error) {
+        console.error('Error creating/running tutorial flows:', error);
+    }
+    tutorial?.runTutorial();
+}
+</script>
+
+<Tutorial
+	bind:this={tutorial}
+	{index}
+	name="runs-tutorial"
+	tainted={false}
+	on:error
+	on:skipAll
+	getSteps={(driver) => {
+		return getTutorialSteps(driver)
+	}}
+/>

package/package/components/{flows/propPicker/FlowPropPicker.svelte.d.ts → tutorials/RunsTutorial.svelte.d.ts}

@@ -1,3 +1,6 @@
+interface Props {
+    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,13 +14,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowPropPicker: $$__sveltets_2_IsomorphicComponent<{
-    json?: {};
-    prefix?: string;
-}, {
-    keydown: KeyboardEvent;
+declare const RunsTutorial: $$__sveltets_2_IsomorphicComponent<Props, {
+    error: CustomEvent<any>;
+    skipAll: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowPropPicker = InstanceType<typeof FlowPropPicker>;
-export default FlowPropPicker;
+}, {}, {
+    runTutorial: () => Promise<void>;
+}, "">;
+type RunsTutorial = InstanceType<typeof RunsTutorial>;
+export default RunsTutorial;

package/package/components/tutorials/TroubleshootFlowTutorial.svelte

@@ -4,6 +4,7 @@ import { initFlow } from '../flows/flowStore.svelte';
 import { wait } from '../../utils';
 import { sendUserToast } from '../../toast';
 import { updateProgress } from '../../tutorialUtils';
+import { DELAY_SHORT, DELAY_MEDIUM, DELAY_LONG, createFakeCursor } from './utils';
 let { index } = $props();
 const { flowStore, flowStateStore } = getContext('FlowEditorContext');
 let tutorial = undefined;
@@ -17,10 +18,6 @@ let stepComplete = $state({
     6: false,
     7: false
 });
-// Constants for delays
-const DELAY_SHORT = 100;
-const DELAY_MEDIUM = 300;
-const DELAY_LONG = 500;
 // Constants for cursor animation
 const CURSOR_START_OFFSET = -100;
 const CURSOR_CLICK_SCALE = 0.8;
@@ -43,21 +40,9 @@ function checkStepComplete(step) {
     }
     return true;
 }
-// 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 with start position
+async function createFakeCursorWithStart(startElement, endElement, transitionDuration = 1.5) {
+    const fakeCursor = createFakeCursor();
     const endRect = endElement.getBoundingClientRect();
     let startX, startY;
     if (startElement) {
@@ -88,7 +73,7 @@ function getElementBySelector(selector) {
 }
 // Helper function to animate a fake cursor click
 async function animateFakeCursorClick(element, transitionDuration = 1.5, options) {
-    const fakeCursor = await createFakeCursor(null, element, transitionDuration);
+    const fakeCursor = await createFakeCursorWithStart(null, element, transitionDuration);
     await wait(DELAY_MEDIUM);
     // Animate click (shrink cursor briefly)
     fakeCursor.style.transform = `scale(${CURSOR_CLICK_SCALE})`;

package/package/components/tutorials/utils.d.ts

@@ -1,5 +1,13 @@
 import type { FlowModule, OpenFlow } from '../../gen';
 import type { App } from '../apps/types';
+export declare const DELAY_SHORT = 100;
+export declare const DELAY_MEDIUM = 300;
+export declare const DELAY_LONG = 500;
+export declare const DELAY_ANIMATION = 1500;
+export declare const DELAY_ANIMATION_LONG = 2500;
+export declare const DELAY_TYPING = 50;
+export declare const DELAY_CODE_CHAR = 2;
+export declare const DELAY_CODE_NEWLINE = 5;
 export declare function setInputBySelector(selector: string, value: string): void;
 export declare function clickButtonBySelector(selector: string): void;
 export declare function clickFirstButtonBySelector(selector: string): void;
@@ -13,3 +21,11 @@ export declare function updateInlineRunnableCode(app: App, componentId: string,
 export declare function connectComponentSourceToOutput(app: App, componentId: string, targetId: string): void;
 export declare function connectInlineRunnableInputToComponentOutput(app: App, sourceComponentId: string, sourceField: string, targetComponentId: string, targetField: string, fieldType?: string): void;
 export declare function waitForElementLoading(selector: string, callback: () => void, interval?: number, maxAttempts?: number): void;
+export declare function moveCursorToElement(cursor: HTMLElement, element: HTMLElement, duration?: number): Promise<void>;
+export declare function createFakeCursor(): HTMLElement;
+export declare function createFakeCursorWithStart(startElement: HTMLElement | null, endElement: HTMLElement, transitionDuration?: number): Promise<HTMLElement>;
+export declare function animateFakeCursorClick(element: HTMLElement, transitionDuration?: number, options?: {
+    usePointerEvents?: boolean;
+    startElement?: HTMLElement | null;
+}): Promise<void>;
+export declare function animateCursorToElementAndClick(cursor: HTMLElement, element: HTMLElement, startOffset?: number): Promise<void>;