windmill-components 1.642.0 → 1.655.0

package/package/components/apps/components/display/charts/AppAgCharts.svelte

@@ -9,13 +9,13 @@ import ResolveStyle from '../../helpers/ResolveStyle.svelte';
 import DarkModeObserver from '../../../../DarkModeObserver.svelte';
 let { id, componentInput, configuration, initializing = $bindable(undefined), customCss = undefined, render, license = undefined, ee = false } = $props();
 const { app, worldStore } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
 let result = $state(undefined);
-const resolvedConfig = $state(initConfig(components['agchartscomponent'].initialData.configuration, configuration));
-let css = $state(initCss($app.css?.agchartscomponent, customCss));
+const resolvedConfig = $state(initConfig(components['agchartscomponent'].initialData.configuration, untrack(() => configuration)));
+let css = $state(initCss($app.css?.agchartscomponent, untrack(() => customCss)));
 let chartInstance = $state(undefined);
 function getChartStyleByTheme() {
     const gridColor = darkMode ? '#555555' : '#dddddd';

package/package/components/apps/components/display/dbtable/AppDbExplorer.svelte

@@ -46,7 +46,7 @@ function clearColumnDefs() {
     gridItem.data.configuration.columnDefs = { value: [], type: 'static', loading: false };
     $app = $app;
 }
-const resolvedConfig = $state(initConfig(components['dbexplorercomponent'].initialData.configuration, configuration));
+const resolvedConfig = $state(initConfig(components['dbexplorercomponent'].initialData.configuration, untrack(() => configuration)));
 let timeoutInput = undefined;
 function computeInput(columnDefs, whereClause, resource) {
     if (timeoutInput) {
@@ -96,7 +96,7 @@ function onUpdate(e) {
     const { columnDef, value, data, oldValue } = e.detail;
     updateCell?.triggerUpdate(dbInput, resolvedConfig.type.configuration[resolvedConfig.type.selected].table ?? 'unknown', columnDef, resolvedConfig.columnDefs, value, data, oldValue);
 }
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     selectedRowIndex: 0,
     selectedRow: {},
     selectedRows: [],

package/package/components/apps/components/display/dbtable/DbExplorerCount.svelte

@@ -5,7 +5,7 @@ import {} from './utils';
 import { getCountInput } from './queries/count';
 let { id, table, renderCount, quicksearch, dbInput, columnDefs, whereClause } = $props();
 const { worldStore } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, `${id}_count`, {
+let outputs = initOutput($worldStore, `${untrack(() => id)}_count`, {
     result: undefined,
     loading: false,
     jobId: undefined
@@ -16,8 +16,8 @@ let input = $state(undefined);
 let lastTableCount = undefined;
 let renderCountLast = -1;
 let quicksearchLast = undefined;
-let localColumnDefs = columnDefs;
-let lastTable = $state(table);
+let localColumnDefs = untrack(() => columnDefs);
+let lastTable = $state(untrack(() => table));
 function onTableChange() {
     if (table !== lastTable) {
         lastTable = table;

package/package/components/apps/components/display/dbtable/DeleteRow.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { createEventDispatcher, getContext, tick } from 'svelte';
+<script lang="ts">import { createEventDispatcher, getContext, tick, untrack } from 'svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { initOutput } from '../../../editor/appUtils';
 import { getPrimaryKeys } from './utils';
@@ -6,7 +6,7 @@ import { sendUserToast } from '../../../../../toast';
 import { getDeleteInput } from './queries/delete';
 let { id } = $props();
 const { worldStore } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, `${id}_delete`, {
+let outputs = initOutput($worldStore, `${untrack(() => id)}_delete`, {
     result: undefined,
     loading: false,
     jobId: undefined

package/package/components/apps/components/display/dbtable/InsertRowRunnable.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { createEventDispatcher, getContext, tick } from 'svelte';
+<script lang="ts">import { createEventDispatcher, getContext, tick, untrack } from 'svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { initOutput } from '../../../editor/appUtils';
 import {} from './utils';
@@ -6,7 +6,7 @@ import { sendUserToast } from '../../../../../toast';
 import { getInsertInput } from './queries/insert';
 let { id } = $props();
 const { worldStore } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, `${id}_insert`, {
+let outputs = initOutput($worldStore, `${untrack(() => id)}_insert`, {
     result: undefined,
     loading: false,
     jobId: undefined

package/package/components/apps/components/display/dbtable/UpdateCell.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext, tick } from 'svelte';
+<script lang="ts">import { getContext, tick, untrack } from 'svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { initOutput } from '../../../editor/appUtils';
 import { getPrimaryKeys } from './utils';
@@ -6,7 +6,7 @@ import { sendUserToast } from '../../../../../toast';
 import { getUpdateInput } from './queries/update';
 let { id } = $props();
 const { worldStore } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, `${id}_update`, {
+let outputs = initOutput($worldStore, `${untrack(() => id)}_update`, {
     result: undefined,
     loading: false,
     jobId: undefined

package/package/components/apps/components/display/dbtable/metadata.js

@@ -2,8 +2,9 @@ import { JobService, ResourceService } from '../../../../../gen';
 import { runScriptAndPollResult } from '../../../../jobs/utils';
 import { getLanguageByResourceType, resourceTypeToLang, legacyScripts, scriptsV2 } from './utils';
 import {} from '../../../../../gen';
-import { stringifySchema } from '../../../../copilot/lib';
+import { stringifyGraphqlSchema, stringifySchema } from '../../../../copilot/lib';
 import { getDatabaseArg } from '../../../../dbOps';
+import { sendUserToast } from '../../../../../toast';
 export async function loadTableMetaData(input, workspace, table) {
     if (!input || !table || !workspace)
         return undefined;
@@ -64,7 +65,8 @@ export async function loadAllTablesMetaData(workspace, input) {
         return map;
     }
     catch (e) {
-        throw new Error('Error loading all tables metadata: ' + e);
+        sendUserToast('Error loading tables metadata: ' + e, 'error');
+        throw e;
     }
 }
 async function makeLoadTableMetaDataQuery(input, workspace, table) {
@@ -329,7 +331,7 @@ export async function getDbSchemas(resourceType, resourcePath, workspace, errorC
             workspace,
             requestBody: {
                 language: sqlScript.lang,
-                content: sqlScript.code,
+                content: typeof sqlScript.code === 'function' ? await sqlScript.code() : sqlScript.code,
                 tag: options.customTag,
                 args: {
                     [sqlScript.argName]: resourcePath.startsWith('datatable://')
@@ -374,7 +376,10 @@ export async function getDbSchemas(resourceType, resourcePath, workspace, errorC
                     lang: 'graphql',
                     schema: result
                 };
-                return { ...dbSchema, stringified: stringifySchema(dbSchema) };
+                return {
+                    ...dbSchema,
+                    stringified: await stringifyGraphqlSchema(result)
+                };
             }
         }
     }

package/package/components/apps/components/display/dbtable/utils.d.ts

@@ -1,6 +1,6 @@
 import type { ScriptLang } from '../../../../../gen';
 import type { SQLSchema } from '../../../../../stores';
-import { type IntrospectionQuery } from 'graphql';
+import type { IntrospectionQuery } from 'graphql';
 import type { DbType } from '../../../../dbTypes';
 export declare enum ColumnIdentity {
     ByDefault = "By Default",
@@ -44,7 +44,7 @@ export type ColumnDef = {
 } & ColumnMetadata;
 export declare function resourceTypeToLang(rt: string): string;
 declare const legacyScripts: Record<string, {
-    code: string;
+    code: string | (() => Promise<string>);
     lang: string;
     processingFn?: (any: any) => SQLSchema['schema'];
     argName: string;
@@ -74,7 +74,7 @@ export declare function formatSchema(dbSchema: {
         };
     };
 };
-export declare function formatGraphqlSchema(schema: IntrospectionQuery): string;
+export declare function formatGraphqlSchema(schema: IntrospectionQuery): Promise<string>;
 export declare function buildVisibleFieldList(columnDefs: ColumnDef[], dbType: DbType): string[];
 export declare function renderDbQuotedIdentifier(identifier: string, dbType: DbType): string;
 export declare function getLanguageByResourceType(name: string): ScriptLang;

package/package/components/apps/components/display/dbtable/utils.js

@@ -1,4 +1,3 @@
-import { buildClientSchema, getIntrospectionQuery, printSchema } from 'graphql';
 export var ColumnIdentity;
 (function (ColumnIdentity) {
     ColumnIdentity["ByDefault"] = "By Default";
@@ -80,7 +79,7 @@ const legacyScripts = {
         argName: 'database'
     },
     graphql: {
-        code: getIntrospectionQuery(),
+        code: () => import('graphql').then((m) => m.getIntrospectionQuery()),
         lang: 'graphql',
         argName: 'api'
     },
@@ -229,7 +228,8 @@ export function formatSchema(dbSchema) {
         return dbSchema.schema;
     }
 }
-export function formatGraphqlSchema(schema) {
+export async function formatGraphqlSchema(schema) {
+    const { buildClientSchema, printSchema } = await import('graphql');
     return printSchema(buildClientSchema(schema));
 }
 export function buildVisibleFieldList(columnDefs, dbType) {

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

@@ -2,6 +2,7 @@
 import { createGrid } from 'ag-grid-community';
 import { sendUserToast } from '../../../../../utils';
 import { createEventDispatcher, getContext, mount, unmount, untrack } from 'svelte';
+import {} from '../../../types';
 import { deepEqual } from 'fast-equals';
 import SyncColumnDefs from './SyncColumnDefs.svelte';
 import 'ag-grid-community/styles/ag-grid.css';
@@ -21,8 +22,9 @@ let { id, customCss = undefined, containerHeight = undefined, resolvedConfig, da
 let inputs = {};
 const context = getContext('AppViewerContext');
 const contextPanel = getContext('ContextPanel');
+const editorContext = getContext('AppEditorContext');
 const { app, selectedComponent, componentControl, darkMode, mode } = context;
-let css = $state(initCss($app.css?.aggridcomponent, customCss));
+let css = $state(initCss($app.css?.aggridcomponent, untrack(() => customCss)));
 let selectedRowIndex = -1;
 function toggleRow(row) {
     if (row) {
@@ -93,7 +95,8 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
     const row = p.data;
     const componentContext = new Map([
         ['AppViewerContext', context],
-        ['ContextPanel', contextPanel]
+        ['ContextPanel', contextPanel],
+        ['AppEditorContext', editorContext]
     ]);
     const taComponent = withProps(AppAggridTableActions, {
         p,
@@ -311,8 +314,8 @@ function mountGrid() {
         }, {});
     }
 }
-let oldDatasource = $state(datasource);
-let extraConfig = $state(resolvedConfig.extraConfig);
+let oldDatasource = $state(untrack(() => datasource));
+let extraConfig = $state(untrack(() => resolvedConfig).extraConfig);
 export function clearRows() {
     api?.purgeInfiniteCache();
 }
@@ -408,6 +411,7 @@ $effect(() => {
 		bind:clientHeight
 		bind:clientWidth
 	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			onpointerdown={stopPropagation(() => {
 				$selectedComponent = [id]

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,11 +23,11 @@ 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: [],

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,8 +65,8 @@ 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: [],
@@ -543,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';
@@ -15,8 +15,8 @@ import AppModal from '../../layout/AppModal.svelte';
 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) => {

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/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/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];