windmill-components 1.642.0 → 1.655.0

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

@@ -78,7 +78,6 @@ export declare class NoteEditor {
     cleanupGroupNotes(flowNodes: {
         id: string;
         parentIds?: string[];
-        offset?: number;
     }[]): void;
 }
 /**

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

@@ -24,6 +24,10 @@ export declare class NoteManager {
      * Deselect a note by ID (single selection only)
      */
     deselectNote(noteId?: string): void;
+    /**
+     * Get the currently selected note ID
+     */
+    get selectedNoteId(): string | undefined;
     /**
      * Check if a note is currently selected
      */

package/package/components/graph/noteManager.svelte.js

@@ -110,6 +110,12 @@ export class NoteManager {
             this.#selectedNoteId = undefined;
         }
     }
+    /**
+     * Get the currently selected note ID
+     */
+    get selectedNoteId() {
+        return this.#selectedNoteId;
+    }
     /**
      * Check if a note is currently selected
      */

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

@@ -14,7 +14,6 @@ export type NodeDep = {
         assets?: AssetWithAltAccessType[];
     };
     parentIds?: string[];
-    offset?: number;
     type?: string;
 };
 export type NoteComputeResult = {

package/package/components/graph/noteUtils.svelte.js

@@ -138,7 +138,6 @@ function calculateGroupNoteLayout(note, nodes, textHeight = 60, topMostNodeId) {
     const bounds = calculateNodesBoundsWithOffset(note.contained_node_ids || [], nodes.map((n) => ({
         id: n.id,
         position: n.position,
-        data: { offset: n.offset ?? 0 },
         type: n.type ?? ''
     })));
     const padding = 16;
@@ -233,7 +232,6 @@ export function computeNoteNodes(nodes, notes, noteTextHeights, onTextHeightChan
         return {
             ...n,
             data: origNode?.data,
-            offset: origNode?.offset,
             type: origNode?.type
         };
     });

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

@@ -1,6 +1,6 @@
 <script lang="ts">import InsertModulePopover from '../../../flows/map/InsertModulePopover.svelte';
 import { getBezierPath, BaseEdge, EdgeLabel } from '@xyflow/svelte';
-import { ClipboardCopy, Hourglass } from 'lucide-svelte';
+import { CircleDot, Hourglass } from 'lucide-svelte';
 import { getStraightLinePath } from '../utils';
 import { twMerge } from 'tailwind-merge';
 import { NODE_WITH_WRITE_ASSET_Y_OFFSET } from '../nodes/AssetNode.svelte';
@@ -8,10 +8,8 @@ import { workspaceStore } from '../../../../stores';
 import FlowStatusWaitingForEvents from '../../../FlowStatusWaitingForEvents.svelte';
 import InsertModuleButton from '../../../flows/map/InsertModuleButton.svelte';
 import { getGraphContext } from '../../graphContext';
-const { useDataflow, showAssets } = getGraphContext();
-let { 
-// id,
-sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd, 
+const { useDataflow, showAssets, moveManager } = getGraphContext();
+let { id, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd, 
 // style,
 data } = $props();
 let [edgePath] = $derived(getBezierPath({
@@ -31,16 +29,39 @@ let completeEdge = $derived(targetY - sourceY > 100
 let waitingForEvents = $derived(data?.flowModuleStates?.[data.targetId]?.type === 'WaitingForEvents' ||
     data?.flowModuleStates?.[`${data.sourceId}-v`]?.type === 'WaitingForEvents');
 let suspendStatus = $derived(data?.suspendStatus);
+let centerY = $derived(sourceY +
+    32 +
+    (data.shouldOffsetInsertBtnDueToAssetNode && $showAssets ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0));
+let isDragging = $derived(!!moveManager?.dragging);
+let draggedId = $derived(moveManager?.dragging?.moduleId);
+let isValidDropTarget = $derived(isDragging &&
+    data?.insertable &&
+    draggedId !== undefined &&
+    !data.disableMoveIds?.includes(draggedId) &&
+    data.sourceId !== draggedId &&
+    data.targetId !== draggedId);
+let isNearestDrop = $derived(isValidDropTarget && moveManager?.nearestDropZone?.edgeId === id);
+let isAdjacentToDragged = $derived(isDragging && (data?.sourceId === draggedId || data?.targetId === draggedId));
+// Register this edge's drop zone position with the drag manager so proximity
+// detection uses the actual xyflow-computed position rather than re-deriving it.
+$effect(() => {
+    if (!data?.insertable || !moveManager)
+        return;
+    const centerX = sourceX;
+    moveManager.registerDropZone(id, {
+        sourceId: data.sourceId,
+        targetId: data.targetId,
+        branch: data.branch,
+        index: data.index,
+        disableMoveIds: data.disableMoveIds ?? [],
+        centerX,
+        centerY
+    });
+    return () => moveManager.unregisterDropZone(id);
+});
 </script>
 
-<EdgeLabel
-	x={sourceX}
-	y={sourceY +
-		32 +
-		(data.shouldOffsetInsertBtnDueToAssetNode && $showAssets ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
-	class="base-edge"
-	style=""
->
+<EdgeLabel x={sourceX} y={centerY} class="base-edge" style="">
 	{#if waitingForEvents && data.flowJob && data.flowJob.type === 'QueuedJob'}
 		<div
 			class="px-2 py-0.5 rounded-md bg-surface shadow-md text-violet-700 dark:text-violet-400 text-xs flex items-center gap-1"
@@ -75,7 +96,17 @@ let suspendStatus = $derived(data?.suspendStatus);
 				</div>
 			{/if}
 		</div>
-	{:else if data?.insertable && !$useDataflow && !data?.moving}
+	{:else if isDragging && isValidDropTarget}
+		<div class="edgeButtonContainer nodrag nopan" style:transform="translate(-50%, -50%)">
+			<div class="relative flex items-center justify-center" style="width: 275px; height: 20px;">
+				{#if isNearestDrop}
+					<div class="absolute inset-0 rounded-md bg-accent/5 transition-opacity duration-150"
+					></div>
+				{/if}
+				{@render dropTargetIndicator(isNearestDrop)}
+			</div>
+		</div>
+	{:else if data?.insertable && !$useDataflow && !moveManager?.movingModuleId && !isDragging}
 		<div
 			class={twMerge('edgeButtonContainer nodrag nopan top-0')}
 			style:transform="translate(-50%, -50%)"
@@ -125,9 +156,9 @@ let suspendStatus = $derived(data?.suspendStatus);
 		</div>
 	{/if}
 
-	{#if data?.moving}
+	{#if moveManager?.movingModuleId && data?.insertable}
 		<div class="edgeButtonContainer nodrag nopan" style:transform="translate(-50%, -50%)">
-			{#if data.moving && !data.disableMoveIds?.includes(data.moving)}
+			{#if !(moveManager.movingIds ?? [moveManager.movingModuleId]).some((id) => data.disableMoveIds?.includes(id))}
 				<button
 					title="Paste module"
 					onclick={() => {
@@ -139,24 +170,34 @@ let suspendStatus = $derived(data?.suspendStatus);
 						})
 					}}
 					type="button"
-					class={twMerge(
-						'w-6 h-6 flex items-center justify-center',
-						'border border-gray-300 dark:border-gray-500',
-						'text-primary text-sm',
-						'bg-surface focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected rounded-full '
-					)}
+					class="group relative flex items-center justify-center"
+					style="width: 275px; height: 20px;"
 				>
-					<ClipboardCopy size={14} />
+					<div
+						class="absolute inset-0 rounded-md bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+					></div>
+					{@render dropTargetIndicator(false)}
 				</button>
 			{/if}
 		</div>
 	{/if}
 </EdgeLabel>
 
+{#snippet dropTargetIndicator(highlighted: boolean)}
+	<div
+		class={twMerge(
+			'w-[20px] h-[20px] flex items-center justify-center rounded-md bg-surface-secondary transition-all duration-150 group-hover:text-accent',
+			highlighted ? 'text-accent' : 'text-primary'
+		)}
+	>
+		<CircleDot size={12} />
+	</div>
+{/snippet}
+
 <BaseEdge
 	path={completeEdge}
 	{markerEnd}
-	class={$useDataflow ? 'hidden' : ''}
+	class={$useDataflow ? 'hidden' : isAdjacentToDragged ? 'opacity-30' : ''}
 	interactionWidth={0}
 	style={undefined}
 	label={undefined}

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

@@ -11,7 +11,6 @@ type $$ComponentProps = EdgeProps & {
             branch: number;
         } | undefined;
         targetId: string;
-        moving: string | undefined;
         eventHandlers: GraphEventHandlers;
         index: number;
         enableTrigger: boolean;

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { BaseEdge } from '@xyflow/svelte';
-export let markerEnd = undefined;
+let { markerEnd = undefined } = $props();
 </script>
 
 <BaseEdge path={''} {markerEnd} class="hidden" />

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

@@ -1,20 +1,6 @@
-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 HiddenBaseEdge: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     markerEnd?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type HiddenBaseEdge = InstanceType<typeof HiddenBaseEdge>;
+}
+declare const HiddenBaseEdge: import("svelte").Component<Props, {}, "">;
+type HiddenBaseEdge = ReturnType<typeof HiddenBaseEdge>;
 export default HiddenBaseEdge;

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

@@ -134,7 +134,7 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                             ? inputToolWidth + inputToolXGap
                             : isLastRow && tools.length % 2 === 1
                                 ? (ROW_WIDTH - inputToolWidth) / 2
-                                : 0) + node.data.offset,
+                                : 0),
                     y: baseOffset +
                         rowOffset *
                             (agentActions
@@ -162,7 +162,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 + node.data.offset,
+                    x: (ROW_WIDTH - NEW_TOOL_NODE_WIDTH) / 2,
                     y: baseOffset + rowOffset
                 },
                 selectable: false
@@ -211,13 +211,13 @@ import { getNodeColorClasses } from '../../util';
 import { deepEqual } from 'fast-equals';
 import { getGraphContext } from '../../graphContext';
 let hover = $state(false);
-let { data } = $props();
+let { data, id } = $props();
 const { selectionManager } = getGraphContext();
 const flowModuleState = $derived(data.flowModuleStates?.[data.moduleId]);
 let colorClasses = $derived(getNodeColorClasses(!validateToolName(data.tool, data.type) ? 'Failure' : flowModuleState?.type, selectionManager?.getSelectedId() === data.moduleId));
 </script>
 
-<NodeWrapper>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div

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

@@ -20,6 +20,7 @@ import type { Edge, Node } from '@xyflow/svelte';
 import type { GraphModuleState } from '../../model';
 interface Props {
     data: AiToolN['data'];
+    id?: string;
 }
 declare const AIToolNode: import("svelte").Component<Props, {}, "">;
 type AIToolNode = ReturnType<typeof AIToolNode>;

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

@@ -190,12 +190,12 @@ import { Tooltip } from '../../../meltComponents';
 import { clone, pluralize } from '../../../../utils';
 import AssetGenericIcon from '../../../icons/AssetGenericIcon.svelte';
 import { getNodeColorClasses, NODE } from '../../util';
-import { globalDbManagerDrawer, userStore } from '../../../../stores';
+import { userStore } from '../../../../stores';
 import { deepEqual } from 'fast-equals';
 import { slide } from 'svelte/transition';
 import AssetColumnBadges from '../../../assets/AssetColumnBadges.svelte';
 const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
-let { data } = $props();
+let { data, id } = $props();
 const isSelected = $derived(assetEq(flowGraphAssetsCtx?.val.selectedAsset, data.asset));
 const cachedResourceMetadata = $derived.by(() => {
     if (data.asset.kind !== 'resource')
@@ -209,7 +209,7 @@ let assetColumns = $derived(data.asset.columns &&
     Object.fromEntries(Object.entries(data.asset.columns).filter(([_, accessType]) => accessType && accessType === data.displayedAccessType)));
 </script>
 
-<NodeWrapper wrapperClass="bg-surface-secondary rounded-md">
+<NodeWrapper wrapperClass="bg-surface-secondary rounded-md" nodeId={id}>
 	{#snippet children({ darkMode })}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<Tooltip customBgClass="bg-surface-tertiary">
@@ -244,7 +244,9 @@ let assetColumns = $derived(data.asset.columns &&
 				{#if data.asset.kind === 'resource' && cachedResourceMetadata === undefined}
 					<Tooltip class={'pr-1 flex items-center justify-center'}>
 						<AlertTriangle size={16} class="text-orange-500" />
-						<svelte:fragment slot="text">Could not find resource</svelte:fragment>
+						{#snippet text()}
+												Could not find resource
+											{/snippet}
 					</Tooltip>
 				{:else if isSelected && assetCanBeExplored(data.asset, cachedResourceMetadata) && !$userStore?.operator}
 					<div transition:slide={{ axis: 'x', duration: 100 }}>
@@ -254,34 +256,35 @@ let assetColumns = $derived(data.asset.columns &&
 							noText
 							buttonVariant="accent"
 							s3FilePicker={flowGraphAssetsCtx?.val.s3FilePicker}
-							dbManagerDrawer={globalDbManagerDrawer.val}
 							_resourceMetadata={cachedResourceMetadata}
 						/>
 					</div>
 				{/if}
 			</div>
-			<svelte:fragment slot="text">
-				{#if usageCount !== undefined}
-					Used in {pluralize(usageCount, 'step')}<br />
-				{/if}
-				<a
-					href={undefined}
-					class={twMerge(
-						'text-xs',
-						data.asset.kind === 'resource' ? 'text-accent cursor-pointer' : 'text-hint'
-					)}
-					onclick={() => {
-						if (data.asset.kind === 'resource')
-							flowGraphAssetsCtx?.val.resourceEditorDrawer?.initEdit(data.asset.path)
-					}}
-				>
-					{data.asset.path}
-				</a><br />
-				<span class="text-hint text-xs">
-					{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
-				>
-				<AssetColumnBadges columns={assetColumns} disableTooltip />
-			</svelte:fragment>
+			{#snippet text()}
+					
+					{#if usageCount !== undefined}
+						Used in {pluralize(usageCount, 'step')}<br />
+					{/if}
+					<a
+						href={undefined}
+						class={twMerge(
+							'text-xs',
+							data.asset.kind === 'resource' ? 'text-accent cursor-pointer' : 'text-hint'
+						)}
+						onclick={() => {
+							if (data.asset.kind === 'resource')
+								flowGraphAssetsCtx?.val.resourceEditorDrawer?.initEdit(data.asset.path)
+						}}
+					>
+						{data.asset.path}
+					</a><br />
+					<span class="text-hint text-xs">
+						{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
+					>
+					<AssetColumnBadges columns={assetColumns} disableTooltip />
+				
+					{/snippet}
 		</Tooltip>
 	{/snippet}
 </NodeWrapper>

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

@@ -27,6 +27,7 @@ import { type AssetWithAltAccessType } from '../../../assets/lib';
 import type { Edge, Node } from '@xyflow/svelte';
 interface Props {
     data: AssetN['data'];
+    id?: string;
 }
 declare const AssetNode: import("svelte").Component<Props, {}, "">;
 type AssetNode = ReturnType<typeof AssetNode>;

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

@@ -8,7 +8,7 @@ import AssetNode from './AssetNode.svelte';
 import { getContext } from 'svelte';
 import { assetEq } from '../../../assets/lib';
 import { getNodeColorClasses } from '../../util';
-let { data } = $props();
+let { data, id } = $props();
 const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
 let isOpen = $state(false);
 let includesSelected = $derived(data.overflowedAssets.some((asset) => assetEq(flowGraphAssetsCtx?.val.selectedAsset, asset)));
@@ -26,7 +26,7 @@ $effect(() => {
 const colors = $derived(getNodeColorClasses(undefined, includesSelected));
 </script>
 
-<NodeWrapper>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<Popover
@@ -42,18 +42,22 @@ const colors = $derived(getNodeColorClasses(undefined, includesSelected));
 			)}
 			placement="top"
 		>
-			<svelte:fragment slot="trigger">
-				+{data.overflowedAssets.length}
-			</svelte:fragment>
-			<svelte:fragment slot="content">
-				<ul>
-					{#each data.overflowedAssets as asset}
-						<li class="w-48">
-							<AssetNode data={{ asset, displayedAccessType: data.displayedAccessType }} />
-						</li>
-					{/each}
-				</ul>
-			</svelte:fragment>
+			{#snippet trigger()}
+					
+					+{data.overflowedAssets.length}
+				
+					{/snippet}
+			{#snippet content()}
+					
+					<ul>
+						{#each data.overflowedAssets as asset}
+							<li class="w-48">
+								<AssetNode data={{ asset, displayedAccessType: data.displayedAccessType }} />
+							</li>
+						{/each}
+					</ul>
+				
+					{/snippet}
 		</Popover>
 	{/snippet}
 </NodeWrapper>

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

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

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

@@ -5,7 +5,7 @@ let { data, id } = $props();
 const { selectionManager } = getGraphContext();
 </script>
 
-<NodeWrapper offset={data.offset} enableSourceHandle enableTargetHandle>
+<NodeWrapper enableSourceHandle enableTargetHandle nodeId={id}>
 	{#snippet children({ darkMode })}
 		<VirtualItem
 			label={'Collect result from all branches'}

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

@@ -7,7 +7,7 @@ let { data, id } = $props();
 const { selectionManager } = getGraphContext();
 </script>
 
-<NodeWrapper offset={data.offset}>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		<VirtualItem
 			label={data.label}

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

@@ -7,7 +7,7 @@ const { selectionManager } = getGraphContext();
 let { data, id } = $props();
 </script>
 
-<NodeWrapper offset={data.offset}>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		<VirtualItem
 			label={data.label}

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

@@ -5,7 +5,7 @@ let { data, id } = $props();
 const { selectionManager } = getGraphContext();
 </script>
 
-<NodeWrapper offset={data.offset}>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		{#if data.simplifiedTriggerView}
 			<VirtualItem

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

@@ -37,7 +37,7 @@ function isSelectedDescendant(module, selectedId) {
 let filteredInput = $derived(filterIterFromInput($pickablePropertiesFiltered?.flow_input));
 </script>
 
-<NodeWrapper offset={data.offset}>
+<NodeWrapper nodeId={id}>
 	{#snippet children({ darkMode })}
 		<VirtualItem
 			label={data.simplifiedTriggerView ? 'For each new event' : 'Do one iteration'}

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

@@ -1,9 +1,9 @@
 <script lang="ts">import MapItem from '../../../flows/map/MapItem.svelte';
-import { GitBranchPlus } from 'lucide-svelte';
+import { GitBranchPlus, Move, Copy, Trash2, StickyNote } from 'lucide-svelte';
 import NodeWrapper from './NodeWrapper.svelte';
 import { jobToGraphModuleState } from '../../../modulesTest.svelte';
 import { getNoteEditorContext } from '../../noteEditor.svelte';
-import { addGroupNoteContextMenuItem } from '../../noteUtils.svelte';
+import { isMac } from '../../../../utils';
 let { data } = $props();
 // Get NoteEditor context for group note creation
 const noteEditorContext = getNoteEditorContext();
@@ -28,10 +28,48 @@ let type = $derived.by(() => {
     return typ;
 });
 // Define context menu items
-const contextMenuItems = $derived(data.editMode ? [addGroupNoteContextMenuItem(data.id, noteEditorContext)] : []);
+let noteDisabled = $derived(!noteEditorContext?.noteEditor ||
+    (noteEditorContext?.noteEditor?.isNodeOnlyMemberOfGroupNote(data.id) ?? false));
+let isPreprocessor = $derived(data.id === 'preprocessor');
+const menuItems = $derived(data.editMode
+    ? [
+        ...(isPreprocessor
+            ? []
+            : [
+                {
+                    displayName: 'Move',
+                    icon: Move,
+                    action: () => data.eventHandlers.move({ id: data.id })
+                },
+                {
+                    displayName: 'Duplicate',
+                    icon: Copy,
+                    action: () => data.eventHandlers.duplicate({ id: data.id })
+                }
+            ]),
+        {
+            displayName: 'Delete',
+            icon: Trash2,
+            type: 'delete',
+            shortcut: isMac() ? '⌫' : 'Del',
+            action: () => data.eventHandlers.delete({ id: data.id }, '')
+        },
+        {
+            displayName: 'Add note',
+            icon: StickyNote,
+            separatorTop: true,
+            disabled: noteDisabled,
+            action: () => {
+                if (noteEditorContext?.noteEditor && !noteDisabled) {
+                    noteEditorContext.noteEditor.createGroupNote([data.id]);
+                }
+            }
+        }
+    ]
+    : []);
 </script>
 
-<NodeWrapper offset={data.offset} {contextMenuItems}>
+<NodeWrapper {menuItems}>
 	{#snippet children({ darkMode })}
 		<MapItem
 			moduleId={data.id}
@@ -39,8 +77,9 @@ const contextMenuItems = $derived(data.editMode ? [addGroupNoteContextMenuItem(d
 			insertable={data.insertable}
 			editMode={data.editMode}
 			moduleAction={data.moduleAction}
+			{menuItems}
 			annotation={flowJobs &&
-			(data.module.value.type === 'forloopflow' || data.module.value.type === 'whileloopflow')
+			(data.module?.value?.type === 'forloopflow' || data.module?.value?.type === 'whileloopflow')
 				? 'Iteration: ' +
 					((state?.selectedForloopIndex ?? 0) >= 0
 						? (state?.selectedForloopIndex ?? 0) + 1
@@ -49,7 +88,6 @@ const contextMenuItems = $derived(data.editMode ? [addGroupNoteContextMenuItem(d
 					(state?.iteration_total ?? '?')
 				: ''}
 			nodeState={state?.skipped ? '_Skipped' : type}
-			moving={data.moving}
 			duration_ms={state?.duration_ms}
 			retries={state?.retries}
 			{flowJobs}
@@ -78,15 +116,18 @@ const contextMenuItems = $derived(data.editMode ? [addGroupNoteContextMenuItem(d
 			onEditInput={data.eventHandlers.editInput}
 			flowJob={data.flowJob}
 			isOwner={data.isOwner}
-			maximizeSubflow={data.module.value.type == 'flow' && 'path' in data.module.value
+			maximizeSubflow={data.module?.value?.type == 'flow' && 'path' in data.module.value
 				? () => {
-						data.eventHandlers.expandSubflow(data.id, data.module.value['path'])
+						const path = data.module?.value && 'path' in data.module.value ? data.module.value['path'] as string : undefined
+						if (path) {
+							data.eventHandlers.expandSubflow(data.id, path)
+						}
 					}
 				: undefined}
 		/>
 
 		<div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 z-10">
-			{#if (data.module.value.type === 'branchall' || data.module.value.type === 'branchone') && data.insertable}
+			{#if (data.module?.value?.type === 'branchall' || data.module?.value?.type === 'branchone') && data.insertable}
 				<button
 					title="Add branch"
 					class="rounded text-secondary border hover:bg-surface-hover bg-surface p-1"

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

@@ -3,11 +3,15 @@ import InsertModuleInner from '../../../flows/map/InsertModuleInner.svelte';
 import { Plus } from 'lucide-svelte';
 import Popover from '../../../meltComponents/Popover.svelte';
 import { Button } from '../../../common';
+import { getGraphContext } from '../../graphContext';
 let funcDesc = $state('');
 let { data } = $props();
+const { moveManager } = getGraphContext();
+let isMoving = $derived(!!moveManager?.dragging || !!moveManager?.movingModuleId);
 let open = $state(false);
 </script>
 
+{#if !isMoving}
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <Popover
 	bind:isOpen={open}
@@ -104,3 +108,4 @@ let open = $state(false);
 		/>
 	{/snippet}
 </Popover>
+{/if}

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

@@ -1,9 +1,9 @@
 <script lang="ts">import VirtualItem from '../../../flows/map/VirtualItem.svelte';
 import NodeWrapper from './NodeWrapper.svelte';
-let { data } = $props();
+let { data, id } = $props();
 </script>
 
-<NodeWrapper offset={data.offset} enableSourceHandle enableTargetHandle>
+<NodeWrapper enableSourceHandle enableTargetHandle nodeId={id}>
 	{#snippet children({ darkMode })}
 		<VirtualItem
 			label={data.label ?? 'No branches'}

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

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