windmill-components 1.537.1 → 1.542.5

package/package/components/flows/map/InsertModuleInner.svelte.d.ts

@@ -1,3 +1,11 @@
+interface Props {
+    stop?: boolean;
+    funcDesc?: string;
+    disableAi?: boolean;
+    kind?: 'script' | 'trigger' | 'preprocessor' | 'failure';
+    allowTrigger?: boolean;
+    scriptOnly?: boolean;
+}
 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;
@@ -11,14 +19,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<{
-    stop?: boolean;
-    funcDesc?: string;
-    disableAi?: boolean;
-    kind?: "script" | "trigger" | "preprocessor" | "failure";
-    allowTrigger?: boolean;
-    scriptOnly?: boolean;
-}, {
+declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<Props, {
     insert: CustomEvent<any>;
     new: CustomEvent<any>;
     pickScript: CustomEvent<any>;
@@ -26,6 +27,6 @@ declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<{
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "funcDesc">;
 type InsertModuleInner = InstanceType<typeof InsertModuleInner>;
 export default InsertModuleInner;

package/package/components/flows/propPicker/OutputPickerInner.svelte.d.ts

@@ -47,6 +47,6 @@ declare const OutputPickerInner: import("svelte").Component<Props, {
     getPreview: () => "job" | "mock" | undefined;
     getHistoryOpen: () => boolean;
     getSelectedJob: () => OutputViewerJob;
-}, "mock" | "isLoading">;
+}, "isLoading" | "mock">;
 type OutputPickerInner = ReturnType<typeof OutputPickerInner>;
 export default OutputPickerInner;

package/package/components/git_sync/DetectionFlow.svelte

@@ -55,7 +55,8 @@ async function handleSaveConnection() {
 						left: 'Sync mode',
 						leftTooltip: 'Changes will be committed directly to the branch',
 						right: 'Promotion mode',
-						rightTooltip: "Changes will be made to a new branch per deployed object (prefixed with 'wm_deploy/')"
+						rightTooltip:
+							"Changes will be made to a new branch per deployed object (prefixed with 'wm_deploy/')"
 					}}
 				/>
 
@@ -65,7 +66,8 @@ async function handleSaveConnection() {
 						bind:checked={repo.group_by_folder}
 						options={{
 							right: 'Group all changes from same folder in the same branch',
-							rightTooltip: 'Instead of creating a branch per object, Windmill will create a branch per folder containing objects being deployed.'
+							rightTooltip:
+								'Instead of creating a branch per object, Windmill will create a branch per folder containing objects being deployed.'
 						}}
 					/>
 				{/if}
@@ -75,12 +77,12 @@ async function handleSaveConnection() {
 			<div class="flex justify-start">
 				<Button
 					color="primary"
-					variant="border"
-					size="sm"
+					variant="contained"
+					size="lg"
 					onclick={handleDetect}
 					startIcon={{ icon: FileSearch }}
 				>
-					Check repo settings
+					Check repo settings to continue and save
 				</Button>
 			</div>
 		{:else if repo.detectionState === 'loading'}
@@ -111,7 +113,9 @@ async function handleSaveConnection() {
 			<!-- Display mode settings as prominent text -->
 			<div class="text-base">
 				{#if repo.use_individual_branch}
-					<div><span class="font-bold">Promotion:</span> Creating branches whose promotion target is main</div>
+					<div
+						><span class="font-bold">Promotion:</span> Creating branches whose promotion target is main</div
+					>
 					{#if repo.group_by_folder}
 						<div class="text-sm text-tertiary mt-1">Grouped by folder</div>
 					{/if}
@@ -122,11 +126,7 @@ async function handleSaveConnection() {
 
 			<!-- Initialize button -->
 			<div class="flex justify-start">
-				<Button
-					size="md"
-					onclick={handleInitialize}
-					startIcon={{ icon: Save }}
-				>
+				<Button size="md" onclick={handleInitialize} startIcon={{ icon: Save }}>
 					Initialize Git repository
 				</Button>
 			</div>
@@ -152,7 +152,9 @@ async function handleSaveConnection() {
 			<!-- Display mode settings as prominent text -->
 			<div class="text-base">
 				{#if repo.use_individual_branch}
-					<div><span class="font-bold">Promotion:</span> Creating branches whose promotion target is main</div>
+					<div
+						><span class="font-bold">Promotion:</span> Creating branches whose promotion target is main</div
+					>
 					{#if repo.group_by_folder}
 						<div class="text-sm text-tertiary mt-1">Grouped by folder</div>
 					{/if}
@@ -163,11 +165,7 @@ async function handleSaveConnection() {
 
 			<!-- Save connection button -->
 			<div class="flex justify-start">
-				<Button
-					size="md"
-					onclick={handleSaveConnection}
-					startIcon={{ icon: Save }}
-				>
+				<Button size="md" onclick={handleSaveConnection} startIcon={{ icon: Save }}>
 					Save connection
 				</Button>
 			</div>

package/package/components/git_sync/GitSyncContext.svelte.js

@@ -90,7 +90,7 @@ export function createGitSyncContext(workspace) {
             use_individual_branch: repo.use_individual_branch,
             group_by_folder: repo.group_by_folder,
             settings: repo.settings,
-            exclude_types_override: repo.exclude_types_override
+            exclude_types_override: repo.exclude_types_override,
         };
     }
     function addRepository() {

package/package/components/git_sync/GitSyncRepositoryCard.svelte

@@ -283,7 +283,6 @@ function handlePullSettings() {
 									{/snippet}
 								</GitSyncFilterSettings>
 							{/if}
-
 							{#if !repo.isUnsavedConnection}
 								<div class="flex justify-between items-start">
 									<!-- Display mode settings as prominent text -->

package/package/components/graph/graphBuilder.svelte.d.ts

@@ -30,9 +30,13 @@ export type GraphEventHandlers = {
             branch: number;
         };
         index: number;
-        kind: string;
+        kind?: string;
         inlineScript?: InlineScript;
         script?: PathScript;
+        flow?: {
+            path: string;
+            summary: string;
+        };
         isPreprocessor?: boolean;
     }) => void;
     deleteBranch: (detail: {

package/package/components/graph/renderers/edges/BaseEdge.svelte

@@ -146,7 +146,15 @@ let suspendStatus = $derived(data?.suspendStatus);
 	{/if}
 </EdgeLabel>
 
-<BaseEdge path={completeEdge} {markerEnd} class={$useDataflow ? 'hidden' : ''} />
+<BaseEdge
+	path={completeEdge}
+	{markerEnd}
+	class={$useDataflow ? 'hidden' : ''}
+	interactionWidth={0}
+	style={undefined}
+	label={undefined}
+	labelStyle={undefined}
+/>
 
 <style>
 	.edgeButtonContainer {

package/package/components/graph/renderers/edges/BaseEdge.svelte.d.ts

@@ -6,7 +6,10 @@ type $$ComponentProps = EdgeProps & {
     data: {
         insertable: boolean;
         sourceId: string;
-        branch: number | undefined;
+        branch: {
+            rootId: string;
+            branch: number;
+        } | undefined;
         targetId: string;
         moving: string | undefined;
         eventHandlers: GraphEventHandlers;

package/package/components/graph/renderers/nodes/BranchAllStart.svelte

@@ -29,9 +29,8 @@ let borderStatus = $derived(computeBorderStatus(data.branchIndex, 'branchall', d
 		{#if data.insertable}
 			<button
 				title="Delete branch"
-				class="z-50 absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] center-center text-primary
-	outline-[1px] outline outline-gray-700 bg-surface duration-0 hover:bg-red-400 hover:text-white
-	hover:border-red-700"
+				class="z-50 absolute -translate-y-[100%] top-1 -right-1 rounded-md p-1 center-center text-primary
+	bg-surface duration-0 hover:bg-red-400 hover:text-white shadow-md"
 				onclick={stopPropagation(
 					preventDefault(() => {
 						data.eventHandlers.deleteBranch(

package/package/components/graph/renderers/nodes/BranchOneStart.svelte

@@ -25,9 +25,8 @@ let borderStatus = $derived(computeBorderStatus(data.branchIndex + 1, 'branchone
 		{#if data.insertable}
 			<button
 				title="Delete branch"
-				class="z-50 absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] center-center text-primary
-	border-[1.5px] border-gray-700 bg-surface duration-0 hover:bg-red-400 hover:text-white
-	hover:border-red-700"
+				class="z-50 absolute -translate-y-[100%] top-1 -right-1 rounded-md p-1 center-center text-primary
+	bg-surface duration-0 hover:bg-red-400 hover:text-white shadow-md"
 				onclick={stopPropagation(
 					preventDefault(() => {
 						data.eventHandlers.deleteBranch(

package/package/components/graph/renderers/triggers/TriggerButton.svelte.d.ts

@@ -21,7 +21,7 @@ declare const TriggerButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_P
 }, {
     default: {};
 }>, {
-    click: MouseEvent;
+    click: PointerEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {

package/package/components/graph/renderers/triggers/TriggersBadge.svelte

@@ -23,6 +23,7 @@ const triggerTypeConfig = {
     websocket: { icon: Unplug, countKey: 'websocket_count' },
     postgres: { icon: Database, countKey: 'postgres_count' },
     kafka: { icon: KafkaIcon, countKey: 'kafka_count', disabled: !$enterpriseLicense },
+    default_email: { icon: Mail, countKey: 'default_email_count' },
     email: { icon: Mail, countKey: 'email_count' },
     nats: { icon: NatsIcon, countKey: 'nats_count', disabled: !$enterpriseLicense },
     mqtt: { icon: MqttIcon, countKey: 'mqtt_count', disabled: !$enterpriseLicense },
@@ -38,11 +39,12 @@ const allTypes = [
     'websocket',
     'postgres',
     'kafka',
-    'email',
+    'default_email',
     'nats',
     'mqtt',
     'sqs',
     'gcp',
+    'email',
     'poll',
     'cli'
 ];

package/package/components/graph/renderers/triggers/TriggersWrapper.svelte

@@ -5,15 +5,25 @@ import { Plus } from 'lucide-svelte';
 import InsertModuleInner from '../../../flows/map/InsertModuleInner.svelte';
 import AddTriggersButton from '../../../triggers/AddTriggersButton.svelte';
 import { twMerge } from 'tailwind-merge';
+import Portal from '../../../Portal.svelte';
+import { flip, offset } from 'svelte-floating-ui/dom';
+import { createFloatingActions } from 'svelte-floating-ui';
 let { path, newItem, selected, isEditor = false, disableAi = false, bgColor, bgHoverColor = '', showDraft, onSelect, onAddDraftTrigger } = $props();
 let showTriggerScriptPicker = $state(false);
 let numberOfTriggers = $state(0);
 const dispatch = createEventDispatcher();
 let hover = $state(false);
-let addTriggersButton = $state(undefined);
+let floatingConfig = {
+    strategy: 'fixed',
+    // @ts-ignore
+    placement: 'bottom',
+    middleware: [offset(8), flip()],
+    autoUpdate: true
+};
+const [floatingRef, floatingContent] = createFloatingActions(floatingConfig);
 </script>
 
-<div style={`width: ${NODE.width}px;`}>
+<div style={`width: ${NODE.width}px;`} use:floatingRef>
 	<button
 		style="background-color: {hover && bgHoverColor ? bgHoverColor : bgColor};"
 		class="relative flex w-full flex-row gap-1.5 px-2 p-1 items-center justify-center rounded-sm {selected
@@ -48,15 +58,10 @@ let addTriggersButton = $state(undefined);
 
 		{#if isEditor}
 			<AddTriggersButton
-				bind:this={addTriggersButton}
 				onAddScheduledPoll={() => {
 					showTriggerScriptPicker = true
 				}}
 				class="w-fit h-fit"
-				triggerScriptPicker={showTriggerScriptPicker ? triggerScriptPicker : undefined}
-				onClose={() => {
-					showTriggerScriptPicker = false
-				}}
 				isEditor
 				{onAddDraftTrigger}
 			>
@@ -70,20 +75,25 @@ let addTriggersButton = $state(undefined);
 	</button>
 </div>
 
-{#snippet triggerScriptPicker()}
-	<div class="border rounded-lg shadow-lg bg-surface z5000">
-		<InsertModuleInner
-			{disableAi}
-			on:new
-			on:pickScript
-			on:select
-			on:open={() => {
-				dispatch('openScheduledPoll')
-			}}
-			on:close={() => {
-				addTriggersButton?.close()
-			}}
-			kind="trigger"
-		/>
-	</div>
-{/snippet}
+{#if showTriggerScriptPicker}
+	<Portal target="#flow-editor">
+		<div
+			class="border rounded-lg shadow-lg bg-surface z5000"
+			style="position:absolute"
+			use:floatingContent
+		>
+			<InsertModuleInner
+				{disableAi}
+				on:new={(e) => {
+					showTriggerScriptPicker = false
+					dispatch('new', e.detail)
+				}}
+				on:pickScript={(e) => {
+					showTriggerScriptPicker = false
+					dispatch('pickScript', e.detail)
+				}}
+				kind="trigger"
+			/>
+		</div>
+	</Portal>
+{/if}

package/package/components/graph/renderers/triggers/TriggersWrapper.svelte.d.ts

@@ -25,10 +25,9 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const TriggersWrapper: $$__sveltets_2_IsomorphicComponent<Props, {
+    select: CustomEvent<any>;
     new: CustomEvent<any>;
     pickScript: CustomEvent<any>;
-    select: CustomEvent<any>;
-    openScheduledPoll: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;

package/package/components/home/ItemsList.svelte

@@ -83,15 +83,14 @@ async function loadRawApps() {
     });
     loading = false;
 }
-function filterItemsPathsBaseOnUserFilters(item, filterUserFolders) {
-    if ($workspaceStore == 'admins')
+function filterItemsPathsBaseOnUserFilters(item, filterUserFolders, filterUserFoldersType) {
+    if (!filterUserFoldersType || !filterUserFolders)
         return true;
-    if (filterUserFolders) {
-        return !item.path.startsWith('u/') || item.path.startsWith('u/' + $userStore?.username + '/');
-    }
-    else {
-        return true;
-    }
+    if (filterUserFoldersType === 'only f/*')
+        return item.path.startsWith('f/');
+    if (filterUserFoldersType === 'u/username and f/*')
+        return item.path.startsWith('f/') || item.path.startsWith(`u/${$userStore?.username}/`);
+    return true; // should not happen
 }
 let ownerFilter = $state(undefined);
 const cmp = new Intl.Collator('en').compare;
@@ -138,6 +137,11 @@ const TREE_VIEW_SETTING_NAME = 'treeView';
 const FILTER_USER_FOLDER_SETTING_NAME = 'filterUserFolders';
 const INCLUDE_WITHOUT_MAIN_SETTING_NAME = 'includeWithoutMain';
 let treeView = $state(getLocalSetting(TREE_VIEW_SETTING_NAME) == 'true');
+let filterUserFoldersType = $derived($userStore?.is_super_admin && $userStore.username.includes('@')
+    ? 'only f/*'
+    : $userStore?.is_admin || $userStore?.is_super_admin
+        ? 'u/username and f/*'
+        : undefined);
 let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true');
 let includeWithoutMain = $state(getLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME)
     ? getLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME) == 'true'
@@ -206,9 +210,9 @@ $effect(() => {
 let preFilteredItems = $derived(ownerFilter != undefined
     ? combinedItems?.filter((x) => x.path.startsWith(ownerFilter + '/') &&
         (x.type == itemKind || itemKind == 'all') &&
-        filterItemsPathsBaseOnUserFilters(x, filterUserFolders))
+        filterItemsPathsBaseOnUserFilters(x, filterUserFolders, filterUserFoldersType))
     : combinedItems?.filter((x) => (x.type == itemKind || itemKind == 'all') &&
-        filterItemsPathsBaseOnUserFilters(x, filterUserFolders)));
+        filterItemsPathsBaseOnUserFilters(x, filterUserFolders, filterUserFoldersType)));
 let items = $derived(filter !== '' ? filteredItems : preFilteredItems);
 $effect(() => {
     items && resetScroll();
@@ -385,13 +389,13 @@ $effect(() => {
 						</div>
 					{/snippet}
 				</Popover>
-				{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
+				{#if filterUserFoldersType === 'only f/*'}
 					<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
-				{:else if $userStore?.is_admin || $userStore?.is_super_admin}
+				{:else if filterUserFoldersType === 'u/username and f/*'}
 					<Toggle
 						size="xs"
 						bind:checked={filterUserFolders}
-						options={{ right: `Only u/${$userStore.username} and f/*` }}
+						options={{ right: `Only u/${$userStore?.username} and f/*` }}
 					/>
 				{/if}
 				<Toggle size="xs" bind:checked={treeView} options={{ right: 'Tree view' }} />

package/package/components/home/TreeView.svelte

@@ -1,30 +1,24 @@
-<svelte:options immutable={true} />
-
-<script lang="ts">import { ChevronDown, ChevronUp, Folder, FolderTree, User } from 'lucide-svelte';
+<script lang="ts">import TreeView from './TreeView.svelte';
+import { ChevronDown, ChevronUp, Folder, FolderTree, User } from 'lucide-svelte';
 import Item from './Item.svelte';
 import { twMerge } from 'tailwind-merge';
 import { pluralize } from '../../utils';
-export let item;
-export let collapseAll;
-export let depth = 0;
-export let showCode;
-export let isSearching = false;
+let { item, collapseAll, depth = 0, showCode, isSearching = false } = $props();
 const isFolder = (i) => i && 'folderName' in i;
 const isUser = (i) => i && 'username' in i;
-let opened = true;
-$: toggleOpened(collapseAll);
-function toggleOpened(collapseAll) {
+let opened = $state(true);
+let showMax = $state(15);
+$effect(() => {
     opened = !collapseAll;
-}
-let showMax = 15;
+});
 </script>
 
 {#if isFolder(item)}
 	<div>
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			on:click={() => (opened = !opened)}
+			onclick={() => (opened = !opened)}
 			class="px-4 py-2 border-b w-full flex flex-row items-center justify-between cursor-pointer"
 		>
 			<div
@@ -61,7 +55,7 @@ let showMax = 15;
 		{#if opened || isSearching}
 			<div>
 				{#each item.items.slice(0, showMax) as subItem ((subItem['path'] ? subItem['type'] + '__' + subItem['path'] : undefined) ?? 'folder__' + subItem['folderName'])}
-					<svelte:self
+					<TreeView
 						{isSearching}
 						{collapseAll}
 						item={subItem}
@@ -75,11 +69,11 @@ let showMax = 15;
 					/>
 				{/each}
 				{#if showMax < item.items.length}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
 						class="text-center text-sm text-secondary cursor-pointer hover:text-primary"
-						on:click={() => {
+						onclick={() => {
 							if (isFolder(item)) {
 								showMax += Math.min(30, item.items.length - showMax)
 								showMax = showMax
@@ -94,10 +88,10 @@ let showMax = 15;
 	</div>
 {:else if isUser(item)}
 	<div>
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			on:click={() => (opened = !opened)}
+			onclick={() => (opened = !opened)}
 			class="px-4 py-2 border-b w-full flex flex-row items-center justify-between cursor-pointer"
 		>
 			<div
@@ -128,7 +122,7 @@ let showMax = 15;
 		{#if opened || isSearching}
 			<div>
 				{#each item.items.slice(0, showMax) as subItem ((subItem['path'] ? subItem['type'] + '__' + subItem['path'] : undefined) ?? 'folder__' + subItem['folderName'])}
-					<svelte:self
+					<TreeView
 						{collapseAll}
 						item={subItem}
 						on:scriptChanged
@@ -141,11 +135,11 @@ let showMax = 15;
 					/>
 				{/each}
 				{#if showMax < item.items.length}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
 						class="text-center text-sm text-secondary cursor-pointer py-2 hover:text-primary"
-						on:click={() => {
+						onclick={() => {
 							if (isUser(item)) {
 								showMax += Math.min(30, item.items.length - showMax)
 							}

package/package/components/home/TreeView.svelte.d.ts

@@ -1,31 +1,4 @@
-import type { FolderItem, ItemType, UserItem } from './treeViewUtils';
-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 TreeView: $$__sveltets_2_IsomorphicComponent<{
-    item: ItemType | FolderItem | UserItem;
-    collapseAll: boolean;
-    depth?: number;
-    showCode: (path: string, summary: string) => void;
-    isSearching?: boolean;
-}, {
-    scriptChanged: CustomEvent<any>;
-    flowChanged: CustomEvent<any>;
-    appChanged: CustomEvent<any>;
-    rawAppChanged: CustomEvent<any>;
-    reload: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+import TreeView from './TreeView.svelte';
+declare const TreeView: any;
 type TreeView = InstanceType<typeof TreeView>;
 export default TreeView;

package/package/components/home/TreeViewRoot.svelte

@@ -1,29 +1,17 @@
-<script lang="ts">import TreeView from './TreeView.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import TreeView from './TreeView.svelte';
 import { groupItems } from './treeViewUtils';
-export let collapseAll;
-export let showCode;
-export let nbDisplayed;
-export let items;
-export let isSearching = false;
-let treeLoading = false;
-$: groupedItems = grpItems(items);
-function grpItems(items) {
-    treeLoading = true;
-    let r;
-    try {
-        r = groupItems(items);
-    }
-    finally {
-        treeLoading = false;
-    }
-    return r;
-}
+let { collapseAll, showCode, nbDisplayed = $bindable(), items, isSearching = false } = $props();
+let groupedItems = $state('loading');
+$effect(() => {
+    items;
+    untrack(() => (groupedItems = groupItems(items)));
+});
 </script>
 
-{#if treeLoading}
+{#if groupedItems === 'loading'}
 	<div class="flex flex-row items-center justify-center">
-		<div
-			class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-gray-100"
+		<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-gray-100"
 		></div>
 	</div>
 {:else if groupedItems.length === 0}
@@ -51,7 +39,7 @@ function grpItems(items) {
 	{#if groupedItems.length > 15 && nbDisplayed < groupedItems.length}
 		<span class="text-xs"
 			>{nbDisplayed} root nodes out of {groupedItems.length}
-			<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+			<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
 		>
 	{/if}
 {/if}

package/package/components/home/TreeViewRoot.svelte.d.ts

@@ -1,3 +1,11 @@
+import { type ItemType } from './treeViewUtils';
+interface Props {
+    collapseAll: boolean;
+    showCode: (path: string, summary: string) => void;
+    nbDisplayed: number;
+    items: ItemType[] | undefined;
+    isSearching?: boolean;
+}
 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;
@@ -11,20 +19,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TreeViewRoot: $$__sveltets_2_IsomorphicComponent<{
-    collapseAll: boolean;
-    showCode: (path: string, summary: string) => void;
-    nbDisplayed: number;
-    items: any[] | undefined;
-    isSearching?: boolean;
-}, {
-    scriptChanged: CustomEvent<any>;
-    flowChanged: CustomEvent<any>;
-    appChanged: CustomEvent<any>;
-    rawAppChanged: CustomEvent<any>;
-    reload: CustomEvent<any>;
+declare const TreeViewRoot: $$__sveltets_2_IsomorphicComponent<Props, {
+    scriptChanged: any;
+    flowChanged: any;
+    appChanged: any;
+    rawAppChanged: any;
+    reload: any;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "nbDisplayed">;
 type TreeViewRoot = InstanceType<typeof TreeViewRoot>;
 export default TreeViewRoot;