windmill-components 1.532.0 → 1.542.4

package/package/components/graph/FlowGraphV2.svelte

@@ -303,7 +303,7 @@ let graph = $derived.by(() => {
         suspendStatus,
         flowHasChanged,
         additionalAssetsMap: flowGraphAssetsCtx?.val.additionalAssetsMap
-    }, untrack(() => failureModule), untrack(() => preprocessorModule), eventHandler, success, $useDataflow, untrack(() => $selectedId), moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
+    }, untrack(() => failureModule), preprocessorModule, eventHandler, success, $useDataflow, untrack(() => $selectedId), moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
 });
 $effect(() => {
     ;

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/AIToolNode.svelte

@@ -7,7 +7,7 @@ export const BELOW_ADDITIONAL_OFFSET = 19;
 export const AI_TOOL_CALL_PREFIX = '_wm_ai_agent_tool_call';
 export const AI_TOOL_MESSAGE_PREFIX = '_wm_ai_agent_message';
 const ROW_WIDTH = 275;
-const NEW_TOOL_NODE_WIDTH = 40;
+const NEW_TOOL_NODE_WIDTH = 50;
 const MAX_TOOLS_PER_ROW = 2;
 let computeAIToolNodesCache;
 export function getToolCallId(idx, agentModuleId, moduleId) {
@@ -100,13 +100,13 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                 id: `${node.id}-tool-${tool.id}`,
                 width: inputToolWidth,
                 position: {
-                    x: tools.length === 1
+                    x: (tools.length === 1
                         ? (ROW_WIDTH - inputToolWidth) / 2
                         : (i + 1) % 2 === 0
                             ? inputToolWidth + inputToolXGap
                             : isLastRow && tools.length % 2 === 1
                                 ? (ROW_WIDTH - inputToolWidth) / 2
-                                : 0,
+                                : 0) + node.data.offset,
                     y: baseOffset +
                         rowOffset *
                             (agentActions
@@ -132,7 +132,7 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                 parentId: node.id,
                 width: NEW_TOOL_NODE_WIDTH,
                 position: {
-                    x: (ROW_WIDTH - NEW_TOOL_NODE_WIDTH) / 2,
+                    x: (ROW_WIDTH - NEW_TOOL_NODE_WIDTH) / 2 + node.data.offset,
                     y: baseOffset + rowOffset
                 }
             });

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/nodes/NewAIToolNode.svelte

@@ -1,64 +1,81 @@
-<script lang="ts">import { twMerge } from 'tailwind-merge';
+<script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
+import { twMerge } from 'tailwind-merge';
 import {} from '../../graphBuilder.svelte';
-import NodeWrapper from './NodeWrapper.svelte';
-import Popover from '../../../meltComponents/Popover.svelte';
 import InsertModuleInner from '../../../flows/map/InsertModuleInner.svelte';
+import { Cross } from 'lucide-svelte';
+import PopupV2 from '../../../common/popup/PopupV2.svelte';
+import { flip, offset } from 'svelte-floating-ui/dom';
 let funcDesc = $state('');
 let { data } = $props();
+let floatingConfig = {
+    strategy: 'fixed',
+    // @ts-ignore
+    placement: 'bottom-center',
+    middleware: [offset(8), flip()],
+    autoUpdate: true
+};
 </script>
 
-<NodeWrapper>
-	{#snippet children({ darkMode })}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<Popover
-			portal={null}
-			usePointerDownOutside
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<PopupV2 {floatingConfig} target="#flow-editor">
+	{#snippet button({ pointerdown, pointerup })}
+		<button
+			title={`Add 'tool'
+			}`}
+			type="button"
 			class={twMerge(
-				'!w-full text-2xs font-normal bg-surface h-6 pr-0.5 flex justify-center items-center rounded-sm text-tertiary border',
-				'hover:bg-surface-hover'
+				'!w-full h-6 flex items-center justify-center !outline-[1px] outline dark:outline-gray-500 outline-gray-300 text-secondary bg-surface focus:outline-none hover:bg-surface-hover rounded'
 			)}
-			placement="top"
+			onpointerdown={stopPropagation(
+				preventDefault(() => {
+					pointerdown()
+				})
+			)}
+			onpointerup={pointerup}
 		>
-			<svelte:fragment slot="trigger">+tool</svelte:fragment>
-			<svelte:fragment slot="content" let:close>
-				<InsertModuleInner
-					bind:funcDesc
-					scriptOnly
-					on:close={() => {
-						close()
-					}}
-					on:new={(e) => {
-						data.eventHandlers.insert({
-							index: -1, // ignored when agentId is set
-							agentId: data.agentModuleId,
-							...e.detail
-						})
-						close()
-					}}
-					on:insert={(e) => {
-						data.eventHandlers.insert({
-							index: -1, // ignored when agentId is set
-							agentId: data.agentModuleId,
-							...e.detail
-						})
-						close()
-					}}
-					on:pickScript={(e) => {
-						data.eventHandlers.insert({
-							index: -1, // ignored when agentId is set
-							agentId: data.agentModuleId,
-							kind: e.detail.kind,
-							script: {
-								...e.detail,
-								summary: e.detail.summary
-									? e.detail.summary.replace(/\s/, '_').replace(/[^a-zA-Z0-9_]/g, '')
-									: e.detail.path.split('/').pop()
-							}
-						})
-						close()
-					}}
-				/>
-			</svelte:fragment>
-		</Popover>
+			<div class="flex flex-row items-center gap-1 font-medium text-2xs">
+				<Cross size={12} />
+				tool
+			</div>
+		</button>
+	{/snippet}
+	{#snippet children({ close })}
+		<InsertModuleInner
+			bind:funcDesc
+			scriptOnly
+			on:close={() => {
+				close()
+			}}
+			on:new={(e) => {
+				data.eventHandlers.insert({
+					index: -1, // ignored when agentId is set
+					agentId: data.agentModuleId,
+					...e.detail
+				})
+				close()
+			}}
+			on:insert={(e) => {
+				data.eventHandlers.insert({
+					index: -1, // ignored when agentId is set
+					agentId: data.agentModuleId,
+					...e.detail
+				})
+				close()
+			}}
+			on:pickScript={(e) => {
+				data.eventHandlers.insert({
+					index: -1, // ignored when agentId is set
+					agentId: data.agentModuleId,
+					kind: e.detail.kind,
+					script: {
+						...e.detail,
+						summary: e.detail.summary
+							? e.detail.summary.replace(/\s/, '_').replace(/[^a-zA-Z0-9_]/g, '')
+							: e.detail.path.split('/').pop()
+					}
+				})
+				close()
+			}}
+		/>
 	{/snippet}
-</NodeWrapper>
+</PopupV2>

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}