windmill-components 1.558.3 → 1.596.0

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

@@ -9,7 +9,7 @@ import ToggleHubWorkspaceQuick from '../../ToggleHubWorkspaceQuick.svelte';
 import TopLevelNode from '../pickers/TopLevelNode.svelte';
 import RefreshButton from '../../common/button/RefreshButton.svelte';
 const dispatch = createEventDispatcher();
-let { stop = false, funcDesc = $bindable(''), disableAi = false, kind = 'script', allowTrigger = true, scriptOnly = false } = $props();
+let { stop = false, funcDesc = $bindable(''), disableAi = false, kind = 'script', allowTrigger = true, toolMode = false } = $props();
 let customUi = getContext('customUi');
 let selectedKind = $state(kind);
 let preFilter = $state('all');
@@ -23,11 +23,9 @@ let displayPath = $derived(width > 650 || height > 400);
 
 <div
 	id="flow-editor-insert-module"
-	class="flex flex-col h-[400px] {small
-		? 'w-[450px]'
-		: 'w-[650px]'} pt-1 pr-1 pl-1 gap-1.5 resize overflow-auto {small
+	class="flex flex-col h-full {small ? 'w-[450px]' : 'w-[650px]'} gap-2 {small
 		? 'min-w-[450px]'
-		: 'min-w-[650px]'} min-h-[400px]"
+		: 'min-w-[650px]'}"
 	onwheel={(e) => {
 		e.stopPropagation()
 	}}
@@ -47,90 +45,114 @@ let displayPath = $derived(width > 650 || height > 400);
 		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 			<ToggleHubWorkspaceQuick bind:selected={preFilter} />
 		{/if}
-		<RefreshButton size="md" light {loading} on:click={() => (refreshCount.val += 1)} />
+		<RefreshButton
+			size="sm"
+			light
+			{loading}
+			onClick={() => {
+				refreshCount.val += 1
+			}}
+		/>
 	</div>
 
-	<div class="flex flex-row grow min-h-0">
-		{#if kind === 'script' && !scriptOnly}
-			<div class="flex-none flex flex-col text-xs text-primary">
+	<div class="flex flex-row grow min-h-0 gap-2">
+		{#if kind === 'script'}
+			<div class="flex-none flex flex-col text-xs text-primary overflow-auto gap-1">
 				<TopLevelNode
 					label="Action"
 					selected={selectedKind === 'script'}
-					on:select={() => {
+					onSelect={() => {
 						selectedKind = 'script'
 					}}
 				/>
-				{#if customUi?.triggers != false && allowTrigger}
+				{#if toolMode}
 					<TopLevelNode
-						label="Trigger"
-						selected={selectedKind === 'trigger'}
-						on:select={() => {
-							selectedKind = 'trigger'
+						label="MCP"
+						onSelect={() => {
+							dispatch('pickMcpTool')
+							dispatch('close')
 						}}
 					/>
-				{/if}
-				<TopLevelNode
-					label="Approval/Prompt"
-					selected={selectedKind === 'approval'}
-					on:select={() => {
-						selectedKind = 'approval'
-					}}
-				/>
-				{#if customUi?.flowNode != false}
 					<TopLevelNode
-						label="Flow"
-						selected={selectedKind === 'flow'}
-						on:select={() => {
-							selectedKind = 'flow'
+						label="Web Search"
+						onSelect={() => {
+							dispatch('pickWebsearchTool')
+							dispatch('close')
 						}}
 					/>
-				{/if}
-				{#if stop}
+				{:else}
+					{#if customUi?.triggers != false && allowTrigger}
+						<TopLevelNode
+							label="Trigger"
+							selected={selectedKind === 'trigger'}
+							onSelect={() => {
+								selectedKind = 'trigger'
+							}}
+						/>
+					{/if}
 					<TopLevelNode
-						label="End flow"
-						selected={selectedKind === 'script'}
-						on:select={() => {
-							selectedKind = 'script'
+						label="Approval/Prompt"
+						selected={selectedKind === 'approval'}
+						onSelect={() => {
+							selectedKind = 'approval'
 						}}
 					/>
-				{/if}
+					{#if customUi?.flowNode != false}
+						<TopLevelNode
+							label="Flow"
+							selected={selectedKind === 'flow'}
+							onSelect={() => {
+								selectedKind = 'flow'
+							}}
+						/>
+					{/if}
+					{#if stop}
+						<TopLevelNode
+							label="End flow"
+							selected={selectedKind === 'script'}
+							onSelect={() => {
+								selectedKind = 'script'
+							}}
+						/>
+					{/if}
 
-				<TopLevelNode
-					label="For loop"
-					on:select={() => {
-						dispatch('close')
-						dispatch('new', { kind: 'forloop' })
-					}}
-				/>
-				<TopLevelNode
-					label="While loop"
-					on:select={() => {
-						dispatch('close')
-						dispatch('new', { kind: 'whileloop' })
-					}}
-				/>
-				<TopLevelNode
-					label="Branch to one"
-					on:select={() => {
-						dispatch('close')
-						dispatch('new', { kind: 'branchone' })
-					}}
-				/>
-				<TopLevelNode
-					label="Branch to all"
-					on:select={() => {
-						dispatch('close')
-						dispatch('new', { kind: 'branchall' })
-					}}
-				/>
-				{#if customUi?.aiAgent != false}
 					<TopLevelNode
-						label="AI Agent"
-						on:select={() => {
+						label="For loop"
+						onSelect={() => {
+							dispatch('close')
+							dispatch('new', { kind: 'forloop' })
+						}}
+					/>
+					<TopLevelNode
+						label="While loop"
+						onSelect={() => {
+							dispatch('close')
+							dispatch('new', { kind: 'whileloop' })
+						}}
+					/>
+					<TopLevelNode
+						label="Branch to one"
+						onSelect={() => {
+							dispatch('close')
+							dispatch('new', { kind: 'branchone' })
+						}}
+					/>
+					<TopLevelNode
+						label="Branch to all"
+						onSelect={() => {
 							dispatch('close')
-							dispatch('new', { kind: 'aiagent' })
+							dispatch('new', { kind: 'branchall' })
 						}}
 					/>
+					{#if customUi?.aiAgent != false}
+						<TopLevelNode
+							label="AI Agent"
+							onSelect={() => {
+								dispatch('close')
+								dispatch('new', { kind: 'aiagent' })
+							}}
+						/>
+					{/if}
 				{/if}
 			</div>
 		{/if}
@@ -150,7 +172,6 @@ let displayPath = $derived(width > 650 || height > 400);
 			on:pickScript
 			on:pickFlow
 			{preFilter}
-			{small}
 			{displayPath}
 			refreshCount={refreshCount.val}
 		/>

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

@@ -4,7 +4,7 @@ interface Props {
     disableAi?: boolean;
     kind?: 'script' | 'trigger' | 'preprocessor' | 'failure';
     allowTrigger?: boolean;
-    scriptOnly?: boolean;
+    toolMode?: 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> & {
@@ -25,6 +25,8 @@ declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<Props, {
     pickScript: any;
     pickFlow: any;
     close: CustomEvent<any>;
+    pickMcpTool: CustomEvent<any>;
+    pickWebsearchTool: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "funcDesc">;

package/package/components/flows/map/InsertModulePopover.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">import InsertModuleInner from './InsertModuleInner.svelte';
+import Popover from '../../meltComponents/Popover.svelte';
+let { funcDesc = $bindable(''), kind = 'script', disableAi = false, trigger: triggerSnippet, allowTrigger = false, gutter = 0 } = $props();
+let popover;
+$effect(() => {
+    !popover?.isOpened() && (funcDesc = '');
+});
+</script>
+
+<Popover
+	bind:this={popover}
+	portal="#flow-editor"
+	contentClasses="p-2 max-w-lg h-[400px] !resize bg-surface"
+	class="inline-block"
+	usePointerDownOutside
+	floatingConfig={{
+		placement: 'bottom',
+		strategy: 'absolute',
+		gutter,
+		overflowPadding: 16,
+		flip: true,
+		fitViewport: true,
+		overlap: false
+	}}
+>
+	{#snippet trigger()}
+		{@render triggerSnippet?.()}
+	{/snippet}
+	{#snippet content({ close })}
+		<InsertModuleInner
+			on:close={() => close()}
+			on:insert
+			on:new
+			on:pickFlow
+			on:pickScript
+			{allowTrigger}
+			{kind}
+			{disableAi}
+		/>
+	{/snippet}
+</Popover>

package/package/components/{ConfirmButton.svelte.d.ts → flows/map/InsertModulePopover.svelte.d.ts}

@@ -1,3 +1,13 @@
+import type { Placement } from '@floating-ui/core';
+interface Props {
+    allowTrigger?: boolean;
+    funcDesc?: string;
+    kind?: 'script' | 'trigger' | 'preprocessor' | 'failure';
+    placement?: Placement;
+    disableAi?: boolean;
+    trigger: import('svelte').Snippet;
+    gutter?: number;
+}
 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,21 +21,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ConfirmButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    confirmation?: string;
-}, {
-    default: {};
-}>, {
-    click: CustomEvent<any>;
+declare const InsertModulePopover: $$__sveltets_2_IsomorphicComponent<Props, {
+    insert: CustomEvent<any>;
+    new: CustomEvent<any>;
+    pickFlow: any;
+    pickScript: any;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ConfirmButton = InstanceType<typeof ConfirmButton>;
-export default ConfirmButton;
+}, {}, {}, "funcDesc">;
+type InsertModulePopover = InstanceType<typeof InsertModulePopover>;
+export default InsertModulePopover;

package/package/components/flows/map/MapItem.svelte

@@ -6,14 +6,16 @@ import { prettyLanguage } from '../../../common';
 import { msToSec } from '../../../utils';
 import FlowJobsMenu from './FlowJobsMenu.svelte';
 import { isTriggerStep } from '../../graph/graphBuilder.svelte';
-import { checkIfParentLoop } from '../utils';
+import { checkIfParentLoop } from '../utils.svelte';
 import { twMerge } from 'tailwind-merge';
-let { onSelectedIteration, moduleId, mod = $bindable(), insertable, annotation = undefined, bgColor = '', bgHoverColor = '', moving = undefined, duration_ms = undefined, retries = undefined, flowJobs, editMode = false, onSelect, onTestUpTo, onUpdateMock, onEditInput, flowJob, isOwner = false, type, darkMode, skipped } = $props();
-const { selectedId } = getContext('FlowGraphContext');
-const { flowStore } = getContext('FlowEditorContext') || {};
+import { getGraphContext } from '../../graph/graphContext';
+let { onSelectedIteration, moduleId, mod = $bindable(), insertable, moduleAction = undefined, annotation = undefined, nodeState, moving = undefined, duration_ms = undefined, retries = undefined, flowJobs, editMode = false, onSelect, onTestUpTo, onUpdateMock, onEditInput, flowJob, isOwner = false, maximizeSubflow } = $props();
+const { selectionManager } = getGraphContext();
+const flowEditorContext = getContext('FlowEditorContext');
+const { flowStore } = flowEditorContext || {};
 const dispatch = createEventDispatcher();
 let itemProps = $derived({
-    selected: $selectedId === mod.id,
+    selected: selectionManager && selectionManager.isNodeSelected(mod.id),
     retry: mod.retry?.constant != undefined || mod.retry?.exponential != undefined,
     earlyStop: mod.stop_after_if != undefined || mod.stop_after_all_iters_if != undefined,
     skip: Boolean(mod.skip_if),
@@ -24,23 +26,29 @@ let itemProps = $derived({
     concurrency: Boolean(mod?.value?.['concurrent_limit'])
 });
 let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.val, mod.id) : undefined);
+function handlePointerDown(e) {
+    // Only handle left clicks (button 0)
+    if (e.detail.button === 0) {
+        onSelect(mod.id);
+    }
+}
 </script>
 
 {#if mod}
 	<div class="relative">
 		{#if moving == mod.id}
 			<div class="absolute z-10 right-20 top-0.5 center-center">
-				<Button color="dark" on:click={() => dispatch('move')} size="xs" variant="border">
-					Cancel move
-				</Button>
+				<Button variant="accent" on:click={() => dispatch('move')} size="xs" destructive
+					>Cancel move</Button
+				>
 			</div>
 		{/if}
 
 		{#if duration_ms}
 			<div
 				class={twMerge(
-					'absolute z-10 right-0 -top-4 center-center text-tertiary text-2xs',
-					editMode ? 'text-gray-400 dark:text-gray-500 text-2xs font-normal mr-2 right-10' : ''
+					'absolute z-5 right-0 -top-4 center-center text-primary text-2xs',
+					editMode ? 'text-gray-400 dark:text-gray-500 text-2xs font-normal mr-2 right-16' : ''
 				)}
 			>
 				{msToSec(duration_ms)}s
@@ -49,7 +57,7 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 		{#if annotation && annotation != ''}
 			<div
 				class={twMerge(
-					'absolute z-10 left-0 -top-5 center-center text-tertiary',
+					'absolute z-10 left-0 -top-5 center-center text-primary',
 					editMode ? '-top-4 text-gray-400 dark:text-gray-500 text-xs font-normal' : ''
 				)}
 			>
@@ -75,23 +83,23 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 				<FlowModuleSchemaItem
 					deletable={insertable}
 					{editMode}
+					{moduleAction}
 					label={`${
 						mod.summary || (mod.value.type == 'forloopflow' ? 'For loop' : 'While loop')
 					}  ${mod.value.parallel ? '(parallel)' : ''} ${
 						mod.value.skip_failures ? '(skip failures)' : ''
-					}`}
+					} ${mod.value.squash ? '(squash)' : ''}`}
 					id={mod.id}
 					on:changeId
 					on:move
 					on:delete
-					on:pointerdown={() => onSelect(mod.id)}
+					on:pointerdown={handlePointerDown}
 					onUpdateMock={(mock) => {
 						mod.mock = mock
 						onUpdateMock?.({ id: mod.id, mock })
 					}}
 					{...itemProps}
-					{bgColor}
-					{bgHoverColor}
+					{nodeState}
 					warningMessage={mod?.value?.type === 'forloopflow' &&
 					mod?.value?.iterator?.type === 'javascript' &&
 					mod?.value?.iterator?.expr === ''
@@ -100,8 +108,6 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					alwaysShowOutputPicker={!mod.id.startsWith('subflow:')}
 					loopStatus={{ type: 'self', flow: mod.value.type }}
 					{onTestUpTo}
-					{type}
-					{darkMode}
 				>
 					{#snippet icon()}
 						<FlowModuleIcon module={mod} />
@@ -111,18 +117,16 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 				<FlowModuleSchemaItem
 					deletable={insertable}
 					{editMode}
+					{moduleAction}
 					on:changeId
 					on:delete
 					on:move
-					on:pointerdown={() => onSelect(mod.id)}
+					on:pointerdown={handlePointerDown}
 					{...itemProps}
 					id={mod.id}
 					label={mod.summary || 'Run one branch'}
-					{bgColor}
-					{bgHoverColor}
+					{nodeState}
 					{onTestUpTo}
-					{type}
-					{darkMode}
 				>
 					{#snippet icon()}
 						<FlowModuleIcon module={mod} />
@@ -132,18 +136,16 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 				<FlowModuleSchemaItem
 					deletable={insertable}
 					{editMode}
+					{moduleAction}
 					on:changeId
 					on:delete
 					on:move
-					on:pointerdown={() => onSelect(mod.id)}
+					on:pointerdown={handlePointerDown}
 					id={mod.id}
 					{...itemProps}
 					label={mod.summary || `Run all branches${mod.value.parallel ? ' (parallel)' : ''}`}
-					{bgColor}
-					{bgHoverColor}
+					{nodeState}
 					{onTestUpTo}
-					{type}
-					{darkMode}
 				>
 					{#snippet icon()}
 						<FlowModuleIcon module={mod} />
@@ -153,8 +155,9 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 				<FlowModuleSchemaItem
 					{retries}
 					{editMode}
+					{moduleAction}
 					on:changeId
-					on:pointerdown={() => onSelect(mod.id)}
+					on:pointerdown={handlePointerDown}
 					on:delete
 					on:move
 					onUpdateMock={(mock) => {
@@ -167,8 +170,7 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					id={mod.id}
 					{...itemProps}
 					modType={mod.value.type}
-					{bgColor}
-					{bgHoverColor}
+					{nodeState}
 					label={mod.summary ||
 						(mod.value.type === 'aiagent' ? 'AI Agent' : undefined) ||
 						(mod.id === 'preprocessor'
@@ -190,9 +192,7 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					{flowJob}
 					{isOwner}
 					enableTestRun
-					{type}
-					{darkMode}
-					{skipped}
+					{maximizeSubflow}
 				>
 					{#snippet icon()}
 						{@const size =

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

@@ -1,12 +1,14 @@
-import type { FlowModule, FlowStatusModule, Job } from '../../../gen';
+import type { FlowModule, Job } from '../../../gen';
 import { type onSelectedIteration } from '../../graph/graphBuilder.svelte';
+import type { FlowNodeState } from '../../graph';
+import type { ModuleActionInfo } from '../flowDiff';
 interface Props {
     moduleId: string;
     mod: FlowModule;
     insertable: boolean;
+    moduleAction: ModuleActionInfo | undefined;
     annotation?: string | undefined;
-    bgColor?: string;
-    bgHoverColor?: string;
+    nodeState?: FlowNodeState;
     moving?: string | undefined;
     duration_ms?: number | undefined;
     retries?: number | undefined;
@@ -30,9 +32,7 @@ interface Props {
     onEditInput?: (moduleId: string, key: string) => void;
     flowJob?: Job | undefined;
     isOwner?: boolean;
-    type?: FlowStatusModule['type'] | undefined;
-    darkMode?: boolean;
-    skipped?: boolean;
+    maximizeSubflow?: () => void;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/flows/map/VirtualItem.svelte

@@ -5,12 +5,10 @@ import OutputPickerInner from '../propPicker/OutputPickerInner.svelte';
 import Popover from '../../Popover.svelte';
 import { fade } from 'svelte/transition';
 import { Database, Square } from 'lucide-svelte';
-import ModuleAcceptReject, { getAiModuleAction } from '../../copilot/chat/flow/ModuleAcceptReject.svelte';
-import { aiModuleActionToBgColor } from '../../copilot/chat/flow/utils';
 import FlowGraphPreviewButton from './FlowGraphPreviewButton.svelte';
-let { label = undefined, bgColor = '', bgHoverColor = '', selected, selectable, id = undefined, center = true, borderColor = undefined, hideId = false, preLabel = undefined, inputJson = undefined, prefix = '', nodeKind, cache = false, earlyStop = false, editMode = false, icon, onUpdateMock, onEditInput, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, job, showJobStatus = false, darkMode = false, flowHasChanged = false } = $props();
+import { getNodeColorClasses, aiActionToNodeState } from '../../graph';
+let { label = undefined, selected, selectable, id = undefined, center = true, hideId = false, preLabel = undefined, inputJson = undefined, prefix = '', nodeKind, cache = false, earlyStop = false, editMode = false, action = undefined, icon, onUpdateMock, onEditInput, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, job, showJobStatus = false, flowHasChanged = false } = $props();
 const outputPickerVisible = $derived((nodeKind || (inputJson && Object.keys(inputJson).length > 0)) && editMode);
-let action = $derived(label === 'Input' ? getAiModuleAction(label) : undefined);
 let hoverButton = $state(false);
 const outputType = $derived(showJobStatus
     ? job?.type === 'QueuedJob'
@@ -21,36 +19,32 @@ const outputType = $derived(showJobStatus
                 : 'Failure'
             : undefined
     : undefined);
+// AI action colors take priority over execution state, fallback to _VirtualItem
+const effectiveState = $derived(aiActionToNodeState(action) ?? outputType ?? '_VirtualItem');
+let colorClasses = $derived(getNodeColorClasses(effectiveState, selected));
 </script>
 
 <VirtualItemWrapper
 	{label}
-	{bgColor}
-	{bgHoverColor}
-	{selected}
 	{selectable}
 	{id}
 	outputPickerVisible={outputPickerVisible ?? false}
-	className={editMode ? aiModuleActionToBgColor(action) : ''}
+	{colorClasses}
 	on:select
 >
 	{#snippet children({ hover })}
-		{#if editMode}
-			<ModuleAcceptReject id="Input" {action} />
-		{/if}
 		<div class="flex flex-col w-full">
 			<div
-				style={borderColor ? `border-color: ${borderColor};` : 'border: 0'}
-				class="flex flex-row justify-between {center
+				class="flex flex-row justify-between {colorClasses.outline} {center
 					? 'items-center'
-					: 'items-baseline'} w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400 dark:border-gray-600"
+					: 'items-baseline'} w-full overflow-hidden rounded-md p-2 text-2xs module text-primary"
 			>
 				{#if icon}
 					{@render icon?.()}
 				{/if}
 				<div class="flex flex-col flex-grow shrink-0 max-w-full min-w-0">
 					{#if label}
-						<div class="truncate text-center">{label}</div>
+						<div class="truncate text-center {colorClasses.text}">{label}</div>
 					{/if}
 					{#if preLabel}
 						<div class="truncate text-2xs text-center"><pre>{preLabel}</pre></div>
@@ -71,8 +65,6 @@ const outputType = $derived(showJobStatus
 					id={id ?? ''}
 					isConnectingCandidate={nodeKind !== 'result'}
 					variant="virtual"
-					type={outputType}
-					{darkMode}
 				>
 					{#snippet children({ allowCopy, isConnecting, selectConnection })}
 						<OutputPickerInner

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

@@ -1,13 +1,10 @@
 import type { Job } from '../../../gen';
 interface Props {
     label?: string | undefined;
-    bgColor?: string;
-    bgHoverColor?: string;
     selected: boolean;
     selectable: boolean;
     id?: string | undefined;
     center?: boolean;
-    borderColor?: string | undefined;
     hideId?: boolean;
     preLabel?: string | undefined;
     inputJson?: Object | undefined;
@@ -15,6 +12,7 @@ interface Props {
     cache?: boolean;
     earlyStop?: boolean;
     editMode?: boolean;
+    action?: 'added' | 'removed' | 'modified' | 'shadowed' | undefined;
     icon?: import('svelte').Snippet;
     onUpdateMock?: (mock: {
         enabled: boolean;
@@ -29,9 +27,7 @@ interface Props {
     individualStepTests?: boolean;
     nodeKind?: 'input' | 'result';
     job?: Job;
-    type?: string;
     showJobStatus?: boolean;
-    darkMode?: boolean;
     flowHasChanged?: 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> {

package/package/components/flows/map/VirtualItemWrapper.svelte

@@ -1,7 +1,8 @@
-<script lang="ts">import { classNames } from '../../../utils';
+<script lang="ts">import { NODE } from '../../graph';
+import { classNames } from '../../../utils';
 import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-let { label, selectable, selected, id, onTop = false, bgColor, bgHoverColor = '', children, outputPickerVisible = false, className, previewButton } = $props();
+let { label, selectable, id, onTop = false, children, className, previewButton, colorClasses } = $props();
 const dispatch = createEventDispatcher();
 let hover = $state(false);
 </script>
@@ -10,10 +11,13 @@ let hover = $state(false);
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class={classNames('w-full flex relative rounded-sm', onTop ? 'z-[901]' : '', className)}
-		style="width: 275px; max-height: 34px; background-color: {hover && bgHoverColor && selectable
-			? bgHoverColor
-			: bgColor};"
+		class={classNames(
+			'w-full flex relative rounded-md drop-shadow-base',
+			colorClasses.bg,
+			onTop ? 'z-[901]' : '',
+			className
+		)}
+		style="width: {NODE.width}px; height: {NODE.height}px;"
 		onpointerdown={() => {
 			if (selectable) {
 				dispatch('select', id || label || '')
@@ -28,15 +32,7 @@ let hover = $state(false);
 		title={label ? label + ' ' : ''}
 		id={`flow-editor-virtual-${encodeURIComponent(label || label || '')}`}
 	>
-		<div
-			class={twMerge(
-				'absolute  outline-gray-600 dark:outline-gray-400 rounded-sm',
-				selected ? 'outline outline-2' : '',
-				selectable ? 'cursor-pointer active:outline active:outline-2' : ''
-			)}
-			style={`width: 275px; height: ${outputPickerVisible ? '50px' : '34px'};`}
-		>
-		</div>
+		<div class={twMerge('absolute rounded-md inset-0', selectable ? 'cursor-pointer' : '')}> </div>
 		{@render children?.({ hover })}
 	</div>