windmill-components 1.46.2 → 1.52.0

package/components/EditorBar.svelte

@@ -3,7 +3,7 @@
 
 <script>import { ResourceService, ScriptService, VariableService } from '../gen';
 import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
-import { faCode, faCube, faDollarSign, faRotate, faRotateLeft, faWallet } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faCube, faDollarSign, faEye, faRotate, faRotateLeft, faWallet } from '@fortawesome/free-solid-svg-icons';
 import { hubScripts, workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
@@ -11,7 +11,7 @@ import VariableEditor from './VariableEditor.svelte';
 import Button from './common/button/Button.svelte';
 import HighlightCode from './HighlightCode.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
-import { Drawer } from './common';
+import { Badge, Drawer } from './common';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -36,9 +36,7 @@ function addEditorActions() {
 }
 $: editor && addEditorActions();
 async function loadVariables() {
-    return (await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => {
-        return { name: x.path, ...x };
-    });
+    return await VariableService.listVariable({ workspace: $workspaceStore ?? '' });
 }
 async function loadContextualVariables() {
     return await VariableService.listContextualVariables({
@@ -49,7 +47,9 @@ async function loadScripts() {
     const workspaceScripts = await ScriptService.listScripts({
         workspace: $workspaceStore ?? 'NO_W'
     });
-    await loadHubScripts();
+    if (!$hubScripts) {
+        await loadHubScripts();
+    }
     const hubScripts_ = $hubScripts ?? [];
     return workspaceScripts.concat(hubScripts_);
 }
@@ -121,18 +121,18 @@ async function loadScripts() {
 			}
 			editor.insertAtCursor(`v, _ := wmill.GetVariable("${path}")`)
 		} else if (lang == 'bash') {
-			sendUserToast('Not supported yet', true)
+			editor.insertAtCursor(`curl -s -H "Authorization: Bearer $WM_TOKEN" \\
+  "$WM_BASE_URL/api/w/$WM_WORKSPACE/variables/get/${path}" \\
+  | jq -r .value`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
 	itemName="Variable"
-	extraField="name"
+	extraField="path"
 	loadItems={loadVariables}
+	buttons={{ 'Edit/View': (x) => variableEditor.editVariable(x) }}
 >
 	<div slot="submission" class="flex flex-row">
-		<div class="text-xs mr-2 align-middle">
-			The variable you were looking for does not exist yet?
-		</div>
 		<Button
 			variant="border"
 			color="blue"
@@ -167,28 +167,27 @@ async function loadScripts() {
 			}
 			editor.insertAtCursor(`r, _ := wmill.GetResource("${path}")`)
 		} else if (lang == 'bash') {
-			sendUserToast('Not supported yet', true)
+			editor.insertAtCursor(`curl -s -H "Authorization: Bearer $WM_TOKEN" \\
+  "$WM_BASE_URL/api/w/$WM_WORKSPACE/resources/get/${path}" \\
+  | jq -r .value`)
 		}
 		sendUserToast(`${path} inserted at cursor`)
 	}}
 	itemName="Resource"
-	extraField="resource_type"
+	buttons={{ 'Edit/View': (x) => resourceEditor.initEdit(x) }}
+	extraField="description"
 	loadItems={async () =>
 		await ResourceService.listResource({ workspace: $workspaceStore ?? 'NO_W' })}
 >
-	<div slot="submission" class="flex flex-row gap-x-1">
-		<Button target="_blank" color="blue" size="sm" href="/resources?connect_app=undefined">
-			Connect an API
-		</Button>
+	<div slot="submission" class="flex flex-row gap-x-1 mr-2">
 		<Button
+			target="_blank"
 			variant="border"
 			color="blue"
 			size="sm"
-			on:click={() => {
-				resourceEditor.initNew()
-			}}
+			href="/resources?connect_app=undefined"
 		>
-			New custom resource
+			Connect an API
 		</Button>
 	</div>
 </ItemPicker>
@@ -196,17 +195,14 @@ async function loadScripts() {
 <ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
-<div class="flex flex-row justify-between items-center overflow-hidden w-full">
+<div class="flex flex-row justify-between items-center overflow-hidden w-full px-1">
 	<div class="flex flex-row divide-x items-center">
 		<div class="mx-2">
-			<span
-				title={validCode
-					? 'last signature parsing was sucessful'
-					: 'last signature parsing was succesful'}
-				class="relative inline-flex rounded-full h-2 w-2 {validCode
-					? 'bg-green-500/80'
-					: 'bg-red-500'}"
-			/>
+			{#if validCode}
+				<Badge color="green">Inputs</Badge>
+			{:else}
+				<Badge color="red">Inputs</Badge>
+			{/if}
 		</div>
 		<div>
 			<Button
@@ -218,7 +214,7 @@ async function loadScripts() {
 				startIcon={{ icon: faDollarSign }}
 				{iconOnly}
 			>
-				+Contextual Variable
+				+Context Var
 			</Button>
 		</div>
 		<div>
@@ -256,9 +252,9 @@ async function loadScripts() {
 				color="light"
 				on:click={scriptPicker.openDrawer}
 				{iconOnly}
-				startIcon={{ icon: faCode }}
+				startIcon={{ icon: faEye }}
 			>
-				View Script
+				Script
 			</Button>
 		</div>
 
@@ -272,13 +268,13 @@ async function loadScripts() {
 				{iconOnly}
 				startIcon={{ icon: faRotateLeft }}
 			>
-				Reset content
+				Reset
 			</Button>
 		</div>
 	</div>
-	<div>
+	<div class="py-1">
 		<Button
-			btnClasses="ml-1 !font-medium"
+			btnClasses="!font-medium"
 			size="xs"
 			spacingSize="md"
 			color="light"
@@ -286,9 +282,9 @@ async function loadScripts() {
 			startIcon={{ icon: faRotate }}
 		>
 			{#if !iconOnly}
-				Reload assistants
+				Assistant
 			{/if}
-			<span class="ml-1">
+			<span class="ml-1 -my-1">
 				{#if lang == 'deno'}
 					(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
 				{:else if lang == 'go'}

package/components/EditorBar.svelte.d.ts

@@ -19,9 +19,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type EditorBarProps = typeof __propDef.props;
-export declare type EditorBarEvents = typeof __propDef.events;
-export declare type EditorBarSlots = typeof __propDef.slots;
+export type EditorBarProps = typeof __propDef.props;
+export type EditorBarEvents = typeof __propDef.events;
+export type EditorBarSlots = typeof __propDef.slots;
 export default class EditorBar extends SvelteComponentTyped<EditorBarProps, EditorBarEvents, EditorBarSlots> {
 }
 export {};

package/components/FieldHeader.svelte

@@ -7,16 +7,17 @@ export let required = false;
 export let itemsType = undefined;
 </script>
 
-<div>
+<div class="inline-flex flex-row items-center">
 	<span class="font-semibold">
 		{label}
 	</span>
-	<span class="text-sm italic text-indigo-800">
+	<Required {required} class="!ml-0" />
+
+	<span class="text-sm italic ml-1 text-indigo-800">
 		({type ?? 'any'}{contentEncoding && contentEncoding != ''
 			? `, encoding: ${contentEncoding}`
 			: ''}{format && format != '' ? `, format: ${format}` : ''}{itemsType?.type
 			? ` of ${itemsType?.type}s`
 			: ''})</span
 	>
-	<Required {required} class="!ml-0" />
 </div>

package/components/FieldHeader.svelte.d.ts

@@ -16,9 +16,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FieldHeaderProps = typeof __propDef.props;
-export declare type FieldHeaderEvents = typeof __propDef.events;
-export declare type FieldHeaderSlots = typeof __propDef.slots;
+export type FieldHeaderProps = typeof __propDef.props;
+export type FieldHeaderEvents = typeof __propDef.events;
+export type FieldHeaderSlots = typeof __propDef.slots;
 export default class FieldHeader extends SvelteComponentTyped<FieldHeaderProps, FieldHeaderEvents, FieldHeaderSlots> {
 }
 export {};

package/components/FlowBuilder.svelte

@@ -3,14 +3,15 @@ import { page } from '$app/stores';
 import { FlowService, ScheduleService } from '../gen';
 import { workspaceStore } from '../stores';
 import { encodeState, formatCron, loadHubScripts, sendUserToast, setQueryWithoutLoad } from '../utils';
-import { faGlobe, faPen } from '@fortawesome/free-solid-svg-icons';
-import { onMount, setContext } from 'svelte';
+import { faEye, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
+import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
-import { Button } from './common';
+import { Button, Drawer, DrawerContent } from './common';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
 import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { OFFSET } from './CronInput.svelte';
+import FlowGraphViewer from './FlowGraphViewer.svelte';
 import FlowEditor from './flows/FlowEditor.svelte';
 import { flowStateStore } from './flows/flowState';
 import { flowStore } from './flows/flowStore';
@@ -21,6 +22,7 @@ import { cleanInputs } from './flows/utils';
 export let initialPath = '';
 export let selectedId;
 export let initialArgs = {};
+export let loading = false;
 let pathError = '';
 async function createSchedule(path) {
     const { cron, args, enabled } = $scheduleStore;
@@ -119,7 +121,7 @@ function setUrl() {
         selectedId: $selectedIdStore
     })), 500);
 }
-const selectedIdStore = writable('settings');
+const selectedIdStore = writable(selectedId);
 const scheduleStore = writable({ args: {}, cron: '', enabled: false });
 const previewArgsStore = writable(initialArgs);
 function select(selectedId) {
@@ -144,22 +146,37 @@ async function loadSchedule() {
         });
     });
 }
-onMount(() => {
-    selectedId && select(selectedId);
-});
+$: selectedId && select(selectedId);
 $: initialPath && $workspaceStore && loadSchedule();
 loadHubScripts();
+let flowViewer;
 </script>
 
 <UnsavedConfirmationModal />
 
+<Drawer bind:this={flowViewer} size="1200px">
+	<DrawerContent title="View Graph" on:close={flowViewer.closeDrawer} noPadding>
+		<FlowGraphViewer flow={$flowStore} overflowAuto />
+	</DrawerContent>
+</Drawer>
+
 <div class="flex flex-col flex-1 h-screen">
 	<!-- Nav between steps-->
 	<div
-		class="justify-between flex flex-row w-full py-2 px-4 space-x-4 overflow-x-auto scrollbar-hidden"
+		class="justify-between flex flex-row w-full items-center pl-2.5 pr-6  space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
 	>
-		<div class="flex flex-row space-x-2">
+		<div class="flex flex-row">
 			<FlowImportExportMenu />
+			<Button
+				btnClasses="inline-flex"
+				startIcon={{ icon: faEye }}
+				variant="border"
+				color="light"
+				size="sm"
+				on:click={flowViewer.openDrawer}
+			>
+				View Graph
+			</Button>
 		</div>
 		<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
 			<Button
@@ -173,7 +190,7 @@ loadHubScripts();
 					document.getElementById('path')?.focus()
 				}}
 			>
-				{$flowStore.path}
+				{$flowStore.path && $flowStore.path != '' ? $flowStore.path : 'Choose a path'}
 			</Button>
 			<Button
 				startIcon={{ icon: faPen }}
@@ -190,16 +207,22 @@ loadHubScripts();
 				</div>
 			</Button>
 		</div>
-		<div class="flex flex-row-reverse ml-2 space-x-reverse space-x-2">
-			<Button disabled={pathError != ''} size="sm" on:click={saveFlow}>Save</Button>
+		<div class="flex flex-row space-x-2">
 			<FlowPreviewButtons />
+			<div class="center-center">
+				<Button
+					disabled={pathError != ''}
+					startIcon={{ icon: faSave }}
+					size="sm"
+					on:click={saveFlow}>Save</Button
+				>
+			</div>
 		</div>
 	</div>
 
 	<!-- metadata -->
-
 	{#if $flowStateStore}
-		<FlowEditor {initialPath} />
+		<FlowEditor {initialPath} {loading} />
 	{:else}
 		<CenteredPage>Loading...</CenteredPage>
 	{/if}

package/components/FlowBuilder.svelte.d.ts

@@ -4,15 +4,16 @@ declare const __propDef: {
         initialPath?: string | undefined;
         selectedId: string | undefined;
         initialArgs?: Record<string, any> | undefined;
+        loading?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FlowBuilderProps = typeof __propDef.props;
-export declare type FlowBuilderEvents = typeof __propDef.events;
-export declare type FlowBuilderSlots = typeof __propDef.slots;
+export type FlowBuilderProps = typeof __propDef.props;
+export type FlowBuilderEvents = typeof __propDef.events;
+export type FlowBuilderSlots = typeof __propDef.slots;
 export default class FlowBuilder extends SvelteComponentTyped<FlowBuilderProps, FlowBuilderEvents, FlowBuilderSlots> {
 }
 export {};

package/components/FlowGraphViewer.svelte

@@ -0,0 +1,76 @@
+<script>import { FlowGraph } from './graph';
+import HighlightCode from './HighlightCode.svelte';
+import InputTransformsViewer from './InputTransformsViewer.svelte';
+import IconedPath from './IconedPath.svelte';
+import { scriptPathToHref } from '../utils';
+export let flow;
+export let overflowAuto = false;
+let stepDetail = undefined;
+</script>
+
+<div class="flex flex-col h-full">
+	<div class="h-full w-full border border-gray-700" class:overflow-auto={overflowAuto}>
+		<FlowGraph
+			modules={flow?.value?.modules}
+			failureModule={flow?.value?.failure_module}
+			on:click={(e) => (stepDetail = e.detail)}
+		/>
+	</div>
+	<div class="w-full border-l border-r border-b border-gray-700 min-h-[150px] p-2">
+		{#if stepDetail == undefined}
+			<span class="font-black text-lg w-full my-4">
+				<span>Click on a step to see its details</span>
+			</span>
+		{:else}
+			<div class="font-black text-lg w-full mb-2 "
+				>Step {stepDetail.id ?? ''}<span class="ml-2 font-normal">{stepDetail.summary || ''}</span
+				></div
+			>
+			{#if stepDetail.value.type == 'identity'}
+				<div> An identity step return as output its input </div>
+			{:else if stepDetail.value.type == 'rawscript'}
+				<div class="text-2xs mb-4">
+					<h3>Step Inputs</h3>
+					<InputTransformsViewer
+						inputTransforms={stepDetail?.value?.input_transforms ??
+							stepDetail?.input_transforms ??
+							{}}
+					/>
+				</div>
+
+				<h3>Code</h3>
+				<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
+			{:else if stepDetail.value.type == 'script'}
+				<div class="mb-4">
+					<a
+						rel="noreferrer"
+						target="_blank"
+						href={scriptPathToHref(stepDetail?.value?.path ?? '')}
+						class=""
+					>
+						<IconedPath path={stepDetail?.value?.path ?? ''} />
+					</a>
+				</div>
+				<div class="text-2xs mb-4">
+					<h3>Step Inputs</h3>
+					<InputTransformsViewer
+						inputTransforms={stepDetail?.value?.input_transforms ??
+							stepDetail?.input_transforms ??
+							{}}
+					/>
+				</div>
+				{#if stepDetail.value.path.startsWith('hub/')}
+					<div class="mt-6">
+						<h3>Code</h3>
+						<iframe
+							class="w-full h-full  text-sm"
+							title="embedded script from hub"
+							frameborder="0"
+							src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
+						/>
+					</div>
+				{/if}
+			{/if}
+		{/if}
+	</div>
+</div>

package/components/FlowGraphViewer.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowValue } from '../gen';
+declare const __propDef: {
+    props: {
+        flow: {
+            summary: string;
+            description?: string;
+            value: FlowValue;
+            schema?: any;
+        };
+        overflowAuto?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowGraphViewerProps = typeof __propDef.props;
+export type FlowGraphViewerEvents = typeof __propDef.events;
+export type FlowGraphViewerSlots = typeof __propDef.slots;
+export default class FlowGraphViewer extends SvelteComponentTyped<FlowGraphViewerProps, FlowGraphViewerEvents, FlowGraphViewerSlots> {
+}
+export {};

package/components/FlowJobResult.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowJobResultProps = typeof __propDef.props;
-export declare type FlowJobResultEvents = typeof __propDef.events;
-export declare type FlowJobResultSlots = typeof __propDef.slots;
+export type FlowJobResultProps = typeof __propDef.props;
+export type FlowJobResultEvents = typeof __propDef.events;
+export type FlowJobResultSlots = typeof __propDef.slots;
 export default class FlowJobResult extends SvelteComponentTyped<FlowJobResultProps, FlowJobResultEvents, FlowJobResultSlots> {
 }
 export {};

package/components/FlowMetadata.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowMetadataProps = typeof __propDef.props;
-export declare type FlowMetadataEvents = typeof __propDef.events;
-export declare type FlowMetadataSlots = typeof __propDef.slots;
+export type FlowMetadataProps = typeof __propDef.props;
+export type FlowMetadataEvents = typeof __propDef.events;
+export type FlowMetadataSlots = typeof __propDef.slots;
 export default class FlowMetadata extends SvelteComponentTyped<FlowMetadataProps, FlowMetadataEvents, FlowMetadataSlots> {
 }
 export {};

package/components/FlowPreviewContent.svelte

@@ -1,7 +1,7 @@
 <script>import { Job, JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { faClose, faPlay, faRefresh } from '@fortawesome/free-solid-svg-icons';
-import { Button } from './common';
+import { Button, Kbd } from './common';
 import { createEventDispatcher, getContext } from 'svelte';
 import Icon from 'svelte-awesome';
 import { dfs, flowStore } from './flows/flowStore';
@@ -89,12 +89,12 @@ function onJobsLoaded(newJob) {
 <svelte:window on:keydown={onKeyDown} />
 
 <div class="flex divide-y flex-col space-y-2 h-screen bg-white px-6 py-2 w-full">
-	<div class="flex flex-row justify-between w-full items-center gap-x-1">
+	<div class="flex flex-row justify-between w-full items-center gap-x-2">
 		<Button
 			variant="border"
 			size="lg"
 			color="dark"
-			btnClasses="!p-0 !w-8 !h-8"
+			btnClasses="!p-0 !w-16 !h-full"
 			on:click={() => {
 				dispatch('close')
 			}}
@@ -102,80 +102,70 @@ function onJobsLoaded(newJob) {
 			<Icon data={faClose} />
 		</Button>
 
-		<div class="flex flex-row justify-center items-center">
-			<div class="flex justify-center p-2 w-8 h-8 bg-blue-200 rounded-lg mr-2 ">
-				<Icon data={faPlay} scale={1} class="text-blue-500" />
-			</div>
-
-			<h3
-				class="text-lg leading-6 font-bold text-gray-900 inline-flex flex-row justify-between w-full"
+		{#if isRunning}
+			<Button
+				disabled={!isValid}
+				color="red"
+				on:click={async () => {
+					isRunning = false
+					try {
+						jobId &&
+							(await JobService.cancelQueuedJob({
+								workspace: $workspaceStore ?? '',
+								id: jobId,
+								requestBody: {}
+							}))
+					} catch {}
+					jobId = undefined
+				}}
+				size="md"
+				btnClasses="w-full"
 			>
-				<div>
-					Test {previewMode === 'upTo'
-						? `up to step ${$selectedId.split('-').join(',')}`
-						: ' whole flow'}
-				</div>
-			</h3>
-		</div>
+				Cancel
+			</Button>
+		{:else}
+			<Button
+				variant="contained"
+				startIcon={{ icon: isRunning ? faRefresh : faPlay }}
+				color="blue"
+				size="sm"
+				btnClasses="w-full"
+				disabled={!isValid}
+				on:click={() => runPreview($previewArgs)}
+			>
+				Test flow <Kbd class="ml-2">Ctrl+Enter</Kbd>
+			</Button>
+		{/if}
 		<Button
-			btnClasses="ml-2"
+			btnClasses="h-full"
 			size="sm"
 			variant="border"
 			on:click={() => {
 				capturePayload.openDrawer()
-			}}>Fill test args from payload</Button
+			}}>Fill test args from a request</Button
 		>
 	</div>
-	<div class="grow pb-8 max-h-1/2 overflow-auto">
+	<FlowProgressBar {job} bind:reset={jobProgressReset} />
+
+	<div class="overflow-y-auto grow flex-col flex divide-y divide-gray-600 ">
 		<SchemaForm
-			class="h-full pt-4"
+			compact
+			class="py-4"
 			schema={$flowStore.schema}
 			bind:isValid
 			bind:args={$previewArgs}
 		/>
-	</div>
-	{#if isRunning}
-		<Button
-			disabled={!isValid}
-			color="red"
-			on:click={async () => {
-				isRunning = false
-				try {
-					jobId &&
-						(await JobService.cancelQueuedJob({
-							workspace: $workspaceStore ?? '',
-							id: jobId,
-							requestBody: {}
-						}))
-				} catch {}
-				jobId = undefined
-			}}
-			size="md"
-		>
-			Cancel
-		</Button>
-	{:else}
-		<Button
-			variant="contained"
-			endIcon={{ icon: isRunning ? faRefresh : faPlay }}
-			color="blue"
-			btnClasses="w-full"
-			disabled={!isValid}
-			on:click={() => runPreview($previewArgs)}
-		>
-			Test flow (Ctrl/Cmd + Enter)
-		</Button>
-	{/if}
-
-	<FlowProgressBar {job} bind:reset={jobProgressReset} class="py-4" />
 
-	<div class="h-full overflow-y-auto mb-16 pt-4 grow">
-		{#if jobId}
-			<FlowStatusViewer
-				bind:flowState={$flowStateStore}
-				{jobId}
-				on:jobsLoaded={({ detail }) => onJobsLoaded(detail)}
-			/>
-		{/if}
+		<div class="h-full pt-4 grow">
+			{#if jobId}
+				<FlowStatusViewer
+					bind:flowState={$flowStateStore}
+					{jobId}
+					on:jobsLoaded={({ detail }) => onJobsLoaded(detail)}
+				/>
+			{:else}
+				<div class="italic text-gray-500 h-full grow"> Flow status will be displayed here </div>
+			{/if}
+		</div>
 	</div>
 </div>

package/components/FlowPreviewContent.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowPreviewContentProps = typeof __propDef.props;
-export declare type FlowPreviewContentEvents = typeof __propDef.events;
-export declare type FlowPreviewContentSlots = typeof __propDef.slots;
+export type FlowPreviewContentProps = typeof __propDef.props;
+export type FlowPreviewContentEvents = typeof __propDef.events;
+export type FlowPreviewContentSlots = typeof __propDef.slots;
 export default class FlowPreviewContent extends SvelteComponentTyped<FlowPreviewContentProps, FlowPreviewContentEvents, FlowPreviewContentSlots> {
     get runPreview(): (args: Record<string, any>) => Promise<void>;
 }