windmill-components 1.558.4 → 1.596.0

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

@@ -1,10 +1,10 @@
 <script lang="ts">import { getContext, tick } from 'svelte';
-import { findGridItem } from '../../../editor/appUtils';
 import Button from '../../../../common/button/Button.svelte';
 import { RefreshCw } from 'lucide-svelte';
 import Badge from '../../../../common/badge/Badge.svelte';
 import Alert from '../../../../common/alert/Alert.svelte';
 import { isObject } from '../../../../../utils';
+import { findGridItem } from '../../../editor/appUtilsCore';
 let { id, columnDefs = [], result = [], allowColumnDefsActions = true, children, actionsPresent = false, customActionsHeader = undefined } = $props();
 const { app, mode, selectedComponent } = getContext('AppViewerContext');
 let syncInProgress = false;
@@ -43,22 +43,10 @@ async function ensureActionsColumn() {
         return;
     // Type guard for configuration structure
     const conf = rawConf;
-    if (!conf.type || (conf.type !== 'static' && conf.type !== 'evalv2'))
+    if (!conf.type || conf.type !== 'static')
         return;
     let currentColumns;
-    if (conf.type === 'static') {
-        currentColumns = Array.isArray(conf.value) ? conf.value : [];
-    }
-    else if (conf.type === 'evalv2') {
-        try {
-            const parsed = JSON.parse(conf.expr ?? '[]');
-            currentColumns = Array.isArray(parsed) ? parsed : [];
-        }
-        catch (e) {
-            console.warn('Failed to parse columnDefs expression:', e);
-            currentColumns = [];
-        }
-    }
+    currentColumns = Array.isArray(conf.value) ? conf.value : [];
     const hasPlaceholder = hasActionsPlaceholder(currentColumns);
     // Auto-sync logic: add missing actions column, remove when actions gone
     const needsAdd = actionsPresent && !hasPlaceholder;
@@ -71,12 +59,7 @@ async function ensureActionsColumn() {
     if (needsRemove)
         nextColumns = removeActionsPlaceholder(nextColumns);
     // Update configuration with proper typing
-    if (conf.type === 'static') {
-        conf.value = nextColumns;
-    }
-    else if (conf.type === 'evalv2') {
-        conf.expr = JSON.stringify(nextColumns);
-    }
+    conf.value = nextColumns;
     await updateConfiguration();
 }
 $effect(() => {
@@ -141,7 +124,12 @@ async function updateConfiguration() {
 							{/each}
 						</div>
 						<div class="w-full flex fles-row justify-end">
-							<Button startIcon={{ icon: RefreshCw }} size="xs" color="dark" on:click={syncColumns}>
+							<Button
+								startIcon={{ icon: RefreshCw }}
+								size="xs"
+								variant="accent"
+								on:click={syncColumns}
+							>
 								Sync columns definition
 							</Button>
 						</div>

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

@@ -2,6 +2,7 @@
 import { initOutput } from '../../editor/appUtils';
 import RunnableComponent from './RunnableComponent.svelte';
 import InitializeComponent from './InitializeComponent.svelte';
+import { isRunnableByName, isRunnableByPath } from '../../inputType';
 let { id, runnable, children } = $props();
 const { worldStore, staticExporter, noBackend, runnableComponents } = getContext('AppViewerContext');
 let result = $state(noBackend ? runnable.noBackendValue : undefined);
@@ -22,7 +23,7 @@ let outputs = initOutput($worldStore, id, {
 });
 </script>
 
-{#if runnable && (runnable.type == 'runnableByPath' || (runnable.type == 'runnableByName' && runnable.inlineScript != undefined))}
+{#if runnable && (isRunnableByPath(runnable) || (isRunnableByName(runnable) && runnable.inlineScript != undefined))}
 	<RunnableComponent
 		render={false}
 		{id}

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

@@ -3,7 +3,7 @@ import { get } from 'svelte/store';
 import { accessPropertyByPath } from '../../utils';
 import { computeGlobalContext, eval_like } from './eval';
 import { deepEqual } from 'fast-equals';
-import { deepMergeWithPriority, isCodeInjection } from '../../../../utils';
+import { deepMergeWithPriority, isCodeInjection, readFieldsRecursively } from '../../../../utils';
 import sum from 'hash-sum';
 import { createDispatcherIfMounted } from '../../../../createDispatcherIfMounted';
 let { input, value = $bindable(), id = undefined, error = $bindable(''), key = '', field = key, onDemandOnly = false, exportValueFunction = false } = $props();
@@ -230,7 +230,7 @@ let fullContext = $derived({
     row: rowContext ? $rowContext : undefined,
     group: groupStore ? $groupStore : undefined
 });
-$effect.pre(() => {
+$effect(() => {
     input?.type == 'evalv2' &&
         !onDemandOnly &&
         (fullContext.iter != undefined ||
@@ -239,7 +239,7 @@ $effect.pre(() => {
         input.connections?.some((x) => x.componentId == 'row' || x.componentId == 'iter' || x.componentId == 'group') &&
         untrack(() => debounceEval());
 });
-$effect.pre(() => {
+$effect(() => {
     input &&
         input.type == 'templatev2' &&
         isCodeInjection(input.eval) &&
@@ -253,19 +253,16 @@ $effect.pre(() => {
 // 	console.log('handleConnection4', input)
 // })
 $effect(() => {
-    input?.type == 'static' && input.value;
+    readFieldsRecursively(input);
     input && $worldStore && untrack(() => debounce(handleConnection));
 });
-$effect.pre(() => {
+$effect(() => {
     input &&
         input.type == 'template' &&
         isCodeInjection(input.eval) &&
         $stateStore &&
         untrack(() => debounce(debounceTemplate));
 });
-$effect.pre(() => {
-    input && input.type == 'eval' && $stateStore && untrack(() => debounce2(debounceEval));
-});
 if (input?.type == 'eval') {
     $worldStore?.stateId.subscribe((x) => {
         debounce2(debounceEval);
@@ -276,10 +273,13 @@ if (input?.type == 'template') {
         debounce2(debounceTemplate);
     });
 }
-$effect.pre(() => {
+$effect(() => {
+    input && input.type == 'eval' && $stateStore && untrack(() => debounce2(debounceEval));
+});
+$effect(() => {
     input?.type == 'evalv2' && input.expr && untrack(() => debounceEval('exprChanged'));
 });
-$effect.pre(() => {
+$effect(() => {
     input?.type == 'templatev2' && input.eval && untrack(() => debounceTemplate());
 });
 </script>

package/package/components/apps/components/helpers/Loader.svelte

@@ -6,7 +6,7 @@ let { loading, children } = $props();
 	{@render children?.()}
 {:else}
 	<div class="w-full h-full">
-		<div class="absolute inset-0 center-center flex-col bg-surface text-tertiary border">
+		<div class="absolute inset-0 center-center flex-col bg-surface text-primary border">
 			<Loader2 class="animate-spin" size={16} />
 			<span class="text-xs mt-1">Loading</span>
 		</div>

package/package/components/apps/components/helpers/MissingConnectionWarning.svelte

@@ -6,7 +6,7 @@ export {};
 	<div class="flex gap-2 flex-col">
 		<div>This component is expecting a connected input: </div>
 		<div>
-			<code class="bg-gray-50 border text-tertiary">{input.connection?.path} </code>
+			<code class="bg-gray-50 border text-primary">{input.connection?.path} </code>
 		</div>
 	</div>
 {/if}

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

@@ -1,13 +1,15 @@
 <script lang="ts">import Alert from '../../../common/alert/Alert.svelte';
 import Popover from '../../../Popover.svelte';
 import {} from '../../../../gen';
-import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
+import { classNames, defaultIfEmptyString, emptySchema, sendUserToast, undefinedIfEmpty } from '../../../../utils';
 import { deepEqual } from 'fast-equals';
 import { Bug } from 'lucide-svelte';
 import { createEventDispatcher, getContext, onDestroy, onMount, untrack } from 'svelte';
+import { isRunnableByName } from '../../inputType';
 import { computeGlobalContext, eval_like } from './eval';
 import InputValue from './InputValue.svelte';
-import { collectOneOfFields, selectId } from '../../editor/appUtils';
+import { selectId } from '../../editor/appUtils';
+import { collectOneOfFields } from '../../editor/appUtilsCore';
 import { userStore } from '../../../../stores';
 import { get } from 'svelte/store';
 import RefreshButton from './RefreshButton.svelte';
@@ -73,7 +75,8 @@ function genCallbacks({ onDone, onCancel, onError }) {
             dispatch('done', { id, result });
         },
         resultStreamUpdate({ id, result_stream: nresult_stream }) {
-            setResult(nresult_stream, id);
+            setResult(nresult_stream, id, false);
+            dispatch('streamupdate', { id, result_stream: nresult_stream });
         },
         cancel({ id }) {
             onCancel?.();
@@ -152,7 +155,7 @@ function stripSchema(inputs, s) {
     if (inputs === undefined) {
         return emptySchema();
     }
-    let schema = runnable?.type == 'runnableByName' ? runnable.inlineScript?.schema : runnable?.schema;
+    let schema = isRunnableByName(runnable) ? runnable.inlineScript?.schema : runnable?.schema;
     try {
         schemaStripped = JSON.parse(JSON.stringify(schema));
     }
@@ -207,7 +210,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
         console.debug(`Skipping execution of ${id} because it is part of a disabled list`);
         return;
     }
-    if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
+    if (isRunnableByName(runnable) && runnable.inlineScript?.language === 'frontend') {
         loading = true;
         let job;
         if (isEditor) {
@@ -255,7 +258,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
         callbacks?.onDone?.({});
         return;
     }
-    if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
+    if (isRunnableByName(runnable) && !runnable.inlineScript) {
         callbacks?.onDone?.({});
         return;
     }
@@ -266,7 +269,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
     }
     try {
         jobId = await resultJobLoader?.abstractRun(async () => {
-            const uuid = await executeRunnable(runnable, workspace, $app.version, $userStore?.username, $appPath, id, await buildRequestBody(dynamicArgsOverride), inlineScriptOverride);
+            const uuid = await executeRunnable(runnable, workspace, $app.version, $userStore?.username, $appPath, id, await buildRequestBody(dynamicArgsOverride), inlineScriptOverride, extraQueryParams);
             if (isEditor) {
                 addJob(uuid);
             }
@@ -296,17 +299,20 @@ export async function buildRequestBody(dynamicArgsOverride) {
     const staticRunnableInputs = {};
     const allowUserResources = [];
     for (const k of Object.keys(fields ?? {})) {
-        let field = fields[k];
-        if (field?.type == 'static' && fields[k]) {
+        const field = fields[k];
+        if (isEditor &&
+            ['user', 'evalv2', 'connected'].includes(field.type) &&
+            'allowUserResources' in field &&
+            field.allowUserResources) {
+            allowUserResources.push(k);
+        }
+        if (field?.type == 'static') {
             if (isEditor) {
                 staticRunnableInputs[k] = field.value;
             }
         }
         else if (field?.type == 'user') {
             nonStaticRunnableInputs[k] = args?.[k];
-            if (isEditor && field.allowUserResources) {
-                allowUserResources.push(k);
-            }
         }
         else if (field?.type == 'eval' || (field?.type == 'evalv2' && inputValues[k])) {
             const ctxMatch = field?.expr?.match(ctxRegex);
@@ -314,17 +320,10 @@ export async function buildRequestBody(dynamicArgsOverride) {
                 nonStaticRunnableInputs[k] = '$ctx:' + ctxMatch[1];
             }
             else {
-                // console.log('k', k)
                 nonStaticRunnableInputs[k] = await inputValues[k]?.computeExpr();
             }
-            if (isEditor && field?.type == 'evalv2' && field.allowUserResources) {
-                allowUserResources.push(k);
-            }
         }
         else {
-            if (isEditor && field?.type == 'connected' && field.allowUserResources) {
-                allowUserResources.push(k);
-            }
             nonStaticRunnableInputs[k] = runnableInputValues[k];
         }
     }
@@ -334,8 +333,10 @@ export async function buildRequestBody(dynamicArgsOverride) {
         args: nonStaticRunnableInputs,
         component: id,
         force_viewer_static_fields: !isEditor ? undefined : staticRunnableInputs,
-        force_viewer_one_of_fields: !isEditor ? undefined : oneOfRunnableInputs,
-        force_viewer_allow_user_resources: !isEditor ? undefined : allowUserResources
+        force_viewer_one_of_fields: !isEditor ? undefined : undefinedIfEmpty(oneOfRunnableInputs),
+        force_viewer_allow_user_resources: !isEditor
+            ? undefined
+            : undefinedIfEmpty(allowUserResources)
     };
     return requestBody;
 }
@@ -415,7 +416,7 @@ function updateResult(res) {
     outputs.result?.set($state.snapshot(res));
     result = res;
 }
-async function setResult(res, jobId) {
+async function setResult(res, jobId, dispatchSuccess = true) {
     dispatch('resultSet', res);
     const errors = getResultErrors(res);
     if (errors) {
@@ -447,7 +448,9 @@ async function setResult(res, jobId) {
     updateResult(transformerResult ?? res);
     recordJob(jobId, result, undefined, transformerResult);
     delete $errorByComponent[id];
-    dispatch('success', result);
+    if (dispatchSuccess) {
+        dispatch('success', result);
+    }
     // callbacks?.done(res)
 }
 function handleInputClick(e) {
@@ -587,7 +590,7 @@ $effect(() => {
     runnableInputValues && !ignoreFirst && dispatch('argsChanged');
     ignoreFirst = false;
 });
-let refreshOn = $derived(runnable && runnable.type === 'runnableByName' ? (runnable.inlineScript?.refreshOn ?? []) : []);
+let refreshOn = $derived(runnable && isRunnableByName(runnable) ? (runnable.inlineScript?.refreshOn ?? []) : []);
 $effect(() => {
     ;
     (autoRefresh || forceSchemaDisplay) &&
@@ -609,7 +612,7 @@ $effect(() => {
 	{/if}
 {/each}
 
-{#if runnable?.type == 'runnableByName' && runnable.inlineScript?.language == 'frontend'}
+{#if isRunnableByName(runnable) && runnable.inlineScript?.language == 'frontend'}
 	{#each runnable.inlineScript.refreshOn ?? [] as { id: tid, key } (`${tid}-${key}`)}
 		{@const fkey = `${tid}-${key}${extraKey}`}
 		<InputValue

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

@@ -1,6 +1,6 @@
-import type { AppInputs, Runnable } from '../../inputType';
+import { type AppInputs, type InlineScript, type Runnable } from '../../inputType';
 import type { Output } from '../../rx';
-import type { CancelablePromise, InlineScript } from '../../types';
+import type { CancelablePromise } from '../../types';
 interface Props {
     id: string;
     fields: AppInputs;
@@ -58,6 +58,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<Props, {
     started: CustomEvent<any>;
     done: CustomEvent<any>;
+    streamupdate: CustomEvent<any>;
     cancel: CustomEvent<any>;
     doneError: CustomEvent<any>;
     resultSet: CustomEvent<any>;
@@ -92,6 +93,9 @@ declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<Props, {
             [key: string]: unknown;
         };
         force_viewer_allow_user_resources?: Array<(string)>;
+        run_query_params?: {
+            [key: string]: unknown;
+        };
     }>;
     runComponent: (noToast?: boolean, inlineScriptOverride?: InlineScript, setRunnableJobEditorPanel?: boolean, dynamicArgsOverride?: Record<string, any>, callbacks?: RunnableCallback) => Promise<string | undefined>;
 }, "result" | "loading" | "result_stream">;

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, allowConcurentRequests = false, onSuccess = () => { }, children, nonRenderedPlaceholder } = $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, doOnSubmit = undefined, doOnError = undefined, clearFormInputs, render, recomputeIds = [], outputs, extraKey = undefined, refreshOnStart = false, errorHandledByComponent = false, allowConcurentRequests = false, onSuccess = () => { }, children, nonRenderedPlaceholder } = $props();
 $effect.pre(() => {
     if (initializing == undefined) {
         initializing = true;
@@ -55,7 +55,24 @@ function isRunnableDefined(componentInput) {
         componentInput.runnable.inlineScript != undefined) ||
         isScriptByPathDefined(componentInput));
 }
+async function handleSubmitSideEffect() {
+    if (clearFormInputs) {
+        if (clearFormInputs.selected === 'onSubmit')
+            clearFormInputs.onClear();
+    }
+    if (!doOnSubmit)
+        return;
+    if (doOnSubmit.selected == 'none')
+        return;
+    await executeSideEffect(doOnSubmit, true);
+}
 export async function handleSideEffect(success, errorMessage) {
+    if (clearFormInputs) {
+        if (!success && clearFormInputs.selected === 'onError')
+            clearFormInputs.onClear();
+        if (success && clearFormInputs.selected === 'onSuccess')
+            clearFormInputs.onClear();
+    }
     const sideEffect = success ? doOnSuccess : doOnError;
     if (recomputeIds && success) {
         recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb.map((cb) => cb()));
@@ -64,6 +81,11 @@ export async function handleSideEffect(success, errorMessage) {
         return;
     if (sideEffect.selected == 'none')
         return;
+    await executeSideEffect(sideEffect, success, errorMessage);
+}
+async function executeSideEffect(sideEffect, success = true, errorMessage) {
+    if (!sideEffect)
+        return;
     switch (sideEffect.selected) {
         case 'setTab':
             let setTab = sideEffect?.configuration.setTab?.setTab;
@@ -193,12 +215,15 @@ export async function handleSideEffect(success, errorMessage) {
 		wrapperClass={runnableClass}
 		wrapperStyle={runnableStyle}
 		{render}
-		on:started
+		on:started={(e) => {
+			handleSubmitSideEffect()
+		}}
 		on:done
 		on:doneError
 		on:cancel
 		on:recompute
 		on:argsChanged
+		on:streamupdate
 		on:resultSet={(e) => {
 			const res = e.detail
 			if ($initialized?.runnableInitialized?.[fullId] === undefined) {

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

@@ -60,7 +60,12 @@ interface Props {
     runnableClass?: string;
     runnableStyle?: string;
     doOnSuccess?: SideEffectAction;
+    doOnSubmit?: SideEffectAction;
     doOnError?: SideEffectAction;
+    clearFormInputs?: {
+        selected: 'never' | 'onSuccess' | 'onSubmit' | 'onError';
+        onClear: () => void;
+    };
     render: boolean;
     recomputeIds?: string[];
     outputs: {
@@ -91,12 +96,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const RunnableWrapper: $$__sveltets_2_IsomorphicComponent<Props, {
-    started: CustomEvent<any>;
     done: CustomEvent<any>;
     doneError: CustomEvent<any>;
     cancel: CustomEvent<any>;
     recompute: CustomEvent<any>;
     argsChanged: CustomEvent<any>;
+    streamupdate: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {

package/package/components/apps/components/helpers/eval.d.ts

@@ -20,6 +20,7 @@ export declare function eval_like(text: string, context: {} | undefined, state:
     waitJob?: (jobId: string) => void;
     askNewResource?: () => void;
     setGroupValue?: (key: string, value: any) => void;
+    sendMessage?: (message: string) => void;
 }>, worldStore: World | undefined, runnableComponents: Record<string, {
     cb?: (() => void)[];
 }>, noReturn: boolean, groupContextId: string | undefined, globalRecomputeFunction: ((excludeIds?: string) => void) | undefined): Promise<any>;

package/package/components/apps/components/helpers/eval.js

@@ -18,7 +18,7 @@ export function computeGlobalContext(world, id, extraContext = {}) {
 function create_context_function_template(eval_string, contextKeys, noReturn) {
     let hasReturnAsLastLine = noReturn || eval_string.split('\n').some((x) => x.startsWith('return '));
     return `
-return async function (context, state, createProxy, goto, setTab, recompute, globalRecompute, getAgGrid, setValue, setSelectedIndex, openModal, closeModal, open, close, validate, invalidate, validateAll, clearFiles, showToast, waitJob, askNewResource, downloadFile) {
+return async function (context, state, createProxy, goto, setTab, recompute, globalRecompute, getAgGrid, setValue, setSelectedIndex, openModal, closeModal, open, close, validate, invalidate, validateAll, clearFiles, sendMessage, showToast, waitJob, askNewResource, downloadFile) {
 "use strict";
 ${contextKeys && contextKeys.length > 0
         ? `let ${contextKeys.map((key) => ` ${key} = createProxy('${key}', context['${key}'])`)};`
@@ -146,6 +146,8 @@ export async function eval_like(text, context = {}, state, editor, controlCompon
         controlComponents[id]?.validateAll?.();
     }, (id) => {
         controlComponents[id]?.clearFiles?.();
+    }, (id, message) => {
+        controlComponents[id]?.sendMessage?.(message);
     }, (message, error) => {
         sendUserToast(message, error);
     }, async (id) => waitJob(id), (id) => {

package/package/components/apps/components/helpers/executeRunnable.d.ts

@@ -1,4 +1,4 @@
 import { type ExecuteComponentData } from '../../../../gen';
-import type { Runnable } from '../../inputType';
-import type { InlineScript } from '../../types';
-export declare function executeRunnable(runnable: Runnable, workspace: string, version: number | undefined, username: string | undefined, path: string, id: string, requestBody: ExecuteComponentData['requestBody'], inlineScriptOverride?: InlineScript): Promise<string>;
+import { type Runnable } from '../../inputType';
+import type { InlineScript } from '../../sharedTypes';
+export declare function executeRunnable(runnable: Runnable, workspace: string, version: number | undefined, username: string | undefined, path: string, id: string, requestBody: ExecuteComponentData['requestBody'], inlineScriptOverride?: InlineScript, queryParams?: Record<string, any>): Promise<string>;

package/package/components/apps/components/helpers/executeRunnable.js

@@ -1,8 +1,9 @@
 import { AppService } from '../../../../gen';
 import { defaultIfEmptyString } from '../../../../utils';
-export async function executeRunnable(runnable, workspace, version, username, path, id, requestBody, inlineScriptOverride) {
+import { isRunnableByName, isRunnableByPath } from '../../inputType';
+export async function executeRunnable(runnable, workspace, version, username, path, id, requestBody, inlineScriptOverride, queryParams) {
     let appPath = defaultIfEmptyString(path, `u/${username ?? 'unknown'}/newapp`);
-    if (runnable?.type === 'runnableByName') {
+    if (isRunnableByName(runnable)) {
         const { inlineScript } = inlineScriptOverride
             ? { inlineScript: inlineScriptOverride }
             : runnable;
@@ -19,13 +20,16 @@ export async function executeRunnable(runnable, workspace, version, username, pa
             };
         }
     }
-    else if (runnable?.type === 'runnableByPath') {
+    else if (isRunnableByPath(runnable)) {
         const { path, runType } = runnable;
         requestBody['path'] = runType !== 'hubscript' ? `${runType}/${path}` : `script/${path}`;
     }
     if (version !== undefined) {
         requestBody['version'] = version;
     }
+    if (queryParams && Object.keys(queryParams).length > 0) {
+        requestBody['run_query_params'] = queryParams;
+    }
     const uuid = await AppService.executeComponent({
         workspace,
         path: appPath,

package/package/components/apps/components/inputs/AppDateTimeInput.svelte

@@ -62,6 +62,11 @@ $effect.pre(() => {
     [resolvedConfig.defaultValue];
     untrack(() => handleDefault(resolvedConfig.defaultValue));
 });
+function setIterValue(value) {
+    if (iterContext && listInputs) {
+        listInputs.set(id, value);
+    }
+}
 $effect.pre(() => {
     if (value) {
         const r = formatDate(value, resolvedConfig.outputFormat);
@@ -89,17 +94,15 @@ $effect.pre(() => {
                 outputs?.validity.set(false);
             }
         }
-        if (iterContext && listInputs) {
-            listInputs.set(id, value);
-        }
+        untrack(() => setIterValue(value));
     }
     else {
         outputs?.result.set(undefined);
-        if (iterContext && listInputs) {
-            listInputs.set(id, undefined);
-        }
+        untrack(() => setIterValue(undefined));
     }
-    fireOnChange();
+    untrack(() => {
+        fireOnChange();
+    });
 });
 </script>
 

package/package/components/apps/components/inputs/AppMultiSelectV2.svelte

@@ -22,7 +22,11 @@ const outputs = initOutput($worldStore, id, {
     result: []
 });
 let selectedItems = $state([...new Set(outputs?.result.peak())].map(convertToValue));
-$effect(() => setResultsFromSelectedItems(selectedItems));
+$effect(() => {
+    selectedItems;
+    // console.log('selectedItems', selectedItems)
+    untrack(() => setResultsFromSelectedItems(selectedItems));
+});
 let customItems = $state([]);
 function setResultsFromSelectedItems(value) {
     outputs?.result.set(value);

package/package/components/apps/components/inputs/AppQuillEditor.svelte

@@ -108,7 +108,7 @@ $effect.pre(() => {
 
 	:global(.ql-toolbar .ql-fill) {
 		--tw-bg-opacity: 1;
-		background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+		background-color: rgb(211 79 90 / var(--tw-bg-opacity, 1));
 		fill: rgb(var(--color-text-primary) / 1);
 		stroke: none;
 }

package/package/components/apps/components/inputs/AppSelectTab.svelte

@@ -91,10 +91,8 @@ $effect.pre(() => {
 					style={css?.allTabs?.style}
 					selectedClass={twMerge(css?.selectedTab?.class, 'wm-select-tab-selected')}
 					selectedStyle={css?.selectedTab?.style}
-					size={resolvedConfig?.tabSize}
-				>
-					<span class="font-semibold text-md">{item.label}</span>
-				</Tab>
+					label={item.label}
+				/>
 			{/each}
 		</Tabs>
 	</div>

package/package/components/apps/components/inputs/currency/CurrencyInput.svelte

@@ -179,12 +179,12 @@ let darkMode = $state(false);
 
 	input.currencyInput__formatted--positive {
 		--tw-text-opacity: 1;
-		color: rgb(21 128 61 / var(--tw-text-opacity, 1));
+		color: rgb(59 122 91 / var(--tw-text-opacity, 1));
 }
 
 	input.currencyInput__formatted--negative {
 		--tw-text-opacity: 1;
-		color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+		color: rgb(211 79 90 / var(--tw-text-opacity, 1));
 }
 
 	input.currencyInput__formatted:disabled {

package/package/components/apps/components/layout/AppDecisionTree.svelte

@@ -225,7 +225,7 @@ $effect.pre(() => {
 			<Button
 				on:click={next}
 				size="xs2"
-				color="dark"
+				variant="accent"
 				endIcon={{ icon: ArrowRight }}
 				disabled={isNextDisabled ||
 					currentNodeId === lastNodeId ||

package/package/components/apps/components/layout/AppDrawer.svelte

@@ -78,9 +78,10 @@ let css = $state(initCss($app.css?.drawercomponent, customCss));
 					}
 					appDrawer?.toggleDrawer()
 				}}
-				size={resolvedConfig.size}
+				extendedSize={resolvedConfig.size}
 				color={resolvedConfig.color}
 				style={css?.button?.style}
+				variant="contained"
 			>
 				{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
 					<div>{resolvedConfig.label}</div>

package/package/components/apps/components/layout/AppList.svelte

@@ -188,7 +188,7 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 				{:else}
 					{@render nonRenderedPlaceholder?.()}
 					{#if !Array.isArray(result)}
-						<div class="text-center text-tertiary">Input data is not an array</div>
+						<div class="text-center text-primary">Input data is not an array</div>
 					{/if}
 				{/if}
 			</div>
@@ -198,8 +198,7 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 				>
 					<Button
 						size="xs2"
-						variant="border"
-						color="light"
+						variant="default"
 						btnClasses="flex flex-row gap-1 items-center wm-list-pagination-buttons"
 						on:click={() => {
 							isPreviousLoading = true
@@ -217,8 +216,7 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 					</Button>
 					<Button
 						size="xs2"
-						variant="border"
-						color="light"
+						variant="default"
 						btnClasses="flex flex-row gap-1 items-center wm-list-pagination-buttons"
 						on:click={() => {
 							isNextLoading = true