windmill-components 1.122.0 → 1.138.2

package/package/components/apps/editor/componentsPanel/QuickStyleMenu.svelte

@@ -170,7 +170,7 @@ onMount(() => {
 				{isOpen[prefix] ? '!bg-gray-100 hover:!bg-gray-200' : ''}"
 			>
 				<svelte:fragment slot="title">
-					<span class="font-semibold text-gray-600 capitalize">
+					<span class="font-semibold text-tertiary capitalize">
 						{group}
 					</span>
 				</svelte:fragment>
@@ -182,7 +182,7 @@ onMount(() => {
 						} = styleStore.getProp(p)}
 						{#if prop !== undefined && index !== undefined}
 							<div class="pb-2 pt-1">
-								<div class="text-sm font-medium text-gray-600 pb-0.5">
+								<div class="text-sm font-medium text-tertiary pb-0.5">
 									{formatKebabCase(prop.key)}
 								</div>
 								<div class="flex items-center gap-1">

package/package/components/apps/editor/componentsPanel/QuickStyleProperty.svelte

@@ -37,7 +37,7 @@ function updateUnit(next) {
 
 <div class={inline && type !== StylePropertyType.color ? '' : 'w-full'}>
 	{#if prop.value['title']}
-		<div class="font-medium text-xs text-gray-500">
+		<div class="font-medium text-xs text-tertiary">
 			{prop.value['title']}
 		</div>
 	{/if}
@@ -79,7 +79,7 @@ function updateUnit(next) {
 				<Menu
 					let:close
 					noMinW
-					wrapperClasses="h-full bg-white rounded-r-md border-y border-r border-gray-300 pr-0.5"
+					wrapperClasses="h-full bg-surface rounded-r-md border-y border-r border-gray-300 pr-0.5"
 					popupClasses="!mt-0"
 				>
 					<button
@@ -89,7 +89,7 @@ function updateUnit(next) {
 					>
 						{unit}
 					</button>
-					<ul class="bg-white rounded border py-1 overflow-auto">
+					<ul class="bg-surface rounded border py-1 overflow-auto">
 						{#each StylePropertyUnits as u}
 							<li class="w-full">
 								<Button

package/package/components/apps/editor/componentsPanel/quickStyleProperties.js

@@ -543,10 +543,18 @@ export const quickStyleProperties = {
         header: [...containerDefaultProps, typographyGrouping],
         container: containerDefaultProps
     },
+    jobidlogcomponent: {
+        header: [...containerDefaultProps, typographyGrouping],
+        container: containerDefaultProps
+    },
     flowstatuscomponent: {
         header: [...containerDefaultProps, typographyGrouping],
         container: containerDefaultProps
     },
+    jobidflowstatuscomponent: {
+        header: [...containerDefaultProps, typographyGrouping],
+        container: containerDefaultProps
+    },
     barchartcomponent: {
         container: containerDefaultProps
     },

package/package/components/apps/editor/contextPanel/ComponentOutputViewer.svelte

@@ -18,7 +18,7 @@ function subscribeToAllOutputs(observableOutputs) {
                     }
                     object[k] = value;
                 }
-            });
+            }, object[k]);
         });
     }
 }
@@ -36,8 +36,8 @@ $: $hasResult[componentId] = Object.keys(filtered).length > 0;
 			pureViewer={!$connectingInput.opened}
 		/>
 	{:else if $search.length > 0}
-		<div class="text-xs pl-2 text-gray-600">No results</div>
+		<div class="text-xs pl-2 text-tertiary">No results</div>
 	{:else}
-		<div class="text-xs pl-2 text-gray-600">No outputs</div>
+		<div class="text-xs pl-2 text-tertiary">No outputs</div>
 	{/if}
 {/if}

package/package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -15,18 +15,20 @@ let hasState = false;
 <PanelSection noPadding titlePadding="px-2 pt-2" title="Outputs">
 	<div
 		class={classNames(
-			'bg-white w-full h-full z-30',
-			$connectingInput.opened ? 'border-blue-500 border-t-2 border-r-2 bg-blue-50/50 z-50' : ''
+			'bg-surface w-full h-full z-30',
+			$connectingInput.opened
+				? 'border-blue-500 border-t-2 border-r-2 bg-blue-50/50 dark:bg-frost-900/50 z-50'
+				: ''
 		)}
 	>
 		<div class="min-w-[150px]">
-			<div class="sticky z-10 top-0 left-0 w-full bg-white p-1.5">
+			<div class="sticky z-10 top-0 left-0 w-full p-1.5">
 				<ClearableInput bind:value={$search} placeholder="Search outputs..." />
 			</div>
 
 			<div class="flex flex-col gap-4">
 				<div>
-					<span class="text-xs font-semibold text-gray-800 p-2">State & Context</span>
+					<span class="text-xs font-semibold text-secondary p-2">State & Context</span>
 
 					<OutputHeader selectable={false} id={'ctx'} name={'App Context'} first color="blue">
 						<ComponentOutputViewer
@@ -55,13 +57,13 @@ let hasState = false;
 				</div>
 
 				<div>
-					<span class="text-xs font-semibold text-gray-800 p-2">Components</span>
+					<span class="text-xs font-semibold text-secondary p-2">Components</span>
 					{#each $app.grid as gridItem, index (gridItem.id)}
 						<ComponentOutput {gridItem} first={index === 0} />
 					{/each}
 				</div>
 				<div>
-					<span class="text-xs font-semibold text-gray-800 p-2">Background runnables</span>
+					<span class="text-xs font-semibold text-secondary p-2">Background runnables</span>
 					<BackgroundScriptsOutput />
 				</div>
 			</div>

package/package/components/apps/editor/contextPanel/SubGridOutput.svelte

@@ -15,12 +15,15 @@ $: subgridItems = subGrids.map((k) => ({
     items: $app.subgrids?.[k] ?? []
 }));
 $: if (outputs?.selectedTabIndex) {
+    subscribeToOutput();
+}
+function subscribeToOutput() {
     outputs.selectedTabIndex.subscribe({
         id: 'subgridoutput-' + parentId,
         next: (value) => {
             selected = value;
         }
-    });
+    }, selected);
 }
 </script>
 
@@ -31,7 +34,7 @@ $: if (outputs?.selectedTabIndex) {
 			<div
 				class={classNames(
 					'px-1 py-0.5 flex justify-between items-center font-semibold text-xs border-l border-y w-full cursor-pointer',
-					selected === index ? 'bg-gray-200' : 'bg-gray-50'
+					selected === index ? 'bg-surface-selected' : 'bg-surface'
 				)}
 				on:click={() => {
 					selected = index
@@ -58,7 +61,7 @@ $: if (outputs?.selectedTabIndex) {
 						/>
 					{/each}
 				{:else}
-					<div class="text-xs text-gray-500 border-y border-l p-1">No components</div>
+					<div class="text-xs text-tertiary border-y border-l p-1">No components</div>
 				{/if}
 			</div>
 		{/if}

package/package/components/apps/editor/contextPanel/components/IdEditor.svelte

@@ -2,14 +2,13 @@
 import { forbiddenIds } from '../../../../flows/idUtils';
 import { ArrowRight, Pencil } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
-import { fade, slide } from 'svelte/transition';
+import { slide } from 'svelte/transition';
 import { Button, Popup } from '../../../../common';
 const { app, selectedComponent } = getContext('AppViewerContext');
 export let id;
 const dispatch = createEventDispatcher();
 const regex = /^[a-zA-Z][a-zA-Z0-9]*$/;
 let value = id;
-let button;
 let input;
 let error = '';
 $: if (!regex.test(value)) {
@@ -34,27 +33,21 @@ function save() {
 }
 </script>
 
-<button
-	on:click|stopPropagation={() => {
-		$selectedComponent = [id]
-	}}
-	bind:this={button}
-	title="Edit ID"
-	class="flex items-center px-1 rounded-sm bg-gray-100 hover:text-black text-gray-600"
-	aria-label="Open component ID editor"
->
-	<Pencil size={14} />
-</button>
-<Popup
-	ref={button}
-	options={{ placement: 'top-start' }}
-	transition={fade}
-	wrapperClasses="!z-[1002]"
-	outerClasses="rounded shadow-xl bg-white border p-3"
-	on:close={() => (value = id)}
->
-	<label class="block text-gray-900">
-		<div class="pb-1 text-sm text-gray-600">Component ID</div>
+<Popup floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}>
+	<svelte:fragment slot="button">
+		<button
+			on:click={() => {
+				$selectedComponent = [id]
+			}}
+			title="Edit ID"
+			class="flex items-center px-1 rounded-sm bg-surface-secondary hover:text-primary text-secondary"
+			aria-label="Open component ID editor"
+		>
+			<Pencil size={14} />
+		</button>
+	</svelte:fragment>
+	<label class="block text-primary">
+		<div class="pb-1 text-sm text-secondary">Component ID</div>
 		<div class="flex w-full">
 			<input
 				type="text"
@@ -62,7 +55,8 @@ function save() {
 				class="!w-auto grow"
 				bind:this={input}
 				on:click|stopPropagation={() => {}}
-				on:keypress={({ key }) => {
+				on:keydown|stopPropagation
+				on:keypress|stopPropagation={({ key }) => {
 					if (key === 'Enter') save()
 				}}
 			/>

package/package/components/apps/editor/contextPanel/components/IdEditor.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         id: string;
     };
     events: {
+        keydown: KeyboardEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -22,16 +22,16 @@ $: inSearch =
 $: open =
     $allIdsInPath.includes(id) || id == $selectedComponent?.[0] || $manuallyOpened[id] || inSearch;
 const hoverColor = {
-    blue: 'hover:bg-blue-100 hover:text-blue-500',
-    indigo: 'hover:bg-indigo-100 hover:text-indigo-500'
+    blue: 'hover:bg-blue-100 hover:text-blue-500 dark:hover:bg-frost-900 dark:hover:text-frost-100',
+    indigo: 'hover:bg-indigo-100 hover:text-indigo-500 dark:hover:bg-frost-900 dark:hover:text-indigo-300'
 };
 const openBackground = {
-    blue: 'bg-blue-50',
-    indigo: 'bg-indigo-50'
+    blue: 'bg-blue-50 dark:bg-frost-800',
+    indigo: 'bg-indigo-50 dark:bg-indigo-800'
 };
 const manuallyOpenColor = {
-    blue: 'text-gray-900 bg-gray-300 rounded-sm',
-    indigo: 'text-gray-900 bg-gray-300 rounded-sm'
+    blue: 'text-primary bg-gray-300 rounded-sm',
+    indigo: 'text-primary bg-gray-300 rounded-sm'
 };
 const idClass = {
     blue: 'bg-blue-500 text-white',
@@ -85,6 +85,13 @@ function renameComponent(from, to, data) {
     }
     else if (componentInput?.type == 'runnable') {
         processRunnable(from, to, componentInput.runnable);
+        Object.values(componentInput.fields).forEach((field) => {
+            if (field.type == 'connected') {
+                if (field.connection?.componentId === from) {
+                    field.connection.componentId = to;
+                }
+            }
+        });
     }
     Object.values(data.configuration ?? {}).forEach((config) => {
         if (config.type === 'connected') {
@@ -142,7 +149,7 @@ function processRunnable(from, to, runnable) {
 				? openBackground[color]
 				: $connectingInput.hoveredComponent === id
 				? 'bg-orange-300 '
-				: 'bg-white',
+				: 'bg-surface-secondary',
 			first ? 'border-t' : '',
 			nested ? 'border-l' : '',
 			'transition-all'
@@ -158,7 +165,7 @@ function processRunnable(from, to, runnable) {
 				disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
 				title="Select component"
 				on:click|stopPropagation={() => ($selectedComponent = [id])}
-				class="flex items-center ml-0.5 rounded-sm bg-gray-100 hover:text-black text-gray-600"
+				class="flex items-center ml-0.5 rounded-sm bg-surface-selected hover:text-primary text-tertiary"
 			>
 				<div
 					class={classNames(
@@ -184,7 +191,7 @@ function processRunnable(from, to, runnable) {
 		</div>
 		<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
 			{name}
-			<div class={classNames('bg-gray-200 rounded-sm')}>
+			<div class={classNames('bg-surface-secondary rounded-sm')}>
 				{#if !open}
 					<ChevronDown size={14} color="gray" />
 				{:else if $manuallyOpened[id]}

package/package/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte

@@ -5,7 +5,7 @@ import Tooltip from '../../../Tooltip.svelte';
 import { Script } from '../../../../gen';
 import { inferArgs } from '../../../../infer';
 import { initialCode } from '../../../../script_helpers';
-import { capitalize, emptySchema } from '../../../../utils';
+import { emptySchema } from '../../../../utils';
 import { getScriptByPath } from '../../../../scripts';
 import { faCodeBranch } from '@fortawesome/free-solid-svg-icons';
 import { Building, Globe2 } from 'lucide-svelte';
@@ -64,7 +64,17 @@ function pickInlineScript(name) {
     $app = $app;
     dispatch('new', unusedInlineScript.inlineScript);
 }
-const langs = ['deno', 'python3', 'go', 'bash'];
+const langs = [
+    ['deno', 'TypeScript (Deno)'],
+    ['python3', 'Python'],
+    ['go', 'Go'],
+    ['bash', 'Bash'],
+    ['nativets', 'REST'],
+    ['postgresql', 'PostgreSQL'],
+    ['mysql', 'MySQL'],
+    ['bigquery', 'BigQuery'],
+    ['bun', 'TypeScript (Bun)']
+];
 </script>
 
 <Drawer bind:this={picker} size="1000px">
@@ -144,14 +154,14 @@ const langs = ['deno', 'python3', 'go', 'bash'];
 		</div>
 	</div>
 
-	<div class="flex flex-row w-full justify-between">
+	<div class="flex flex-row w-full gap-8">
 		<div class="">
 			<div class="mb-1 text-sm font-semibold">Backend</div>
 
-			<div class="flex gap-2 flex-row flex-wrap">
-				{#each langs as lang}
+			<div class="flex flex-row flex-wrap gap-2">
+				{#each langs as [lang, label]}
 					<FlowScriptPicker
-						label={lang === 'deno' ? 'Typescript' : capitalize(lang)}
+						{label}
 						{lang}
 						on:click={() => {
 							createInlineScriptByLanguage(lang, name)
@@ -159,26 +169,6 @@ const langs = ['deno', 'python3', 'go', 'bash'];
 					/>
 				{/each}
 			</div>
-
-			<div class="mt-2 mb-2 text-sm">Typescript templates</div>
-
-			<div class="flex gap-2 flex-row flex-wrap mb-4">
-				<FlowScriptPicker
-					label={`PostgreSQL`}
-					lang="pgsql"
-					on:click={() => {
-						createInlineScriptByLanguage(Script.language.DENO, name, 'pgsql')
-					}}
-				/>
-
-				<FlowScriptPicker
-					label={`HTTP`}
-					lang="fetch"
-					on:click={() => {
-						createInlineScriptByLanguage(Script.language.DENO, name, 'fetch')
-					}}
-				/>
-			</div>
 		</div>
 		<div class="">
 			<div class="mb-1 text-sm font-semibold">

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -5,7 +5,7 @@ import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte';
 import { inferArgs } from '../../../../infer';
 import Badge from '../../../common/badge/Badge.svelte';
 import Editor from '../../../Editor.svelte';
-import { emptySchema, getModifierKey } from '../../../../utils';
+import { defaultIfEmptyString, emptySchema, getModifierKey } from '../../../../utils';
 import { computeFields } from './utils';
 import { deepEqual } from 'fast-equals';
 import Kbd from '../../../common/kbd/Kbd.svelte';
@@ -13,6 +13,8 @@ import SimpleEditor from '../../../SimpleEditor.svelte';
 import { buildExtraLib } from '../../utils';
 import RunButton from './RunButton.svelte';
 import { scriptLangToEditorLang } from '../../../../scripts';
+import ScriptGen from '../../../codeGen/ScriptGen.svelte';
+import DiffEditor from '../../../DiffEditor.svelte';
 let inlineScriptEditorDrawer;
 export let inlineScript;
 export let name = undefined;
@@ -23,7 +25,8 @@ export let syncFields = false;
 export let transformer = false;
 export let componentType = undefined;
 const { runnableComponents, stateId, worldStore, state, appPath, app } = getContext('AppViewerContext');
-let editor;
+export let editor = undefined;
+let diffEditor;
 let simpleEditor;
 let validCode = true;
 async function inferInlineScriptSchema(language, content, schema) {
@@ -37,7 +40,7 @@ async function inferInlineScriptSchema(language, content, schema) {
     }
     return schema;
 }
-$: inlineScript && (inlineScript.path = `${appPath}/${name}`);
+$: inlineScript && (inlineScript.path = `${defaultIfEmptyString(appPath, '')}/${name}`);
 onMount(async () => {
     if (inlineScript && !inlineScript.schema) {
         if (inlineScript.language != 'frontend') {
@@ -86,7 +89,7 @@ async function loadSchemaAndInputsByName() {
 }
 $: extraLib =
     inlineScript?.language == 'frontend' && worldStore
-        ? buildExtraLib($worldStore?.outputsById ?? {}, id, false, $state, true)
+        ? buildExtraLib($worldStore?.outputsById ?? {}, id, $state, true)
         : undefined;
 let drawerIsOpen = undefined;
 </script>
@@ -122,6 +125,13 @@ let drawerIsOpen = undefined;
 					<Badge color="red" baseClass="!text-2xs">Invalid</Badge>
 				{/if}
 
+				<ScriptGen
+					lang={inlineScript?.language}
+					editor={inlineScript?.language === 'frontend' ? simpleEditor : editor}
+					{diffEditor}
+					inlineScript
+				/>
+
 				<Button
 					title="Delete"
 					size="xs"
@@ -136,7 +146,7 @@ let drawerIsOpen = undefined;
 					<Button
 						size="xs"
 						color="light"
-						btnClasses="!px-2 !bg-gray-100 hover:!bg-gray-200"
+						btnClasses="!px-2 !bg-surface-secondary hover:!bg-surface-hover"
 						on:click={() => {
 							inlineScriptEditorDrawer?.openDrawer()
 						}}
@@ -171,54 +181,64 @@ let drawerIsOpen = undefined;
 		<!-- {inlineScript.content} -->
 
 		<div class="border-y h-full">
-			{#if inlineScript.language != 'frontend' && !drawerIsOpen}
-				<Editor
-					path={inlineScript.path}
-					bind:this={editor}
-					class="flex flex-1 grow h-full"
-					lang={scriptLangToEditorLang(inlineScript?.language)}
-					bind:code={inlineScript.content}
-					fixedOverflowWidgets={true}
-					cmdEnterAction={async () => {
-						if (inlineScript) {
-							inlineScript.content = editor?.getCode() ?? ''
-						}
-						runLoading = true
-						await Promise.all($runnableComponents[id]?.cb?.map((f) => f?.(inlineScript)) ?? [])
-						runLoading = false
-					}}
-					on:change={async (e) => {
-						if (inlineScript && inlineScript.language != 'frontend') {
-							const oldSchema = JSON.stringify(inlineScript.schema)
-							if (inlineScript.schema == undefined) {
-								inlineScript.schema = emptySchema()
+			{#if !drawerIsOpen}
+				{#if inlineScript.language != 'frontend'}
+					<Editor
+						deno={inlineScript.language == 'deno'}
+						path={inlineScript.path}
+						bind:this={editor}
+						class="flex flex-1 grow h-full"
+						lang={scriptLangToEditorLang(inlineScript?.language)}
+						bind:code={inlineScript.content}
+						fixedOverflowWidgets={true}
+						cmdEnterAction={async () => {
+							if (inlineScript) {
+								inlineScript.content = editor?.getCode() ?? ''
 							}
-							await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
-							if (JSON.stringify(inlineScript.schema) != oldSchema) {
-								inlineScript = inlineScript
-								loadSchemaAndInputsByName()
+							runLoading = true
+							await Promise.all($runnableComponents[id]?.cb?.map((f) => f?.(inlineScript)) ?? [])
+							runLoading = false
+						}}
+						on:change={async (e) => {
+							if (inlineScript && inlineScript.language != 'frontend') {
+								const oldSchema = JSON.stringify(inlineScript.schema)
+								if (inlineScript.schema == undefined) {
+									inlineScript.schema = emptySchema()
+								}
+								await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
+								if (JSON.stringify(inlineScript.schema) != oldSchema) {
+									inlineScript = inlineScript
+									loadSchemaAndInputsByName()
+								}
 							}
-						}
-						$app = $app
-					}}
-				/>
-			{:else}
-				<SimpleEditor
-					bind:this={simpleEditor}
-					class="h-full"
-					{extraLib}
-					bind:code={inlineScript.content}
-					lang="javascript"
-					cmdEnterAction={async () => {
-						runLoading = true
-						await await Promise.all(
-							$runnableComponents[id]?.cb?.map((f) => f(!transformer ? inlineScript : undefined))
-						)
-						runLoading = false
-					}}
-					on:change={() => {
-						$app = $app
-					}}
+							$app = $app
+						}}
+					/>
+				{:else}
+					<SimpleEditor
+						bind:this={simpleEditor}
+						class="h-full"
+						{extraLib}
+						bind:code={inlineScript.content}
+						lang="javascript"
+						cmdEnterAction={async () => {
+							runLoading = true
+							await await Promise.all(
+								$runnableComponents[id]?.cb?.map((f) => f(!transformer ? inlineScript : undefined))
+							)
+							runLoading = false
+						}}
+						on:change={() => {
+							$app = $app
+						}}
+					/>
+				{/if}
+
+				<DiffEditor
+					bind:this={diffEditor}
+					class="hidden h-full"
+					automaticLayout
+					fixedOverflowWidgets
 				/>
 			{/if}
 		</div>

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { InlineScript } from '../../types';
+import Editor from '../../../Editor.svelte';
 import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
@@ -11,6 +12,7 @@ declare const __propDef: {
         syncFields?: boolean | undefined;
         transformer?: boolean | undefined;
         componentType?: string | undefined;
+        editor?: Editor | undefined;
     };
     events: {
         keydown: KeyboardEvent;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte

@@ -39,7 +39,7 @@ async function fork(runnable) {
 			}}
 		/>
 	{:else}
-		<span class="px-2 text-gray-600">
+		<span class="px-2 text-tertiary">
 			Selected editor component is a transformer but component has no transformer
 		</span>
 	{/if}

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte

@@ -3,6 +3,7 @@ import EmptyInlineScript from './EmptyInlineScript.svelte';
 import InlineScriptRunnableByPath from './InlineScriptRunnableByPath.svelte';
 export let runnable;
 export let id;
+export let transformer;
 async function fork(nrunnable) {
     runnable = { ...runnable, ...nrunnable, autoRefresh: true, recomputeOnInputChanged: true };
 }
@@ -17,7 +18,26 @@ function onPick(o) {
 }
 </script>
 
-{#if runnable?.type === 'runnableByName' && runnable.inlineScript}
+{#if transformer}
+	{#if runnable.transformer}
+		<InlineScriptEditor
+			transformer
+			defaultUserInput={false}
+			{id}
+			componentType={undefined}
+			bind:inlineScript={runnable.transformer}
+			name="Transformer"
+			on:delete={() => {
+				runnable.transformer = undefined
+				runnable = runnable
+			}}
+		/>
+	{:else}
+		<span class="px-2 text-tertiary">
+			Selected editor component is a transformer but component has no transformer
+		</span>
+	{/if}
+{:else if runnable?.type === 'runnableByName' && runnable.inlineScript}
 	<InlineScriptEditor
 		{id}
 		bind:inlineScript={runnable.inlineScript}

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         runnable: HiddenRunnable;
         id: string;
+        transformer: boolean;
     };
     events: {
         delete: CustomEvent<any>;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte

@@ -8,8 +8,7 @@ import { workspaceStore } from '../../../../stores';
 import { createEventDispatcher } from 'svelte';
 import { deepEqual } from 'fast-equals';
 import { computeFields } from './utils';
-import { loadSchema } from '../../utils';
-import { inferArgs } from '../../../../infer';
+import { inferArgs, loadSchema } from '../../../../infer';
 import RunButton from './RunButton.svelte';
 import { getScriptByPath } from '../../../../scripts';
 import { sendUserToast } from '../../../../toast';