windmill-components 1.82.4 → 1.82.5

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

@@ -1,81 +1,67 @@
-<script>import { Forward, Paintbrush2 } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+<script>import { X } from 'lucide-svelte';
 import { fade } from 'svelte/transition';
-import { addWhitespaceBeforeCapitals, sendUserToast } from '../../../../utils';
-import { Button, ClearableInput } from '../../../common';
-import Popover from '../../../Popover.svelte';
-import QuickStyleMenu from './QuickStyleMenu.svelte';
+import { addWhitespaceBeforeCapitals } from '../../../../utils';
 export let name;
 export let value = {};
 export let forceStyle = false;
 export let forceClass = false;
-export let quickStyleProperties = undefined;
-const { app } = getContext('AppViewerContext');
-const dispatch = createEventDispatcher();
-let isQuickMenuOpen = false;
-$: dispatch('change', value);
-function toggleQuickMenu() {
-    isQuickMenuOpen = !isQuickMenuOpen;
+function reset(property) {
+    if (value) {
+        value[property] = '';
+    }
 }
 </script>
 
-<div
-	class="sticky top-0 z-20 text-lg bg-white font-semibold [font-variant:small-caps] text-gray-700 pt-2 pb-1"
->
+<div class="text-sm font-semibold text-gray-500 capitalize pt-2">
 	{addWhitespaceBeforeCapitals(name)}
 </div>
 {#if value}
-	<div class="border-l border-gray-400/80 py-1 pl-3.5 ml-0.5">
+	<div class="border-l border-gray-400/80 py-1 pl-3.5 mt-1 ml-0.5">
 		{#if value.style !== undefined || forceStyle}
-			<div class="pb-2">
-				<!-- svelte-ignore a11y-label-has-associated-control -->
-				<label class="block">
-					<div class="text-sm font-medium text-gray-600 pb-0.5"> Style </div>
-					<div class="flex gap-1">
-						<div class="relative grow">
-							<ClearableInput
-								bind:value={value.style}
-								type="textarea"
-								wrapperClass="h-full min-h-[72px]"
-								inputClass="h-full"
-							/>
-						</div>
-						<div class="flex flex-col gap-1">
-							{#if quickStyleProperties?.length}
-								<Popover placement="bottom" notClickable disapperTimoout={0}>
-									<Button
-										variant="border"
-										color="light"
-										size="xs"
-										btnClasses="!p-1 !w-[34px] !h-[34px] {isQuickMenuOpen
-											? '!bg-gray-200/60 hover:!bg-gray-200'
-											: ''}"
-										aria-label="{isQuickMenuOpen ? 'Close' : 'Open'} styling menu"
-										on:click={toggleQuickMenu}
-									>
-										<Paintbrush2 size={18} />
-									</Button>
-									<svelte:fragment slot="text">
-										{isQuickMenuOpen ? 'Close' : 'Open'} styling menu
-									</svelte:fragment>
-								</Popover>
-							{/if}
-						</div>
-					</div>
-				</label>
-				{#if quickStyleProperties?.length && isQuickMenuOpen}
-					<div transition:fade|local={{ duration: 200 }} class="w-full pt-1">
-						<QuickStyleMenu bind:value={value.style} properties={quickStyleProperties} />
-					</div>
-				{/if}
-			</div>
+			<label class="block pb-2">
+				<div class="text-xs font-medium pb-0.5"> Style </div>
+				<div class="relative">
+					<input
+						on:keydown|stopPropagation
+						type="text"
+						class="!pr-7"
+						bind:value={value.style}
+						on:focus
+					/>
+					{#if value?.style}
+						<button
+							transition:fade|local={{ duration: 100 }}
+							class="absolute z-10 top-1.5 right-1 rounded-full p-1 duration-200 hover:bg-gray-200"
+							aria-label="Remove styles"
+							on:click|preventDefault|stopPropagation={() => reset('style')}
+						>
+							<X size={14} />
+						</button>
+					{/if}
+				</div>
+			</label>
 		{/if}
 		{#if value.class !== undefined || forceClass}
-			<!-- svelte-ignore a11y-label-has-associated-control -->
 			<label class="block">
-				<div class="text-sm font-medium text-gray-600 pb-0.5"> Tailwind classes </div>
+				<div class="text-xs font-medium pb-0.5"> Tailwind classes </div>
 				<div class="relative">
-					<ClearableInput bind:value={value.class} />
+					<input
+						on:keydown|stopPropagation
+						type="text"
+						class="!pr-7"
+						bind:value={value.class}
+						on:focus
+					/>
+					{#if value?.class}
+						<button
+							transition:fade|local={{ duration: 100 }}
+							class="absolute z-10 top-1.5 right-1 rounded-full p-1 duration-200 hover:bg-gray-200"
+							aria-label="Remove classes"
+							on:click|preventDefault|stopPropagation={() => reset('class')}
+						>
+							<X size={14} />
+						</button>
+					{/if}
 				</div>
 			</label>
 		{/if}

package/components/apps/editor/componentsPanel/CssProperty.svelte.d.ts

@@ -1,16 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ComponentCssProperty } from '../../types';
-import type { StylePropertyKey } from './quickStyleProperties';
 declare const __propDef: {
     props: {
         name: string;
         value?: ComponentCssProperty | undefined;
         forceStyle?: boolean | undefined;
         forceClass?: boolean | undefined;
-        quickStyleProperties?: StylePropertyKey[] | undefined;
     };
     events: {
-        change: CustomEvent<any>;
+        keydown: KeyboardEvent;
+        focus: FocusEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -53,7 +53,6 @@ entries.sort((a, b) => a.name.localeCompare(b.name));
 let search = '';
 </script>
 
-<h3 class="w-full text-center text-gray-600 py-1">Global Styling</h3>
 <Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="relative">
 	<Tab value="ui" size="xs" class="grow">
 		<div class="m-1 center-center">

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

@@ -1,4 +1,4 @@
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
 const store = writable({});
 export const isOpenStore = {
     subscribe: store.subscribe,
@@ -6,11 +6,11 @@ export const isOpenStore = {
     /** If an item is already set, it won't get updated. */
     addItems: (items) => {
         let newItems = {};
-        items.forEach((item) => (newItems = { ...newItems, ...item }));
-        store.update((last) => ({ ...newItems, ...last }));
+        items.forEach(item => newItems = { ...newItems, ...item });
+        store.update(last => ({ ...newItems, ...last }));
     },
     toggle: (id) => {
-        store.update((last) => ({ ...last, [id]: !last[id] }));
+        store.update(last => ({ ...last, [id]: !last[id] }));
     },
     reset: () => store.set({})
 };

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

@@ -8,8 +8,9 @@ import TableActionsOutput from './components/TableActionsOutput.svelte';
 export let gridItem;
 export let first = false;
 export let nested = false;
+export let parentId = undefined;
 export let expanded = false;
-const { connectingInput } = getContext('AppViewerContext');
+const { selectedComponent, connectingInput } = getContext('AppViewerContext');
 const name = getComponentNameById(gridItem.id);
 function getComponentNameById(componentId) {
     if (gridItem?.data?.type) {
@@ -26,9 +27,32 @@ function getComponentNameById(componentId) {
     }
 }
 $: subGrids = Array.from({ length: gridItem.data.numberOfSubgrids ?? 0 }).map((_, i) => `${gridItem.id}-${i}`);
+function onHeaderClick(manuallyOpen) {
+    if (manuallyOpen) {
+        if (parentId) {
+            $selectedComponent = parentId;
+        }
+        else {
+            $selectedComponent = undefined;
+        }
+    }
+    else {
+        $selectedComponent = gridItem.id;
+    }
+}
 </script>
 
-<OutputHeader id={gridItem.id} name={getComponentNameById(gridItem.id)} {first} {nested}>
+<OutputHeader
+	on:handleClick={(e) => {
+		if (!$connectingInput.opened) {
+			onHeaderClick(e.detail.manuallyOpen)
+		}
+	}}
+	id={gridItem.id}
+	name={getComponentNameById(gridItem.id)}
+	{first}
+	{nested}
+>
 	<ComponentOutputViewer
 		componentId={gridItem.id}
 		on:select={({ detail }) => {

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         gridItem: GridItem;
         first?: boolean | undefined;
         nested?: boolean | undefined;
+        parentId?: string | undefined;
         expanded?: boolean | undefined;
     };
     events: {

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

@@ -23,12 +23,10 @@ $: filtered = recursivelyFilterInJSON(object, $search, componentId);
 $: $hasResult[componentId] = Object.keys(filtered).length > 0;
 </script>
 
-{#if object != undefined && Object.keys(object).length > 0}
-	{#if $hasResult[componentId] || $search == ''}
-		<ObjectViewer json={filtered} on:select topBrackets={false} />
-	{:else if $search.length > 0}
-		<div class="text-xs pl-2 text-gray-600">No results</div>
-	{:else}
-		<div class="text-xs pl-2 text-gray-600">No outputs</div>
-	{/if}
+{#if $hasResult[componentId] || $search == ''}
+	<ObjectViewer json={filtered} on:select topBrackets={false} />
+{:else if $search.length > 0}
+	<div class="text-xs pl-2 text-gray-600">No results</div>
+{:else}
+	<div class="text-xs pl-2 text-gray-600">No outputs</div>
 {/if}

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

@@ -6,21 +6,24 @@ import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import ComponentOutput from './ComponentOutput.svelte';
 import ComponentOutputViewer from './ComponentOutputViewer.svelte';
 import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte';
+import MinMaxButton from './components/MinMaxButton.svelte';
 import OutputHeader from './components/OutputHeader.svelte';
 const { connectingInput, app } = getContext('AppViewerContext');
 let search = writable('');
+let expanded = writable(false);
 setContext('ContextPanel', {
     search,
     manuallyOpened: writable({}),
-    hasResult: writable({})
+    hasResult: writable({}),
+    expanded
 });
 </script>
 
-<PanelSection noPadding titlePadding="px-1.5 pt-2" title="Outputs">
-	<div class="bg-white h-auto w-full z-30 ">
+<PanelSection noPadding titlePadding="px-4 pt-2 pb-0.5" title="Outputs">
+	<div class="bg-white w-full h-full z-30">
 		<div class="min-w-[150px]">
-			<div class="sticky z-10 top-0 left-0 w-full bg-white p-1.5">
-				<div class="relative w-full">
+			<div class="sticky z-10 top-0 left-0 w-full bg-white p-2">
+				<div class="relative">
 					<input
 						bind:value={$search}
 						class="px-2 pb-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
@@ -37,11 +40,15 @@ setContext('ContextPanel', {
 				</div>
 			</div>
 
+			<div class="p-1 ">
+				<MinMaxButton bind:expanded={$expanded} />
+			</div>
+
 			<div class="flex flex-col gap-4">
 				<div>
 					<span class="text-xs font-bold p-2">State & Context</span>
 
-					<OutputHeader selectable={false} id={'ctx'} name={'App Context'} first color="blue">
+					<OutputHeader id={'ctx'} name={'App Context'} first color="blue">
 						<ComponentOutputViewer
 							componentId={'ctx'}
 							on:select={({ detail }) => {
@@ -50,7 +57,7 @@ setContext('ContextPanel', {
 						/>
 					</OutputHeader>
 
-					<OutputHeader selectable={false} id={'state'} name={'State'} color="blue">
+					<OutputHeader id={'state'} name={'State'} color="blue">
 						<ComponentOutputViewer
 							componentId={'state'}
 							on:select={({ detail }) => {

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

@@ -2,13 +2,36 @@
 import { connectInput } from '../../appUtils';
 import ComponentOutputViewer from '../ComponentOutputViewer.svelte';
 import OutputHeader from './OutputHeader.svelte';
-const { connectingInput } = getContext('AppViewerContext');
+const { selectedComponent, connectingInput } = getContext('AppViewerContext');
 export let id;
 export let name;
 export let first = false;
+function onHeaderClick(manuallyOpen) {
+    if (manuallyOpen) {
+        if (id) {
+            $selectedComponent = id;
+        }
+        else {
+            $selectedComponent = undefined;
+        }
+    }
+    else {
+        $selectedComponent = id;
+    }
+}
 </script>
 
-<OutputHeader selectable={false} {id} {name} color="blue" {first}>
+<OutputHeader
+	{id}
+	{name}
+	color="blue"
+	{first}
+	on:handleClick={(e) => {
+		if (!$connectingInput.opened) {
+			onHeaderClick(e.detail.manuallyOpen)
+		}
+	}}
+>
 	<ComponentOutputViewer
 		componentId={id}
 		on:select={({ detail }) => {

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

@@ -0,0 +1,25 @@
+<script>import Button from '../../../../common/button/Button.svelte';
+import { Maximize, Minimize } from 'lucide-svelte';
+export let expanded = false;
+</script>
+
+<Button
+	on:click={() => {
+		expanded = !expanded
+	}}
+	color="light"
+	size="xs"
+	variant="border"
+>
+	{#if !expanded}
+		<div class="flex flex-row gap-2">
+			<Maximize size="14" />
+			Expand all
+		</div>
+	{:else}
+		<div class="flex flex-row gap-2">
+			<Minimize size="14" />
+			Collapse all
+		</div>
+	{/if}
+</Button>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        expanded?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MinMaxButtonProps = typeof __propDef.props;
+export type MinMaxButtonEvents = typeof __propDef.events;
+export type MinMaxButtonSlots = typeof __propDef.slots;
+export default class MinMaxButton extends SvelteComponentTyped<MinMaxButtonProps, MinMaxButtonEvents, MinMaxButtonSlots> {
+}
+export {};

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

@@ -1,21 +1,22 @@
 <script>import { classNames } from '../../../../../utils';
-import { ChevronDown, ChevronUp, Pointer } from 'lucide-svelte';
-import { getContext } from 'svelte';
+import { ChevronDown, ChevronUp } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import { allsubIds } from '../../appUtils';
 export let id;
 export let name;
 export let first = false;
 export let nested = false;
 export let color = 'indigo';
-export let selectable = true;
-const { manuallyOpened, search, hasResult } = getContext('ContextPanel');
-const { selectedComponent, app, hoverStore, allIdsInPath } = getContext('AppViewerContext');
-$: subids = $search != '' ? allsubIds($app, id) : [];
+const { expanded, manuallyOpened, search, hasResult } = getContext('ContextPanel');
+const { selectedComponent, app, hoverStore } = getContext('AppViewerContext');
+$: subids = allsubIds($app, id);
 $: inSearch =
     $search != '' &&
         ($hasResult[id] ||
             Object.entries($hasResult).some(([key, value]) => value && subids.includes(key)));
-$: open = $allIdsInPath.includes(id) || $manuallyOpened[id] || inSearch;
+$: open =
+    $expanded || subids.includes($selectedComponent ?? '') || $manuallyOpened[id] || inSearch;
+const dispatch = createEventDispatcher();
 const hoverColor = {
     blue: 'hover:bg-blue-300 hover:text-blue-600',
     indigo: 'hover:bg-indigo-300 hover:text-indigo-600'
@@ -51,35 +52,29 @@ const idClass = {
 		class={classNames(
 			'flex items-center justify-between p-1 cursor-pointer border-b gap-1 truncate',
 			hoverColor[color],
-			$selectedComponent?.includes(id) ? openBackground[color] : 'bg-white',
+			$selectedComponent == id ? openBackground[color] : 'bg-white',
 			first ? 'border-t' : '',
 			nested ? 'border-l' : ''
 		)}
 		on:click={() => {
+			dispatch('handleClick', { manuallyOpen: $manuallyOpened[id] })
 			$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
 		}}
 	>
-		<button
-			disabled={!(selectable && !$selectedComponent?.includes(id))}
-			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"
+		<div
+			class={classNames(
+				'text-2xs ml-0.5 font-bold px-2 py-0.5 rounded-sm',
+				$selectedComponent == id ? idClass[color] : ' bg-gray-100'
+			)}
+		>
+			{id}
+		</div>
+		<div
+			on:click|stopPropagation={() => {
+				$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
+			}}
+			class="text-2xs font-bold flex flex-row gap-2 items-center truncate"
 		>
-			<div
-				class={classNames(
-					'text-2xs  font-bold px-2 py-0.5 rounded-sm',
-					$selectedComponent?.includes(id) ? idClass[color] : ''
-				)}
-			>
-				{id}
-			</div>
-			{#if selectable && !$selectedComponent?.includes(id)}
-				<div class=" px-1 ">
-					<Pointer size={14} />
-				</div>
-			{/if}
-		</button>
-		<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
 			{name}
 			{#if !open}
 				<ChevronDown size={14} />
@@ -90,9 +85,25 @@ const idClass = {
 			{/if}
 		</div>
 	</div>
-	<div class="border-b {open ? 'h-full' : 'h-0 overflow-hidden'}">
+	<div class="scale border-b overflow-hidden  {open ? 'py-1 scale-y' : 'scale-0 max-h-0'} ">
 		<div class={classNames(nested ? 'border-l ml-2' : '')}>
 			<slot />
 		</div>
 	</div>
 </div>
+
+<style>
+	.scale {
+		transform-origin: top;
+		transition: transform 0.26s ease;
+	}
+	.scale-y {
+		transform: scaleY(1);
+		max-height: 100%;
+	}
+
+	.scale-0 {
+		transform: scaleY(0);
+		overflow: hidden;
+		max-height: 0;
+	}</style>

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

@@ -6,9 +6,10 @@ declare const __propDef: {
         first?: boolean | undefined;
         nested?: boolean | undefined;
         color?: "blue" | "indigo" | undefined;
-        selectable?: boolean | undefined;
     };
     events: {
+        handleClick: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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

@@ -14,7 +14,7 @@ import { defaultCode } from '../component';
 import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte';
 import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte';
 export let name;
-export let componentType = undefined;
+export let id;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
@@ -30,6 +30,7 @@ async function inferInlineScriptSchema(language, content, schema) {
     return schema;
 }
 async function createInlineScriptByLanguage(language, path, subkind = undefined) {
+    const componentType = $app.grid.find((c) => c.data.id === id)?.data?.type;
     const content = defaultCode(componentType ?? '', language) ??
         initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow');
     return newInlineScript(content, language, path);
@@ -62,6 +63,9 @@ function pickInlineScript(name) {
     dispatch('new', unusedInlineScript.inlineScript);
 }
 const langs = ['deno', 'python3', 'go', 'bash'];
+function loadSchemaFromTriggerable(path, arg1) {
+    throw new Error('Function not implemented.');
+}
 </script>
 
 <Drawer bind:this={picker} size="1000px">
@@ -180,7 +184,8 @@ console.log(ctx.email)
 if (!state.foo) { state.foo = 0 }
 state.foo += 1
 
-// you can also navigate (goto), recompute a script (recompute), or set a tab (setTab)
+// you can also navigate to another page
+//await goto("?foo=bar")
 
 return state.foo`,
 					language: 'frontend',

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         name: string;
-        componentType?: string | undefined;
+        id: string;
     };
     events: {
         delete: CustomEvent<any>;

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, isMac, scriptLangToEditorLang } from '../../../../utils';
+import { emptySchema, scriptLangToEditorLang } from '../../../../utils';
 import Popover from '../../../Popover.svelte';
 import { computeFields } from './utils';
 import { deepEqual } from 'fast-equals';
@@ -58,6 +58,7 @@ async function loadSchemaAndInputsByName() {
         }
     }
 }
+let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1;
 $: extraLib =
     inlineScript?.language == 'frontend' && worldStore
         ? buildExtraLib($worldStore?.outputsById ?? {}, id, false, $state, true)
@@ -148,7 +149,7 @@ function handleRefreshOn(refreshOn) {
 						Format
 
 						<div class="flex flex-row items-center gap-1">
-							<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
+							<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
 							<Kbd>S</Kbd>
 						</div>
 					</div>
@@ -162,7 +163,7 @@ function handleRefreshOn(refreshOn) {
 						btnClasses="!px-2 !py-1 !bg-gray-700 !text-white hover:!bg-gray-900"
 						on:click={async () => {
 							runLoading = true
-							await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
+							await $runnableComponents[id]?.(!transformer ? inlineScript : undefined)
 							runLoading = false
 						}}
 					>
@@ -170,7 +171,7 @@ function handleRefreshOn(refreshOn) {
 							Run
 
 							<div class="flex flex-row items-center gap-1">
-								<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
+								<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
 								<Kbd>
 									<div class="h-4 flex items-center justify-center">
 										<CornerDownLeft size={10} />
@@ -198,7 +199,7 @@ function handleRefreshOn(refreshOn) {
 							inlineScript.content = editor?.getCode() ?? ''
 						}
 						runLoading = true
-						await $runnableComponents[id]?.cb?.(inlineScript)
+						await $runnableComponents[id]?.(inlineScript)
 						runLoading = false
 					}}
 					on:change={async (e) => {
@@ -219,15 +220,15 @@ function handleRefreshOn(refreshOn) {
 			{:else}
 				<SimpleEditor
 					bind:this={simpleEditor}
-					class="h-full"
-					{extraLib}
-					bind:code={inlineScript.content}
-					lang="javascript"
 					cmdEnterAction={async () => {
 						runLoading = true
-						await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
+						await $runnableComponents[id]?.(!transformer ? inlineScript : undefined)
 						runLoading = false
 					}}
+					class="h-full"
+					{extraLib}
+					bind:code={inlineScript.content}
+					lang="javascript"
 					on:change={() => {
 						$app = $app
 					}}

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

@@ -14,7 +14,6 @@ import { deepEqual } from 'fast-equals';
 import { getContext } from 'svelte';
 export let componentInput;
 export let defaultUserInput = false;
-export let componentType;
 export let id;
 export let transformer;
 const { app } = getContext('AppViewerContext');
@@ -87,8 +86,8 @@ function deleteInlineScript() {
 			}}
 		/>
 	{:else}
-		<span class="px-2 text-gray-600">
-			Selected editor component is a transformer but component has no transformer
+		<span class="px-2 text-gray-600"
+			>Selected editor component is a transformer but component has no transformer
 		</span>
 	{/if}
 {:else if componentInput && componentInput.type == 'runnable'}
@@ -105,7 +104,7 @@ function deleteInlineScript() {
 			/>
 		{:else}
 			<EmptyInlineScript
-				{componentType}
+				{id}
 				name={componentInput.runnable.name}
 				on:delete={deleteInlineScript}
 				on:new={(e) => {