@flowuent-org/diagramming-core 1.1.3 → 1.1.5

package/package.json

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

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

@@ -295,12 +295,12 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                         animation: 'pulse-glow 2s ease-in-out infinite',
                         '@keyframes pulse-glow': {
                             '0%, 100%': {
-                                boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
-                                borderColor: 'rgba(251, 191, 36, 0.6)',
+                                boxShadow: '0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2)',
+                                borderColor: 'rgba(59, 130, 246, 0.6)',
                             },
                             '50%': {
-                                boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
-                                borderColor: 'rgba(251, 191, 36, 0.9)',
+                                boxShadow: '0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3)',
+                                borderColor: 'rgba(59, 130, 246, 0.9)',
                             },
                         },
                     }),
@@ -345,19 +345,23 @@ export const AutomationApiNode: React.FC<AutomationApiNodeProps> = ({ data, sele
                         </Typography>
                     </Box>
                     <Chip
-                        label={data.status}
+                        label={data.status || 'Ready'}
                         size="small"
                         sx={{
                             backgroundColor: data.status === 'Completed'
                                 ? 'rgba(37, 99, 235, 0.1)'
                                 : data.status === 'Running'
                                     ? 'rgba(251, 191, 36, 0.1)'
-                                    : 'rgba(16, 185, 129, 0.1)',
+                                    : data.status === 'Error'
+                                        ? 'rgba(239, 68, 68, 0.1)'
+                                        : 'rgba(16, 185, 129, 0.1)',
                             color: data.status === 'Completed'
                                 ? '#93C5FD'
                                 : data.status === 'Running'
                                     ? '#FCD34D'
-                                    : '#86EFAC',
+                                    : data.status === 'Error'
+                                        ? '#FCA5A5'
+                                        : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',

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

@@ -224,12 +224,12 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ data, sele
                         animation: 'pulse-glow 2s ease-in-out infinite',
                         '@keyframes pulse-glow': {
                             '0%, 100%': {
-                                boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
-                                borderColor: 'rgba(251, 191, 36, 0.6)',
+                                boxShadow: '0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2)',
+                                borderColor: 'rgba(59, 130, 246, 0.6)',
                             },
                             '50%': {
-                                boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
-                                borderColor: 'rgba(251, 191, 36, 0.9)',
+                                boxShadow: '0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3)',
+                                borderColor: 'rgba(59, 130, 246, 0.9)',
                             },
                         },
                     }),
@@ -274,19 +274,23 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ data, sele
                         </Typography>
                     </Box>
                     <Chip
-                        label={data.status}
+                        label={data.status || 'Ready'}
                         size="small"
                         sx={{
                             backgroundColor: data.status === 'Completed'
                                 ? 'rgba(37, 99, 235, 0.1)'
                                 : data.status === 'Running'
                                     ? 'rgba(251, 191, 36, 0.1)'
-                                    : 'rgba(16, 185, 129, 0.1)',
+                                    : data.status === 'Error'
+                                        ? 'rgba(239, 68, 68, 0.1)'
+                                        : 'rgba(16, 185, 129, 0.1)',
                             color: data.status === 'Completed'
                                 ? '#93C5FD'
                                 : data.status === 'Running'
                                     ? '#FCD34D'
-                                    : '#86EFAC',
+                                    : data.status === 'Error'
+                                        ? '#FCA5A5'
+                                        : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',

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

@@ -298,12 +298,12 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                         animation: 'pulse-glow 2s ease-in-out infinite',
                         '@keyframes pulse-glow': {
                             '0%, 100%': {
-                                boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
-                                borderColor: 'rgba(251, 191, 36, 0.6)',
+                                boxShadow: '0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2)',
+                                borderColor: 'rgba(59, 130, 246, 0.6)',
                             },
                             '50%': {
-                                boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
-                                borderColor: 'rgba(251, 191, 36, 0.9)',
+                                boxShadow: '0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3)',
+                                borderColor: 'rgba(59, 130, 246, 0.9)',
                             },
                         },
                     }),
@@ -348,19 +348,23 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                         </Typography>
                     </Box>
                     <Chip
-                        label={data.status}
+                        label={data.status || 'Ready'}
                         size="small"
                         sx={{
                             backgroundColor: data.status === 'Completed'
                                 ? 'rgba(37, 99, 235, 0.1)'
                                 : data.status === 'Running'
                                     ? 'rgba(251, 191, 36, 0.1)'
-                                    : 'rgba(16, 185, 129, 0.1)',
+                                    : data.status === 'Error'
+                                        ? 'rgba(239, 68, 68, 0.1)'
+                                        : 'rgba(16, 185, 129, 0.1)',
                             color: data.status === 'Completed'
                                 ? '#93C5FD'
                                 : data.status === 'Running'
                                     ? '#FCD34D'
-                                    : '#86EFAC',
+                                    : data.status === 'Error'
+                                        ? '#FCA5A5'
+                                        : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',

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

@@ -722,6 +722,19 @@ Data: ${JSON.stringify(data, null, 2)}
                     transition: 'all 0.2s ease',
                     cursor: 'pointer',
                     overflow: 'hidden',
+                    ...(data.status === 'Running' && {
+                        animation: 'pulse-glow 2s ease-in-out infinite',
+                        '@keyframes pulse-glow': {
+                            '0%, 100%': {
+                                boxShadow: '0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2)',
+                                borderColor: 'rgba(59, 130, 246, 0.6)',
+                            },
+                            '50%': {
+                                boxShadow: '0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3)',
+                                borderColor: 'rgba(59, 130, 246, 0.9)',
+                            },
+                        },
+                    }),
                 }}
                 onClick={handleJsonClick}
             >
@@ -752,21 +765,44 @@ Data: ${JSON.stringify(data, null, 2)}
                     </Typography>
                 </Box>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Typography variant="body2" sx={{
-                        color: getNodeStatus() === 'Failed' ? '#ef4444' : getNodeStatus() === 'Running' ? '#f59e0b' : getNodeStatus() === 'Success' ? '#10b981' : '#f59e0b',
-                        fontSize: '12px',
-                        fontWeight: 500
-                    }}>
-                        {(() => {
-                            const status = getNodeStatus();
-                            if (status === 'Failed') return t('automation.sheetsNode.status.failed');
-                            if (status === 'Running') return t('automation.sheetsNode.status.running');
-                            if (status === 'Success') return t('automation.sheetsNode.status.success');
-                            if (status === 'Ready') return t('automation.sheetsNode.status.ready');
-                            if (status === 'Mixed Status') return t('automation.sheetsNode.status.mixed');
-                            return status;
+                    {/* Status Chip */}
+                    <Chip
+                        label={(() => {
+                            // Map node status to standard status values
+                            const nodeStatus = getNodeStatus();
+                            if (nodeStatus === 'Failed' || data.status === 'Error') return 'Error';
+                            if (nodeStatus === 'Running' || data.status === 'Running') return 'Running';
+                            if (nodeStatus === 'Success' || data.status === 'Completed') return 'Completed';
+                            return data.status || 'Ready';
                         })()}
-                    </Typography>
+                        size="small"
+                        sx={{
+                            backgroundColor: (() => {
+                                const status = data.status || 'Ready';
+                                return status === 'Completed'
+                                    ? 'rgba(37, 99, 235, 0.1)'
+                                    : status === 'Running'
+                                        ? 'rgba(251, 191, 36, 0.1)'
+                                        : status === 'Error'
+                                            ? 'rgba(239, 68, 68, 0.1)'
+                                            : 'rgba(16, 185, 129, 0.1)';
+                            })(),
+                            color: (() => {
+                                const status = data.status || 'Ready';
+                                return status === 'Completed'
+                                    ? '#93C5FD'
+                                    : status === 'Running'
+                                        ? '#FCD34D'
+                                        : status === 'Error'
+                                            ? '#FCA5A5'
+                                            : '#86EFAC';
+                            })(),
+                            fontWeight: 500,
+                            fontSize: '12px',
+                            height: '24px',
+                            borderRadius: '12px',
+                        }}
+                    />
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                         <AccessTimeIcon sx={{ fontSize: '12px', color: '#94a3b8' }} />
                         <Typography variant="body2" sx={{ color: '#94a3b8', fontSize: '11px' }}>

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

@@ -212,12 +212,12 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
                     animation: 'pulse-glow 2s ease-in-out infinite',
                     '@keyframes pulse-glow': {
                         '0%, 100%': {
-                            boxShadow: '0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2)',
-                            borderColor: 'rgba(251, 191, 36, 0.6)',
+                            boxShadow: '0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2)',
+                            borderColor: 'rgba(59, 130, 246, 0.6)',
                         },
                         '50%': {
-                            boxShadow: '0 0 30px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)',
-                            borderColor: 'rgba(251, 191, 36, 0.9)',
+                            boxShadow: '0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3)',
+                            borderColor: 'rgba(59, 130, 246, 0.9)',
                         },
                     },
                 }),
@@ -262,19 +262,23 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
                         </Typography>
                     </Box>
                     <Chip
-                        label={data.status}
+                        label={data.status || 'Ready'}
                         size="small"
                         sx={{
                             backgroundColor: data.status === 'Completed'
                                 ? 'rgba(37, 99, 235, 0.1)'
                                 : data.status === 'Running'
                                     ? 'rgba(251, 191, 36, 0.1)'
-                                    : 'rgba(16, 185, 129, 0.1)',
+                                    : data.status === 'Error'
+                                        ? 'rgba(239, 68, 68, 0.1)'
+                                        : 'rgba(16, 185, 129, 0.1)',
                             color: data.status === 'Completed'
                                 ? '#93C5FD'
                                 : data.status === 'Running'
                                     ? '#FCD34D'
-                                    : '#86EFAC',
+                                    : data.status === 'Error'
+                                        ? '#FCA5A5'
+                                        : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',

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

@@ -8,6 +8,7 @@ import { ICardNode } from '../types/card-node';
 import { setPannable } from './setPannable';
 import { setSelectedNode } from './setSelectedNode';
 import { onConnect } from './onConnect';
+import { onReconnect } from './onReconnect';
 import { setNodes } from './setNodes';
 import { setEdges } from './setEdges';
 import { setContentHeight } from './setContentHeight';
@@ -99,6 +100,9 @@ const createDiagramStore = ({
             goToHistoryIndex(set, get as () => DiagramStore, index),
           onConnect: (connection: Connection) =>
             onConnect(set, onChange)(connection),
+          onReconnect: (oldEdge: Edge, newConnection: Connection) => {
+            onReconnect(set, onChange)(oldEdge, newConnection);
+          },
           setNodes: (nodes: ICardNode[]) => {
             setNodes(set)(nodes);
           },
@@ -373,3 +377,16 @@ export const useEditFunction = (): ((func: FunctionSignature) => void) =>
 
 export const useDeleteFunction = (): ((id: string) => void) =>
   useDiagram((state) => state.deleteFunction);
+
+// Undo/Redo hooks
+export const useUndo = (): (() => void) =>
+  useDiagram((state) => state.undo);
+
+export const useRedo = (): (() => void) =>
+  useDiagram((state) => state.redo);
+
+export const useCanUndo = (): boolean =>
+  useDiagram((state) => state.historyIndex >= 0);
+
+export const useCanRedo = (): boolean =>
+  useDiagram((state) => state.historyIndex < state.history.length - 1);

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

@@ -90,6 +90,7 @@ export interface DiagramActions {
   onNodesChange: (changes: NodeChange[]) => void;
   onEdgesChange: (changes: EdgeChange[]) => void;
   onConnect: (connection: Connection) => void;
+  onReconnect: (oldEdge: Edge, newConnection: Connection) => void;
   setNodes: (nodes: ICardNode[]) => void;
   setEdges: (edges: Edge[]) => void;
   setContentHeight: (id: string, height: number) => void;

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

@@ -0,0 +1,59 @@
+// onReconnect.ts
+import { Edge, Connection } from '@xyflow/react';
+import { DiagramStore, OnChangeEventHandler } from './diagramStoreTypes';
+
+export const onReconnect =
+  (
+    set: (fn: (state: DiagramStore) => DiagramStore) => void,
+    onChange?: OnChangeEventHandler,
+  ) =>
+  (oldEdge: Edge, newConnection: Connection) => {
+    if (!newConnection.source || !newConnection.target) {
+      // If connection is invalid, remove the edge
+      set((state) => {
+        const updatedEdges = state.edges.filter((edge) => edge.id !== oldEdge.id);
+        return { ...state, edges: updatedEdges };
+      });
+
+      if (onChange) {
+        onChange({
+          t: 'edge-change',
+          type: 'remove',
+          id: oldEdge.id,
+          message: 'Edge disconnected',
+        });
+      }
+      return;
+    }
+
+    set((state) => {
+      // Manually update the edge with new connection
+      const updatedEdges = state.edges.map((edge) => {
+        if (edge.id === oldEdge.id) {
+          return {
+            ...edge,
+            source: newConnection.source,
+            target: newConnection.target,
+            sourceHandle: newConnection.sourceHandle || edge.sourceHandle,
+            targetHandle: newConnection.targetHandle || edge.targetHandle,
+          };
+        }
+        return edge;
+      });
+
+      const reconnectedEdge = updatedEdges.find((edge) => edge.id === oldEdge.id);
+
+      if (onChange && reconnectedEdge) {
+        onChange({
+          t: 'edge-change',
+          type: 'replace',
+          id: reconnectedEdge.id,
+          item: reconnectedEdge,
+          message: 'Edge reconnected',
+        });
+      }
+
+      return { ...state, edges: updatedEdges };
+    });
+  };
+

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

@@ -1,338 +1,548 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { ConnectionMode, ReactFlow, ReactFlowProps } from '@xyflow/react';
-import { useTriggerEvent } from '../utils/event-hooks';
-import { IBlock, ICardNodeData } from '../types/card-node';
-import {
-  DndContext,
-  DragOverlay,
-  PointerSensor,
-  useDroppable,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-
-import { Box, Fab } from '@mui/material';
-import { CardDataProvider } from '../contexts/CardDataProvider';
-import BlockWrapper from '../molecules/BlockWrapper';
-import useDragCallbacks from '../hooks/useDragCallbacks';
-import { useElk } from '../utils/elkLayout';
-import { useModalControls } from '../hooks/useModalControls';
-import { useWorkflowNodeAction } from '../hooks/useWorkflowNodeActiont';
-import {
-  useContentHeights,
-  useDiagram,
-  useDiagramEdges,
-  useDiagramNodes,
-  useDiagramType,
-  useLayoutDirection,
-  useSetLayoutDirection,
-  usePannable,
-} from '../contexts/DiagramProvider';
-import { useAutoRegisterFunctions } from '../hooks/useAutoRegisterFunctions';
-import SequenceDiagram from './sequence/SequenceDiagram';
-import ArchDiagram from './arch/ArchDiagram';
-import StateMachineDiagram from './stateMachine/StateMachineDiagram';
-import SystemFlowDiagram from './systemFlow/SystemFlowDiagram';
-import CloudArchitectureDiagram from './cloud-arch/components/CloudArchitectureDiagram';
-import UseCaseDiagram from './useCaseDiagram/UseCaseDiagram';
-import CollaborationDiagram from './collaborationDiagram/CollaborationDiagram';
-import Header from '../components/Header';
-import { PaneMouseHandler } from '../utils/event-store';
-import { AutomationExecutionPanel } from '../components/automation/AutomationExecutionPanel';
-
-interface DiagramContentProps
-  extends Omit<ReactFlowProps, 'nodes' | 'edges' | 'onChange'> {
-  className?: string;
-  showAutomationExecutionPanel?: boolean;
-}
-
-export const DiagramContent: React.FC<DiagramContentProps> = ({
-  className = '',
-  showAutomationExecutionPanel = true,
-  ...props
-}) => {
-  // Auto-register function nodes when they are created
-  useAutoRegisterFunctions();
-
-  const handleOnPaneClick = useTriggerEvent('onPaneClick');
-
-  // Use specific hooks where available
-  const nodes = useDiagramNodes();
-  const edges = useDiagramEdges();
-  const onConnect = useDiagram((state) => state.onConnect);
-  const onEdgesChange = useDiagram((state) => state.onEdgesChange);
-  const onNodeDragEnd = useDiagram((state) => state.onNodeDragEnd);
-  const onNodeDragStart = useDiagram((state) => state.onNodeDragStart);
-  const onNodesChange = useDiagram((state) => state.onNodesChange);
-  const setNodes = useDiagram((state) => state.setNodes);
-  const diagramType = useDiagramType();
-  const contentHeights = useContentHeights();
-  const setShowEditEdge = useDiagram((state) => state.setSelectedEdge);
-  const isPannable = usePannable();
-
-  // Filter out hidden nodes for ReactFlow rendering
-  const visibleNodes = useMemo(() => {
-    return nodes.filter(node => !node.data?.isHidden);
-  }, [nodes]);
-
-  // Filter out edges connected to hidden nodes
-  const visibleEdges = useMemo(() => {
-    const visibleNodeIds = new Set(visibleNodes.map(node => node.id));
-    return edges.filter(edge =>
-      visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target)
-    );
-  }, [edges, visibleNodes]);
-
-  const { addNode } = useWorkflowNodeAction({
-    isReplacing: false,
-    variant: 'addParallelCol',
-    addInMiddle: false,
-    closeModal: () => setOpen(false),
-    direction: 'left',
-  });
-  const [activeItem, setActiveItem] = useState<IBlock | null>(null);
-  const [activeCard, setActiveCard] = useState<ICardNodeData | null>(null);
-  const { setNodeRef } = useDroppable({ id: 'main' });
-  const { open, onClick, setOpen } = useModalControls();
-
-  const closeModalsOnClickOutside: PaneMouseHandler = () => {
-    handleOnPaneClick();
-    setShowEditEdge(null);
-  };
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        delay: 250,
-        distance: 5,
-      },
-      onActivation({ event }) {
-        event.stopPropagation();
-      },
-    }),
-  );
-
-  const { getLayoutedElements } = useElk();
-  const layoutDirection = useLayoutDirection();
-  const setLayoutDirection = useSetLayoutDirection();
-  const layoutTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
-
-  // Set layout direction to RIGHT for automation diagrams
-  useEffect(() => {
-    if (diagramType === 'automation' && layoutDirection !== 'RIGHT') {
-      setLayoutDirection('RIGHT');
-    }
-  }, [diagramType, layoutDirection, setLayoutDirection]);
-
-  // Debounce layout recalculation to prevent continuous propagation
-  useEffect(() => {
-    // Clear any pending layout recalculation
-    if (layoutTimeoutRef.current) {
-      clearTimeout(layoutTimeoutRef.current);
-    }
-
-    // Debounce the layout recalculation
-    layoutTimeoutRef.current = setTimeout(() => {
-      getLayoutedElements();
-    }, 300); // 300ms debounce delay
-
-    return () => {
-      if (layoutTimeoutRef.current) {
-        clearTimeout(layoutTimeoutRef.current);
-      }
-    };
-  }, [nodes.length, edges.length, contentHeights, diagramType, layoutDirection, getLayoutedElements]);
-
-  // Listen for layout direction changes
-  useEffect(() => {
-    const handleLayoutDirectionChange = () => {
-      getLayoutedElements();
-    };
-
-    window.addEventListener('layoutDirectionChanged', handleLayoutDirectionChange);
-
-    return () => {
-      window.removeEventListener('layoutDirectionChanged', handleLayoutDirectionChange);
-    };
-  }, [getLayoutedElements]);
-
-  const { onDragEnd, onDragStart, onDragCancel } = useDragCallbacks({
-    setActiveItem,
-    setActiveCard,
-  });
-
-  const renderDynamicDiagram = () => {
-    if (diagramType === 'sequence') {
-      return (
-        <>
-          <SequenceDiagram sequenceNodes={visibleNodes} sequenceEdges={visibleEdges} />
-        </>
-      );
-    }
-
-    if (diagramType === 'arch') {
-      return <ArchDiagram archNodes={visibleNodes as any} archEdges={visibleEdges as any} />;
-    }
-
-    if (diagramType === 'stateMachine') {
-      return (
-        <>
-          <StateMachineDiagram stateNodes={visibleNodes} stateEdges={visibleEdges} />
-        </>
-      );
-    }
-    if (diagramType === 'systemFlow') {
-      return (
-        <>
-          <SystemFlowDiagram systemFlowNodes={visibleNodes} systemFlowEdges={visibleEdges} />
-        </>
-      );
-    }
-    if (diagramType === 'case') {
-      return (
-        <>
-          <UseCaseDiagram caseNodes={visibleNodes} caseEdges={visibleEdges} />
-        </>
-      );
-    }
-    if (diagramType === 'cloud-architecture') {
-      return (
-        <>
-          <CloudArchitectureDiagram initialNodes={visibleNodes as any} initialEdges={visibleEdges as any} />
-        </>
-      );
-    }
-    if (diagramType === 'collaboration') {
-      return (
-        <>
-          <CollaborationDiagram collabNodes={visibleNodes} collabEdges={visibleEdges} />
-        </>
-      );
-    }
-    if (diagramType === 'automation') {
-      return (
-        <>
-          <Box
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
-            className={className}
-          >
-            <Box
-              ref={setNodeRef}
-              sx={{ height: '100svh', width: '100svw', position: 'relative' }}
-            >
-              <ReactFlow
-                panOnDrag={isPannable}
-                nodesDraggable={isPannable}
-                nodes={visibleNodes}
-                onNodesChange={onNodesChange}
-                edges={visibleEdges}
-                onEdgesChange={onEdgesChange}
-                fitView
-                fitViewOptions={{
-                  padding: 0.2,
-                  minZoom: 0.3,
-                  maxZoom: 2,
-                  includeHiddenNodes: false,
-                }}
-                minZoom={0.1}
-                maxZoom={2}
-                onNodeDragStart={onNodeDragStart}
-                onNodeDragStop={onNodeDragEnd}
-                onConnect={onConnect}
-                connectionMode={ConnectionMode.Strict}
-                suppressContentEditableWarning
-                suppressHydrationWarning
-                onPaneClick={closeModalsOnClickOutside}
-                {...props}
-              />
-              {props.children}
-            </Box>
-          </Box>
-
-          <DragOverlay>
-            {activeItem ? (
-              <CardDataProvider nodeId={activeItem?.id}>
-                <BlockWrapper data={activeItem} />
-              </CardDataProvider>
-            ) : null}
-          </DragOverlay>
-
-          {showAutomationExecutionPanel && (
-            <AutomationExecutionPanel
-              nodes={visibleNodes as any}
-              edges={visibleEdges as any}
-              workflowId="automation-workflow"
-              onNodeUpdate={(nodeId, updatedData) => {
-                const updatedNodes = nodes.map(node =>
-                  node.id === nodeId
-                    ? { ...node, data: updatedData }
-                    : node
-                );
-                setNodes(updatedNodes);
-              }}
-            />
-          )}
-        </>
-      );
-    }
-    return (
-      <>
-        <Box
-          sx={{ display: 'flex', justifyContent: 'space-between' }}
-          className={className}
-        >
-          <Box
-            ref={setNodeRef}
-            sx={{ height: '100svh', width: '100svw', position: 'relative' }}
-          >
-            <Fab
-              onClick={() => addNode('function')}
-              sx={{ position: 'fixed', top: 450, left: 0 }}
-            >
-              Add Function
-            </Fab>
-            <ReactFlow
-              panOnDrag={isPannable}
-              nodesDraggable={isPannable}
-              nodes={visibleNodes}
-              onNodesChange={onNodesChange}
-              edges={visibleEdges}
-              onEdgesChange={onEdgesChange}
-              fitView
-              onNodeDragStart={onNodeDragStart}
-              onNodeDragStop={onNodeDragEnd}
-              onConnect={onConnect}
-              connectionMode={ConnectionMode.Strict}
-              suppressContentEditableWarning
-              suppressHydrationWarning
-              onPaneClick={closeModalsOnClickOutside}
-              {...props}
-            />
-            {props.children}
-          </Box>
-        </Box>
-
-        <DragOverlay>
-          {activeItem ? (
-            <CardDataProvider nodeId={activeItem?.id}>
-              <BlockWrapper data={activeItem} />
-            </CardDataProvider>
-          ) : null}
-        </DragOverlay>
-      </>
-    );
-  };
-
-  return (
-    <DndContext
-      onDragEnd={onDragEnd}
-      onDragStart={onDragStart}
-      onDragCancel={onDragCancel}
-      sensors={sensors}
-    >
-      {renderDynamicDiagram()}
-    </DndContext>
-  );
-};
-
-export default DiagramContent;
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { ConnectionMode, ReactFlow, ReactFlowProps, NodeChange, applyNodeChanges } from '@xyflow/react';
+import { useTriggerEvent } from '../utils/event-hooks';
+import { IBlock, ICardNodeData } from '../types/card-node';
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+
+import { Box, Fab, IconButton, Tooltip } from '@mui/material';
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+import { CardDataProvider } from '../contexts/CardDataProvider';
+import BlockWrapper from '../molecules/BlockWrapper';
+import useDragCallbacks from '../hooks/useDragCallbacks';
+import { useElk } from '../utils/elkLayout';
+import { useModalControls } from '../hooks/useModalControls';
+import { useWorkflowNodeAction } from '../hooks/useWorkflowNodeActiont';
+import {
+  useContentHeights,
+  useDiagram,
+  useDiagramEdges,
+  useDiagramNodes,
+  useDiagramType,
+  useLayoutDirection,
+  useSetLayoutDirection,
+  usePannable,
+  useUndo,
+  useRedo,
+  useCanUndo,
+  useCanRedo,
+} from '../contexts/DiagramProvider';
+import { useAutoRegisterFunctions } from '../hooks/useAutoRegisterFunctions';
+import SequenceDiagram from './sequence/SequenceDiagram';
+import ArchDiagram from './arch/ArchDiagram';
+import StateMachineDiagram from './stateMachine/StateMachineDiagram';
+import SystemFlowDiagram from './systemFlow/SystemFlowDiagram';
+import CloudArchitectureDiagram from './cloud-arch/components/CloudArchitectureDiagram';
+import UseCaseDiagram from './useCaseDiagram/UseCaseDiagram';
+import CollaborationDiagram from './collaborationDiagram/CollaborationDiagram';
+import Header from '../components/Header';
+import { PaneMouseHandler } from '../utils/event-store';
+import { AutomationExecutionPanel } from '../components/automation/AutomationExecutionPanel';
+
+interface DiagramContentProps
+  extends Omit<ReactFlowProps, 'nodes' | 'edges' | 'onChange'> {
+  className?: string;
+  showAutomationExecutionPanel?: boolean;
+}
+
+export const DiagramContent: React.FC<DiagramContentProps> = ({
+  className = '',
+  showAutomationExecutionPanel = true,
+  ...props
+}) => {
+  // Auto-register function nodes when they are created
+  useAutoRegisterFunctions();
+
+  const handleOnPaneClick = useTriggerEvent('onPaneClick');
+
+  // Use specific hooks where available
+  const nodes = useDiagramNodes();
+  const edges = useDiagramEdges();
+  const onConnect = useDiagram((state) => state.onConnect);
+  const onReconnect = useDiagram((state) => state.onReconnect);
+  const onEdgesChange = useDiagram((state) => state.onEdgesChange);
+  const onNodeDragEnd = useDiagram((state) => state.onNodeDragEnd);
+  const onNodeDragStart = useDiagram((state) => state.onNodeDragStart);
+  const onNodesChange = useDiagram((state) => state.onNodesChange);
+  const setNodes = useDiagram((state) => state.setNodes);
+  const diagramType = useDiagramType();
+  const contentHeights = useContentHeights();
+  const setShowEditEdge = useDiagram((state) => state.setSelectedEdge);
+  const selectedNode = useDiagram((state) => state.selectedNode);
+  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+  const isPannable = usePannable();
+  
+  // Undo/Redo hooks
+  const undo = useUndo();
+  const redo = useRedo();
+  const canUndo = useCanUndo();
+  const canRedo = useCanRedo();
+
+  // Handle keyboard shortcuts for undo/redo
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Don't trigger if user is typing in an input field
+      if (
+        event.target instanceof HTMLInputElement ||
+        event.target instanceof HTMLTextAreaElement ||
+        (event.target as any)?.isContentEditable
+      ) {
+        return;
+      }
+
+      // Ctrl+Z or Cmd+Z for Undo
+      if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) {
+        event.preventDefault();
+        if (canUndo) {
+          undo();
+        }
+      }
+
+      // Ctrl+Y or Cmd+Shift+Z for Redo
+      if (
+        ((event.ctrlKey || event.metaKey) && event.key === 'y') ||
+        ((event.ctrlKey || event.metaKey) && event.key === 'z' && event.shiftKey)
+      ) {
+        event.preventDefault();
+        if (canRedo) {
+          redo();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [undo, redo, canUndo, canRedo]);
+
+  // Filter out hidden nodes for ReactFlow rendering
+  const visibleNodes = useMemo(() => {
+    return nodes.filter(node => !node.data?.isHidden);
+  }, [nodes]);
+
+  // Filter out edges connected to hidden nodes
+  const visibleEdges = useMemo(() => {
+    const visibleNodeIds = new Set(visibleNodes.map(node => node.id));
+    return edges.filter(edge =>
+      visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target)
+    );
+  }, [edges, visibleNodes]);
+
+  const { addNode } = useWorkflowNodeAction({
+    isReplacing: false,
+    variant: 'addParallelCol',
+    addInMiddle: false,
+    closeModal: () => setOpen(false),
+    direction: 'left',
+  });
+  const [activeItem, setActiveItem] = useState<IBlock | null>(null);
+  const [activeCard, setActiveCard] = useState<ICardNodeData | null>(null);
+  const { setNodeRef } = useDroppable({ id: 'main' });
+  const { open, onClick, setOpen } = useModalControls();
+
+  const closeModalsOnClickOutside: PaneMouseHandler = () => {
+    handleOnPaneClick();
+    setShowEditEdge(null);
+  };
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        delay: 250,
+        distance: 5,
+      },
+      onActivation({ event }) {
+        event.stopPropagation();
+      },
+    }),
+  );
+
+  const { getLayoutedElements } = useElk();
+  const layoutDirection = useLayoutDirection();
+  const setLayoutDirection = useSetLayoutDirection();
+  const layoutTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  // Set layout direction to RIGHT for automation diagrams
+  useEffect(() => {
+    if (diagramType === 'automation' && layoutDirection !== 'RIGHT') {
+      setLayoutDirection('RIGHT');
+    }
+  }, [diagramType, layoutDirection, setLayoutDirection]);
+
+  // Debounce layout recalculation to prevent continuous propagation
+  useEffect(() => {
+    // Clear any pending layout recalculation
+    if (layoutTimeoutRef.current) {
+      clearTimeout(layoutTimeoutRef.current);
+    }
+
+    // Debounce the layout recalculation
+    layoutTimeoutRef.current = setTimeout(() => {
+      getLayoutedElements();
+    }, 300); // 300ms debounce delay
+
+    return () => {
+      if (layoutTimeoutRef.current) {
+        clearTimeout(layoutTimeoutRef.current);
+      }
+    };
+  }, [nodes.length, edges.length, contentHeights, diagramType, layoutDirection, getLayoutedElements]);
+
+  // Listen for layout direction changes
+  useEffect(() => {
+    const handleLayoutDirectionChange = () => {
+      getLayoutedElements();
+    };
+
+    window.addEventListener('layoutDirectionChanged', handleLayoutDirectionChange);
+
+    return () => {
+      window.removeEventListener('layoutDirectionChanged', handleLayoutDirectionChange);
+    };
+  }, [getLayoutedElements]);
+
+  const { onDragEnd, onDragStart, onDragCancel } = useDragCallbacks({
+    setActiveItem,
+    setActiveCard,
+  });
+
+  // Handle keyboard deletion of selected nodes (only for automation diagram)
+  useEffect(() => {
+    if (diagramType !== 'automation') return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Check if Delete or Backspace key is pressed
+      if (event.key === 'Delete' || event.key === 'Backspace') {
+        // Don't trigger deletion if user is typing in an input field
+        if (
+          event.target instanceof HTMLInputElement ||
+          event.target instanceof HTMLTextAreaElement ||
+          (event.target as any)?.isContentEditable
+        ) {
+          return;
+        }
+
+        // Check if a node is selected (either from store or ReactFlow's selection)
+        const selectedNodeId = selectedNode || visibleNodes.find(node => node.selected)?.id;
+        
+        if (selectedNodeId) {
+          event.preventDefault();
+          event.stopPropagation();
+          
+          // Find the node to delete
+          const nodeToDelete = nodes.find((node) => node.id === selectedNodeId);
+          if (!nodeToDelete) return;
+
+          // Create a remove change for the node
+          const nodeChanges: NodeChange[] = [
+            {
+              id: selectedNodeId,
+              type: 'remove',
+            },
+          ];
+
+          // Apply the changes through onNodesChange (which handles edge cleanup)
+          onNodesChange(nodeChanges);
+
+          // Clear the selected node
+          setSelectedNode(null);
+        }
+      }
+    };
+
+    // Add event listener
+    document.addEventListener('keydown', handleKeyDown);
+
+    // Cleanup on unmount
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [diagramType, selectedNode, nodes, visibleNodes, onNodesChange, setSelectedNode]);
+
+  const renderDynamicDiagram = () => {
+    if (diagramType === 'sequence') {
+      return (
+        <>
+          <SequenceDiagram sequenceNodes={visibleNodes} sequenceEdges={visibleEdges} />
+        </>
+      );
+    }
+
+    if (diagramType === 'arch') {
+      return <ArchDiagram archNodes={visibleNodes as any} archEdges={visibleEdges as any} />;
+    }
+
+    if (diagramType === 'stateMachine') {
+      return (
+        <>
+          <StateMachineDiagram stateNodes={visibleNodes} stateEdges={visibleEdges} />
+        </>
+      );
+    }
+    if (diagramType === 'systemFlow') {
+      return (
+        <>
+          <SystemFlowDiagram systemFlowNodes={visibleNodes} systemFlowEdges={visibleEdges} />
+        </>
+      );
+    }
+    if (diagramType === 'case') {
+      return (
+        <>
+          <UseCaseDiagram caseNodes={visibleNodes} caseEdges={visibleEdges} />
+        </>
+      );
+    }
+    if (diagramType === 'cloud-architecture') {
+      return (
+        <>
+          <CloudArchitectureDiagram initialNodes={visibleNodes as any} initialEdges={visibleEdges as any} />
+        </>
+      );
+    }
+    if (diagramType === 'collaboration') {
+      return (
+        <>
+          <CollaborationDiagram collabNodes={visibleNodes} collabEdges={visibleEdges} />
+        </>
+      );
+    }
+    if (diagramType === 'automation') {
+      return (
+        <>
+          <Box
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            className={className}
+          >
+            <Box
+              ref={setNodeRef}
+              sx={{ height: '100svh', width: '100svw', position: 'relative' }}
+            >
+              {/* Undo/Redo Toolbar */}
+              <Box
+                sx={{
+                  position: 'absolute',
+                  top: 16,
+                  left: 16,
+                  zIndex: 10,
+                  display: 'flex',
+                  gap: 0.5,
+                  backgroundColor: 'background.paper',
+                  borderRadius: 2,
+                  boxShadow: 2,
+                  padding: 0.5,
+                }}
+              >
+                <Tooltip title="Undo (Ctrl+Z)" placement="bottom">
+                  <span>
+                    <IconButton
+                      onClick={undo}
+                      disabled={!canUndo}
+                      size="small"
+                      sx={{
+                        color: canUndo ? 'primary.main' : 'action.disabled',
+                      }}
+                    >
+                      <UndoIcon fontSize="small" />
+                    </IconButton>
+                  </span>
+                </Tooltip>
+                <Tooltip title="Redo (Ctrl+Y)" placement="bottom">
+                  <span>
+                    <IconButton
+                      onClick={redo}
+                      disabled={!canRedo}
+                      size="small"
+                      sx={{
+                        color: canRedo ? 'primary.main' : 'action.disabled',
+                      }}
+                    >
+                      <RedoIcon fontSize="small" />
+                    </IconButton>
+                  </span>
+                </Tooltip>
+              </Box>
+              <ReactFlow
+                panOnDrag={isPannable}
+                nodesDraggable={isPannable}
+                nodes={visibleNodes}
+                onNodesChange={onNodesChange}
+                edges={visibleEdges}
+                onEdgesChange={onEdgesChange}
+                onReconnect={onReconnect}
+                onNodeClick={(event, node) => {
+                  event.stopPropagation();
+                  setSelectedNode(node.id);
+                }}
+                onPaneClick={(event) => {
+                  setSelectedNode(null);
+                  closeModalsOnClickOutside(event);
+                }}
+                nodesConnectable={true}
+                nodesFocusable={true}
+                edgesFocusable={true}
+                elementsSelectable={true}
+                selectNodesOnDrag={false}
+                defaultEdgeOptions={{
+                  reconnectable: true,
+                }}
+                fitView
+                fitViewOptions={{
+                  padding: 0.2,
+                  minZoom: 0.3,
+                  maxZoom: 2,
+                  includeHiddenNodes: false,
+                }}
+                minZoom={0.1}
+                maxZoom={2}
+                onNodeDragStart={onNodeDragStart}
+                onNodeDragStop={onNodeDragEnd}
+                onConnect={onConnect}
+                connectionMode={ConnectionMode.Strict}
+                suppressContentEditableWarning
+                suppressHydrationWarning
+                {...props}
+              />
+              {props.children}
+            </Box>
+          </Box>
+
+          <DragOverlay>
+            {activeItem ? (
+              <CardDataProvider nodeId={activeItem?.id}>
+                <BlockWrapper data={activeItem} />
+              </CardDataProvider>
+            ) : null}
+          </DragOverlay>
+
+          {showAutomationExecutionPanel && (
+            <AutomationExecutionPanel
+              nodes={visibleNodes as any}
+              edges={visibleEdges as any}
+              workflowId="automation-workflow"
+              onNodeUpdate={(nodeId, updatedData) => {
+                const updatedNodes = nodes.map(node =>
+                  node.id === nodeId
+                    ? { ...node, data: updatedData }
+                    : node
+                );
+                setNodes(updatedNodes);
+              }}
+            />
+          )}
+        </>
+      );
+    }
+    return (
+      <>
+        <Box
+          sx={{ display: 'flex', justifyContent: 'space-between' }}
+          className={className}
+        >
+          <Box
+            ref={setNodeRef}
+            sx={{ height: '100svh', width: '100svw', position: 'relative' }}
+          >
+            {/* Undo/Redo Toolbar */}
+            <Box
+              sx={{
+                position: 'absolute',
+                top: 16,
+                left: 16,
+                zIndex: 10,
+                display: 'flex',
+                gap: 0.5,
+                backgroundColor: 'background.paper',
+                borderRadius: 2,
+                boxShadow: 2,
+                padding: 0.5,
+              }}
+            >
+              <Tooltip title="Undo (Ctrl+Z)" placement="bottom">
+                <span>
+                  <IconButton
+                    onClick={undo}
+                    disabled={!canUndo}
+                    size="small"
+                    sx={{
+                      color: canUndo ? 'primary.main' : 'action.disabled',
+                    }}
+                  >
+                    <UndoIcon fontSize="small" />
+                  </IconButton>
+                </span>
+              </Tooltip>
+              <Tooltip title="Redo (Ctrl+Y)" placement="bottom">
+                <span>
+                  <IconButton
+                    onClick={redo}
+                    disabled={!canRedo}
+                    size="small"
+                    sx={{
+                      color: canRedo ? 'primary.main' : 'action.disabled',
+                    }}
+                  >
+                    <RedoIcon fontSize="small" />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </Box>
+            <Fab
+              onClick={() => addNode('function')}
+              sx={{ position: 'fixed', top: 450, left: 0 }}
+            >
+              Add Function
+            </Fab>
+            <ReactFlow
+              panOnDrag={isPannable}
+              nodesDraggable={isPannable}
+              nodes={visibleNodes}
+              onNodesChange={onNodesChange}
+              edges={visibleEdges}
+              onEdgesChange={onEdgesChange}
+              fitView
+              onNodeDragStart={onNodeDragStart}
+              onNodeDragStop={onNodeDragEnd}
+              onConnect={onConnect}
+              connectionMode={ConnectionMode.Strict}
+              suppressContentEditableWarning
+              suppressHydrationWarning
+              onPaneClick={closeModalsOnClickOutside}
+              {...props}
+            />
+            {props.children}
+          </Box>
+        </Box>
+
+        <DragOverlay>
+          {activeItem ? (
+            <CardDataProvider nodeId={activeItem?.id}>
+              <BlockWrapper data={activeItem} />
+            </CardDataProvider>
+          ) : null}
+        </DragOverlay>
+      </>
+    );
+  };
+
+  return (
+    <DndContext
+      onDragEnd={onDragEnd}
+      onDragStart={onDragStart}
+      onDragCancel={onDragCancel}
+      sensors={sensors}
+    >
+      {renderDynamicDiagram()}
+    </DndContext>
+  );
+};
+
+export default DiagramContent;