@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/stateMachine/controls/StateDiagramControls.tsx

@@ -1,488 +1,488 @@
-'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 ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import RectangleIcon from '@mui/icons-material/CropSquare';
-import ControlEdgeList from '../../../components/ControlEdgeList';
-import {
-  DiagramControlsProps,
-  NodeType,
-  TabPanelProps,
-  NodeSelectionContextType,
-  StateMachineNode,
-  StateMachineEdge
-} from '../../../types/state-machine-types';
-import { Edge } from '@xyflow/react';
-
-// Memoized SVG icons for state machine components
-const InitialStateIcon = React.memo(() => (
-  <svg width="20" height="20" viewBox="0 0 20 20">
-    <circle cx="10" cy="10" r="8" fill="black" />
-  </svg>
-));
-
-const FinalStateIcon = React.memo(() => (
-  <svg width="20" height="20" viewBox="0 0 20 20">
-    <circle cx="10" cy="10" r="8" fill="none" stroke="black" strokeWidth="2" />
-    <circle cx="10" cy="10" r="4" fill="black" />
-  </svg>
-));
-
-const DiamondIcon = React.memo(() => (
-  <svg width="20" height="20" viewBox="0 0 20 20">
-    <polygon
-      points="10,3 17,10 10,17 3,10"
-      fill="none"
-      stroke="black"
-      strokeWidth="2"
-    />
-  </svg>
-));
-
-const BarIcon = React.memo(() => (
-  <svg width="24" height="8" viewBox="0 0 24 8">
-    <rect x="2" y="2" width="20" height="4" fill="black" />
-  </svg>
-));
-
-const HistoryIcon = React.memo(() => (
-  <svg width="20" height="20" viewBox="0 0 20 20">
-    <circle cx="10" cy="10" r="8" fill="none" stroke="black" strokeWidth="2" />
-    <text
-      x="10"
-      y="15"
-      textAnchor="middle"
-      fontSize="10"
-      fontWeight="bold"
-      fill="black"
-    >
-      H
-    </text>
-  </svg>
-));
-
-const SubmachineIcon = React.memo(() => (
-  <svg width="24" height="20" viewBox="0 0 24 20">
-    <rect
-      x="4"
-      y="4"
-      width="16"
-      height="12"
-      rx="6"
-      fill="none"
-      stroke="black"
-      strokeWidth="2"
-    />
-    <rect
-      x="16"
-      y="12"
-      width="6"
-      height="4"
-      rx="1"
-      fill="none"
-      stroke="black"
-      strokeWidth="1.5"
-    />
-  </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>
-  );
-}
-
-
-
-// Memoized node types
-const nodeTypes: NodeType[] = [
-  {
-    id: 'StateNode',
-    name: 'State',
-    icon: <RectangleIcon fontSize="small" />,
-  },
-  {
-    id: 'InitialStateNode',
-    name: 'Initial State',
-    icon: <InitialStateIcon />,
-  },
-  {
-    id: 'FinalStateNode',
-    name: 'Final State',
-    icon: <FinalStateIcon />,
-  },
-  {
-    id: 'CompositeStateNode',
-    name: 'Composite State',
-    icon: <SubmachineIcon />,
-  },
-  {
-    id: 'HistoryStateNode',
-    name: 'History State',
-    icon: <HistoryIcon />,
-  },
-  {
-    id: 'JunctionPointNode',
-    name: 'Junction Point',
-    icon: <BarIcon />,
-  },
-  {
-    id: 'ChoicePointNode',
-    name: 'Choice Point',
-    icon: <DiamondIcon />,
-  },
-  {
-    id: 'EntryPointNode',
-    name: 'Entry Point',
-    icon: <ArrowForwardIcon fontSize="small" />,
-  },
-  {
-    id: 'ExitPointNode',
-    name: 'Exit Point',
-    icon: (
-      <ArrowForwardIcon
-        fontSize="small"
-        style={{ transform: 'rotate(180deg)' }}
-      />
-    ),
-  },
-  {
-    id: 'ForkJoinNode',
-    name: 'Fork/Join',
-    icon: <BarIcon />,
-  },
-];
-
-
-
-const StateDiagramControls: React.FC<DiagramControlsProps> = ({
-  onAddEntity,
-  onUndo,
-  onRedo,
-  canUndo,
-  canRedo,
-  onLoadTemplate,
-  edges,
-  nodes,
-  onEditEdge,
-}) => {
-  const [tabValue, setTabValue] = useState(0);
-  const [expandStates, setExpandStates] = useState(true);
-  const [expandTransitions, setExpandTransitions] = 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 StateMachineEdge);
-      }
-    },
-    [onEditEdge],
-  );
-
-  // Memoize the nodeTypes array to prevent unnecessary re-renders
-  const memoizedNodeTypes = useMemo(() => nodeTypes, []);
-
-  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' }}>
-          State Machine
-        </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}
-        variant="fullWidth"
-        sx={{ borderBottom: 1, borderColor: 'divider', mb: 1 }}
-      >
-        <Tab label="Components" />
-        <Tab label="Templates" />
-      </Tabs>
-
-      <TabPanel value={tabValue} index={0}>
-        {/* States Section */}
-        <Box mb={1}>
-          <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            onClick={() => setExpandStates(!expandStates)}
-            sx={{
-              cursor: 'pointer',
-              '&:hover': { bgcolor: 'action.hover' },
-              p: 1,
-              borderRadius: 1,
-            }}
-          >
-            <Typography variant="subtitle2" fontWeight="bold">
-              States
-            </Typography>
-            {expandStates ? (
-              <ExpandLessIcon fontSize="small" />
-            ) : (
-              <ExpandMoreIcon fontSize="small" />
-            )}
-          </Box>
-          <Collapse in={expandStates}>
-            <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 }} />
-
-        {/* Transitions Section */}
-        <Box mb={1}>
-          <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            onClick={() => setExpandTransitions(!expandTransitions)}
-            sx={{
-              cursor: 'pointer',
-              '&:hover': { bgcolor: 'action.hover' },
-              p: 1,
-              borderRadius: 1,
-            }}
-          >
-            <Typography variant="subtitle2" fontWeight="bold">
-              Transitions
-            </Typography>
-            {expandTransitions ? (
-              <ExpandLessIcon fontSize="small" />
-            ) : (
-              <ExpandMoreIcon fontSize="small" />
-            )}
-          </Box>
-          <Collapse in={expandTransitions}>
-            <Box sx={{ px: 1 }}>
-              {/* Edge list using ControlEdgeList */}
-              <ControlEdgeList
-                edges={edges}
-                nodes={nodes}
-                type="state"
-                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 state machine templates
-        </Typography>
-        <List dense>
-          <ListItem disablePadding>
-            <ListItemButton
-              onClick={() => handleLoadTemplate('simple-state-machine')}
-              sx={{
-                pl: 2,
-                border: '1px solid',
-                borderColor: 'divider',
-                borderRadius: 1,
-                mb: 1,
-              }}
-            >
-              <ListItemIcon sx={{ minWidth: 36 }}>
-                <TimelineIcon fontSize="small" />
-              </ListItemIcon>
-              <ListItemText
-                primary="Simple State Machine"
-                secondary="Basic state transitions"
-              />
-            </ListItemButton>
-          </ListItem>
-          <ListItem disablePadding>
-            <ListItemButton
-              onClick={() => handleLoadTemplate('fork-join-state-machine')}
-              sx={{
-                pl: 2,
-                border: '1px solid',
-                borderColor: 'divider',
-                borderRadius: 1,
-              }}
-            >
-              <ListItemIcon sx={{ minWidth: 36 }}>
-                <TimelineIcon fontSize="small" />
-              </ListItemIcon>
-              <ListItemText
-                primary="Fork/Join Example"
-                secondary="Parallel state transitions"
-              />
-            </ListItemButton>
-          </ListItem>
-        </List>
-      </TabPanel>
-    </Paper>
-  );
-};
-
-// Node selection context
-
-export const NodeSelectionContext = createContext<NodeSelectionContextType>({
-  selectedNodeType: null,
-  setSelectedNodeType: () => { },
-  addNodeAtCenter: undefined,
-});
-
-export default StateDiagramControls;
+'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 ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import RectangleIcon from '@mui/icons-material/CropSquare';
+import ControlEdgeList from '../../../components/ControlEdgeList';
+import {
+  DiagramControlsProps,
+  NodeType,
+  TabPanelProps,
+  NodeSelectionContextType,
+  StateMachineNode,
+  StateMachineEdge
+} from '../../../types/state-machine-types';
+import { Edge } from '@xyflow/react';
+
+// Memoized SVG icons for state machine components
+const InitialStateIcon = React.memo(() => (
+  <svg width="20" height="20" viewBox="0 0 20 20">
+    <circle cx="10" cy="10" r="8" fill="black" />
+  </svg>
+));
+
+const FinalStateIcon = React.memo(() => (
+  <svg width="20" height="20" viewBox="0 0 20 20">
+    <circle cx="10" cy="10" r="8" fill="none" stroke="black" strokeWidth="2" />
+    <circle cx="10" cy="10" r="4" fill="black" />
+  </svg>
+));
+
+const DiamondIcon = React.memo(() => (
+  <svg width="20" height="20" viewBox="0 0 20 20">
+    <polygon
+      points="10,3 17,10 10,17 3,10"
+      fill="none"
+      stroke="black"
+      strokeWidth="2"
+    />
+  </svg>
+));
+
+const BarIcon = React.memo(() => (
+  <svg width="24" height="8" viewBox="0 0 24 8">
+    <rect x="2" y="2" width="20" height="4" fill="black" />
+  </svg>
+));
+
+const HistoryIcon = React.memo(() => (
+  <svg width="20" height="20" viewBox="0 0 20 20">
+    <circle cx="10" cy="10" r="8" fill="none" stroke="black" strokeWidth="2" />
+    <text
+      x="10"
+      y="15"
+      textAnchor="middle"
+      fontSize="10"
+      fontWeight="bold"
+      fill="black"
+    >
+      H
+    </text>
+  </svg>
+));
+
+const SubmachineIcon = React.memo(() => (
+  <svg width="24" height="20" viewBox="0 0 24 20">
+    <rect
+      x="4"
+      y="4"
+      width="16"
+      height="12"
+      rx="6"
+      fill="none"
+      stroke="black"
+      strokeWidth="2"
+    />
+    <rect
+      x="16"
+      y="12"
+      width="6"
+      height="4"
+      rx="1"
+      fill="none"
+      stroke="black"
+      strokeWidth="1.5"
+    />
+  </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>
+  );
+}
+
+
+
+// Memoized node types
+const nodeTypes: NodeType[] = [
+  {
+    id: 'StateNode',
+    name: 'State',
+    icon: <RectangleIcon fontSize="small" />,
+  },
+  {
+    id: 'InitialStateNode',
+    name: 'Initial State',
+    icon: <InitialStateIcon />,
+  },
+  {
+    id: 'FinalStateNode',
+    name: 'Final State',
+    icon: <FinalStateIcon />,
+  },
+  {
+    id: 'CompositeStateNode',
+    name: 'Composite State',
+    icon: <SubmachineIcon />,
+  },
+  {
+    id: 'HistoryStateNode',
+    name: 'History State',
+    icon: <HistoryIcon />,
+  },
+  {
+    id: 'JunctionPointNode',
+    name: 'Junction Point',
+    icon: <BarIcon />,
+  },
+  {
+    id: 'ChoicePointNode',
+    name: 'Choice Point',
+    icon: <DiamondIcon />,
+  },
+  {
+    id: 'EntryPointNode',
+    name: 'Entry Point',
+    icon: <ArrowForwardIcon fontSize="small" />,
+  },
+  {
+    id: 'ExitPointNode',
+    name: 'Exit Point',
+    icon: (
+      <ArrowForwardIcon
+        fontSize="small"
+        style={{ transform: 'rotate(180deg)' }}
+      />
+    ),
+  },
+  {
+    id: 'ForkJoinNode',
+    name: 'Fork/Join',
+    icon: <BarIcon />,
+  },
+];
+
+
+
+const StateDiagramControls: React.FC<DiagramControlsProps> = ({
+  onAddEntity,
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo,
+  onLoadTemplate,
+  edges,
+  nodes,
+  onEditEdge,
+}) => {
+  const [tabValue, setTabValue] = useState(0);
+  const [expandStates, setExpandStates] = useState(true);
+  const [expandTransitions, setExpandTransitions] = 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 StateMachineEdge);
+      }
+    },
+    [onEditEdge],
+  );
+
+  // Memoize the nodeTypes array to prevent unnecessary re-renders
+  const memoizedNodeTypes = useMemo(() => nodeTypes, []);
+
+  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' }}>
+          State Machine
+        </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}
+        variant="fullWidth"
+        sx={{ borderBottom: 1, borderColor: 'divider', mb: 1 }}
+      >
+        <Tab label="Components" />
+        <Tab label="Templates" />
+      </Tabs>
+
+      <TabPanel value={tabValue} index={0}>
+        {/* States Section */}
+        <Box mb={1}>
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            onClick={() => setExpandStates(!expandStates)}
+            sx={{
+              cursor: 'pointer',
+              '&:hover': { bgcolor: 'action.hover' },
+              p: 1,
+              borderRadius: 1,
+            }}
+          >
+            <Typography variant="subtitle2" fontWeight="bold">
+              States
+            </Typography>
+            {expandStates ? (
+              <ExpandLessIcon fontSize="small" />
+            ) : (
+              <ExpandMoreIcon fontSize="small" />
+            )}
+          </Box>
+          <Collapse in={expandStates}>
+            <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 }} />
+
+        {/* Transitions Section */}
+        <Box mb={1}>
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            onClick={() => setExpandTransitions(!expandTransitions)}
+            sx={{
+              cursor: 'pointer',
+              '&:hover': { bgcolor: 'action.hover' },
+              p: 1,
+              borderRadius: 1,
+            }}
+          >
+            <Typography variant="subtitle2" fontWeight="bold">
+              Transitions
+            </Typography>
+            {expandTransitions ? (
+              <ExpandLessIcon fontSize="small" />
+            ) : (
+              <ExpandMoreIcon fontSize="small" />
+            )}
+          </Box>
+          <Collapse in={expandTransitions}>
+            <Box sx={{ px: 1 }}>
+              {/* Edge list using ControlEdgeList */}
+              <ControlEdgeList
+                edges={edges}
+                nodes={nodes}
+                type="state"
+                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 state machine templates
+        </Typography>
+        <List dense>
+          <ListItem disablePadding>
+            <ListItemButton
+              onClick={() => handleLoadTemplate('simple-state-machine')}
+              sx={{
+                pl: 2,
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: 1,
+                mb: 1,
+              }}
+            >
+              <ListItemIcon sx={{ minWidth: 36 }}>
+                <TimelineIcon fontSize="small" />
+              </ListItemIcon>
+              <ListItemText
+                primary="Simple State Machine"
+                secondary="Basic state transitions"
+              />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemButton
+              onClick={() => handleLoadTemplate('fork-join-state-machine')}
+              sx={{
+                pl: 2,
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: 1,
+              }}
+            >
+              <ListItemIcon sx={{ minWidth: 36 }}>
+                <TimelineIcon fontSize="small" />
+              </ListItemIcon>
+              <ListItemText
+                primary="Fork/Join Example"
+                secondary="Parallel state transitions"
+              />
+            </ListItemButton>
+          </ListItem>
+        </List>
+      </TabPanel>
+    </Paper>
+  );
+};
+
+// Node selection context
+
+export const NodeSelectionContext = createContext<NodeSelectionContextType>({
+  selectedNodeType: null,
+  setSelectedNodeType: () => { },
+  addNodeAtCenter: undefined,
+});
+
+export default StateDiagramControls;