windmill-components 1.558.3 → 1.596.0

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

@@ -1,33 +1,45 @@
 <script lang="ts">import DarkModeObserver from '../../../DarkModeObserver.svelte';
 import { Handle, Position } from '@xyflow/svelte';
 import { twMerge } from 'tailwind-merge';
-let { enableSourceHandle = true, enableTargetHandle = true, offset = 0, wrapperClass = '', children } = $props();
+import ContextMenu, {} from '../../../common/contextmenu/ContextMenu.svelte';
+let { enableSourceHandle = true, enableTargetHandle = true, offset = 0, wrapperClass = '', contextMenuItems = undefined, children } = $props();
 let darkMode = $state(false);
 </script>
 
 <DarkModeObserver bind:darkMode />
 
-<div
-	class={twMerge('relative shadow-md rounded-sm', wrapperClass)}
-	style={`margin-left: ${offset}px;`}
->
-	{@render children?.({ darkMode })}
-</div>
+{#if contextMenuItems && contextMenuItems.length > 0}
+	<ContextMenu items={contextMenuItems}>
+		<div class={twMerge('relative rounded-md', wrapperClass)} style={`margin-left: ${offset}px;`}>
+			{@render children?.({ darkMode })}
+		</div>
 
-{#if enableSourceHandle}
-	<Handle
-		type="source"
-		isConnectable={false}
-		position={Position.Bottom}
-		style={`margin-left: ${offset / 2}px;`}
-	/>
-{/if}
+		{@render handles()}
+	</ContextMenu>
+{:else}
+	<div class={twMerge('relative rounded-md', wrapperClass)} style={`margin-left: ${offset}px;`}>
+		{@render children?.({ darkMode })}
+	</div>
 
-{#if enableTargetHandle}
-	<Handle
-		type="target"
-		isConnectable={false}
-		position={Position.Top}
-		style={`margin-left: ${offset / 2}px;`}
-	/>
+	{@render handles()}
 {/if}
+
+{#snippet handles()}
+	{#if enableSourceHandle}
+		<Handle
+			type="source"
+			isConnectable={false}
+			position={Position.Bottom}
+			style={`margin-left: ${offset / 2}px;`}
+		/>
+	{/if}
+
+	{#if enableTargetHandle}
+		<Handle
+			type="target"
+			isConnectable={false}
+			position={Position.Top}
+			style={`margin-left: ${offset / 2}px;`}
+		/>
+	{/if}
+{/snippet}

package/package/components/graph/renderers/nodes/NodeWrapper.svelte.d.ts

@@ -1,8 +1,10 @@
+import { type ContextMenuItem } from '../../../common/contextmenu/ContextMenu.svelte';
 interface Props {
     enableSourceHandle?: boolean;
     enableTargetHandle?: boolean;
     offset?: number;
     wrapperClass?: string;
+    contextMenuItems?: ContextMenuItem[];
     children?: import('svelte').Snippet<[any]>;
 }
 declare const NodeWrapper: import("svelte").Component<Props, {}, "">;

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

@@ -0,0 +1,329 @@
+<script lang="ts">import { NodeResizer, ViewportPortal, useSvelteFlow } from '@xyflow/svelte';
+import { X, Lock, LockOpen } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+import GfmMarkdown from '../../../GfmMarkdown.svelte';
+import { fade } from 'svelte/transition';
+import NoteColorPicker from '../../NoteColorPicker.svelte';
+import { NoteColor, NOTE_COLORS, DEFAULT_NOTE_COLOR, MIN_NOTE_WIDTH, MIN_NOTE_HEIGHT } from '../../noteColors';
+import { Button } from '../../../common';
+import { getNoteEditorContext } from '../../noteEditor.svelte';
+import { getGraphContext } from '../../graphContext';
+import { clickOutside } from '../../../../utils';
+import { tick } from 'svelte';
+let { data, dragging = false } = $props();
+// Get SvelteFlow utilities for accessing node position
+const { getNode } = useSvelteFlow();
+// Get NoteEditor context for edit mode
+const noteEditorContext = getNoteEditorContext();
+const isEditModeAvailable = $derived(!!noteEditorContext?.noteEditor && data.editMode);
+// Get graph context for note selection
+const graphContext = getGraphContext();
+const noteManager = graphContext?.noteManager;
+const selected = $derived(noteManager?.isNoteSelected(data.noteId) ?? false);
+// Get the current node with position data
+const currentNode = $derived(getNode(data.noteId));
+let textareaElement = $state(undefined);
+let editMode = $state(false);
+let hovering = $state(false);
+let textContent = $state(data.text ?? '');
+let containerHeight = $state(0);
+// Use data props directly - they're kept in sync by NoteManager observer
+const color = $derived(data.color ?? DEFAULT_NOTE_COLOR);
+const locked = $derived(data.locked ?? false);
+const textForDisplay = $derived(data.text ?? '');
+function handleTextSave() {
+    // Only update when done editing
+    if (isEditModeAvailable && noteEditorContext?.noteEditor) {
+        noteEditorContext.noteEditor.updateText(data.noteId, textContent);
+    }
+}
+function handleDelete(event) {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    if (isEditModeAvailable && noteEditorContext?.noteEditor) {
+        noteEditorContext.noteEditor.deleteNote(data.noteId);
+    }
+}
+function handleColorChange(color) {
+    if (isEditModeAvailable && noteEditorContext?.noteEditor) {
+        noteEditorContext.noteEditor.updateColor(data.noteId, color);
+    }
+}
+function handleLockToggle(event) {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    if (isEditModeAvailable && noteEditorContext?.noteEditor) {
+        noteEditorContext.noteEditor.updateLock(data.noteId, !locked);
+    }
+}
+// Get color configuration for current color
+const colorConfig = $derived(NOTE_COLORS[color]);
+function handleDoubleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    // Don't allow editing if note is locked or edit mode is not available
+    if (locked || !isEditModeAvailable) {
+        return;
+    }
+    editMode = true;
+    // Focus the textarea after a short delay to ensure it's rendered
+    tick().then(() => {
+        textareaElement?.focus();
+    });
+}
+function handleMouseEnter() {
+    hovering = true;
+}
+function handleMouseLeave() {
+    hovering = false;
+}
+// Exit edit mode when note is deselected
+$effect(() => {
+    if (!selected && editMode) {
+        editMode = false;
+    }
+});
+let colorPickerIsOpen = $state(false);
+function handleNoteClick(event) {
+    // Only handle selection if not in edit mode and not dragging
+    if (!editMode && !dragging && noteManager) {
+        event.stopPropagation();
+        noteManager.selectNote(data.noteId);
+    }
+}
+function handleNoteKeydown(event) {
+    // Handle Enter or Space key for selection (accessibility)
+    if ((event.key === 'Enter' || event.key === ' ') && !editMode && !dragging && noteManager) {
+        event.preventDefault();
+        event.stopPropagation();
+        noteManager.selectNote(data.noteId);
+    }
+}
+function handleTextareaKeydown(event) {
+    // Handle Escape key to exit edit mode
+    if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        handleTextSave(); // Save changes before exiting
+        editMode = false;
+        textareaElement?.blur(); // Remove focus from textarea
+    }
+}
+</script>
+
+<!-- Snippet for action buttons to avoid code duplication -->
+{#snippet actionButtons()}
+	<div
+		class={twMerge(
+			'hidden group-hover:flex flex-row gap-2 h-fit',
+			hovering || editMode || colorPickerIsOpen || selected ? 'flex' : ''
+		)}
+	>
+		<!-- Lock/Unlock button -->
+		<Button
+			variant="subtle"
+			unifiedSize="xs"
+			title={locked ? 'Unlock note' : 'Lock note'}
+			aria-label={locked ? 'Unlock note' : 'Lock note'}
+			startIcon={{ icon: locked ? Lock : LockOpen }}
+			onClick={handleLockToggle}
+			iconOnly
+		/>
+
+		<!-- Color picker -->
+		{#if !locked}
+			<NoteColorPicker
+				selectedColor={color}
+				onColorChange={handleColorChange}
+				bind:isOpen={colorPickerIsOpen}
+			/>
+		{/if}
+
+		<!-- Delete button -->
+		{#if !locked}
+			<Button
+				variant="subtle"
+				unifiedSize="xs"
+				title="Delete note"
+				aria-label="Delete note"
+				startIcon={{ icon: X }}
+				onClick={handleDelete}
+				iconOnly
+				destructive
+			/>
+		{/if}
+	</div>
+{/snippet}
+
+<div
+	class={twMerge(
+		'relative w-full h-full rounded-md group hover:outline outline-1',
+		colorConfig.background,
+		colorConfig.text,
+		colorConfig.outlineHover,
+		selected ? 'outline' : '',
+		selected ? colorConfig.outline : '',
+		editMode ? 'outline-0' : ''
+	)}
+	onclick={handleNoteClick}
+	onkeydown={handleNoteKeydown}
+	onpointerup={() => {
+		dragging = false
+	}}
+	ondragstart={() => {
+		dragging = true
+	}}
+	ondragend={() => {
+		dragging = false
+	}}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	role="button"
+	tabindex={editMode ? -1 : 0}
+	ondblclick={handleDoubleClick}
+	use:clickOutside={{
+		onClickOutside: () => {
+			noteManager?.deselectNote(data.noteId)
+		}
+	}}
+>
+	<!-- Hover help text -->
+	{#if hovering || selected}
+		{#if !editMode && isEditModeAvailable}
+			<div
+				in:fade={{ duration: 200 }}
+				class="absolute -top-5 h-5 left-0 text-2xs text-secondary rounded-md z-10 transition-opacity duration-300"
+			>
+				{locked
+					? 'Note is locked'
+					: isEditModeAvailable
+						? 'Double click to edit'
+						: 'View only mode'}
+			</div>
+		{:else if !locked && isEditModeAvailable}
+			<div
+				in:fade={{ duration: 200 }}
+				class="absolute -top-5 h-5 left-0 text-2xs text-secondary rounded-md z-10 transition-opacity duration-300"
+				>GH Markdown</div
+			>
+		{/if}
+	{/if}
+
+	<!-- Note content -->
+	<div
+		class={twMerge(
+			'w-full rounded-md ',
+			data.isGroupNote ? 'min-h-[60px] max-h-[400px]' : 'h-full'
+		)}
+	>
+		{#if editMode}
+			<!-- Edit mode: show textarea -->
+			<textarea
+				bind:this={textareaElement}
+				bind:value={textContent}
+				class={twMerge(
+					'windmillapp w-full shadow-none resize-none text-xs overflow-y-auto border-none rounded-md bg-transparent transition-colors p-4 nodrag nowheel',
+					colorConfig.text
+				)}
+				placeholder="Double click to edit me"
+				onblur={handleTextSave}
+				onkeydown={handleTextareaKeydown}
+				spellcheck="false"
+				style:height={data.isGroupNote ? `${containerHeight > 0 ? containerHeight : 60}px` : '100%'}
+			></textarea>
+		{:else}
+			<!-- Render mode: show markdown or empty state -->
+			<div
+				class={twMerge(
+					'w-full h-fit overflow-auto cursor-pointer flex items-start justify-start rounded-md p-4'
+				)}
+				bind:clientHeight={
+					() => containerHeight,
+					(v) => {
+						if (v > 0 && v !== containerHeight) {
+							data.onTextHeightChange?.(v)
+						}
+						containerHeight = v
+					}
+				}
+			>
+				{#if textForDisplay}
+					<div
+						class={twMerge(
+							'w-full text-xs rounded-md break-words overflow-hidden',
+							colorConfig.text
+						)}
+					>
+						<GfmMarkdown md={textForDisplay} noPadding />
+					</div>
+				{:else}
+					<div class={twMerge('text-xs italic opacity-60', colorConfig.text)}>
+						Double click to edit me
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Node resizer - only visible when selected and not locked and edit mode is available -->
+	{#if !locked && isEditModeAvailable}
+		<NodeResizer
+			isVisible={selected && !dragging && !data.isGroupNote}
+			minWidth={MIN_NOTE_WIDTH}
+			minHeight={MIN_NOTE_HEIGHT}
+			lineClass="!border-4 !border-transparent !rounded-md"
+			handleClass="!bg-transparent !w-4 !h-4 !border-none !rounded-md"
+			onResizeEnd={(_, params) => {
+				// Update note size when resizing ends
+				if (params.width !== undefined && params.height !== undefined) {
+					const size = { width: params.width, height: params.height }
+					if (isEditModeAvailable && noteEditorContext?.noteEditor) {
+						// Use NoteEditor context in edit mode
+						noteEditorContext.noteEditor.updateSize(data.noteId, size)
+					}
+				}
+			}}
+		/>
+	{/if}
+
+	<!-- Action buttons - conditional rendering based on note type -->
+	{#if isEditModeAvailable}
+		{#if data.isGroupNote && currentNode?.position}
+			<!-- Group notes: Use ViewportPortal to render above graph edges -->
+			<ViewportPortal target="front">
+				<div
+					class="absolute p-1 w-24 h-8 group flex justify-end"
+					style:transform="translate({currentNode.position.x +
+						(currentNode.measured?.width ?? MIN_NOTE_WIDTH) -
+						100}px , {currentNode.position.y - 30}px)"
+					style:pointer-events="auto"
+					style:z-index="1000"
+				>
+					{@render actionButtons()}
+				</div>
+			</ViewportPortal>
+		{:else}
+			<!-- Standalone notes: Use normal absolute positioning -->
+			<div class="absolute -top-8 -right-2.5 p-2 w-32 h-12 group flex justify-end">
+				{@render actionButtons()}
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	textarea::-moz-placeholder {
+		color: #6b7280;
+		opacity: 0.7;
+	}
+
+	textarea::placeholder {
+		color: #6b7280;
+		opacity: 0.7;
+	}
+
+	/* Remove default textarea styling */
+	textarea {
+		font-family: inherit;
+		line-height: 1.4;
+	}</style>

package/package/components/graph/renderers/nodes/NoteNode.svelte.d.ts

@@ -0,0 +1,16 @@
+import { NoteColor } from '../../noteColors';
+interface Props {
+    data: {
+        noteId: string;
+        text: string;
+        color: NoteColor;
+        locked?: boolean;
+        isGroupNote?: boolean;
+        editMode?: boolean;
+        onTextHeightChange?: (height: number) => void;
+    };
+    dragging?: boolean;
+}
+declare const NoteNode: import("svelte").Component<Props, {}, "">;
+type NoteNode = ReturnType<typeof NoteNode>;
+export default NoteNode;

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

@@ -1,10 +1,8 @@
 <script lang="ts">import VirtualItem from '../../../flows/map/VirtualItem.svelte';
 import NodeWrapper from './NodeWrapper.svelte';
-import { getStateColor, getStateHoverColor } from '../../util';
-import { getContext } from 'svelte';
-let { data } = $props();
-const { selectedId } = getContext('FlowGraphContext');
-const type = $derived(data.success == undefined ? undefined : data.success ? 'Success' : 'Failure');
+import { getGraphContext } from '../../graphContext';
+let { data, id } = $props();
+const { selectionManager } = getGraphContext();
 </script>
 
 <NodeWrapper enableSourceHandle={false}>
@@ -13,19 +11,15 @@ const type = $derived(data.success == undefined ? undefined : data.success ? 'Su
 			id={'Result'}
 			label={'Result'}
 			selectable={true}
-			selected={$selectedId === 'Result'}
+			selected={selectionManager && selectionManager.isNodeSelected(id)}
 			hideId={true}
-			bgColor={getStateColor(type, darkMode)}
-			bgHoverColor={getStateHoverColor(type, darkMode)}
 			on:select={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}
 			nodeKind="result"
 			editMode={data.editMode}
 			job={data.job}
-			{type}
 			showJobStatus={data.showJobStatus}
-			{darkMode}
 		/>
 	{/snippet}
 </NodeWrapper>

package/package/components/graph/renderers/nodes/ResultNode.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ResultN } from '../../graphBuilder.svelte';
 interface Props {
     data: ResultN['data'];
+    id: string;
 }
 declare const ResultNode: import("svelte").Component<Props, {}, "">;
 type ResultNode = ReturnType<typeof ResultNode>;

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

@@ -2,8 +2,9 @@
 import VirtualItem from '../../../flows/map/VirtualItem.svelte';
 import NodeWrapper from './NodeWrapper.svelte';
 import { Minimize2 } from 'lucide-svelte';
-import { getStateColor, getStateHoverColor } from '../../util';
-let { data } = $props();
+import { getGraphContext } from '../../graphContext';
+let { data, id } = $props();
+const { selectionManager } = getGraphContext();
 </script>
 
 <NodeWrapper offset={data.offset}>
@@ -12,24 +13,23 @@ let { data } = $props();
 			label={data.label}
 			preLabel={data.preLabel}
 			selectable
-			selected={data.selected}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={undefined}
+			selected={selectionManager && selectionManager.isNodeSelected(id)}
 			on:select={() => {
 				setTimeout(() => data.eventHandlers?.select(data.id))
 			}}
 		/>
-		<button
-			title="Unexpand subflow"
-			class="z-50 absolute -top-[10px] right-[25px] rounded-full h-[20px] w-[20px] center-center text-primary bg-surface duration-0 hover:bg-surface-hover"
-			onclick={stopPropagation(
-				preventDefault(() => {
-					data.eventHandlers.minimizeSubflow(data.subflowId)
-				})
-			)}
-		>
-			<Minimize2 size={12} />
-		</button>
+		<div class="z-50 absolute -top-4 right-11 rounded-md text-primary bg-surface">
+			<button
+				title="Unexpand subflow"
+				class="rounded-md center-center text-primary hover:bg-surface-tertiary shadow-md p-1 duration-0"
+				onclick={stopPropagation(
+					preventDefault(() => {
+						data.eventHandlers.minimizeSubflow(data.subflowId)
+					})
+				)}
+			>
+				<Minimize2 size={12} />
+			</button>
+		</div>
 	{/snippet}
 </NodeWrapper>

package/package/components/graph/renderers/nodes/SubflowBound.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { SubflowBoundN } from '../../graphBuilder.svelte';
 interface Props {
     data: SubflowBoundN['data'];
+    id: string;
 }
 declare const SubflowBound: import("svelte").Component<Props, {}, "">;
 type SubflowBound = ReturnType<typeof SubflowBound>;

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

@@ -1,15 +1,17 @@
-<script lang="ts">import NodeWrapper from './NodeWrapper.svelte';
+<script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
+import NodeWrapper from './NodeWrapper.svelte';
 import TriggersWrapper from '../triggers/TriggersWrapper.svelte';
 import { getContext } from 'svelte';
 import { Maximize2, Minimize2, Calendar } from 'lucide-svelte';
-import { getStateColor, getStateHoverColor } from '../../util';
+import { getNodeColorClasses } from '../../util';
 import { setScheduledPollSchedule } from '../../../triggers';
 import VirtualItemWrapper from '../../../flows/map/VirtualItemWrapper.svelte';
 import {} from '../../../triggers/utils';
 import { tick } from 'svelte';
-export let data;
-const { selectedId } = getContext('FlowGraphContext');
-const { triggersCount, triggersState } = getContext('TriggerContext');
+import { getGraphContext } from '../../graphContext';
+let { data } = $props();
+const { selectionManager } = getGraphContext();
+const { triggersCount, triggersState } = $state(getContext('TriggerContext'));
 function getScheduleCfg(primary, triggersCount) {
     return primary?.draftConfig
         ? {
@@ -23,18 +25,18 @@ function getScheduleCfg(primary, triggersCount) {
                 schedule: triggersCount?.primary_schedule?.schedule
             };
 }
+let colorClasses = $derived(getNodeColorClasses('_VirtualItem', selectionManager?.isNodeSelected('Trigger')));
 </script>
 
-<NodeWrapper wrapperClass="shadow-md rounded-sm">
+<NodeWrapper>
 	{#snippet children({ darkMode })}
 		{#if data.simplifiableFlow?.simplifiedFlow != true}
 			<TriggersWrapper
 				disableAi={data.disableAi}
 				isEditor={data.isEditor}
 				path={data.path}
-				bgColor={getStateColor(undefined, darkMode)}
-				bgHoverColor={getStateHoverColor(undefined, darkMode)}
 				showDraft={data.isEditor ?? false}
+				{colorClasses}
 				on:new={(e) => {
 					data?.eventHandlers.insert({
 						index: 0,
@@ -55,31 +57,30 @@ function getScheduleCfg(primary, triggersCount) {
 					const primarySchedule = triggersState.triggers.findIndex((t) => t.isPrimary && !t.isDraft)
 					triggersState.selectedTriggerIndex = primarySchedule
 				}}
-				on:select={() => data?.eventHandlers?.select('triggers')}
+				on:select={() => data?.eventHandlers?.select('Trigger')}
 				onSelect={async (triggerIndex: number) => {
-					data?.eventHandlers?.select('triggers')
+					data?.eventHandlers?.select('Trigger')
 					await tick()
 					triggersState.selectedTriggerIndex = triggerIndex
 				}}
 				onAddDraftTrigger={async (type: TriggerType) => {
 					const newTrigger = triggersState.addDraftTrigger(triggersCount, type)
-					data?.eventHandlers?.select('triggers')
+					data?.eventHandlers?.select('Trigger')
 					await tick()
 					triggersState.selectedTriggerIndex = newTrigger
 				}}
-				selected={$selectedId == 'triggers'}
+				selected={selectionManager?.getSelectedId() === 'Trigger'}
 				newItem={data.newFlow}
 			/>
 		{:else}
 			<VirtualItemWrapper
 				label="Check for new events"
 				selectable={true}
-				selected={$selectedId == 'triggers'}
-				id={'triggers'}
-				bgColor={getStateColor(undefined, darkMode)}
+				id={'Trigger'}
 				on:select={(e) => {
 					data?.eventHandlers?.select(e.detail)
 				}}
+				{colorClasses}
 			>
 				{#if triggersState.triggers.some((t) => t.isPrimary) || $triggersCount?.primary_schedule}
 					{@const { enabled, schedule } = getScheduleCfg(
@@ -96,7 +97,7 @@ function getScheduleCfg(primary, triggersCount) {
 				{:else}
 					<button
 						class="px-2 py-1 hover:bg-surface-inverse w-full hover:text-primary-inverse"
-						on:click={() => {
+						onclick={() => {
 							setScheduledPollSchedule(triggersState, triggersCount)
 						}}
 					>
@@ -109,8 +110,11 @@ function getScheduleCfg(primary, triggersCount) {
 			<button
 				class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
 outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-0 hover:bg-nord-950 hover:text-white"
-				on:click|preventDefault|stopPropagation={() =>
-					data?.eventHandlers?.simplifyFlow(!data.simplifiableFlow?.simplifiedFlow)}
+				onclick={stopPropagation(
+					preventDefault(() =>
+						data?.eventHandlers?.simplifyFlow(!data.simplifiableFlow?.simplifiedFlow)
+					)
+				)}
 				title={data.simplifiableFlow?.simplifiedFlow
 					? 'Expand to full flow view'
 					: 'Simplify flow view for scheduled poll'}

package/package/components/graph/renderers/nodes/TriggersNode.svelte.d.ts

@@ -1,19 +1,6 @@
 import type { FlowModule } from '../../../../gen';
 import type { GraphEventHandlers, SimplifiableFlow } from '../../graphBuilder.svelte';
-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 TriggersNode: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     data: {
         path: string;
         isEditor: boolean;
@@ -25,8 +12,7 @@ declare const TriggersNode: $$__sveltets_2_IsomorphicComponent<{
         disableAi: boolean;
         simplifiableFlow: SimplifiableFlow;
     };
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TriggersNode = InstanceType<typeof TriggersNode>;
+}
+declare const TriggersNode: import("svelte").Component<Props, {}, "">;
+type TriggersNode = ReturnType<typeof TriggersNode>;
 export default TriggersNode;