windmill-components 1.511.1 → 1.522.0

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

@@ -9,18 +9,17 @@ export var ColumnIdentity;
     ColumnIdentity["Always"] = "Always";
     ColumnIdentity["No"] = "No";
 })(ColumnIdentity || (ColumnIdentity = {}));
-export async function loadTableMetaData(resource, workspace, table, resourceType) {
-    if (!resource || !table || !workspace) {
+export async function loadTableMetaData(input, workspace, table) {
+    if (!input || !table || !workspace)
         return undefined;
-    }
+    let language = input.type == 'ducklake' ? 'duckdb' : getLanguageByResourceType(input.resourceType);
+    let content = await makeLoadTableMetaDataQuery(input, workspace, table);
     const job = await JobService.runScriptPreview({
         workspace: workspace,
         requestBody: {
-            language: getLanguageByResourceType(resourceType),
-            content: await makeLoadTableMetaDataQuery(resource, workspace, table, resourceType),
-            args: {
-                database: resource
-            }
+            language,
+            content,
+            args: input.type === 'database' ? { database: '$res:' + input.resourcePath } : {}
         }
     });
     const maxRetries = 8;
@@ -34,7 +33,7 @@ export async function loadTableMetaData(resource, workspace, table, resourceType
             }));
             if (testResult.success) {
                 attempts = maxRetries;
-                if (resourceType === 'ms_sql_server') {
+                if (input.type === 'database' && input.resourceType === 'ms_sql_server') {
                     return testResult.result[0].map(lowercaseKeys);
                 }
                 else {
@@ -52,22 +51,20 @@ export async function loadTableMetaData(resource, workspace, table, resourceType
     console.error('Failed to load table metadata after maximum retries.');
     return undefined;
 }
-export async function loadAllTablesMetaData(resource, workspace, resourceType) {
-    if (!resource || !workspace) {
+export async function loadAllTablesMetaData(workspace, input) {
+    if (!input || !workspace)
         return undefined;
-    }
+    let language = input.type == 'ducklake' ? 'duckdb' : getLanguageByResourceType(input.resourceType);
     try {
         let result = (await runScriptAndPollResult({
             workspace: workspace,
             requestBody: {
-                language: getLanguageByResourceType(resourceType),
-                content: await makeLoadTableMetaDataQuery(resource, workspace, undefined, resourceType),
-                args: {
-                    database: resource
-                }
+                language,
+                content: await makeLoadTableMetaDataQuery(input, workspace, undefined),
+                args: input.type === 'database' ? { database: '$res:' + input.resourcePath } : {}
             }
         }));
-        if (resourceType === 'ms_sql_server') {
+        if (input.type === 'database' && input.resourceType === 'ms_sql_server') {
             result = result[0];
         }
         const map = {};
@@ -85,11 +82,25 @@ export async function loadAllTablesMetaData(resource, workspace, resourceType) {
         throw new Error('Error loading all tables metadata: ' + e);
     }
 }
-async function makeLoadTableMetaDataQuery(resource, workspace, table, resourceType) {
-    if (resourceType === 'mysql') {
+async function makeLoadTableMetaDataQuery(input, workspace, table) {
+    if (input.type === 'ducklake') {
+        return `ATTACH 'ducklake://${input.ducklake}' AS __ducklake__;
+		SELECT
+			COLUMN_NAME as field,
+			DATA_TYPE as DataType,
+			COLUMN_DEFAULT as DefaultValue,
+			false as IsPrimaryKey,
+			false as IsIdentity,
+			IS_NULLABLE as IsNullable,
+			false as IsEnum,
+			TABLE_NAME as table_name
+		FROM information_schema.columns c
+		WHERE table_catalog = '__ducklake__' AND table_schema = current_schema()`;
+    }
+    else if (input.resourceType === 'mysql') {
         const resourceObj = (await ResourceService.getResourceValue({
             workspace,
-            path: resource.split(':')[1]
+            path: input.resourcePath
         }));
         return `
 	SELECT 
@@ -116,7 +127,7 @@ async function makeLoadTableMetaDataQuery(resource, workspace, table, resourceTy
 			ORDINAL_POSITION;
 	`;
     }
-    else if (resourceType === 'postgresql') {
+    else if (input.resourceType === 'postgresql') {
         return `
 	SELECT 
 		a.attname as field,
@@ -158,7 +169,7 @@ async function makeLoadTableMetaDataQuery(resource, workspace, table, resourceTy
 	
 	`;
     }
-    else if (resourceType === 'ms_sql_server') {
+    else if (input.resourceType === 'ms_sql_server') {
         return `
 		SELECT 
     COLUMN_NAME as field,
@@ -181,7 +192,8 @@ ORDER BY
     ORDINAL_POSITION;
 	`;
     }
-    else if (resourceType === 'snowflake' || resourceType === 'snowflake_oauth') {
+    else if (input.resourceType === 'snowflake' ||
+        input.resourceType === 'snowflake_oauth') {
         return `
 		select COLUMN_NAME as field,
 		DATA_TYPE as DataType,
@@ -201,7 +213,7 @@ ORDER BY
 	order by ORDINAL_POSITION;
 	`;
     }
-    else if (resourceType === 'bigquery') {
+    else if (input.resourceType === 'bigquery') {
         // TODO: find a solution for this (query uses hardcoded dataset name)
         if (!table)
             throw new Error('Table name is required for BigQuery');
@@ -223,7 +235,7 @@ WHERE
 order by c.ORDINAL_POSITION;`;
     }
     else {
-        throw new Error('Unsupported database type:' + resourceType);
+        throw new Error('Unsupported database type:' + input.resourceType);
     }
 }
 export function resourceTypeToLang(rt) {
@@ -538,7 +550,14 @@ export function formatSchema(dbSchema) {
 export function formatGraphqlSchema(schema) {
     return printSchema(buildClientSchema(schema));
 }
-export const dbTypes = ['mysql', 'ms_sql_server', 'postgresql', 'snowflake', 'bigquery'];
+export const dbTypes = [
+    'mysql',
+    'ms_sql_server',
+    'postgresql',
+    'snowflake',
+    'bigquery',
+    'duckdb'
+];
 export const isDbType = (str) => !!str && dbTypes.includes(str);
 export function buildVisibleFieldList(columnDefs, dbType) {
     // Filter out hidden columns to avoid counting the wrong number of rows
@@ -556,6 +575,8 @@ export function buildVisibleFieldList(columnDefs, dbType) {
                 return `"${column?.field}"`; // Snowflake uses double quotes for identifiers
             case 'bigquery':
                 return `\`${column?.field}\``; // BigQuery uses backticks
+            case 'duckdb':
+                return `"${column?.field}"`; // DuckDB uses double quotes for identifiers
             default:
                 throw new Error('Unsupported database type');
         }
@@ -568,7 +589,8 @@ export function getLanguageByResourceType(name) {
         ms_sql_server: 'mssql',
         snowflake: 'snowflake',
         snowflake_oauth: 'snowflake',
-        bigquery: 'bigquery'
+        bigquery: 'bigquery',
+        duckdb: 'duckdb'
     };
     return language[name];
 }
@@ -586,6 +608,8 @@ export function buildParameters(columns, databaseType) {
                 return `-- ? ${column.field} (${column.datatype.split('(')[0]})`;
             case 'bigquery':
                 return `-- @${column.field} (${column.datatype.split('(')[0]})`;
+            case 'duckdb':
+                return `-- $${column.field} (${column.datatype.split('(')[0]})`;
         }
     })
         .join('\n');

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
-import { GridApi, createGrid } from 'ag-grid-community';
+import { createGrid } from 'ag-grid-community';
 import { sendUserToast } from '../../../../../utils';
 import { createEventDispatcher, getContext, mount, unmount, untrack } from 'svelte';
 import { deepEqual } from 'fast-equals';

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

@@ -4,6 +4,7 @@ import { initConfig, initOutput } from '../../../editor/appUtils';
 import { components } from '../../../editor/component';
 import ResolveConfig from '../../helpers/ResolveConfig.svelte';
 import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
 import './theme/windmill-theme.css';
 import { initCss } from '../../../utils';
 import ResolveStyle from '../../helpers/ResolveStyle.svelte';

package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte.d.ts

@@ -2,6 +2,7 @@ import type { AppInput } from '../../../inputType';
 import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
 import { type TableAction } from '../../../editor/component';
 import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
 import './theme/windmill-theme.css';
 interface Props {
     id: string;

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
-import { GridApi, createGrid } from 'ag-grid-community';
+import { createGrid } from 'ag-grid-community';
 import { isObject, sendUserToast } from '../../../../../utils';
 import { getContext, mount, onDestroy, unmount, untrack } from 'svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
@@ -10,6 +10,7 @@ import { deepEqual } from 'fast-equals';
 import RefreshButton from '../../helpers/RefreshButton.svelte';
 import SyncColumnDefs from './SyncColumnDefs.svelte';
 import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
 import './theme/windmill-theme.css';
 import { ChevronLeft, ChevronRight, Download, Loader2, SkipBack, SkipForward } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
@@ -40,9 +41,9 @@ function resetValues() {
 }
 let uid = Math.random().toString(36).substring(7);
 let prevUid = undefined;
-let value = $state(Array.isArray(result)
+let value = $state(untrack(() => Array.isArray(result)
     ? result.map((x, i) => ({ ...x, __index: i.toString() + '-' + uid }))
-    : [{ error: 'input was not an array' }]);
+    : [{ error: 'input was not an array' }]));
 let loaded = $state(false);
 async function setValues() {
     value = Array.isArray(result)
@@ -456,7 +457,7 @@ $effect(() => {
         untrack(() => clearActionOrder());
 });
 $effect(() => {
-    api && resolvedConfig && untrack(() => updateOptions());
+    api && resolvedConfig && updateOptions();
 });
 $effect(() => {
     value && untrack(() => updateValue());

package/package/components/apps/components/display/table/AppAggridTable.svelte.d.ts

@@ -2,6 +2,7 @@ import type { AppInput } from '../../../inputType';
 import type { ComponentCustomCSS, RichConfiguration, RichConfigurations } from '../../../types';
 import { type TableAction } from '../../../editor/component';
 import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
 import './theme/windmill-theme.css';
 interface Props {
     id: string;

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

@@ -79,13 +79,13 @@ export function transformColumnDefs({ columnDefs, actions, customActionsHeader,
     if (onDelete) {
         r.push({
             field: 'delete',
-            headerName: 'Delete',
+            headerName: '',
             cellRenderer: cellRendererFactory((c, p) => {
                 const btnComponent = mount(Button, {
                     target: c.eGui,
                     props: {
-                        btnClasses: 'w-12',
-                        wrapperClasses: 'flex justify-end items-center h-full',
+                        btnClasses: 'w-12 bg-transparent rounded-none h-full hover:bg-red-500',
+                        wrapperClasses: 'flex justify-center items-center absolute inset-0 h-full',
                         color: 'light',
                         size: 'sm',
                         variant: 'contained',
@@ -111,7 +111,10 @@ export function transformColumnDefs({ columnDefs, actions, customActionsHeader,
             lockPosition: 'right',
             editable: false,
             flex: 0,
-            width: 100
+            width: 50,
+            minWidth: 50,
+            resizable: false,
+            pinned: 'right'
         });
     }
     if (actions?.length) {

package/package/components/apps/components/helpers/HiddenComponent.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext, onMount } from 'svelte';
+<script lang="ts">import { getContext, onMount, untrack } from 'svelte';
 import { initOutput } from '../../editor/appUtils';
 import RunnableComponent from './RunnableComponent.svelte';
 import InitializeComponent from './InitializeComponent.svelte';
@@ -16,7 +16,7 @@ onMount(() => {
     };
 });
 let outputs = initOutput($worldStore, id, {
-    result: result,
+    result: untrack(() => result),
     loading: false,
     jobId: undefined
 });

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -16,7 +16,7 @@ import { computeWorkspaceS3FileInputPolicy } from '../../editor/appUtilsS3';
 import { executeRunnable } from './executeRunnable';
 import SchemaForm from '../../../SchemaForm.svelte';
 import JobLoader, {} from '../../../JobLoader.svelte';
-let { id, fields, runnable, transformer, extraQueryParams = {}, autoRefresh = true, result = $bindable(undefined), forceSchemaDisplay = false, wrapperClass = '', wrapperStyle = '', render, outputs, extraKey = '', initializing = false, recomputeOnInputChanged = true, loading = $bindable(false), refreshOnStart = false, recomputableByRefreshButton, errorHandledByComponent = false, hideRefreshButton = false, hasChildrens, allowConcurentRequests = false, noInitialize = false, overrideCallback = undefined, overrideAutoRefresh = false, replaceCallback = false, children } = $props();
+let { id, fields, runnable, transformer, extraQueryParams = {}, autoRefresh = true, result = $bindable(undefined), result_stream = $bindable(undefined), forceSchemaDisplay = false, wrapperClass = '', wrapperStyle = '', render, outputs, extraKey = '', initializing = false, recomputeOnInputChanged = true, loading = $bindable(false), refreshOnStart = false, recomputableByRefreshButton, errorHandledByComponent = false, hideRefreshButton = false, hasChildrens, allowConcurentRequests = false, noInitialize = false, overrideCallback = undefined, overrideAutoRefresh = false, replaceCallback = false, children } = $props();
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, jobsById, noBackend, errorByComponent, mode, stateId, state: stateStore, componentControl, initialized, selectedComponent, app, connectingInput, bgRuns, recomputeAllContext } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 const iterContext = getContext('ListWrapperContext');
@@ -74,6 +74,9 @@ function genCallbacks({ onDone, onCancel, onError }) {
             loading = false;
             dispatch('done', { id, result });
         },
+        resultStreamUpdate({ id, result_stream: nresult_stream }) {
+            setResult(nresult_stream, id);
+        },
         cancel({ id }) {
             onCancel?.();
             let jobId = id;

package/package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -11,6 +11,7 @@ interface Props {
     extraQueryParams?: Record<string, any>;
     autoRefresh?: boolean;
     result?: any;
+    result_stream?: string;
     forceSchemaDisplay?: boolean;
     wrapperClass?: string;
     wrapperStyle?: string;
@@ -93,6 +94,6 @@ declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<Props, {
         force_viewer_allow_user_resources?: Array<(string)>;
     }>;
     runComponent: (noToast?: boolean, inlineScriptOverride?: InlineScript, setRunnableJobEditorPanel?: boolean, dynamicArgsOverride?: Record<string, any>, callbacks?: RunnableCallback) => Promise<string | undefined>;
-}, "result" | "loading">;
+}, "result" | "loading" | "result_stream">;
 type RunnableComponent = InstanceType<typeof RunnableComponent>;
 export default RunnableComponent;

package/package/components/apps/components/inputs/AppS3FileInput.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 { initCss } from '../../utils';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
@@ -22,7 +22,7 @@ $componentControl[id] = {
 };
 let value = $state(undefined);
 const outputs = initOutput($worldStore, id, {
-    result: value ?? [],
+    result: untrack(() => value) ?? [],
     loading: false,
     jobId: undefined
 });

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

@@ -39,7 +39,7 @@ let css = $state(initCss($app.css?.conditionalwrapper, customCss));
 let selectedConditionIndex = 0;
 let currentNodeId = $state(getFirstNode(nodes)?.id ?? '');
 let outputs = initOutput($worldStore, id, {
-    currentNodeId,
+    currentNodeId: untrack(() => currentNodeId),
     currentNodeIndex: selectedConditionIndex
 });
 $effect.pre(() => {

package/package/components/apps/components/layout/AppStepper.svelte

@@ -20,7 +20,7 @@ let selected = $state(tabs[0]);
 let tabHeight = $state(0);
 let footerHeight = $state(0);
 let runnableComponent = $state();
-let selectedIndex = $state(tabs?.indexOf(selected) ?? -1);
+let selectedIndex = $state(tabs?.indexOf(untrack(() => selected)) ?? -1);
 let maxReachedIndex = $state(-1);
 let statusByStep = $state([]);
 let debugMode = false;

package/package/components/apps/components/layout/AppTabs.svelte

@@ -19,7 +19,7 @@ $effect.pre(() => {
 });
 const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl, connectingInput, runnableComponents } = getContext('AppViewerContext');
 let selected = $state(tabs[0]);
-let selectedIndex = $state(tabs?.indexOf(selected) ?? -1);
+let selectedIndex = $state(tabs?.indexOf(untrack(() => selected)) ?? -1);
 let css = $state(initCss($app.css?.tabscomponent, customCss));
 let tabHeight = $state(0);
 let outputs = initOutput($worldStore, id, {

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -4,7 +4,7 @@ import { Alert, Drawer, DrawerContent, UndoRedo } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import Path from '../../Path.svelte';
 import Toggle from '../../Toggle.svelte';
-import { AppService, DraftService } from '../../../gen';
+import { AppService, DraftService, SettingService } from '../../../gen';
 import { redo, undo } from '../../../history.svelte';
 import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
 import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, Save, Smartphone, FileClock, Sun, Moon, SunMoon, Zap, Globe, AlertTriangle } from 'lucide-svelte';
@@ -739,6 +739,16 @@ setTheme($app?.darkMode);
 let customPath = $state(savedApp?.custom_path);
 let dirtyCustomPath = $state(false);
 let customPathError = $state('');
+let globalWorkspacedRoute = $state(false);
+async function loadGlobalWorkspacedRouteSetting() {
+    try {
+        const setting = await SettingService.getGlobal({ key: 'app_workspaced_route' });
+        globalWorkspacedRoute = setting ?? false;
+    }
+    catch (error) {
+        globalWorkspacedRoute = false;
+    }
+}
 async function appExists(customPath) {
     return await AppService.customPathExists({
         workspace: $workspaceStore,
@@ -779,12 +789,13 @@ $effect(() => {
     saveDrawerOpen && untrack(() => compareVersions());
 });
 let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
-let fullCustomUrl = $derived(`${window.location.origin}${base}/a/${isCloudHosted() ? $workspaceStore + '/' : ''}${customPath}`);
+let fullCustomUrl = $derived(`${window.location.origin}${base}/a/${isCloudHosted() || globalWorkspacedRoute ? $workspaceStore + '/' : ''}${customPath}`);
 $effect(() => {
     ;
     [customPath];
     untrack(() => customPath !== undefined && validateCustomPath(customPath));
 });
+loadGlobalWorkspacedRouteSetting();
 </script>
 
 <svelte:window onkeydown={onKeyDown} />

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

@@ -80,6 +80,7 @@ onMount(() => {
 			{@const left = (item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
 
 			<div
+				id={`wm-${item.id}-grid-item`}
 				class="svlt-grid-item"
 				style="width: {width}px; height:{height}px; {onTop
 					? 'z-index: 1000;'

package/package/components/apps/editor/RunnableJobPanelInner.svelte

@@ -32,11 +32,12 @@ let resultDrawerOpen = $state(false);
 			<div class="break-words relative h-full px-1">
 				<DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} />
 			</div>
-		{:else if testJob != undefined && 'result' in testJob && testJob.result != undefined}
+		{:else if testJob != undefined && (testJob.type == 'CompletedJob' || testJob.result_stream)}
 			<div class="break-words relative h-full px-1">
 				<DisplayResult
 					bind:drawerOpen={resultDrawerOpen}
 					workspaceId={testJob?.workspace_id}
+					result_stream={testJob?.result_stream}
 					jobId={testJob?.id}
 					result={testJob.result}
 					language={testJob?.language}

package/package/components/apps/editor/contextPanel/components/IdEditor.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">import { allItems } from '../../../utils';
 import { Pencil } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+import { getContext } from 'svelte';
 import IdEditorInput from '../../../../IdEditorInput.svelte';
 import Popover from '../../../../meltComponents/Popover.svelte';
 const { app, selectedComponent } = getContext('AppViewerContext');
-let { id } = $props();
-const dispatch = createEventDispatcher();
+let { id, onChange, onClose } = $props();
 let reservedIds = $derived(allItems($app.grid, $app.subgrids).map((item) => item.id));
 </script>
 
@@ -29,11 +28,12 @@ let reservedIds = $derived(allItems($app.grid, $app.subgrids).map((item) => item
 	{#snippet content({ close })}
 		<IdEditorInput
 			initialId={id}
-			on:close={() => close()}
-			on:save={(e) => {
-				dispatch('save', e.detail)
-				close()
+			{onClose}
+			onSave={(e) => {
+				onChange(e)
+				onClose?.()
 			}}
+			reservedPrefixes={['bg_', 'unused-']}
 			{reservedIds}
 		/>
 	{/snippet}

package/package/components/apps/editor/contextPanel/components/IdEditor.svelte.d.ts

@@ -1,23 +1,11 @@
 interface Props {
     id: string;
+    onChange: ({ oldId, newId }: {
+        oldId: string;
+        newId: string;
+    }) => void;
+    onClose?: () => void;
 }
-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 IdEditor: $$__sveltets_2_IsomorphicComponent<Props, {
-    save: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type IdEditor = InstanceType<typeof IdEditor>;
+declare const IdEditor: import("svelte").Component<Props, {}, "">;
+type IdEditor = ReturnType<typeof IdEditor>;
 export default IdEditor;

package/package/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -30,17 +30,17 @@ const idClass = {
     blue: 'bg-blue-500 text-white',
     indigo: 'bg-indigo-500 text-white'
 };
-function renameId(newId) {
+function renameId(oldId, newId) {
     const item = findGridItem($app, id);
     if (!item) {
         return;
     }
     item.data.id = newId;
     item.id = newId;
-    const oldSubgrids = Object.keys($app.subgrids ?? {}).filter((subgrid) => subgrid.startsWith(id + '-'));
+    const oldSubgrids = Object.keys($app.subgrids ?? {}).filter((subgrid) => subgrid.startsWith(oldId + '-'));
     oldSubgrids.forEach((subgrid) => {
         if ($app.subgrids) {
-            $app.subgrids[subgrid.replace(id, newId)] = $app.subgrids[subgrid];
+            $app.subgrids[subgrid.replace(oldId, newId)] = $app.subgrids[subgrid];
             delete $app.subgrids[subgrid];
         }
     });
@@ -52,11 +52,11 @@ function renameId(newId) {
             processRunnable(from, to, x);
         });
     }
-    propagateRename(id, newId);
+    propagateRename(oldId, newId);
     if (item?.data.type == 'tablecomponent') {
         for (let c of item.data.actionButtons) {
             let old = c.id;
-            c.id = c.id.replace(id + '_', newId + '_');
+            c.id = c.id.replace(oldId + '_', newId + '_');
             propagateRename(old, c.id);
         }
     }
@@ -67,14 +67,14 @@ function renameId(newId) {
         item?.data.type == 'aggridinfinitecomponentee') {
         for (let c of item.data.actions ?? []) {
             let old = c.id;
-            c.id = c.id.replace(id + '_', newId + '_');
+            c.id = c.id.replace(oldId + '_', newId + '_');
             propagateRename(old, c.id);
         }
     }
     if (item?.data.type === 'menucomponent') {
         for (let c of item.data.menuItems) {
             let old = c.id;
-            c.id = c.id.replace(id + '_', newId + '_');
+            c.id = c.id.replace(oldId + '_', newId + '_');
             propagateRename(old, c.id);
         }
     }
@@ -212,11 +212,7 @@ function processRunnable(from, to, runnable) {
 				</button>
 				{#if selectable && renamable && $selectedComponent?.includes(id)}
 					<div class="h-3">
-						<IdEditor
-							{id}
-							on:selected={() => ($selectedComponent = [id])}
-							on:save={({ detail }) => renameId(detail)}
-						/></div
+						<IdEditor {id} onChange={({ oldId, newId }) => renameId(oldId, newId)} /></div
 					>
 				{/if}
 			</div>

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte.d.ts

@@ -30,6 +30,6 @@ declare const InlineScriptEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     delete: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "name" | "fields" | "editor" | "inlineScript">;
+}, {}, {}, "name" | "fields" | "inlineScript" | "editor">;
 type InlineScriptEditor = InstanceType<typeof InlineScriptEditor>;
 export default InlineScriptEditor;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte.d.ts

@@ -26,6 +26,6 @@ declare const InlineScriptEditorDrawer: $$__sveltets_2_IsomorphicComponent<Props
     [evt: string]: CustomEvent<any>;
 }, {}, {
     openDrawer: () => void;
-}, "isOpen" | "inlineScript">;
+}, "inlineScript" | "isOpen">;
 type InlineScriptEditorDrawer = InstanceType<typeof InlineScriptEditorDrawer>;
 export default InlineScriptEditorDrawer;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte.d.ts

@@ -26,6 +26,6 @@ declare const InlineScriptRunnableByPath: $$__sveltets_2_IsomorphicComponent<Pro
     fork: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "fields" | "runnable">;
+}, {}, {}, "runnable" | "fields">;
 type InlineScriptRunnableByPath = InstanceType<typeof InlineScriptRunnableByPath>;
 export default InlineScriptRunnableByPath;

package/package/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte

@@ -23,7 +23,7 @@ const { debounced: debouncedNodes } = debounce(() => {
 }, 300);
 let selectedNode = $derived(nodes?.find((node) => node.id == $selectedNodeId));
 setContext('DecisionTreeEditor', { selectedNodeId });
-let sortedSelectedNextNodes = $derived(selectedNode?.next.sort((n1, n2) => n1.id.localeCompare(n2.id)));
+let sortedSelectedNextNodes = $derived([...(selectedNode?.next ?? [])].sort((n1, n2) => n1.id.localeCompare(n2.id)));
 </script>
 
 <Drawer bind:this={drawer} on:close={() => {}} on:open={() => {}} size="1200px">
@@ -104,8 +104,8 @@ let sortedSelectedNextNodes = $derived(selectedNode?.next.sort((n1, n2) => n1.id
 												<InputsSpecEditor
 													key={`condition-${selectedNode.id}-${index}`}
 													customTitle={index === 0
-														? 'Goes to the default branch'
-														: `${index > 0 ? 'Otherwise ' : ''}Goes to branch ${index}`}
+														? 'Goes to branch 1'
+														: `${index > 0 ? 'Otherwise g' : 'G'}oes to branch ${index + 1}`}
 													bind:componentInput={subNode.condition}
 													id={selectedNode.id}
 													userInputEnabled={false}

package/package/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte

@@ -140,9 +140,7 @@ function graphBuilder(decisionTreeNodes) {
                     position: { x: -1, y: -1 },
                     data: {
                         node: {
-                            label: positionRelativeToParent === 0
-                                ? 'Default branch'
-                                : `Branch ${positionRelativeToParent}`,
+                            label: `Branch ${(positionRelativeToParent ?? 0) + 1}`,
                             id: branchHeaderId,
                             allowed: undefined,
                             next: [],

package/package/components/assets/AssetsDropdownButton.svelte

@@ -131,7 +131,7 @@ $effect(() => {
 						</svelte:fragment>
 					</Popover>
 					<div class="flex flex-col flex-1">
-						<Tooltip class="select-none max-w-48 truncate" disablePopup={disableLiTooltip}>
+						<Tooltip class="select-none w-48 truncate" disablePopup={disableLiTooltip}>
 							{asset.path}
 							<svelte:fragment slot="text">
 								{asset.path}