windmill-components 1.122.0 → 1.138.2

package/package/components/LoginPageHeader.svelte

@@ -0,0 +1,16 @@
+<script>
+	import Uptodate from './Uptodate.svelte'
+	import Version from './Version.svelte'
+	import DarkModeToggle from './sidebar/DarkModeToggle.svelte'
+</script>
+
+<div class="absolute top-0 right-0 text-2xs text-gray-800 italic px-3 py-1">
+	<div class="flex flex-row gap-2">
+		<DarkModeToggle forcedDarkMode={false} />
+
+		<div class="font-mono flex-col flex p-2 justify-center">
+			<Version />
+			<Uptodate />
+		</div>
+	</div>
+</div>

package/package/components/LoginPageHeader.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  LoginPageHeaderProps */
+/** @typedef {typeof __propDef.events}  LoginPageHeaderEvents */
+/** @typedef {typeof __propDef.slots}  LoginPageHeaderSlots */
+export default class LoginPageHeader extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LoginPageHeaderProps = typeof __propDef.props;
+export type LoginPageHeaderEvents = typeof __propDef.events;
+export type LoginPageHeaderSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/Modal.svelte

@@ -33,7 +33,7 @@ function handleKeyUp(event) {
 			class="fixed right-0 top-0 flex flex-col w-3/4 sm:w-2/3 lg:w-1/2 h-screen border border-gray-300 shadow-xl"
 		>
 			{#if open}
-				<div class="flex flex-row justify-between p-2 bg-white border-b border-gray-200">
+				<div class="flex flex-row justify-between p-2 bg-surface border-b border-gray-200">
 					<button
 						on:click={() => {
 							open = false
@@ -61,7 +61,7 @@ function handleKeyUp(event) {
 				<div class="flex flex-col bg-gray-50 pt-3 px-6 grow overflow-y-auto">
 					<slot name="content" />
 				</div>
-				<div class="flex flex-col bg-white border-gray-200 p-2">
+				<div class="flex flex-col bg-surface border-gray-200 p-2">
 					<div class="flex flex-row justify-between p-2">
 						<button
 							on:click={() => {

package/package/components/ModulePreview.svelte

@@ -1,4 +1,4 @@
-<script>import { ScriptService } from '../gen';
+<script>import { ScriptService, Script } from '../gen';
 import { workspaceStore } from '../stores';
 import { getModifierKey } from '../utils';
 import { getScriptByPath } from '../scripts';
@@ -15,6 +15,9 @@ import { evalValue } from './flows/utils';
 export let mod;
 export let schema;
 export let pickableProperties;
+export let lang;
+export let editor;
+export let diffEditor;
 const { flowStore, flowStateStore, testStepStore } = getContext('FlowEditorContext');
 // Test
 let testJobLoader;
@@ -32,13 +35,13 @@ export async function runTest(args) {
     const val = mod.value;
     // let jobId: string | undefined = undefined
     if (val.type == 'rawscript') {
-        await testJobLoader?.runPreview(val.path, val.content, val.language, args, val.tag);
+        await testJobLoader?.runPreview(val.path, val.content, val.language, args, $flowStore?.tag ?? val.tag);
     }
     else if (val.type == 'script') {
         const script = val.hash
             ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash: val.hash })
             : await getScriptByPath(val.path);
-        await testJobLoader?.runPreview(val.path, script.content, script.language, args, script.tag);
+        await testJobLoader?.runPreview(val.path, script.content, script.language, args, $flowStore?.tag ?? script.tag);
     }
     else {
         throw Error('not testable module type');
@@ -95,10 +98,17 @@ function jobDone() {
 					isLoading={testIsLoading}
 				/>
 			</Pane>
-			<Pane size={50} minSize={10} class="text-sm text-gray-600">
+			<Pane size={50} minSize={10} class="text-sm text-tertiary">
 				{#if testJob != undefined && 'result' in testJob && testJob.result != undefined}
 					<pre class="overflow-x-auto break-words relative h-full px-2">
-						<DisplayResult result={testJob.result} />
+						<DisplayResult
+							workspaceId={testJob?.workspace_id}
+							jobId={testJob?.id}
+							result={testJob.result}
+							{editor}
+							{diffEditor}
+							{lang}
+						/>
 					</pre>
 				{:else}
 					<div class="p-2">

package/package/components/ModulePreview.svelte.d.ts

@@ -1,12 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import { type FlowModule } from '../gen';
+import { type FlowModule, Script } from '../gen';
 import type { PickableProperties } from './flows/previousResults';
+import type DiffEditor from './DiffEditor.svelte';
+import type Editor from './Editor.svelte';
 declare const __propDef: {
     props: {
         mod: FlowModule;
         schema: Schema;
         pickableProperties: PickableProperties | undefined;
+        lang: Script.language;
+        editor: Editor;
+        diffEditor: DiffEditor;
         runTestWithStepArgs?: (() => void) | undefined;
         runTest?: ((args: any) => Promise<void>) | undefined;
     };

package/package/components/ModuleStatus.svelte

@@ -12,12 +12,12 @@ export let scheduled_for;
 		Waiting to be resumed by resume events such as approvals
 	</span>
 {:else if type == FlowStatusModule.type.WAITING_FOR_PRIOR_STEPS}
-	<span class="italic text-gray-600">
+	<span class="italic text-tertiary">
 		<Icon data={faHourglassHalf} class="mr-2" />
 		Waiting for prior steps to complete
 	</span>
 {:else if type == FlowStatusModule.type.WAITING_FOR_EXECUTOR}
-	<span class="italic text-gray-600">
+	<span class="italic text-tertiary">
 		<Icon data={faHourglassHalf} class="mr-2" />
 		{#if scheduled_for}
 			Job has been {scheduled_for} and will be executed after that time

package/package/components/MoveDrawer.svelte

@@ -86,9 +86,9 @@ async function updatePath() {
 <Drawer bind:this={drawer}>
 	<DrawerContent title="Move/Rename {initialPath}" on:close={drawer.closeDrawer}>
 		{#if !own}
-			<Alert type="warning" title="Not owner"
-				>Since you do not own this item, you cannot move this item (you can however fork it)</Alert
-			>
+			<Alert type="warning" title="Not owner">
+				Since you do not own this item, you cannot move this item (you can however fork it)
+			</Alert>
 		{/if}
 		<h2 class="border-b pb-1 mt-2 mb-4">Summary</h2>
 		<input

package/package/components/ObjectResourceInput.svelte

@@ -1,6 +1,7 @@
 <script>import ResourcePicker from './ResourcePicker.svelte';
 export let format;
 export let value;
+export let disablePortal = false;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
@@ -26,6 +27,7 @@ $: value && valueToPath();
 
 <div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
 	<ResourcePicker
+		{disablePortal}
 		on:change={(e) => {
 			path = e.detail
 			resourceToValue()

package/package/components/ObjectResourceInput.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         format: string;
         value: any;
+        disablePortal?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/Password.svelte

@@ -3,6 +3,7 @@ import { onMount } from 'svelte';
 export let password;
 export let placeholder = '******';
 export let disabled = false;
+export let required = false;
 onMount(() => {
     const passwordToggle = document.querySelector('.js-password-toggle');
     if (passwordToggle) {
@@ -23,18 +24,19 @@ onMount(() => {
         throw Error('Password component is undefined');
     }
 });
+$: red = required && (password == '' || password == undefined);
 </script>
 
 <div class="relative w-full">
 	<div class="absolute inset-y-0 right-0 flex items-center px-2">
-		<input class="hidden js-password-toggle" id="toggle" type="checkbox" />
+		<input class="!hidden js-password-toggle" id="toggle" type="checkbox" />
 		<label
-			class="bg-gray-300 hover:bg-gray-400 rounded px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label"
+			class="bg-gray-300 hover:bg-gray-400 rounded px-2 py-1 text-sm text-tertiary font-mono cursor-pointer js-password-label"
 			for="toggle">show</label
 		>
 	</div>
 	<input
-		class="block w-full py-2 px-2 border rounded-md border-gray-300 shadow-sm; focus:ring focus:ring-indigo-100 focus:ring-opacity-50 text-sm js-password h-12"
+		class="block w-full py-2 px-2 {red ? '!border-red-500' : ''} text-sm js-password h-12"
 		id="password"
 		type="password"
 		bind:value={password}
@@ -43,3 +45,6 @@ onMount(() => {
 		{disabled}
 	/>
 </div>
+{#if red}
+	<div class="text-red-600 text-2xs grow">This field is required</div>
+{/if}

package/package/components/Password.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         password: string;
         placeholder?: string | undefined;
         disabled?: boolean | undefined;
+        required?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/Path.svelte

@@ -19,12 +19,14 @@ import Required from './Required.svelte';
 import Tooltip from './Tooltip.svelte';
 import { Folder, User } from 'lucide-svelte';
 let meta = undefined;
+export let fullNamePlaceholder = undefined;
 export let namePlaceholder = '';
 export let initialPath;
 export let path = '';
 export let error = '';
 export let disabled = false;
 export let checkInitialPathExistence = false;
+export let autofocus = true;
 export let kind;
 let inputP = undefined;
 const dispatch = createEventDispatcher();
@@ -53,12 +55,18 @@ function handleKeyUp(event) {
         dispatch('enter');
     }
 }
+export function setName(x) {
+    if (meta) {
+        meta.name = x;
+        onMetaChange();
+    }
+}
 export async function reset() {
     if (path == '' || path == 'u//') {
         if ($lastMetaUsed == undefined || $lastMetaUsed.owner != $userStore?.username) {
             meta = {
                 ownerKind: 'user',
-                name: random_adj() + '_' + namePlaceholder,
+                name: fullNamePlaceholder ?? random_adj() + '_' + namePlaceholder,
                 owner: ''
             };
             if ($userStore?.username?.includes('@')) {
@@ -69,13 +77,16 @@ export async function reset() {
             }
         }
         else {
-            meta = { ...$lastMetaUsed, name: random_adj() + '_' + namePlaceholder };
+            meta = {
+                ...$lastMetaUsed,
+                name: fullNamePlaceholder ?? random_adj() + '_' + namePlaceholder
+            };
         }
         let newMeta = { ...meta };
         while (await pathExists(metaToPath(newMeta), kind)) {
             disabled = true;
             error = 'finding an available name...';
-            newMeta.name = random_adj() + '_' + namePlaceholder;
+            newMeta.name = random_adj() + '_' + fullNamePlaceholder ?? namePlaceholder;
         }
         error = '';
         disabled = false;
@@ -186,6 +197,7 @@ $: {
 function initPath() {
     if (path != undefined && path != '') {
         meta = pathToMeta(path);
+        onMetaChange();
         return;
     }
     if (initialPath == undefined || initialPath == '') {
@@ -248,12 +260,12 @@ async function addFolder() {
 </Drawer>
 
 <div>
-	<div class="flex flex-col sm:flex-row items-center gap-2 sm:gap-4 pb-0 mb-1">
+	<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 pb-0 mb-1">
 		{#if meta != undefined}
-			<div class="flex gap-4 shrink">
+			<div class="flex gap-x-4 shrink">
 				<!-- svelte-ignore a11y-label-has-associated-control -->
 				<label class="block">
-					<span class="text-gray-700 text-sm whitespace-nowrap">&nbsp;</span>
+					<span class="text-secondary text-sm whitespace-nowrap">&nbsp;</span>
 
 					<ToggleButtonGroup
 						class="mt-0.5"
@@ -262,7 +274,6 @@ async function addFolder() {
 							const kind = e.detail
 							if (meta) {
 								if (kind === 'folder') {
-									console.log($userStore?.folders)
 									meta.owner = folders?.[0]?.name ?? ''
 								} else if (kind === 'group') {
 									meta.owner = 'all'
@@ -295,7 +306,7 @@ async function addFolder() {
 				</label>
 				{#if meta.ownerKind === 'user'}
 					<label class="block shrink min-w-0">
-						<span class="text-gray-700 text-sm">User</span>
+						<span class="text-secondary text-sm">User</span>
 						<input
 							class="!w-36"
 							type="text"
@@ -306,13 +317,15 @@ async function addFolder() {
 					</label>
 				{:else if meta.ownerKind === 'folder'}
 					<label class="block grow w-48">
-						<span class="text-gray-700 text-sm"
-							>Folder <Tooltip
+						<span class="text-secondary text-sm">
+							Folder
+							<Tooltip
 								documentationLink="https://www.windmill.dev/docs/core_concepts/groups_and_folders"
-								>Read and write permissions are given to groups and users at the folder level and
-								shared by all items inside the folder.</Tooltip
-							></span
-						>
+							>
+								Read and write permissions are given to groups and users at the folder level and
+								shared by all items inside the folder.
+							</Tooltip>
+						</span>
 
 						<div class="flex flex-row items-center gap-1 w-full">
 							<select class="grow w-full" {disabled} bind:value={meta.owner}>
@@ -350,7 +363,7 @@ async function addFolder() {
 				{/if}
 			</div>
 			<label class="block grow w-full max-w-md">
-				<span class="text-gray-700 text-sm">
+				<span class="text-secondary text-sm">
 					Name
 					<Required required={true} />
 				</span>
@@ -359,7 +372,7 @@ async function addFolder() {
 					{disabled}
 					type="text"
 					id="path"
-					autofocus
+					{autofocus}
 					bind:this={inputP}
 					autocomplete="off"
 					on:keyup={handleKeyUp}
@@ -377,7 +390,7 @@ async function addFolder() {
 		<div class="flex justify-start w-full">
 			<Badge
 				color="gray"
-				class="center-center !bg-gray-300 !text-gray-600 !w-[70px] !h-[24px] rounded-r-none"
+				class="center-center !bg-surface-secondary !text-tertiary !w-[70px] !h-[24px] rounded-r-none border"
 			>
 				Full path
 			</Badge>
@@ -393,7 +406,7 @@ async function addFolder() {
 			/>
 			<!-- <span class="font-mono text-sm break-all">{path}</span> -->
 		</div>
-		<div class="text-red-600 text-2xs">{error}</div>
+		<div class="text-red-600 dark:text-red-400 text-2xs">{error}</div>
 	</div>
 </div>
 

package/package/components/Path.svelte.d.ts

@@ -1,14 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        fullNamePlaceholder?: string | undefined;
         namePlaceholder?: string | undefined;
         initialPath: string;
         path?: string | undefined;
         error?: string | undefined;
         disabled?: boolean | undefined;
         checkInitialPathExistence?: boolean | undefined;
+        autofocus?: boolean | undefined;
         kind: "flow" | "script" | "resource" | "app" | "raw_app" | "schedule" | "variable";
         focus?: (() => void) | undefined;
+        setName?: ((x: string) => void) | undefined;
         reset?: (() => Promise<void>) | undefined;
     };
     events: {
@@ -23,6 +26,7 @@ export type PathEvents = typeof __propDef.events;
 export type PathSlots = typeof __propDef.slots;
 export default class Path extends SvelteComponentTyped<PathProps, PathEvents, PathSlots> {
     get focus(): () => void;
+    get setName(): (x: string) => void;
     get reset(): () => Promise<void>;
 }
 export {};

package/package/components/RadioButton.svelte

@@ -14,9 +14,9 @@ const dispatch = createEventDispatcher();
 	<div class="flex flex-row flex-wrap gap-2 items-center mb-2 w-full">
 		{#each options as [label, val]}
 			<label
-				class="text-center text-sm border border-gray-300 h-full rounded-sm cursor-pointer p-2 
-				grow whitespace-nowrap duration-200 hover:border-gray-600 hover:bg-gray-100
-				{val === value ? '!bg-blue-50 !border-blue-500' : ''} {inputClass}"
+				class="text-center text-sm border border-gray-300 h-full rounded-sm cursor-pointer p-2
+				grow whitespace-nowrap duration-200 hover:border-gray-600 hover:bg-surface-hover
+				{val === value ? '!bg-blue-50 !border-blue-500 dark:!bg-frost-900' : ''} {inputClass}"
 			>
 				<input
 					{disabled}

package/package/components/Range.svelte.d.ts

@@ -32,9 +32,6 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    /** @typedef {typeof __propDef.props}  RangeProps */
-    /** @typedef {typeof __propDef.events}  RangeEvents */
-    /** @typedef {typeof __propDef.slots}  RangeSlots */
     slots: {};
 };
 export {};

package/package/components/Required.svelte

@@ -3,9 +3,9 @@ export let detail = '';
 </script>
 
 {#if required}
-	<span class="text-red-700 dark:text-red-400 font-normal {$$props.class}">*</span>
+	<span class="text-red-500 dark:text-red-400 text-sm font-normal {$$props.class}">*</span>
 {:else if detail || detail != ''}
-	<span class="text-sm text-gray-500 ml-2 font-normal {$$props.class}"
+	<span class="text-sm text-tertiary ml-2 font-normal {$$props.class}"
 		>({detail != '' ? `${detail}` : ''})</span
 	>
 {/if}

package/package/components/ResourceEditor.svelte

@@ -12,6 +12,7 @@ import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import Toggle from './Toggle.svelte';
 import { sendUserToast } from '../toast';
+import TestConnection from './TestConnection.svelte';
 let path = '';
 let initialPath = '';
 let resourceToEdit;
@@ -119,13 +120,13 @@ function switchTab(asJson) {
 		on:close={drawer.closeDrawer}
 	>
 		<div>
-			<div class="flex flex-col gap-3 py-3 text-gray-700">
+			<div class="flex flex-col gap-3 py-3">
 				<div>
 					{#if !can_write}
 						<div class="m-2">
-							<Alert type="warning" title="Only read access"
-								>You only have read access to this resource and cannot edit it</Alert
-							>
+							<Alert type="warning" title="Only read access">
+								You only have read access to this resource and cannot edit it
+							</Alert>
 						</div>
 					{/if}
 					<Path
@@ -137,13 +138,13 @@ function switchTab(asJson) {
 					/>
 				</div>
 				<div class="flex w-full justify-between max-w-lg items-center mt-4">
-					<h3>Value</h3>
 					<Toggle
 						on:change={(e) => switchTab(e.detail)}
 						options={{
 							right: 'As JSON'
 						}}
 					/>
+					<TestConnection resource_type={resourceToEdit?.resource_type} {args} />
 				</div>
 				<div class="text-sm">
 					{#if loadingSchema}
@@ -161,10 +162,10 @@ function switchTab(asJson) {
 						<input type="text" disabled value={rawCode} />
 					{:else}
 						{#if !viewJsonSchema}
-							<p class="italic text-gray-500 text-xs mb-4"
-								>No corresponding resource type found in your workspace for {selectedResourceType}.
-								Define the value in JSON directly</p
-							>
+							<p class="italic text-secondary text-xs mb-4">
+								No corresponding resource type found in your workspace for {selectedResourceType}.
+								Define the value in JSON directly
+							</p>
 						{/if}
 
 						{#if !emptyString(jsonError)}<span

package/package/components/ResourcePicker.svelte

@@ -1,17 +1,20 @@
 <script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
 import { faPen, faPlus, faRotateRight } from '@fortawesome/free-solid-svg-icons';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, onMount } from 'svelte';
 import Icon from 'svelte-awesome';
-import Select from 'svelte-select';
+import Select from './apps/svelte-select/lib/index';
 import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 import AppConnect from './AppConnect.svelte';
 import { Button } from './common';
 import ResourceEditor from './ResourceEditor.svelte';
+import DbSchemaExplorer from './DBSchemaExplorer.svelte';
+import DarkModeObserver from './DarkModeObserver.svelte';
 const dispatch = createEventDispatcher();
 export let initialValue = undefined;
 export let value = initialValue;
 export let resourceType = undefined;
+export let disablePortal = false;
 let valueSelect = initialValue || value
     ? {
         value: value ?? initialValue,
@@ -27,6 +30,7 @@ async function loadResources(resourceType) {
         value: x.path,
         label: x.path
     }));
+    // TODO check if this is needed
     if (!nc.find((x) => x.value == value) && (initialValue || value)) {
         nc.push({ value: value ?? initialValue, label: value ?? initialValue });
     }
@@ -40,8 +44,22 @@ $: {
 $: dispatch('change', value);
 let appConnect;
 let resourceEditor;
+let darkMode = false;
+function onThemeChange() {
+    if (document.documentElement.classList.contains('dark')) {
+        darkMode = true;
+    }
+    else {
+        darkMode = false;
+    }
+}
+onMount(() => {
+    onThemeChange();
+});
 </script>
 
+<DarkModeObserver on:change={onThemeChange} />
+
 <AppConnect
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
@@ -65,6 +83,7 @@ let resourceEditor;
 
 <div class="flex flex-row gap-x-1 w-full">
 	<Select
+		portal={!disablePortal}
 		value={valueSelect}
 		on:change={(e) => {
 			value = e.detail.value
@@ -78,8 +97,11 @@ let resourceEditor;
 		class="text-clip grow min-w-0"
 		placeholder="{resourceType ?? 'any'} resource"
 		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-		containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+		containerStyles={darkMode
+			? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+			: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 	/>
+
 	{#if value && value != ''}
 		<Button variant="border" size="xs" on:click={() => resourceEditor?.initEdit?.(value ?? '')}>
 			<Icon scale={0.8} data={faPen} /></Button
@@ -92,17 +114,20 @@ let resourceEditor;
 		size="xs"
 		on:click={() => appConnect?.open?.(resourceType)}
 	>
-		<Icon scale={0.8} data={faPlus} /></Button
-	>
+		<Icon scale={0.8} data={faPlus} />
+	</Button>
 	<Button
 		variant="border"
 		color="light"
 		size="xs"
 		on:click={() => {
 			loadResources(resourceType)
-		}}><Icon scale={0.8} data={faRotateRight} /></Button
+		}}
 	>
+		<Icon scale={0.8} data={faRotateRight} />
+	</Button>
 </div>
+<DbSchemaExplorer {resourceType} resourcePath={value} />
 
 <style>
 	:global(.svelte-select-list) {

package/package/components/ResourcePicker.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         initialValue?: string | undefined;
         value?: string | undefined;
         resourceType?: string | undefined;
+        disablePortal?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/ResultJobLoader.svelte.d.ts

@@ -12,7 +12,7 @@ declare const __propDef: {
         abstractRun?: ((fn: () => Promise<string>) => Promise<string>) | undefined;
         runScriptByPath?: ((path: string | undefined, args: Record<string, any>) => Promise<string>) | undefined;
         runFlowByPath?: ((path: string | undefined, args: Record<string, any>) => Promise<string>) | undefined;
-        runPreview?: ((path: string | undefined, code: string, lang: 'deno' | 'go' | 'python3' | 'bash', args: Record<string, any>, tag: string | undefined) => Promise<string>) | undefined;
+        runPreview?: ((path: string | undefined, code: string, lang: 'deno' | 'go' | 'python3' | 'bash' | 'nativets', args: Record<string, any>, tag: string | undefined) => Promise<string>) | undefined;
         cancelJob?: (() => Promise<void>) | undefined;
         clearCurrentJob?: (() => Promise<void>) | undefined;
         watchJob?: ((testId: string) => Promise<void>) | undefined;
@@ -33,7 +33,7 @@ export default class ResultJobLoader extends SvelteComponentTyped<ResultJobLoade
     get abstractRun(): (fn: () => Promise<string>) => Promise<string>;
     get runScriptByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get runFlowByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
-    get runPreview(): (path: string | undefined, code: string, lang: "deno" | "python3" | "go" | "bash", args: Record<string, any>, tag: string | undefined) => Promise<string>;
+    get runPreview(): (path: string | undefined, code: string, lang: "deno" | "python3" | "go" | "bash" | "nativets", args: Record<string, any>, tag: string | undefined) => Promise<string>;
     get cancelJob(): () => Promise<void>;
     get clearCurrentJob(): () => Promise<void>;
     get watchJob(): (testId: string) => Promise<void>;