windmill-components 1.22.0 → 1.28.2

package/components/InputTransformForm.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+import type { InputTransform } from '../gen';
+declare const __propDef: {
+    props: {
+        schema: Schema;
+        arg: InputTransform | any;
+        argName: string;
+        extraLib?: string | undefined;
+        inputCheck: {
+            [id: string]: boolean;
+        };
+        i?: number | undefined;
+        pickableProperties?: Object | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InputTransformFormProps = typeof __propDef.props;
+export declare type InputTransformFormEvents = typeof __propDef.events;
+export declare type InputTransformFormSlots = typeof __propDef.slots;
+export default class InputTransformForm extends SvelteComponentTyped<InputTransformFormProps, InputTransformFormEvents, InputTransformFormSlots> {
+}
+export {};

package/components/InputTransformsViewer.svelte

@@ -0,0 +1,19 @@
+<script>import { Highlight } from 'svelte-highlight';
+import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import typescript from 'svelte-highlight/languages/typescript';
+export let inputTransforms;
+</script>
+
+<ul class="mb-1">
+	{#each Object.entries(inputTransforms) as [key, val]}
+		<li>
+			<span class="font-black text-gray-700">{key}</span>: {#if val.type == 'static'}<ObjectViewer
+					json={val.value}
+				/>{:else}
+				<span class="inline-block inline-highlight">
+					<Highlight offsetTop={0} language={typescript} code={val.expr} />
+				</span>
+			{/if}
+		</li>
+	{/each}
+</ul>

package/components/InputTransformsViewer.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputTransform } from '../gen';
+declare const __propDef: {
+    props: {
+        inputTransforms: Record<string, InputTransform>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InputTransformsViewerProps = typeof __propDef.props;
+export declare type InputTransformsViewerEvents = typeof __propDef.events;
+export declare type InputTransformsViewerSlots = typeof __propDef.slots;
+export default class InputTransformsViewer extends SvelteComponentTyped<InputTransformsViewerProps, InputTransformsViewerEvents, InputTransformsViewerSlots> {
+}
+export {};

package/components/InviteGlobalUser.svelte

@@ -14,8 +14,8 @@ let password;
 let name;
 let company;
 function handleKeyUp(event) {
-    const key = event.key || event.keyCode;
-    if (key === 13 || key === 'Enter') {
+    const key = event.key;
+    if (key === 'Enter') {
         event.preventDefault();
         addUser();
     }

package/components/InviteUser.svelte

@@ -12,8 +12,8 @@ export function openModal() {
 let email;
 let is_admin = false;
 function handleKeyUp(event) {
-    const key = event.key || event.keyCode;
-    if (key === 13 || key === 'Enter') {
+    const key = event.key;
+    if (key === 'Enter') {
         event.preventDefault();
         inviteUser();
     }

package/components/JobStatus.svelte

@@ -1,38 +1,45 @@
-<script>import { faCalendar, faCircle, faClock, faHourglassHalf, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { displayDate, forLater } from '../utils';
+<script>import { displayDate, forLater, msToSec } from '../utils';
+import { faCalendar, faCheck, faCircle, faClock, faHourglassHalf, faTimes } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
-import { check } from 'svelte-awesome/icons';
+import { Badge } from 'flowbite-svelte';
 const SMALL_ICON_SCALE = 0.7;
 export let job;
 </script>
 
 {#if job && 'success' in job && job.success}
-	<Icon class="text-green-600" data={check} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Succeeded {job.is_skipped ? '(Skipped)' : ''}</span>
-	<div>
-		<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span class="mx-2"
-			>Job ran in {job.duration}
-			s</span
-		>
-	</div>
+	<Badge large color="green">
+		<Icon data={faCheck} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Succeeded {job.is_skipped ? '(Skipped)' : ''}
+	</Badge>
+
+	<Badge large>
+		<Icon data={faHourglassHalf} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Job ran in {msToSec(job.duration_ms)} s
+	</Badge>
 {:else if job && 'success' in job}
-	<Icon class="text-red-700" data={faTimes} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Failed</span>
-	<div>
-		<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span class="mx-2"
-			>Job ran in {job.duration}
-			s</span
-		>
-	</div>
+	<Badge large color="red">
+		<Icon data={faTimes} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Failed
+	</Badge>
+	<Badge large>
+		<Icon data={faHourglassHalf} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Job ran in {msToSec(job.duration_ms)}s
+	</Badge>
 {:else if job && 'running' in job && job.running}
-	<Icon class="text-yellow-500" data={faCircle} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Running</span>
+	<Badge large color="yellow">
+		<Icon data={faCircle} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Running
+	</Badge>
 {:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
-	<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Scheduled for {displayDate(job.scheduled_for)}</span>
+	<Badge>
+		<Icon data={faCalendar} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Scheduled for {displayDate(job.scheduled_for)}
+	</Badge>
 {:else if job && 'running' in job}
-	<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Queued</span>
+	<Badge>
+		<Icon data={faClock} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Queued
+	</Badge>
 {:else}
 	<Icon class="text-gray-200" data={faCircle} scale={SMALL_ICON_SCALE} />
 {/if}

package/components/Modal.svelte

@@ -13,8 +13,8 @@ export function openModal() {
     dispatch('open');
 }
 function handleKeyUp(event) {
-    const key = event.key || event.keyCode;
-    if (key === 27 || key === 'Escape' || key === 'Esc') {
+    const key = event.key;
+    if (key === 'Escape' || key === 'Esc') {
         if (open) {
             event.preventDefault();
             closeModal();
@@ -25,45 +25,18 @@ function handleKeyUp(event) {
 
 <svelte:window on:keyup={handleKeyUp} />
 
-<div class="blurred-background  {open ? '' : 'hidden'}" />
+{#if open}
+	<div class="blurred-background" />
 
-<div class="fixed top-0 w-screen h-screen {open ? '' : 'hidden'} {z}">
-	<div
-		class="fixed right-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">
-				<button
-					on:click={() => {
-						open = false
-						closeModal()
-					}}
-				>
-					<svg
-						class="w-6 h-6"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
-				</button>
-				<p class="font-semibold text-gray-800"><slot name="title" /></p>
-				<div />
-			</div>
-			<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-row justify-between p-2 ">
+	<div class="fixed top-0 w-screen h-screen {z}">
+		<div
+			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">
 					<button
 						on:click={() => {
+							open = false
 							closeModal()
 						}}
 					>
@@ -82,12 +55,41 @@ function handleKeyUp(event) {
 							/>
 						</svg>
 					</button>
-					<span class="mr-4"><slot name="submission">&nbsp;</slot></span>
+					<p class="font-semibold text-gray-800"><slot name="title" /></p>
+					<div />
+				</div>
+				<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-row justify-between p-2 ">
+						<button
+							on:click={() => {
+								closeModal()
+							}}
+						>
+							<svg
+								class="w-6 h-6"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+						</button>
+						<span class="mr-4"><slot name="submission">&nbsp;</slot></span>
+					</div>
 				</div>
-			</div>
-		{/if}
+			{/if}
+		</div>
 	</div>
-</div>
+{/if}
 
 <style>
 	.blurred-background {

package/components/ModuleStep.svelte

@@ -1,13 +1,16 @@
-<script>import { FlowModuleValue } from '../gen';
-import { addPreviewResult, previewResults } from '../stores';
-import { buildExtraLib, objectToTsType, schemaToObject, schemaToTsType } from '../utils';
-import { faRobot } from '@fortawesome/free-solid-svg-icons';
+<script>import { RawScript } from '../gen';
+import { previewResults } from '../stores';
+import { buildExtraLib, objectToTsType, schemaToTsType } from '../utils';
+import { faChevronDown, faChevronUp, faPlus } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import Editor from './Editor.svelte';
+import EditorBar from './EditorBar.svelte';
 import FlowPreview from './FlowPreview.svelte';
+import FlowBox from './flows/FlowBox.svelte';
 import FlowInputs from './flows/FlowInputs.svelte';
 import FlowModuleHeader from './flows/FlowModuleHeader.svelte';
-import { createInlineScriptModule, flowStore, loadSchema, pickScript, schemasStore } from './flows/flowStore';
+import { addModule, createInlineScriptModule, flowStore, loadSchema, pickScript, schemasStore } from './flows/flowStore';
+import { getPickableProperties, jobsToResults } from './flows/utils';
 import SchemaForm from './SchemaForm.svelte';
 import Tooltip from './Tooltip.svelte';
 export let open;
@@ -15,68 +18,93 @@ export let mode;
 export let i;
 export let mod;
 export let args = {};
+let editor;
+let websocketAlive = { pyright: false, black: false, deno: false };
+let pickableProperties = undefined;
+let bigEditor = false;
 $: schema = $schemasStore[i];
-$: shouldPick = mod.value.path === '' && mod.value.language === undefined;
-$: previousSchema = i === 0 ? schemaToObject($flowStore?.schema) : $previewResults[i];
-$: extraLib = buildExtraLib(i === 0 ? schemaToTsType($flowStore?.schema) : objectToTsType($previewResults[i]));
+$: shouldPick = 'path' in mod.value && mod.value.path === '' && !('language' in mod.value);
+$: pickableProperties = getPickableProperties($flowStore?.schema, args, $previewResults, mode, i);
+$: extraLib = buildExtraLib(schemaToTsType($flowStore?.schema), i === 0 ? schemaToTsType($flowStore?.schema) : objectToTsType($previewResults[i]));
+const isTrigger = mode === 'pull' && i === 0;
 </script>
 
-<li class="flex flex-row flex-shrink max-w-full mx-auto mt-16">
-	<div
-		class="bg-white border border-gray xl-rounded shadow-lg w-full max-w-4xl mx-4 md:mx-auto"
-		id="module-{i}"
-	>
-		<div class="flex items-center justify-between flex-wra p-4 sm:px-6 z-10">
-			<FlowModuleHeader bind:open {mod} {i} {shouldPick}>
-				<div>
-					<h3 class="text-lg font-bold text-gray-900">Step {i + 1}</h3>
-					{#if i == 0 && mode == 'pull'}
-						<h3 class="font-bold">
-							Trigger Script <Tooltip
-								>When a flow is 'Pull', the first step is a trigger script. Trigger scripts are
-								scripts that must return a list which are the new items to be treated one by one by
-								the rest of the flow, usually the list of new items since last time the flow was
-								run. One can retrieve the item in the next step using `previous_result._value`. To
-								easily compute the diff, windmill provides some helpers under the form of
-								`getInternalState` and `setInternalState`.</Tooltip
-							>
-						</h3>{/if}
-					<p>
-						{#if mod.value.path}
-							{mod.value.path}
-						{/if}
-						{#if mod.value.language}
-							Inline {mod.value.language}
-						{/if}
-						{#if !mod.value.path && !mod.value.language}
-							Select a script
-						{/if}
-					</p>
-				</div>
-			</FlowModuleHeader>
-		</div>
-		<div class="border-b border-gray-200" />
+<button
+	class="rounded-full h-10 w-10 bg-white border-2 border-gray-400"
+	on:click={() => {
+		addModule(i)
+		open = i
+	}}
+>
+	<Icon class="text-gray-400 mb-1" data={faPlus} />
+</button>
+<FlowBox>
+	<div id="module-{i}">
+		<FlowModuleHeader bind:open {mod} {i} {shouldPick}>
+			<div>
+				<h3 class="text-lg font-bold text-gray-900">Step {i + 1}</h3>
+				{#if isTrigger}
+					<h3 class="font-bold">
+						Trigger Script
+						<Tooltip>
+							When a flow is 'Pull', the first step is a trigger script. Trigger scripts are scripts
+							that must return a list which are the new items to be treated one by one by the rest
+							of the flow, usually the list of new items since last time the flow was run. One can
+							retrieve the item in the next step using `previous_result._value`. To easily compute
+							the diff, windmill provides some helpers under the form of `getInternalState` and
+							`setInternalState`.
+						</Tooltip>
+					</h3>
+				{/if}
+				<p>
+					{#if 'path' in mod.value && mod.value.path}
+						{mod.value.path}
+					{/if}
+					{#if 'language' in mod.value && mod.value.language}
+						Inline {mod.value.language}
+					{/if}
+					{#if !('path' in mod.value) && !('language' in mod.value)}
+						Select a script
+					{/if}
+				</p>
+			</div>
+		</FlowModuleHeader>
 		{#if open == i}
 			<div class="p-6">
 				{#if shouldPick}
 					<FlowInputs
-						isTrigger={mode == 'pull' && i == 0}
+						{isTrigger}
 						on:pick={(e) => pickScript(e.detail.path, i)}
 						on:new={(e) => createInlineScriptModule(e.detail.language, i, mode)}
 					/>
 				{/if}
-				{#if mod.value.type === FlowModuleValue.type.RAWSCRIPT}
-					<Editor
-						class="h-80 border p-2 rounded"
-						bind:code={mod.value.content}
-						deno={mod.value.language === FlowModuleValue.language.DENO}
-					/>
+				{#if mod.value.type === 'rawscript'}
+					<div class="mb-2 overflow-hidden">
+						<EditorBar {editor} {websocketAlive} lang={mod.value.language ?? 'deno'} />
+					</div>
+					<div>
+						<Editor
+							bind:websocketAlive
+							bind:this={editor}
+							class="{bigEditor ? 'h-2/3' : 'h-80'} border p-2 rounded"
+							bind:code={mod.value.content}
+							deno={mod.value.language === RawScript.language.DENO}
+							automaticLayout={true}
+							on:blur={() => loadSchema(i)}
+							formatAction={() => loadSchema(i)}
+						/>
+						<button
+							class="w-full text-center"
+							on:click={() => {
+								bigEditor = !bigEditor
+							}}><Icon data={bigEditor ? faChevronUp : faChevronDown} scale={1.0} /></button
+						>
+					</div>
 					<div class="mt-2 mb-8">
-						<button class="default-primary-button-v2" on:click={() => loadSchema(i)}>
-							<Icon data={faRobot} class="w-4 h-4 mr-2 -ml-2" />
-
-							Infer step inputs from code
-						</button>
+						<p class="text-gray-500 italic">
+							Move the focus outside of the text editor to recompute the input schema or press
+							Ctrl/Cmd+S
+						</p>
 					</div>
 				{/if}
 				{#if !shouldPick}
@@ -86,7 +114,7 @@ $: extraLib = buildExtraLib(i === 0 ? schemaToTsType($flowStore?.schema) : objec
 						{schema}
 						{extraLib}
 						{i}
-						{previousSchema}
+						bind:pickableProperties
 						bind:args={mod.input_transform}
 					/>
 				{/if}
@@ -102,29 +130,24 @@ $: extraLib = buildExtraLib(i === 0 ? schemaToTsType($flowStore?.schema) : objec
 						{mode}
 						schemas={$schemasStore}
 						on:change={(e) => {
-							addPreviewResult(e.detail.result, i + 1)
+							previewResults.set(jobsToResults(e.detail))
 						}}
 					/>
 				</div>
-				<div>
-					<button class="w-full h-full" on:click={() => (open = -1)}>(-)</button>
-				</div>
-			{:else}
-				<div>
-					<button class="w-full h-full" on:click={() => (open = i)}>(+)</button>
-				</div>
 			{/if}
 		{/if}
+		{#if open == i}
+			<div>
+				<button class="w-full h-full" on:click={() => (open = -1)}>
+					<Icon data={faChevronUp} scale={1.0} />
+				</button>
+			</div>
+		{:else}
+			<div>
+				<button class="w-full h-full" on:click={() => (open = i)}>
+					<Icon data={faChevronDown} scale={1.0} />
+				</button>
+			</div>
+		{/if}
 	</div>
-</li>
-{#if i == 0 && mode == 'pull'}
-	<li class="relative m-20 ">
-		<div class="relative flex justify-center bg-white shadow p-2">
-			Starting from here, the flow for loop over items from step 1's result above &nbsp;<Tooltip
-				>This flow being in 'Pull' mode, the rest of the flow will for loop over the list of items
-				returned by the trigger script right above. Retrieve the item value using
-				`previous_result._value`</Tooltip
-			>
-		</div>
-	</li>
-{/if}
+</FlowBox>

package/components/ObjectResourceInput.svelte

@@ -1,61 +1,81 @@
 <script>import { ResourceService } from '../gen';
-import ResourcePicker from './ResourcePicker.svelte';
 import { workspaceStore } from '../stores';
-import SchemaForm from './SchemaForm.svelte';
 import RadioButton from './RadioButton.svelte';
+import ResourcePicker from './ResourcePicker.svelte';
+import SchemaForm from './SchemaForm.svelte';
 export let format;
 export let value;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
-let path = isString(value) && value.length >= '$res:'.length ? value.substr('$res:'.length) : undefined;
+let path = '';
 let args = {};
-if (!isString(value) && value) {
-    args = value;
-}
 let schema = undefined;
 let isValid = true;
 let resourceTypeName = '';
+let option = isString(value) || value == undefined ? 'resource' : 'raw';
+$: format.startsWith('resource-') && loadSchema(format);
 async function loadSchema(format) {
     resourceTypeName = format.substring('resource-'.length);
     schema = (await ResourceService.getResourceType({ workspace: $workspaceStore, path: resourceTypeName })).schema;
 }
-let option = isString(value) || value == undefined ? 'resource' : 'raw';
-$: {
-    if (option == 'resource') {
-        value = `$res:${path}`;
+function argToValue() {
+    value = args;
+}
+function resourceToValue() {
+    value = `$res:${path}`;
+}
+function isResource() {
+    return isString(value) && value.length >= '$res:'.length;
+}
+function valueToPath() {
+    if (!isString(value) && value) {
+        args = value;
+    }
+    if (isResource()) {
+        path = value.substr('$res:'.length);
     }
-    else {
-        value = args;
+    else if (value !== undefined && value !== '') {
+        option = 'raw';
     }
 }
-$: format.startsWith('resource-') && loadSchema(format);
+$: value && valueToPath();
 </script>
 
-<div class="max-w-lg">
-	<RadioButton
-		options={[
-			[`Resource (${resourceTypeName})`, 'resource'],
-			[`Raw object value`, 'raw']
-		]}
-		small={true}
-		bind:value={option}
-	/>
-</div>
-<div class="mt-1" />
-{#if option == 'resource'}
-	<ResourcePicker
-		bind:value={path}
-		resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
-	/>
-{:else}
-	<div class="border rounded p-5">
-		<h2 class="mb-5">
-			Object of <a target="_blank" href="/resources">resource type</a>
-			{resourceTypeName}
-		</h2>
-		{#if !isString(args)}
-			<SchemaForm {schema} bind:isValid bind:args />
+<div class="flex flex-row w-full gap-2">
+	<div class="shrink w-40">
+		<RadioButton
+			options={[
+				[`Resource (${resourceTypeName})`, 'resource'],
+				[`Raw object value`, 'raw']
+			]}
+			on:change={argToValue}
+			bind:value={option}
+		/>
+	</div>
+	<div class="grow">
+		{#if option == 'resource'}
+			<ResourcePicker
+				on:refresh={() => loadSchema(format)}
+				on:change={(e) => {
+					path = e.detail
+					resourceToValue()
+				}}
+				bind:value={path}
+				resourceType={format.split('-').length > 1
+					? format.substring('resource-'.length)
+					: undefined}
+			/>
+		{:else}
+			<div class="border rounded p-5 w-full">
+				<h2 class="mb-5">
+					Object of <a target="_blank" href="/resources">resource type</a>
+					{resourceTypeName}
+				</h2>
+				{#if !isString(args)}
+					<SchemaForm {schema} bind:isValid bind:args />
+				{/if}
+			</div>
 		{/if}
 	</div>
-{/if}
+</div>

package/components/ObjectTypeNarrowing.svelte

@@ -1,25 +1,10 @@
-<script>import RadioButton from './RadioButton.svelte';
-import ResourceTypePicker from './ResourceTypePicker.svelte';
+<script>import ResourceTypePicker from './ResourceTypePicker.svelte';
 export let format;
-let kind = format?.startsWith('resource') ? 'resource' : 'none';
 let resource = format?.startsWith('resource-')
     ? format.substring('resource-'.length)
     : undefined;
-$: format =
-    kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : undefined;
+$: format = resource != undefined ? `resource-${resource}` : undefined;
 </script>
 
-<RadioButton
-	label="Kind"
-	small={true}
-	options={[
-		['None', 'none'],
-		['Resource Type', 'resource']
-	]}
-	bind:value={kind}
-/>
-
-{#if kind == 'resource'}
-	<div class="mt-1" />
-	<ResourceTypePicker bind:value={resource} />
-{/if}
+<div class="mt-2" />
+<ResourceTypePicker bind:value={resource} nonePickable={true} />

package/components/Path.svelte

@@ -4,7 +4,6 @@ import { GroupService } from '../gen';
 import Tooltip from './Tooltip.svelte';
 import { userStore, workspaceStore } from '../stores';
 import { sleep } from '../utils';
-import { workspace } from 'vscode';
 export let meta = {
     ownerKind: 'user',
     owner: '',
@@ -156,6 +155,7 @@ $: {
 		<label class="block col-span-2">
 			<span class="text-gray-700 text-sm">Name<span class="text-red-600 text-sm">*</span></span>
 			<input
+				autofocus
 				bind:value={meta.name}
 				placeholder={namePlaceholder}
 				class={error === ''