windmill-components 1.642.0 → 1.655.0

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(() => {

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}