windmill-components 1.522.0 → 1.531.1

package/package/components/ModuleTest.svelte

@@ -4,17 +4,18 @@ import { getScriptByPath } from '../scripts';
 import { getContext } from 'svelte';
 import JobLoader, {} from './JobLoader.svelte';
 import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
+import { loadSchemaFromModule } from './flows/flowInfers';
 let { mod, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined) } = $props();
 const { flowStore, flowStateStore, pathStore, testSteps, previewArgs, modulesTestStates } = getContext('FlowEditorContext');
 let jobLoader = $state(undefined);
 let jobProgressReset = () => { };
 let stepHistoryLoader = getStepHistoryLoaderContext();
 export function runTestWithStepArgs() {
-    runTest(testSteps.getStepArgs(mod.id)?.value);
+    runTest(testSteps.getStepArgs(mod.id));
 }
 export function loadArgsAndRunTest() {
-    testSteps?.updateStepArgs(mod.id, $flowStateStore, flowStore?.val, previewArgs?.val);
-    runTest(testSteps.getStepArgs(mod.id)?.value);
+    testSteps?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
+    runTest(testSteps.getStepArgs(mod.id));
 }
 export async function runTest(args) {
     // Not defined if JobProgressBar not loaded
@@ -46,36 +47,65 @@ export async function runTest(args) {
     else if (val.type == 'flow') {
         await jobLoader?.runFlowByPath(val.path, args, callbacks);
     }
+    else if (val.type == 'aiagent') {
+        const { schema } = await loadSchemaFromModule(mod);
+        const inputTransforms = Object.fromEntries(Object.keys(args).map((key) => [
+            key,
+            {
+                expr: `flow_input.${key}`,
+                type: 'javascript'
+            }
+        ]));
+        await jobLoader?.runFlowPreview(args, {
+            value: {
+                modules: [
+                    {
+                        ...mod,
+                        value: {
+                            type: 'aiagent',
+                            tools: mod.value.type == 'aiagent' ? mod.value.tools : [],
+                            input_transforms: inputTransforms
+                        }
+                    }
+                ]
+            },
+            summary: '',
+            schema
+        }, callbacks);
+    }
     else {
         throw Error('Not supported module type');
     }
 }
 function jobDone(testJob) {
     if (testJob && !testJob.canceled && testJob.type == 'CompletedJob') {
-        if ($flowStateStore[mod.id]) {
-            $flowStateStore[mod.id].previewResult = testJob.result;
-            $flowStateStore[mod.id].previewSuccess = testJob.success;
-            $flowStateStore[mod.id].previewJobId = testJob.id;
-            $flowStateStore[mod.id].previewWorkspaceId = testJob.workspace_id;
-            $flowStateStore = $flowStateStore;
+        if (flowStateStore.val[mod.id]) {
+            flowStateStore.val[mod.id] = {
+                ...flowStateStore.val[mod.id],
+                previewResult: testJob.result,
+                previewSuccess: testJob.success,
+                previewJobId: testJob.id
+            };
         }
         stepHistoryLoader?.resetInitial(mod.id);
     }
-    modulesTestStates.states[mod.id].testJob = undefined;
+    if (modulesTestStates.states[mod.id]) {
+        modulesTestStates.states[mod.id].testJob = testJob;
+    }
 }
 export function cancelJob() {
     modulesTestStates.states[mod.id]?.cancel?.();
 }
 $effect(() => {
     // Update testIsLoading to read the state from parent components
-    testIsLoading = modulesTestStates.states[mod.id]?.loading ?? false;
+    testIsLoading = modulesTestStates.states?.[mod.id]?.loading ?? false;
 });
 $effect(() => {
     // Update testJob to read the state from parent components
-    testJob = modulesTestStates.states[mod.id]?.testJob;
+    testJob = modulesTestStates.states?.[mod.id]?.testJob;
 });
 modulesTestStates.states[mod.id] = {
-    ...(modulesTestStates.states[mod.id] ?? { loading: false }),
+    ...(modulesTestStates.states?.[mod.id] ?? { loading: false }),
     loading: testIsLoading,
     testJob: testJob
 };
@@ -90,13 +120,26 @@ modulesTestStates.states[mod.id] = {
 		() => modulesTestStates.states[mod.id]?.loading ?? false,
 		(v) => {
 			let newLoading = v ?? false
-			if (modulesTestStates.states[mod.id]?.loading !== newLoading) {
+			if (modulesTestStates.states && modulesTestStates.states?.[mod.id]?.loading !== newLoading) {
 				modulesTestStates.states[mod.id] = {
-					...(modulesTestStates.states[mod.id] ?? {}),
-					loading: newLoading
+					...(modulesTestStates.states?.[mod.id] ?? {}),
+					loading: newLoading,
+					hiddenInGraph: false
 				}
 			}
 		}
 	}
 	bind:job={modulesTestStates.states[mod.id].testJob}
+	loadPlaceholderJobOnStart={{
+		type: 'QueuedJob',
+		id: '',
+		running: false,
+		canceled: false,
+		job_kind: 'preview',
+		permissioned_as: '',
+		is_flow_step: false,
+		email: '',
+		visible_to_owner: true,
+		tag: ''
+	}}
 />

package/package/components/RelativeLineNumbers.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">import { RELATIVE_LINE_NUMBERS_SETTING_NAME, relativeLineNumbers } from '../stores';
+import { storeLocalSetting } from '../utils';
+import Toggle from './Toggle.svelte';
+function storeSetting() {
+    storeLocalSetting(RELATIVE_LINE_NUMBERS_SETTING_NAME, $relativeLineNumbers.toString());
+}
+</script>
+
+<Toggle
+	size="xs"
+	bind:checked={$relativeLineNumbers}
+	on:change={() => {
+		storeSetting()
+	}}
+	options={{ right: 'relative line numbers' }}
+/>

package/package/components/RelativeLineNumbers.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RelativeLineNumbers: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RelativeLineNumbers = InstanceType<typeof RelativeLineNumbers>;
+export default RelativeLineNumbers;

package/package/components/ResourceEditor.svelte

@@ -17,6 +17,7 @@ import autosize from '../autosize';
 import GfmMarkdown from './GfmMarkdown.svelte';
 import TestTriggerConnection from './triggers/TestTriggerConnection.svelte';
 import GitHubAppIntegration from './GitHubAppIntegration.svelte';
+import Button from './common/button/Button.svelte';
 let { canSave = $bindable(true), resource_type = $bindable(undefined), path = $bindable(''), newResource = false, hidePath = false, onChange, defaultValues = undefined } = $props();
 let isValid = $state(true);
 let jsonError = $state('');
@@ -190,10 +191,14 @@ run(() => {
 		<h4 class="mt-4 inline-flex items-center gap-4"
 			>Resource description <Required required={false} />
 			{#if can_write}
-				<div class="flex gap-1 items-center">
-					<Toggle size="xs" bind:checked={editDescription} />
-					<Pen size={14} />
-				</div>
+				<Button
+					size="xs2"
+					variant="contained"
+					color="light"
+					btnClasses={editDescription ? 'bg-surface-hover' : ''}
+					startIcon={{ icon: Pen }}
+					on:click={() => (editDescription = !editDescription)}
+				/>
 			{/if}</h4
 		>
 		{#if can_write && editDescription}

package/package/components/ScriptBuilder.svelte

@@ -908,7 +908,7 @@ async function loadWorkerTags() {
 														>
 															<LanguageIcon {lang} />
 															<span class="ml-2 py-2 truncate">{label}</span>
-															{#if lang === 'nu'}
+															{#if lang === 'nu' || lang === 'ruby'}
 																<span class="text-tertiary !text-xs"> BETA </span>
 															{/if}
 														</Button>
@@ -1487,16 +1487,18 @@ async function loadWorkerTags() {
 				{/if}
 
 				<div class="flex flex-row gap-x-1 lg:gap-x-2">
-					{#if $workerTags}
-						{#if $workerTags?.length ?? 0 > 0}
-							<div class="max-w-[200px] pr-8">
-								<WorkerTagSelect
-									inputClass="text-sm text-secondary !placeholder-secondary"
-									nullTag={script.language}
-									placeholder={customUi?.tagSelectPlaceholder}
-									bind:tag={script.tag}
-								/>
-							</div>
+					{#if customUi?.topBar?.tagEdit != false}
+						{#if $workerTags}
+							{#if $workerTags?.length ?? 0 > 0}
+								<div class="max-w-[200px] pr-8">
+									<WorkerTagSelect
+										inputClass="text-sm text-secondary !placeholder-secondary"
+										nullTag={script.language}
+										placeholder={customUi?.tagSelectPlaceholder}
+										bind:tag={script.tag}
+									/>
+								</div>
+							{/if}
 						{/if}
 					{/if}
 					{#if customUi?.topBar?.settings != false}

package/package/components/ScriptEditor.svelte

@@ -295,9 +295,9 @@ $effect(() => {
     };
     untrack(() => {
         aiChatManager.scriptEditorOptions = options;
-        aiChatManager.scriptEditorApplyCode = (code) => {
+        aiChatManager.scriptEditorApplyCode = (code, applyAll = false) => {
             hideDiffMode();
-            editor?.reviewAndApplyCode(code);
+            editor?.reviewAndApplyCode(code, applyAll);
         };
         aiChatManager.scriptEditorShowDiffMode = showDiffMode;
     });

package/package/components/SimpleEditor.svelte

@@ -72,7 +72,7 @@ import libStdContent from '../es6.d.ts.txt?raw';
 import domContent from '../dom.d.ts.txt?raw';
 import { initializeVscode, keepModelAroundToAvoidDisposalOfWorkers } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
-import { vimMode } from '../stores';
+import { vimMode, relativeLineNumbers } from '../stores';
 import { initVim } from './monaco_keybindings';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
 import { editorPositionMap } from '../utils';
@@ -89,7 +89,7 @@ let suggestion = $state('');
 let placeholderVisible = $state(false);
 let mounted = $state(false);
 let valueAfterDispose = undefined;
-let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', loadAsync = false, key, disabled = false } = $props();
+let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', loadAsync = false, key, disabled = false, minHeight = 1000 } = $props();
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
 export function getCode() {
@@ -186,6 +186,11 @@ $effect(() => {
         untrack(() => onVimDisable());
     }
 });
+$effect(() => {
+    editor?.updateOptions({
+        lineNumbers: $relativeLineNumbers ? 'relative' : 'on'
+    });
+});
 function onVimDisable() {
     vimDisposable?.dispose();
 }
@@ -284,8 +289,9 @@ async function loadMonaco() {
         return;
     }
     try {
+        console.log('fixedOverflowWidgets', fixedOverflowWidgets);
         editor = meditor.create(divEl, {
-            ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets),
+            ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, $relativeLineNumbers),
             model,
             lineDecorationsWidth: 6,
             lineNumbersMinChars: 2,
@@ -346,7 +352,7 @@ async function loadMonaco() {
         const updateHeight = () => {
             if (!editor)
                 return;
-            const contentHeight = Math.min(1000, editor.getContentHeight());
+            const contentHeight = Math.min(minHeight, editor.getContentHeight());
             if (divEl) {
                 divEl.style.height = `${contentHeight}px`;
             }

package/package/components/SimpleEditor.svelte.d.ts

@@ -29,6 +29,7 @@ type $$ComponentProps = {
     initialCursorPos?: IPosition;
     key?: string;
     disabled?: boolean;
+    minHeight?: number;
 };
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/TemplateEditor.svelte

@@ -395,7 +395,7 @@ async function loadMonaco() {
     model.updateOptions(updateOptions);
     try {
         editor = meditor.create(divEl, {
-            ...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
+            ...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets, false),
             model,
             // overflowWidgetsDomNode: widgets,
             // lineNumbers: 'on',

package/package/components/UserSettings.svelte

@@ -21,9 +21,9 @@ export function closeDrawer() {
 function removeHash() {
     window.location.hash = '';
 }
-function handleTokenCreated(event) {
-    newToken = event.detail;
-    dispatch('tokenCreated', newToken);
+function handleTokenCreated(token) {
+    newToken = token;
+    dispatch('tokenCreated', token);
 }
 </script>
 
@@ -53,7 +53,7 @@ function handleTokenCreated(event) {
 				defaultNewTokenLabel={newTokenLabel}
 				defaultNewTokenWorkspace={newTokenWorkspace}
 				{scopes}
-				on:tokenCreated={handleTokenCreated}
+				onTokenCreated={handleTokenCreated}
 			/>
 		</div>
 	</DrawerContent>

package/package/components/apps/components/display/AppAccordionList.svelte

@@ -121,7 +121,7 @@ function toggleAccordion(index) {
 										subGridId={`${id}-0`}
 										containerHeight={componentContainerHeight -
 											(30 * accordionInput?.value.length + 40)}
-										on:focus={() => {
+										onFocus={() => {
 											if (!$connectingInput.opened) {
 												$selectedComponent = [id]
 											}

package/package/components/apps/components/display/AppCarouselList.svelte

@@ -101,14 +101,20 @@ $componentControl[id] = {
 
 <InitializeComponent {id} />
 
+{#snippet nonRenderedPlaceholder()}
+	<ListWrapper disabled value={undefined} index={0}>
+		<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+	</ListWrapper>
+{/snippet}
 <RunnableWrapper
-	render={true}
+	{render}
 	{outputs}
 	autoRefresh
 	{componentInput}
 	{id}
 	bind:initializing
 	bind:result
+	{nonRenderedPlaceholder}
 >
 	{#if everRender}
 		<div class="w-full flex flex-wrap overflow-auto divide-y max-h-full">
@@ -206,7 +212,7 @@ $componentControl[id] = {
 											style={css?.container?.style}
 											subGridId={`${id}-0`}
 											containerHeight={componentContainerHeight - 40}
-											on:focus={() => {
+											onFocus={() => {
 												if (!$connectingInput.opened) {
 													$selectedComponent = [id]
 												}
@@ -219,9 +225,7 @@ $componentControl[id] = {
 						</Carousel>
 					{/key}
 				{:else}
-					<ListWrapper disabled value={undefined} index={0}>
-						<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-					</ListWrapper>
+					{@render nonRenderedPlaceholder?.()}
 					{#if !Array.isArray(result)}
 						<div class="text-center text-tertiary">Input data is not an array</div>
 					{/if}
@@ -229,8 +233,6 @@ $componentControl[id] = {
 			{/if}
 		</div>
 	{:else if $app.subgrids}
-		<ListWrapper disabled value={undefined} index={0}>
-			<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-		</ListWrapper>
+		{@render nonRenderedPlaceholder?.()}
 	{/if}
 </RunnableWrapper>

package/package/components/apps/components/display/AppJobIdFlowStatus.svelte

@@ -72,13 +72,13 @@ let jobId = $derived(resolvedConfig.jobId);
 				<FlowStatusViewer
 					workspaceId={workspace}
 					{jobId}
-					on:start={() => {
+					onStart={() => {
 						outputs?.jobId.set(jobId)
 						outputs?.loading.set(true)
 					}}
-					on:done={(e) => {
+					onDone={({ job }) => {
 						outputs?.loading.set(false)
-						outputs?.result.set(e?.detail?.result)
+						outputs?.result.set(job?.result as any)
 					}}
 				/>
 			{:else}

package/package/components/apps/components/display/table/AppAggridTable.svelte

@@ -125,13 +125,13 @@ function onCellValueChanged(event) {
         let idx = Number(event.node.data['__index'].split('-')[0]);
         uid = prevUid ?? '';
         outputs?.newChange?.set({
-            row: event.node.rowIndex,
+            row: idx,
             column: event.colDef.field,
             value: dataCell,
             old: result[idx][event.colDef.field]
         });
         result[idx][event.colDef.field] = dataCell;
-        let data = { ...result[event.node.rowIndex] };
+        let data = { ...result[idx] };
         outputs?.selectedRow?.set(data);
         resolvedConfig?.extraConfig?.['defaultColDef']?.['onCellValueChanged']?.(event);
     }

package/package/components/apps/components/helpers/HiddenComponent.svelte

@@ -24,7 +24,6 @@ let outputs = initOutput($worldStore, id, {
 
 {#if runnable && (runnable.type == 'runnableByPath' || (runnable.type == 'runnableByName' && runnable.inlineScript != undefined))}
 	<RunnableComponent
-		hasChildrens={false}
 		render={false}
 		{id}
 		fields={runnable.fields}

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

@@ -167,7 +167,12 @@ async function evalExpr(input, args) {
     }
     catch (e) {
         error = e.message;
-        console.warn("Eval error in app input '" + id + "' with key '" + key + "'", e);
+        try {
+            console.warn("Eval error in app input '" + id + "' with key '" + key + "'", e);
+        }
+        catch (e) {
+            console.warn('error warning', e);
+        }
         return value;
     }
 }

package/package/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -2,7 +2,7 @@
 import InputValue from './InputValue.svelte';
 import InitializeComponent from './InitializeComponent.svelte';
 import RefreshIndicator from './RefreshIndicator.svelte';
-let { componentInput, id, result = $bindable(), render, hasChildrens, noInitialize, children } = $props();
+let { componentInput, id, result = $bindable(), render, noInitialize, children, nonRenderedPlaceholder } = $props();
 // Sync the result to the output
 const { worldStore } = getContext('AppViewerContext');
 let outputs = $derived($worldStore?.outputsById?.[id]);
@@ -38,7 +38,7 @@ function builtSubscriptions(connections) {
         }
     });
 }
-$effect.pre(() => {
+$effect(() => {
     componentInput.type === 'evalv2' &&
         componentInput.connections &&
         untrack(() => builtSubscriptions(componentInput.connections));
@@ -56,11 +56,15 @@ $effect.pre(() => {
 	<InputValue key="nonrunnable" {id} input={componentInput} bind:value={result} />
 {/if}
 
-{#if render || hasChildrens}
-	<div class={render ? 'h-full w-full' : 'invisible h-0 overflow-hidden'}>
+{#if render}
+	<div class="h-full w-full">
 		{@render children?.()}
 		<div class="flex absolute top-1 right-1 z-50 app-component-refresh-btn">
 			<RefreshIndicator {loading} />
 		</div>
 	</div>
+{:else if nonRenderedPlaceholder}
+	<div class="invisible h-0 overflow-hidden">
+		{@render nonRenderedPlaceholder?.()}
+	</div>
 {/if}

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

@@ -4,9 +4,9 @@ interface Props {
     id: string;
     result: any;
     render: boolean;
-    hasChildrens: boolean;
     noInitialize: any;
     children?: import('svelte').Snippet;
+    nonRenderedPlaceholder?: import('svelte').Snippet;
 }
 declare const NonRunnableComponent: import("svelte").Component<Props, {}, "result">;
 type NonRunnableComponent = ReturnType<typeof NonRunnableComponent>;

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

@@ -16,7 +16,7 @@ import { computeWorkspaceS3FileInputPolicy } from '../../editor/appUtilsS3';
 import { executeRunnable } from './executeRunnable';
 import SchemaForm from '../../../SchemaForm.svelte';
 import JobLoader, {} from '../../../JobLoader.svelte';
-let { id, fields, runnable, transformer, extraQueryParams = {}, autoRefresh = true, result = $bindable(undefined), result_stream = $bindable(undefined), forceSchemaDisplay = false, wrapperClass = '', wrapperStyle = '', render, outputs, extraKey = '', initializing = false, recomputeOnInputChanged = true, loading = $bindable(false), refreshOnStart = false, recomputableByRefreshButton, errorHandledByComponent = false, hideRefreshButton = false, hasChildrens, allowConcurentRequests = false, noInitialize = false, overrideCallback = undefined, overrideAutoRefresh = false, replaceCallback = false, children } = $props();
+let { id, fields, runnable, transformer, extraQueryParams = {}, autoRefresh = true, result = $bindable(undefined), result_stream = $bindable(undefined), forceSchemaDisplay = false, wrapperClass = '', wrapperStyle = '', render, outputs, extraKey = '', initializing = false, recomputeOnInputChanged = true, loading = $bindable(false), refreshOnStart = false, recomputableByRefreshButton, errorHandledByComponent = false, hideRefreshButton = false, allowConcurentRequests = false, noInitialize = false, overrideCallback = undefined, overrideAutoRefresh = false, replaceCallback = false, children, nonRenderedPlaceholder } = $props();
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, jobsById, noBackend, errorByComponent, mode, stateId, state: stateStore, componentControl, initialized, selectedComponent, app, connectingInput, bgRuns, recomputeAllContext } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 const iterContext = getContext('ListWrapperContext');
@@ -628,13 +628,8 @@ $effect(() => {
 	bind:this={resultJobLoader}
 />
 
-{#if render || hasChildrens}
-	<div
-		class="h-full flex relative flex-row flex-wrap {wrapperClass} {render
-			? 'visible'
-			: 'invisible h-0 overflow-hidden'}"
-		style={wrapperStyle}
-	>
+{#if render}
+	<div class="h-full flex relative flex-row flex-wrap {wrapperClass} visible" style={wrapperStyle}>
 		<!-- {Object.keys(schemaStripped?.properties ?? {}).length > 0} -->
 		{#if render && (autoRefresh || forceSchemaDisplay) && schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0}
 			<div class="px-2 h-fit min-h-0">
@@ -706,4 +701,8 @@ $effect(() => {
 			</div>
 		{/if}
 	</div>
+{:else if nonRenderedPlaceholder}
+	<div class="invisible h-0 overflow-hidden">
+		{@render nonRenderedPlaceholder?.()}
+	</div>
 {/if}

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

@@ -29,13 +29,13 @@ interface Props {
     recomputableByRefreshButton: boolean;
     errorHandledByComponent?: boolean;
     hideRefreshButton?: boolean;
-    hasChildrens: boolean;
     allowConcurentRequests?: boolean;
     noInitialize?: boolean;
     overrideCallback?: (() => CancelablePromise<void>) | undefined;
     overrideAutoRefresh?: boolean;
     replaceCallback?: boolean;
     children?: import('svelte').Snippet;
+    nonRenderedPlaceholder?: import('svelte').Snippet;
 }
 type RunnableCallback = {
     onDone?: (r: any) => void;

package/package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -4,7 +4,7 @@ import NonRunnableComponent from './NonRunnableComponent.svelte';
 import RunnableComponent from './RunnableComponent.svelte';
 import { sendUserToast } from '../../../../toast';
 import InitializeComponent from './InitializeComponent.svelte';
-let { componentInput = $bindable(), noInitialize = false, hideRefreshButton = undefined, overrideCallback = undefined, overrideAutoRefresh = false, replaceCallback = false, id, result = $bindable(undefined), initializing = $bindable(undefined), loading = $bindable(false), extraQueryParams = {}, autoRefresh = true, runnableComponent = $bindable(undefined), forceSchemaDisplay = false, runnableClass = '', runnableStyle = '', doOnSuccess = undefined, doOnError = undefined, render, recomputeIds = [], outputs, extraKey = undefined, refreshOnStart = false, errorHandledByComponent = false, hasChildrens = false, allowConcurentRequests = false, onSuccess = () => { }, children } = $props();
+let { componentInput = $bindable(), noInitialize = false, hideRefreshButton = undefined, overrideCallback = undefined, overrideAutoRefresh = false, replaceCallback = false, id, result = $bindable(undefined), initializing = $bindable(undefined), loading = $bindable(false), extraQueryParams = {}, autoRefresh = true, runnableComponent = $bindable(undefined), forceSchemaDisplay = false, runnableClass = '', runnableStyle = '', doOnSuccess = undefined, doOnError = undefined, render, recomputeIds = [], outputs, extraKey = undefined, refreshOnStart = false, errorHandledByComponent = false, allowConcurentRequests = false, onSuccess = () => { }, children, nonRenderedPlaceholder } = $props();
 $effect.pre(() => {
     if (initializing == undefined) {
         initializing = true;
@@ -164,6 +164,8 @@ export async function handleSideEffect(success, errorMessage) {
 	{/if}
 	{#if render}
 		{@render children?.()}
+	{:else}
+		{@render nonRenderedPlaceholder?.()}
 	{/if}
 {:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)}
 	<RunnableComponent
@@ -171,7 +173,6 @@ export async function handleSideEffect(success, errorMessage) {
 		{allowConcurentRequests}
 		{refreshOnStart}
 		{extraKey}
-		{hasChildrens}
 		{replaceCallback}
 		bind:loading
 		bind:this={runnableComponent}
@@ -216,11 +217,19 @@ export async function handleSideEffect(success, errorMessage) {
 		on:handleError={(e) => handleSideEffect(false, e.detail)}
 		{outputs}
 		{errorHandledByComponent}
+		{nonRenderedPlaceholder}
 	>
 		{@render children?.()}
 	</RunnableComponent>
 {:else}
-	<NonRunnableComponent {noInitialize} {hasChildrens} {render} bind:result {id} {componentInput}>
+	<NonRunnableComponent
+		{nonRenderedPlaceholder}
+		{noInitialize}
+		{render}
+		bind:result
+		{id}
+		{componentInput}
+	>
 		{@render children?.()}
 	</NonRunnableComponent>
 {/if}

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

@@ -71,10 +71,10 @@ interface Props {
     extraKey?: string | undefined;
     refreshOnStart?: boolean;
     errorHandledByComponent?: boolean;
-    hasChildrens?: boolean;
     allowConcurentRequests?: boolean;
     onSuccess?: (result: any) => void;
     children?: import('svelte').Snippet;
+    nonRenderedPlaceholder?: import('svelte').Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/apps/components/inputs/AppCodeInputComponent.svelte

@@ -80,8 +80,3 @@ $componentControl[id] = {
 		{/await}
 	</div>
 {/if}
-
-<style>
-	:global(.suggest-widget) {
-		position: fixed !important;
-	}</style>

package/package/components/apps/components/layout/AppConditionalWrapper.svelte

@@ -88,7 +88,7 @@ $componentControl[id] = {
 					style={css?.container?.style}
 					subGridId={`${id}-${i}`}
 					containerHeight={componentContainerHeight}
-					on:focus={(e) => {
+					onFocus={() => {
 						if (!$connectingInput.opened) {
 							$selectedComponent = [id]
 						}

package/package/components/apps/components/layout/AppContainer.svelte

@@ -71,7 +71,7 @@ let css = $state(initCss($app.css?.containercomponent, customCss));
 					style={css?.container?.style}
 					subGridId={`${id}-0`}
 					containerHeight={componentContainerHeight}
-					on:focus={() => {
+					onFocus={() => {
 						if (!$connectingInput.opened) {
 							$selectedComponent = [id]
 						}