@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/systemFlow/controls/SystemFlowControls.tsx

@@ -1,435 +1,435 @@
-'use client';
-
-import React, { useState, createContext, useCallback, useMemo } from 'react';
-import {
-    Box,
-    Typography,
-    Paper,
-    IconButton,
-    Tabs,
-    Tab,
-    Tooltip,
-    Divider,
-    Collapse,
-    List,
-    ListItem,
-    ListItemButton,
-    ListItemIcon,
-    ListItemText,
-} from '@mui/material';
-import UndoIcon from '@mui/icons-material/Undo';
-import RedoIcon from '@mui/icons-material/Redo';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import TimelineIcon from '@mui/icons-material/Timeline';
-import AccountTreeIcon from '@mui/icons-material/AccountTree';
-import ControlEdgeList from '../../../components/ControlEdgeList';
-import {
-    DiagramControlsProps,
-    NodeType,
-    TabPanelProps,
-    NodeSelectionContextType,
-    SystemFlowNode,
-    SystemFlowEdge
-} from '../../../types/system-flow-types';
-import { Edge } from '@xyflow/react';
-
-// Simple node icon
-const NodeIcon = React.memo(() => (
-    <svg width="20" height="20" viewBox="0 0 20 20">
-        <rect x="2" y="2" width="16" height="16" rx="2" fill="none" stroke="black" strokeWidth="2" />
-    </svg>
-));
-
-function TabPanel(props: TabPanelProps) {
-    const { children, value, index, ...other } = props;
-    return (
-        <div
-            role="tabpanel"
-            hidden={value !== index}
-            id={`simple-tabpanel-${index}`}
-            aria-labelledby={`simple-tab-${index}`}
-            {...other}
-            style={{ padding: '8px 0' }}
-        >
-            {value === index && <Box>{children}</Box>}
-        </div>
-    );
-}
-
-// Node types including structures
-const nodeTypes: NodeType[] = [
-    {
-        id: 'SystemNode',
-        name: 'Node',
-        icon: <NodeIcon />,
-    },
-];
-
-// Structure types
-const structureTypes: NodeType[] = [
-    {
-        id: 'Structure1',
-        name: 'Structure 1',
-        icon: <AccountTreeIcon fontSize="small" />,
-    },
-    {
-        id: 'Structure2',
-        name: 'Structure 2',
-        icon: <AccountTreeIcon fontSize="small" />,
-    },
-    {
-        id: 'Structure3',
-        name: 'Structure 3',
-        icon: <AccountTreeIcon fontSize="small" />,
-    },
-];
-
-const SystemFlowControls: React.FC<DiagramControlsProps> = React.memo(({
-    onAddEntity,
-    onUndo,
-    onRedo,
-    canUndo,
-    canRedo,
-    onLoadTemplate,
-    edges,
-    nodes,
-    onEditEdge,
-}) => {
-    const [tabValue, setTabValue] = useState(0);
-    const [expandComponents, setExpandComponents] = useState(true);
-    const [expandStructures, setExpandStructures] = useState(true);
-    const [expandFlows, setExpandFlows] = useState(true);
-
-    const handleTabChange = useCallback(
-        (event: React.SyntheticEvent, newValue: number) => {
-            setTabValue(newValue);
-        },
-        [],
-    );
-
-    // For adding nodes
-    const handleAddNode = useCallback(
-        (nodeType: string) => {
-            onAddEntity(nodeType);
-        },
-        [onAddEntity],
-    );
-
-    // For loading templates
-    const handleLoadTemplate = useCallback(
-        (templateType: string) => {
-            if (onLoadTemplate) {
-                onLoadTemplate(templateType);
-            }
-        },
-        [onLoadTemplate],
-    );
-
-    // Wrapper function to handle edge type conversion
-    const handleEditEdge = useCallback(
-        (edge: Edge) => {
-            if (onEditEdge) {
-                onEditEdge(edge as SystemFlowEdge);
-            }
-        },
-        [onEditEdge],
-    );
-
-    // Handle expand/collapse for components section
-    const handleToggleComponents = useCallback(() => {
-        setExpandComponents(prev => !prev);
-    }, []);
-
-    // Handle expand/collapse for structures section
-    const handleToggleStructures = useCallback(() => {
-        setExpandStructures(prev => !prev);
-    }, []);
-
-    // Handle expand/collapse for flows section
-    const handleToggleFlows = useCallback(() => {
-        setExpandFlows(prev => !prev);
-    }, []);
-
-    // Memoize the nodeTypes and structureTypes arrays to prevent unnecessary re-renders
-    const memoizedNodeTypes = useMemo(() => nodeTypes, []);
-    const memoizedStructureTypes = useMemo(() => structureTypes, []);
-
-    return (
-        <Paper
-            elevation={3}
-            sx={{
-                p: 2,
-                borderRadius: 2,
-                bgcolor: '#242424',
-                color: '#fff',
-                border: '1px solid #333',
-                width: '100%',
-                maxHeight: '100%',
-                overflowY: 'auto',
-                // Custom scrollbar styling
-                '&::-webkit-scrollbar': {
-                    width: '6px',
-                },
-                '&::-webkit-scrollbar-track': {
-                    background: 'transparent',
-                },
-                '&::-webkit-scrollbar-thumb': {
-                    background: '#444',
-                    borderRadius: '3px',
-                    '&:hover': {
-                        background: '#666',
-                    },
-                },
-                // Dark theme styling for all child components
-                '& .MuiTab-root': {
-                    color: '#999',
-                    '&.Mui-selected': {
-                        color: '#61dafb',
-                    },
-                },
-                '& .MuiTabs-indicator': {
-                    backgroundColor: '#61dafb',
-                },
-                '& .MuiDivider-root': {
-                    borderColor: '#333',
-                },
-                '& .MuiListItemButton-root': {
-                    color: '#fff',
-                    '&:hover': {
-                        bgcolor: 'rgba(97, 218, 251, 0.1)',
-                    },
-                },
-                '& .MuiIconButton-root': {
-                    color: '#999',
-                    '&:hover': {
-                        color: '#fff',
-                        bgcolor: 'rgba(255, 255, 255, 0.1)',
-                    },
-                    '&.Mui-disabled': {
-                        color: '#555',
-                    },
-                },
-            }}
-        >
-            <Box
-                display="flex"
-                justifyContent="space-between"
-                alignItems="center"
-                mb={1}
-            >
-                <Typography variant="h6" sx={{ fontWeight: 'medium' }}>
-                    System Flow
-                </Typography>
-                <Box>
-                    <Tooltip title="Undo">
-                        <span>
-                            <IconButton
-                                size="small"
-                                onClick={onUndo}
-                                disabled={!canUndo}
-                                sx={{ color: canUndo ? 'primary.main' : 'text.disabled' }}
-                            >
-                                <UndoIcon fontSize="small" />
-                            </IconButton>
-                        </span>
-                    </Tooltip>
-                    <Tooltip title="Redo">
-                        <span>
-                            <IconButton
-                                size="small"
-                                onClick={onRedo}
-                                disabled={!canRedo}
-                                sx={{ color: canRedo ? 'primary.main' : 'text.disabled' }}
-                            >
-                                <RedoIcon fontSize="small" />
-                            </IconButton>
-                        </span>
-                    </Tooltip>
-                </Box>
-            </Box>
-
-            <Tabs
-                value={tabValue}
-                onChange={handleTabChange}
-                sx={{
-                    '& .MuiTab-root': {
-                        minHeight: 40,
-                        fontSize: '0.875rem',
-                    },
-                }}
-            >
-                <Tab label="Components" />
-                <Tab label="Templates" />
-            </Tabs>
-
-            {/* Components Tab */}
-            <TabPanel value={tabValue} index={0}>
-                {/* Components Section */}
-                <Box mb={1}>
-                    <Box
-                        display="flex"
-                        justifyContent="space-between"
-                        alignItems="center"
-                        onClick={handleToggleComponents}
-                        sx={{
-                            cursor: 'pointer',
-                            '&:hover': { bgcolor: 'action.hover' },
-                            p: 1,
-                            borderRadius: 1,
-                        }}
-                    >
-                        <Typography variant="subtitle2" fontWeight="bold">
-                            Components
-                        </Typography>
-                        {expandComponents ? (
-                            <ExpandLessIcon fontSize="small" />
-                        ) : (
-                            <ExpandMoreIcon fontSize="small" />
-                        )}
-                    </Box>
-                    <Collapse in={expandComponents}>
-                        <List dense disablePadding>
-                            {memoizedNodeTypes.map((type) => (
-                                <ListItem disablePadding key={type.id}>
-                                    <ListItemButton
-                                        onClick={() => handleAddNode(type.id)}
-                                        sx={{ pl: 2 }}
-                                    >
-                                        <ListItemIcon sx={{ minWidth: 36 }}>
-                                            {type.icon}
-                                        </ListItemIcon>
-                                        <ListItemText primary={type.name} />
-                                    </ListItemButton>
-                                </ListItem>
-                            ))}
-                        </List>
-                    </Collapse>
-                </Box>
-
-                <Divider sx={{ my: 1 }} />
-
-                {/* Structures Section */}
-                <Box mb={1}>
-                    <Box
-                        display="flex"
-                        justifyContent="space-between"
-                        alignItems="center"
-                        onClick={handleToggleStructures}
-                        sx={{
-                            cursor: 'pointer',
-                            '&:hover': { bgcolor: 'action.hover' },
-                            p: 1,
-                            borderRadius: 1,
-                        }}
-                    >
-                        <Typography variant="subtitle2" fontWeight="bold">
-                            Structures
-                        </Typography>
-                        {expandStructures ? (
-                            <ExpandLessIcon fontSize="small" />
-                        ) : (
-                            <ExpandMoreIcon fontSize="small" />
-                        )}
-                    </Box>
-                    <Collapse in={expandStructures}>
-                        <List dense disablePadding>
-                            {memoizedStructureTypes.map((type) => (
-                                <ListItem disablePadding key={type.id}>
-                                    <ListItemButton
-                                        onClick={() => handleAddNode(type.id)}
-                                        sx={{ pl: 2 }}
-                                    >
-                                        <ListItemIcon sx={{ minWidth: 36 }}>
-                                            {type.icon}
-                                        </ListItemIcon>
-                                        <ListItemText primary={type.name} />
-                                    </ListItemButton>
-                                </ListItem>
-                            ))}
-                        </List>
-                    </Collapse>
-                </Box>
-
-                <Divider sx={{ my: 1 }} />
-
-                {/* Flows Section */}
-                <Box mb={1}>
-                    <Box
-                        display="flex"
-                        justifyContent="space-between"
-                        alignItems="center"
-                        onClick={handleToggleFlows}
-                        sx={{
-                            cursor: 'pointer',
-                            '&:hover': { bgcolor: 'action.hover' },
-                            p: 1,
-                            borderRadius: 1,
-                        }}
-                    >
-                        <Typography variant="subtitle2" fontWeight="bold">
-                            Flows
-                        </Typography>
-                        {expandFlows ? (
-                            <ExpandLessIcon fontSize="small" />
-                        ) : (
-                            <ExpandMoreIcon fontSize="small" />
-                        )}
-                    </Box>
-                    <Collapse in={expandFlows}>
-                        <Box sx={{ px: 1 }}>
-                            {/* Edge list using ControlEdgeList */}
-                            <ControlEdgeList
-                                edges={edges}
-                                nodes={nodes}
-                                type="systemFlow"
-                                onEditEdge={handleEditEdge}
-                                nodeTypes={memoizedNodeTypes}
-                            />
-                        </Box>
-                    </Collapse>
-                </Box>
-            </TabPanel>
-
-            {/* Templates Tab */}
-            <TabPanel value={tabValue} index={1}>
-                <Typography variant="body2" color="text.secondary" sx={{ p: 1 }}>
-                    Quick start with pre-defined system flow templates
-                </Typography>
-                <List dense>
-                    <ListItem disablePadding>
-                        <ListItemButton
-                            onClick={() => handleLoadTemplate('simple-system-flow')}
-                            sx={{
-                                pl: 2,
-                                border: '1px solid',
-                                borderColor: 'divider',
-                                borderRadius: 1,
-                                mb: 1,
-                            }}
-                        >
-                            <ListItemIcon sx={{ minWidth: 36 }}>
-                                <TimelineIcon fontSize="small" />
-                            </ListItemIcon>
-                            <ListItemText
-                                primary="Simple System Flow"
-                                secondary="Basic system components and flows"
-                            />
-                        </ListItemButton>
-                    </ListItem>
-                </List>
-            </TabPanel>
-        </Paper>
-    );
-});
-
-SystemFlowControls.displayName = 'SystemFlowControls';
-
-// Node selection context
-export const NodeSelectionContext = createContext<NodeSelectionContextType>({
-    selectedNodeType: null,
-    setSelectedNodeType: () => { },
-    addNodeAtCenter: undefined,
-});
-
-export default SystemFlowControls;
+'use client';
+
+import React, { useState, createContext, useCallback, useMemo } from 'react';
+import {
+    Box,
+    Typography,
+    Paper,
+    IconButton,
+    Tabs,
+    Tab,
+    Tooltip,
+    Divider,
+    Collapse,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+} from '@mui/material';
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import TimelineIcon from '@mui/icons-material/Timeline';
+import AccountTreeIcon from '@mui/icons-material/AccountTree';
+import ControlEdgeList from '../../../components/ControlEdgeList';
+import {
+    DiagramControlsProps,
+    NodeType,
+    TabPanelProps,
+    NodeSelectionContextType,
+    SystemFlowNode,
+    SystemFlowEdge
+} from '../../../types/system-flow-types';
+import { Edge } from '@xyflow/react';
+
+// Simple node icon
+const NodeIcon = React.memo(() => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+        <rect x="2" y="2" width="16" height="16" rx="2" fill="none" stroke="black" strokeWidth="2" />
+    </svg>
+));
+
+function TabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+            style={{ padding: '8px 0' }}
+        >
+            {value === index && <Box>{children}</Box>}
+        </div>
+    );
+}
+
+// Node types including structures
+const nodeTypes: NodeType[] = [
+    {
+        id: 'SystemNode',
+        name: 'Node',
+        icon: <NodeIcon />,
+    },
+];
+
+// Structure types
+const structureTypes: NodeType[] = [
+    {
+        id: 'Structure1',
+        name: 'Structure 1',
+        icon: <AccountTreeIcon fontSize="small" />,
+    },
+    {
+        id: 'Structure2',
+        name: 'Structure 2',
+        icon: <AccountTreeIcon fontSize="small" />,
+    },
+    {
+        id: 'Structure3',
+        name: 'Structure 3',
+        icon: <AccountTreeIcon fontSize="small" />,
+    },
+];
+
+const SystemFlowControls: React.FC<DiagramControlsProps> = React.memo(({
+    onAddEntity,
+    onUndo,
+    onRedo,
+    canUndo,
+    canRedo,
+    onLoadTemplate,
+    edges,
+    nodes,
+    onEditEdge,
+}) => {
+    const [tabValue, setTabValue] = useState(0);
+    const [expandComponents, setExpandComponents] = useState(true);
+    const [expandStructures, setExpandStructures] = useState(true);
+    const [expandFlows, setExpandFlows] = useState(true);
+
+    const handleTabChange = useCallback(
+        (event: React.SyntheticEvent, newValue: number) => {
+            setTabValue(newValue);
+        },
+        [],
+    );
+
+    // For adding nodes
+    const handleAddNode = useCallback(
+        (nodeType: string) => {
+            onAddEntity(nodeType);
+        },
+        [onAddEntity],
+    );
+
+    // For loading templates
+    const handleLoadTemplate = useCallback(
+        (templateType: string) => {
+            if (onLoadTemplate) {
+                onLoadTemplate(templateType);
+            }
+        },
+        [onLoadTemplate],
+    );
+
+    // Wrapper function to handle edge type conversion
+    const handleEditEdge = useCallback(
+        (edge: Edge) => {
+            if (onEditEdge) {
+                onEditEdge(edge as SystemFlowEdge);
+            }
+        },
+        [onEditEdge],
+    );
+
+    // Handle expand/collapse for components section
+    const handleToggleComponents = useCallback(() => {
+        setExpandComponents(prev => !prev);
+    }, []);
+
+    // Handle expand/collapse for structures section
+    const handleToggleStructures = useCallback(() => {
+        setExpandStructures(prev => !prev);
+    }, []);
+
+    // Handle expand/collapse for flows section
+    const handleToggleFlows = useCallback(() => {
+        setExpandFlows(prev => !prev);
+    }, []);
+
+    // Memoize the nodeTypes and structureTypes arrays to prevent unnecessary re-renders
+    const memoizedNodeTypes = useMemo(() => nodeTypes, []);
+    const memoizedStructureTypes = useMemo(() => structureTypes, []);
+
+    return (
+        <Paper
+            elevation={3}
+            sx={{
+                p: 2,
+                borderRadius: 2,
+                bgcolor: '#242424',
+                color: '#fff',
+                border: '1px solid #333',
+                width: '100%',
+                maxHeight: '100%',
+                overflowY: 'auto',
+                // Custom scrollbar styling
+                '&::-webkit-scrollbar': {
+                    width: '6px',
+                },
+                '&::-webkit-scrollbar-track': {
+                    background: 'transparent',
+                },
+                '&::-webkit-scrollbar-thumb': {
+                    background: '#444',
+                    borderRadius: '3px',
+                    '&:hover': {
+                        background: '#666',
+                    },
+                },
+                // Dark theme styling for all child components
+                '& .MuiTab-root': {
+                    color: '#999',
+                    '&.Mui-selected': {
+                        color: '#61dafb',
+                    },
+                },
+                '& .MuiTabs-indicator': {
+                    backgroundColor: '#61dafb',
+                },
+                '& .MuiDivider-root': {
+                    borderColor: '#333',
+                },
+                '& .MuiListItemButton-root': {
+                    color: '#fff',
+                    '&:hover': {
+                        bgcolor: 'rgba(97, 218, 251, 0.1)',
+                    },
+                },
+                '& .MuiIconButton-root': {
+                    color: '#999',
+                    '&:hover': {
+                        color: '#fff',
+                        bgcolor: 'rgba(255, 255, 255, 0.1)',
+                    },
+                    '&.Mui-disabled': {
+                        color: '#555',
+                    },
+                },
+            }}
+        >
+            <Box
+                display="flex"
+                justifyContent="space-between"
+                alignItems="center"
+                mb={1}
+            >
+                <Typography variant="h6" sx={{ fontWeight: 'medium' }}>
+                    System Flow
+                </Typography>
+                <Box>
+                    <Tooltip title="Undo">
+                        <span>
+                            <IconButton
+                                size="small"
+                                onClick={onUndo}
+                                disabled={!canUndo}
+                                sx={{ color: canUndo ? 'primary.main' : 'text.disabled' }}
+                            >
+                                <UndoIcon fontSize="small" />
+                            </IconButton>
+                        </span>
+                    </Tooltip>
+                    <Tooltip title="Redo">
+                        <span>
+                            <IconButton
+                                size="small"
+                                onClick={onRedo}
+                                disabled={!canRedo}
+                                sx={{ color: canRedo ? 'primary.main' : 'text.disabled' }}
+                            >
+                                <RedoIcon fontSize="small" />
+                            </IconButton>
+                        </span>
+                    </Tooltip>
+                </Box>
+            </Box>
+
+            <Tabs
+                value={tabValue}
+                onChange={handleTabChange}
+                sx={{
+                    '& .MuiTab-root': {
+                        minHeight: 40,
+                        fontSize: '0.875rem',
+                    },
+                }}
+            >
+                <Tab label="Components" />
+                <Tab label="Templates" />
+            </Tabs>
+
+            {/* Components Tab */}
+            <TabPanel value={tabValue} index={0}>
+                {/* Components Section */}
+                <Box mb={1}>
+                    <Box
+                        display="flex"
+                        justifyContent="space-between"
+                        alignItems="center"
+                        onClick={handleToggleComponents}
+                        sx={{
+                            cursor: 'pointer',
+                            '&:hover': { bgcolor: 'action.hover' },
+                            p: 1,
+                            borderRadius: 1,
+                        }}
+                    >
+                        <Typography variant="subtitle2" fontWeight="bold">
+                            Components
+                        </Typography>
+                        {expandComponents ? (
+                            <ExpandLessIcon fontSize="small" />
+                        ) : (
+                            <ExpandMoreIcon fontSize="small" />
+                        )}
+                    </Box>
+                    <Collapse in={expandComponents}>
+                        <List dense disablePadding>
+                            {memoizedNodeTypes.map((type) => (
+                                <ListItem disablePadding key={type.id}>
+                                    <ListItemButton
+                                        onClick={() => handleAddNode(type.id)}
+                                        sx={{ pl: 2 }}
+                                    >
+                                        <ListItemIcon sx={{ minWidth: 36 }}>
+                                            {type.icon}
+                                        </ListItemIcon>
+                                        <ListItemText primary={type.name} />
+                                    </ListItemButton>
+                                </ListItem>
+                            ))}
+                        </List>
+                    </Collapse>
+                </Box>
+
+                <Divider sx={{ my: 1 }} />
+
+                {/* Structures Section */}
+                <Box mb={1}>
+                    <Box
+                        display="flex"
+                        justifyContent="space-between"
+                        alignItems="center"
+                        onClick={handleToggleStructures}
+                        sx={{
+                            cursor: 'pointer',
+                            '&:hover': { bgcolor: 'action.hover' },
+                            p: 1,
+                            borderRadius: 1,
+                        }}
+                    >
+                        <Typography variant="subtitle2" fontWeight="bold">
+                            Structures
+                        </Typography>
+                        {expandStructures ? (
+                            <ExpandLessIcon fontSize="small" />
+                        ) : (
+                            <ExpandMoreIcon fontSize="small" />
+                        )}
+                    </Box>
+                    <Collapse in={expandStructures}>
+                        <List dense disablePadding>
+                            {memoizedStructureTypes.map((type) => (
+                                <ListItem disablePadding key={type.id}>
+                                    <ListItemButton
+                                        onClick={() => handleAddNode(type.id)}
+                                        sx={{ pl: 2 }}
+                                    >
+                                        <ListItemIcon sx={{ minWidth: 36 }}>
+                                            {type.icon}
+                                        </ListItemIcon>
+                                        <ListItemText primary={type.name} />
+                                    </ListItemButton>
+                                </ListItem>
+                            ))}
+                        </List>
+                    </Collapse>
+                </Box>
+
+                <Divider sx={{ my: 1 }} />
+
+                {/* Flows Section */}
+                <Box mb={1}>
+                    <Box
+                        display="flex"
+                        justifyContent="space-between"
+                        alignItems="center"
+                        onClick={handleToggleFlows}
+                        sx={{
+                            cursor: 'pointer',
+                            '&:hover': { bgcolor: 'action.hover' },
+                            p: 1,
+                            borderRadius: 1,
+                        }}
+                    >
+                        <Typography variant="subtitle2" fontWeight="bold">
+                            Flows
+                        </Typography>
+                        {expandFlows ? (
+                            <ExpandLessIcon fontSize="small" />
+                        ) : (
+                            <ExpandMoreIcon fontSize="small" />
+                        )}
+                    </Box>
+                    <Collapse in={expandFlows}>
+                        <Box sx={{ px: 1 }}>
+                            {/* Edge list using ControlEdgeList */}
+                            <ControlEdgeList
+                                edges={edges}
+                                nodes={nodes}
+                                type="systemFlow"
+                                onEditEdge={handleEditEdge}
+                                nodeTypes={memoizedNodeTypes}
+                            />
+                        </Box>
+                    </Collapse>
+                </Box>
+            </TabPanel>
+
+            {/* Templates Tab */}
+            <TabPanel value={tabValue} index={1}>
+                <Typography variant="body2" color="text.secondary" sx={{ p: 1 }}>
+                    Quick start with pre-defined system flow templates
+                </Typography>
+                <List dense>
+                    <ListItem disablePadding>
+                        <ListItemButton
+                            onClick={() => handleLoadTemplate('simple-system-flow')}
+                            sx={{
+                                pl: 2,
+                                border: '1px solid',
+                                borderColor: 'divider',
+                                borderRadius: 1,
+                                mb: 1,
+                            }}
+                        >
+                            <ListItemIcon sx={{ minWidth: 36 }}>
+                                <TimelineIcon fontSize="small" />
+                            </ListItemIcon>
+                            <ListItemText
+                                primary="Simple System Flow"
+                                secondary="Basic system components and flows"
+                            />
+                        </ListItemButton>
+                    </ListItem>
+                </List>
+            </TabPanel>
+        </Paper>
+    );
+});
+
+SystemFlowControls.displayName = 'SystemFlowControls';
+
+// Node selection context
+export const NodeSelectionContext = createContext<NodeSelectionContextType>({
+    selectedNodeType: null,
+    setSelectedNodeType: () => { },
+    addNodeAtCenter: undefined,
+});
+
+export default SystemFlowControls;