@flowuent-org/diagramming-core 1.3.9 → 1.4.0

package/packages/diagrams/src/lib/components/automation/index.ts

@@ -1,58 +0,0 @@
-export { AutomationStartNode } from './AutomationStartNode';
-export { AutomationApiNode } from './AutomationApiNode';
-export { AutomationFormattingNode } from './AutomationFormattingNode';
-export { AutomationSheetsNode } from './AutomationSheetsNode';
-export { AutomationEndNode } from './AutomationEndNode';
-export { AutomationNoteNode } from './AutomationNoteNode';
-export { AutomationNavigationNode } from './AutomationNavigationNode';
-export { AutomationExecutionPanel } from './AutomationExecutionPanel';
-export { AutomationAISuggestionNode } from './AutomationAISuggestionNode';
-export { AISuggestionsModal, showAISuggestionsModal } from './AISuggestionsModal';
-export { AISuggestionsPanel } from './AISuggestionsPanel';
-export { NodeActionButtons } from './NodeActionButtons';
-export { NodeAIAssistantPopup, showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
-export type { AISuggestion } from './AISuggestionsModal';
-// Google Services Node (Docs, Slides, Meet, Gmail, Sheets, Calendar)
-export { AutomationGoogleServicesNode } from './AutomationGoogleServicesNode';
-export type {
-  GoogleServiceType,
-  GoogleTokenData,
-  AutomationGoogleServicesNodeData,
-  AutomationGoogleServicesNodeProps,
-} from './AutomationGoogleServicesNode';
-// Slack Integration Node
-export { AutomationSlackNode } from './AutomationSlackNode';
-export type {
-  SlackOperationType,
-  SlackTokenData,
-  AutomationSlackNodeData,
-  AutomationSlackNodeProps,
-} from './AutomationSlackNode';
-// Telegram Integration Node
-export { AutomationTelegramNode } from './AutomationTelegramNode';
-export type {
-  TelegramOperationType,
-  TelegramTokenData,
-  AutomationTelegramNodeData,
-  AutomationTelegramNodeProps,
-} from './AutomationTelegramNode';
-// Interaction Node
-export { AutomationInteractionNode } from './AutomationInteractionNode';
-export type {
-  InteractionType,
-  AutomationInteractionNodeData,
-  AutomationInteractionNodeProps,
-} from './AutomationInteractionNode';
-// Monitoring Node
-export { AutomationMonitoringNode } from './AutomationMonitoringNode';
-export type {
-  AutomationMonitoringNodeData,
-  AutomationMonitoringNodeProps,
-} from './AutomationMonitoringNode';
-export {
-    setNodeAIAssistantEndpoint,
-    setNodeAIAssistantHeaders,
-    getNodeAIAssistantEndpoint,
-    getNodeAIAssistantHeaders,
-    configureNodeAIAssistant,
-} from '../../utils/nodeAIAssistantConfig';

package/packages/diagrams/src/lib/components/automation/statusColors.ts

@@ -1,124 +0,0 @@
-/**
- * Centralized configuration for automation node status colors
- * 
- * This configuration allows easy customization of status badge colors
- * across all automation nodes. Modify the colors here to update
- * the appearance of status badges throughout the application.
- */
-
-export interface StatusColorConfig {
-  color: string;      // Text color for the status badge
-  bgColor: string;    // Background color for the status badge
-  label: string;      // Display label for the status
-}
-
-export interface AutomationStatusColors {
-  running: StatusColorConfig;
-  completed: StatusColorConfig;
-  success: StatusColorConfig;  // Alias for completed (used in some nodes)
-  error: StatusColorConfig;
-  failed: StatusColorConfig;  // Alias for error
-  ready: StatusColorConfig;
-  'need to config': StatusColorConfig;  // Status when configuration is needed
-  authenticated?: StatusColorConfig;  // Optional, used in auth-enabled nodes
-}
-
-/**
- * Default status color configuration
- * 
- * Colors are designed to be visually distinct and accessible:
- * - Running: Blue (#2563EB) - indicates active execution
- * - Completed/Success: Yellow (#FCD34D) - indicates successful completion
- * - Error/Failed: Red (#EF4444) - indicates failure
- * - Ready: Green (#86EFAC) - indicates ready to execute
- * - Need to Config: Yellow (#FBBF24) - indicates configuration required
- */
-export const automationStatusColors: AutomationStatusColors = {
-  running: {
-    color: '#2563EB',
-    bgColor: '#2563EB33',
-    label: 'Running',
-  },
-  completed: {
-    color: '#FCD34D',
-    bgColor: 'rgba(251, 191, 36, 0.1)',
-    label: 'Completed',
-  },
-  success: {
-    color: '#FCD34D',
-    bgColor: 'rgba(251, 191, 36, 0.1)',
-    label: 'Success',
-  },
-  error: {
-    color: '#EF4444',
-    bgColor: 'rgba(239, 68, 68, 0.1)',
-    label: 'Error',
-  },
-  failed: {
-    color: '#EF4444',
-    bgColor: 'rgba(239, 68, 68, 0.1)',
-    label: 'Failed',
-  },
-  ready: {
-    color: '#86EFAC',
-    bgColor: 'rgba(16, 185, 129, 0.1)',
-    label: 'Ready',
-  },
-  'need to config': {
-    color: '#FBBF24',
-    bgColor: 'rgba(251, 191, 36, 0.1)',
-    label: 'Need to Config',
-  },
-  authenticated: {
-    color: '#0088cc',
-    bgColor: 'rgba(0, 136, 204, 0.1)',
-    label: 'Connected',
-  },
-};
-
-/**
- * Get status color configuration for a given status
- * 
- * @param status - The status string (case-insensitive)
- * @param defaultStatus - Default status to use if status not found
- * @returns StatusColorConfig object with color, bgColor, and label
- */
-export const getStatusColor = (
-  status: string,
-  defaultStatus: keyof AutomationStatusColors = 'ready'
-): StatusColorConfig => {
-  const normalizedStatus = status.toLowerCase();
-  
-  // Map various status formats to our configuration keys
-  const statusMap: Record<string, keyof AutomationStatusColors> = {
-    'running': 'running',
-    'completed': 'completed',
-    'success': 'success',
-    'error': 'error',
-    'failed': 'failed',
-    'ready': 'ready',
-    'idle': 'ready', // Map idle to ready
-    'need to config': 'need to config',
-    'need_to_config': 'need to config',
-    'not_ready': 'need to config',
-    'not ready': 'need to config',
-    'authenticated': 'authenticated',
-    'connected': 'authenticated',
-  };
-
-  const configKey = statusMap[normalizedStatus] || defaultStatus;
-  const config = automationStatusColors[configKey];
-  if (config) {
-    return config;
-  }
-  return automationStatusColors[defaultStatus];
-};
-
-/**
- * Helper function to get status config for nodes using the old format
- * (for backward compatibility)
- */
-export const getStatusConfig = (status: string): StatusColorConfig => {
-  return getStatusColor(status, 'ready');
-};
-

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

@@ -1,111 +0,0 @@
-import React, { createContext, useContext, useRef } from 'react';
-import { create } from 'zustand';
-import { useReactFlow, useNodesData } from '@xyflow/react';
-import { ICardNodeData } from '../types/card-node';
-
-// Define the store interface
-interface CardNodeStore {
-  nodeId: string | null; // Store nodeId in the store
-  setNodeId: (id: string | null) => void;
-  draggedCard: string | null;
-  setDraggedCard: (id: string | null) => void;
-  isAddingBlock: boolean;
-  setAddingBlock: (isAddingBlock: boolean) => void;
-}
-
-// Function to create a unique Zustand store for a node
-const createCardNodeStore = (initialNodeId: string) =>
-  create<CardNodeStore>((set) => ({
-    nodeId: initialNodeId, // Initialize with the provided nodeId
-    setNodeId: (id) => set({ nodeId: id }),
-    draggedCard: null,
-    setDraggedCard: (id) => set({ draggedCard: id }),
-    isAddingBlock: false,
-    setAddingBlock: (isAddingBlock) => set({ isAddingBlock }),
-  }));
-
-// Create a context for the store
-const CardNodeStoreContext = createContext<ReturnType<typeof createCardNodeStore> | null>(null);
-
-// Create a provider component
-export const CardDataProvider = ({
-  children,
-  nodeId,
-}: {
-  children: React.ReactNode;
-  nodeId: string; // Pass nodeId to the provider
-}) => {
-  // Create a unique store for this node
-  const storeRef = useRef(createCardNodeStore(nodeId));
-
-  return (
-    <CardNodeStoreContext.Provider value={storeRef.current}>
-      {children}
-    </CardNodeStoreContext.Provider>
-  );
-};
-
-// Custom hook to access the store within the context
-export const useCardNodeStoreContext = () => {
-  const store = useContext(CardNodeStoreContext);
-  if (!store) {
-    throw new Error('useCardNodeStoreContext must be used within a CardDataProvider');
-  }
-  return store;
-};
-
-// Selectors for the store
-export const useNodeId = () => useCardNodeStoreContext()((state) => state.nodeId);
-export const useDraggedCard = () => useCardNodeStoreContext()((state) => state.draggedCard);
-export const useSetDraggedCard = () => useCardNodeStoreContext()((state) => state.setDraggedCard);
-export const useIsAddingBlock = () => useCardNodeStoreContext()((state) => state.isAddingBlock);
-export const useSetAddingBlock = () => useCardNodeStoreContext()((state) => state.setAddingBlock);
-
-// Hook to access node data using useNodesData from @xyflow/react
-export const useNodeData = () => {
-  const nodeId = useNodeId();
-  const nodeData = useNodesData(nodeId ?? '');
-  return nodeData?.data as unknown as ICardNodeData;
-};
-
-// Hook to update node data
-export const useSetNodeData = () => {
-  const { setNodes } = useReactFlow();
-  const nodeId = useNodeId();
-
-  return (newData: Partial<ICardNodeData>) => {
-    if (!nodeId) return; // Ensure nodeId is available
-    setNodes((nodes) =>
-      nodes.map((node) => {
-        if (node.id === nodeId) {
-          return {
-            ...node,
-            data: { ...node.data, ...newData },
-          };
-        }
-        return node;
-      }),
-    );
-  };
-};
-
-// Selectors for ICardNodeData fields
-export const useNodeIsPinned = () => useNodeData()?.isPinned;
-export const useNodeIsBlock = () => useNodeData()?.isBlock;
-export const useNodeBlocks = () => useNodeData()?.blocks;
-export const useNodeTitle = () => useNodeData()?.title;
-export const useNodeColor = () => useNodeData()?.color;
-export const useNodeSideHandles = () => useNodeData()?.sideHandles;
-export const useNodeImg = () => useNodeData()?.img;
-export const useNodeCaseCount = () => useNodeData()?.caseCount;
-export const useNodeFalseCase = () => useNodeData()?.falseCase;
-export const useNodeTrueCase = () => useNodeData()?.trueCase;
-export const useNodeLabel = () => useNodeData()?.label;
-export const useNodeVariant = () => useNodeData()?.variant;
-export const useNodeBranchIndex = () => useNodeData()?.branchIndex;
-export const useNodeParallelColIndex = () => useNodeData()?.parallelColIndex;
-export const useNodeParallelChildrenCount = () => useNodeData()?.parallelChildrenCount;
-export const useNodeIsRoot = () => useNodeData()?.isRoot;
-export const useNodeFinalNodeId = () => useNodeData()?.finalNodeId;
-export const useNodeType = () => useNodeData()?.type;
-export const useNodeFormData = () => useNodeData()?.formData;

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

@@ -1,392 +0,0 @@
-// store.ts
-import React, { createContext, useContext, useMemo, useRef } from 'react';
-import { createStore, useStore as useZustandStore } from 'zustand';
-import { combine, devtools } from 'zustand/middleware';
-import { Connection, Edge, Node, NodeChange, EdgeChange } from '@xyflow/react';
-import DiagramTypes from '../types/diagram-types';
-import { ICardNode } from '../types/card-node';
-import { setPannable } from './setPannable';
-import { setSelectedNode } from './setSelectedNode';
-import { onConnect } from './onConnect';
-import { onReconnect } from './onReconnect';
-import { setNodes } from './setNodes';
-import { setEdges } from './setEdges';
-import { setContentHeight } from './setContentHeight';
-import { setDiagramType } from './setDiagramType';
-import { setEdgeShapeType } from './setEdgeShapeType';
-import { setLayoutDirection } from './setLayoutDirection';
-import { setSelectedEdge } from './setSelectedEdge';
-import { onEdgesChange, onNodesChange } from './onNodesChange';
-import { onNodeDragEnd } from './onNodeDragEnd';
-import {
-  ConditionBuilderState,
-  DiagramActions,
-  DiagramState,
-  DiagramStore,
-  HistoryEvent,
-  RenderAddNodeViewType,
-  WorkflowNodeContentType,
-} from './diagramStoreTypes';
-import { onNodeDragStart } from './onDragStart';
-import { goToHistoryIndex } from './undo';
-import addToHistory from '../utils/addToHistory';
-import { DiagrammingPageProps } from '../templates/Diagramming';
-import { FunctionSignature, FunctionParameter } from '../types/FunctionSignature';
-import { ICardNodeData } from '../types/card-node';
-import { AvailableVariable } from '../types/available-variables';
-
-const createDiagramStore = ({
-  workflowNodeContent,
-  diagramType,
-  defaultNodes,
-  defaultEdges,
-  getDefaultNodeData,
-  availableFunctions,
-  availableVariables,
-  id,
-  renderAddNodeView,
-  onChange,
-  conditionBuilderStates,
-  onNodeSelect,
-  enableNodeJsonPopover,
-}: Omit<DiagrammingPageProps, 'children'>) =>
-  createStore<DiagramStore>()(
-    devtools(
-      combine<DiagramState, DiagramActions>(
-        {
-          id,
-          contentHeights: [] as Array<{ id: string; height: number }>,
-          nodes: defaultNodes,
-          defaultNodes: defaultNodes,
-          defaultEdges: defaultEdges,
-          edges: defaultEdges,
-          availableFunctions,
-          availableVariables,
-          workflowNodeContent,
-          renderAddNodeView,
-          history: [],
-          historyIndex: -1,
-          diagramType,
-          edgeShapeType: 'curly',
-          layoutDirection: diagramType === 'automation' ? 'RIGHT' : 'DOWN',
-          pannable: true,
-          selectedNode: null,
-          selectedEdge: null,
-          getDefaultNodeData,
-          dragStartPosition: null,
-          conditionBuilderStates: conditionBuilderStates,
-        },
-        (set, get) => ({
-          setStore: set,
-          onNodesChange: onNodesChange(set, get as () => DiagramStore, onChange),
-          onEdgesChange: onEdgesChange(set, get as () => DiagramStore, onChange),
-          undo: () => goToHistoryIndex(set, get as () => DiagramStore, get().historyIndex - 1),
-          redo: () => goToHistoryIndex(set, get as () => DiagramStore, get().historyIndex + 1),
-          applyComplexChange: (nodes: ICardNode[], edges: Edge[], title?: string) => {
-            set((state: DiagramStore) => {
-              const event: HistoryEvent = {
-                title: title || 'Batch change',
-                forward: { t: 'complex-change', type: 'complex', nodesAndEdges: { nodes, edges } },
-                backward: { t: 'complex-change', type: 'complex', nodesAndEdges: { nodes: state.nodes, edges: state.edges } },
-              };
-              return {
-                ...addToHistory(state, [event]),
-                nodes,
-                edges,
-              } as DiagramStore;
-            });
-          },
-          goToHistoryIndex: (index: number) =>
-            goToHistoryIndex(set, get as () => DiagramStore, index),
-          onConnect: (connection: Connection) =>
-            onConnect(set, onChange)(connection),
-          onReconnect: (oldEdge: Edge, newConnection: Connection) => {
-            onReconnect(set, onChange)(oldEdge, newConnection);
-          },
-          setNodes: (nodes: ICardNode[]) => {
-            setNodes(set)(nodes);
-          },
-          setEdges: (edges: Edge[]) => setEdges(set)(edges),
-          setContentHeight: (id: string, height: number) =>
-            setContentHeight(set)(id, height),
-          setDiagramType: (diagramType: DiagramTypes) =>
-            setDiagramType(set)(diagramType),
-          setEdgeShapeType: (edgeShapeType: 'curly' | 'step') =>
-            setEdgeShapeType(set)(edgeShapeType),
-          setLayoutDirection: (layoutDirection: 'DOWN' | 'RIGHT') =>
-            setLayoutDirection(set)(layoutDirection),
-          setPannable: (value: boolean) => setPannable(set)(value),
-          setSelectedNode: (value: string | null) => {
-            setSelectedNode(set)(value);
-            // Notify host application if provided
-            if (onNodeSelect && value) {
-              const node = (get().nodes || []).find((n) => n.id === value);
-              try {
-                onNodeSelect({ nodeId: value, type: node?.type as any, data: node?.data });
-              } catch {
-                // ignore external callback errors
-              }
-            }
-          },
-          setSelectedEdge: (value: string | null) =>
-            setSelectedEdge(set)(value),
-          flushUndoStack: () => set({ history: [] }),
-          onNodeDragEnd: (event: React.MouseEvent, node: Node) =>
-            onNodeDragEnd(set, onChange)(event, node),
-          onNodeDragStart: (event: React.MouseEvent, node: Node) =>
-            onNodeDragStart(set)(event, node),
-          onChange: onChange,
-          onNodeSelect,
-          enableNodeJsonPopover: typeof enableNodeJsonPopover === 'boolean' ? enableNodeJsonPopover : true,
-          reset: () => {
-            set((state: DiagramStore) => {
-              const event: HistoryEvent = {
-                title: 'Clear diagram',
-                forward: {
-                  t: 'complex-change',
-                  type: 'complex',
-                  nodesAndEdges: { nodes: [], edges: [] },
-                },
-                backward: {
-                  t: 'complex-change',
-                  type: 'complex',
-                  nodesAndEdges: { nodes: state.nodes, edges: state.edges },
-                },
-              };
-              return {
-                ...addToHistory(state, [event]),
-                nodes: [],
-                edges: [],
-              } as DiagramStore;
-            });
-          },
-          addFunction: (func: FunctionSignature) => {
-            set((state) => ({
-              availableFunctions: [...(state.availableFunctions || []), func],
-            }));
-          },
-          editFunction: (func: FunctionSignature) => {
-            set((state) => ({
-              availableFunctions: (state.availableFunctions || []).map(f => f.id === func.id ? func : f),
-            }));
-          },
-          deleteFunction: (id: string) => {
-            set((state) => ({
-              availableFunctions: (state.availableFunctions || []).filter(f => f.id !== id),
-            }));
-          },
-          addVariable: (variable: AvailableVariable) => {
-            set((state) => ({
-              availableVariables: [...(state.availableVariables || []), variable],
-            }));
-          },
-          editVariable: (id: string, updates: Partial<AvailableVariable>) => {
-            set((state) => ({
-              availableVariables: (state.availableVariables || []).map(v =>
-                v.id === id ? { ...v, ...updates } : v
-              ),
-            }));
-          },
-          deleteVariable: (id: string) => {
-            set((state) => ({
-              availableVariables: (state.availableVariables || []).filter(v => v.id !== id),
-            }));
-          },
-        }),
-      ),
-    ),
-  );
-
-export const DiagramStoreContext = createContext<ReturnType<
-  typeof createDiagramStore
-> | null>(null);
-
-export function DiagramStoreProvider(
-  props: React.PropsWithChildren<DiagrammingPageProps>,
-) {
-  const store = useRef(createDiagramStore(props));
-
-  return (
-    <DiagramStoreContext.Provider value={store.current}>
-      {props.children}
-    </DiagramStoreContext.Provider>
-  );
-}
-
-export function useDiagramStoreContext() {
-  const store = useContext(DiagramStoreContext);
-  if (!store) throw new Error('DiagramStore context provider not initialized');
-  return store;
-}
-
-
-export function useDiagram<T>(
-  selector?: (state: DiagramStore) => T,
-): T {
-  const store = useDiagramStoreContext();
-
-  // Use Zustand's useStore with the selector and optional equality function
-  return useZustandStore(
-    store,
-    selector!
-  );
-}
-
-export const useDiagramId = (): number =>
-  useDiagram((state: DiagramStore) => state.id);
-
-// Selectors
-export const useDiagramNodes = (): ICardNode[] =>
-  useDiagram((state: DiagramStore) => state.nodes);
-
-export const useDiagramEdges = (): Edge[] =>
-  useDiagram((state) => state.edges);
-
-export const useSelectedNode = (): string | null =>
-  useDiagram((state) => state.selectedNode);
-
-export const useSelectedEdge = (): string | null =>
-  useDiagram((state) => state.selectedEdge);
-
-export const useDiagramType = (): DiagramTypes =>
-  useDiagram((state) => state.diagramType);
-
-export const useEdgeShapeType = (): 'curly' | 'step' =>
-  useDiagram((state) => state.edgeShapeType);
-
-export const useLayoutDirection = (): 'DOWN' | 'RIGHT' =>
-  useDiagram((state) => state.layoutDirection);
-
-export const usePannable = (): boolean =>
-  useDiagram((state) => state.pannable);
-
-export const useContentHeights = (): Array<{ id: string; height: number }> =>
-  useDiagram((state) => state.contentHeights);
-
-export const useHistory = (): HistoryEvent[] =>
-  useDiagram((state) => state.history);
-
-export const useHistoryIndex = (): number =>
-  useDiagram((state) => state.historyIndex);
-
-export const useAvailableFunctions = (): FunctionSignature[] | undefined =>
-  useDiagram((state) => state.availableFunctions);
-
-export const useAvailableVariables = (): AvailableVariable[] | undefined =>
-  useDiagram((state) => state.availableVariables);
-
-export const useAddVariable = () => useDiagram((state) => state.addVariable);
-export const useEditVariable = () => useDiagram((state) => state.editVariable);
-export const useDeleteVariable = () => useDiagram((state) => state.deleteVariable);
-
-export const useWorkflowNodeContent = (): WorkflowNodeContentType | undefined =>
-  useDiagram((state) => state.workflowNodeContent);
-
-export const useRenderAddNodeView = (): RenderAddNodeViewType | undefined =>
-  useDiagram((state) => state.renderAddNodeView);
-
-export const useGetDefaultNodeData = (): ((type: string) => Partial<ICardNodeData>) | undefined =>
-  useDiagram((state) => state.getDefaultNodeData);
-
-export const useDragStartPosition = (): { x: number; y: number } | null =>
-  useDiagram((state) => {
-    if (state.dragStartPosition && state.dragStartPosition.position) {
-      return state.dragStartPosition.position;
-    }
-    return null;
-  });
-// Add these setter selectors to your existing selectors
-
-// Setter for nodes
-export const useSetNodes = (): ((nodes: ICardNode[]) => void) =>
-  useDiagram((state) => state.setNodes);
-
-// Setter for edges
-export const useSetEdges = (): ((edges: Edge[]) => void) =>
-  useDiagram((state) => state.setEdges);
-
-// Setter for selected node
-export const useSetSelectedNode = (): ((value: string | null) => void) =>
-  useDiagram((state) => state.setSelectedNode);
-
-// Setter for selected edge
-export const useSetSelectedEdge = (): ((value: string | null) => void) =>
-  useDiagram((state) => state.setSelectedEdge);
-
-// Setter for pannable
-export const useSetPannable = (): ((value: boolean) => void) =>
-  useDiagram((state) => state.setPannable);
-
-// Setter for diagram type
-export const useSetDiagramType = (): ((diagramType: DiagramTypes) => void) =>
-  useDiagram((state) => state.setDiagramType);
-
-// Setter for edge shape type
-export const useSetEdgeShapeType = (): ((edgeShapeType: 'curly' | 'step') => void) =>
-  useDiagram((state) => state.setEdgeShapeType);
-
-// Setter for layout direction
-export const useSetLayoutDirection = (): ((layoutDirection: 'DOWN' | 'RIGHT') => void) =>
-  useDiagram((state) => state.setLayoutDirection);
-
-// Setter for content height
-export const useSetContentHeight = (): ((id: string, height: number) => void) =>
-  useDiagram((state) => state.setContentHeight);
-
-// Setter for history index
-export const useSetHistoryIndex = (): ((index: number) => void) =>
-  useDiagram((state) => state.goToHistoryIndex);
-
-// Setter for undo stack
-export const useFlushUndoStack = (): (() => void) =>
-  useDiagram((state) => state.flushUndoStack);
-
-// Setter for resetting the store
-export const useResetStore = (): (() => void) =>
-  useDiagram((state) => state.reset);
-
-// Setter for onConnect
-export const useOnConnect = (): ((connection: Connection) => void) =>
-  useDiagram((state) => state.onConnect);
-
-// Setter for onNodesChange
-export const useOnNodesChange = (): ((changes: NodeChange[]) => void) =>
-  useDiagram((state) => state.onNodesChange);
-
-// Setter for onEdgesChange
-export const useOnEdgesChange = (): ((changes: EdgeChange[]) => void) =>
-  useDiagram((state) => state.onEdgesChange);
-
-// Setter for onNodeDragStart
-export const useOnNodeDragStart = (): ((event: React.MouseEvent, node: Node) => void) =>
-  useDiagram((state) => state.onNodeDragStart);
-
-// Setter for onNodeDragEnd
-export const useOnNodeDragEnd = (): ((event: React.MouseEvent, node: Node) => void) =>
-  useDiagram((state) => state.onNodeDragEnd);
-
-export const useConditionBuilderStates = (): ConditionBuilderState =>
-  useDiagram((state) => state.conditionBuilderStates) || { states: [], envVar: [] };
-
-// Add this hook for easy access
-export const useAddFunction = (): ((func: FunctionSignature) => void) =>
-  useDiagram((state) => state.addFunction);
-
-export const useEditFunction = (): ((func: FunctionSignature) => void) =>
-  useDiagram((state) => state.editFunction);
-
-export const useDeleteFunction = (): ((id: string) => void) =>
-  useDiagram((state) => state.deleteFunction);
-
-// Undo/Redo hooks
-export const useUndo = (): (() => void) =>
-  useDiagram((state) => state.undo);
-
-export const useRedo = (): (() => void) =>
-  useDiagram((state) => state.redo);
-
-export const useCanUndo = (): boolean =>
-  useDiagram((state) => state.historyIndex >= 0);
-
-export const useCanRedo = (): boolean =>
-  useDiagram((state) => state.historyIndex < state.history.length - 1);