windmill-components 1.623.2 → 1.655.0

package/package/components/apps/editor/DecisionTreeDebug.svelte

@@ -2,7 +2,7 @@
 const bubble = createBubbler();
 import Dropdown from '../../DropdownV2.svelte';
 import { classNames } from '../../../utils';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, untrack } from 'svelte';
 import { isDebugging } from './settingsPanel/decisionTree/utils';
 import { X, Bug } from 'lucide-svelte';
 let { nodes = [], id, isSmall = false, componentIsDebugging = $bindable(false) } = $props();
@@ -11,7 +11,7 @@ $effect(() => {
 });
 const { componentControl, debuggingComponents, worldStore } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
-let currentNodeId = $state($worldStore.outputsById[id]?.currentNodeId?.peak() ?? 'a');
+let currentNodeId = $state($worldStore.outputsById[untrack(() => id)]?.currentNodeId?.peak() ?? 'a');
 function subscribeToCurrentNode(id) {
     return $worldStore.outputsById[id]?.currentNodeId?.subscribe({
         id: `id-${id}-${currentNodeId}`,
@@ -20,7 +20,7 @@ function subscribeToCurrentNode(id) {
         }
     }, currentNodeId);
 }
-let subscription = subscribeToCurrentNode(id);
+let subscription = subscribeToCurrentNode(untrack(() => id));
 function onDebugNode(debuggedNodeIndex) {
     if (debuggedNodeIndex === undefined) {
         return;
@@ -35,7 +35,7 @@ $effect(() => {
     onDebugNode($debuggingComponents[id]);
 });
 let renderCount = $state(0);
-let lastNodes = nodes;
+let lastNodes = untrack(() => nodes);
 function onNodesChange(newNodes) {
     if (JSON.stringify(newNodes) !== JSON.stringify(lastNodes)) {
         lastNodes = newNodes;

package/package/components/apps/editor/GridEditor.svelte

@@ -131,6 +131,7 @@ export function moveComponentBetweenSubgrids(componentId, subgrid, position) {
 		</div>
 	</div>
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		style={$app.css?.['app']?.['grid']?.style}
 		class={twMerge(

package/package/components/apps/editor/GridViewer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { columnConfiguration, WIDE_GRID_COLUMNS } from '../gridUtils';
 import { ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT } from './appUtils';
-import { onMount, createEventDispatcher, getContext } from 'svelte';
+import { onMount, createEventDispatcher, getContext, untrack } from 'svelte';
 import { getColumn, throttle } from '../svelte-grid/utils/other';
 import { getContainerHeight } from '../svelte-grid/utils/container';
 import { specifyUndefinedColumns } from '../svelte-grid/utils/item';
@@ -13,7 +13,7 @@ let getComputedCols = $state($app.mobileViewOnSmallerScreens == false ? WIDE_GRI
 let container = $state();
 let [gapX, gapY] = $derived(gap);
 let xPerPx = $state(0);
-let yPerPx = rowHeight;
+let yPerPx = untrack(() => rowHeight);
 let containerHeight = $derived(getContainerHeight(items, yPerPx, getComputedCols));
 const onResize = throttle(() => {
     if (!getComputedCols)
@@ -25,7 +25,7 @@ const onResize = throttle(() => {
         yPerPx,
         width: containerWidth
     });
-}, throttleUpdate);
+}, untrack(() => throttleUpdate));
 onMount(() => {
     setTimeout(() => {
         showSkeleton = true;

package/package/components/apps/editor/RecomputeAllComponents.svelte

@@ -1,15 +1,13 @@
-<script lang="ts">import { getContext, onMount } from 'svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { getContext, onMount } from 'svelte';
 import RecomputeAllButton from './RecomputeAllButton.svelte';
 import { allItems, BG_PREFIX } from './appUtilsCore';
 const { runnableComponents, app, initialized, recomputeAllContext } = getContext('AppViewerContext');
 const appEditorContext = getContext('AppEditorContext');
 let timeout = undefined;
 let shouldRefresh = false;
-let firstLoad = false;
+let firstLoad = $state(false);
 let progressTimer = undefined;
-$: !firstLoad &&
-    canInitializeAll($initialized?.initializedComponents, $app) &&
-    refresh('all initialized');
 // $: console.log('canInitializeAll', firstLoad, $initialized?.initializedComponents)
 function canInitializeAll(initialized, app) {
     // console.log(
@@ -41,8 +39,6 @@ function canInitializeAll(initialized, app) {
             app.lazyInitRequire?.every((x) => initialized?.includes(x)));
     }
 }
-$: $recomputeAllContext.componentNumber =
-    Object.values($runnableComponents).filter((x) => x.autoRefresh).length ?? 0;
 onMount(() => {
     if (appEditorContext) {
         appEditorContext.refreshComponents.set(() => refresh('onClick global'));
@@ -96,7 +92,7 @@ function setInter(inter, source) {
     $recomputeAllContext.interval = inter;
     onRefresh(!inter, 'setInter ' + source);
 }
-let refreshing = [];
+let refreshing = $state([]);
 function refresh(reason, excludeId = undefined) {
     let isFirstLoad = false;
     if (!firstLoad && reason == 'all initialized') {
@@ -159,6 +155,15 @@ onMount(() => {
         setInter: (n) => setInter(n, 'all context')
     };
 });
+run(() => {
+    !firstLoad &&
+        canInitializeAll($initialized?.initializedComponents, $app) &&
+        refresh('all initialized');
+});
+run(() => {
+    $recomputeAllContext.componentNumber =
+        Object.values($runnableComponents).filter((x) => x.autoRefresh).length ?? 0;
+});
 </script>
 
 <RecomputeAllButton

package/package/components/apps/editor/RecomputeAllComponents.svelte.d.ts

@@ -1,18 +1,3 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const RecomputeAllComponents: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RecomputeAllComponents = InstanceType<typeof RecomputeAllComponents>;
+declare const RecomputeAllComponents: import("svelte").Component<Record<string, never>, {}, "">;
+type RecomputeAllComponents = ReturnType<typeof RecomputeAllComponents>;
 export default RecomputeAllComponents;

package/package/components/apps/editor/SubGridEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
 import { push } from '../../../history.svelte';
 import { classNames } from '../../../utils';
-import { getContext, onDestroy } from 'svelte';
+import { getContext, onDestroy, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { gridColumns, isFixed, toggleFixed } from '../gridUtils';
 import Grid from '../svelte-grid/Grid.svelte';
@@ -16,7 +16,7 @@ const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth,
 const editorContext = getContext('AppEditorContext');
 let isActive = $state(false);
 let sber = editorContext?.componentActive?.subscribe((x) => (isActive = x));
-let everVisible = $state(visible);
+let everVisible = $state(untrack(() => visible));
 $effect.pre(() => {
     visible && !everVisible && (everVisible = true);
 });
@@ -94,6 +94,7 @@ export function moveToRoot(componentId, position) {
 <!-- {visible}
 {everVisible} -->
 {#if everVisible || $app.eagerRendering}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="translate-x-0 translate-y-0 w-full subgrid {visible
 			? 'visible'
@@ -224,6 +225,7 @@ export function moveToRoot(componentId, position) {
 				>
 					{#snippet children({ dataItem })}
 						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							onpointerdown={stopPropagation((e) =>
 								selectComponent(e as PointerEvent, dataItem.id)

package/package/components/apps/editor/appPolicy.js

@@ -1,4 +1,3 @@
-import { Sha256 } from '@aws-crypto/sha256-js';
 import { getCountInput } from '../components/display/dbtable/queries/count';
 import { getDeleteInput } from '../components/display/dbtable/queries/delete';
 import { getInsertInput } from '../components/display/dbtable/queries/insert';
@@ -34,13 +33,14 @@ export async function updatePolicy(app, currentPolicy) {
         if (c.type === 'dbexplorercomponent') {
             let nr = [];
             let config = c.configuration;
-            const dbType = config?.type?.selected;
-            let pg = config?.type?.configuration?.[dbType];
+            const dbType = (config?.type?.selected === 'datatable' ? 'postgresql' : config?.type?.selected);
+            let pg = config?.type?.configuration?.[config?.type?.selected];
             if (pg && dbType) {
-                const { table, resource, ducklake } = pg;
+                const { table, resource, ducklake, datatable } = pg;
                 const tableValue = table.value;
                 const dbPath = resource?.value.split('$res:')[1] ??
-                    ducklake?.value?.split('ducklake://')[1];
+                    ducklake?.value?.split('ducklake://')[1] ??
+                    datatable?.value;
                 const columnDefs = c.configuration.columnDefs.value;
                 const whereClause = c.configuration.whereClause.value;
                 if (tableValue && dbPath && columnDefs) {
@@ -177,6 +177,7 @@ async function hash(message) {
     }
     catch {
         //subtle not available, trying pure js
+        const { Sha256 } = await import('@aws-crypto/sha256-js');
         const hash = new Sha256();
         hash.update(message ?? '');
         const result = Array.from(await hash.digest());

package/package/components/apps/editor/appUtils.d.ts

@@ -12,7 +12,7 @@ type GridItemLocation = {
     subgridItemIndex: number;
     subgridKey: string;
 };
-interface GridItemWithLocation {
+export interface GridItemWithLocation {
     location: GridItemLocation;
     item: GridItem;
     parent: string | undefined;

package/package/components/apps/editor/commonAppUtils.d.ts

@@ -1,4 +1,4 @@
-import type { StaticAppInput } from "../inputType";
+import type { StaticAppInput } from '../inputType';
 export declare function collectStaticFields(fields: Record<string, StaticAppInput>): {
     [k: string]: any;
 };

package/package/components/apps/editor/commonAppUtils.js

@@ -1,4 +1,3 @@
-import { Sha256 } from '@aws-crypto/sha256-js';
 export function collectStaticFields(fields) {
     return Object.fromEntries(Object.entries(fields ?? {})
         .filter(([k, v]) => v.type == 'static')
@@ -16,6 +15,7 @@ export async function hash(message) {
     }
     catch {
         //subtle not available, trying pure js
+        const { Sha256 } = await import('@aws-crypto/sha256-js');
         const hash = new Sha256();
         hash.update(message ?? '');
         const result = Array.from(await hash.digest());

package/package/components/apps/editor/component/Component.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import ComponentInner from './ComponentInner.svelte';
 import ComponentRendered from './ComponentRendered.svelte';
 const { app } = getContext('AppViewerContext');
 let { component, selected, locked = false, render, fullHeight, overlapped = undefined, componentDraggedId = undefined } = $props();
-let everRender = $state(render);
+let everRender = $state(untrack(() => render));
 $effect(() => {
     render && !everRender && (everRender = true);
 });

package/package/components/apps/editor/component/components.d.ts

@@ -3781,7 +3781,7 @@ export declare const components: {
                     readonly type: "static";
                     readonly value: "yyyy-MM-dd";
                     readonly fieldType: "text";
-                    readonly markdownTooltip: "### Output format\nSee date-fns format for more information. By default, it is 'yyyy-MM-dd'\n\n| Format      | Result | Description |\n| ----------- | ----------- | ----------- |\n| dd \t\t\t\t| 01, 02, ..., 31 | Day of the month |\n| d \t\t\t\t| 1, 2, ..., 31 | Day of the month |\n| MM \t\t\t\t| 01, 02, ..., 12 | Month |\n| MMM \t\t\t\t| Jan, Feb, ..., Dec | Month |\n| MMMM \t\t\t\t| January, February, ..., December | Month |\n| yyyy \t\t\t\t| 2021, 2022, ... | Year |\n";
+                    readonly tooltip: "<b>Output format</b><br>See date-fns format for more information. Default: <code>yyyy-MM-dd</code><table class=\"mt-1 text-2xs\"><tr><th class=\"pr-2 text-left\">Format</th><th class=\"pr-2 text-left\">Result</th><th class=\"text-left\">Description</th></tr><tr><td><code>dd</code></td><td>01, 02, ..., 31</td><td>Day of the month</td></tr><tr><td><code>d</code></td><td>1, 2, ..., 31</td><td>Day of the month</td></tr><tr><td><code>MM</code></td><td>01, 02, ..., 12</td><td>Month</td></tr><tr><td><code>MMM</code></td><td>Jan, Feb, ..., Dec</td><td>Month</td></tr><tr><td><code>MMMM</code></td><td>January, ..., December</td><td>Month</td></tr><tr><td><code>yyyy</code></td><td>2021, 2022, ...</td><td>Year</td></tr></table>";
                     readonly documentationLink: "https://date-fns.org/v2.30.0/docs/format";
                     readonly placeholder: "yyyy-MM-dd";
                 };
@@ -3832,7 +3832,7 @@ export declare const components: {
                     readonly fieldType: "text";
                     readonly documentationLink: "https://date-fns.org/v2.30.0/docs/format";
                     readonly placeholder: "dd.MM.yyyy HH:mm";
-                    readonly markdownTooltip: "### Output format\nSee date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'\n\n| Format      | Result | Description |\n| ----------- | ----------- | ----------- |\n| dd \t\t\t\t| 01, 02, ..., 31 | Day of the month |\n| d \t\t\t\t| 1, 2, ..., 31 | Day of the month |\n| MM \t\t\t\t| 01, 02, ..., 12 | Month |\n| MMM \t\t\t\t| Jan, Feb, ..., Dec | Month |\n| MMMM \t\t\t\t| January, February, ..., December | Month |\n| yyyy \t\t\t\t| 2021, 2022, ... | Year |\n| HH \t\t\t\t| 00, 01, ..., 23 | Hours |\n| mm \t\t\t\t| 00, 01, ..., 59 | Minutes |\n| ss \t\t\t\t| 00, 01, ..., 59 | Seconds |\n\t\t\t\t\t";
+                    readonly tooltip: "<b>Output format</b><br>See date-fns format for more information. Default: <code>dd.MM.yyyy HH:mm</code><table class=\"mt-1 text-2xs\"><tr><th class=\"pr-2 text-left\">Format</th><th class=\"pr-2 text-left\">Result</th><th class=\"text-left\">Description</th></tr><tr><td><code>dd</code></td><td>01, 02, ..., 31</td><td>Day of the month</td></tr><tr><td><code>d</code></td><td>1, 2, ..., 31</td><td>Day of the month</td></tr><tr><td><code>MM</code></td><td>01, 02, ..., 12</td><td>Month</td></tr><tr><td><code>MMM</code></td><td>Jan, Feb, ..., Dec</td><td>Month</td></tr><tr><td><code>MMMM</code></td><td>January, ..., December</td><td>Month</td></tr><tr><td><code>yyyy</code></td><td>2021, 2022, ...</td><td>Year</td></tr><tr><td><code>HH</code></td><td>00, 01, ..., 23</td><td>Hours</td></tr><tr><td><code>mm</code></td><td>00, 01, ..., 59</td><td>Minutes</td></tr><tr><td><code>ss</code></td><td>00, 01, ..., 59</td><td>Seconds</td></tr></table>";
                 };
                 readonly defaultValue: {
                     readonly type: "static";
@@ -4835,6 +4835,7 @@ export declare const components: {
                         readonly bigquery: "BigQuery";
                         readonly snowflake_oauth: "Snowflake OAuth";
                         readonly ducklake: "Ducklake";
+                        readonly datatable: "Data table";
                     };
                     readonly configuration: {
                         readonly postgresql: {
@@ -4856,6 +4857,7 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly selectOptions: readonly [];
                                 readonly value: undefined;
+                                readonly allowTypeChange: false;
                             };
                         };
                         readonly ms_sql_server: {
@@ -4866,6 +4868,7 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly selectOptions: readonly [];
                                 readonly value: undefined;
+                                readonly allowTypeChange: false;
                             };
                         };
                         readonly snowflake: {
@@ -4876,6 +4879,7 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly selectOptions: readonly [];
                                 readonly value: undefined;
+                                readonly allowTypeChange: false;
                             };
                         };
                         readonly bigquery: {
@@ -4886,6 +4890,7 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly selectOptions: readonly [];
                                 readonly value: undefined;
+                                readonly allowTypeChange: false;
                             };
                         };
                         readonly ducklake: {
@@ -4896,6 +4901,18 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly selectOptions: readonly [];
                                 readonly value: undefined;
+                                readonly allowTypeChange: false;
+                            };
+                        };
+                        readonly datatable: {
+                            readonly datatable: StaticAppInput;
+                            readonly table: {
+                                readonly fieldType: "select";
+                                readonly subFieldType: "db-table";
+                                readonly type: "static";
+                                readonly selectOptions: readonly [];
+                                readonly value: undefined;
+                                readonly allowTypeChange: false;
                             };
                         };
                     };

package/package/components/apps/editor/component/components.js

@@ -2494,18 +2494,7 @@ This is a paragraph.
                     type: 'static',
                     value: 'yyyy-MM-dd',
                     fieldType: 'text',
-                    markdownTooltip: `### Output format
-See date-fns format for more information. By default, it is 'yyyy-MM-dd'
-
-| Format      | Result | Description |
-| ----------- | ----------- | ----------- |
-| dd 				| 01, 02, ..., 31 | Day of the month |
-| d 				| 1, 2, ..., 31 | Day of the month |
-| MM 				| 01, 02, ..., 12 | Month |
-| MMM 				| Jan, Feb, ..., Dec | Month |
-| MMMM 				| January, February, ..., December | Month |
-| yyyy 				| 2021, 2022, ... | Year |
-`,
+                    tooltip: `<b>Output format</b><br>See date-fns format for more information. Default: <code>yyyy-MM-dd</code><table class="mt-1 text-2xs"><tr><th class="pr-2 text-left">Format</th><th class="pr-2 text-left">Result</th><th class="text-left">Description</th></tr><tr><td><code>dd</code></td><td>01, 02, ..., 31</td><td>Day of the month</td></tr><tr><td><code>d</code></td><td>1, 2, ..., 31</td><td>Day of the month</td></tr><tr><td><code>MM</code></td><td>01, 02, ..., 12</td><td>Month</td></tr><tr><td><code>MMM</code></td><td>Jan, Feb, ..., Dec</td><td>Month</td></tr><tr><td><code>MMMM</code></td><td>January, ..., December</td><td>Month</td></tr><tr><td><code>yyyy</code></td><td>2021, 2022, ...</td><td>Year</td></tr></table>`,
                     documentationLink: 'https://date-fns.org/v2.30.0/docs/format',
                     placeholder: 'yyyy-MM-dd'
                 },
@@ -2553,21 +2542,7 @@ See date-fns format for more information. By default, it is 'yyyy-MM-dd'
                     fieldType: 'text',
                     documentationLink: 'https://date-fns.org/v2.30.0/docs/format',
                     placeholder: 'dd.MM.yyyy HH:mm',
-                    markdownTooltip: `### Output format
-See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
-
-| Format      | Result | Description |
-| ----------- | ----------- | ----------- |
-| dd 				| 01, 02, ..., 31 | Day of the month |
-| d 				| 1, 2, ..., 31 | Day of the month |
-| MM 				| 01, 02, ..., 12 | Month |
-| MMM 				| Jan, Feb, ..., Dec | Month |
-| MMMM 				| January, February, ..., December | Month |
-| yyyy 				| 2021, 2022, ... | Year |
-| HH 				| 00, 01, ..., 23 | Hours |
-| mm 				| 00, 01, ..., 59 | Minutes |
-| ss 				| 00, 01, ..., 59 | Seconds |
-					`
+                    tooltip: `<b>Output format</b><br>See date-fns format for more information. Default: <code>dd.MM.yyyy HH:mm</code><table class="mt-1 text-2xs"><tr><th class="pr-2 text-left">Format</th><th class="pr-2 text-left">Result</th><th class="text-left">Description</th></tr><tr><td><code>dd</code></td><td>01, 02, ..., 31</td><td>Day of the month</td></tr><tr><td><code>d</code></td><td>1, 2, ..., 31</td><td>Day of the month</td></tr><tr><td><code>MM</code></td><td>01, 02, ..., 12</td><td>Month</td></tr><tr><td><code>MMM</code></td><td>Jan, Feb, ..., Dec</td><td>Month</td></tr><tr><td><code>MMMM</code></td><td>January, ..., December</td><td>Month</td></tr><tr><td><code>yyyy</code></td><td>2021, 2022, ...</td><td>Year</td></tr><tr><td><code>HH</code></td><td>00, 01, ..., 23</td><td>Hours</td></tr><tr><td><code>mm</code></td><td>00, 01, ..., 59</td><td>Minutes</td></tr><tr><td><code>ss</code></td><td>00, 01, ..., 59</td><td>Seconds</td></tr></table>`
                 },
                 defaultValue: {
                     type: 'static',
@@ -3547,7 +3522,8 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                         snowflake: 'Snowflake',
                         bigquery: 'BigQuery',
                         snowflake_oauth: 'Snowflake OAuth',
-                        ducklake: 'Ducklake'
+                        ducklake: 'Ducklake',
+                        datatable: 'Data table'
                     },
                     configuration: {
                         postgresql: {
@@ -3572,14 +3548,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 type: 'static',
                                 fieldType: 'resource',
                                 subFieldType: 'mysql',
-                                value: ''
+                                value: '',
+                                allowTypeChange: false
                             },
                             table: {
                                 fieldType: 'select',
                                 subFieldType: 'db-table',
                                 type: 'static',
                                 selectOptions: [],
-                                value: undefined
+                                value: undefined,
+                                allowTypeChange: false
                             }
                         },
                         ms_sql_server: {
@@ -3587,14 +3565,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 type: 'static',
                                 fieldType: 'resource',
                                 subFieldType: 'ms_sql_server',
-                                value: ''
+                                value: '',
+                                allowTypeChange: false
                             },
                             table: {
                                 fieldType: 'select',
                                 subFieldType: 'db-table',
                                 type: 'static',
                                 selectOptions: [],
-                                value: undefined
+                                value: undefined,
+                                allowTypeChange: false
                             }
                         },
                         snowflake: {
@@ -3602,14 +3582,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 type: 'static',
                                 fieldType: 'resource',
                                 subFieldType: 'snowflake',
-                                value: ''
+                                value: '',
+                                allowTypeChange: false
                             },
                             table: {
                                 fieldType: 'select',
                                 subFieldType: 'db-table',
                                 type: 'static',
                                 selectOptions: [],
-                                value: undefined
+                                value: undefined,
+                                allowTypeChange: false
                             }
                         },
                         bigquery: {
@@ -3617,14 +3599,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 type: 'static',
                                 fieldType: 'resource',
                                 subFieldType: 'bigquery',
-                                value: ''
+                                value: '',
+                                allowTypeChange: false
                             },
                             table: {
                                 fieldType: 'select',
                                 subFieldType: 'db-table',
                                 type: 'static',
                                 selectOptions: [],
-                                value: undefined
+                                value: undefined,
+                                allowTypeChange: false
                             }
                         },
                         ducklake: {
@@ -3632,14 +3616,33 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 type: 'static',
                                 fieldType: 'ducklake',
                                 subFieldType: 'ducklake',
-                                value: ''
+                                value: '',
+                                allowTypeChange: false
+                            },
+                            table: {
+                                fieldType: 'select',
+                                subFieldType: 'db-table',
+                                type: 'static',
+                                selectOptions: [],
+                                value: undefined,
+                                allowTypeChange: false
+                            }
+                        },
+                        datatable: {
+                            datatable: {
+                                type: 'static',
+                                fieldType: 'datatable',
+                                subFieldType: 'datatable',
+                                value: '',
+                                allowTypeChange: false
                             },
                             table: {
                                 fieldType: 'select',
                                 subFieldType: 'db-table',
                                 type: 'static',
                                 selectOptions: [],
-                                value: undefined
+                                value: undefined,
+                                allowTypeChange: false
                             }
                         }
                     }
@@ -3649,7 +3652,8 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                     fieldType: 'array',
                     subFieldType: 'db-explorer',
                     value: [],
-                    loading: false
+                    loading: false,
+                    allowTypeChange: false
                 },
                 rowIdCol: {
                     type: 'static',

package/package/components/apps/editor/componentsPanel/CssHelperPanel.svelte

@@ -55,7 +55,7 @@ const entries = [
     }))
 ];
 entries.sort((a, b) => (b.order ?? 0) - (a.order ?? 0) + a.name.localeCompare(b.name));
-let search = '';
+let search = $state('');
 </script>
 
 <div class="p-2">
@@ -77,12 +77,15 @@ let search = '';
 					}
 				}}
 			>
-				<div slot="titleSlot" class="flex items-center">
-					<svelte:component this={icon} size={18} />
-					<span class="ml-1">
-						{name}
-					</span>
-				</div>
+				{#snippet titleSlot()}
+								{@const SvelteComponent = icon}
+				<div  class="flex items-center">
+						<SvelteComponent size={18} />
+						<span class="ml-1">
+							{name}
+						</span>
+					</div>
+							{/snippet}
 				{#if description}
 					<div class="py-2 text-xs text-gray-500">{description}</div>
 				{/if}

package/package/components/apps/editor/componentsPanel/CssHelperPanel.svelte.d.ts

@@ -15,6 +15,6 @@ declare const CssHelperPanel: $$__sveltets_2_IsomorphicComponent<Record<string,
     insertSelector: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type CssHelperPanel = InstanceType<typeof CssHelperPanel>;
 export default CssHelperPanel;

package/package/components/apps/editor/componentsPanel/CssProperty.svelte

@@ -16,7 +16,7 @@ import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
 import Popover from '../../../Popover.svelte';
 import { tailwindClasses } from './tailwindUtils';
 import { deepEqual } from 'fast-equals';
-let { name, value = $bindable({}), forceStyle = false, forceClass = false, quickStyleProperties = undefined, componentType = undefined, tooltip = undefined, shouldDisplayLeft = false, shouldDisplayRight = false, overriden = false, overridding = false, wmClass = undefined } = $props();
+let { name, value = $bindable(), forceStyle = false, forceClass = false, quickStyleProperties = undefined, componentType = undefined, tooltip = undefined, shouldDisplayLeft = false, shouldDisplayRight = false, overriden = false, overridding = false, wmClass = undefined } = $props();
 const dispatch = createEventDispatcher();
 let isQuickMenuOpen = $state(false);
 let prevValue = structuredClone($state.snapshot(value));
@@ -27,6 +27,8 @@ $effect(() => {
     dispatch('change', value);
 });
 function toggleQuickMenu() {
+    if (!value)
+        return;
     try {
         if (!value.style) {
             value.style = '';

package/package/components/apps/editor/componentsPanel/CustomComponentsList.svelte

@@ -9,8 +9,8 @@ import CustomComponentRow from './CustomComponentRow.svelte';
 import Skeleton from '../../../common/skeleton/Skeleton.svelte';
 import Toggle from '../../../Toggle.svelte';
 import { createEventDispatcher } from 'svelte';
-let customcomponents = [];
-let loading = false;
+let customcomponents = $state([]);
+let loading = $state(false);
 async function getCustomComponents() {
     loading = true;
     customcomponents = await ResourceService.listResourceNames({
@@ -34,7 +34,7 @@ async function addCustomComponent(nameField) {
                         }
                     },
                     name: nameField,
-                    js: await files[0].text()
+                    js: await files?.[0]?.text?.()
                 }
             }
         });
@@ -48,10 +48,10 @@ async function addCustomComponent(nameField) {
     getCustomComponents();
     nameField = '';
 }
-let nameField = '';
-let reactVersion = '18.2.0';
-let files;
-let useReact = true;
+let nameField = $state('');
+let reactVersion = $state('18.2.0');
+let files = $state();
+let useReact = $state(true);
 getCustomComponents();
 </script>
 

package/package/components/apps/editor/componentsPanel/CustomComponentsList.svelte.d.ts

@@ -15,6 +15,6 @@ declare const CustomComponentsList: $$__sveltets_2_IsomorphicComponent<Record<st
     reload: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type CustomComponentsList = InstanceType<typeof CustomComponentsList>;
 export default CustomComponentsList;

package/package/components/apps/editor/componentsPanel/NameEditor.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import Button from '../../../common/button/Button.svelte';
 import Popover from '../../../meltComponents/Popover.svelte';
 import { Pen } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 let { kind, row } = $props();
-let editedName = $state(row.name);
+let editedName = $state(untrack(() => row).name);
 const dispatch = createEventDispatcher();
 function onkeydown(e) {
     if (e.key === 'Enter') {