windmill-components 1.623.2 → 1.655.0

package/package/components/graph/DragGhost.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">import { untrack } from 'svelte';
+import { useSvelteFlow } from '@xyflow/svelte';
+import { getSubflowNodeIds } from './moveManager.svelte';
+import { NODE } from './util';
+import MiniFlowGraph from './MiniFlowGraph.svelte';
+import { Move } from 'lucide-svelte';
+let { moveManager, nodes, edges } = $props();
+const { getViewport } = useSvelteFlow();
+const PADDING = 10;
+/** Approximate position of the drag handle (move button) on the node,
+ *  used to offset the ghost so the dragged node aligns with the cursor.
+ *  The handle is at the top-right of the 275px-wide node (right-4 = 16px inset). */
+const DRAG_HANDLE_OFFSET = { x: -90, y: 10 };
+/** Offset so the cursor indicator icon doesn't overlap the cursor tip */
+const CURSOR_INDICATOR_OFFSET = 8;
+function getSubflowNodesAndEdges(moduleId, allNodes, allEdges) {
+    const nodeIds = getSubflowNodeIds(moduleId, allNodes, allEdges);
+    const sfNodes = allNodes.filter((n) => nodeIds.has(n.id));
+    const sfEdges = allEdges.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target));
+    return { sfNodes, sfEdges };
+}
+/** Resolve a node's position to absolute flow coordinates.
+ *  xyflow child nodes (with parentId) have positions relative to their parent. */
+function absolutePosition(n, allNodes, depth = 0) {
+    if (n.parentId && depth < 20) {
+        const parent = allNodes.find((p) => p.id === n.parentId);
+        if (parent) {
+            const parentAbs = absolutePosition(parent, allNodes, depth + 1);
+            return { x: parentAbs.x + n.position.x, y: parentAbs.y + n.position.y };
+        }
+    }
+    return { x: n.position.x, y: n.position.y };
+}
+function computeGhost(moduleId, draggedNodeIds, allNodes, allEdges) {
+    // Use pre-computed draggedNodeIds when available (covers multi-select),
+    // otherwise fall back to single-module subflow computation.
+    let sfNodes;
+    let sfEdges;
+    if (draggedNodeIds.size > 0) {
+        sfNodes = allNodes.filter((n) => draggedNodeIds.has(n.id));
+        sfEdges = allEdges.filter((e) => draggedNodeIds.has(e.source) && draggedNodeIds.has(e.target));
+    }
+    else {
+        const result = getSubflowNodesAndEdges(moduleId, allNodes, allEdges);
+        sfNodes = result.sfNodes;
+        sfEdges = result.sfEdges;
+    }
+    if (sfNodes.length === 0)
+        return undefined;
+    // Compute bounding box using absolute positions
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const n of sfNodes) {
+        const abs = absolutePosition(n, allNodes);
+        const x = abs.x;
+        const y = abs.y;
+        const w = n.measured?.width ?? NODE.width;
+        const h = n.measured?.height ?? NODE.height;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x + w);
+        maxY = Math.max(maxY, y + h);
+    }
+    const bbWidth = maxX - minX + PADDING * 2;
+    const bbHeight = maxY - minY + PADDING * 2;
+    const scale = getViewport().zoom;
+    const containerWidth = Math.round(bbWidth * scale);
+    const containerHeight = Math.round(bbHeight * scale);
+    // Compute the offset so the dragged node's center aligns with the cursor
+    const mainNode = sfNodes.find((n) => n.id === moduleId);
+    let offsetX = containerWidth / 2;
+    let offsetY = containerHeight / 2;
+    if (mainNode) {
+        const mainAbs = absolutePosition(mainNode, allNodes);
+        const mx = mainAbs.x - minX + PADDING;
+        const my = mainAbs.y - minY + PADDING;
+        const mw = mainNode.measured?.width ?? NODE.width;
+        const mh = mainNode.measured?.height ?? NODE.height;
+        offsetX = (mx + mw / 2) * scale;
+        offsetY = (my + mh / 2) * scale;
+    }
+    // Clone nodes/edges with interactive features disabled
+    const ghostNodes = sfNodes.map((n) => ({
+        ...n,
+        data: { ...n.data, insertable: false, editMode: false }
+    }));
+    const ghostEdges = sfEdges.map((e) => ({
+        ...e,
+        data: { ...e.data, insertable: false, editMode: false }
+    }));
+    // Viewport so the ghost renders at the same zoom as the main flow
+    const initialViewport = {
+        x: (PADDING - minX) * scale,
+        y: (PADDING - minY) * scale,
+        zoom: scale
+    };
+    return { containerWidth, containerHeight, ghostNodes, ghostEdges, offsetX, offsetY, initialViewport };
+}
+let isNearDrop = $derived(moveManager.nearestDropZone != null);
+let ghost = $derived.by(() => {
+    const moduleId = moveManager.dragging?.moduleId;
+    if (!moduleId)
+        return undefined;
+    return untrack(() => computeGhost(moduleId, moveManager.draggedNodeIds, nodes, edges));
+});
+</script>
+
+{#if moveManager.dragging}
+	<div
+		class="fixed pointer-events-none z-[10001] flex items-center justify-center w-5 h-5 rounded-full shadow border border-border transition-colors duration-150 {isNearDrop
+			? 'bg-surface-accent-primary text-white'
+			: 'bg-surface text-secondary'}"
+		style="left: {moveManager.ghostScreenX + CURSOR_INDICATOR_OFFSET}px; top: {moveManager.ghostScreenY + CURSOR_INDICATOR_OFFSET}px;"
+	>
+		<Move size={12} />
+	</div>
+	{#if ghost}
+		<div
+			class="fixed pointer-events-none z-[10000]"
+			style="left: {moveManager.ghostScreenX +
+				DRAG_HANDLE_OFFSET.x}px; top: {moveManager.ghostScreenY +
+				DRAG_HANDLE_OFFSET.y}px; transform: translate({-ghost.offsetX}px, {-ghost.offsetY}px);"
+		>
+			<div
+				style="opacity: {isNearDrop
+					? 0.8
+					: 0.25}; width: {ghost.containerWidth}px; height: {ghost.containerHeight}px; transition: opacity 150ms ease;"
+			>
+				<MiniFlowGraph
+					nodes={ghost.ghostNodes}
+					edges={ghost.ghostEdges}
+					width={ghost.containerWidth}
+					height={ghost.containerHeight}
+					initialViewport={ghost.initialViewport}
+				/>
+			</div>
+		</div>
+	{/if}
+{/if}

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

@@ -0,0 +1,10 @@
+import { type Node, type Edge } from '@xyflow/svelte';
+import { type MoveManager } from './moveManager.svelte';
+type $$ComponentProps = {
+    moveManager: MoveManager;
+    nodes: Node[];
+    edges: Edge[];
+};
+declare const DragGhost: import("svelte").Component<$$ComponentProps, {}, "">;
+type DragGhost = ReturnType<typeof DragGhost>;
+export default DragGhost;

package/package/components/graph/FlowGraphV2.svelte

@@ -5,7 +5,7 @@ import { createFlowDiffManager } from '../flows/flowDiffManager.svelte';
 import { get, writable } from 'svelte/store';
 import '@xyflow/svelte/dist/base.css';
 import { SvelteFlow, ConnectionLineType, Controls, ControlButton, SvelteFlowProvider, SelectionMode } from '@xyflow/svelte';
-import { graphBuilder, isTriggerStep, topologicalSort } from './graphBuilder.svelte';
+import { graphBuilder, isTriggerStep } from './graphBuilder.svelte';
 import ModuleNode from './renderers/nodes/ModuleNode.svelte';
 import InputNode from './renderers/nodes/InputNode.svelte';
 import BranchAllStart from './renderers/nodes/BranchAllStart.svelte';
@@ -15,7 +15,6 @@ import ForLoopStartNode from './renderers/nodes/ForLoopStartNode.svelte';
 import ResultNode from './renderers/nodes/ResultNode.svelte';
 import BaseEdge from './renderers/edges/BaseEdge.svelte';
 import EmptyEdge from './renderers/edges/EmptyEdge.svelte';
-import { sugiyama, dagStratify, coordCenter, decrossTwoLayer, decrossOpt } from 'd3-dag';
 import { Expand, MousePointer, Hand } from 'lucide-svelte';
 import Toggle from '../Toggle.svelte';
 import DataflowEdge from './renderers/edges/DataflowEdge.svelte';
@@ -45,11 +44,14 @@ import PaneContextMenu from './PaneContextMenu.svelte';
 import { SelectionManager } from './selectionUtils.svelte';
 import { ChangeTracker } from '../../svelte5Utils.svelte';
 import { NoteManager } from './noteManager.svelte';
+import DragCoordinator from './DragCoordinator.svelte';
+import { compoundLayout } from './compoundLayout';
 import { deepEqual } from 'fast-equals';
 import { setGraphContext } from './graphContext';
 import { computeNoteNodes } from './noteUtils.svelte';
 import { Tooltip } from '../meltComponents';
 import { getNoteEditorContext } from './noteEditor.svelte';
+import { resolveSelectedModuleIds, locateModules, areContiguousSiblings } from '../flows/multiSelectUtils';
 let useDataflow = writable(false);
 let showAssets = writable(true);
 let showNotes = $state(true);
@@ -59,7 +61,7 @@ const diffManager = createFlowDiffManager();
 let fullWidth = 0;
 let width = $state(0);
 let simplifiableFlow = $state(undefined);
-let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, testModuleStates = undefined, moduleActions = undefined, selectionManager: selectionManagerProp = undefined, path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = {}, flowHasChanged = false, noteMode = false, notes = undefined, exitNoteMode = undefined, onNotePositionUpdate = undefined, chatInputEnabled = false, sharedViewport = undefined, onViewportChange = undefined, leftHeader = undefined, diffBeforeFlow = undefined, currentInputSchema = undefined, markRemovedAsShadowed = false, multiSelectEnabled = false } = $props();
+let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDuplicate = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, testModuleStates = undefined, moduleActions = undefined, selectionManager: selectionManagerProp = undefined, path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moveManager = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = {}, flowHasChanged = false, noteMode = false, notes = undefined, exitNoteMode = undefined, onNotePositionUpdate = undefined, chatInputEnabled = false, sharedViewport = undefined, onViewportChange = undefined, leftHeader = undefined, diffBeforeFlow = undefined, currentInputSchema = undefined, markRemovedAsShadowed = false, multiSelectEnabled = false, onDeleteMultiple = undefined, onDuplicateMultiple = undefined, onMoveMultiple = undefined, movingIds = undefined } = $props();
 // Initialize note manager with fine-grained reactivity
 const noteManager = new NoteManager(() => notes ?? [], (newNodes) => {
     nodes = newNodes;
@@ -70,7 +72,7 @@ let noteTextHeights = $state({});
 let paneContextMenu = $state(undefined);
 let flowContainer = $state(undefined);
 // Selection manager - create one if not provided
-let selectionManager = selectionManagerProp || new SelectionManager();
+let selectionManager = untrack(() => selectionManagerProp) || new SelectionManager();
 const selectedId = $derived(selectionManager.getSelectedId());
 const noteEditorContext = getNoteEditorContext();
 // Function to calculate extra gap needed for notes below the lowest flow nodes
@@ -87,19 +89,20 @@ function calculateNoteGap(notes) {
     return maxNoteBelowGap;
 }
 // Calculate note gap based on current nodes and notes
-const topPadding = editMode ? 100 : 24;
-const yOffset = calculateNoteGap(notes) + topPadding;
+const topPadding = untrack(() => editMode) ? 100 : 24;
+const yOffset = calculateNoteGap(untrack(() => notes)) + topPadding;
 setGraphContext({
     selectionManager: selectionManager,
     useDataflow,
     showAssets,
     noteManager,
+    moveManager: untrack(() => moveManager),
     clearFlowSelection,
     yOffset,
     diffManager
 });
-if (triggerContext && allowSimplifiedPoll) {
-    if (isSimplifiable(modules)) {
+if (triggerContext && untrack(() => allowSimplifiedPoll)) {
+    if (isSimplifiable(untrack(() => modules))) {
         triggerContext?.simplifiedPoll?.set(true);
     }
     triggerContext?.simplifiedPoll.subscribe((value) => {
@@ -134,56 +137,20 @@ function layoutNodes(nodes) {
         }
         seenId.push(n.id);
     }
-    let nodeWidths = {};
-    const nodes2 = nodes.map((n) => {
-        return { ...n, position: { x: 0, y: 0 } };
+    // Run recursive compound layout
+    const { positions, bbox } = compoundLayout(nodes, {
+        nodeWidth: NODE.width,
+        nodeHeight: NODE.height,
+        gapH: NODE.gap.horizontal,
+        gapV: NODE.gap.vertical
     });
-    for (const n of topologicalSort(nodes)) {
-        const endId = n.id + '-end';
-        if (nodeWidths[endId] != undefined) {
-            nodeWidths[n.id] = Math.max(nodeWidths[n.id] ?? 0, nodeWidths[endId]);
-        }
-        if (n.parentIds && n.parentIds?.length == 1) {
-            const parent = n.parentIds[0];
-            const nodeWidth = nodeWidths[n.id] ?? 1;
-            nodeWidths[parent] = (nodeWidths[parent] ?? 0) + nodeWidth;
-        }
-    }
-    const dag = dagStratify().id(({ id }) => id)(nodes2);
-    let boxSize;
-    try {
-        const layout = sugiyama()
-            .decross(nodes.length > 20 ? decrossTwoLayer() : decrossOpt())
-            .coord(coordCenter())
-            .nodeSize((d) => {
-            return [
-                (nodeWidths[d?.data?.['id'] ?? ''] ?? 1) * (NODE.width + NODE.gap.horizontal * 1),
-                NODE.height + NODE.gap.vertical
-            ];
-        });
-        boxSize = layout(dag);
-    }
-    catch {
-        const layout = sugiyama()
-            .decross(decrossTwoLayer())
-            .coord(coordCenter())
-            .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
-        boxSize = layout(dag);
-    }
-    const newNodes = dag.descendants().map((des) => ({
-        id: des.data.id,
+    // Center horizontally
+    const xCenter = (fullSize ? fullWidth : width) / 2 - bbox.width / 2 - (width - fullWidth) / 2;
+    const newNodes = nodes.map((n) => ({
+        id: n.id,
         position: {
-            x: des.x
-                ? // @ts-ignore
-                    (des.data.offset ?? 0) +
-                        // @ts-ignore
-                        des.x +
-                        (fullSize ? fullWidth : width) / 2 -
-                        boxSize.width / 2 -
-                        NODE.width / 2 -
-                        (width - fullWidth) / 2
-                : 0,
-            y: des.y || 0
+            x: (positions.get(n.id)?.x ?? 0) + xCenter - NODE.width / 2,
+            y: positions.get(n.id)?.y ?? 0
         }
     }));
     lastNodes = [nodes, newNodes];
@@ -218,6 +185,9 @@ let eventHandler = {
     move: (detail) => {
         onMove?.(detail.id);
     },
+    duplicate: (detail) => {
+        onDuplicate?.(detail.id);
+    },
     selectedIteration: (detail) => {
         onSelectedIteration?.(detail);
     },
@@ -288,6 +258,10 @@ let effectiveModules = $derived(diffManager.mergedFlow?.modules ?? modules);
 let effectiveFailureModule = $derived(diffManager.mergedFlow?.failure_module ?? failureModule);
 let effectivePreprocessorModule = $derived(diffManager.mergedFlow?.preprocessor_module ?? preprocessorModule);
 let canUseDiffDrawer = $derived(diffBeforeFlow || moduleActions || editMode);
+// Derived state for multi-select operations
+let resolvedModuleIds = $derived(resolveSelectedModuleIds(selectionManager.selectedIds, effectiveModules ?? []));
+let canMoveSelected = $derived(resolvedModuleIds.length > 0 &&
+    areContiguousSiblings(locateModules(resolvedModuleIds, effectiveModules ?? [])));
 // Initialize moduleTracker with effectiveModules
 let moduleTracker = $state(new ChangeTracker([]));
 let nodes = $state.raw([]);
@@ -338,6 +312,31 @@ function handleKeyDown(event) {
             exitNoteMode?.();
         }
     }
+    if ((event.key === 'Backspace' || event.key === 'Delete') && editMode) {
+        const active = document.activeElement;
+        if (active && active !== document.body && !flowContainer?.contains(active)) {
+            return;
+        }
+        if (active instanceof HTMLInputElement ||
+            active instanceof HTMLTextAreaElement ||
+            active?.getAttribute('contenteditable') === 'true') {
+            return;
+        }
+        if (noteManager.selectedNoteId && noteEditorContext) {
+            noteEditorContext.noteEditor.deleteNote(noteManager.selectedNoteId);
+            noteManager.clearNoteSelection();
+            return;
+        }
+        if (resolvedModuleIds.length > 1) {
+            onDeleteMultiple?.(resolvedModuleIds);
+        }
+        else if (resolvedModuleIds.length === 1) {
+            onDelete?.(resolvedModuleIds[0]);
+        }
+        else if (selectedId) {
+            onDelete?.(selectedId);
+        }
+    }
 }
 async function updateStores() {
     if (graph.error) {
@@ -347,7 +346,6 @@ async function updateStores() {
     let layoutedNodes = layoutNodes(Object.values(graph.nodes).map((n) => ({
         id: n.id,
         parentIds: n.parentIds,
-        offset: n.data.offset ?? 0,
         data: { assets: n.data.assets }
     })));
     let newNodes = layoutedNodes.map((n) => ({ ...n, ...graph.nodes[n.id] }));
@@ -380,7 +378,6 @@ async function updateStores() {
             id: n.id,
             position: n.position,
             parentIds: n.parentIds,
-            offset: n.data?.offset ?? 0,
             data: { assets: n.data?.assets },
             type: n.type
         })), notes ?? [], noteTextHeights, (noteId, height) => {
@@ -488,7 +485,7 @@ let graph = $derived.by(() => {
         flowHasChanged,
         chatInputEnabled,
         additionalAssetsMap: flowGraphAssetsCtx?.val.additionalAssetsMap
-    }, untrack(() => effectiveFailureModule), effectivePreprocessorModule, eventHandler, success, $useDataflow, untrack(() => selectedId), moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
+    }, untrack(() => effectiveFailureModule), effectivePreprocessorModule, eventHandler, success, $useDataflow, untrack(() => selectedId), simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
 });
 let hideAssetsToggle = $derived($showAssets && Object.values(nodes).every((n) => n.type !== 'asset'));
 let hideNotesToggle = $derived(!notes || notes.length === 0);
@@ -621,6 +618,14 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 	{:else}
 		<SvelteFlowProvider>
 			<ViewportResizer {height} {width} {nodes} bind:this={viewportResizer} />
+			{#if moveManager}
+				<DragCoordinator
+					{moveManager}
+					eventHandlers={eventHandler}
+					{edges}
+					nodes={nodesWithOffset}
+				/>
+			{/if}
 			{#if sharedViewport && onViewportChange}
 				<ViewportSynchronizer
 					{sharedViewport}
@@ -657,7 +662,7 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 				{height}
 				{width}
 				minZoom={0.2}
-				maxZoom={1.2}
+				maxZoom={1.6}
 				connectionLineType={ConnectionLineType.SmoothStep}
 				defaultEdgeOptions={{ type: 'smoothstep' }}
 				preventScrolling={scroll}
@@ -671,6 +676,7 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 				elevateNodesOnSelect={false}
 				{proOptions}
 				multiSelectionKey={'Shift'}
+				deleteKey={null}
 				nodesDraggable={false}
 				--background-color={false}
 			>
@@ -682,8 +688,17 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 
 				{#if multiSelectEnabled}
 					<SelectionBoundingBox
-						selectedNodes={selectionManager.selectedIds}
+						selectedNodes={selectionManager.selectedIds.filter((id) =>
+							nodesWithOffset.some((n) => n.id === id)
+						)}
 						allNodes={nodesWithOffset as (Node & { type: string })[]}
+						onDeleteSelected={() => onDeleteMultiple?.(resolvedModuleIds)}
+						onDuplicateSelected={() => onDuplicateMultiple?.(resolvedModuleIds)}
+						onMoveSelected={() => onMoveMultiple?.(resolvedModuleIds)}
+						onCancelMove={() => onMoveMultiple?.(movingIds ?? [])}
+						{canMoveSelected}
+						isMoving={movingIds != null && movingIds.length > 0}
+						{resolvedModuleIds}
 					/>
 				{/if}
 
@@ -695,7 +710,12 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 						{@render leftHeader()}
 					</div>
 				{:else}
-					<Controls position="top-right" orientation="horizontal" showLock={false}>
+					<Controls
+						position="top-right"
+						orientation="horizontal"
+						showLock={false}
+						fitViewOptions={{ nodes: nodes.filter((n) => n.type !== 'note') }}
+					>
 						{#if multiSelectEnabled}
 							<div class="flex items-center gap-2">
 								<Tooltip>
@@ -799,4 +819,8 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 	:global(.svelte-flow__selection) {
 		display: none;
 		pointer-events: none;
+	}
+
+	:global(.svelte-flow__selection-wrapper) {
+		pointer-events: none !important;
 	}</style>

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

@@ -3,9 +3,10 @@ import { type GraphModuleState } from '.';
 import { type Snippet } from 'svelte';
 import '@xyflow/svelte/dist/base.css';
 import { type Viewport } from '@xyflow/svelte';
-import { type InlineScript, type InsertKind, type onSelectedIteration } from './graphBuilder.svelte';
+import { type InlineScript, type InsertKind, type OnSelectedIteration } from './graphBuilder.svelte';
 import DiffDrawer from '../DiffDrawer.svelte';
 import { SelectionManager } from './selectionUtils.svelte';
+import type { MoveManager } from './moveManager.svelte';
 import type { ModulesTestStates } from '../modulesTest.svelte';
 import type { ModuleActionInfo } from '../flows/flowDiff';
 interface Props {
@@ -26,7 +27,7 @@ interface Props {
     earlyStop?: boolean;
     cache?: boolean;
     scroll?: boolean;
-    moving?: string | undefined;
+    moveManager?: MoveManager;
     download?: boolean;
     fullSize?: boolean;
     disableAi?: boolean;
@@ -48,6 +49,10 @@ interface Props {
     notes?: FlowNote[];
     chatInputEnabled?: boolean;
     multiSelectEnabled?: boolean;
+    onDeleteMultiple?: (ids: string[]) => void;
+    onDuplicateMultiple?: (ids: string[]) => void;
+    onMoveMultiple?: (ids: string[]) => void;
+    movingIds?: string[];
     onDelete?: (id: string) => void;
     onInsert?: (detail: {
         sourceId?: string;
@@ -84,12 +89,13 @@ interface Props {
         deps: Record<string, string[]>;
     }) => void;
     onMove?: (id: string) => void;
+    onDuplicate?: (id: string) => void;
     onUpdateMock?: (detail: {
         mock: FlowModule['mock'];
         id: string;
     }) => void;
     onTestUpTo?: ((id: string) => void) | undefined;
-    onSelectedIteration?: onSelectedIteration;
+    onSelectedIteration?: OnSelectedIteration;
     onEditInput?: (moduleId: string, key: string) => void;
     onTestFlow?: () => void;
     onCancelTestFlow?: () => void;

package/package/components/graph/MiniFlowGraph.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">import { writable } from 'svelte/store';
+import { SvelteFlow, SvelteFlowProvider } from '@xyflow/svelte';
+import { setGraphContext } from './graphContext';
+import { SelectionManager } from './selectionUtils.svelte';
+import { createFlowDiffManager } from '../flows/flowDiffManager.svelte';
+import ModuleNode from './renderers/nodes/ModuleNode.svelte';
+import InputNode from './renderers/nodes/InputNode.svelte';
+import BranchAllStart from './renderers/nodes/BranchAllStart.svelte';
+import BranchAllEndNode from './renderers/nodes/BranchAllEndNode.svelte';
+import ForLoopEndNode from './renderers/nodes/ForLoopEndNode.svelte';
+import ForLoopStartNode from './renderers/nodes/ForLoopStartNode.svelte';
+import ResultNode from './renderers/nodes/ResultNode.svelte';
+import BranchOneStart from './renderers/nodes/BranchOneStart.svelte';
+import BranchOneEndNode from './renderers/nodes/branchOneEndNode.svelte';
+import SubflowBound from './renderers/nodes/SubflowBound.svelte';
+import NoBranchNode from './renderers/nodes/NoBranchNode.svelte';
+import AssetNode from './renderers/nodes/AssetNode.svelte';
+import AssetsOverflowedNode from './renderers/nodes/AssetsOverflowedNode.svelte';
+import AiToolNode from './renderers/nodes/AIToolNode.svelte';
+import NewAiToolNode from './renderers/nodes/NewAIToolNode.svelte';
+import BaseEdge from './renderers/edges/BaseEdge.svelte';
+import EmptyEdge from './renderers/edges/EmptyEdge.svelte';
+import DataflowEdge from './renderers/edges/DataflowEdge.svelte';
+import HiddenBaseEdge from './renderers/edges/HiddenBaseEdge.svelte';
+let { nodes, edges, width, height, initialViewport } = $props();
+setGraphContext({
+    selectionManager: new SelectionManager(),
+    useDataflow: writable(false),
+    showAssets: writable(false),
+    diffManager: createFlowDiffManager()
+});
+const nodeTypes = {
+    input2: InputNode,
+    module: ModuleNode,
+    branchAllStart: BranchAllStart,
+    branchAllEnd: BranchAllEndNode,
+    forLoopEnd: ForLoopEndNode,
+    forLoopStart: ForLoopStartNode,
+    result: ResultNode,
+    whileLoopStart: ForLoopStartNode,
+    whileLoopEnd: ForLoopEndNode,
+    branchOneStart: BranchOneStart,
+    branchOneEnd: BranchOneEndNode,
+    subflowBound: SubflowBound,
+    noBranch: NoBranchNode,
+    asset: AssetNode,
+    assetsOverflowed: AssetsOverflowedNode,
+    aiTool: AiToolNode,
+    newAiTool: NewAiToolNode
+};
+const edgeTypes = {
+    edge: BaseEdge,
+    empty: EmptyEdge,
+    dataflowedge: DataflowEdge,
+    hiddenedge: HiddenBaseEdge
+};
+const proOptions = { hideAttribution: true };
+const fitViewOptions = { padding: 0 };
+</script>
+
+<div style="width: {width}px; height: {height}px;">
+	<SvelteFlowProvider>
+		<SvelteFlow
+			{nodes}
+			{edges}
+			{nodeTypes}
+			{edgeTypes}
+			fitView={!initialViewport}
+			{fitViewOptions}
+			{initialViewport}
+			nodesDraggable={false}
+			elementsSelectable={false}
+			panOnDrag={false}
+			zoomOnScroll={false}
+			zoomOnPinch={false}
+			zoomOnDoubleClick={false}
+			preventScrolling={false}
+			{proOptions}
+			style="width: {width}px; height: {height}px; background: transparent;"
+		/>
+	</SvelteFlowProvider>
+</div>

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

@@ -0,0 +1,11 @@
+import { type Node, type Edge, type Viewport } from '@xyflow/svelte';
+type $$ComponentProps = {
+    nodes: Node[];
+    edges: Edge[];
+    width: number;
+    height: number;
+    initialViewport?: Viewport;
+};
+declare const MiniFlowGraph: import("svelte").Component<$$ComponentProps, {}, "">;
+type MiniFlowGraph = ReturnType<typeof MiniFlowGraph>;
+export default MiniFlowGraph;

package/package/components/graph/MoveHandleButton.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">import { stopPropagation, preventDefault } from 'svelte/legacy';
+import { onDestroy } from 'svelte';
+import { Move } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+let { moveManager, moduleId, selectedIds, singleNode = false, visible = true, onClickMove, class: extraClass } = $props();
+let dragCleanup;
+function onPointerDown(e) {
+    const pe = e;
+    const startX = pe.clientX;
+    const startY = pe.clientY;
+    let didDrag = false;
+    function onMove(me) {
+        const dx = me.clientX - startX;
+        const dy = me.clientY - startY;
+        if (!didDrag && Math.sqrt(dx * dx + dy * dy) > 5) {
+            didDrag = true;
+            moveManager.startDrag(moduleId, startX, startY, singleNode ? undefined : selectedIds);
+        }
+    }
+    function onUp() {
+        document.removeEventListener('pointermove', onMove);
+        document.removeEventListener('pointerup', onUp);
+        dragCleanup = undefined;
+        if (!didDrag) {
+            onClickMove?.();
+        }
+    }
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+    dragCleanup = onUp;
+}
+onDestroy(() => dragCleanup?.());
+</script>
+
+<button
+	class={twMerge(
+		'center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary cursor-grab',
+		visible ? '' : '!hidden',
+		'shadow-md rounded-md',
+		'touch-none',
+		extraClass
+	)}
+	onpointerdown={stopPropagation(preventDefault(onPointerDown))}
+	title="Move"
+>
+	<Move size={12} />
+</button>

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

@@ -0,0 +1,13 @@
+import type { MoveManager } from './moveManager.svelte';
+interface Props {
+    moveManager: MoveManager;
+    moduleId: string;
+    selectedIds?: string[];
+    singleNode?: boolean;
+    visible?: boolean;
+    onClickMove?: () => void;
+    class?: string;
+}
+declare const MoveHandleButton: import("svelte").Component<Props, {}, "">;
+type MoveHandleButton = ReturnType<typeof MoveHandleButton>;
+export default MoveHandleButton;