windmill-components 1.623.2 → 1.655.0

package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type IDatasource } from 'ag-grid-community';
-import type { ComponentCustomCSS } from '../../../types';
+import { type ComponentCustomCSS } from '../../../types';
 import type { TableAction, components } from '../../../editor/component';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';

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

@@ -23,14 +23,15 @@ function clear() {
 }
 const context = getContext('AppViewerContext');
 const { app, worldStore } = context;
-let css = $state(initCss($app.css?.aggridcomponent, customCss));
+let css = $state(initCss($app.css?.aggridcomponent, untrack(() => customCss)));
 let result = $state(undefined);
 let loading = $state(false);
-let resolvedConfig = $state(initConfig(components['aggridinfinitecomponent'].initialData.configuration, configuration));
-let outputs = initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['aggridinfinitecomponent'].initialData.configuration, untrack(() => configuration)));
+let outputs = initOutput($worldStore, untrack(() => id), {
     selectedRowIndex: 0,
     selectedRow: {},
     selectedRows: [],
+    openedModalRow: {},
     result: [],
     inputs: {},
     loading: false,

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

@@ -36,7 +36,7 @@ const rowHeights = {
     compact: 30,
     comfortable: 50
 };
-let css = $state(initCss($app.css?.aggridcomponent, customCss));
+let css = $state(initCss($app.css?.aggridcomponent, untrack(() => customCss)));
 let result = $state(undefined);
 function resetValues() {
     api?.setGridOption('rowData', value);
@@ -65,11 +65,12 @@ async function setValues() {
         loaded = true;
     }
 }
-let resolvedConfig = $state(initConfig(components['aggridcomponent'].initialData.configuration, configuration));
-let outputs = initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['aggridcomponent'].initialData.configuration, untrack(() => configuration)));
+let outputs = initOutput($worldStore, untrack(() => id), {
     selectedRowIndex: 0,
     selectedRow: {},
     selectedRows: [],
+    openedModalRow: {},
     result: [],
     loading: false,
     page: 0,
@@ -193,6 +194,12 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
             toggleRow(p);
             p.node.setSelected(true);
         },
+        setModalRow: (row) => {
+            const data = { ...(row?.data ?? {}) };
+            delete data['__index'];
+            if (!deepEqual(outputs?.openedModalRow?.peak(), data))
+                outputs?.openedModalRow.set(data);
+        },
         onSet: (id, value, rowIndex) => {
             if (!inputs[id]) {
                 inputs[id] = { [rowIndex]: value };
@@ -536,6 +543,7 @@ $effect(() => {
 				</div>
 			{/if}
 
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				onpointerdown={stopPropagation(() => {
 					$selectedComponent = [id]

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, untrack } from 'svelte';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import AppButton from '../../buttons/AppButton.svelte';
@@ -12,11 +12,11 @@ import { connectOutput } from '../../../editor/appUtils';
 import RowWrapper from '../../layout/RowWrapper.svelte';
 import Popover from '../../../../meltComponents/Popover.svelte';
 import AppModal from '../../layout/AppModal.svelte';
-let { p, id, render, actions = [], rowIndex, row, onSet, onRemove, wrapActions = undefined, selectRow } = $props();
+let { p, id, render, actions = [], rowIndex, row, onSet, onRemove, wrapActions = undefined, selectRow, setModalRow } = $props();
 const dispatch = createEventDispatcher();
 const { selectedComponent, hoverStore, mode, connectingInput, componentControl, app } = getContext('AppViewerContext');
-$componentControl[id] = {
-    ...$componentControl[id],
+$componentControl[untrack(() => id)] = {
+    ...$componentControl[untrack(() => id)],
     onDelete: () => {
         // Remove associated subgrid
         actions.forEach((action) => {
@@ -181,11 +181,14 @@ $componentControl[id] = {
 							id={action.id}
 							customCss={action.customCss}
 							configuration={action.configuration}
+							onOpenRecomputeIds={action.onOpenRecomputeIds}
+							onCloseRecomputeIds={action.onCloseRecomputeIds}
 							verticalAlignment="center"
 							preclickAction={async () => {
 								dispatch('toggleRow')
-								p && selectRow(p)
+								p && (selectRow(p), setModalRow(p))
 							}}
+							onClose={() => setModalRow(undefined)}
 						/>
 					{:else if action.type == 'checkboxcomponent'}
 						<AppCheckbox
@@ -252,11 +255,14 @@ $componentControl[id] = {
 						id={action.id}
 						customCss={action.customCss}
 						configuration={action.configuration}
+						onOpenRecomputeIds={action.onOpenRecomputeIds}
+						onCloseRecomputeIds={action.onCloseRecomputeIds}
 						verticalAlignment="center"
 						preclickAction={async () => {
 							dispatch('toggleRow')
-							p && selectRow(p)
+							p && (selectRow(p), setModalRow(p))
 						}}
+						onClose={() => setModalRow(undefined)}
 					/>
 				{:else if action.type == 'checkboxcomponent'}
 					<AppCheckbox

package/package/components/apps/components/display/table/AppAggridTableActions.svelte.d.ts

@@ -15,6 +15,7 @@ interface Props {
     onRemove: (id: string, rowIndex: number) => void;
     wrapActions?: boolean | undefined;
     selectRow: (params: ICellRendererParams<any>) => void;
+    setModalRow: (row?: ICellRendererParams<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> & {

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

@@ -39,7 +39,7 @@ const listInputs = getContext('ListInputs');
 let result = $state(undefined);
 const { app, worldStore, componentControl, selectedComponent, hoverStore, mode, connectingInput } = getContext('AppViewerContext');
 let searchValue = $state('');
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     selectedRowIndex: 0,
     selectedRow: undefined,
     loading: false,
@@ -60,7 +60,7 @@ const options = writable({
     columns: []
 });
 let table = $state(createSvelteTable(options));
-let resolvedConfig = $state(initConfig(components['tablecomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['tablecomponent'].initialData.configuration, untrack(() => configuration)));
 let selectedRowIndex = $state(-1);
 function toggleRow(row, force = false) {
     let data = { ...row.original };
@@ -153,8 +153,8 @@ function rerender() {
         $table.setPageIndex(outputs?.page.peak());
     }
 }
-let css = $state(initCss($app.css?.tablecomponent, customCss));
-$componentControl[id] = {
+let css = $state(initCss($app.css?.tablecomponent, untrack(() => customCss)));
+$componentControl[untrack(() => id)] = {
     right: (skipActions) => {
         if (skipActions) {
             return false;

package/package/components/apps/components/display/table/theme/windmill-theme.css

@@ -45,7 +45,7 @@
 	--ag-input-disabled-border-color: rgba(186, 191, 199, 0.3);
 	--ag-input-disabled-background-color: rgba(186, 191, 199, 0.15);
 	--ag-borders: solid 1px;
-	--ag-border-radius: 8px;
+	--ag-border-radius: 4px;
 	--ag-borders-side-button: none;
 	--ag-side-button-selected-background-color: transparent;
 	--ag-header-column-resize-handle-display: block;
@@ -66,8 +66,9 @@
 	--ag-widget-vertical-spacing: calc(var(--ag-grid-size) * 1.5);
 	--ag-toggle-button-height: 18px;
 	--ag-toggle-button-width: 28px;
-	--ag-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
-		Cantarell, 'Helvetica Neue', sans-serif;
+	--ag-font-family:
+		-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+		'Helvetica Neue', sans-serif;
 	--ag-font-size: 0.7rem;
 	--ag-icon-font-family: agGridalpine;
 	--ag-selected-tab-underline-color: var(--ag-alpine-active-color);
@@ -92,8 +93,8 @@
 	--ag-control-panel-background-color: #222628;
 	--ag-subheader-background-color: #000;
 	--ag-input-disabled-background-color: #282c2f;
-	--ag-input-focus-box-shadow: 0 0 2px 0.5px rgba(255, 255, 255, 0.5),
-		0 0 4px 3px var(--ag-input-focus-border-color);
+	--ag-input-focus-box-shadow:
+		0 0 2px 0.5px rgba(255, 255, 255, 0.5), 0 0 4px 3px var(--ag-input-focus-border-color);
 	--ag-card-shadow: 0 1px 20px 1px black;
 	--ag-disabled-foreground-color: rgba(255, 255, 255, 0.5);
 	--ag-chip-background-color: rgba(255, 255, 255, 0.07);
@@ -119,8 +120,8 @@
 		--ag-control-panel-background-color: #222628;
 		--ag-subheader-background-color: #000;
 		--ag-input-disabled-background-color: #282c2f;
-		--ag-input-focus-box-shadow: 0 0 2px 0.5px rgba(255, 255, 255, 0.5),
-			0 0 4px 3px var(--ag-input-focus-border-color);
+		--ag-input-focus-box-shadow:
+			0 0 2px 0.5px rgba(255, 255, 255, 0.5), 0 0 4px 3px var(--ag-input-focus-border-color);
 		--ag-card-shadow: 0 1px 20px 1px black;
 		--ag-disabled-foreground-color: rgba(255, 255, 255, 0.5);
 		--ag-chip-background-color: rgba(255, 255, 255, 0.07);

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

@@ -5,7 +5,7 @@ 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);
+let result = $state(noBackend ? untrack(() => runnable).noBackendValue : undefined);
 export function onSuccess() {
     if (runnable.recomputeIds) {
         runnable.recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb()));
@@ -16,7 +16,7 @@ onMount(() => {
         return result;
     };
 });
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: untrack(() => result),
     loading: false,
     jobId: undefined

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

@@ -17,7 +17,7 @@ let previousConnectedValues = {};
 let groupStore = groupContext?.context;
 const dispatch = createEventDispatcher();
 const dispatchIfMounted = createDispatcherIfMounted(dispatch);
-if (input == undefined) {
+if (untrack(() => input) == undefined) {
     // How did this ever do anything at the top level in svelte 4 if
     // events were not being picked up before the component fully mounted?
     dispatch('done');
@@ -263,12 +263,12 @@ $effect(() => {
         $stateStore &&
         untrack(() => debounce(debounceTemplate));
 });
-if (input?.type == 'eval') {
+if (untrack(() => input)?.type == 'eval') {
     $worldStore?.stateId.subscribe((x) => {
         debounce2(debounceEval);
     });
 }
-if (input?.type == 'template') {
+if (untrack(() => input)?.type == 'template') {
     $worldStore?.stateId.subscribe((x) => {
         debounce2(debounceTemplate);
     });

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

@@ -48,7 +48,7 @@ function computeStaticValues() {
 }
 let lazyStaticValues = computeStaticValues();
 let currentStaticValues = $state(lazyStaticValues);
-let isBg = id.startsWith('bg_');
+let isBg = untrack(() => id).startsWith('bg_');
 function refreshOnStaticChange() {
     if (!deepEqual(currentStaticValues, lazyStaticValues)) {
         lazyStaticValues = currentStaticValues;
@@ -150,7 +150,7 @@ export function validateAll() {
 }
 // Test job internal state
 let resultJobLoader = $state(undefined);
-let schemaStripped = $state(autoRefresh || forceSchemaDisplay ? emptySchema() : undefined);
+let schemaStripped = $state(untrack(() => autoRefresh) || untrack(() => forceSchemaDisplay) ? emptySchema() : undefined);
 function stripSchema(inputs, s) {
     if (inputs === undefined) {
         return emptySchema();

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

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext, onMount } from 'svelte';
+<script lang="ts">import { getContext, onMount, untrack } from 'svelte';
 import { isScriptByNameDefined, isScriptByPathDefined } from '../../utils';
 import NonRunnableComponent from './NonRunnableComponent.svelte';
 import RunnableComponent from './RunnableComponent.svelte';
@@ -27,7 +27,7 @@ onMount(() => {
         return result;
     };
 });
-const fullId = id + (extraKey ?? '');
+const fullId = untrack(() => id) + (untrack(() => extraKey) ?? '');
 if (!(initializing && componentInput?.type === 'runnable' && isRunnableDefined(componentInput))) {
     initializing = false;
 }

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

@@ -28,7 +28,7 @@ ${hasReturnAsLastLine
         : `
 return ${eval_string.startsWith('return ') ? eval_string.substring(7) : eval_string}`}
 
-}                                                                                                                   
+}
 `;
 }
 let functorCache = {};
@@ -150,7 +150,10 @@ export async function eval_like(text, context = {}, state, editor, controlCompon
         controlComponents[id]?.sendMessage?.(message);
     }, (message, error) => {
         sendUserToast(message, error);
-    }, async (id) => waitJob(id), (id) => {
+    }, async (id) => {
+        const workspaceId = (context ?? {})?.ctx?.workspace;
+        return await waitJob(id, workspaceId);
+    }, (id) => {
         controlComponents[id]?.askNewResource?.();
     }, (input, filename) => {
         const handleError = (error) => {

package/package/components/apps/components/inputs/AppCheckbox.svelte

@@ -14,9 +14,9 @@ const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
 const rowContext = getContext('RowWrapperContext');
 const rowInputs = getContext('RowInputs');
-let resolvedConfig = $state(initConfig(components['checkboxcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['checkboxcomponent'].initialData.configuration, untrack(() => configuration)));
 let value = $state(resolvedConfig.defaultValue ?? false);
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         value = nvalue;
         if (recomputeIds) {
@@ -24,12 +24,12 @@ $componentControl[id] = {
         }
     }
 };
-if (controls) {
-    $componentControl[id] = { ...$componentControl[id], ...controls };
+if (untrack(() => controls)) {
+    $componentControl[untrack(() => id)] = { ...$componentControl[untrack(() => id)], ...untrack(() => controls) };
 }
 // As the checkbox is a special case and has no input
 // we need to manually set the output
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: false
 });
 function handleInput() {
@@ -58,7 +58,7 @@ $effect(() => {
 $effect(() => {
     resolvedConfig.defaultValue != undefined && untrack(() => handleDefault());
 });
-let css = $state(initCss($app.css?.checkboxcomponent, customCss));
+let css = $state(initCss($app.css?.checkboxcomponent, untrack(() => customCss)));
 </script>
 
 {#each Object.keys(components['checkboxcomponent'].initialData.configuration) as key (key)}

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

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import {} from '../../types';
 import { components } from '../../editor/component';
@@ -7,14 +7,14 @@ import InputValue from '../helpers/InputValue.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 let { id, configuration, render } = $props();
 const { componentControl, worldStore, selectedComponent, connectingInput, mode } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['codeinputcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['codeinputcomponent'].initialData.configuration, untrack(() => configuration)));
 let code = $state(undefined);
 let placeholder = $state(undefined);
 let defaultValue = $state(undefined);
 let editorInstance = $state(null);
 let lastDefaultValue = $state(undefined);
 let lang = $derived(resolvedConfig?.lang ?? 'javascript');
-let outputs = $state(initOutput($worldStore, id, {
+let outputs = $state(initOutput($worldStore, untrack(() => id), {
     result: ''
 }));
 $effect(() => {
@@ -27,8 +27,8 @@ $effect(() => {
         outputs?.result.set(code);
     }
 });
-$componentControl[id] = {
-    ...$componentControl[id],
+$componentControl[untrack(() => id)] = {
+    ...$componentControl[untrack(() => id)],
     setValue(value) {
         code = value;
         editorInstance?.setCode(value);
@@ -50,6 +50,7 @@ $componentControl[id] = {
 {/each}
 
 {#if render}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="h-full flex-col flex max-h-full overflow-scroll editor-wrapper rounded-md border border-gray-300 dark:border-gray-500 wm-code-editor"
 		onpointerdown={(e) => {

package/package/components/apps/components/inputs/AppDateInput.svelte

@@ -12,9 +12,9 @@ import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, configuration, inputType, verticalAlignment = undefined, customCss = undefined, render, onChange = undefined } = $props();
 const { app, worldStore, selectedComponent, componentControl, runnableComponents } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['dateinputcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['dateinputcomponent'].initialData.configuration, untrack(() => configuration)));
 let value = $state(undefined);
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         if (typeof nvalue === 'string') {
             value = nvalue?.split('T')?.[0];
@@ -25,7 +25,7 @@ $componentControl[id] = {
         }
     }
 };
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined
 });
 function formatDate(dateString, formatString = 'dd.MM.yyyy') {
@@ -48,7 +48,7 @@ function fireOnChange() {
 function handleDefault(defaultValue) {
     value = defaultValue;
 }
-let css = $state(initCss($app.css?.dateinputcomponent, customCss));
+let css = $state(initCss($app.css?.dateinputcomponent, untrack(() => customCss)));
 $effect.pre(() => {
     resolvedConfig.defaultValue;
     untrack(() => handleDefault(resolvedConfig.defaultValue));

package/package/components/apps/components/inputs/AppDateSelect.svelte

@@ -13,14 +13,14 @@ import Select from '../../../select/Select.svelte';
 import { safeSelectItems } from '../../../select/utils.svelte';
 let { id, configuration, verticalAlignment = undefined, customCss = undefined, render } = $props();
 const { app, worldStore, componentControl } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['dateselectcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['dateselectcomponent'].initialData.configuration, untrack(() => configuration)));
 let value = $state(undefined);
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         value = nvalue;
     }
 };
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     day: undefined,
     month: undefined,
     year: undefined
@@ -59,7 +59,7 @@ function handleDefault(defaultValue) {
         }
     }
 }
-let css = $state(initCss($app.css?.dateinputcomponent, customCss));
+let css = $state(initCss($app.css?.dateinputcomponent, untrack(() => customCss)));
 let selectedDay = $state(undefined);
 let selectedMonth = $state(undefined);
 let selectedYear = $state(undefined);

package/package/components/apps/components/inputs/AppDateSliderInput.svelte

@@ -14,7 +14,7 @@ let { id, configuration, verticalAlignment = undefined, customCss = undefined, r
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
 const { app, worldStore, selectedComponent, componentControl } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['dateslidercomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['dateslidercomponent'].initialData.configuration, untrack(() => configuration)));
 onDestroy(() => {
     listInputs?.remove(id);
 });
@@ -31,10 +31,10 @@ function handleDefault() {
     ];
 }
 let slider = $state();
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: null
 });
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         values = [nvalue];
     }
@@ -58,7 +58,7 @@ function handleValues() {
         listInputs.set(id, formatDate(dateString, resolvedConfig.outputFormat));
     }
 }
-let css = $state(initCss($app.css?.dateslidercomponent, customCss));
+let css = $state(initCss($app.css?.dateslidercomponent, untrack(() => customCss)));
 let lastStyle = $state(undefined);
 let width = $state(0);
 const spanClass = 'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5';
@@ -131,6 +131,7 @@ $effect.pre(() => {
 				? new Date(resolvedConfig?.min).toDateString()
 				: new Date().toDateString()}
 		</span>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class={twMerge(
 				'grow',

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

@@ -13,14 +13,14 @@ let { id, configuration, inputType, verticalAlignment = undefined, customCss = u
 const { app, worldStore, componentControl, selectedComponent, runnableComponents } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
-let resolvedConfig = $state(initConfig(components['datetimeinputcomponent'].initialData.configuration, configuration));
-let outputs = initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['datetimeinputcomponent'].initialData.configuration, untrack(() => configuration)));
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     validity: true
 });
 let initValue = outputs?.result.peak();
 let value = $state(!iterContext && initValue != undefined ? initValue : resolvedConfig.defaultValue);
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         value = nvalue;
         outputs?.result.set(value);
@@ -56,7 +56,7 @@ function handleDefault(defaultValue) {
     }
     value = defaultValue;
 }
-let css = $state(initCss($app.css?.datetimeinputcomponent, customCss));
+let css = $state(initCss($app.css?.datetimeinputcomponent, untrack(() => customCss)));
 $effect.pre(() => {
     ;
     [resolvedConfig.defaultValue];

package/package/components/apps/components/inputs/AppFileInput.svelte

@@ -9,10 +9,10 @@ import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 let { id, configuration, customCss = undefined, render, onFileChange = undefined, extraKey = undefined } = $props();
 const { app, worldStore, componentControl, mode, runnableComponents } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: []
 });
-let resolvedConfig = $state(initConfig(components['fileinputcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['fileinputcomponent'].initialData.configuration, untrack(() => configuration)));
 // Receives Base64 encoded strings from the input component
 async function handleChange(files) {
     if (resolvedConfig?.includeMimeType === false) {
@@ -24,9 +24,9 @@ async function handleChange(files) {
     outputs?.result.set(files);
     onFileChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()));
 }
-let css = $state(initCss($app.css?.fileinputcomponent, customCss));
+let css = $state(initCss($app.css?.fileinputcomponent, untrack(() => customCss)));
 let fileInput = $state(undefined);
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     clearFiles: () => {
         fileInput?.clearFiles();
     }

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

@@ -17,8 +17,8 @@ const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
 const { app, worldStore, selectedComponent, componentControl } = getContext('AppViewerContext');
 let items = $state([]);
-const resolvedConfig = $state(initConfig(components['multiselectcomponentv2'].initialData.configuration, configuration));
-const outputs = initOutput($worldStore, id, {
+const resolvedConfig = $state(initConfig(components['multiselectcomponentv2'].initialData.configuration, untrack(() => configuration)));
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: []
 });
 let selectedItems = $state([...new Set(outputs?.result.peak())].map(convertToValue));
@@ -32,7 +32,7 @@ function setResultsFromSelectedItems(value) {
     outputs?.result.set(value);
     setContextValue(value);
 }
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         if (Array.isArray(nvalue)) {
             setSelectedItemsFromValues(nvalue);
@@ -91,7 +91,7 @@ function setSelectedItemsFromValues(values) {
         setResultsFromSelectedItems(selectedItems);
     }
 }
-let css = $state(initCss($app.css?.multiselectcomponentv2, customCss));
+let css = $state(initCss($app.css?.multiselectcomponentv2, untrack(() => customCss)));
 $effect(() => {
     resolvedConfig.items && untrack(() => handleItems());
 });
@@ -124,6 +124,7 @@ $effect(() => {
 <InitializeComponent {id} />
 
 <AlignWrapper {render} hFull {verticalAlignment}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class={twMerge('w-full', resolvedConfig.allowOverflow ? '' : 'absolute inset-0')}
 		onpointerdown={(e) => {

package/package/components/apps/components/inputs/AppNumberInput.svelte

@@ -12,16 +12,16 @@ let { id, configuration, verticalAlignment = undefined, customCss = undefined, r
 const { app, worldStore, selectedComponent, componentControl, runnableComponents } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
-let resolvedConfig = $state(initConfig(components['numberinputcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['numberinputcomponent'].initialData.configuration, untrack(() => configuration)));
 onDestroy(() => {
     listInputs?.remove(id);
 });
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined
 });
 let initValue = outputs?.result.peak();
 let value = $state(!iterContext && initValue != undefined ? initValue : resolvedConfig.defaultValue);
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         value = nvalue;
         outputs?.result.set(value);
@@ -49,7 +49,7 @@ function handleDefault(defaultValue) {
     }
     value = defaultValue;
 }
-let css = $state(initCss($app.css?.numberinputcomponent, customCss));
+let css = $state(initCss($app.css?.numberinputcomponent, untrack(() => customCss)));
 $effect.pre(() => {
     resolvedConfig.defaultValue;
     untrack(() => handleDefault(resolvedConfig.defaultValue));

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

@@ -16,7 +16,7 @@ let { id, configuration, render, toolbarOptions = [
 const { worldStore, componentControl, selectedComponent, connectingInput } = getContext('AppViewerContext');
 let placeholder = $state(undefined);
 let defaultValue = $state(undefined);
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: ''
 });
 async function loadQuill() {
@@ -35,7 +35,7 @@ async function loadQuill() {
         setOutput();
     });
 }
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         if (quill) {
             quill.root.innerHTML = nvalue;
@@ -76,6 +76,7 @@ $effect.pre(() => {
 
 <InitializeComponent {id} />
 {#if render}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="editor-wrapper h-full flex-col flex max-h-full overflow-hidden"
 		onpointerdown={stopPropagation(() => {