@flowuent-org/diagramming-core 1.3.5 → 1.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowuent-org/diagramming-core",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/packages/diagrams/src/lib/components/automation/AutomationEndNode.tsx

@@ -14,6 +14,7 @@ import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
+import { EndNodeIcon } from '@flowuent-labs/molecules';
 
 interface AutomationEndNodeProps {
     data: {
@@ -57,6 +58,7 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ data, sele
 
     // Get the icon component based on the iconName
     const IconComponent = getIconByName(data.iconName);
+    const isEndNode = data.label === 'End' || data.label === 'End Node';
 
     const handleJsonClick = () => {
         if (nodeId) setSelectedNode(nodeId);
@@ -275,7 +277,11 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ data, sele
                                 justifyContent: 'center',
                             }}
                         >
-                            <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
+                            {isEndNode ? (
+                                <EndNodeIcon size={18} color="#FFFFFF" />
+                            ) : (
+                                <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
+                            )}
                         </Box>
                         <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
                             {highlightText(data.label)}

package/packages/diagrams/src/lib/components/automation/AutomationFormattingNode.tsx

@@ -23,6 +23,7 @@ import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
+import { ArticleAnalyzerIcon } from '@flowuent-labs/molecules';
 
 interface AutomationFormattingNodeProps {
     data: {
@@ -80,8 +81,13 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
     const nodes = useDiagram((state) => state.nodes);
     const setNodes = useDiagram((state) => state.setNodes);
 
-    // Get the icon component based on the iconName
-    const IconComponent = getIconByName(data.iconName);
+    // Check if this is Article Analyzer node
+    const isArticleAnalyzer = data.label === 'Article Analyzer';
+    
+    // Get the icon component based on the iconName or use ArticleAnalyzerIcon for Article Analyzer
+    const IconComponent = isArticleAnalyzer 
+        ? ArticleAnalyzerIcon 
+        : getIconByName(data.iconName);
 
     const handleJsonClick = () => {
         if (nodeId) setSelectedNode(nodeId);
@@ -342,14 +348,18 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                             sx={{
                                 width: '32px',
                                 height: '32px',
-                                backgroundColor: '#8b5cf6', // Purple like in image
+                                backgroundColor: '#1E3A8A', 
                                 borderRadius: '50%',
                                 display: 'flex',
                                 alignItems: 'center',
                                 justifyContent: 'center',
                             }}
                         >
-                            <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
+                            {isArticleAnalyzer ? (
+                                <ArticleAnalyzerIcon size={18} color="#FFFFFF" />
+                            ) : (
+                                <IconComponent size={18} color="#FFFFFF" />
+                            )}
                         </Box>
                         <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
                             {highlightText(data.label)}

package/packages/diagrams/src/lib/components/automation/AutomationNavigationNode.tsx

@@ -4,7 +4,7 @@ import { Handle, Position, useNodeId } from '@xyflow/react';
 import { Box, Typography, Chip, IconButton, Card, CardContent, Tooltip } from '@mui/material';
 import {
     AccessTime as AccessTimeIcon,
-    Navigation as NavigationIcon,
+    Navigation as MuiNavigationIcon,
     OpenInBrowser as OpenInBrowserIcon,
     TouchApp as TouchAppIcon,
     Search as SearchIcon,
@@ -19,6 +19,7 @@ import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
+import { NavigationIcon } from '@flowuent-labs/molecules';
 
 interface AutomationNavigationNodeProps {
     data: {
@@ -212,13 +213,13 @@ export const AutomationNavigationNode: React.FC<AutomationNavigationNodeProps> =
             case 'click':
                 return <TouchAppIcon sx={{ fontSize: '18px' }} />;
             case 'scroll':
-                return <NavigationIcon sx={{ fontSize: '18px' }} />;
+                return <NavigationIcon size={18} color="#93C5FD" />;
             case 'wait':
                 return <AccessTimeIcon sx={{ fontSize: '18px' }} />;
             case 'extract':
                 return <SearchIcon sx={{ fontSize: '18px' }} />;
             default:
-                return <NavigationIcon sx={{ fontSize: '18px' }} />;
+                return <NavigationIcon size={18} color="#93C5FD" />;
         }
     };
 

package/packages/diagrams/src/lib/contexts/diagramStoreTypes.tsx

@@ -66,6 +66,7 @@ export interface DiagramState {
   nodes: ICardNode[];
   defaultNodes: ICardNode[];
   dragStartPosition: DragStartPosition | null;
+  dragStartPositions: Record<string, { x: number; y: number }> | null;
   edges: Edge[];
   defaultEdges: Edge[];
   history: HistoryEvent[];

package/packages/diagrams/src/lib/contexts/onDragStart.ts

@@ -20,9 +20,26 @@ export const onNodeDragStart =
         positionAbsolute: cardNode.position,
       };
 
+      // Store initial positions for ALL selected nodes (for multi-node dragging)
+      // Get selected nodes from state.nodes (they should have selected property set by ReactFlow)
+      const selectedNodes = state.nodes.filter(n => (n as any).selected);
+      let dragStartPositions: Record<string, { x: number; y: number }> | null = null;
+      
+      if (selectedNodes.length > 1) {
+        // Multiple nodes are selected - store all their initial positions
+        dragStartPositions = {};
+        selectedNodes.forEach(selectedNode => {
+          dragStartPositions![selectedNode.id] = {
+            x: selectedNode.position.x,
+            y: selectedNode.position.y,
+          };
+        });
+      }
+
       return {
         ...state,
         dragStartPosition: changeForUndo,
+        dragStartPositions: dragStartPositions || null,
       };
     });
   };

package/packages/diagrams/src/lib/contexts/onNodeDragEnd.ts

@@ -18,10 +18,101 @@ export const onNodeDragEnd =
     const cardNode = node as ICardNode;
     set((state: DiagramStore) => {
       const dragStartPosition = state.dragStartPosition;
+      const dragStartPositions = state.dragStartPositions;
 
-      // If there's no drag start position, just return the state unchanged
+      // Get all currently selected nodes from state (they should have selected property)
+      // Also get the current node's position from ReactFlow (cardNode parameter)
+      const selectedNodesInState = state.nodes.filter(n => (n as any).selected);
+      const isMultiDrag = dragStartPositions && Object.keys(dragStartPositions).length > 1;
+
+      // If multiple nodes were dragged, handle all of them
+      if (isMultiDrag && dragStartPositions) {
+        const historyEvents: HistoryEvent[] = [];
+        const updatedNodes = state.nodes.map((n) => {
+          // Check if this node was part of the multi-drag
+          if (dragStartPositions![n.id]) {
+            const startPos = dragStartPositions[n.id];
+            // For the dragged node, use position from ReactFlow's node parameter (most up-to-date)
+            // For other nodes, use position from state.nodes (updated by onNodesChange)
+            let endPos = n.position;
+            if (n.id === cardNode.id) {
+              // Use the position from ReactFlow for the node being dragged
+              endPos = cardNode.position;
+            }
+            
+            // Check if this node moved
+            if (startPos.x !== endPos.x || startPos.y !== endPos.y) {
+              // Create history event for this node
+              historyEvents.push({
+                title: `Node '${n.id}' moved from (${startPos.x.toFixed(1)}, ${startPos.y.toFixed(1)}) to (${endPos.x.toFixed(1)}, ${endPos.y.toFixed(1)})`,
+                backward: {
+                  t: 'node-change',
+                  type: 'position',
+                  id: n.id,
+                  message: `Revert: Node '${n.id}' position back to (${startPos.x.toFixed(1)}, ${startPos.y.toFixed(1)})`,
+                  position: startPos,
+                  positionAbsolute: startPos,
+                },
+                forward: {
+                  t: 'node-change',
+                  type: 'position',
+                  id: n.id,
+                  message: `Redo: Node '${n.id}' moved to (${endPos.x}, ${endPos.y})`,
+                  position: endPos,
+                  positionAbsolute: endPos,
+                },
+              });
+
+              // Update node position - ensure it matches ReactFlow's current state
+              return {
+                ...n,
+                position: endPos,
+                data: { ...n.data, isPinned: true },
+              };
+            }
+          }
+          return n;
+        });
+
+        // Trigger onChange callbacks for all moved nodes
+        if (onChange && historyEvents.length > 0) {
+          historyEvents.forEach((historyEvent) => {
+            onChange({
+              t: 'node-change',
+              type: 'position',
+              id: historyEvent.forward.id,
+              position: historyEvent.forward.position,
+              positionAbsolute: historyEvent.forward.positionAbsolute,
+              message: historyEvent.title,
+            });
+          });
+        }
+
+        return {
+          ...addToHistory(state, historyEvents),
+          dragStartPosition: null,
+          dragStartPositions: null,
+          nodes: updatedNodes,
+        };
+      }
+
+      // Single node drag handling (original logic)
       if (!dragStartPosition) {
-        return state;
+        // Ensure the node's current position is persisted in state
+        const nodeInState = state.nodes.find((n) => n.id === cardNode.id);
+        if (nodeInState && (
+          nodeInState.position.x !== cardNode.position.x ||
+          nodeInState.position.y !== cardNode.position.y
+        )) {
+          // Update the node position to match the dragged position
+          const updatedNodes = state.nodes.map((n) =>
+            n.id === cardNode.id
+              ? { ...n, position: cardNode.position, data: { ...n.data, isPinned: true } }
+              : n,
+          );
+          return { ...state, nodes: updatedNodes, dragStartPositions: null };
+        }
+        return { ...state, dragStartPositions: null };
       }
 
       // Check if the node has moved
@@ -29,17 +120,21 @@ export const onNodeDragEnd =
         dragStartPosition.position.x !== cardNode.position.x ||
         dragStartPosition.position.y !== cardNode.position.y
       ) {
-        const updatedNodes = state.nodes.map((n) =>
-          n.id === cardNode.id
-            ? { ...n, data: { ...n.data, isPinned: true } }
-            : n,
-        );
+        // Update nodes array to ensure position is persisted
+        const updatedNodes = state.nodes.map((n) => {
+          if (n.id === cardNode.id) {
+            return { 
+              ...n, 
+              position: cardNode.position,
+              data: { ...n.data, isPinned: true } 
+            };
+          }
+          return n;
+        });
 
-        // Create the HistoryEvent entry with forward and backward changes
+        // Create the HistoryEvent entry
         const historyEvent: HistoryEvent = {
           title: `Node '${cardNode.id}' moved from (${dragStartPosition.position.x.toFixed(1)}, ${dragStartPosition.position.y.toFixed(1)}) to (${cardNode.position.x.toFixed(1)}, ${cardNode.position.y.toFixed(1)})`,
-
-          // Backward change for undo
           backward: {
             t: 'node-change',
             type: 'position',
@@ -48,8 +143,6 @@ export const onNodeDragEnd =
             position: dragStartPosition.position,
             positionAbsolute: dragStartPosition.position,
           },
-
-          // Forward change for redo
           forward: {
             t: 'node-change',
             type: 'position',
@@ -74,12 +167,13 @@ export const onNodeDragEnd =
 
         return {
           ...addToHistory(state, [historyEvent]),
-          dragStartPosition: null, // Clear the drag start position
+          dragStartPosition: null,
+          dragStartPositions: null,
           nodes: updatedNodes,
         };
       }
 
-      // If no movement occurred, just reset dragStartPosition without updating history
-      return { ...state, dragStartPosition: null };
+      // If no movement occurred, just reset dragStartPosition
+      return { ...state, dragStartPosition: null, dragStartPositions: null };
     });
   };

package/packages/diagrams/src/lib/contexts/onNodesChange.ts

@@ -277,24 +277,44 @@ function handleElementChanges(
 
     const currentElements = elementType === 'node' ? get().nodes : get().edges;
 
+    // Separate position changes from other changes
+    const positionChanges: NodePositionChange[] = [];
+    const dimensionChanges: NodeDimensionChange[] = [];
+    const otherChanges: (NodeChange | EdgeChange)[] = [];
+
     changes.forEach((change) => {
-      if (change.type === 'position' || change.type === 'dimensions') {
-        return;
+      if (change.type === 'position') {
+        positionChanges.push(change as NodePositionChange);
+      } else if (change.type === 'dimensions') {
+        dimensionChanges.push(change as NodeDimensionChange);
       } else if (change.type === 'replace') {
         accumulatedResetChanges.push(change as ResetChange & { t: string });
       } else {
-        const historyEvent = createHistoryEvent(
-          change,
-          currentElements,
-          elementType,
-        );
-        if (historyEvent) {
-          newChanges.push(historyEvent.forward);
-          newHistory.push(historyEvent);
-        }
+        otherChanges.push(change);
+      }
+    });
+
+    // Handle other changes (add, remove, etc.)
+    otherChanges.forEach((change) => {
+      const historyEvent = createHistoryEvent(
+        change,
+        currentElements,
+        elementType,
+      );
+      if (historyEvent) {
+        newChanges.push(historyEvent.forward);
+        newHistory.push(historyEvent);
       }
     });
 
+    // Handle position changes - apply them but don't add to history
+    // History will be handled by onNodeDragEnd for individual nodes
+    // For multiple nodes, we need to ensure positions are applied
+    if (positionChanges.length > 0 && elementType === 'node') {
+      // Apply position changes immediately to ensure they persist
+      // Don't add to history here as onNodeDragEnd will handle it
+    }
+
     if (accumulatedResetChanges.length > 0) {
       const [resetChangesToEmit, historyChanges] = handleAccumulatedResets(
         accumulatedResetChanges,
@@ -310,6 +330,7 @@ function handleElementChanges(
       newChanges.forEach((change) => onChange(change));
     }
 
+    // Apply ALL changes including position changes to ensure they persist
     const updatedElements =
       elementType === 'node'
         ? applyNodeChanges(

package/packages/diagrams/src/lib/organisms/WorkFlowNode/NodeTypeDisplay.tsx

@@ -1,25 +1,113 @@
 import React from 'react';
-import { Typography } from '@mui/material';
-import { useNodeTitle, useNodeType } from '../../contexts/CardDataProvider';
+import { Typography, Box } from '@mui/material';
+import { useNodeTitle, useNodeType, useNodeVariant } from '../../contexts/CardDataProvider';
+import { NodeVariant } from '../../types/card-node';
+import {
+  ParallelIcon,
+  BranchIcon,
+  GroupIcon,
+  ReturnIcon,
+  LoopIcon,
+  SwitchIcon,
+  TryIcon,
+  CatchIcon,
+  TryCatchIcon,
+  FunctionIcon,
+  CallIcon,
+  LetIcon,
+  SetIcon,
+  EmptyNodeIcon,
+  EntityIcon,
+} from '@flowuent-labs/molecules';
+
+// Icon mapping for different node types
+const getNodeIcon = (type: NodeVariant | string | undefined) => {
+  if (!type) return null;
+
+  const iconStyle = {
+    marginRight: '6px',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    flexShrink: 0,
+  };
+
+  switch (type) {
+    case 'parallel':
+      return <ParallelIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'branch':
+      return <BranchIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'group':
+      return <GroupIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'return':
+      return <ReturnIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'loop':
+    case 'forLoop':
+      return <LoopIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'switch':
+      return <SwitchIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'try':
+      return <TryIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'catch':
+      return <CatchIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'tryCatch':
+      return <TryCatchIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'function':
+      return <FunctionIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'call':
+      return <CallIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'let':
+      return <LetIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'set':
+      return <SetIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'emptyNode':
+      return <EmptyNodeIcon size={15} color="#86EFAC" style={iconStyle} />;
+    case 'entity':
+      return <EntityIcon size={15} color="#86EFAC" style={iconStyle} />;
+    default:
+      return null;
+  }
+};
 
 const NodeTypeDisplay = React.memo(() => {
   const type = useNodeType();
+  const variant = useNodeVariant();
   const title = useNodeTitle();
+  // Get type from data.type or data.variant as fallback
+  const nodeType = (type || variant) as NodeVariant | string | undefined;
+  const icon = getNodeIcon(nodeType as NodeVariant);
+
   return (
-    <Typography
-      sx={{
-        textTransform: 'capitalize',
-        // fontWeight: 'bold',
-        fontStyle: 'italic',
-        fontSize: 12,
-        color: '#FFFFFF',
-      }}
-    >
-      {`[${type}]`}
-      {(title === 'Then' || title === 'Else') && (
-        <span >{': ' + title}</span>
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'nowrap' }}>
+      {icon && (
+        <Box
+          component="span"
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            lineHeight: 1,
+          }}
+        >
+          {icon}
+        </Box>
       )}
-    </Typography>
+      <Typography
+        sx={{
+          textTransform: 'capitalize',
+          fontStyle: 'italic',
+          fontSize: 12,
+          color: '#FFFFFF',
+          display: 'inline-flex',
+          alignItems: 'center',
+        }}
+      >
+        {`[${nodeType || 'unknown'}]`}
+        {(title === 'Then' || title === 'Else') && (
+          <span>{': ' + title}</span>
+        )}
+      </Typography>
+    </Box>
   );
 });
 

package/packages/diagrams/src/lib/organisms/WorkFlowNode/WorkflowNodeIcons.tsx

@@ -0,0 +1,23 @@
+// Re-export all icons from molecules package
+export {
+  ParallelIcon,
+  BranchIcon,
+  GroupIcon,
+  ReturnIcon,
+  LoopIcon,
+  SwitchIcon,
+  TryIcon,
+  CatchIcon,
+  TryCatchIcon,
+  FunctionIcon,
+  CallIcon,
+  LetIcon,
+  SetIcon,
+  EmptyNodeIcon,
+  EntityIcon,
+  StartNodeIcon,
+  NavigationIcon,
+} from '@flowuent-labs/molecules';
+
+// Re-export types for backward compatibility
+export type { SvgIconProps as IconProps } from '@flowuent-labs/molecules';

package/packages/diagrams/src/lib/templates/DiagramContent.tsx

@@ -87,13 +87,19 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
   const canRedo = useCanRedo();
 
   // Zoom hooks - get zoom functions from ReactFlow
-  const { zoomIn, zoomOut, fitView, setViewport, getViewport, getNodes } = useReactFlow();
+  const { zoomIn, zoomOut, fitView, setViewport, getViewport, getNodes, screenToFlowPosition } = useReactFlow();
 
   // Search bar state
   const [showSearchBar, setShowSearchBar] = useState(false);
 
-  // Clipboard state for copy/paste
-  const [copiedNode, setCopiedNode] = useState<Node | null>(null);
+  // Clipboard state for copy/paste - support multiple nodes
+  const [copiedNodes, setCopiedNodes] = useState<Node[]>([]);
+  
+  // Store last click position on canvas for paste positioning
+  const [lastClickPosition, setLastClickPosition] = useState<{ x: number; y: number } | null>(null);
+  
+  // Flag to prevent layout recalculation immediately after paste
+  const skipLayoutRef = useRef(false);
   
   // Rename state
   const [renamingNodeId, setRenamingNodeId] = useState<string | null>(null);
@@ -109,40 +115,111 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
     setShowSearchBar(true);
   }, []);
 
-  // Copy selected node
+  // Copy selected nodes (single or multiple)
   const handleCopyNode = useCallback(() => {
-    const nodeToCopy = visibleNodes.find(node => node.id === selectedNode || node.selected);
-    if (nodeToCopy) {
-      setCopiedNode(nodeToCopy);
+    // Get all selected nodes from ReactFlow
+    const selectedNodesList = getNodes().filter(node => node.selected);
+    
+    // If multiple nodes are selected, copy all of them
+    if (selectedNodesList.length > 0) {
+      setCopiedNodes(selectedNodesList);
+    } else {
+      // Fallback to single node selection (custom selectedNode state)
+      const nodeToCopy = visibleNodes.find(node => node.id === selectedNode);
+      if (nodeToCopy) {
+        setCopiedNodes([nodeToCopy]);
+      }
     }
-  }, [visibleNodes, selectedNode]);
+  }, [visibleNodes, selectedNode, getNodes]);
 
-  // Paste node
+  // Paste nodes (single or multiple) at the clicked position
   const handlePasteNode = useCallback(() => {
-    if (!copiedNode) return;
+    if (copiedNodes.length === 0) return;
     
-    const newNode = {
-      ...copiedNode,
-      id: `${copiedNode.id}-copy-${Date.now()}`,
-      position: {
-        x: copiedNode.position.x + 50,
-        y: copiedNode.position.y + 50,
-      },
-      selected: false,
-    };
+    // Determine paste position:
+    // 1. Use last click position on canvas if available
+    // 2. Fallback to offset from original position
+    let pasteX: number;
+    let pasteY: number;
+    
+    if (lastClickPosition) {
+      // Use stored click position
+      pasteX = lastClickPosition.x;
+      pasteY = lastClickPosition.y;
+    } else {
+      // Fallback: use offset from original position
+      const minX = Math.min(...copiedNodes.map(node => node.position.x));
+      const minY = Math.min(...copiedNodes.map(node => node.position.y));
+      pasteX = minX + 50;
+      pasteY = minY + 50;
+    }
+    
+    // Find the minimum X and Y positions of copied nodes (reference point)
+    const minX = Math.min(...copiedNodes.map(node => node.position.x));
+    const minY = Math.min(...copiedNodes.map(node => node.position.y));
+    
+    // Calculate offset from reference point to paste position
+    const offsetX = pasteX - minX;
+    const offsetY = pasteY - minY;
+    
+    // Create new nodes with updated IDs and positions
+    const newNodes = copiedNodes.map((node, index) => {
+      // Calculate relative position from the minimum position
+      const relativeX = node.position.x - minX;
+      const relativeY = node.position.y - minY;
+      
+      return {
+        ...node,
+        id: `${node.id}-copy-${Date.now()}-${index}`,
+        position: {
+          x: minX + relativeX + offsetX,
+          y: minY + relativeY + offsetY,
+        },
+        selected: false,
+        data: {
+          ...node.data,
+          isPinned: true, // Mark as pinned to prevent auto-layout from moving it
+        },
+      };
+    });
+    
+    // Prevent layout recalculation from moving pasted nodes
+    skipLayoutRef.current = true;
+    
+    // Add all new nodes to the diagram
+    setNodes([...nodes, ...newNodes as any]);
     
-    setNodes([...nodes, newNode as any]);
-    setSelectedNode(newNode.id);
-  }, [copiedNode, nodes, setNodes, setSelectedNode]);
+    // Select the first pasted node (or all if multiple)
+    if (newNodes.length === 1) {
+      setSelectedNode(newNodes[0].id);
+    } else {
+      // For multiple nodes, select the first one (ReactFlow will handle multi-selection)
+      setSelectedNode(newNodes[0].id);
+    }
+  }, [copiedNodes, nodes, setNodes, setSelectedNode, lastClickPosition]);
 
-  // Delete selected node
+  // Delete selected nodes (single or multiple)
   const handleDeleteNode = useCallback(() => {
-    const nodeToDelete = visibleNodes.find(node => node.id === selectedNode || node.selected);
-    if (nodeToDelete && onNodesChange) {
-      onNodesChange([{ id: nodeToDelete.id, type: 'remove' }]);
+    // Get all selected nodes from ReactFlow
+    const selectedNodesList = getNodes().filter(node => node.selected);
+    
+    if (selectedNodesList.length > 0) {
+      // Delete all selected nodes
+      const changes = selectedNodesList.map(node => ({
+        id: node.id,
+        type: 'remove' as const,
+      }));
+      onNodesChange(changes);
       setSelectedNode(null);
+    } else {
+      // Fallback to single node deletion (custom selectedNode state)
+      const nodeToDelete = visibleNodes.find(node => node.id === selectedNode);
+      if (nodeToDelete && onNodesChange) {
+        onNodesChange([{ id: nodeToDelete.id, type: 'remove' }]);
+        setSelectedNode(null);
+      }
     }
-  }, [visibleNodes, selectedNode, onNodesChange, setSelectedNode]);
+  }, [visibleNodes, selectedNode, onNodesChange, setSelectedNode, getNodes]);
 
   // Rename node
   const handleRenameNode = useCallback(() => {
@@ -388,6 +465,12 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
 
   // Debounce layout recalculation to prevent continuous propagation
   useEffect(() => {
+    // Skip layout recalculation if we just pasted nodes
+    if (skipLayoutRef.current) {
+      skipLayoutRef.current = false;
+      return;
+    }
+
     // Clear any pending layout recalculation
     if (layoutTimeoutRef.current) {
       clearTimeout(layoutTimeoutRef.current);
@@ -536,18 +619,35 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
                 onEdgesChange={onEdgesChange}
                 onReconnect={onReconnect}
                 onNodeClick={(event, node) => {
-                  event.stopPropagation();
-                  setSelectedNode(node.id);
+                  // Don't interfere with multi-selection - let ReactFlow handle it
+                  // Only set our custom selectedNode if it's a single click without modifiers
+                  if (!event.ctrlKey && !event.metaKey && !event.shiftKey) {
+                    // Check if multiple nodes are selected - if so, don't override
+                    const selectedNodes = getNodes().filter(n => n.selected);
+                    if (selectedNodes.length <= 1) {
+                      event.stopPropagation();
+                      setSelectedNode(node.id);
+                    }
+                    // If multiple nodes are selected, let ReactFlow handle the drag
+                  }
                 }}
                 onPaneClick={(event) => {
                   setSelectedNode(null);
                   closeModalsOnClickOutside(event);
+                  // Store click position for paste operation
+                  const flowPosition = screenToFlowPosition({
+                    x: event.clientX,
+                    y: event.clientY,
+                  });
+                  setLastClickPosition(flowPosition);
                 }}
                 nodesConnectable={true}
                 nodesFocusable={true}
                 edgesFocusable={true}
                 elementsSelectable={true}
                 selectNodesOnDrag={false}
+                selectionOnDrag={true}
+                selectionKeyCode={["Control", "Meta"]}
                 defaultEdgeOptions={{
                   reconnectable: true,
                 }}
@@ -672,7 +772,30 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
               connectionMode={ConnectionMode.Strict}
               suppressContentEditableWarning
               suppressHydrationWarning
-              onPaneClick={closeModalsOnClickOutside}
+              onPaneClick={(event) => {
+                closeModalsOnClickOutside(event);
+                // Store click position for paste operation
+                const flowPosition = screenToFlowPosition({
+                  x: event.clientX,
+                  y: event.clientY,
+                });
+                setLastClickPosition(flowPosition);
+              }}
+              onNodeClick={(event, node) => {
+                // Don't interfere with multi-selection - let ReactFlow handle it
+                // Only set our custom selectedNode if it's a single click without modifiers
+                if (!event.ctrlKey && !event.metaKey && !event.shiftKey) {
+                  // Check if multiple nodes are selected - if so, don't override
+                  const selectedNodes = getNodes().filter(n => n.selected);
+                  if (selectedNodes.length <= 1) {
+                    event.stopPropagation();
+                    setSelectedNode(node.id);
+                  }
+                  // If multiple nodes are selected, let ReactFlow handle the drag
+                }
+              }}
+              selectionOnDrag={true}
+              selectionKeyCode={["Control", "Meta"]}
               {...props}
             />
             {props.children}

package/packages/molecules/src/index.ts

@@ -6,7 +6,29 @@ import ParamsActionField from './lib/ParamsActionField/ParamsActionField';
 import EditorTab from './lib/EditorTab/EditorTab';
 import CloseableButton from './lib/ClosableButton/CloseableButton';
 
-
+// Export SVG Icons
+export {
+  ArticleAnalyzerIcon,
+  StartNodeIcon,
+  EndNodeIcon,
+  NavigationIcon,
+  ParallelIcon,
+  BranchIcon,
+  GroupIcon,
+  ReturnIcon,
+  LoopIcon,
+  SwitchIcon,
+  TryIcon,
+  CatchIcon,
+  TryCatchIcon,
+  FunctionIcon,
+  CallIcon,
+  LetIcon,
+  SetIcon,
+  EmptyNodeIcon,
+  EntityIcon,
+} from './lib/SvgIcons';
+export type { SvgIconProps } from './lib/SvgIcons';
 
 export {
   UserCard,
@@ -15,8 +37,5 @@ export {
   HTTPVerbSelection,
   ParamsActionField,
   EditorTab,
-
-
-
   CloseableButton
 };

package/packages/molecules/src/lib/SvgIcons/icons.tsx

@@ -0,0 +1,291 @@
+import React from 'react';
+import { SvgIconProps } from './types';
+
+// Base SVG icon component
+const BaseIcon: React.FC<SvgIconProps & { children: React.ReactNode }> = ({ 
+  size = 15, 
+  color = '#86EFAC',
+  style,
+  children 
+}) => (
+  <svg 
+    width={size} 
+    height={size} 
+    viewBox="0 0 15 15" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    {children}
+  </svg>
+);
+
+// Article Analyzer Icon
+export const ArticleAnalyzerIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <svg 
+    width={size || 12} 
+    height={size ? (size * 15) / 12 : 15} 
+    viewBox="0 0 12 15" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path 
+      d="M7.83333 0.5H1.83333C1.47971 0.5 1.14057 0.640476 0.890524 0.890524C0.640476 1.14057 0.5 1.47971 0.5 1.83333V12.5C0.5 12.8536 0.640476 13.1928 0.890524 13.4428C1.14057 13.6929 1.47971 13.8333 1.83333 13.8333H9.83333C10.187 13.8333 10.5261 13.6929 10.7761 13.4428C11.0262 13.1928 11.1667 12.8536 11.1667 12.5V3.83333L7.83333 0.5Z" 
+      stroke={color || "#D8B4FE"} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+    <path 
+      d="M7.16797 0.5V3.16667C7.16797 3.52029 7.30844 3.85943 7.55849 4.10948C7.80854 4.35952 8.14768 4.5 8.5013 4.5H11.168" 
+      stroke={color || "#D8B4FE"} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+    <path 
+      d="M4.5013 5.16699H3.16797" 
+      stroke={color || "#D8B4FE"} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+    <path 
+      d="M8.5013 7.83398H3.16797" 
+      stroke={color || "#D8B4FE"} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+    <path 
+      d="M8.5013 10.5H3.16797" 
+      stroke={color || "#D8B4FE"} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// Start Node Icon
+export const StartNodeIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+    <path 
+      d="M5.83203 4.5L9.83203 7.16667L5.83203 9.83333V4.5Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+// Navigation Icon
+export const NavigationIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#93C5FD', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+    <path 
+      d="M7.16667 0.5C5.45482 2.29744 4.5 4.68449 4.5 7.16667C4.5 9.64884 5.45482 12.0359 7.16667 13.8333C8.87851 12.0359 9.83333 9.64884 9.83333 7.16667C9.83333 4.68449 8.87851 2.29744 7.16667 0.5Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+    <path 
+      d="M0.5 7.16699H13.8333" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+// Workflow node type icons
+export const ParallelIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const BranchIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const GroupIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const ReturnIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const LoopIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const SwitchIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const TryIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const CatchIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const TryCatchIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const FunctionIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const CallIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const LetIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const SetIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const EmptyNodeIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const EntityIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+// End Node Icon
+export const EndNodeIcon: React.FC<SvgIconProps> = ({ size = 13, color = '#FCA5A5', style }) => (
+  <svg 
+    width={size} 
+    height={size} 
+    viewBox="0 0 13 13" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path 
+      d="M11.1667 0.5H1.83333C1.09695 0.5 0.5 1.09695 0.5 1.83333V11.1667C0.5 11.903 1.09695 12.5 1.83333 12.5H11.1667C11.903 12.5 12.5 11.903 12.5 11.1667V1.83333C12.5 1.09695 11.903 0.5 11.1667 0.5Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/packages/molecules/src/lib/SvgIcons/index.ts

@@ -0,0 +1,25 @@
+// Export types
+export type { SvgIconProps } from './types';
+
+// Export all icons from single icons file
+export {
+  ArticleAnalyzerIcon,
+  StartNodeIcon,
+  EndNodeIcon,
+  NavigationIcon,
+  ParallelIcon,
+  BranchIcon,
+  GroupIcon,
+  ReturnIcon,
+  LoopIcon,
+  SwitchIcon,
+  TryIcon,
+  CatchIcon,
+  TryCatchIcon,
+  FunctionIcon,
+  CallIcon,
+  LetIcon,
+  SetIcon,
+  EmptyNodeIcon,
+  EntityIcon,
+} from './icons';

package/packages/molecules/src/lib/SvgIcons/types.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface SvgIconProps {
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}