windmill-components 1.60.2 → 1.60.4

package/components/apps/components/dataDisplay/AppHtml.svelte

@@ -2,22 +2,30 @@
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
-export let horizontalAlignment = 'left';
-export let verticalAlignment = undefined;
 export let configuration;
 export const staticOutputs = ['result', 'loading'];
 let result = undefined;
+let h = undefined;
+let w = undefined;
 </script>
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
-	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-		<div
-			on:pointerdown={(e) => {
-				e?.preventDefault()
-			}}
-			class="h-full relative w-full overflow-hidden"
-		>
-			{@html result ?? 'No html'}
-		</div>
-	</AlignWrapper>
-</RunnableWrapper>
+<div
+	on:pointerdown={(e) => {
+		e?.preventDefault()
+	}}
+	class="h-full w-full"
+	bind:clientHeight={h}
+	bind:clientWidth={w}
+>
+	<RunnableWrapper autoRefresh flexWrap bind:componentInput {id} bind:result>
+		{#key result}
+			<iframe
+				frameborder="0"
+				style="height: {h}px; width: {w}px"
+				class="p-0"
+				title="sandbox"
+				srcdoc={result ? '<scr' + `ipt src="/tailwind.css"></script>` + result : 'No html'}
+			/>
+		{/key}
+	</RunnableWrapper>
+</div>

package/components/apps/components/dataDisplay/AppHtml.svelte.d.ts

@@ -4,8 +4,6 @@ declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         configuration: Record<string, AppInput>;
         staticOutputs?: string[] | undefined;
     };

package/components/apps/components/dataDisplay/VegaLiteHtml.svelte

@@ -0,0 +1,53 @@
+<script>import { Loader2 } from 'lucide-svelte';
+import { parse } from 'path';
+import { onMount } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export const staticOutputs = ['result', 'loading'];
+let result = undefined;
+let divEl = null;
+let vegaEmbed;
+onMount(async () => {
+    if (divEl) {
+        //@ts-ignore
+        await import('https://cdn.jsdelivr.net/npm/vega@5.22.1');
+        //@ts-ignore
+        await import('https://cdn.jsdelivr.net/npm/vega-lite@5.6.0');
+        //@ts-ignore
+        await import('https://cdn.jsdelivr.net/npm/vega-embed@6.21.0');
+        vegaEmbed = window['vegaEmbed'];
+    }
+});
+let h = undefined;
+let w = undefined;
+let canvas = false;
+$: vegaEmbed &&
+    result &&
+    divEl &&
+    h &&
+    w &&
+    vegaEmbed(divEl, { ...result, ...{ width: w - 100 } }, {
+        mode: 'vega-lite',
+        actions: false,
+        renderer: canvas ? 'canvas' : 'svg',
+        height: h - 75,
+        width: w - 75
+    });
+</script>
+
+<InputValue {id} input={configuration.canvas} bind:value={canvas} />
+
+<div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
+	<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
+		{#if !vegaEmbed}
+			<div class="p-2">
+				<Loader2 class="animate-spin" />
+			</div>
+		{/if}
+		<div on:pointerdown bind:this={divEl} />
+	</RunnableWrapper>
+</div>

package/components/apps/components/dataDisplay/VegaLiteHtml.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: Record<string, AppInput>;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type VegaLiteHtmlProps = typeof __propDef.props;
+export type VegaLiteHtmlEvents = typeof __propDef.events;
+export type VegaLiteHtmlSlots = typeof __propDef.slots;
+export default class VegaLiteHtml extends SvelteComponentTyped<VegaLiteHtmlProps, VegaLiteHtmlEvents, VegaLiteHtmlSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/helpers/InputValue.svelte

@@ -1,28 +1,44 @@
 <script>import { isCodeInjection } from '../../../flows/utils';
-import { createEventDispatcher, getContext, onMount } from 'svelte';
+import { getContext } from 'svelte';
 import { accessPropertyByPath } from '../../utils';
 export let input;
 export let value;
 export let id = undefined;
 export let row = {};
+export let error = '';
 const { worldStore } = getContext('AppEditorContext');
 $: state = $worldStore?.state;
 $: input && $worldStore && row && handleConnection();
-$: input && $state && input.type == 'template' && (value = getValue(input));
+$: input && input.type == 'template' && $state && (value = getValue(input));
+$: input && input.type == 'eval' && $state && (value = evalExpr(input));
 function handleConnection() {
     if (input.type === 'connected') {
         $worldStore?.connect(input, onValueChange);
     }
     else if (input.type === 'row') {
-        setTimeout(() => (value = row[input['column']]), 0);
+        setTimeout(() => (value = row?.[input['column']]), 0);
     }
     else if (input.type === 'static' || input.type == 'template') {
         setTimeout(() => (value = getValue(input)), 0);
     }
+    else if (input.type == 'eval') {
+        setTimeout(() => ((value = evalExpr(input)), 0));
+    }
     else {
         setTimeout(() => (value = undefined), 0);
     }
 }
+function evalExpr(input) {
+    try {
+        const r = eval_like(input.expr, computeGlobalContext());
+        error = '';
+        return r;
+    }
+    catch (e) {
+        error = e.message;
+        return value;
+    }
+}
 function computeGlobalContext() {
     return Object.fromEntries(Object.entries($worldStore?.outputsById ?? {})
         .filter(([k, _]) => k != id)
@@ -31,12 +47,15 @@ function computeGlobalContext() {
             key,
             Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
         ];
-    }));
+    })
+        .concat(row ? [['row', row]] : []));
 }
 export function getValue(input) {
     if (input.type === 'template' && isCodeInjection(input.eval)) {
         try {
-            return eval_like('`' + input.eval + '`', computeGlobalContext());
+            const r = eval_like('`' + input.eval + '`', computeGlobalContext());
+            error = '';
+            return r;
         }
         catch (e) {
             return e.message;

package/components/apps/components/helpers/InputValue.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         value: string | number | boolean | Record<string | number, any> | undefined;
         id?: string | undefined;
         row?: Record<string, any> | undefined;
+        error?: string | undefined;
         getValue?: ((input: AppInput) => any) | undefined;
     };
     events: {

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -257,12 +257,15 @@ let lastStartedAt = Date.now();
 		<div class="p-2">
 			<Alert type="error" title="Error during execution">
 				See "Debug Runs" on the top right for more details
-				<pre title={result.error} class=" mt-2 text-2xs whitespace-pre-wrap">{result.error}</pre>
+				<pre
+					title={JSON.stringify(result.error, null, 4)}
+					class=" mt-2 text-2xs whitespace-pre-wrap">{JSON.stringify(result.error, null, 4)}</pre
+				>
 			</Alert>
 			<slot />
 		</div>
 	{:else}
-		<div class="grow min-w-1/2 {noMinH ? '' : 'min-h-[66%]'}">
+		<div class="block w-full h-full">
 			<slot />
 		</div>
 	{/if}

package/components/apps/components/selectInputs/AppSelect.svelte

@@ -12,10 +12,13 @@ let label;
 let items;
 let itemKey;
 $: outputs = $worldStore?.outputsById[id];
-function onChange({ detail }) {
-    outputs?.result.set(detail?.[itemKey] || undefined);
+function onChange(e) {
+    e?.stopPropagation();
+    window.dispatchEvent(new Event('pointerup'));
+    outputs?.result.set(e.detail?.[itemKey] || undefined);
 }
-const dispatch = createEventDispatcher();
+let value = undefined;
+$: items?.[0]?.['value'] != value && (value = items?.[0]?.['value']);
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={label} />
@@ -28,7 +31,12 @@ const dispatch = createEventDispatcher();
 		class="select"
 		on:clear={onChange}
 		on:change={onChange}
+		on:focus={(e) => {
+			e?.stopPropagation()
+			window.dispatchEvent(new Event('pointerup'))
+		}}
 		{items}
+		{value}
 		placeholder="Select an item"
 		on:click={() => {
 			if (!$connectingInput.opened) {

package/components/apps/components/table/AppTable.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from 'svelte';
+<script>import { getContext, onMount } from 'svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { writable } from 'svelte/store';
@@ -31,15 +31,21 @@ let table = createSvelteTable(options);
 const { worldStore, staticOutputs: staticOutputsStore } = getContext('AppEditorContext');
 let selectedRowIndex = -1;
 function toggleRow(row, rowIndex) {
-    if (selectedRowIndex === rowIndex) {
-        selectedRowIndex = -1;
-        outputs.selectedRow.set(null);
-    }
-    else {
+    if (selectedRowIndex !== rowIndex) {
         selectedRowIndex = rowIndex;
         outputs?.selectedRow.set(row.original);
     }
 }
+let mounted = false;
+onMount(() => {
+    mounted = true;
+});
+$: selectedRowIndex === -1 &&
+    Array.isArray(result) &&
+    result.length > 0 &&
+    // We need to wait until the component is mounted so the world is created
+    mounted &&
+    toggleRow({ original: result[0] }, 0);
 function setOptions(filteredResult) {
     if (!Array.isArray(result)) {
         return;
@@ -101,7 +107,7 @@ $: result && rerender();
 
 			<div class="overflow-x-auto flex-1 w-full">
 				<table class="relative w-full border-b border-b-gray-200">
-					<thead class="sticky top-0 bg-gray-50 text-left">
+					<thead class="sticky top-0 z-40 bg-gray-50 text-left">
 						{#each $table.getHeaderGroups() as headerGroup}
 							<tr class="divide-x">
 								{#each headerGroup.headers as header}
@@ -121,9 +127,7 @@ $: result && rerender();
 								{/each}
 								{#if actionButtons.length > 0}
 									<th class="!p-0">
-										<span class="block px-4 py-4 text-sm font-semibold border-b">
-											Actions
-										</span>
+										<span class="block px-4 py-4 text-sm font-semibold border-b"> Actions </span>
 									</th>
 								{/if}
 							</tr>
@@ -133,11 +137,11 @@ $: result && rerender();
 						{#each $table.getRowModel().rows as row, rowIndex (row.id)}
 							<tr
 								class={classNames(
+									'last-of-type:!border-b-0',
 									selectedRowIndex === rowIndex
 										? 'bg-blue-100 hover:bg-blue-200'
 										: 'hover:bg-blue-50',
-									'divide-x',
-									'border-b w-full',
+									'divide-x w-full',
 									selectedRowIndex === rowIndex
 										? 'divide-blue-200 hover:divide-blue-300'
 										: 'divide-gray-200'

package/components/apps/editor/AppEditor.svelte

@@ -19,6 +19,7 @@ import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte';
 import SettingsPanel from './SettingsPanel.svelte';
 import { fly } from 'svelte/transition';
 import UnsavedConfirmationModal from '../../common/confirmationModal/UnsavedConfirmationModal.svelte';
+import { page } from '$app/stores';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -73,7 +74,11 @@ let mounted = false;
 onMount(() => {
     mounted = true;
 });
-$: context = { email: $userStore?.email, username: $userStore?.username };
+$: context = {
+    email: $userStore?.email,
+    username: $userStore?.username,
+    query: Object.fromEntries($page.url.searchParams.entries())
+};
 $: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, context));
 $: previewing = $mode === 'preview';
 $: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full';
@@ -170,7 +175,7 @@ else {
 						{#if $connectingInput.opened}
 							<div
 								class="fixed top-32  p-2 z-50 flex justify-center items-center"
-								transition:fly={{ duration: 100, y: -100 }}
+								transition:fly|local={{ duration: 100, y: -100 }}
 							>
 								<Alert title="Connecting" type="info">
 									<div class="flex gap-2 flex-col">

package/components/apps/editor/AppPreview.svelte

@@ -1,8 +1,12 @@
 <script>import { onMount, setContext } from 'svelte';
+import { fade } from 'svelte/transition';
+import { cubicOut } from 'svelte/easing';
 import { writable } from 'svelte/store';
 import { buildWorld } from '../rx';
 import GridEditor from './GridEditor.svelte';
 import { classNames } from '../../../utils';
+import Button from '../../common/button/Button.svelte';
+import { Unlock } from 'lucide-svelte';
 export let app;
 export let appPath;
 export let breakpoint;
@@ -12,6 +16,7 @@ export let workspace;
 export let isEditor;
 export let context;
 export let noBackend = false;
+export let isLocked = false;
 const appStore = writable(app);
 const worldStore = writable(undefined);
 const staticOutputs = writable({});
@@ -48,12 +53,29 @@ onMount(() => {
 });
 $: mounted && ($worldStore = buildWorld($staticOutputs, undefined, context));
 $: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ';
+$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
 </script>
 
-<div class="h-full w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto">
-	{#if $appStore.grid}
-		<div class={classNames('mx-auto pb-4', width)}>
-			<GridEditor {policy} />
+<div class="relative">
+	<div class="{$$props.class} {lockedClasses} h-full max-h-[calc(100%-41px)] overflow-auto 
+	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto">
+		{#if $appStore.grid}
+			<div class={classNames('mx-auto pb-4', width)}>
+				<GridEditor {policy} />
+			</div>
+		{/if}
+	</div>
+	{#if isLocked}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div
+			transition:fade|local={{ duration: 200, easing: cubicOut }}
+			on:click={() => isLocked = false}
+			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
+		>
+			<Button on:click={() => isLocked = false}>
+				Unlock preview
+				<Unlock size={18} class="ml-1" strokeWidth={2.5} />
+			</Button>
 		</div>
 	{/if}
 </div>

package/components/apps/editor/AppPreview.svelte.d.ts

@@ -4,6 +4,7 @@ import type { App, EditorBreakpoint } from '../types';
 import type { Policy } from '../../../gen';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         app: App;
         appPath: string;
         breakpoint: Writable<EditorBreakpoint>;
@@ -13,6 +14,7 @@ declare const __propDef: {
         isEditor: boolean;
         context: Record<string, any>;
         noBackend?: boolean | undefined;
+        isLocked?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/ComponentEditor.svelte

@@ -17,6 +17,7 @@ import AppScatterChart from '../components/dataDisplay/AppScatterChart.svelte';
 import AppTimeseries from '../components/dataDisplay/AppTimeseries.svelte';
 import AppHtml from '../components/dataDisplay/AppHtml.svelte';
 import AppSliderInputs from '../components/numberInputs/AppSliderInputs.svelte';
+import VegaLiteHtml from '../components/dataDisplay/VegaLiteHtml.svelte';
 export let component;
 export let selected;
 export let locked = false;
@@ -74,6 +75,12 @@ const { staticOutputs, mode, connectingInput } = getContext('AppEditorContext');
 				bind:componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
 			/>
+		{:else if component.type === 'vegalitecomponent'}
+			<VegaLiteHtml
+				{...component}
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
 		{:else if component.type === 'scatterchartcomponent'}
 			<AppScatterChart
 				{...component}

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

@@ -29,7 +29,8 @@ function getRecommendedDimensionsByComponent(componentType, column) {
             'barchartcomponent',
             'piechartcomponent',
             'displaycomponent',
-            'scatterchartcomponent'
+            'scatterchartcomponent',
+            'vegalitecomponent'
         ],
         '3:10-6:10': ['tablecomponent']
     };

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

@@ -167,6 +167,11 @@ const buttons = {
                     onlyStatic: true,
                     optionValuesKey: 'buttonSizeOptions',
                     value: 'xs'
+                },
+                disabled: {
+                    fieldType: 'boolean',
+                    type: 'eval',
+                    expr: 'false'
                 }
             },
             card: false
@@ -227,6 +232,40 @@ const display = {
             configuration: {},
             card: false
         },
+        {
+            softWrap: false,
+            id: 'vegalitecomponent',
+            type: 'vegalitecomponent',
+            componentInput: {
+                type: 'static',
+                fieldType: 'object',
+                value: {
+                    data: {
+                        values: [
+                            { a: 'A', b: 28 },
+                            { a: 'B', b: 55 },
+                            { a: 'C', b: 43 },
+                            { a: 'D', b: 91 },
+                        ]
+                    },
+                    mark: 'bar',
+                    encoding: {
+                        x: { field: 'a', type: 'ordinal' },
+                        y: { field: 'b', type: 'quantitative' }
+                    }
+                }
+            },
+            configuration: {
+                canvas: {
+                    type: 'static',
+                    onlyStatic: true,
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: "use the canvas renderer instead of the svg one for more interactive plots"
+                }
+            },
+            card: false
+        },
         {
             softWrap: true,
             horizontalAlignment: 'left',

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

@@ -1,4 +1,5 @@
-<script>import { classNames } from '../../../../utils';
+<script>import { page } from '$app/stores';
+import { classNames } from '../../../../utils';
 import { getContext } from 'svelte';
 import { key } from 'svelte-awesome/icons';
 import { displayData } from '../../utils';
@@ -32,7 +33,7 @@ function getComponentNameById(componentId) {
         return 'Table action';
     }
 }
-$: panels = [['ctx', ['email', 'username']]].concat(Object.entries($staticOutputs));
+$: panels = [['ctx', ['email', 'username', 'query']]].concat(Object.entries($staticOutputs));
 </script>
 
 <PanelSection noPadding titlePadding="px-4 pt-2" title="Outputs">

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

@@ -38,7 +38,7 @@ let runLoading = false;
 
 <InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
 
-<div class="h-full flex flex-col gap-1" transition:fly={{ duration: 50 }}>
+<div class="h-full flex flex-col gap-1" transition:fly|local={{ duration: 50 }}>
 	<div class="flex justify-between w-full gap-1 px-2 pt-1 flex-row items-center">
 		{#if name !== undefined}
 			<input bind:value={name} placeholder="Inline script name" />
@@ -119,6 +119,9 @@ let runLoading = false;
 			on:change={async (e) => {
 				if (inlineScript) {
 					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

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

@@ -2,6 +2,7 @@
 import { classNames } from '../../../../utils';
 import { getContext } from 'svelte';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
+import { getAppScripts } from './utils';
 export let selectedScriptComponentId = undefined;
 const { app, selectedComponent, lazyGrid } = getContext('AppEditorContext');
 function selectInlineScript(id) {
@@ -10,56 +11,7 @@ function selectInlineScript(id) {
         $selectedComponent = selectedScriptComponentId;
     }
 }
-$: runnablesByName = $lazyGrid.reduce((acc, gridComponent) => {
-    const component = gridComponent.data;
-    if (component.type === 'tablecomponent') {
-        component.actionButtons.forEach((actionButton) => {
-            if (actionButton.componentInput?.type === 'runnable') {
-                if (actionButton.componentInput.runnable?.type === 'runnableByName') {
-                    acc.push({
-                        name: actionButton.componentInput.runnable.name,
-                        id: actionButton.id
-                    });
-                }
-            }
-        });
-    }
-    const componentInput = component.componentInput;
-    if (componentInput?.type === 'runnable') {
-        if (componentInput.runnable?.type === 'runnableByName') {
-            acc.push({
-                name: componentInput.runnable.name,
-                id: gridComponent.id
-            });
-        }
-    }
-    return acc;
-}, []);
-$: runnablesByPath = $lazyGrid.reduce((acc, gridComponent) => {
-    const component = gridComponent.data;
-    if (component.type === 'tablecomponent') {
-        component.actionButtons.forEach((actionButton) => {
-            if (actionButton.componentInput?.type === 'runnable') {
-                if (actionButton.componentInput.runnable?.type === 'runnableByPath') {
-                    acc.push({
-                        name: actionButton.componentInput.runnable.path,
-                        id: actionButton.id
-                    });
-                }
-            }
-        });
-    }
-    const componentInput = component.componentInput;
-    if (componentInput?.type === 'runnable') {
-        if (componentInput.runnable?.type === 'runnableByPath') {
-            acc.push({
-                name: componentInput.runnable.path,
-                id: gridComponent.id
-            });
-        }
-    }
-    return acc;
-}, []);
+$: runnables = getAppScripts($lazyGrid);
 // When seleced component changes, update selectedScriptComponentId
 $: {
     if (selectedComponent) {
@@ -71,9 +23,9 @@ $: {
 <div class="min-h-full flex flex-col gap-4">
 	<PanelSection title="Inline scripts" smallPadding>
 		<div class="flex flex-col gap-2 w-full">
-			{#if runnablesByName.length > 0}
+			{#if runnables.inline.length > 0}
 				<div class="flex gap-2 flex-col ">
-					{#each runnablesByName as { name, id }, index (index)}
+					{#each runnables.inline as { name, id }, index (index)}
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<div
 							class="{classNames(
@@ -109,17 +61,17 @@ $: {
 				</div>
 			{/if}
 
-			{#if runnablesByName.length == 0 && $app.unusedInlineScripts?.length == 0}
+			{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0}
 				<div class="text-sm text-gray-500">No inline scripts</div>
 			{/if}
 		</div>
 	</PanelSection>
 
-	<PanelSection title="Others" smallPadding>
+	<PanelSection title="Imported scripts" smallPadding>
 		<div class="flex flex-col gap-2 w-full">
-			{#if runnablesByPath.length > 0}
+			{#if runnables.imported.length > 0}
 				<div class="flex gap-2 flex-col ">
-					{#each runnablesByPath as { name, id }, index (index)}
+					{#each runnables.imported as { name, id }, index (index)}
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<div
 							class="{classNames(

package/components/apps/editor/inlineScriptsPanel/utils.d.ts

@@ -0,0 +1,15 @@
+import type { AppComponent, GridItem } from "../../types";
+export interface AppScriptsList {
+    inline: {
+        name: string;
+        id: string;
+    }[];
+    imported: {
+        name: string;
+        id: string;
+    }[];
+}
+export declare function getAppScripts(grid: GridItem[]): FilledItem<{
+    data: AppComponent;
+    id: string;
+}>;