windmill-components 1.89.1 → 1.103.1

package/package/components/FlowBuilder.svelte.d.ts

@@ -10,8 +10,13 @@ declare const __propDef: {
         loading?: boolean | undefined;
         flowStore: Writable<Flow>;
         flowStateStore: Writable<FlowState>;
+        getSelectedId?: (() => string) | undefined;
     };
     events: {
+        saveInitial: CustomEvent<any>;
+        deploy: CustomEvent<any>;
+        details: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
@@ -20,5 +25,6 @@ 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> {
+    get getSelectedId(): () => string;
 }
 export {};

package/package/components/FlowGraphViewer.svelte

@@ -2,7 +2,6 @@
 import HighlightCode from './HighlightCode.svelte';
 import InputTransformsViewer from './InputTransformsViewer.svelte';
 import IconedPath from './IconedPath.svelte';
-import { scriptPathToHref } from '../utils';
 import { Badge, Button, Drawer, DrawerContent } from './common';
 import { Highlight } from 'svelte-highlight';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
@@ -10,6 +9,7 @@ import typescript from 'svelte-highlight/languages/typescript';
 import { cleanExpr } from './flows/utils';
 import FlowPathViewer from './flows/content/FlowPathViewer.svelte';
 import SchemaViewer from './SchemaViewer.svelte';
+import { scriptPathToHref } from '../scripts';
 export let flow;
 export let overflowAuto = false;
 export let noSide = false;
@@ -201,6 +201,10 @@ let codeViewer;
 				{:else if stepDetail.value.type == 'flow'}
 					<FlowPathViewer noSide path={stepDetail.value.path} />
 				{/if}
+			{:else}
+				<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+					Step {stepDetail} selected
+				</p>
 			{/if}
 		</div>
 	{/if}

package/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, Kbd } from './common';
+import { Button, Drawer, Kbd } from './common';
 import { createEventDispatcher, getContext } from 'svelte';
 import Icon from 'svelte-awesome';
 import { dfs } from './flows/flowStore';
@@ -12,6 +12,8 @@ import FlowProgressBar from './flows/FlowProgressBar.svelte';
 import CapturePayload from './flows/content/CapturePayload.svelte';
 import { Loader2 } from 'lucide-svelte';
 import { getModifierKey } from '../utils';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import SavedInputs from './SavedInputs.svelte';
 let capturePayload;
 export let previewMode;
 export let open;
@@ -19,7 +21,7 @@ export let jobId = undefined;
 export let job = undefined;
 let isRunning = false;
 let jobProgressReset;
-const { selectedId, previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
+const { selectedId, previewArgs, flowStateStore, flowStore, initialPath } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 function sliceModules(modules, upTo, idOrders) {
     return modules
@@ -79,12 +81,27 @@ function onKeyDown(event) {
 $: if (job?.type === 'CompletedJob') {
     isRunning = false;
 }
+let inputLibraryDrawer;
 </script>
 
 <CapturePayload bind:this={capturePayload} />
 
 <svelte:window on:keydown={onKeyDown} />
 
+<Drawer bind:this={inputLibraryDrawer}>
+	<DrawerContent title="Input library {initialPath}" on:close={inputLibraryDrawer?.toggleDrawer}>
+		<SavedInputs
+			flowPath={initialPath}
+			isValid={true}
+			args={$previewArgs}
+			on:selected_args={(e) => {
+				$previewArgs = JSON.parse(JSON.stringify(e.detail))
+				inputLibraryDrawer?.closeDrawer()
+			}}
+		/>
+	</DrawerContent>
+</Drawer>
+
 <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-2">
 		<div class="w-8">
@@ -121,22 +138,36 @@ $: if (job?.type === 'CompletedJob') {
 			<Button
 				variant="contained"
 				startIcon={{ icon: isRunning ? faRefresh : faPlay }}
-				color="blue"
+				color="dark"
 				size="sm"
 				btnClasses="w-full max-w-lg"
 				on:click={() => runPreview($previewArgs)}
 			>
-				Test flow <Kbd class="ml-2">{getModifierKey()}+Enter</Kbd>
+				Test flow &nbsp;<Kbd small>{getModifierKey()}</Kbd>
+				<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
 			</Button>
 		{/if}
-		<Button
-			btnClasses="h-full truncate"
-			size="sm"
-			variant="border"
-			on:click={() => {
-				capturePayload.openDrawer()
-			}}>Fill args from a request</Button
-		>
+		<div class="flex gap-2">
+			{#if initialPath != ''}
+				<Button
+					btnClasses="h-full truncate"
+					size="sm"
+					variant="border"
+					on:click={() => {
+						inputLibraryDrawer?.openDrawer()
+					}}>Past Runs/Input library</Button
+				>
+			{/if}
+
+			<Button
+				btnClasses="h-full truncate"
+				size="sm"
+				variant="border"
+				on:click={() => {
+					capturePayload.openDrawer()
+				}}>Fill args from a request</Button
+			>
+		</div>
 	</div>
 	<FlowProgressBar {job} bind:reset={jobProgressReset} />
 

package/package/components/FolderEditor.svelte

@@ -2,9 +2,12 @@
 import { FolderService, UserService, GranularAclService, GroupService } from '../gen';
 import AutoComplete from 'simple-svelte-autocomplete';
 import TableCustom from './TableCustom.svelte';
-import { Alert, Button, ToggleButton, ToggleButtonGroup } from './common';
+import { Alert, Button, Drawer, DrawerContent, ToggleButton, ToggleButtonGroup } from './common';
 import Skeleton from './common/skeleton/Skeleton.svelte';
 import Tooltip from './Tooltip.svelte';
+import { Icon } from 'svelte-awesome';
+import { faEye, faPlus } from '@fortawesome/free-solid-svg-icons';
+import GroupEditor from './GroupEditor.svelte';
 export let name;
 let can_write = false;
 let folder;
@@ -12,6 +15,8 @@ let perms = undefined;
 let usernames = [];
 let groups = [];
 let ownerItem = '';
+let newGroup;
+let viewGroup;
 async function loadUsernames() {
     usernames = await UserService.listUsernames({ workspace: $workspaceStore });
 }
@@ -71,8 +76,47 @@ function getRole(x) {
     }
 }
 let ownerKind = 'user';
+let groupCreated = undefined;
+let newGroupName = '';
+async function addGroup() {
+    await GroupService.createGroup({
+        workspace: $workspaceStore ?? '',
+        requestBody: { name: newGroupName }
+    });
+    groupCreated = newGroupName;
+    $userStore?.folders?.push(newGroupName);
+    loadGroups();
+    ownerItem = newGroupName;
+}
 </script>
 
+<Drawer bind:this={newGroup}>
+	<DrawerContent
+		title="New Group"
+		on:close={() => {
+			newGroup.closeDrawer()
+			groupCreated = undefined
+		}}
+	>
+		{#if !groupCreated}
+			<div class="flex flex-row">
+				<input class="mr-2" placeholder="New group name" bind:value={newGroupName} />
+				<Button size="md" startIcon={{ icon: faPlus }} disabled={!newGroupName} on:click={addGroup}>
+					New&nbsp;group
+				</Button>
+			</div>
+		{:else}
+			<GroupEditor name={groupCreated} />
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:this={viewGroup}>
+	<DrawerContent title="Group {ownerItem}" on:close={viewGroup.closeDrawer}>
+		<GroupEditor name={ownerItem} />
+	</DrawerContent>
+</Drawer>
+
 <div class="flex flex-col gap-6">
 	<h1>{name}</h1>
 	<h2>Permissions ({perms?.length ?? 0})</h2>
@@ -87,11 +131,33 @@ let ownerKind = 'user';
 					<ToggleButton position="right" value="group" size="xs">Group</ToggleButton>
 				</ToggleButtonGroup>
 			</div>
+
 			{#key ownerKind}
 				<AutoComplete
 					items={ownerKind === 'user' ? usernames : groups}
 					bind:selectedItem={ownerItem}
 				/>
+				{#if ownerKind == 'group'}
+					<Button
+						title="View Group"
+						btnClasses="!p-1.5"
+						variant="border"
+						size="xs"
+						disabled={!ownerItem || ownerItem == ''}
+						on:click={viewGroup.openDrawer}
+					>
+						<Icon scale={0.8} data={faEye} /></Button
+					>
+					<Button
+						title="New Group"
+						btnClasses="!p-1.5"
+						variant="border"
+						on:click={newGroup.openDrawer}
+						size="xs"
+					>
+						<Icon scale={0.8} data={faPlus} /></Button
+					>
+				{/if}
 			{/key}
 			<Button
 				disabled={ownerItem == ''}

package/package/components/GroupEditor.svelte

@@ -1,6 +1,5 @@
 <script>import { GranularAclService, GroupService, UserService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
-import { canWrite, sendUserToast } from '../utils';
 import AutoComplete from 'simple-svelte-autocomplete';
 import { createEventDispatcher } from 'svelte';
 import autosize from 'svelte-autosize';
@@ -8,6 +7,8 @@ import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import Skeleton from './common/skeleton/Skeleton.svelte';
 import TableCustom from './TableCustom.svelte';
 import Tooltip from './Tooltip.svelte';
+import { sendUserToast } from '../toast';
+import { canWrite } from '../utils';
 export let name;
 let can_write = false;
 let group;
@@ -75,19 +76,21 @@ function getRole(x) {
 				bind:value={group.summary}
 				placeholder="Summary of the group"
 			/>
-			<Button
-				disabled={!can_write}
-				size="xs"
-				on:click={async () => {
-					await GroupService.updateGroup({
-						workspace: $workspaceStore ?? '',
-						name,
-						requestBody: { summary: group?.summary }
-					})
-					dispatch('update')
-					sendUserToast('New summary saved')
-				}}>Save Summary</Button
-			>
+			<div class="flex justify-end">
+				<Button
+					disabled={!can_write}
+					size="xs"
+					on:click={async () => {
+						await GroupService.updateGroup({
+							workspace: $workspaceStore ?? '',
+							name,
+							requestBody: { summary: group?.summary }
+						})
+						dispatch('update')
+						sendUserToast('New summary saved')
+					}}>Save Summary</Button
+				>
+			</div>
 		</div>
 	{:else}
 		<Skeleton layout={[[4]]} />

package/package/components/InlineCodeCopy.svelte

@@ -5,7 +5,7 @@ export let content;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<pre class="bg-gray-700 text-gray-100 p-2 font-mono text-sm whitespace-pre-wrap"
+<pre class="bg-gray-700 text-gray-100 p-2 font-mono text-sm whitespace-pre-wrap my-2"
 	>{content} <span on:click={() => copyToClipboard(content)} class="cursor-pointer ml-2"
 		><Icon data={faClipboard} /></span
 	></pre

package/package/components/InputTransformForm.svelte

@@ -8,6 +8,7 @@ import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import { faCode } from '@fortawesome/free-solid-svg-icons';
 import TemplateEditor from './TemplateEditor.svelte';
 import { setInputCat as computeInputCat } from '../utils';
+import { Plug } from 'lucide-svelte';
 export let schema;
 export let arg;
 export let argName;
@@ -161,7 +162,7 @@ $: schema.properties[argName].default && setDefaultCode();
 					>
 						{#if isStaticTemplate(inputCat)}
 							<ToggleButton
-								title={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`result\` to connect to another node\'s output.`}
+								title={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
 								light
 								position="left"
 								value="static"
@@ -175,7 +176,7 @@ $: schema.properties[argName].default && setDefaultCode();
 
 						<ToggleButton
 							light
-							title="Write javascript expressions directly, using 'flow_input' or 'result'. You can use multiline javascript."
+							title="Javascript expression ('flow_input' or 'results')."
 							position="right"
 							value="javascript"
 							startIcon={{ icon: faCode }}
@@ -187,14 +188,14 @@ $: schema.properties[argName].default && setDefaultCode();
 					<Button
 						title="Connect to another node's output"
 						variant="border"
-						color="dark"
+						color="light"
 						size="xs2"
 						on:click={() => {
 							focusProp(argName, 'connect', (path) => {
 								connectProperty(path)
 								return true
 							})
-						}}>Link &rightarrow;</Button
+						}}><Plug size={16} /> &rightarrow;</Button
 					>
 				</div>
 			</div>

package/package/components/InputTransformsViewer.svelte

@@ -10,7 +10,13 @@ $: entries = Object.entries(inputTransforms);
 			<li class="flex pb-2 last:pb-0">
 				<span class="font-black text-gray-700 text-xs">{key}:</span>
 				{#if val.type == 'static'}
-					<ObjectViewer json={val.value} />
+					{#if typeof val.value == 'object'}
+						<ObjectViewer json={val.value} />
+					{:else}
+						<span class="text-xs text-black whitespace-pre-wrap ml-2">
+							{val.value}
+						</span>
+					{/if}
 				{:else}
 					<span class="text-xs text-black whitespace-pre-wrap ml-2">
 						{cleanExpr(val.expr)}

package/package/components/InviteGlobalUser.svelte

@@ -1,4 +1,4 @@
-<script>import { sendUserToast } from '../utils';
+<script>import { sendUserToast } from '../toast';
 import { createEventDispatcher } from 'svelte';
 import { UserService } from '../gen';
 import { Button } from './common';

package/package/components/InviteUser.svelte

@@ -1,4 +1,4 @@
-<script>import { sendUserToast } from '../utils';
+<script>import { sendUserToast } from '../toast';
 import { createEventDispatcher } from 'svelte';
 import { workspaceStore } from '../stores';
 import { WorkspaceService } from '../gen';

package/package/components/ItemPicker.svelte

@@ -13,6 +13,8 @@ export let closeOnClick = true;
 export let noItemMessage = 'There are no items in the list';
 /** Displayed if the search returns no items. */
 export let buttons = {};
+export let tooltip = '';
+export let documentationLink = undefined;
 let loading = false;
 let items = [];
 let filteredItems = [];
@@ -42,7 +44,7 @@ let drawer;
 />
 
 <Drawer bind:this={drawer} size="600px">
-	<DrawerContent overflow_y={false} title="Search {itemName}s" on:close={drawer.closeDrawer}>
+	<DrawerContent {tooltip} {documentationLink} overflow_y={false} title="Search {itemName}s" on:close={drawer.closeDrawer}>
 		<div class="w-full h-full flex flex-col">
 			<div class="w-12/12 pb-4">
 				<input

package/package/components/ItemPicker.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         closeOnClick?: boolean | undefined;
         /** Displayed if the load function returns no items. */ noItemMessage?: string | undefined;
         /** Displayed if the search returns no items. */ buttons?: Record<string, (x: string) => void> | undefined;
+        tooltip?: string | undefined;
+        documentationLink?: string | undefined;
         openDrawer?: (() => void) | undefined;
     };
     events: {

package/package/components/LightweightArgInput.svelte

@@ -10,6 +10,8 @@ import autosize from 'svelte-autosize';
 import Toggle from './Toggle.svelte';
 import Range from './Range.svelte';
 import LightweightSchemaForm from './LightweightSchemaForm.svelte';
+import { twMerge } from 'tailwind-merge';
+export let css = undefined;
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -26,6 +28,7 @@ export let itemsType = undefined;
 export let displayHeader = true;
 export let properties = undefined;
 export let extra = {};
+export let displayType = true;
 const dispatch = createEventDispatcher();
 $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
 $: validateInput(pattern, value);
@@ -122,11 +125,20 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 <div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
-			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
+			<FieldHeader
+				prettify
+				{label}
+				{required}
+				{type}
+				{contentEncoding}
+				{format}
+				{displayType}
+				labelClass={css?.label?.class}
+			/>
 		{/if}
 
 		{#if description}
-			<div class="text-sm italic pb-1">
+			<div class={twMerge('text-sm italic pb-1', css?.description?.class)}>
 				{description}
 			</div>
 		{/if}
@@ -148,9 +160,11 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							dispatch('focus')
 						}}
 						type="number"
-						class={valid
-							? ''
-							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
+						class={twMerge(
+							valid
+								? ''
+								: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'
+						)}
 						placeholder={defaultValue ?? ''}
 						bind:value
 						min={extra['min']}

package/package/components/LightweightArgInput.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { SchemaProperty } from '../common';
+import type { ComponentCustomCSS } from './apps/types';
 declare const __propDef: {
     props: {
+        css?: ComponentCustomCSS<'schemaformcomponent'> | undefined;
         label?: string | undefined;
         value: any;
         defaultValue?: any;
@@ -23,6 +25,7 @@ declare const __propDef: {
             [name: string]: SchemaProperty;
         } | undefined;
         extra?: Record<string, any> | undefined;
+        displayType?: boolean | undefined;
         evalValueToRaw?: (() => void) | undefined;
         focus?: (() => void) | undefined;
     };

package/package/components/LightweightSchemaForm.svelte

@@ -1,12 +1,20 @@
-<script>import LightweightArgInput from './LightweightArgInput.svelte';
+<script>import { twMerge } from 'tailwind-merge';
+import LightweightArgInput from './LightweightArgInput.svelte';
+import { allTrue } from '../utils';
+export let css = undefined;
 export let schema;
 export let args = undefined;
+export let displayType = true;
+export let largeGap = false;
+export let isValid = true;
+let inputCheck = {};
+$: isValid = allTrue(inputCheck) ?? false;
 $: if (args === undefined) {
     args = {};
 }
 </script>
 
-<div class="w-full">
+<div class={twMerge('w-full flex flex-col overflow-auto', largeGap ? 'gap-8' : 'gap-2')}>
 	{#each Object.keys(schema.properties ?? {}) as argName (argName)}
 		<div>
 			{#if typeof args == 'object' && schema?.properties[argName] && args}
@@ -14,8 +22,9 @@ $: if (args === undefined) {
 					label={argName}
 					description={schema.properties[argName].description}
 					bind:value={args[argName]}
+					bind:valid={inputCheck[argName]}
 					type={schema.properties[argName].type}
-					required={schema.required.includes(argName)}
+					required={schema.required?.includes(argName) ?? false}
 					pattern={schema.properties[argName].pattern}
 					defaultValue={schema.properties[argName].default}
 					enum_={schema.properties[argName].enum}
@@ -25,6 +34,8 @@ $: if (args === undefined) {
 					itemsType={schema.properties[argName].items}
 					extra={schema.properties[argName]}
 					on:inputClicked
+					{displayType}
+					{css}
 				/>
 			{/if}
 		</div>

package/package/components/LightweightSchemaForm.svelte.d.ts

@@ -1,9 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
+import type { ComponentCustomCSS } from './apps/types';
 declare const __propDef: {
     props: {
+        css?: ComponentCustomCSS<'schemaformcomponent'> | undefined;
         schema: Schema;
         args?: Record<string, any> | undefined;
+        displayType?: boolean | undefined;
+        largeGap?: boolean | undefined;
+        isValid?: boolean | undefined;
     };
     events: {
         inputClicked: CustomEvent<any>;

package/package/components/ModulePreview.svelte

@@ -1,30 +1,29 @@
 <script>import { ScriptService } from '../gen';
 import { workspaceStore } from '../stores';
-import { getModifierKey, getScriptByPath } from '../utils';
+import { getModifierKey } from '../utils';
+import { getScriptByPath } from '../scripts';
 import { Loader2 } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import Button from './common/button/Button.svelte';
 import DisplayResult from './DisplayResult.svelte';
 import LogViewer from './LogViewer.svelte';
-import RunForm from './RunForm.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
+import ModulePreviewForm from './ModulePreviewForm.svelte';
+import { Kbd } from './common';
+import { evalValue } from './flows/utils';
 export let mod;
 export let schema;
+export let pickableProperties;
 const { flowStore, flowStateStore, testStepStore } = getContext('FlowEditorContext');
 // Test
 let testJobLoader;
 let testIsLoading = false;
 let testJob = undefined;
-let stepArgs = $testStepStore[mod.id] ??
-    Object.entries(mod.value['input_transforms'] ?? {}).reduce((acc, [k, v]) => {
-        let t = v;
-        if (t.type == 'static') {
-            acc[k] = t.value;
-            return acc;
-        }
-        return acc;
-    }, {});
+let stepArgs = Object.fromEntries(Object.keys(schema.properties).map((k) => [
+    k,
+    evalValue(k, mod, $testStepStore, pickableProperties, false)
+]));
 $: $testStepStore[mod.id] = stepArgs;
 export function runTestWithStepArgs() {
     runTest(stepArgs);
@@ -47,7 +46,7 @@ export async function runTest(args) {
 }
 function jobDone() {
     if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
-        if ($flowStateStore[mod.id]?.previewResult) {
+        if ($flowStateStore[mod.id]) {
             $flowStateStore[mod.id].previewResult = testJob.result;
             $flowStateStore = $flowStateStore;
         }
@@ -69,24 +68,21 @@ function jobDone() {
 			>
 		{/if}
 
-		<RunForm
-			noVariablePicker
-			loading={testIsLoading}
-			runnable={{ summary: mod.summary ?? '', schema, description: '' }}
-			runAction={(_, args) => runTest(args)}
-			schedulable={false}
-			buttonText={`Test (${getModifierKey()}+Enter)`}
-			detailed={false}
-			topButton
-			bind:args={stepArgs}
-			isFlow={false}
-		/>
-		{#if testIsLoading}
-			<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full mt-4" color="red" size="sm">
-				<Loader2 class="animate-spin mr-1" />
-				Cancel
-			</Button>
-		{/if}
+		<div class="w-full justify-center flex">
+			{#if testIsLoading}
+				<Button size="sm" on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red">
+					<Loader2 size={16} class="animate-spin mr-1" />
+					Cancel
+				</Button>
+			{:else}
+				<Button color="dark" btnClasses="truncate" size="sm" on:click={() => runTest(stepArgs)}
+					>Run&nbsp; <Kbd small>{getModifierKey()}</Kbd>
+					<Kbd small><span class="text-lg font-bold">⏎</span></Kbd></Button
+				>
+			{/if}
+		</div>
+
+		<ModulePreviewForm {pickableProperties} {mod} {schema} bind:args={stepArgs} />
 	</Pane>
 	<Pane size={50} minSize={20}>
 		<Splitpanes horizontal>

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

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