windmill-components 1.504.5 → 1.510.1

package/package/components/WorkerTagSelect.svelte

@@ -3,32 +3,61 @@ import { WorkerService } from '../gen';
 import { createEventDispatcher } from 'svelte';
 import Select from './select/Select.svelte';
 import { safeSelectItems } from './select/utils.svelte';
+import { Button } from './common';
+import { RotateCw } from 'lucide-svelte';
+import { sendUserToast } from '../toast';
 let { tag = $bindable(), noLabel = false, nullTag = undefined, disabled = false, placeholder, inputClass } = $props();
+let loading = $state(false);
 loadWorkerGroups();
 const dispatch = createEventDispatcher();
 async function loadWorkerGroups() {
-    if (!$workerTags) {
-        $workerTags = await WorkerService.getCustomTags({ workspace: $workspaceStore });
+    loading = true;
+    try {
+        if (!$workerTags) {
+            $workerTags = await WorkerService.getCustomTags({ workspace: $workspaceStore });
+        }
     }
+    catch (e) {
+        $workerTags = [];
+        sendUserToast('Error loading custom tags', true);
+    }
+    loading = false;
 }
 let items = $derived([
     // ...(tag ? ['reset to default'] : [nullTag ? `default: ${nullTag}` : '']),
     ...(tag && tag != '' && !($workerTags ?? []).includes(tag) ? [tag] : []),
     ...($workerTags ?? [])
 ]);
+let open = $state(false);
 </script>
 
-<div class="flex gap-1 items-center">
+<div class="flex gap-1 items-center relative">
 	{#if !noLabel}
 		<div class="text-tertiary text-2xs">{placeholder ?? 'tag'}</div>
 	{/if}
 	<Select
 		clearable
 		class="w-full"
+		bind:open
 		{inputClass}
 		{disabled}
 		placeholder={nullTag ? nullTag : (placeholder ?? 'lang default')}
 		items={safeSelectItems(items)}
 		bind:value={() => tag, (value) => ((tag = value), dispatch('change', value))}
 	/>
+	{#if open}
+		<div class="absolute top-0 -right-12">
+			<Button
+				iconOnly
+				variant="border"
+				color="dark"
+				size="xs"
+				startIcon={{ icon: RotateCw, classes: loading ? 'animate-spin' : '' }}
+				on:click={async () => {
+					loadWorkerGroups()
+					open = true
+				}}
+			></Button>
+		</div>
+	{/if}
 </div>

package/package/components/apps/components/buttons/AppButton.svelte

@@ -11,7 +11,7 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { initCss } from '../../utils';
 import ConfirmationModal from '../../../common/confirmationModal/ConfirmationModal.svelte';
 import Portal from '../../../Portal.svelte';
-let { id, componentInput, configuration, recomputeIds = undefined, extraQueryParams = {}, horizontalAlignment = undefined, verticalAlignment = undefined, noWFull = false, preclickAction = undefined, customCss = undefined, render, errorHandledByComponent = $bindable(false), extraKey = undefined, isMenuItem = false, noInitialize = false, replaceCallback = false, controls = undefined } = $props();
+let { id, componentInput, configuration, recomputeIds = undefined, extraQueryParams = {}, horizontalAlignment = undefined, verticalAlignment = undefined, noWFull = false, preclickAction = undefined, customCss = undefined, render, errorHandledByComponent = $bindable(false), extraKey = undefined, isMenuItem = false, noInitialize = false, replaceCallback = false, controls = undefined, onDone = undefined } = $props();
 const { worldStore, app, componentControl, selectedComponent } = getContext('AppViewerContext');
 const rowContext = getContext('RowWrapperContext');
 const rowInputs = getContext('RowInputs');
@@ -159,6 +159,12 @@ let errorsMessage = $derived(Object.values(errors)
 			listInputs.set(id, inputOutput)
 		}
 	}}
+	on:done={() => {
+		onDone?.()
+	}}
+	on:doneError={() => {
+		onDone?.()
+	}}
 	refreshOnStart={resolvedConfig.triggerOnAppLoad}
 	{replaceCallback}
 >

package/package/components/apps/components/buttons/AppButton.svelte.d.ts

@@ -21,6 +21,7 @@ interface Props {
         left: () => boolean;
         right: () => boolean | string;
     } | undefined;
+    onDone?: () => void;
 }
 declare const AppButton: import("svelte").Component<Props, {}, "errorHandledByComponent">;
 type AppButton = ReturnType<typeof AppButton>;

package/package/components/apps/components/display/AppCustomComponent.svelte

@@ -84,7 +84,7 @@ $effect(() => {
 <InitializeComponent {id} />
 <div class="w-full h-full overflow-auto {customComponent?.name ?? 'no_name'}">
 	<RunnableWrapper {outputs} render autoRefresh {componentInput} {id} bind:result>
-		{#if !loaded}
+		{#if !loaded && render}
 			<Loader2 class="animate-spin" />
 		{/if}
 		<div id={divId}></div>

package/package/components/apps/components/display/AppDisplayComponentByJobId.svelte

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { IS_APP_PUBLIC_CONTEXT_KEY } from '../../types';
 import { initCss } from '../../utils';
-import TestJobLoader from '../../../TestJobLoader.svelte';
+import JobLoader from '../../../JobLoader.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
@@ -21,7 +21,7 @@ const outputs = initOutput($worldStore, id, {
 });
 initializing = false;
 let css = $state(initCss($app.css?.jobiddisplaycomponent, customCss));
-let testJobLoader = $state(undefined);
+let jobLoader = $state(undefined);
 let testIsLoading = $state(false);
 let testJob = $state(undefined);
 $effect(() => {
@@ -30,12 +30,22 @@ $effect(() => {
             outputs.loading.set(true);
             const jobId = resolvedConfig?.['jobId'];
             if (jobId) {
-                testJobLoader?.watchJob(jobId);
+                jobLoader?.watchJob(jobId, {
+                    done(x) {
+                        onDone(x);
+                    }
+                });
             }
         });
     }
 });
 let result = $state(undefined);
+function onDone(job) {
+    outputs.loading.set(false);
+    outputs.jobId.set(job.id);
+    outputs.result.set(job.result);
+    result = job.result;
+}
 </script>
 
 {#each Object.keys(components['jobiddisplaycomponent'].initialData.configuration) as key (key)}
@@ -57,17 +67,12 @@ let result = $state(undefined);
 	/>
 {/each}
 
-<TestJobLoader
+<JobLoader
+	noCode={true}
 	workspaceOverride={workspace}
-	bind:this={testJobLoader}
+	bind:this={jobLoader}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
-	on:done={(e) => {
-		outputs.loading.set(false)
-		outputs.jobId.set(e.detail.id)
-		outputs.result.set(e.detail.result)
-		result = e.detail.result
-	}}
 />
 
 <InitializeComponent {id} />

package/package/components/apps/components/display/AppJobIdLogComponent.svelte

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import LogViewer from '../../../LogViewer.svelte';
-import TestJobLoader from '../../../TestJobLoader.svelte';
+import JobLoader from '../../../JobLoader.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
@@ -23,7 +23,7 @@ const outputs = initOutput($worldStore, id, {
 });
 initializing = false;
 let css = $state(initCss($app.css?.jobidlogcomponent, customCss));
-let testJobLoader = $state(undefined);
+let jobLoader = $state(undefined);
 let testIsLoading = $state(false);
 let testJob = $state(undefined);
 $effect(() => {
@@ -32,7 +32,14 @@ $effect(() => {
             outputs.loading.set(true);
             const jobId = resolvedConfig?.['jobId'];
             if (jobId) {
-                testJobLoader?.watchJob(jobId);
+                let callbacks = {
+                    done(x) {
+                        outputs.loading.set(false);
+                        outputs.jobId.set(x.id);
+                        outputs.result.set(x.result);
+                    }
+                };
+                jobLoader?.watchJob(jobId, callbacks);
             }
         });
     }
@@ -58,16 +65,12 @@ $effect(() => {
 	/>
 {/each}
 
-<TestJobLoader
+<JobLoader
+	noCode={true}
 	workspaceOverride={workspace}
-	bind:this={testJobLoader}
+	bind:this={jobLoader}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
-	on:done={(e) => {
-		outputs.loading.set(false)
-		outputs.jobId.set(e.detail.id)
-		outputs.result.set(e.detail.result)
-	}}
 />
 
 <InitializeComponent {id} />

package/package/components/apps/components/display/AppMenu.svelte

@@ -38,6 +38,7 @@ $effect(() => {
 $effect(() => {
     resolvedConfig.afterIcon && afterIconComponent && untrack(() => handleAfterIcon());
 });
+let menu = $state();
 </script>
 
 <InitializeComponent {id} />
@@ -66,6 +67,7 @@ $effect(() => {
 		<Menubar class={resolvedConfig.fillContainer ? 'w-full h-full' : ''}>
 			{#snippet children({ createMenu })}
 				<Menu
+					bind:this={menu}
 					{createMenu}
 					placement="bottom-end"
 					justifyEnd={false}
@@ -134,6 +136,9 @@ $effect(() => {
 											componentInput={actionButton.componentInput}
 											noWFull={false}
 											isMenuItem={true}
+											onDone={() => {
+												menu?.close()
+											}}
 										/>
 									</div>
 								{/if}

package/package/components/apps/components/display/dbtable/AppDbExplorer.svelte

@@ -150,7 +150,7 @@ let datasource = $state({
             return;
         }
         runnableComponent?.runComponent(undefined, undefined, undefined, currentParams, {
-            done: (items) => {
+            onDone: (items) => {
                 let lastRow = -1;
                 if (datasource?.rowCount && datasource.rowCount <= params.endRow) {
                     lastRow = datasource.rowCount;
@@ -178,10 +178,10 @@ let datasource = $state({
                     params.failCallback();
                 }
             },
-            cancel: () => {
+            onCancel: () => {
                 params.failCallback();
             },
-            error: () => {
+            onError: (error) => {
                 params.failCallback();
             }
         });

package/package/components/apps/components/display/dbtable/DeleteRow.svelte

@@ -26,14 +26,14 @@ export async function triggerDelete(resource, table, allColumns, data, dbType) {
             ndata[x.field] = data[x.field];
         });
         await runnableComponent?.runComponent(undefined, undefined, undefined, { ...ndata }, {
-            done: (x) => {
+            onDone: (_x) => {
                 sendUserToast('Row deleted', false);
                 dispatch('deleted');
             },
-            cancel: () => {
+            onCancel: () => {
                 sendUserToast('Error deleting row', true);
             },
-            error: () => {
+            onError: () => {
                 sendUserToast('Error updating row', true);
             }
         });

package/package/components/apps/components/display/dbtable/InsertRowRunnable.svelte

@@ -23,14 +23,14 @@ export async function insertRow(resource, workspace, table, columns, values, res
     await tick();
     if (runnableComponent) {
         await runnableComponent?.runComponent(undefined, undefined, undefined, values, {
-            done: (x) => {
+            onDone: (_x) => {
                 dispatch('insert');
                 sendUserToast('Row inserted', false);
             },
-            cancel: () => {
+            onCancel: () => {
                 sendUserToast('Error inserting row', true);
             },
-            error: () => {
+            onError: () => {
                 sendUserToast('Error inserting row', true);
             }
         });

package/package/components/apps/components/display/dbtable/UpdateCell.svelte

@@ -27,13 +27,13 @@ export async function triggerUpdate(resource, table, column, allColumns, valueTo
         });
         ndata[column.field] = oldValue;
         await runnableComponent?.runComponent(undefined, undefined, undefined, { value_to_update: valueToUpdate, ...ndata }, {
-            done: (x) => {
+            onDone: (x) => {
                 sendUserToast('Value updated', false);
             },
-            cancel: () => {
+            onCancel: () => {
                 sendUserToast('Error updating value', true);
             },
-            error: () => {
+            onError: () => {
                 sendUserToast('Error updating value', true);
             }
         });

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

@@ -67,7 +67,7 @@ const datasource = $state({
             return;
         }
         runnableComponent?.runComponent(undefined, undefined, undefined, currentParams, {
-            done: (items) => {
+            onDone: (items) => {
                 let lastRow = -1;
                 if (datasource?.rowCount && datasource.rowCount <= params.endRow) {
                     lastRow = datasource.rowCount;
@@ -92,10 +92,10 @@ const datasource = $state({
                     params.failCallback();
                 }
             },
-            cancel: () => {
+            onCancel: () => {
                 params.failCallback();
             },
-            error: () => {
+            onError: () => {
                 params.failCallback();
             }
         });

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

@@ -8,7 +8,6 @@ import { createEventDispatcher, getContext, onDestroy, onMount, untrack } from '
 import { computeGlobalContext, eval_like } from './eval';
 import InputValue from './InputValue.svelte';
 import { collectOneOfFields, selectId } from '../../editor/appUtils';
-import ResultJobLoader from '../../../ResultJobLoader.svelte';
 import { userStore } from '../../../../stores';
 import { get } from 'svelte/store';
 import RefreshButton from './RefreshButton.svelte';
@@ -16,6 +15,7 @@ import { ctxRegex } from '../../utils';
 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), 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();
 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');
@@ -34,7 +34,7 @@ function setDebouncedExecute() {
     executeTimeout && clearTimeout(executeTimeout);
     executeTimeout = setTimeout(() => {
         console.debug('debounce execute');
-        executeComponent(true);
+        executeComponent();
     }, 200);
 }
 function computeStaticValues() {
@@ -56,6 +56,57 @@ function refreshOnStaticChange() {
 // $: sendUserToast('args' + JSON.stringify(runnableInputValues) + Boolean(extraQueryParams) || args)
 // $: console.log(runnableInputValues)
 let firstRefresh = true;
+function genCallbacks({ onDone, onCancel, onError }) {
+    const callbacks = {
+        started({ id }) {
+            console.log('started', id);
+            loading = true;
+            outputs.jobId?.set(id);
+            dispatch('started', id);
+        },
+        doneWithoutCompute(r) {
+            onDone?.(r);
+        },
+        doneResult({ id, result }) {
+            onDone?.(result);
+            lastJobId = id;
+            setResult(result, id);
+            loading = false;
+            dispatch('done', { id, result });
+        },
+        cancel({ id }) {
+            onCancel?.();
+            let jobId = id;
+            console.debug('cancel', jobId);
+            let job = $jobsById[jobId];
+            if (job && job.created_at && !job.duration_ms) {
+                $jobsById[jobId] = {
+                    ...job,
+                    started_at: job.started_at ?? Date.now(),
+                    duration_ms: Date.now() - (job.started_at ?? job.created_at)
+                };
+            }
+            dispatch('cancel', { id });
+        },
+        doneError({ id, error }) {
+            onError?.(error);
+            setResult({ error }, id);
+            loading = false;
+            dispatch('doneError', { id, error });
+        }
+    };
+    if (isEditor) {
+        callbacks.running = ({ id }) => {
+            console.log('running', id);
+            let jobId = id;
+            let job = $jobsById[jobId];
+            if (job && !job.started_at) {
+                $jobsById[jobId] = { ...job, started_at: Date.now() };
+            }
+        };
+    }
+    return callbacks;
+}
 function refreshIfAutoRefresh(src) {
     // console.log(
     // 	'refreshIfAutoRefresh',
@@ -151,7 +202,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
     let jobId;
     console.debug(`Executing ${id}`);
     if (iterContext && $iterContext.disabled) {
-        callbacks?.done({});
+        callbacks?.onDone?.({});
         console.debug(`Skipping execution of ${id} because it is part of a disabled list`);
         return;
     }
@@ -185,7 +236,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
             await setResult(r, job);
         }
         loading = false;
-        callbacks?.done(r);
+        callbacks?.onDone?.(r);
         if (setRunnableJobEditorPanel && editorContext) {
             editorContext.runnableJobEditorPanel.update((p) => {
                 return {
@@ -200,16 +251,16 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
         if (!noToast) {
             sendUserToast('This app is not connected to a windmill backend, it is a static preview');
         }
-        callbacks?.done({});
+        callbacks?.onDone?.({});
         return;
     }
     if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
-        callbacks?.done({});
+        callbacks?.onDone?.({});
         return;
     }
     if (!resultJobLoader) {
         console.warn('No test job loader');
-        callbacks?.done({});
+        callbacks?.onDone?.({});
         return;
     }
     try {
@@ -219,7 +270,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
                 addJob(uuid);
             }
             return uuid;
-        }, callbacks);
+        }, genCallbacks(callbacks ?? {}));
         if (setRunnableJobEditorPanel && editorContext) {
             editorContext.runnableJobEditorPanel.update((p) => {
                 return {
@@ -234,7 +285,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
         let error = e.body ?? e.message;
         updateResult({ error });
         $errorByComponent[id] = { error };
-        callbacks?.done({ error });
+        callbacks?.onError?.({ error });
         sendUserToast(error, true);
         loading = false;
     }
@@ -301,9 +352,6 @@ export async function runComponent(noToast = true, inlineScriptOverride, setRunn
         $errorByComponent[id] = { error };
     }
 }
-async function setJobId(jobId) {
-    outputs.jobId?.set(jobId);
-}
 function recordJob(jobId, result, jobError, transformer) {
     const error = jobError ?? JSON.stringify(transformer?.error, null, 4);
     if (isEditor && jobId) {
@@ -415,13 +463,13 @@ onMount(() => {
                 dispatch('recompute');
                 rejectCb = reject;
                 executeComponent(true, inlineScript, setRunnableJobEditorPanel, undefined, {
-                    done: (x) => {
+                    onDone: (x) => {
                         resolve(x);
                     },
-                    cancel: () => {
+                    onCancel: () => {
                         reject();
                     },
-                    error: (e) => {
+                    onError: (e) => {
                         console.error(e);
                         reject(e);
                     }
@@ -570,47 +618,10 @@ $effect(() => {
 	{/each}
 {/if}
 
-<ResultJobLoader
+<JobLoader
 	{allowConcurentRequests}
-	{isEditor}
-	on:started={(e) => {
-		console.log('started', e.detail)
-		loading = true
-		setJobId(e.detail)
-		dispatch('started', e.detail)
-	}}
+	onlyResult
 	workspaceOverride={workspace}
-	on:done={(e) => {
-		lastJobId = e.detail.id
-		setResult(e.detail.result, e.detail.id)
-		loading = false
-		dispatch('done', { id: e.detail?.id, result: e.detail?.result })
-	}}
-	on:cancel={(e) => {
-		let jobId = e.detail
-		console.debug('cancel', jobId)
-		let job = $jobsById[jobId]
-		if (job && job.created_at && !job.duration_ms) {
-			$jobsById[jobId] = {
-				...job,
-				started_at: job.started_at ?? Date.now(),
-				duration_ms: Date.now() - (job.started_at ?? job.created_at)
-			}
-		}
-		dispatch('cancel', { id: e.detail })
-	}}
-	on:running={(e) => {
-		let jobId = e.detail
-		let job = $jobsById[jobId]
-		if (job && !job.started_at) {
-			$jobsById[jobId] = { ...job, started_at: Date.now() }
-		}
-	}}
-	on:doneError={(e) => {
-		setResult({ error: e.detail.error }, e.detail.id)
-		loading = false
-		dispatch('doneError', { id: e.detail.id, result: e.detail.result })
-	}}
 	bind:this={resultJobLoader}
 />
 

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

@@ -36,10 +36,10 @@ interface Props {
     replaceCallback?: boolean;
     children?: import('svelte').Snippet;
 }
-type Callbacks = {
-    done: (x: any) => void;
-    cancel: () => void;
-    error: (e: any) => void;
+type RunnableCallback = {
+    onDone?: (r: any) => void;
+    onCancel?: () => void;
+    onError?: (e: any) => void;
 };
 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> & {
@@ -92,7 +92,7 @@ declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<Props, {
         };
         force_viewer_allow_user_resources?: Array<(string)>;
     }>;
-    runComponent: (noToast?: boolean, inlineScriptOverride?: InlineScript, setRunnableJobEditorPanel?: boolean, dynamicArgsOverride?: Record<string, any>, callbacks?: Callbacks) => Promise<string | undefined>;
+    runComponent: (noToast?: boolean, inlineScriptOverride?: InlineScript, setRunnableJobEditorPanel?: boolean, dynamicArgsOverride?: Record<string, any>, callbacks?: RunnableCallback) => Promise<string | undefined>;
 }, "result" | "loading">;
 type RunnableComponent = InstanceType<typeof RunnableComponent>;
 export default RunnableComponent;

package/package/components/apps/components/inputs/AppUserResource.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext, onDestroy } from 'svelte';
+<script lang="ts">import { getContext, onDestroy, untrack } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
@@ -9,7 +9,7 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { twMerge } from 'tailwind-merge';
 import LightweightResourcePicker from '../../../LightweightResourcePicker.svelte';
 let { id, configuration, verticalAlignment = undefined, customCss = undefined, render } = $props();
-const { app, worldStore, componentControl } = getContext('AppViewerContext');
+const { app, worldStore, componentControl, isEditor, mode } = getContext('AppViewerContext');
 let resolvedConfig = $state(initConfig(components['userresourcecomponent'].initialData.configuration, configuration));
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
@@ -18,8 +18,29 @@ let outputs = initOutput($worldStore, id, {
 });
 let css = $state(initCss($app.css?.['userresourcecomponent'], customCss));
 let classInput = $derived(twMerge('windmillapp w-full px-2', css?.input?.class ?? '', 'wm-input', 'wm-user-resource-select'));
-let value = $state(outputs.result.peak()?.replace('$res:', ''));
-value && assignValue(outputs.result.peak());
+function getDefaultValue() {
+    if (resolvedConfig.defaultValue && typeof resolvedConfig.defaultValue === 'string') {
+        const nval = resolvedConfig.defaultValue;
+        return nval.replace('$res:', '');
+    }
+    return undefined;
+}
+let value = $state(outputs.result.peak()?.replace('$res:', '') ?? getDefaultValue());
+$effect(() => {
+    value;
+    untrack(() => assignValue(value));
+});
+let lastDefaultValue = $state(getDefaultValue());
+$effect(() => {
+    // when in dnd mode, we react to the default value being changed for better UX
+    if (isEditor && $mode === 'dnd') {
+        const currentDefaultValue = getDefaultValue(); // reactive
+        if (lastDefaultValue !== currentDefaultValue) {
+            value = currentDefaultValue;
+            lastDefaultValue = currentDefaultValue;
+        }
+    }
+});
 onDestroy(() => {
     listInputs?.remove(id);
 });
@@ -76,10 +97,7 @@ let resourcePicker = $state(undefined);
 			<LightweightResourcePicker
 				expressOAuthSetup={resolvedConfig.expressOauthSetup}
 				bind:this={resourcePicker}
-				{value}
-				on:change={(e) => {
-					assignValue(e.detail)
-				}}
+				bind:value
 				disabled={resolvedConfig.disabled}
 				resourceType={resolvedConfig.resourceType}
 			/>