@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/sequence/controls/DiagramControls.tsx

@@ -1,707 +1,707 @@
-import React, { useState } from 'react';
-import {
-  Box,
-  Typography,
-  Button,
-  Paper,
-  Stack,
-  IconButton,
-  Tabs,
-  Tab,
-  Tooltip,
-  Divider,
-  Collapse,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  InputBase,
-  InputAdornment,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import CallSplitIcon from '@mui/icons-material/CallSplit';
-import LoopIcon from '@mui/icons-material/Loop';
-import ParallelIcon from '@mui/icons-material/LinearScale';
-import OptIcon from '@mui/icons-material/CheckBoxOutlineBlank';
-import DatabaseIcon from '@mui/icons-material/Storage';
-import ActorIcon from '@mui/icons-material/Person';
-import CircleIcon from '@mui/icons-material/Circle';
-import SquareIcon from '@mui/icons-material/Square';
-import RectangleIcon from '@mui/icons-material/CropSquare';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import UndoIcon from '@mui/icons-material/Undo';
-import RedoIcon from '@mui/icons-material/Redo';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import SearchIcon from '@mui/icons-material/Search';
-import ForwardIcon from '@mui/icons-material/Forward';
-import SelfIcon from '@mui/icons-material/Loop';
-import TimelineIcon from '@mui/icons-material/Timeline';
-import {
-  DiagramControlsProps,
-  SequenceEntityShape,
-  CombinedFragmentType
-} from '../../../types/sequence-types';
-
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-}
-
-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>
-  );
-}
-
-const DiagramControls: React.FC<DiagramControlsProps> = ({
-  onAddEntity,
-  onAddMessage,
-  onAddAltFragment,
-  onUndo,
-  onRedo,
-  canUndo,
-  canRedo,
-  onLoadTemplate,
-}) => {
-  const { t } = useTranslation();
-
-  const [tabValue, setTabValue] = useState(0);
-  const [expandEntities, setExpandEntities] = useState(true);
-  const [expandFragments, setExpandFragments] = useState(true);
-  const [expandMessages, setExpandMessages] = useState(true);
-
-  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
-    setTabValue(newValue);
-  };
-
-  // We'll use this for different entity shapes when implemented
-  const handleAddEntityWithShape = (shape: SequenceEntityShape) => {
-    console.log(`Adding entity with shape: ${shape}`);
-    onAddEntity(shape);
-  };
-
-  // We'll use this for different fragment types when implemented
-  const handleAddFragmentWithType = (type: CombinedFragmentType) => {
-    console.log(`Adding fragment with type: ${type}`);
-    onAddAltFragment(type);
-  };
-
-  // Add handlers for template selection
-  const handleLoadTemplate = (templateType: string) => {
-    console.log(`Loading template: ${templateType}`);
-    if (onLoadTemplate) {
-      onLoadTemplate(templateType);
-    }
-  };
-
-  return (
-    <>
-      <InputBase
-        placeholder={t('common.search')}
-        startAdornment={
-          <InputAdornment position="start">
-            <SearchIcon sx={{ color: '#A0A0A0', fontSize: '20px' }} />
-          </InputAdornment>
-        }
-        sx={{
-          bgcolor: '#232323',
-          border: '1px solid #444',
-          borderRadius: '24px',
-          px: 2,
-          py: 0.75,
-          mb: 2,
-          color: 'white',
-          width: '100%',
-          fontSize: '14px',
-          '& .MuiInputBase-input': {
-            padding: 0,
-            '&::placeholder': {
-              color: '#A0A0A0',
-              opacity: 1,
-            },
-          },
-          '& .MuiInputAdornment-root': {
-            marginRight: 1,
-          },
-        }}
-        inputProps={{
-          'aria-label': 'search',
-        }}
-      />
-      <Paper
-        elevation={3}
-        component="div"
-        sx={{
-          p: 2,
-          borderRadius: 2,
-          bgcolor: '#242424',
-          color: '#ffffff',
-          width: '100%',
-          '& .MuiTypography-root': {
-            color: '#ffffff',
-          },
-          '& .MuiTab-root': {
-            color: '#ffffff',
-            '&.Mui-selected': {
-              color: '#61dafb',
-            },
-          },
-          '& .MuiTabs-indicator': {
-            backgroundColor: '#61dafb',
-          },
-          '& .MuiDivider-root': {
-            borderColor: '#444',
-          },
-          '& .MuiListItemText-primary': {
-            color: '#ffffff',
-          },
-          '& .MuiListItemText-secondary': {
-            color: '#cccccc',
-          },
-          '& .MuiIconButton-root': {
-            color: '#ffffff',
-            '&.Mui-disabled': {
-              color: '#666',
-            },
-          },
-          '& .MuiSvgIcon-root': {
-            color: '#ffffff',
-          },
-        }}
-      >
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          mb={1}
-        >
-          <Typography
-            variant="h6"
-            sx={{ fontWeight: 'medium', color: '#ffffff' }}
-          >
-            {t('diagramControls.sequenceDiagram')}
-          </Typography>
-          <Box>
-            <Tooltip title={t('common.undo')}>
-              <span>
-                <IconButton
-                  size="small"
-                  onClick={onUndo}
-                  disabled={!canUndo}
-                  sx={{ color: canUndo ? '#61dafb' : '#666' }}
-                >
-                  <UndoIcon fontSize="small" />
-                </IconButton>
-              </span>
-            </Tooltip>
-            <Tooltip title={t('common.redo')}>
-              <span>
-                <IconButton
-                  size="small"
-                  onClick={onRedo}
-                  disabled={!canRedo}
-                  sx={{ color: canRedo ? '#61dafb' : '#666' }}
-                >
-                  <RedoIcon fontSize="small" />
-                </IconButton>
-              </span>
-            </Tooltip>
-          </Box>
-        </Box>
-
-        <Tabs
-          value={tabValue}
-          onChange={handleTabChange}
-          variant="fullWidth"
-          sx={{ borderBottom: 1, borderColor: '#444', mb: 1 }}
-        >
-          <Tab label={t('diagramControls.components')} sx={{ color: '#ffffff' }} />
-          <Tab label={t('diagramControls.templates')} sx={{ color: '#ffffff' }} />
-        </Tabs>
-
-        <TabPanel value={tabValue} index={0}>
-          {/* Entities Section */}
-          <Box mb={1}>
-            <Box
-              display="flex"
-              justifyContent="space-between"
-              alignItems="center"
-              onClick={() => setExpandEntities(!expandEntities)}
-              sx={{
-                cursor: 'pointer',
-                '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                p: 1,
-                borderRadius: 1,
-              }}
-            >
-              <Typography
-                variant="subtitle2"
-                fontWeight="bold"
-                sx={{ color: '#ffffff' }}
-              >
-                {t('diagramControls.entities')}
-              </Typography>
-              {expandEntities ? (
-                <ExpandLessIcon fontSize="small" sx={{ color: '#ffffff' }} />
-              ) : (
-                <ExpandMoreIcon fontSize="small" sx={{ color: '#ffffff' }} />
-              )}
-            </Box>
-
-            <Collapse in={expandEntities}>
-              <List dense disablePadding>
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={() => handleAddEntityWithShape('rectangle')}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <RectangleIcon
-                        fontSize="small"
-                        sx={{ color: '#ffffff' }}
-                      />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary={t('sequenceDiagram.shapes.rectangle')}
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={() => handleAddEntityWithShape('roundedBox')}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <SquareIcon fontSize="small" sx={{ color: '#ffffff' }} />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary={t('sequenceDiagram.shapes.roundedBox')}
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={() => handleAddEntityWithShape('circle')}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <CircleIcon fontSize="small" sx={{ color: '#ffffff' }} />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary={t('sequenceDiagram.shapes.circle')}
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={() => handleAddEntityWithShape('database')}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <DatabaseIcon
-                        fontSize="small"
-                        sx={{ color: '#ffffff' }}
-                      />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary="Database"
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={() => handleAddEntityWithShape('actor')}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <ActorIcon fontSize="small" sx={{ color: '#ffffff' }} />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary="Actor"
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-              </List>
-            </Collapse>
-          </Box>
-
-          <Divider sx={{ my: 1, borderColor: '#444' }} />
-
-          {/* Messages Section */}
-          <Box mb={1}>
-            <Box
-              display="flex"
-              justifyContent="space-between"
-              alignItems="center"
-              onClick={() => setExpandMessages(!expandMessages)}
-              sx={{
-                cursor: 'pointer',
-                '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                p: 1,
-                borderRadius: 1,
-              }}
-            >
-              <Typography
-                variant="subtitle2"
-                fontWeight="bold"
-                sx={{ color: '#ffffff' }}
-              >
-                Messages
-              </Typography>
-              {expandMessages ? (
-                <ExpandLessIcon fontSize="small" sx={{ color: '#ffffff' }} />
-              ) : (
-                <ExpandMoreIcon fontSize="small" sx={{ color: '#ffffff' }} />
-              )}
-            </Box>
-
-            <Collapse in={expandMessages}>
-              <List dense disablePadding>
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={onAddMessage}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <ArrowForwardIcon
-                        fontSize="small"
-                        sx={{ color: '#ffffff' }}
-                      />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary="Synchronous"
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={onAddMessage}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <ForwardIcon fontSize="small" sx={{ color: '#ffffff' }} />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary="Asynchronous"
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={onAddMessage}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <ArrowBackIcon
-                        fontSize="small"
-                        sx={{ color: '#ffffff' }}
-                      />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary="Return"
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={onAddMessage}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <SelfIcon fontSize="small" sx={{ color: '#ffffff' }} />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary="Self Message"
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-              </List>
-            </Collapse>
-          </Box>
-
-          <Divider sx={{ my: 1, borderColor: '#444' }} />
-
-          {/* Combined Fragments Section */}
-          <Box mb={1}>
-            <Box
-              display="flex"
-              justifyContent="space-between"
-              alignItems="center"
-              onClick={() => setExpandFragments(!expandFragments)}
-              sx={{
-                cursor: 'pointer',
-                '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                p: 1,
-                borderRadius: 1,
-              }}
-            >
-              <Typography
-                variant="subtitle2"
-                fontWeight="bold"
-                sx={{ color: '#ffffff' }}
-              >
-                Combined Fragments
-              </Typography>
-              {expandFragments ? (
-                <ExpandLessIcon fontSize="small" sx={{ color: '#ffffff' }} />
-              ) : (
-                <ExpandMoreIcon fontSize="small" sx={{ color: '#ffffff' }} />
-              )}
-            </Box>
-
-            <Collapse in={expandFragments}>
-              <List dense disablePadding>
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={() => handleAddFragmentWithType('alt')}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <CallSplitIcon
-                        fontSize="small"
-                        sx={{ color: '#ffffff' }}
-                      />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary="Alt (Conditional)"
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={() => handleAddFragmentWithType('loop')}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <LoopIcon fontSize="small" sx={{ color: '#ffffff' }} />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary="Loop"
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={() => handleAddFragmentWithType('opt')}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <OptIcon fontSize="small" sx={{ color: '#ffffff' }} />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary="Opt (Optional)"
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-
-                <ListItem disablePadding>
-                  <ListItemButton
-                    onClick={() => handleAddFragmentWithType('par')}
-                    sx={{
-                      pl: 2,
-                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <ParallelIcon
-                        fontSize="small"
-                        sx={{ color: '#ffffff' }}
-                      />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary="Par (Parallel)"
-                      sx={{
-                        '& .MuiListItemText-primary': { color: '#ffffff' },
-                      }}
-                    />
-                  </ListItemButton>
-                </ListItem>
-              </List>
-            </Collapse>
-          </Box>
-        </TabPanel>
-
-        {/* Templates Tab */}
-        <TabPanel value={tabValue} index={1}>
-          <Typography variant="body2" sx={{ p: 1, color: '#cccccc' }}>
-            Quick start with pre-defined sequence diagram templates
-          </Typography>
-
-          <List dense>
-            <ListItem disablePadding>
-              <ListItemButton
-                onClick={() => handleLoadTemplate('client-server')}
-                sx={{
-                  pl: 2,
-                  border: '1px solid #444',
-                  borderRadius: 1,
-                  mb: 1,
-                  '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                }}
-              >
-                <ListItemIcon sx={{ minWidth: 36 }}>
-                  <TimelineIcon fontSize="small" sx={{ color: '#ffffff' }} />
-                </ListItemIcon>
-                <ListItemText
-                  primary="Client-Server Interaction"
-                  secondary="Basic request-response flow"
-                  sx={{
-                    '& .MuiListItemText-primary': { color: '#ffffff' },
-                    '& .MuiListItemText-secondary': { color: '#cccccc' },
-                  }}
-                />
-              </ListItemButton>
-            </ListItem>
-
-            <ListItem disablePadding>
-              <ListItemButton
-                onClick={() => handleLoadTemplate('authentication')}
-                sx={{
-                  pl: 2,
-                  border: '1px solid #444',
-                  borderRadius: 1,
-                  mb: 1,
-                  '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                }}
-              >
-                <ListItemIcon sx={{ minWidth: 36 }}>
-                  <TimelineIcon fontSize="small" sx={{ color: '#ffffff' }} />
-                </ListItemIcon>
-                <ListItemText
-                  primary="Authentication Flow"
-                  secondary="Login process with validation"
-                  sx={{
-                    '& .MuiListItemText-primary': { color: '#ffffff' },
-                    '& .MuiListItemText-secondary': { color: '#cccccc' },
-                  }}
-                />
-              </ListItemButton>
-            </ListItem>
-
-            <ListItem disablePadding>
-              <ListItemButton
-                onClick={() => handleLoadTemplate('database-transaction')}
-                sx={{
-                  pl: 2,
-                  border: '1px solid #444',
-                  borderRadius: 1,
-                  '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
-                }}
-              >
-                <ListItemIcon sx={{ minWidth: 36 }}>
-                  <TimelineIcon fontSize="small" sx={{ color: '#ffffff' }} />
-                </ListItemIcon>
-                <ListItemText
-                  primary="Database Transaction"
-                  secondary="CRUD operation sequence"
-                  sx={{
-                    '& .MuiListItemText-primary': { color: '#ffffff' },
-                    '& .MuiListItemText-secondary': { color: '#cccccc' },
-                  }}
-                />
-              </ListItemButton>
-            </ListItem>
-          </List>
-        </TabPanel>
-      </Paper>
-    </>
-  );
-};
-
-export default DiagramControls;
+import React, { useState } from 'react';
+import {
+  Box,
+  Typography,
+  Button,
+  Paper,
+  Stack,
+  IconButton,
+  Tabs,
+  Tab,
+  Tooltip,
+  Divider,
+  Collapse,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  InputBase,
+  InputAdornment,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import CallSplitIcon from '@mui/icons-material/CallSplit';
+import LoopIcon from '@mui/icons-material/Loop';
+import ParallelIcon from '@mui/icons-material/LinearScale';
+import OptIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import DatabaseIcon from '@mui/icons-material/Storage';
+import ActorIcon from '@mui/icons-material/Person';
+import CircleIcon from '@mui/icons-material/Circle';
+import SquareIcon from '@mui/icons-material/Square';
+import RectangleIcon from '@mui/icons-material/CropSquare';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import SearchIcon from '@mui/icons-material/Search';
+import ForwardIcon from '@mui/icons-material/Forward';
+import SelfIcon from '@mui/icons-material/Loop';
+import TimelineIcon from '@mui/icons-material/Timeline';
+import {
+  DiagramControlsProps,
+  SequenceEntityShape,
+  CombinedFragmentType
+} from '../../../types/sequence-types';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+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>
+  );
+}
+
+const DiagramControls: React.FC<DiagramControlsProps> = ({
+  onAddEntity,
+  onAddMessage,
+  onAddAltFragment,
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo,
+  onLoadTemplate,
+}) => {
+  const { t } = useTranslation();
+
+  const [tabValue, setTabValue] = useState(0);
+  const [expandEntities, setExpandEntities] = useState(true);
+  const [expandFragments, setExpandFragments] = useState(true);
+  const [expandMessages, setExpandMessages] = useState(true);
+
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  // We'll use this for different entity shapes when implemented
+  const handleAddEntityWithShape = (shape: SequenceEntityShape) => {
+    console.log(`Adding entity with shape: ${shape}`);
+    onAddEntity(shape);
+  };
+
+  // We'll use this for different fragment types when implemented
+  const handleAddFragmentWithType = (type: CombinedFragmentType) => {
+    console.log(`Adding fragment with type: ${type}`);
+    onAddAltFragment(type);
+  };
+
+  // Add handlers for template selection
+  const handleLoadTemplate = (templateType: string) => {
+    console.log(`Loading template: ${templateType}`);
+    if (onLoadTemplate) {
+      onLoadTemplate(templateType);
+    }
+  };
+
+  return (
+    <>
+      <InputBase
+        placeholder={t('common.search')}
+        startAdornment={
+          <InputAdornment position="start">
+            <SearchIcon sx={{ color: '#A0A0A0', fontSize: '20px' }} />
+          </InputAdornment>
+        }
+        sx={{
+          bgcolor: '#232323',
+          border: '1px solid #444',
+          borderRadius: '24px',
+          px: 2,
+          py: 0.75,
+          mb: 2,
+          color: 'white',
+          width: '100%',
+          fontSize: '14px',
+          '& .MuiInputBase-input': {
+            padding: 0,
+            '&::placeholder': {
+              color: '#A0A0A0',
+              opacity: 1,
+            },
+          },
+          '& .MuiInputAdornment-root': {
+            marginRight: 1,
+          },
+        }}
+        inputProps={{
+          'aria-label': 'search',
+        }}
+      />
+      <Paper
+        elevation={3}
+        component="div"
+        sx={{
+          p: 2,
+          borderRadius: 2,
+          bgcolor: '#242424',
+          color: '#ffffff',
+          width: '100%',
+          '& .MuiTypography-root': {
+            color: '#ffffff',
+          },
+          '& .MuiTab-root': {
+            color: '#ffffff',
+            '&.Mui-selected': {
+              color: '#61dafb',
+            },
+          },
+          '& .MuiTabs-indicator': {
+            backgroundColor: '#61dafb',
+          },
+          '& .MuiDivider-root': {
+            borderColor: '#444',
+          },
+          '& .MuiListItemText-primary': {
+            color: '#ffffff',
+          },
+          '& .MuiListItemText-secondary': {
+            color: '#cccccc',
+          },
+          '& .MuiIconButton-root': {
+            color: '#ffffff',
+            '&.Mui-disabled': {
+              color: '#666',
+            },
+          },
+          '& .MuiSvgIcon-root': {
+            color: '#ffffff',
+          },
+        }}
+      >
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          mb={1}
+        >
+          <Typography
+            variant="h6"
+            sx={{ fontWeight: 'medium', color: '#ffffff' }}
+          >
+            {t('diagramControls.sequenceDiagram')}
+          </Typography>
+          <Box>
+            <Tooltip title={t('common.undo')}>
+              <span>
+                <IconButton
+                  size="small"
+                  onClick={onUndo}
+                  disabled={!canUndo}
+                  sx={{ color: canUndo ? '#61dafb' : '#666' }}
+                >
+                  <UndoIcon fontSize="small" />
+                </IconButton>
+              </span>
+            </Tooltip>
+            <Tooltip title={t('common.redo')}>
+              <span>
+                <IconButton
+                  size="small"
+                  onClick={onRedo}
+                  disabled={!canRedo}
+                  sx={{ color: canRedo ? '#61dafb' : '#666' }}
+                >
+                  <RedoIcon fontSize="small" />
+                </IconButton>
+              </span>
+            </Tooltip>
+          </Box>
+        </Box>
+
+        <Tabs
+          value={tabValue}
+          onChange={handleTabChange}
+          variant="fullWidth"
+          sx={{ borderBottom: 1, borderColor: '#444', mb: 1 }}
+        >
+          <Tab label={t('diagramControls.components')} sx={{ color: '#ffffff' }} />
+          <Tab label={t('diagramControls.templates')} sx={{ color: '#ffffff' }} />
+        </Tabs>
+
+        <TabPanel value={tabValue} index={0}>
+          {/* Entities Section */}
+          <Box mb={1}>
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              onClick={() => setExpandEntities(!expandEntities)}
+              sx={{
+                cursor: 'pointer',
+                '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                p: 1,
+                borderRadius: 1,
+              }}
+            >
+              <Typography
+                variant="subtitle2"
+                fontWeight="bold"
+                sx={{ color: '#ffffff' }}
+              >
+                {t('diagramControls.entities')}
+              </Typography>
+              {expandEntities ? (
+                <ExpandLessIcon fontSize="small" sx={{ color: '#ffffff' }} />
+              ) : (
+                <ExpandMoreIcon fontSize="small" sx={{ color: '#ffffff' }} />
+              )}
+            </Box>
+
+            <Collapse in={expandEntities}>
+              <List dense disablePadding>
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddEntityWithShape('rectangle')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <RectangleIcon
+                        fontSize="small"
+                        sx={{ color: '#ffffff' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={t('sequenceDiagram.shapes.rectangle')}
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddEntityWithShape('roundedBox')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <SquareIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={t('sequenceDiagram.shapes.roundedBox')}
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddEntityWithShape('circle')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <CircleIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={t('sequenceDiagram.shapes.circle')}
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddEntityWithShape('database')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <DatabaseIcon
+                        fontSize="small"
+                        sx={{ color: '#ffffff' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Database"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddEntityWithShape('actor')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <ActorIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Actor"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              </List>
+            </Collapse>
+          </Box>
+
+          <Divider sx={{ my: 1, borderColor: '#444' }} />
+
+          {/* Messages Section */}
+          <Box mb={1}>
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              onClick={() => setExpandMessages(!expandMessages)}
+              sx={{
+                cursor: 'pointer',
+                '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                p: 1,
+                borderRadius: 1,
+              }}
+            >
+              <Typography
+                variant="subtitle2"
+                fontWeight="bold"
+                sx={{ color: '#ffffff' }}
+              >
+                Messages
+              </Typography>
+              {expandMessages ? (
+                <ExpandLessIcon fontSize="small" sx={{ color: '#ffffff' }} />
+              ) : (
+                <ExpandMoreIcon fontSize="small" sx={{ color: '#ffffff' }} />
+              )}
+            </Box>
+
+            <Collapse in={expandMessages}>
+              <List dense disablePadding>
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={onAddMessage}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <ArrowForwardIcon
+                        fontSize="small"
+                        sx={{ color: '#ffffff' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Synchronous"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={onAddMessage}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <ForwardIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Asynchronous"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={onAddMessage}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <ArrowBackIcon
+                        fontSize="small"
+                        sx={{ color: '#ffffff' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Return"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={onAddMessage}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <SelfIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Self Message"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              </List>
+            </Collapse>
+          </Box>
+
+          <Divider sx={{ my: 1, borderColor: '#444' }} />
+
+          {/* Combined Fragments Section */}
+          <Box mb={1}>
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              onClick={() => setExpandFragments(!expandFragments)}
+              sx={{
+                cursor: 'pointer',
+                '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                p: 1,
+                borderRadius: 1,
+              }}
+            >
+              <Typography
+                variant="subtitle2"
+                fontWeight="bold"
+                sx={{ color: '#ffffff' }}
+              >
+                Combined Fragments
+              </Typography>
+              {expandFragments ? (
+                <ExpandLessIcon fontSize="small" sx={{ color: '#ffffff' }} />
+              ) : (
+                <ExpandMoreIcon fontSize="small" sx={{ color: '#ffffff' }} />
+              )}
+            </Box>
+
+            <Collapse in={expandFragments}>
+              <List dense disablePadding>
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddFragmentWithType('alt')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <CallSplitIcon
+                        fontSize="small"
+                        sx={{ color: '#ffffff' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Alt (Conditional)"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddFragmentWithType('loop')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <LoopIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Loop"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddFragmentWithType('opt')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <OptIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Opt (Optional)"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddFragmentWithType('par')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <ParallelIcon
+                        fontSize="small"
+                        sx={{ color: '#ffffff' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Par (Parallel)"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              </List>
+            </Collapse>
+          </Box>
+        </TabPanel>
+
+        {/* Templates Tab */}
+        <TabPanel value={tabValue} index={1}>
+          <Typography variant="body2" sx={{ p: 1, color: '#cccccc' }}>
+            Quick start with pre-defined sequence diagram templates
+          </Typography>
+
+          <List dense>
+            <ListItem disablePadding>
+              <ListItemButton
+                onClick={() => handleLoadTemplate('client-server')}
+                sx={{
+                  pl: 2,
+                  border: '1px solid #444',
+                  borderRadius: 1,
+                  mb: 1,
+                  '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 36 }}>
+                  <TimelineIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                </ListItemIcon>
+                <ListItemText
+                  primary="Client-Server Interaction"
+                  secondary="Basic request-response flow"
+                  sx={{
+                    '& .MuiListItemText-primary': { color: '#ffffff' },
+                    '& .MuiListItemText-secondary': { color: '#cccccc' },
+                  }}
+                />
+              </ListItemButton>
+            </ListItem>
+
+            <ListItem disablePadding>
+              <ListItemButton
+                onClick={() => handleLoadTemplate('authentication')}
+                sx={{
+                  pl: 2,
+                  border: '1px solid #444',
+                  borderRadius: 1,
+                  mb: 1,
+                  '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 36 }}>
+                  <TimelineIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                </ListItemIcon>
+                <ListItemText
+                  primary="Authentication Flow"
+                  secondary="Login process with validation"
+                  sx={{
+                    '& .MuiListItemText-primary': { color: '#ffffff' },
+                    '& .MuiListItemText-secondary': { color: '#cccccc' },
+                  }}
+                />
+              </ListItemButton>
+            </ListItem>
+
+            <ListItem disablePadding>
+              <ListItemButton
+                onClick={() => handleLoadTemplate('database-transaction')}
+                sx={{
+                  pl: 2,
+                  border: '1px solid #444',
+                  borderRadius: 1,
+                  '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 36 }}>
+                  <TimelineIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                </ListItemIcon>
+                <ListItemText
+                  primary="Database Transaction"
+                  secondary="CRUD operation sequence"
+                  sx={{
+                    '& .MuiListItemText-primary': { color: '#ffffff' },
+                    '& .MuiListItemText-secondary': { color: '#cccccc' },
+                  }}
+                />
+              </ListItemButton>
+            </ListItem>
+          </List>
+        </TabPanel>
+      </Paper>
+    </>
+  );
+};
+
+export default DiagramControls;