windmill-components 1.379.3 → 1.382.1

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

@@ -0,0 +1,44 @@
+<script>import VirtualItem from '../../../flows/map/VirtualItem.svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import { X } from 'lucide-svelte';
+import { getStateColor } from '../../util';
+import { computeBorderStatus } from '../utils';
+export let data;
+$: borderStatus = computeBorderStatus(data.branchIndex, 'branchall', data.flowModuleStates?.[data.id]);
+</script>
+
+<NodeWrapper let:darkMode offset={data.offset}>
+	<VirtualItem
+		label={data.label}
+		selectable
+		selected={data.selected}
+		bgColor={getStateColor(undefined, darkMode)}
+		borderColor={borderStatus
+			? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
+			: undefined}
+		on:select={() => {
+			data.eventHandlers.select(data.id)
+		}}
+		on:insert={(e) => {
+			data.eventHandlers.insert(e.detail)
+		}}
+	/>
+	{#if data.insertable}
+		<button
+			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-150 hover:bg-red-400 hover:text-white
+hover:border-red-700"
+			on:click|preventDefault|stopPropagation={() => {
+				data.eventHandlers.deleteBranch(
+					{
+						module: data.modules.find((m) => m.id === data.id),
+						index: data.branchIndex
+					},
+					data.label
+				)
+			}}
+		>
+			<X size={12} />
+		</button>
+	{/if}
+</NodeWrapper>

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { GraphModuleState } from '../../model';
+import type { FlowModule } from '../../../../gen';
+import type { GraphEventHandlers } from '../../graphBuilder';
+declare const __propDef: {
+    props: {
+        data: {
+            label: string;
+            branchIndex: number;
+            insertable: boolean;
+            flowModuleStates: Record<string, GraphModuleState> | undefined;
+            id: string;
+            modules: FlowModule[];
+            selected: boolean;
+            eventHandlers: GraphEventHandlers;
+            offset: number;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BranchAllStartProps = typeof __propDef.props;
+export type BranchAllStartEvents = typeof __propDef.events;
+export type BranchAllStartSlots = typeof __propDef.slots;
+export default class BranchAllStart extends SvelteComponent<BranchAllStartProps, BranchAllStartEvents, BranchAllStartSlots> {
+}
+export {};

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

@@ -0,0 +1,41 @@
+<script>import VirtualItem from '../../../flows/map/VirtualItem.svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import { X } from 'lucide-svelte';
+import { getStateColor } from '../../util';
+import { computeBorderStatus } from '../utils';
+export let data;
+$: borderStatus = computeBorderStatus(data.branchIndex, 'branchone', data.flowModuleStates?.[data.id]);
+</script>
+
+<NodeWrapper let:darkMode offset={data.offset}>
+	<VirtualItem
+		label={data.label}
+		selectable
+		selected={data.selected}
+		bgColor={getStateColor(undefined, darkMode)}
+		borderColor={borderStatus
+			? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
+			: undefined}
+		on:select={() => {
+			data.eventHandlers.select(data.id)
+		}}
+	/>
+	{#if data.insertable}
+		<button
+			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-150 hover:bg-red-400 hover:text-white
+hover:border-red-700"
+			on:click|preventDefault|stopPropagation={() => {
+				data.eventHandlers.deleteBranch(
+					{
+						module: data.modules.find((m) => m.id === data.id),
+						index: data.branchIndex
+					},
+					data.label
+				)
+			}}
+		>
+			<X size={12} />
+		</button>
+	{/if}
+</NodeWrapper>

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { GraphModuleState } from '../../model';
+import type { FlowModule } from '../../../../gen';
+import type { GraphEventHandlers } from '../../graphBuilder';
+declare const __propDef: {
+    props: {
+        data: {
+            label: string;
+            insertable: boolean;
+            flowModuleStates: Record<string, GraphModuleState> | undefined;
+            id: string;
+            modules: FlowModule[];
+            selected: boolean;
+            eventHandlers: GraphEventHandlers;
+            branchIndex: number;
+            offset: number;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BranchOneStartProps = typeof __propDef.props;
+export type BranchOneStartEvents = typeof __propDef.events;
+export type BranchOneStartSlots = typeof __propDef.slots;
+export default class BranchOneStart extends SvelteComponent<BranchOneStartProps, BranchOneStartEvents, BranchOneStartSlots> {
+}
+export {};

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

@@ -0,0 +1,19 @@
+<script>import VirtualItem from '../../../flows/map/VirtualItem.svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import { getStateColor } from '../../util';
+export let data;
+</script>
+
+<NodeWrapper offset={data.offset} let:darkMode>
+	<VirtualItem
+		label={'Collect result of each iteration'}
+		selectable={true}
+		selected={false}
+		id={data.id}
+		bgColor={getStateColor(undefined, darkMode)}
+		borderColor={getStateColor(data.flowModuleStates?.[data.id]?.type, darkMode)}
+		on:select={(e) => {
+			data?.eventHandlers?.select(e.detail)
+		}}
+	/>
+</NodeWrapper>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { GraphModuleState } from '../../model';
+import type { GraphEventHandlers } from '../../graphBuilder';
+declare const __propDef: {
+    props: {
+        data: {
+            offset: number;
+            id: string;
+            insertable: boolean;
+            flowModuleStates: Record<string, GraphModuleState> | undefined;
+            eventHandlers: GraphEventHandlers;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ForLoopEndNodeProps = typeof __propDef.props;
+export type ForLoopEndNodeEvents = typeof __propDef.events;
+export type ForLoopEndNodeSlots = typeof __propDef.slots;
+export default class ForLoopEndNode extends SvelteComponent<ForLoopEndNodeProps, ForLoopEndNodeEvents, ForLoopEndNodeSlots> {
+}
+export {};

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

@@ -0,0 +1,20 @@
+<script>import VirtualItem from '../../../flows/map/VirtualItem.svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import { getStateColor } from '../../util';
+export let data;
+</script>
+
+<NodeWrapper let:darkMode offset={data.offset}>
+	<VirtualItem
+		label={'Do one iteration'}
+		selectable={false}
+		selected={false}
+		id={data.id}
+		hideId
+		bgColor={getStateColor(undefined, darkMode)}
+		borderColor={getStateColor(data.flowModuleStates?.[data.id]?.type, darkMode)}
+		on:select={(e) => {
+			data?.eventHandlers?.select(e.detail)
+		}}
+	/>
+</NodeWrapper>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { FlowModule } from '../../../../gen';
+import type { GraphModuleState } from '../../model';
+import type { GraphEventHandlers } from '../../graphBuilder';
+declare const __propDef: {
+    props: {
+        data: {
+            offset: number;
+            id: string;
+            modules: FlowModule[];
+            flowModuleStates: Record<string, GraphModuleState> | undefined;
+            eventHandlers: GraphEventHandlers;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ForLoopStartNodeProps = typeof __propDef.props;
+export type ForLoopStartNodeEvents = typeof __propDef.events;
+export type ForLoopStartNodeSlots = typeof __propDef.slots;
+export default class ForLoopStartNode extends SvelteComponent<ForLoopStartNodeProps, ForLoopStartNodeEvents, ForLoopStartNodeSlots> {
+}
+export {};

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

@@ -0,0 +1,74 @@
+<script>import VirtualItem from '../../../flows/map/VirtualItem.svelte';
+import { ExternalLink, Wand2 } from 'lucide-svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import Popover from '../../../Popover.svelte';
+import { getStateColor } from '../../util';
+import Menu from '../../../common/menu/Menu.svelte';
+import { getContext } from 'svelte';
+import { copilotInfo } from '../../../../stores';
+import { base } from '../../../../base';
+export let data;
+let openNoCopilot = false;
+const { drawerStore: copilotDrawerStore } = getContext('FlowCopilotContext') || {};
+const { selectedId } = getContext('FlowGraphContext');
+</script>
+
+<NodeWrapper enableTargetHandle={false} let:darkMode>
+	{#if data.insertable && !data.disableAi}
+		<div class="absolute -top-10 left-1/2 transform -translate-x-1/2 z-10">
+			<Popover>
+				<div class={openNoCopilot ? 'z-10' : ''}>
+					<Menu pointerDown noMinW placement="bottom-center" let:close bind:show={openNoCopilot}>
+						<button
+							title="AI Flow Builder"
+							on:pointerdown={$copilotInfo.exists_openai_resource_path
+								? (ev) => {
+										ev.preventDefault()
+										ev.stopPropagation()
+										$copilotDrawerStore?.openDrawer()
+								  }
+								: undefined}
+							slot="trigger"
+							type="button"
+							class=" bg-surface text-violet-800 dark:text-violet-400 border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-8 h-8 flex items-center justify-center"
+						>
+							<Wand2 size={16} />
+						</button>
+						{#if !$copilotInfo.exists_openai_resource_path}
+							<div class="text-primary p-4">
+								<p class="text-sm w-80">
+									Enable Windmill AI in the
+									<a
+										href="{base}/workspace_settings?tab=openai"
+										target="_blank"
+										class="inline-flex flex-row items-center gap-1"
+										on:click={() => {
+											close()
+										}}
+									>
+										workspace settings
+										<ExternalLink size={16} />
+									</a>
+								</p>
+							</div>
+						{/if}
+					</Menu>
+				</div>
+
+				<svelte:fragment slot="text">AI Flow builder</svelte:fragment>
+			</Popover>
+		</div>
+	{/if}
+	<VirtualItem
+		label="Input"
+		selectable
+		selected={$selectedId === 'Input'}
+		bgColor={getStateColor(undefined, darkMode)}
+		on:insert={(e) => {
+			data.eventHandlers?.insert(e.detail)
+		}}
+		on:select={(e) => {
+			data.eventHandlers?.select(e.detail)
+		}}
+	/>
+</NodeWrapper>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { GraphEventHandlers } from '../../graphBuilder';
+import type { FlowModule } from '../../../../gen';
+declare const __propDef: {
+    props: {
+        data: {
+            insertable: boolean;
+            eventHandlers: GraphEventHandlers;
+            modules: FlowModule[];
+            disableAi: boolean;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputNodeProps = typeof __propDef.props;
+export type InputNodeEvents = typeof __propDef.events;
+export type InputNodeSlots = typeof __propDef.slots;
+export default class InputNode extends SvelteComponent<InputNodeProps, InputNodeEvents, InputNodeSlots> {
+}
+export {};

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

@@ -0,0 +1,71 @@
+<script>import MapItem from '../../../flows/map/MapItem.svelte';
+import { GitBranchPlus } from 'lucide-svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import { getStateColor } from '../../util';
+export let data;
+$: type = data.flowModuleStates?.[data.module.id]?.type;
+if (!type && data.flowJobs) {
+    type = 'InProgress';
+}
+$: state = data.flowModuleStates?.[data.module.id];
+$: flowJobs = state?.flow_jobs
+    ? {
+        flowJobs: state?.flow_jobs,
+        selected: state?.selectedForloopIndex ?? -1,
+        flowJobsSuccess: state?.flow_jobs_success
+    }
+    : undefined;
+let selectedIteration = -1;
+</script>
+
+<NodeWrapper offset={data.offset} let:darkMode>
+	<MapItem
+		mod={data.module}
+		insertable={data.insertable}
+		annotation={flowJobs &&
+		(data.module.value.type === 'forloopflow' || data.module.value.type === 'whileloopflow')
+			? 'Iteration: ' +
+			  (selectedIteration >= 0 ? selectedIteration : state?.flow_jobs?.length) +
+			  '/' +
+			  (state?.iteration_total ?? '?')
+			: ''}
+		bgColor={getStateColor(type, darkMode, '#fff')}
+		modules={data.modules ?? []}
+		moving={data.moving}
+		duration_ms={state?.duration_ms}
+		retries={data.retries}
+		{flowJobs}
+		on:delete={(e) => {
+			data.eventHandlers.delete(e.detail, '')
+		}}
+		on:insert={(e) => {
+			data.eventHandlers.insert(e.detail)
+		}}
+		on:move={(e) => {
+			data.eventHandlers.move(data.module, data.modules)
+		}}
+		on:newBranch={(e) => {
+			data.eventHandlers.newBranch(data.module)
+		}}
+		on:select={(e) => {
+			data.eventHandlers.select(e.detail)
+		}}
+		on:selectedIteration={(e) => {
+			selectedIteration = e.detail.index + 1
+			data.eventHandlers.selectedIteration(e.detail, data.module.id)
+		}}
+	/>
+
+	<div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 z-10">
+		{#if (data.value.type === 'branchall' || data.value.type === 'branchone') && data.insertable}
+			<button
+				class="rounded-full border hover:bg-surface-hover bg-surface p-1"
+				on:click={() => {
+					data?.eventHandlers?.newBranch(data.module)
+				}}
+			>
+				<GitBranchPlus size={16} />
+			</button>
+		{/if}
+	</div>
+</NodeWrapper>

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

@@ -0,0 +1,41 @@
+/// <reference types="node" />
+import { SvelteComponent } from "svelte";
+import type { FlowModule, FlowModuleValue } from '../../../../gen';
+import type { GraphEventHandlers } from '../../graphBuilder';
+import type { GraphModuleState } from '../../model';
+declare const __propDef: {
+    props: {
+        data: {
+            offset: number;
+            value: FlowModuleValue;
+            module: FlowModule;
+            insertable: boolean;
+            insertableEnd: boolean;
+            branchable: boolean;
+            bgColor: string;
+            modules: FlowModule[];
+            moving: string | undefined;
+            disableAi: boolean;
+            wrapperId: string | undefined;
+            retries: number | undefined;
+            flowJobs: {
+                flowJobs: string[];
+                selected: number;
+                flowJobsSuccess: (boolean | undefined)[];
+            } | undefined;
+            eventHandlers: GraphEventHandlers;
+            flowModuleStates: Record<string, GraphModuleState> | undefined;
+            selected: boolean;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModuleNodeProps = typeof __propDef.props;
+export type ModuleNodeEvents = typeof __propDef.events;
+export type ModuleNodeSlots = typeof __propDef.slots;
+export default class ModuleNode extends SvelteComponent<ModuleNodeProps, ModuleNodeEvents, ModuleNodeSlots> {
+}
+export {};

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

@@ -0,0 +1,20 @@
+<script>import VirtualItem from '../../../flows/map/VirtualItem.svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import { getStateColor } from '../../util';
+export let data;
+</script>
+
+<NodeWrapper offset={data.offset} let:darkMode enableSourceHandle enableTargetHandle>
+	<VirtualItem
+		label={data.label ?? 'No branches'}
+		id={data.id}
+		hideId={true}
+		selectable={true}
+		selected={false}
+		bgColor={getStateColor(undefined, darkMode)}
+		borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
+		on:select={(e) => {
+			data?.eventHandlers?.select(e.detail)
+		}}
+	/>
+</NodeWrapper>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { FlowModule } from '../../../../gen';
+import type { GraphEventHandlers } from '../../graphBuilder';
+import type { GraphModuleState } from '../../model';
+declare const __propDef: {
+    props: {
+        data: {
+            id: string;
+            insertable: boolean;
+            modules: FlowModule[];
+            eventHandlers: GraphEventHandlers;
+            flowModuleStates: Record<string, GraphModuleState> | undefined;
+            offset: number;
+            label: string | undefined;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NoBranchNodeProps = typeof __propDef.props;
+export type NoBranchNodeEvents = typeof __propDef.events;
+export type NoBranchNodeSlots = typeof __propDef.slots;
+export default class NoBranchNode extends SvelteComponent<NoBranchNodeProps, NoBranchNodeEvents, NoBranchNodeSlots> {
+}
+export {};

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

@@ -0,0 +1,21 @@
+<script>import DarkModeObserver from '../../../DarkModeObserver.svelte';
+import { Handle, Position } from '@xyflow/svelte';
+export let enableSourceHandle = true;
+export let enableTargetHandle = true;
+export let offset = 0;
+let darkMode = false;
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<div class="relative shadow-md" style={`margin-left: ${offset}px;`}>
+	<slot {darkMode} />
+</div>
+
+{#if enableSourceHandle}
+	<Handle type="source" position={Position.Bottom} style={`margin-left: ${offset / 2}px;`} />
+{/if}
+
+{#if enableTargetHandle}
+	<Handle type="target" position={Position.Top} style={`margin-left: ${offset / 2}px;`} />
+{/if}

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        enableSourceHandle?: boolean | undefined;
+        enableTargetHandle?: boolean | undefined;
+        offset?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            darkMode: boolean;
+        };
+    };
+};
+export type NodeWrapperProps = typeof __propDef.props;
+export type NodeWrapperEvents = typeof __propDef.events;
+export type NodeWrapperSlots = typeof __propDef.slots;
+export default class NodeWrapper extends SvelteComponent<NodeWrapperProps, NodeWrapperEvents, NodeWrapperSlots> {
+}
+export {};

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

@@ -0,0 +1,24 @@
+<script>import VirtualItem from '../../../flows/map/VirtualItem.svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import { getStateColor } from '../../util';
+import { getContext } from 'svelte';
+export let data;
+const { selectedId } = getContext('FlowGraphContext');
+</script>
+
+<NodeWrapper let:darkMode enableSourceHandle={false}>
+	<VirtualItem
+		id={'Result'}
+		label={'Result'}
+		selectable={true}
+		selected={$selectedId === 'Result'}
+		hideId={true}
+		bgColor={getStateColor(
+			data.success == undefined ? undefined : data.success ? 'Success' : 'Failure',
+			darkMode
+		)}
+		on:select={(e) => {
+			data?.eventHandlers?.select(e.detail)
+		}}
+	/>
+</NodeWrapper>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { FlowModule } from '../../../../gen';
+import type { GraphEventHandlers } from '../../graphBuilder';
+declare const __propDef: {
+    props: {
+        data: {
+            eventHandlers: GraphEventHandlers;
+            modules: FlowModule[];
+            success: boolean | undefined;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ResultNodeProps = typeof __propDef.props;
+export type ResultNodeEvents = typeof __propDef.events;
+export type ResultNodeSlots = typeof __propDef.slots;
+export default class ResultNode extends SvelteComponent<ResultNodeProps, ResultNodeEvents, ResultNodeSlots> {
+}
+export {};

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

@@ -0,0 +1,19 @@
+<script>import VirtualItem from '../../../flows/map/VirtualItem.svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import { getStateColor } from '../../util';
+export let data;
+</script>
+
+<NodeWrapper offset={data.offset} let:darkMode enableSourceHandle enableTargetHandle>
+	<VirtualItem
+		label={'Collect result from all branches'}
+		id={data.id}
+		selectable={true}
+		selected={false}
+		bgColor={getStateColor(undefined, darkMode)}
+		borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
+		on:select={(e) => {
+			data?.eventHandlers?.select(e.detail)
+		}}
+	/>
+</NodeWrapper>

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { FlowModule } from '../../../../gen';
+import type { GraphEventHandlers } from '../../graphBuilder';
+import type { GraphModuleState } from '../../model';
+declare const __propDef: {
+    props: {
+        data: {
+            id: string;
+            insertable: boolean;
+            modules: FlowModule[];
+            eventHandlers: GraphEventHandlers;
+            flowModuleStates: Record<string, GraphModuleState> | undefined;
+            offset: number;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BranchAllEndNodeProps = typeof __propDef.props;
+export type BranchAllEndNodeEvents = typeof __propDef.events;
+export type BranchAllEndNodeSlots = typeof __propDef.slots;
+export default class BranchAllEndNode extends SvelteComponent<BranchAllEndNodeProps, BranchAllEndNodeEvents, BranchAllEndNodeSlots> {
+}
+export {};

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

@@ -0,0 +1,19 @@
+<script>import VirtualItem from '../../../flows/map/VirtualItem.svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import { getStateColor } from '../../util';
+export let data;
+</script>
+
+<NodeWrapper let:darkMode offset={data.offset}>
+	<VirtualItem
+		label={'Collect result from all branches'}
+		id={data.id}
+		selectable={true}
+		selected={false}
+		bgColor={getStateColor(undefined, darkMode)}
+		borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
+		on:select={(e) => {
+			data?.eventHandlers?.select(e.detail)
+		}}
+	/>
+</NodeWrapper>