windmill-components 1.493.10 → 1.501.4

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

@@ -1,4 +1,6 @@
-<script lang="ts">import { getContext, onDestroy } from 'svelte';
+<script lang="ts">import { stopPropagation, createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { getContext, onDestroy, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput, selectId } from '../../editor/appUtils';
 import { initCss } from '../../utils';
@@ -8,23 +10,16 @@ import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { loadIcon } from '../icon';
-export let id;
-export let configuration;
-export let inputType = 'text';
-export let verticalAlignment = undefined;
-export let customCss = undefined;
-export let appCssKey = 'textinputcomponent';
-export let render;
-export let onChange = undefined;
+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 = initConfig(components['textinputcomponent'].initialData.configuration, configuration);
+let resolvedConfig = $state(initConfig(components['textinputcomponent'].initialData.configuration, configuration));
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
 let outputs = initOutput($worldStore, id, {
     result: undefined
 });
 let initValue = outputs?.result.peak();
-let value = !iterContext && initValue && initValue != '' ? initValue : resolvedConfig.defaultValue;
+let value = $state(!iterContext && initValue && initValue != '' ? initValue : resolvedConfig.defaultValue);
 onDestroy(() => {
     listInputs?.remove(id);
 });
@@ -35,8 +30,6 @@ $componentControl[id] = {
     }
 };
 let initialHandleDefault = true;
-$: handleDefault(resolvedConfig.defaultValue);
-$: value, onValueChange();
 function onValueChange() {
     let val = value ?? '';
     outputs?.result.set(val);
@@ -59,12 +52,9 @@ function handleDefault(defaultValue) {
     }
     value = defaultValue;
 }
-let css = initCss($app.css?.[appCssKey], customCss);
-$: classInput = twMerge('windmillapp w-full py-1.5 px-2 text-sm', 'app-editor-input', css?.input?.class ?? '', 'wm-input', 'wm-text-input');
-let beforeIconComponent;
-let afterIconComponent;
-$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();
-$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon();
+let css = $state(initCss($app.css?.[appCssKey], customCss));
+let beforeIconComponent = $state();
+let afterIconComponent = $state();
 async function handleBeforeIcon() {
     if (resolvedConfig.beforeIcon) {
         beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
@@ -75,6 +65,21 @@ async function handleAfterIcon() {
         afterIconComponent = await loadIcon(resolvedConfig.afterIcon, afterIconComponent, 14, undefined, undefined);
     }
 }
+$effect.pre(() => {
+    resolvedConfig.defaultValue;
+    untrack(() => handleDefault(resolvedConfig.defaultValue));
+});
+$effect.pre(() => {
+    value;
+    untrack(() => onValueChange());
+});
+let classInput = $derived(twMerge('windmillapp w-full py-1.5 px-2 text-sm', 'app-editor-input', css?.input?.class ?? '', 'wm-input', 'wm-text-input'));
+$effect.pre(() => {
+    resolvedConfig.beforeIcon && beforeIconComponent && untrack(() => handleBeforeIcon());
+});
+$effect.pre(() => {
+    resolvedConfig.afterIcon && afterIconComponent && untrack(() => handleAfterIcon());
+});
 </script>
 
 {#each Object.keys(components['textinputcomponent'].initialData.configuration) as key (key)}
@@ -109,9 +114,11 @@ async function handleAfterIcon() {
 				'h-full'
 			)}
 			style="resize:none; {css?.input?.style ?? ''}"
-			on:pointerdown|stopPropagation={(e) =>
-				!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
-			on:keydown|stopPropagation
+			onpointerdown={(e) => {
+				e.stopPropagation()
+				!$connectingInput.opened && selectId(e, id, selectedComponent, $app)
+			}}
+			onkeydown={stopPropagation(bubble('keydown'))}
 			bind:value
 			placeholder={resolvedConfig.placeholder}
 			disabled={resolvedConfig.disabled}
@@ -135,9 +142,11 @@ async function handleAfterIcon() {
 							resolvedConfig.afterIcon ? '!pr-8' : ''
 						)}
 						style={css?.input?.style ?? ''}
-						on:pointerdown|stopPropagation={(e) =>
-							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
-						on:keydown|stopPropagation
+						onpointerdown={(e) => {
+							e.stopPropagation()
+							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)
+						}}
+						onkeydown={stopPropagation(bubble('keydown'))}
 						type="password"
 						autocomplete="new-password"
 						bind:value
@@ -152,9 +161,11 @@ async function handleAfterIcon() {
 							resolvedConfig.afterIcon ? '!pr-8' : ''
 						)}
 						style={css?.input?.style ?? ''}
-						on:pointerdown|stopPropagation={(e) =>
-							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
-						on:keydown|stopPropagation
+						onpointerdown={(e) => {
+							e.stopPropagation()
+							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)
+						}}
+						onkeydown={stopPropagation(bubble('keydown'))}
 						type="text"
 						bind:value
 						placeholder={resolvedConfig.placeholder}
@@ -168,9 +179,11 @@ async function handleAfterIcon() {
 							resolvedConfig.afterIcon ? '!pr-8' : ''
 						)}
 						style={css?.input?.style ?? ''}
-						on:pointerdown|stopPropagation={(e) =>
-							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
-						on:keydown|stopPropagation
+						onpointerdown={(e) => {
+							e.stopPropagation()
+							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)
+						}}
+						onkeydown={stopPropagation(bubble('keydown'))}
 						type="email"
 						bind:value
 						placeholder={resolvedConfig.placeholder}

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

@@ -1,30 +1,14 @@
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppTextInput: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     configuration: RichConfigurations;
     inputType?: string;
-    verticalAlignment?: "top" | "center" | "bottom" | undefined;
-    customCss?: ComponentCustomCSS<"textinputcomponent"> | undefined;
-    appCssKey?: "textinputcomponent" | "passwordinputcomponent" | "emailinputcomponent" | "textareainputcomponent";
+    verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+    customCss?: ComponentCustomCSS<'textinputcomponent'> | undefined;
+    appCssKey?: 'textinputcomponent' | 'passwordinputcomponent' | 'emailinputcomponent' | 'textareainputcomponent';
     render: boolean;
     onChange?: string[] | undefined;
-}, {
-    keydown: KeyboardEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppTextInput = InstanceType<typeof AppTextInput>;
+}
+declare const AppTextInput: import("svelte").Component<Props, {}, "">;
+type AppTextInput = ReturnType<typeof AppTextInput>;
 export default AppTextInput;

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

@@ -1,4 +1,5 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { stopPropagation } from 'svelte/legacy';
+import { getContext, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
@@ -7,15 +8,10 @@ import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
-export let id;
-export let configuration;
-export let verticalAlignment = undefined;
-export let customCss = undefined;
-export let render;
-export let onChange = undefined;
+let { id, configuration, verticalAlignment = undefined, customCss = undefined, render, onChange = undefined } = $props();
 const { app, worldStore, selectedComponent, componentControl, runnableComponents } = getContext('AppViewerContext');
-let resolvedConfig = initConfig(components['timeinputcomponent'].initialData.configuration, configuration);
-let value = undefined;
+let resolvedConfig = $state(initConfig(components['timeinputcomponent'].initialData.configuration, configuration));
+let value = $state(undefined);
 $componentControl[id] = {
     setValue(nvalue) {
         value = nvalue;
@@ -25,12 +21,24 @@ let outputs = initOutput($worldStore, id, {
     result: undefined,
     validity: true
 });
-$: !value && handleDefault(resolvedConfig.defaultValue);
 function convertToMinutes(time) {
     const [hours, minutes] = time.split(':').map(Number);
     return hours * 60 + minutes;
 }
-$: {
+function fireOnChange() {
+    if (onChange) {
+        onChange.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()));
+    }
+}
+function handleDefault(defaultValue) {
+    value = defaultValue;
+}
+let css = $state(initCss($app.css?.timeinputcomponent, customCss));
+$effect.pre(() => {
+    resolvedConfig.defaultValue;
+    !value && untrack(() => handleDefault(resolvedConfig.defaultValue));
+});
+$effect.pre(() => {
     if (value) {
         if (!resolvedConfig['24hFormat']) {
             let time = value.split(':');
@@ -62,16 +70,7 @@ $: {
         outputs?.validity.set(isValid);
     }
     fireOnChange();
-}
-function fireOnChange() {
-    if (onChange) {
-        onChange.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()));
-    }
-}
-function handleDefault(defaultValue) {
-    value = defaultValue;
-}
-let css = initCss($app.css?.timeinputcomponent, customCss);
+});
 </script>
 
 {#each Object.keys(components['timeinputcomponent'].initialData.configuration) as key (key)}
@@ -97,8 +96,8 @@ let css = initCss($app.css?.timeinputcomponent, customCss);
 
 <AlignWrapper {render} {verticalAlignment}>
 	<input
-		on:focus={() => ($selectedComponent = [id])}
-		on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
+		onfocus={() => ($selectedComponent = [id])}
+		onpointerdown={stopPropagation(() => ($selectedComponent = [id]))}
 		type="time"
 		bind:value
 		min={resolvedConfig.minTime}

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

@@ -1,26 +1,12 @@
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppTimeInput: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     configuration: RichConfigurations;
-    verticalAlignment?: "top" | "center" | "bottom" | undefined;
-    customCss?: ComponentCustomCSS<"timeinputcomponent"> | undefined;
+    verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+    customCss?: ComponentCustomCSS<'timeinputcomponent'> | undefined;
     render: boolean;
     onChange?: string[] | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppTimeInput = InstanceType<typeof AppTimeInput>;
+}
+declare const AppTimeInput: import("svelte").Component<Props, {}, "">;
+type AppTimeInput = ReturnType<typeof AppTimeInput>;
 export default AppTimeInput;

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

@@ -8,21 +8,17 @@ import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { twMerge } from 'tailwind-merge';
 import LightweightResourcePicker from '../../../LightweightResourcePicker.svelte';
-export let id;
-export let configuration;
-export let verticalAlignment = undefined;
-export let customCss = undefined;
-export let render;
+let { id, configuration, verticalAlignment = undefined, customCss = undefined, render } = $props();
 const { app, worldStore, componentControl } = getContext('AppViewerContext');
-let resolvedConfig = initConfig(components['userresourcecomponent'].initialData.configuration, configuration);
+let resolvedConfig = $state(initConfig(components['userresourcecomponent'].initialData.configuration, configuration));
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
 let outputs = initOutput($worldStore, id, {
     result: undefined
 });
-let css = initCss($app.css?.['userresourcecomponent'], customCss);
-$: classInput = twMerge('windmillapp w-full px-2', css?.input?.class ?? '', 'wm-input', 'wm-user-resource-select');
-let value = outputs.result.peak()?.replace('$res:', '');
+let css = $state(initCss($app.css?.['userresourcecomponent'], customCss));
+let classInput = $derived(twMerge('windmillapp w-full px-2', css?.input?.class ?? '', 'wm-input', 'wm-user-resource-select'));
+let value = $state(outputs.result.peak()?.replace('$res:', ''));
 value && assignValue(outputs.result.peak());
 onDestroy(() => {
     listInputs?.remove(id);
@@ -48,7 +44,7 @@ function assignValue(value) {
         listInputs.set(id, nval);
     }
 }
-let resourcePicker = undefined;
+let resourcePicker = $state(undefined);
 </script>
 
 {#each Object.keys(components['userresourcecomponent'].initialData.configuration) as key (key)}

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

@@ -1,25 +1,11 @@
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppUserResource: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     configuration: RichConfigurations;
-    verticalAlignment?: "top" | "center" | "bottom" | undefined;
-    customCss?: ComponentCustomCSS<"userresourcecomponent"> | undefined;
+    verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+    customCss?: ComponentCustomCSS<'userresourcecomponent'> | undefined;
     render: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppUserResource = InstanceType<typeof AppUserResource>;
+}
+declare const AppUserResource: import("svelte").Component<Props, {}, "">;
+type AppUserResource = ReturnType<typeof AppUserResource>;
 export default AppUserResource;

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

@@ -1,5 +1,6 @@
-<script lang="ts">import { initConfig, initOutput } from '../../../editor/appUtils';
-import { getContext, onDestroy } from 'svelte';
+<script lang="ts">import { stopPropagation } from 'svelte/legacy';
+import { initConfig, initOutput } from '../../../editor/appUtils';
+import { getContext, onDestroy, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initCss } from '../../../utils';
 import AlignWrapper from '../../helpers/AlignWrapper.svelte';
@@ -8,11 +9,7 @@ import InitializeComponent from '../../helpers/InitializeComponent.svelte';
 import ResolveConfig from '../../helpers/ResolveConfig.svelte';
 import { components } from '../../../editor/component';
 import ResolveStyle from '../../helpers/ResolveStyle.svelte';
-export let id;
-export let configuration;
-export let verticalAlignment = undefined;
-export let customCss = undefined;
-export let render;
+let { id, configuration, verticalAlignment = undefined, customCss = undefined, render } = $props();
 const { app, worldStore, selectedComponent, componentControl } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
@@ -22,9 +19,9 @@ const outputs = initOutput($worldStore, id, {
 onDestroy(() => {
     listInputs?.remove(id);
 });
-let resolvedConfig = initConfig(components['currencycomponent'].initialData.configuration, configuration);
+let resolvedConfig = $state(initConfig(components['currencycomponent'].initialData.configuration, configuration));
 let initValue = outputs?.result.peak();
-let value = !iterContext && initValue != undefined ? initValue : resolvedConfig.defaultValue;
+let value = $state(!iterContext && initValue != undefined ? initValue : resolvedConfig.defaultValue);
 $componentControl[id] = {
     setValue(nvalue) {
         value = nvalue;
@@ -38,7 +35,6 @@ function handleInput() {
     }
 }
 let initialHandleDefault = true;
-$: handleDefault(resolvedConfig.defaultValue);
 function handleDefault(dflt) {
     if (initialHandleDefault) {
         initialHandleDefault = false;
@@ -49,8 +45,14 @@ function handleDefault(dflt) {
     value = dflt;
     handleInput();
 }
-$: value != undefined && handleInput();
-let css = initCss($app.css?.currencycomponent, customCss);
+let css = $state(initCss($app.css?.currencycomponent, customCss));
+$effect(() => {
+    resolvedConfig.defaultValue;
+    untrack(() => handleDefault(resolvedConfig.defaultValue));
+});
+$effect(() => {
+    value != undefined && untrack(() => handleInput());
+});
 </script>
 
 {#each Object.keys(components['currencycomponent'].initialData.configuration) as key (key)}
@@ -78,7 +80,7 @@ let css = initCss($app.css?.currencycomponent, customCss);
 	{#key resolvedConfig.isNegativeAllowed}
 		{#key resolvedConfig.locale}
 			{#key resolvedConfig.currency}
-				<div class="w-full" on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}>
+				<div class="w-full" onpointerdown={stopPropagation(() => ($selectedComponent = [id]))}>
 					<CurrencyInput
 						inputClasses={{
 							formatted: twMerge(

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

@@ -1,25 +1,11 @@
 import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppCurrencyInput: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     configuration: RichConfigurations;
-    verticalAlignment?: "top" | "center" | "bottom" | undefined;
-    customCss?: ComponentCustomCSS<"currencycomponent"> | undefined;
+    verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+    customCss?: ComponentCustomCSS<'currencycomponent'> | undefined;
     render: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppCurrencyInput = InstanceType<typeof AppCurrencyInput>;
+}
+declare const AppCurrencyInput: import("svelte").Component<Props, {}, "">;
+type AppCurrencyInput = ReturnType<typeof AppCurrencyInput>;
 export default AppCurrencyInput;

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

@@ -1,4 +1,5 @@
 <script lang="ts">import DarkModeObserver from '../../../../DarkModeObserver.svelte';
+import { untrack } from 'svelte';
 /* Forked from MIT LICENSE
 https://raw.githubusercontent.com/Canutin/svelte-currency-input/main/src/lib/CurrencyInput.svelte
 */
@@ -13,18 +14,7 @@ const DEFAULT_CLASS_FORMATTED = 'currencyInput__formatted';
 const DEFAULT_CLASS_FORMATTED_POSITIVE = 'currencyInput__formatted--positive';
 const DEFAULT_CLASS_FORMATTED_NEGATIVE = 'currencyInput__formatted--negative';
 const DEFAULT_CLASS_FORMATTED_ZERO = 'currencyInput__formatted--zero';
-export let value = DEFAULT_VALUE;
-export let locale = DEFAULT_LOCALE;
-export let currency = DEFAULT_CURRENCY;
-export let name = DEFAULT_NAME;
-export let required = false;
-export let disabled = false;
-export let placeholder = DEFAULT_VALUE;
-export let isNegativeAllowed = true;
-export let fractionDigits = DEFAULT_FRACTION_DIGITS;
-export let inputClasses = null;
-export let noColor = false;
-export let style = '';
+let { value = $bindable(DEFAULT_VALUE), locale = DEFAULT_LOCALE, currency = DEFAULT_CURRENCY, name = DEFAULT_NAME, required = false, disabled = false, placeholder = DEFAULT_VALUE, isNegativeAllowed = true, fractionDigits = DEFAULT_FRACTION_DIGITS, inputClasses = null, noColor = false, style = '' } = $props();
 // Formats value as: e.g. $1,523.00 | -$1,523.00
 const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) => {
     try {
@@ -122,12 +112,17 @@ const setFormattedValue = () => {
         inputTarget?.setSelectionRange(endCaretPosition, endCaretPosition);
     }, 0.1);
 };
-let formattedValue = '';
+let formattedValue = $state('');
 let formattedPlaceholder = placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : '';
-$: isZero = value === 0;
-$: isNegative = value < 0;
-$: value, setFormattedValue();
-let darkMode = false;
+let isZero = $derived(value === 0);
+let isNegative = $derived(value < 0);
+$effect(() => {
+    value;
+    untrack(() => {
+        setFormattedValue();
+    });
+});
+let darkMode = $state(false);
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -144,11 +139,11 @@ let darkMode = false;
 		class="
 			{inputClasses?.formatted ?? DEFAULT_CLASS_FORMATTED}
 			{isNegativeAllowed && !isZero && !isNegative
-			? inputClasses?.formattedPositive ?? DEFAULT_CLASS_FORMATTED_POSITIVE
+			? (inputClasses?.formattedPositive ?? DEFAULT_CLASS_FORMATTED_POSITIVE)
 			: ''}
-			{isZero ? inputClasses?.formattedZero ?? DEFAULT_CLASS_FORMATTED_ZERO : ''}
+			{isZero ? (inputClasses?.formattedZero ?? DEFAULT_CLASS_FORMATTED_ZERO) : ''}
 			{isNegativeAllowed && isNegative
-			? inputClasses?.formattedNegative ?? DEFAULT_CLASS_FORMATTED_NEGATIVE
+			? (inputClasses?.formattedNegative ?? DEFAULT_CLASS_FORMATTED_NEGATIVE)
 			: ''}
 		"
 		style={style ? style : noColor ? (darkMode ? 'color: white;' : 'color: black;') : ''}
@@ -159,8 +154,8 @@ let darkMode = false;
 		placeholder={formattedPlaceholder}
 		{disabled}
 		bind:value={formattedValue}
-		on:keydown={handleKeyDown}
-		on:keyup={setUnformattedValue}
+		onkeydown={handleKeyDown}
+		onkeyup={setUnformattedValue}
 	/>
 </div>
 

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

@@ -1,17 +1,12 @@
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface InputClasses {
+    wrapper?: string;
+    unformatted?: string;
+    formatted?: string;
+    formattedPositive?: string;
+    formattedNegative?: string;
+    formattedZero?: string;
 }
-declare const CurrencyInput: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value?: number;
     locale?: string;
     currency?: string;
@@ -21,18 +16,10 @@ declare const CurrencyInput: $$__sveltets_2_IsomorphicComponent<{
     placeholder?: number | null;
     isNegativeAllowed?: boolean;
     fractionDigits?: number;
-    inputClasses?: {
-        wrapper?: string;
-        unformatted?: string;
-        formatted?: string;
-        formattedPositive?: string;
-        formattedNegative?: string;
-        formattedZero?: string;
-    } | null;
+    inputClasses?: InputClasses | null;
     noColor?: boolean;
     style?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CurrencyInput = InstanceType<typeof CurrencyInput>;
+}
+declare const CurrencyInput: import("svelte").Component<Props, {}, "value">;
+type CurrencyInput = ReturnType<typeof CurrencyInput>;
 export default CurrencyInput;

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

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { initOutput } from '../../editor/appUtils';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
@@ -6,28 +6,25 @@ import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import InputValue from '../helpers/InputValue.svelte';
-export let id;
-export let componentContainerHeight;
-export let customCss = undefined;
-export let render;
-export let conditions;
-export let onTabChange = undefined;
+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, {
     conditions: [],
     selectedTabIndex: 0
 });
-let everRender = render;
-$: render && !everRender && (everRender = true);
+let everRender = $state(render);
+$effect.pre(() => {
+    render && !everRender && (everRender = true);
+});
 function onFocus() {
     $focusedGrid = {
         parentComponentId: id,
         subGridIndex: selectedConditionIndex
     };
 }
-let css = initCss($app.css?.conditionalwrapper, customCss);
-let resolvedConditions = conditions.map((_x) => false);
-let selectedConditionIndex = 0;
+let css = $state(initCss($app.css?.conditionalwrapper, customCss));
+let resolvedConditions = $state(conditions.map((_x) => false));
+let selectedConditionIndex = $state(0);
 function handleResolvedConditions() {
     const slicedArray = resolvedConditions.slice(0, conditions.length);
     const firstTrueIndex = slicedArray.findIndex((c) => c);
@@ -43,7 +40,10 @@ function setSelectedIndex(index) {
     outputs.selectedTabIndex.set(index);
     onTabChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()));
 }
-$: resolvedConditions && handleResolvedConditions();
+$effect.pre(() => {
+    resolvedConditions && resolvedConditions.forEach((c) => c);
+    resolvedConditions && untrack(() => handleResolvedConditions());
+});
 $componentControl[id] = {
     setTab: (conditionIndex) => {
         if (conditionIndex === -1) {