@flowuent-org/diagramming-core 1.3.4 → 1.3.6

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;
+}