windmill-components 1.623.2 → 1.655.0

package/package/components/apps/components/inputs/AppRangeInput.svelte

@@ -14,16 +14,16 @@ let { id, configuration, verticalAlignment = undefined, customCss = undefined, r
 const { app, worldStore, componentControl } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
-let resolvedConfig = $state(initConfig(components['rangecomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['rangecomponent'].initialData.configuration, untrack(() => configuration)));
 let values = $state([0, 1]);
 function handleDefault() {
     values = [resolvedConfig?.defaultLow ?? 0, resolvedConfig?.defaultHigh ?? 1];
 }
 let slider = $state();
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: null
 });
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         values = nvalue;
     }
@@ -31,7 +31,7 @@ $componentControl[id] = {
 onDestroy(() => {
     listInputs?.remove(id);
 });
-let css = $state(initCss($app.css?.rangecomponent, customCss));
+let css = $state(initCss($app.css?.rangecomponent, untrack(() => customCss)));
 let lastStyle = $state(undefined);
 const format = (v, i, p) => {
     return `${v}`;
@@ -83,6 +83,7 @@ $effect.pre(() => {
 <AlignWrapper {render} {verticalAlignment}>
 	<div class="flex flex-col w-full">
 		<div class="flex items-center w-full gap-1">
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class={twMerge('grow', 'wm-slider-bar')}
 				style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??

package/package/components/apps/components/inputs/AppS3FileInput.svelte

@@ -11,23 +11,23 @@ import { computeS3FileInputPolicy } from '../../editor/appUtilsS3';
 import { defaultIfEmptyString } from '../../../../utils';
 import { userStore } from '../../../../stores';
 let { id, configuration, customCss = undefined, render, extraKey = undefined, onFileChange = undefined } = $props();
-let resolvedConfig = $state(initConfig(components['s3fileinputcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['s3fileinputcomponent'].initialData.configuration, untrack(() => configuration)));
 let fileUploads = writable([]);
 const { app, worldStore, componentControl, runnableComponents, workspace } = getContext('AppViewerContext');
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     clearFiles: () => {
         outputs.result.set([]);
         $fileUploads = [];
     }
 };
 let value = $state(undefined);
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: untrack(() => value) ?? [],
     loading: false,
     jobId: undefined
 });
 let resolvedConfigS3 = $derived(resolvedConfig.type.configuration.s3);
-let css = $state(initCss($app.css?.fileinputcomponent, customCss));
+let css = $state(initCss($app.css?.fileinputcomponent, untrack(() => customCss)));
 /*
 
     {#if resolvedConfig.displayDirectLink && fileUpload.progress === 100}

package/package/components/apps/components/inputs/AppSelect.svelte

@@ -17,20 +17,20 @@ const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
 const rowContext = getContext('RowWrapperContext');
 const rowInputs = getContext('RowInputs');
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         setValue(JSON.stringify(nvalue));
     }
 };
-if (controls) {
-    $componentControl[id] = { ...$componentControl[id], ...controls };
+if (untrack(() => controls)) {
+    $componentControl[untrack(() => id)] = { ...$componentControl[untrack(() => id)], ...untrack(() => controls) };
 }
-let resolvedConfig = $state(initConfig(components['selectcomponent'].initialData.configuration, configuration));
-let outputs = initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['selectcomponent'].initialData.configuration, untrack(() => configuration)));
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined
 });
 // The library expects double quotes around the value
-let value = $state(noDefault
+let value = $state(untrack(() => noDefault)
     ? undefined
     : outputs?.result.peak()
         ? JSON.stringify(outputs?.result.peak())
@@ -128,7 +128,7 @@ function onClear() {
     outputs?.result.set(undefined, true);
     setContextValue(undefined);
 }
-let css = $state(initCss($app.css?.selectcomponent, customCss));
+let css = $state(initCss($app.css?.selectcomponent, untrack(() => customCss)));
 let previsousFilter = '';
 function onFilter(newFilterText) {
     filterText = newFilterText;
@@ -188,6 +188,7 @@ $effect(() => {
 {/if}
 
 <AlignWrapper {render} {verticalAlignment}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="app-select w-full"
 		style="height: 34px;"

package/package/components/apps/components/inputs/AppSelectStep.svelte

@@ -10,13 +10,13 @@ import { initCss } from '../../utils';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, configuration, horizontalAlignment = undefined, verticalAlignment = undefined, render, customCss = undefined } = $props();
 const { app, worldStore, componentControl } = getContext('AppViewerContext');
-const resolvedConfig = $state(initConfig(components['selectstepcomponent'].initialData.configuration, configuration));
-const outputs = initOutput($worldStore, id, {
+const resolvedConfig = $state(initConfig(components['selectstepcomponent'].initialData.configuration, untrack(() => configuration)));
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined
 });
 let selected = $state('');
 let selectedIndex = $state(0);
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         selected = nvalue;
         selectedIndex = resolvedConfig.items.findIndex((item) => getValue(item) === nvalue);
@@ -52,7 +52,7 @@ function getValue(item) {
 function getLabel(item) {
     return typeof item == 'string' ? item : item.label;
 }
-let css = $state(initCss($app.css?.selectstepcomponent, customCss));
+let css = $state(initCss($app.css?.selectstepcomponent, untrack(() => customCss)));
 $effect(() => {
     resolvedConfig.defaultValue != undefined && untrack(() => setDefaultValue());
 });
@@ -89,6 +89,7 @@ $effect(() => {
 	class={twMerge(css?.container?.class, 'wm-select-step')}
 	style={css?.container?.style}
 >
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="w-full" onpointerdown={onPointerDown}>
 		<Stepper
 			tabs={(resolvedConfig?.items ?? []).map((item) => getLabel(item))}

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

@@ -10,8 +10,8 @@ import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, configuration, horizontalAlignment = undefined, verticalAlignment = undefined, customCss = undefined, render } = $props();
 const { app, worldStore, componentControl } = getContext('AppViewerContext');
-const resolvedConfig = $state(initConfig(components['selecttabcomponent'].initialData.configuration, configuration));
-const outputs = initOutput($worldStore, id, {
+const resolvedConfig = $state(initConfig(components['selecttabcomponent'].initialData.configuration, untrack(() => configuration)));
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined
 });
 const iterContext = getContext('ListWrapperContext');
@@ -20,7 +20,7 @@ let selected = $state('');
 onDestroy(() => {
     listInputs?.remove(id);
 });
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         selected = nvalue;
     },
@@ -47,7 +47,7 @@ function handleSelection(value) {
         listInputs.set(id, value);
     }
 }
-let css = $state(initCss($app.css?.selecttabcomponent, customCss));
+let css = $state(initCss($app.css?.selecttabcomponent, untrack(() => customCss)));
 $effect.pre(() => {
     selected === '' && resolvedConfig.defaultValue && untrack(() => setDefaultValue());
 });

package/package/components/apps/components/inputs/AppSliderInputs.svelte

@@ -13,7 +13,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['slidercomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['slidercomponent'].initialData.configuration, untrack(() => configuration)));
 onDestroy(() => {
     listInputs?.remove(id);
 });
@@ -22,10 +22,10 @@ function handleDefault() {
     values = [resolvedConfig?.defaultValue ?? 0];
 }
 let slider = $state();
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: 0 || null
 });
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         values = [nvalue];
     }
@@ -41,7 +41,7 @@ function handleValues() {
         listInputs.set(id, num);
     }
 }
-let css = $state(initCss($app.css?.slidercomponent, customCss));
+let css = $state(initCss($app.css?.slidercomponent, untrack(() => customCss)));
 let lastStyle = $state(undefined);
 const spanClass = 'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5';
 function computeWidth() {
@@ -103,6 +103,7 @@ $effect.pre(() => {
 
 <AlignWrapper {render} hFull {verticalAlignment}>
 	<div class="flex {resolvedConfig.vertical ? 'flex-col' : ''} items-center w-full h-full gap-1">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class={twMerge(
 				'grow',

package/package/components/apps/components/inputs/AppTextInput.svelte

@@ -12,10 +12,10 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { loadIcon } from '../icon';
 let { id, configuration, inputType = 'text', verticalAlignment = undefined, customCss = undefined, appCssKey = 'textinputcomponent', render, onChange = undefined } = $props();
 const { app, worldStore, selectedComponent, connectingInput, componentControl, runnableComponents } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['textinputcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['textinputcomponent'].initialData.configuration, untrack(() => configuration)));
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined
 });
 let initValue = outputs?.result.peak();
@@ -23,7 +23,7 @@ let value = $state(!iterContext && initValue && initValue != '' ? initValue : re
 onDestroy(() => {
     listInputs?.remove(id);
 });
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         value = nvalue;
         outputs?.result.set(value);
@@ -52,7 +52,7 @@ function handleDefault(defaultValue) {
     }
     value = defaultValue;
 }
-let css = $state(initCss($app.css?.[appCssKey], customCss));
+let css = $state(initCss($app.css?.[untrack(() => appCssKey)], untrack(() => customCss)));
 let beforeIconComponent = $state();
 let afterIconComponent = $state();
 async function handleBeforeIcon() {

package/package/components/apps/components/inputs/AppTimeInput.svelte

@@ -10,14 +10,14 @@ import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, configuration, verticalAlignment = undefined, customCss = undefined, render, onChange = undefined } = $props();
 const { app, worldStore, selectedComponent, componentControl, runnableComponents } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['timeinputcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['timeinputcomponent'].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), {
     result: undefined,
     validity: true
 });
@@ -33,7 +33,7 @@ function fireOnChange() {
 function handleDefault(defaultValue) {
     value = defaultValue;
 }
-let css = $state(initCss($app.css?.timeinputcomponent, customCss));
+let css = $state(initCss($app.css?.timeinputcomponent, untrack(() => customCss)));
 $effect.pre(() => {
     resolvedConfig.defaultValue;
     !value && untrack(() => handleDefault(resolvedConfig.defaultValue));

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

@@ -10,13 +10,13 @@ import { twMerge } from 'tailwind-merge';
 import LightweightResourcePicker from '../../../LightweightResourcePicker.svelte';
 let { id, configuration, verticalAlignment = undefined, customCss = undefined, render } = $props();
 const { app, worldStore, componentControl, isEditor, mode } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['userresourcecomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['userresourcecomponent'].initialData.configuration, untrack(() => configuration)));
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined
 });
-let css = $state(initCss($app.css?.['userresourcecomponent'], customCss));
+let css = $state(initCss($app.css?.['userresourcecomponent'], untrack(() => customCss)));
 let classInput = $derived(twMerge('windmillapp w-full px-2', css?.input?.class ?? '', 'wm-input', 'wm-user-resource-select'));
 function getDefaultValue() {
     if (resolvedConfig.defaultValue && typeof resolvedConfig.defaultValue === 'string') {
@@ -44,7 +44,7 @@ $effect(() => {
 onDestroy(() => {
     listInputs?.remove(id);
 });
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setValue(nvalue) {
         value = nvalue;
     },

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

@@ -13,16 +13,16 @@ let { id, configuration, verticalAlignment = undefined, customCss = undefined, r
 const { app, worldStore, selectedComponent, componentControl } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: null
 });
 onDestroy(() => {
     listInputs?.remove(id);
 });
-let resolvedConfig = $state(initConfig(components['currencycomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['currencycomponent'].initialData.configuration, untrack(() => configuration)));
 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 ?? null);
@@ -45,7 +45,7 @@ function handleDefault(dflt) {
     value = dflt;
     handleInput();
 }
-let css = $state(initCss($app.css?.currencycomponent, customCss));
+let css = $state(initCss($app.css?.currencycomponent, untrack(() => customCss)));
 $effect(() => {
     resolvedConfig.defaultValue;
     untrack(() => handleDefault(resolvedConfig.defaultValue));
@@ -80,6 +80,7 @@ $effect(() => {
 	{#key resolvedConfig.isNegativeAllowed}
 		{#key resolvedConfig.locale}
 			{#key resolvedConfig.currency}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div class="w-full" onpointerdown={stopPropagation(() => ($selectedComponent = [id]))}>
 					<CurrencyInput
 						inputClasses={{

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

@@ -119,7 +119,9 @@ const setFormattedValue = () => {
     }, 0.1);
 };
 let formattedValue = $state('');
-let formattedPlaceholder = placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : '';
+let formattedPlaceholder = untrack(() => placeholder) !== null
+    ? formatCurrency(untrack(() => placeholder), untrack(() => fractionDigits), untrack(() => fractionDigits))
+    : '';
 let isZero = $derived(value === 0);
 let isNegative = $derived((value ?? DEFAULT_VALUE) < 0);
 $effect(() => {

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

@@ -8,11 +8,11 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 let { id, componentContainerHeight, customCss = undefined, render, conditions, onTabChange = undefined } = $props();
 const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl, runnableComponents } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     conditions: [],
     selectedTabIndex: 0
 });
-let everRender = $state(render);
+let everRender = $state(untrack(() => render));
 $effect.pre(() => {
     render && !everRender && (everRender = true);
 });
@@ -22,8 +22,8 @@ function onFocus() {
         subGridIndex: selectedConditionIndex
     };
 }
-let css = $state(initCss($app.css?.conditionalwrapper, customCss));
-let resolvedConditions = $state(conditions.map((_x) => false));
+let css = $state(initCss($app.css?.conditionalwrapper, untrack(() => customCss)));
+let resolvedConditions = $state(untrack(() => conditions).map((_x) => false));
 let selectedConditionIndex = $state(0);
 function handleResolvedConditions() {
     const slicedArray = resolvedConditions.slice(0, conditions.length);
@@ -44,7 +44,7 @@ $effect.pre(() => {
     resolvedConditions && resolvedConditions.forEach((c) => c);
     resolvedConditions && untrack(() => handleResolvedConditions());
 });
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setTab: (conditionIndex) => {
         if (conditionIndex === -1) {
             handleResolvedConditions();

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

@@ -11,12 +11,12 @@ import GroupWrapper from '../GroupWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 let { id, componentContainerHeight, customCss = undefined, render, groupFields = undefined } = $props();
 const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl } = getContext('AppViewerContext');
-let everRender = $state(render);
+let everRender = $state(untrack(() => render));
 $effect.pre(() => {
     render && !everRender && (everRender = true);
 });
 let groupContext = writable({});
-let outputs = initOutput($worldStore, id, { group: $groupContext });
+let outputs = initOutput($worldStore, untrack(() => id), { group: $groupContext });
 $effect.pre(() => {
     $groupContext;
     untrack(() => {
@@ -39,7 +39,7 @@ onMount(() => {
         }
     };
 });
-let css = $state(initCss($app.css?.containercomponent, customCss));
+let css = $state(initCss($app.css?.containercomponent, untrack(() => customCss)));
 </script>
 
 <InitializeComponent {id} />

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

@@ -33,15 +33,15 @@ $effect(() => {
     resolvedNext = untrack(() => createResolvedNext());
     untrack(() => (counter += 1));
 });
-let everRender = $state(render);
+let everRender = $state(untrack(() => render));
 $effect.pre(() => {
     render && !everRender && (everRender = true);
 });
 const { app, focusedGrid, selectedComponent, connectingInput, componentControl, worldStore, debuggingComponents } = getContext('AppViewerContext');
-let css = $state(initCss($app.css?.conditionalwrapper, customCss));
+let css = $state(initCss($app.css?.conditionalwrapper, untrack(() => customCss)));
 let selectedConditionIndex = 0;
-let currentNodeId = $state(getFirstNode(nodes)?.id ?? '');
-let outputs = initOutput($worldStore, id, {
+let currentNodeId = $state(getFirstNode(untrack(() => nodes))?.id ?? '');
+let outputs = initOutput($worldStore, untrack(() => id), {
     currentNodeId: untrack(() => currentNodeId),
     currentNodeIndex: selectedConditionIndex
 });
@@ -112,7 +112,7 @@ function onFocus(newIndex) {
         };
     }
 }
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setTab: (conditionIndex) => {
         if (conditionIndex !== -1) {
             onFocus(conditionIndex);

package/package/components/apps/components/layout/AppDivider.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initOutput } from '../../editor/appUtils';
 import { TailwindClassPatterns, initCss, hasTailwindClass } from '../../utils';
@@ -10,9 +10,9 @@ let { id, configuration, horizontalAlignment = undefined, verticalAlignment = un
 const { app, worldStore } = getContext('AppViewerContext');
 let size = $state(2);
 let color = $state('#00000060');
-let css = $state(initCss($app.css?.[position + 'dividercomponent'], customCss));
+let css = $state(initCss($app.css?.[untrack(() => position) + 'dividercomponent'], untrack(() => customCss)));
 //used so that we can count number of outputs setup for first refresh
-initOutput($worldStore, id, {});
+initOutput($worldStore, untrack(() => id), {});
 function getSize() {
     if (position === 'horizontal') {
         return hasTailwindClass(css?.divider?.class, TailwindClassPatterns.height)

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

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import Portal from '../../../Portal.svelte';
 import { initCss } from '../../utils';
@@ -11,18 +11,18 @@ import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 let { customCss = undefined, id, configuration, horizontalAlignment = undefined, verticalAlignment = undefined, noWFull = false, render, onOpenRecomputeIds = undefined, onCloseRecomputeIds = undefined } = $props();
-let everRender = $state(render);
+let everRender = $state(untrack(() => render));
 $effect(() => {
     render && !everRender && (everRender = true);
 });
 const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl, runnableComponents } = getContext('AppViewerContext');
-const resolvedConfig = $state(initConfig(components['drawercomponent'].initialData.configuration, configuration));
-const outputs = initOutput($worldStore, id, {
+const resolvedConfig = $state(initConfig(components['drawercomponent'].initialData.configuration, untrack(() => configuration)));
+const outputs = initOutput($worldStore, untrack(() => id), {
     open: false
 });
 let containerHeight = $state(0);
 let appDrawer = $state();
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     open: () => {
         appDrawer?.openDrawer();
     },
@@ -30,7 +30,7 @@ $componentControl[id] = {
         appDrawer?.closeDrawer();
     }
 };
-let css = $state(initCss($app.css?.drawercomponent, customCss));
+let css = $state(initCss($app.css?.drawercomponent, untrack(() => customCss)));
 </script>
 
 {#each Object.keys(components['drawercomponent'].initialData.configuration) as key (key)}
@@ -118,6 +118,7 @@ let css = $state(initCss($app.css?.drawercomponent, customCss));
 					}}
 					fullScreen={$mode !== 'dnd'}
 				>
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
 						class={twMerge('h-full', css?.drawer?.class, 'wm-drawer')}
 						style={css?.drawer?.style}

package/package/components/apps/components/layout/AppList.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 SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
@@ -14,24 +14,24 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentInput, configuration, customCss = undefined, render, initializing = $bindable() } = $props();
 const { app, focusedGrid, selectedComponent, worldStore, connectingInput, allIdsInPath, mode } = getContext('AppViewerContext');
 let page = $state(0);
-let everRender = $state(render);
+let everRender = $state(untrack(() => render));
 $effect.pre(() => {
     render && !everRender && (everRender = true);
 });
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false,
     inputs: {},
     page: 0
 });
-let resolvedConfig = $state(initConfig(components['listcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['listcomponent'].initialData.configuration, untrack(() => configuration)));
 function onFocus() {
     $focusedGrid = {
         parentComponentId: id,
         subGridIndex: 0
     };
 }
-let css = $state(initCss($app.css?.listcomponent, customCss));
+let css = $state(initCss($app.css?.listcomponent, untrack(() => customCss)));
 let result = $state(undefined);
 let isCard = $derived(resolvedConfig.width?.selected == 'card');
 let inputs = $state({});

package/package/components/apps/components/layout/AppModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
 import { Button } from '../../../common';
@@ -14,19 +14,19 @@ import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import Disposable from '../../../common/drawer/Disposable.svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-let { customCss = undefined, id, configuration, horizontalAlignment = undefined, verticalAlignment = undefined, noWFull = false, render, onOpenRecomputeIds = undefined, onCloseRecomputeIds = undefined, preclickAction } = $props();
+let { customCss = undefined, id, configuration, horizontalAlignment = undefined, verticalAlignment = undefined, noWFull = false, render, onOpenRecomputeIds = undefined, onCloseRecomputeIds = undefined, preclickAction, onClose = undefined } = $props();
 const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl, runnableComponents, breakpoint } = getContext('AppViewerContext');
-let everRender = $state(render);
+let everRender = $state(untrack(() => render));
 $effect.pre(() => {
     render && !everRender && (everRender = true);
 });
 //used so that we can count number of outputs setup for first refresh
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     open: false
 });
-let css = $state(initCss($app.css?.modalcomponent, customCss));
+let css = $state(initCss($app.css?.modalcomponent, untrack(() => customCss)));
 let disposable = $state(undefined);
-let resolvedConfig = $state(initConfig(components['modalcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['modalcomponent'].initialData.configuration, untrack(() => configuration)));
 let unclickableOutside = $state(false);
 function unclosableModal() {
     unclickableOutside = true;
@@ -34,7 +34,7 @@ function unclosableModal() {
         unclickableOutside = false;
     }, 1000);
 }
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     openModal: () => {
         unclosableModal();
         disposable?.openDrawer();
@@ -130,6 +130,7 @@ async function getMenuElements() {
 			onClose={() => {
 				outputs?.open.set(false)
 				onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
+				onClose?.()
 			}}
 		>
 			{#snippet children({ handleClickAway, zIndex, open })}
@@ -174,6 +175,7 @@ async function getMenuElements() {
 							</div>
 						</div>
 
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							class={twMerge('wm-modal-container h-full', 'overflow-y-auto', css?.container?.class)}
 							onpointerdown={(e) => {

package/package/components/apps/components/layout/AppModal.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
     onOpenRecomputeIds?: string[] | undefined;
     onCloseRecomputeIds?: string[] | undefined;
     preclickAction?: (() => Promise<void>) | undefined;
+    onClose?: () => void;
 }
 declare const AppModal: import("svelte").Component<Props, {}, "">;
 type AppModal = ReturnType<typeof AppModal>;