windmill-components 1.55.1 → 1.55.2

package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -1,22 +1,23 @@
-<script>import { ToggleButton, ToggleButtonGroup } from '../../../common';
-import Button from '../../../common/button/Button.svelte';
-import { faArrowRight, faClose, faCode, faMinimize, faPen, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { AlignStartHorizontal, AlignStartVertical, AlignCenterHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignEndVertical } from 'lucide-svelte';
+<script>import Button from '../../../common/button/Button.svelte';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
 import InputsSpecsEditor from './InputsSpecsEditor.svelte';
 import TableActions from './TableActions.svelte';
-import StaticInputEditor from './StaticInputEditor.svelte';
-import ConnectedInputEditor from './ConnectedInputEditor.svelte';
+import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
+import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
 import Badge from '../../../common/badge/Badge.svelte';
 import { capitalize } from '../../../../utils';
 import { fieldTypeToTsType } from '../../utils';
 import Recompute from './Recompute.svelte';
-import Alert from '../../../common/alert/Alert.svelte';
-import RunnableSelector from './mainInput/RunnableSelector.svelte';
+import Tooltip from '../../../Tooltip.svelte';
+import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
+import AlignmentEditor from './AlignmentEditor.svelte';
+import RunnableInputEditor from './inputEditor/RunnableInputEditor.svelte';
+import TemplateEditor from '../../../TemplateEditor.svelte';
 export let component;
 export let onDelete = undefined;
-const { app, staticOutputs, runnableComponents } = getContext('AppEditorContext');
+const { app, staticOutputs, runnableComponents, worldStore } = getContext('AppEditorContext');
 function removeGridElement() {
     if (onDelete && component) {
         delete $staticOutputs[component.id];
@@ -37,92 +38,66 @@ function removeGridElement() {
         }
     }
 }
+export function buildExtraLib(components) {
+    return Object.entries(components)
+        .filter(([k, v]) => k != component?.id)
+        .map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])
+        .map(([k, v]) => `
+
+declare const ${k} = ${JSON.stringify(v)};
+
+`)
+        .join('\n');
+}
+$: extraLib =
+    component?.componentInput?.type === 'template' && $worldStore
+        ? buildExtraLib($worldStore?.outputsById ?? {})
+        : undefined;
 </script>
 
 {#if component}
 	<div class="flex flex-col w-full divide-y">
 		{#if component.componentInput}
-			<PanelSection title="Main input">
+			<PanelSection
+				title={component.componentInput.fieldType === 'any' ? 'Runnable' : 'Component input'}
+			>
 				<svelte:fragment slot="action">
-					<Badge color="blue">
-						{component.componentInput.fieldType === 'array' && component.componentInput.subFieldType
-							? `${capitalize(fieldTypeToTsType(component.componentInput.subFieldType))}[]`
-							: capitalize(fieldTypeToTsType(component.componentInput.fieldType))}
-					</Badge>
+					{#if component.componentInput.fieldType !== 'any'}
+						<Badge color="blue">
+							{component.componentInput.fieldType === 'array' &&
+							component.componentInput.subFieldType
+								? `${capitalize(fieldTypeToTsType(component.componentInput.subFieldType))}[]`
+								: capitalize(fieldTypeToTsType(component.componentInput.fieldType))}
+						</Badge>
+					{/if}
 				</svelte:fragment>
-				<div class="w-full">
-					<ToggleButtonGroup bind:selected={component.componentInput.type}>
-						<ToggleButton
-							position="left"
-							value="static"
-							startIcon={{ icon: faPen }}
-							size="xs"
-							disable={component.type === 'buttoncomponent'}
-						>
-							Static
-						</ToggleButton>
-						<ToggleButton
-							value="connected"
-							position="center"
-							startIcon={{ icon: faArrowRight }}
-							size="xs"
-						>
-							Connected
-						</ToggleButton>
-						<ToggleButton position="right" value="runnable" startIcon={{ icon: faCode }} size="xs">
-							Computed
-						</ToggleButton>
-					</ToggleButtonGroup>
-				</div>
+
+				<ComponentInputTypeEditor bind:componentInput={component.componentInput} />
 				<div class="flex flex-col w-full gap-2 my-2">
 					{#if component.componentInput.type === 'static'}
 						<StaticInputEditor bind:componentInput={component.componentInput} />
+					{:else if component.componentInput.type === 'template' && component.componentInput !== undefined}
+						<TemplateEditor bind:code={component.componentInput.eval} {extraLib} />
 					{:else if component.componentInput.type === 'connected' && component.componentInput !== undefined}
 						<ConnectedInputEditor bind:componentInput={component.componentInput} />
-					{:else if component && component.componentInput?.type === 'runnable' && component.componentInput.runnable}
-						<div class="flex justify-between w-full items-center">
-							<span class="text-xs">
-								{component.componentInput.runnable.type === 'runnableByName'
-									? component.componentInput.runnable.inlineScriptName
-									: component.componentInput.runnable.path}
-							</span>
-							<Button
-								size="xs"
-								color="red"
-								variant="border"
-								startIcon={{ icon: faClose }}
-								on:click={() => {
-									if (component?.componentInput?.type === 'runnable') {
-										component.componentInput.runnable = undefined
-										component.componentInput.fields = {}
-										component = component
-									}
-								}}
-							>
-								Clear
-							</Button>
-						</div>
-					{:else}
-						<RunnableSelector
-							inlineScripts={Object.keys($app.inlineScripts)}
-							bind:componentInput={component.componentInput}
-						/>
+					{:else if component.componentInput?.type === 'runnable' && component.componentInput !== undefined}
+						<RunnableInputEditor bind:appInput={component.componentInput} />
 					{/if}
 				</div>
 				{#if component.componentInput?.type === 'runnable' && Object.keys(component.componentInput.fields ?? {}).length > 0}
 					<div class="border w-full">
 						<PanelSection
+							smallPadding
 							title={`Runnable inputs (${
 								Object.keys(component.componentInput.fields ?? {}).length
 							})`}
-							smallPadding
 						>
-							{#if component.type === 'buttoncomponent'}
-								<Alert title="Button inputs" type="info" size="xs">
+							<svelte:fragment slot="action">
+								<Tooltip>
 									The runnable inputs of a button component are not settable by the user. They must
 									be defined statically or connected.
-								</Alert>
-							{/if}
+								</Tooltip>
+							</svelte:fragment>
 
 							<InputsSpecsEditor
 								bind:inputSpecs={component.componentInput.fields}
@@ -131,15 +106,6 @@ function removeGridElement() {
 						</PanelSection>
 					</div>
 				{/if}
-
-				{#if component.type === 'buttoncomponent'}
-					<div class="w-full">
-						<Alert size="xs" type="warning" title="Result output">
-							This input is not directly used by the component. It is piped to the component's
-							<code>result</code> output.
-						</Alert>
-					</div>
-				{/if}
 			</PanelSection>
 		{/if}
 
@@ -153,55 +119,7 @@ function removeGridElement() {
 			<TableActions bind:components={component.actionButtons} />
 		{/if}
 
-		{#if component.verticalAlignment !== undefined}
-			<PanelSection title="Alignment">
-				<svelte:fragment slot="action">
-					<Button
-						size="xs"
-						on:click={() => {
-							if (component) {
-								component.verticalAlignment = 'center'
-								component.horizontalAlignment = 'center'
-							}
-						}}
-						startIcon={{ icon: faMinimize }}
-					>
-						Center
-					</Button>
-				</svelte:fragment>
-				<div class="w-full text-xs font-semibold">Horizontal alignment</div>
-
-				<div class="w-full">
-					<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
-						<ToggleButton position="left" value="left" size="xs">
-							<AlignStartVertical size={16} />
-						</ToggleButton>
-						<ToggleButton position="center" value="center" size="xs">
-							<AlignCenterVertical size={16} />
-						</ToggleButton>
-						<ToggleButton position="right" value="right" size="xs">
-							<AlignEndVertical size={16} />
-						</ToggleButton>
-					</ToggleButtonGroup>
-				</div>
-				{#if component.type !== 'formcomponent'}
-					<div class="w-full text-xs font-semibold">Vertical alignment</div>
-					<div class="w-full">
-						<ToggleButtonGroup bind:selected={component.verticalAlignment}>
-							<ToggleButton position="left" value="top" size="xs">
-								<AlignStartHorizontal size={16} />
-							</ToggleButton>
-							<ToggleButton position="center" value="center" size="xs">
-								<AlignCenterHorizontal size={16} />
-							</ToggleButton>
-							<ToggleButton position="right" value="bottom" size="xs">
-								<AlignEndHorizontal size={16} />
-							</ToggleButton>
-						</ToggleButtonGroup>
-					</div>
-				{/if}
-			</PanelSection>
-		{/if}
+		<AlignmentEditor bind:component />
 		{#if component.type === 'buttoncomponent' || component.type === 'formcomponent'}
 			<Recompute bind:recomputeIds={component.recomputeIds} ownId={component.id} />
 		{/if}

package/components/apps/editor/settingsPanel/ComponentPanel.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppComponent } from '../../types';
+import type { Output } from '../../rx';
 declare const __propDef: {
     props: {
         component: AppComponent | undefined;
         onDelete?: (() => void) | undefined;
+        buildExtraLib?: ((components: Record<string, Record<string, Output<any>>>) => string) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -14,5 +16,6 @@ export type ComponentPanelProps = typeof __propDef.props;
 export type ComponentPanelEvents = typeof __propDef.events;
 export type ComponentPanelSlots = typeof __propDef.slots;
 export default class ComponentPanel extends SvelteComponentTyped<ComponentPanelProps, ComponentPanelEvents, ComponentPanelSlots> {
+    get buildExtraLib(): (components: Record<string, Record<string, Output<any>>>) => string;
 }
 export {};

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -1,5 +1,5 @@
-<script>import ConnectedInputEditor from './ConnectedInputEditor.svelte';
-import StaticInputEditor from './StaticInputEditor.svelte';
+<script>import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
+import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 export let componentInput;
 export let canHide = false;
 </script>

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -14,7 +14,7 @@ export let staticOnly = false;
 			{@const input = inputSpecs[inputSpecKey]}
 			{#if true}
 				<div class="flex flex-col gap-2">
-					<div class="flex justify-between items-center">
+					<div class="flex justify-between items-center gap-1">
 						<span class="text-xs font-semibold">{capitalize(inputSpecKey)}</span>
 
 						<div class="flex gap-2 items-center">

package/components/apps/editor/settingsPanel/Recompute.svelte

@@ -15,7 +15,7 @@ function onChange(event, id) {
 </script>
 
 <PanelSection title="Recompute">
-	{#if Object.keys($runnableComponents ?? {}).length > 0}
+	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
 		<table class="divide-y divide-gray-300 border w-full">
 			<thead class="bg-gray-50">
 				<tr>
@@ -41,6 +41,6 @@ function onChange(event, id) {
 			</tbody>
 		</table>
 	{:else}
-		<div class="text-xs">No components to recompute</div>
+		<div class="text-xs">No components to recompute. Create one and select it here.</div>
 	{/if}
 </PanelSection>

package/components/apps/editor/settingsPanel/SelectedRunnable.svelte

@@ -0,0 +1,46 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons';
+import { clearResultAppInput } from '../../utils';
+import InlineScriptEditorDrawer from '../inlineScriptsPanel/InlineScriptEditorDrawer.svelte';
+export let appInput;
+let inlineScriptEditorDrawer;
+function edit() {
+    if (appInput.runnable?.type === 'runnableByName') {
+        inlineScriptEditorDrawer?.openDrawer();
+    }
+}
+function clear() {
+    appInput = clearResultAppInput(appInput);
+}
+</script>
+
+{#if appInput.runnable && appInput.runnable.type === 'runnableByName' && appInput.runnable.inlineScript}
+	<InlineScriptEditorDrawer
+		bind:this={inlineScriptEditorDrawer}
+		bind:inlineScript={appInput.runnable.inlineScript}
+	/>
+{/if}
+<div class="flex justify-between w-full items-center gap-1">
+	<span class="text-xs font-semibold">
+		{#if appInput.runnable?.type === 'runnableByName'}
+			{appInput.runnable.name}
+		{:else if appInput.runnable?.type === 'runnableByPath'}
+			{appInput.runnable.path}
+		{/if}
+	</span>
+	<div class="flex flex-wrap gap-1">
+		{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
+			<Button size="xs" color="light" variant="border" startIcon={{ icon: faEdit }} on:click={edit}>
+				Edit
+			</Button>
+		{/if}
+		<Button size="xs" color="red" variant="border" startIcon={{ icon: faClose }} on:click={clear}>
+			Clear
+		</Button>
+	</div>
+</div>
+{#if appInput.runnable?.type === 'runnableByName' && !appInput.runnable.inlineScript}
+	<span class="text-xs text-gray-500">
+		Please configure the language in the inline script panel
+	</span>
+{/if}

package/components/apps/editor/settingsPanel/SelectedRunnable.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ResultAppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        appInput: ResultAppInput;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectedRunnableProps = typeof __propDef.props;
+export type SelectedRunnableEvents = typeof __propDef.events;
+export type SelectedRunnableSlots = typeof __propDef.slots;
+export default class SelectedRunnable extends SvelteComponentTyped<SelectedRunnableProps, SelectedRunnableEvents, SelectedRunnableSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/SubTypeEditor.svelte

@@ -1,4 +1,4 @@
-<script>import StaticInputEditor from './StaticInputEditor.svelte';
+<script>import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 export let value;
 export let canHide = false;
 export let componentInput;

package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -4,7 +4,7 @@ export let smallPadding = false;
 </script>
 
 <div class={classNames('flex flex-col gap-2 items-start', smallPadding ? 'p-2' : 'p-4')}>
-	<div class="flex justify-between items-center w-full">
+	<div class="flex justify-between items-center w-full gap-1">
 		<div class="text-sm font-extrabold">{title}</div>
 		<slot name="action" />
 	</div>

package/components/apps/editor/settingsPanel/{ConnectedInputEditor.svelte → inputEditor/ConnectedInputEditor.svelte}

@@ -1,4 +1,4 @@
-<script>import { Badge, Button } from '../../../common';
+<script>import { Badge, Button } from '../../../../common';
 import { faArrowRight, faClose } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 export let componentInput;
@@ -8,7 +8,6 @@ function applyConnection() {
         $connectingInput.input !== undefined &&
         componentInput.type === 'connected' &&
         !componentInput.connection) {
-        debugger;
         componentInput.connection = $connectingInput.input.connection;
         $connectingInput = {
             opened: false,

package/components/apps/editor/settingsPanel/{ConnectedInputEditor.svelte.d.ts → inputEditor/ConnectedInputEditor.svelte.d.ts}

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
+import type { AppInput } from '../../../inputType';
 declare const __propDef: {
     props: {
         componentInput: AppInput;

package/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte

@@ -0,0 +1,12 @@
+<script>import { isScriptByNameDefined, isScriptByPathDefined } from '../../../utils';
+import RunnableSelector from '../mainInput/RunnableSelector.svelte';
+import SelectedRunnable from '../SelectedRunnable.svelte';
+export let appInput;
+$: isRunnableSelected = isScriptByPathDefined(appInput) || isScriptByNameDefined(appInput);
+</script>
+
+{#if isRunnableSelected}
+	<SelectedRunnable bind:appInput />
+{:else}
+	<RunnableSelector bind:appInput />
+{/if}

package/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ResultAppInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        appInput: ResultAppInput;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RunnableInputEditorProps = typeof __propDef.props;
+export type RunnableInputEditorEvents = typeof __propDef.events;
+export type RunnableInputEditorSlots = typeof __propDef.slots;
+export default class RunnableInputEditor extends SvelteComponentTyped<RunnableInputEditorProps, RunnableInputEditorEvents, RunnableInputEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/{StaticInputEditor.svelte → inputEditor/StaticInputEditor.svelte}

@@ -1,7 +1,7 @@
-<script>import Toggle from '../../../Toggle.svelte';
-import { staticValues } from '../componentsPanel/componentStaticValues';
-import SimpleEditor from '../../../SimpleEditor.svelte';
-import ArrayStaticInputEditor from './ArrayStaticInputEditor.svelte';
+<script>import Toggle from '../../../../Toggle.svelte';
+import { staticValues } from '../../componentsPanel/componentStaticValues';
+import SimpleEditor from '../../../../SimpleEditor.svelte';
+import ArrayStaticInputEditor from '../ArrayStaticInputEditor.svelte';
 export let componentInput;
 export let canHide = false;
 </script>
@@ -14,7 +14,7 @@ export let canHide = false;
 	{#if componentInput.fieldType === 'number'}
 		<input type="number" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'textarea'}
-		<textarea bind:value={componentInput.value} />
+		<textarea type="text" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'boolean'}
 		<Toggle bind:checked={componentInput.value} />
 	{:else if componentInput.fieldType === 'select'}

package/components/apps/editor/settingsPanel/{StaticInputEditor.svelte.d.ts → inputEditor/StaticInputEditor.svelte.d.ts}

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { StaticAppInput } from '../../inputType';
+import type { StaticAppInput } from '../../../inputType';
 declare const __propDef: {
     props: {
         componentInput: StaticAppInput | undefined;

package/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte

@@ -21,9 +21,12 @@ const dispatch = createEventDispatcher();
 	/>
 </div>
 
-{#if inlineScripts.length == 0}
-	Should create
-{:else if filteredItems.length == 0}
+{#if inlineScripts.length === 0}
+	<div class="flex flex-col  w-full h-full">
+		<div class="text-md ">No inline scripts</div>
+		<div class="text-sm">Add inline scripts to your app</div>
+	</div>
+{:else if filteredItems.length === 0}
 	<NoItemFound />
 {:else}
 	<ul class="divide-y divide-gray-200 border rounded-md">

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -1,18 +1,19 @@
-<script>import { faMousePointer } from '@fortawesome/free-solid-svg-icons';
+<script>import { faMousePointer, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { Button, Drawer, DrawerContent, Tab, Tabs } from '../../../../common';
 import PickHubScript from '../../../../flows/pickers/PickHubScript.svelte';
 import { Building, Globe2 } from 'lucide-svelte';
 import InlineScriptList from './InlineScriptList.svelte';
 import WorkspaceScriptList from './WorkspaceScriptList.svelte';
 import WorkspaceFlowList from './WorkspaceFlowList.svelte';
-export let inlineScripts;
-export let componentInput;
-let tab = 'workspacescripts';
+import { getContext } from 'svelte';
+export let appInput;
+let tab = 'inlinescripts';
 let filter = '';
 let picker;
+const { app } = getContext('AppEditorContext');
 function pickScript(path) {
-    if (componentInput.type === 'runnable') {
-        componentInput.runnable = {
+    if (appInput.type === 'runnable') {
+        appInput.runnable = {
             type: 'runnableByPath',
             path,
             runType: 'script'
@@ -20,22 +21,50 @@ function pickScript(path) {
     }
 }
 function pickFlow(path) {
-    if (componentInput.type === 'runnable') {
-        componentInput.runnable = {
+    if (appInput.type === 'runnable') {
+        appInput.runnable = {
             type: 'runnableByPath',
             path,
             runType: 'flow'
         };
     }
 }
-function pickInlineScript(inlineScriptName) {
-    if (componentInput.type === 'runnable') {
-        componentInput.runnable = {
+function pickInlineScript(name) {
+    const unusedInlineScriptIndex = $app.unusedInlineScripts?.findIndex((script) => script.name === name);
+    const unusedInlineScript = $app.unusedInlineScripts?.[unusedInlineScriptIndex];
+    if (appInput.type === 'runnable' && unusedInlineScript?.inlineScript) {
+        appInput.runnable = {
             type: 'runnableByName',
-            inlineScriptName
+            name,
+            inlineScript: unusedInlineScript.inlineScript
         };
+        $app.unusedInlineScripts.splice(unusedInlineScriptIndex, 1);
     }
 }
+function createScript() {
+    let index = 0;
+    let newScriptPath = `inline_script_${index}`;
+    const names = $app.grid.reduce((acc, gridItem) => {
+        const { componentInput } = gridItem.data;
+        if (componentInput?.type === 'runnable' &&
+            componentInput?.runnable?.type === 'runnableByName') {
+            acc.push(componentInput.runnable.name);
+        }
+        return acc;
+    }, []);
+    const unusedNames = Object.keys($app.unusedInlineScripts ?? {});
+    // Find a name that is not used by any other inline script
+    while (names.includes(newScriptPath) || unusedNames.includes(newScriptPath)) {
+        newScriptPath = `inline_script_${++index}`;
+    }
+    appInput.runnable = {
+        type: 'runnableByName',
+        name: newScriptPath,
+        inlineScript: undefined
+    };
+    appInput = appInput;
+    return newScriptPath;
+}
 </script>
 
 <Drawer bind:this={picker} size="1000px">
@@ -72,7 +101,12 @@ function pickInlineScript(inlineScriptName) {
 				<div class="flex flex-col gap-y-16">
 					<div class="flex flex-col">
 						{#if tab == 'inlinescripts'}
-							<InlineScriptList {inlineScripts} on:pick={(e) => pickInlineScript(e.detail)} />
+							<InlineScriptList
+								on:pick={(e) => pickInlineScript(e.detail)}
+								inlineScripts={$app.unusedInlineScripts
+									? $app.unusedInlineScripts.map((uis) => uis.name)
+									: []}
+							/>
 						{:else if tab == 'workspacescripts'}
 							<WorkspaceScriptList on:pick={(e) => pickScript(e.detail)} />
 						{:else if tab == 'workspaceflows'}
@@ -87,12 +121,22 @@ function pickInlineScript(inlineScriptName) {
 	</DrawerContent>
 </Drawer>
 
-<Button
-	on:click={() => picker?.openDrawer()}
-	size="sm"
-	spacingSize="md"
-	color="blue"
-	startIcon={{ icon: faMousePointer }}
->
-	Pick
-</Button>
+<div class="flex flex-col gap-2">
+	<Button
+		on:click={createScript}
+		size="sm"
+		color="light"
+		variant="border"
+		startIcon={{ icon: faPlus }}
+	>
+		Create an inline script
+	</Button>
+	<Button
+		on:click={() => picker?.openDrawer()}
+		size="sm"
+		color="blue"
+		startIcon={{ icon: faMousePointer }}
+	>
+		Select a script
+	</Button>
+</div>

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../../inputType';
+import type { ResultAppInput } from '../../../inputType';
 declare const __propDef: {
     props: {
-        inlineScripts: string[];
-        componentInput: AppInput;
+        appInput: ResultAppInput;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte

@@ -2,7 +2,7 @@
 import SearchItems from '../../../../SearchItems.svelte';
 import NoItemFound from '../../../../home/NoItemFound.svelte';
 import RowIcon from '../../../../common/table/RowIcon.svelte';
-import { FlowService, Script, ScriptService } from '../../../../../gen';
+import { FlowService } from '../../../../../gen';
 import { workspaceStore } from '../../../../../stores';
 import { emptyString } from '../../../../../utils';
 import { Skeleton } from '../../../../common';

package/components/apps/gridUtils.d.ts

@@ -7,5 +7,7 @@ declare const Breakpoints: {
 declare const columnConfiguration: ColumnConfiguration;
 declare const gridColumns: number[];
 declare function disableDrag(component: GridItem): GridItem;
+declare function toggleFixed(component: GridItem): GridItem;
+declare function isFixed(component: GridItem): boolean;
 declare function enableDrag(component: GridItem): GridItem;
-export { gridColumns, columnConfiguration, disableDrag, enableDrag, Breakpoints };
+export { gridColumns, columnConfiguration, disableDrag, enableDrag, Breakpoints, toggleFixed, isFixed };