@flowuent-org/diagramming-core 1.1.7 → 1.1.9

package/package.json

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

package/packages/diagrams/src/index.ts

@@ -1,117 +1,117 @@
-export * from './lib/externals';
-export * from './lib/i18n';
-export * from './lib/templates/systemFlow';
-export * from './lib/theme';
-export * from './lib/atoms/AddNodeAnchor';
-export * from './lib/atoms/AddParallelColButton';
-export * from './lib/atoms/BendpointNode';
-export * from './lib/atoms/CardBlockTypeSelector';
-export * from './lib/atoms/CardMainContent';
-export * from './lib/atoms/FloatingConnectionLine';
-export * from './lib/atoms/MarkerSelector';
-export * from './lib/atoms/PropertyInput';
-export * from './lib/atoms/StyledBox';
-export * from './lib/contexts/CardDataProvider';
-export * from './lib/contexts/DiagramProvider';
-export * from './lib/contexts/diagramStoreTypes';
-export * from './lib/contexts/onConnect';
-export * from './lib/contexts/onDragStart';
-export * from './lib/contexts/onNodeDragEnd';
-export * from './lib/contexts/onNodesChange';
-export * from './lib/contexts/setContentHeight';
-export * from './lib/contexts/setDiagramType';
-export * from './lib/contexts/setEdges';
-export * from './lib/contexts/setEdgeShapeType';
-export * from './lib/contexts/setNodes';
-export * from './lib/contexts/setNodeSetting';
-export * from './lib/contexts/setPannable';
-export * from './lib/contexts/setSelectedEdge';
-export * from './lib/contexts/setSelectedNode';
-export * from './lib/contexts/undo';
-export * from './lib/contexts/updateNodeSetting';
-export * from './lib/hooks/customUseReactFlow';
-export * from './lib/hooks/updateNodes';
-export * from './lib/hooks/useDragCallbacks';
-export * from './lib/hooks/useModalControls';
-export * from './lib/hooks/useWorkflowNodeActiont';
-export * from './lib/hooks/useAutoRegisterFunctions';
-export * from './lib/molecules/AddingBlock';
-export * from './lib/molecules/animated-add-button';
-export * from './lib/molecules/Block';
-export * from './lib/molecules/BlockProvider';
-export * from './lib/molecules/BlockWrapper';
-export * from './lib/molecules/DraggablePane';
-export * from './lib/molecules/EntityNodeBlocks';
-export * from './lib/molecules/json-viewer';
-export * from './lib/molecules/SideHandles';
-export * from './lib/molecules/StencilItem';
-export * from './lib/molecules/WorkflowNodeActionButtons';
-export * from './lib/organisms/AddNodeView';
-export * from './lib/organisms/DownloadPanel';
-export * from './lib/organisms/EdgeModal';
-export * from './lib/organisms/NodeContextMenu';
-export * from './lib/organisms/SmartDynamicForm';
-export * from './lib/organisms/Stencil';
-export * from './lib/organisms/UseDiagramStore';
-export * from './lib/organisms/ConditionRuleGroup';
-export * from './lib/organisms/WorkflowNode';
-export * from './lib/templates/DiagramContainer';
-export * from './lib/templates/DiagramContent';
-export * from './lib/templates/Diagramming';
-export type { DiagrammingPageRef } from './lib/templates/Diagramming';
-export * from './lib/templates/PageLinks';
-export * from './lib/types/card-node';
-export * from './lib/types/collaboration-types';
-export * from './lib/types/colors';
-export * from './lib/types/edge-types';
-export * from './lib/types/hooks.types';
-export * from './lib/types/node-types';
-export * from './lib/types/SmartDynamicFormField';
-export * from './lib/types/stencil-item';
-export * from './lib/types/structures';
-export * from './lib/types/workflow-content-dynamic-form-type';
-export * from './lib/types/FunctionSignature';
-export * from './lib/utils/add-new-block';
-export * from './lib/utils/add-new-node';
-export * from './lib/utils/addToHistory';
-export * from './lib/utils/closestPoint';
-export * from './lib/utils/color-options';
-export * from './lib/utils/compress-img';
-export * from './lib/utils/constant-lengths';
-export * from './lib/utils/create-updated';
-export * from './lib/utils/createHistoryChange';
-export * from './lib/utils/edge-hooks';
-export * from './lib/utils/elkLayout';
-export * from './lib/utils/event-hooks';
-export * from './lib/utils/event-store';
-export * from './lib/utils/flow-node-hooks';
-export * from './lib/utils/flow-to-js';
-export * from './lib/utils/helpers.types';
-export * from './lib/utils/logger';
-export * from './lib/utils/model-hooks';
-export * from './lib/utils/node-hooks';
-export { useHistory, useHistoryIndex } from './lib/contexts/DiagramProvider';
-export * from './lib/utils/object';
-export * from './lib/utils/nodeutils';
-export * from './lib/utils/utilities';
-export * from './lib/utils/vhToPixels';
-export * from './lib/utils/nodeOrderByEdges';
-export * from './lib/assets/markers/markers.param';
-export * from './lib/assets/markers/markers.type';
-export * from './lib/organisms/Card/card.params';
-export * from './lib/organisms/Card/card.types';
-export * from './lib/organisms/Card/EntityNode';
-export * from './lib/organisms/CustomEdge/custom-edge-generator';
-export * from './lib/organisms/CustomEdge/custom-edge.params';
-export * from './lib/organisms/CustomEdge/custom-edge.type';
-export * from './lib/organisms/PropertiesPane';
-export * from './lib/organisms/HistoryPane';
-//export * from './lib/types/workflow-node-data-types';
-export * from './lib/templates/node-forms/NodeForm';
-export { AutomationExecutionEngine } from './lib/utils/AutomationExecutionEngine';
-export type {
-  AutomationLog,
-  AutomationResult,
-} from './lib/utils/AutomationExecutionEngine';
-export * from './lib/components/automation';
-export * from './lib/types/automation-node-data-types';
+export * from './lib/externals';
+export * from './lib/i18n';
+export * from './lib/templates/systemFlow';
+export * from './lib/theme';
+export * from './lib/atoms/AddNodeAnchor';
+export * from './lib/atoms/AddParallelColButton';
+export * from './lib/atoms/BendpointNode';
+export * from './lib/atoms/CardBlockTypeSelector';
+export * from './lib/atoms/CardMainContent';
+export * from './lib/atoms/FloatingConnectionLine';
+export * from './lib/atoms/MarkerSelector';
+export * from './lib/atoms/PropertyInput';
+export * from './lib/atoms/StyledBox';
+export * from './lib/contexts/CardDataProvider';
+export * from './lib/contexts/DiagramProvider';
+export * from './lib/contexts/diagramStoreTypes';
+export * from './lib/contexts/onConnect';
+export * from './lib/contexts/onDragStart';
+export * from './lib/contexts/onNodeDragEnd';
+export * from './lib/contexts/onNodesChange';
+export * from './lib/contexts/setContentHeight';
+export * from './lib/contexts/setDiagramType';
+export * from './lib/contexts/setEdges';
+export * from './lib/contexts/setEdgeShapeType';
+export * from './lib/contexts/setNodes';
+export * from './lib/contexts/setNodeSetting';
+export * from './lib/contexts/setPannable';
+export * from './lib/contexts/setSelectedEdge';
+export * from './lib/contexts/setSelectedNode';
+export * from './lib/contexts/undo';
+export * from './lib/contexts/updateNodeSetting';
+export * from './lib/hooks/customUseReactFlow';
+export * from './lib/hooks/updateNodes';
+export * from './lib/hooks/useDragCallbacks';
+export * from './lib/hooks/useModalControls';
+export * from './lib/hooks/useWorkflowNodeActiont';
+export * from './lib/hooks/useAutoRegisterFunctions';
+export * from './lib/molecules/AddingBlock';
+export * from './lib/molecules/animated-add-button';
+export * from './lib/molecules/Block';
+export * from './lib/molecules/BlockProvider';
+export * from './lib/molecules/BlockWrapper';
+export * from './lib/molecules/DraggablePane';
+export * from './lib/molecules/EntityNodeBlocks';
+export * from './lib/molecules/json-viewer';
+export * from './lib/molecules/SideHandles';
+export * from './lib/molecules/StencilItem';
+export * from './lib/molecules/WorkflowNodeActionButtons';
+export * from './lib/organisms/AddNodeView';
+export * from './lib/organisms/DownloadPanel';
+export * from './lib/organisms/EdgeModal';
+export * from './lib/organisms/NodeContextMenu';
+export * from './lib/organisms/SmartDynamicForm';
+export * from './lib/organisms/Stencil';
+export * from './lib/organisms/UseDiagramStore';
+export * from './lib/organisms/ConditionRuleGroup';
+export * from './lib/organisms/WorkflowNode';
+export * from './lib/templates/DiagramContainer';
+export * from './lib/templates/DiagramContent';
+export * from './lib/templates/Diagramming';
+export type { DiagrammingPageRef } from './lib/templates/Diagramming';
+export * from './lib/templates/PageLinks';
+export * from './lib/types/card-node';
+export * from './lib/types/collaboration-types';
+export * from './lib/types/colors';
+export * from './lib/types/edge-types';
+export * from './lib/types/hooks.types';
+export * from './lib/types/node-types';
+export * from './lib/types/SmartDynamicFormField';
+export * from './lib/types/stencil-item';
+export * from './lib/types/structures';
+export * from './lib/types/workflow-content-dynamic-form-type';
+export * from './lib/types/FunctionSignature';
+export * from './lib/utils/add-new-block';
+export * from './lib/utils/add-new-node';
+export * from './lib/utils/addToHistory';
+export * from './lib/utils/closestPoint';
+export * from './lib/utils/color-options';
+export * from './lib/utils/compress-img';
+export * from './lib/utils/constant-lengths';
+export * from './lib/utils/create-updated';
+export * from './lib/utils/createHistoryChange';
+export * from './lib/utils/edge-hooks';
+export * from './lib/utils/elkLayout';
+export * from './lib/utils/event-hooks';
+export * from './lib/utils/event-store';
+export * from './lib/utils/flow-node-hooks';
+export * from './lib/utils/flow-to-js';
+export * from './lib/utils/helpers.types';
+export * from './lib/utils/logger';
+export * from './lib/utils/model-hooks';
+export * from './lib/utils/node-hooks';
+export { useHistory, useHistoryIndex } from './lib/contexts/DiagramProvider';
+export * from './lib/utils/object';
+export * from './lib/utils/nodeutils';
+export * from './lib/utils/utilities';
+export * from './lib/utils/vhToPixels';
+export * from './lib/utils/nodeOrderByEdges';
+export * from './lib/assets/markers/markers.param';
+export * from './lib/assets/markers/markers.type';
+export * from './lib/organisms/Card/card.params';
+export * from './lib/organisms/Card/card.types';
+export * from './lib/organisms/Card/EntityNode';
+export * from './lib/organisms/CustomEdge/custom-edge-generator';
+export * from './lib/organisms/CustomEdge/custom-edge.params';
+export * from './lib/organisms/CustomEdge/custom-edge.type';
+export * from './lib/organisms/PropertiesPane';
+export * from './lib/organisms/HistoryPane';
+//export * from './lib/types/workflow-node-data-types';
+export * from './lib/templates/node-forms/NodeForm';
+export { AutomationExecutionEngine } from './lib/utils/AutomationExecutionEngine';
+export type {
+  AutomationLog,
+  AutomationResult,
+} from './lib/utils/AutomationExecutionEngine';
+export * from './lib/components/automation';
+export * from './lib/types/automation-node-data-types';

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

@@ -1,178 +1,245 @@
-import { CssBaseline, ThemeProvider } from '@mui/material';
-import React, { forwardRef, useImperativeHandle } from 'react';
-import { Edge, Background, BackgroundVariant } from '@xyflow/react';
-import FloatingConnectionLine from '../atoms/FloatingConnectionLine';
-import { DiagramStoreProvider, useDiagram } from '../contexts/DiagramProvider';
-import { theme } from '../theme';
-import { ICardNode } from '../types/card-node';
-import DiagramTypes from '../types/diagram-types';
-import edgeTypes, { defaultEdgeOptions } from '../types/edge-types';
-import nodeTypes from '../types/node-types';
-import { useAutoRegisterVariables } from '../hooks/useAutoRegisterVariables';
-
-import {
-  ConditionBuilderState,
-  GetDefaultNodeDataType,
-  OnChangeEventHandler,
-  RenderAddNodeViewType,
-  WorkflowNodeContentType,
-} from '../contexts/diagramStoreTypes';
-import { DiagramContainer } from './DiagramContainer';
-import { FunctionSignature } from '../types/FunctionSignature';
-import { AvailableVariable } from '../types/available-variables';
-
-// Component that handles variable registration
-const VariableRegistrationHandler: React.FC = () => {
-  useAutoRegisterVariables();
-  return null;
-};
-
-// Interface for the ref methods
-export interface DiagrammingPageRef {
-  undo: () => void;
-  redo: () => void;
-  canUndo: () => boolean;
-  canRedo: () => boolean;
-  reset: () => void;
-  getHistoryLength: () => number;
-  getHistoryIndex: () => number;
-  // Node data management methods
-  getNodeData: (nodeId: string) => any | null;
-  updateNodeData: (nodeId: string, data: any) => boolean;
-  getSelectedNode: () => string | null;
-  getNodes: () => any[];
-  getEdges: () => any[];
-}
-
-// Internal component that exposes undo/redo functionality
-const DiagrammingPageInternal = forwardRef<DiagrammingPageRef, { children?: React.ReactNode; className?: string; showAutomationExecutionPanel?: boolean }>(({ children, className, showAutomationExecutionPanel }, ref) => {
-  const undo = useDiagram((state) => state.undo);
-  const redo = useDiagram((state) => state.redo);
-  const reset = useDiagram((state) => state.reset);
-  const history = useDiagram((state) => state.history);
-  const historyIndex = useDiagram((state) => state.historyIndex);
-  const nodes = useDiagram((state) => state.nodes);
-  const edges = useDiagram((state) => state.edges);
-  const selectedNode = useDiagram((state) => state.selectedNode);
-  const setNodes = useDiagram((state) => state.setNodes);
-
-  useImperativeHandle(ref, () => ({
-    undo,
-    redo,
-    canUndo: () => historyIndex > 0,
-    canRedo: () => historyIndex < history.length - 1,
-    reset,
-    getHistoryLength: () => history.length,
-    getHistoryIndex: () => historyIndex,
-    // Node data management methods
-    getNodeData: (nodeId: string) => {
-      const node = nodes.find(n => n.id === nodeId);
-      return node ? node.data : null;
-    },
-    updateNodeData: (nodeId: string, newData: any) => {
-      const nodeIndex = nodes.findIndex(n => n.id === nodeId);
-      if (nodeIndex === -1) return false;
-
-      const updatedNodes = [...nodes];
-      updatedNodes[nodeIndex] = {
-        ...updatedNodes[nodeIndex],
-        data: { ...updatedNodes[nodeIndex].data, ...newData }
-      };
-      setNodes(updatedNodes);
-      return true;
-    },
-    getSelectedNode: () => selectedNode,
-    getNodes: () => nodes,
-    getEdges: () => edges,
-  }));
-
-  return (
-    <DiagramContainer
-      defaultEdgeOptions={defaultEdgeOptions}
-      edgeTypes={edgeTypes}
-      nodeTypes={nodeTypes as any}
-      connectionLineComponent={FloatingConnectionLine}
-      style={{ backgroundColor: '#141519' }}
-      className={className}
-      showAutomationExecutionPanel={showAutomationExecutionPanel}
-    >
-      <Background
-        color="#ffffff"
-        variant={BackgroundVariant.Dots}
-        gap={20}
-        size={1}
-      />
-      {children}
-    </DiagramContainer>
-  );
-});
-
-export interface DiagrammingPageProps {
-  diagramType: DiagramTypes;
-  onChange?: OnChangeEventHandler;
-  defaultNodes: ICardNode[];
-  defaultEdges: Edge[];
-  children?: React.ReactNode;
-  workflowNodeContent?: WorkflowNodeContentType;
-  renderAddNodeView?: RenderAddNodeViewType;
-  getDefaultNodeData?: GetDefaultNodeDataType;
-  availableFunctions: FunctionSignature[];
-  availableVariables?: AvailableVariable[];
-  id: number;
-  className?: string;
-  conditionBuilderStates?: ConditionBuilderState;
-  // New: emit node selection to host app
-  onNodeSelect?: (payload: { nodeId: string; type?: string; data?: any }) => void;
-  // New: allow host to disable library JSON popovers/drawers
-  enableNodeJsonPopover?: boolean;
-  // New: control visibility of automation execution panel
-  showAutomationExecutionPanel?: boolean;
-}
-
-export const DiagrammingPage = forwardRef<DiagrammingPageRef, DiagrammingPageProps>(({
-  diagramType,
-  defaultNodes,
-  defaultEdges,
-  onChange,
-  children,
-  workflowNodeContent,
-  renderAddNodeView,
-  getDefaultNodeData,
-  availableFunctions,
-  availableVariables,
-  id,
-  className,
-  conditionBuilderStates,
-  onNodeSelect: onNodeSelectProp,
-  enableNodeJsonPopover: enableNodeJsonPopoverProp,
-  showAutomationExecutionPanel
-}, ref) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-
-      <DiagramStoreProvider
-        id={id}
-        availableFunctions={availableFunctions}
-        availableVariables={availableVariables}
-        defaultNodes={defaultNodes} // Pass defaultNodes to the context
-        defaultEdges={defaultEdges} // Pass defaultEdges to the context
-        diagramType={diagramType} // Pass diagramType to the context
-        onChange={onChange} // Pass onChange to the context
-        workflowNodeContent={workflowNodeContent} // Pass workflowNodeContent to the context
-        renderAddNodeView={renderAddNodeView} // Pass workflowNodeContent to the context
-        getDefaultNodeData={getDefaultNodeData}
-        conditionBuilderStates={conditionBuilderStates}
-        onNodeSelect={onNodeSelectProp}
-        enableNodeJsonPopover={enableNodeJsonPopoverProp}
-      >
-        {/* Variable registration handler */}
-        <VariableRegistrationHandler />
-
-        <DiagrammingPageInternal ref={ref} className={className} showAutomationExecutionPanel={showAutomationExecutionPanel}>
-          {children}
-        </DiagrammingPageInternal>
-      </DiagramStoreProvider>
-    </ThemeProvider>
-  );
-});
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
+import { Edge, Background, BackgroundVariant, Node } from '@xyflow/react';
+import FloatingConnectionLine from '../atoms/FloatingConnectionLine';
+import { DiagramStoreProvider, useDiagram } from '../contexts/DiagramProvider';
+import { theme } from '../theme';
+import { ICardNode } from '../types/card-node';
+import DiagramTypes from '../types/diagram-types';
+import edgeTypes, { defaultEdgeOptions } from '../types/edge-types';
+import nodeTypes from '../types/node-types';
+import { useAutoRegisterVariables } from '../hooks/useAutoRegisterVariables';
+import { orderNodesByEdges, NodeOrderResult } from '../utils/nodeOrderByEdges';
+
+import {
+  ConditionBuilderState,
+  GetDefaultNodeDataType,
+  OnChangeEventHandler,
+  RenderAddNodeViewType,
+  WorkflowNodeContentType,
+} from '../contexts/diagramStoreTypes';
+import { DiagramContainer } from './DiagramContainer';
+import { FunctionSignature } from '../types/FunctionSignature';
+import { AvailableVariable } from '../types/available-variables';
+
+// Component that handles variable registration
+const VariableRegistrationHandler: React.FC = () => {
+  useAutoRegisterVariables();
+  return null;
+};
+
+// Interface for the ref methods
+export interface DiagrammingPageRef {
+  undo: () => void;
+  redo: () => void;
+  canUndo: () => boolean;
+  canRedo: () => boolean;
+  reset: () => void;
+  getHistoryLength: () => number;
+  getHistoryIndex: () => number;
+  // Node data management methods
+  getNodeData: (nodeId: string) => any | null;
+  updateNodeData: (nodeId: string, data: any) => boolean;
+  getSelectedNode: () => string | null;
+  getNodes: () => any[];
+  getEdges: () => any[];
+  // Get ordered nodes based on edge connections (arrow direction)
+  getNodeOrder: () => NodeOrderResult;
+}
+
+// Internal component that exposes undo/redo functionality
+const DiagrammingPageInternal = forwardRef<DiagrammingPageRef, { 
+  children?: React.ReactNode; 
+  className?: string; 
+  showAutomationExecutionPanel?: boolean;
+  onNodeOrderChange?: (nodeOrder: NodeOrderResult) => void;
+}>(({ children, className, showAutomationExecutionPanel, onNodeOrderChange }, ref) => {
+  const undo = useDiagram((state) => state.undo);
+  const redo = useDiagram((state) => state.redo);
+  const reset = useDiagram((state) => state.reset);
+  const history = useDiagram((state) => state.history);
+  const historyIndex = useDiagram((state) => state.historyIndex);
+  const nodes = useDiagram((state) => state.nodes);
+  const edges = useDiagram((state) => state.edges);
+  const selectedNode = useDiagram((state) => state.selectedNode);
+  const setNodes = useDiagram((state) => state.setNodes);
+
+  // Send node order to parent project whenever nodes/edges change
+  useEffect(() => {
+    if (edges.length > 0) {
+      // Get only nodes that are connected by edges (exclude orphan nodes)
+      const nodeOrder = orderNodesByEdges(nodes, edges, { includeOrphanNodes: false });
+      
+      // Get only connected nodes (nodes that appear in edges)
+      const connectedNodeIds = new Set<string>();
+      edges.forEach((edge) => {
+        connectedNodeIds.add(edge.source);
+        connectedNodeIds.add(edge.target);
+      });
+      
+      // Filter ordered nodes to only include connected ones
+      const connectedOrderedNodes = nodeOrder.orderedNodes.filter(
+        (node) => connectedNodeIds.has(node.id)
+      );
+      
+      // Print node structure to console
+      console.log('\n========== NODE ORDER BY EDGES ==========');
+      console.log('\n📋 CONNECTED NODES ORDER (following arrows):');
+      connectedOrderedNodes.forEach((node, index) => {
+        console.log(`  ${index + 1}. [${node.type || 'unknown'}] ${node.id}`);
+      });
+      
+      console.log('\n🟢 START NODE:', nodeOrder.startNodes[0]?.id || '(none)');
+      console.log('🔴 END NODE:', nodeOrder.endNodes[0]?.id || '(none)');
+      
+      console.log('\n🔗 EDGE ORDER:');
+      edges.forEach((edge, index) => {
+        console.log(`  ${index + 1}. ${edge.source} ──→ ${edge.target}`);
+      });
+      
+      console.log('\n📊 TOTAL CONNECTED NODES:', connectedOrderedNodes.length);
+      console.log('==========================================\n');
+      
+      // Create updated result with only connected nodes
+      const connectedNodeOrder: NodeOrderResult = {
+        ...nodeOrder,
+        orderedNodes: connectedOrderedNodes,
+      };
+      
+      // Send to parent project if callback provided
+      if (onNodeOrderChange) {
+        onNodeOrderChange(connectedNodeOrder);
+      }
+    }
+  }, [nodes, edges, onNodeOrderChange]);
+
+  useImperativeHandle(ref, () => ({
+    undo,
+    redo,
+    canUndo: () => historyIndex > 0,
+    canRedo: () => historyIndex < history.length - 1,
+    reset,
+    getHistoryLength: () => history.length,
+    getHistoryIndex: () => historyIndex,
+    // Node data management methods
+    getNodeData: (nodeId: string) => {
+      const node = nodes.find(n => n.id === nodeId);
+      return node ? node.data : null;
+    },
+    updateNodeData: (nodeId: string, newData: any) => {
+      const nodeIndex = nodes.findIndex(n => n.id === nodeId);
+      if (nodeIndex === -1) return false;
+
+      const updatedNodes = [...nodes];
+      updatedNodes[nodeIndex] = {
+        ...updatedNodes[nodeIndex],
+        data: { ...updatedNodes[nodeIndex].data, ...newData }
+      };
+      setNodes(updatedNodes);
+      return true;
+    },
+    getSelectedNode: () => selectedNode,
+    getNodes: () => nodes,
+    getEdges: () => edges,
+    // Get ordered nodes based on edge connections
+    getNodeOrder: () => orderNodesByEdges(nodes, edges),
+  }));
+
+  return (
+    <DiagramContainer
+      defaultEdgeOptions={defaultEdgeOptions}
+      edgeTypes={edgeTypes}
+      nodeTypes={nodeTypes as any}
+      connectionLineComponent={FloatingConnectionLine}
+      style={{ backgroundColor: '#141519' }}
+      className={className}
+      showAutomationExecutionPanel={showAutomationExecutionPanel}
+    >
+      <Background
+        color="#ffffff"
+        variant={BackgroundVariant.Dots}
+        gap={20}
+        size={1}
+      />
+      {children}
+    </DiagramContainer>
+  );
+});
+
+export interface DiagrammingPageProps {
+  diagramType: DiagramTypes;
+  onChange?: OnChangeEventHandler;
+  defaultNodes: ICardNode[];
+  defaultEdges: Edge[];
+  children?: React.ReactNode;
+  workflowNodeContent?: WorkflowNodeContentType;
+  renderAddNodeView?: RenderAddNodeViewType;
+  getDefaultNodeData?: GetDefaultNodeDataType;
+  availableFunctions: FunctionSignature[];
+  availableVariables?: AvailableVariable[];
+  id: number;
+  className?: string;
+  conditionBuilderStates?: ConditionBuilderState;
+  // New: emit node selection to host app
+  onNodeSelect?: (payload: { nodeId: string; type?: string; data?: any }) => void;
+  // New: allow host to disable library JSON popovers/drawers
+  enableNodeJsonPopover?: boolean;
+  // New: control visibility of automation execution panel
+  showAutomationExecutionPanel?: boolean;
+  // New: callback to receive node order based on arrow/edge connections
+  onNodeOrderChange?: (nodeOrder: NodeOrderResult) => void;
+}
+
+export const DiagrammingPage = forwardRef<DiagrammingPageRef, DiagrammingPageProps>(({
+  diagramType,
+  defaultNodes,
+  defaultEdges,
+  onChange,
+  children,
+  workflowNodeContent,
+  renderAddNodeView,
+  getDefaultNodeData,
+  availableFunctions,
+  availableVariables,
+  id,
+  className,
+  conditionBuilderStates,
+  onNodeSelect: onNodeSelectProp,
+  enableNodeJsonPopover: enableNodeJsonPopoverProp,
+  showAutomationExecutionPanel,
+  onNodeOrderChange
+}, ref) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+
+      <DiagramStoreProvider
+        id={id}
+        availableFunctions={availableFunctions}
+        availableVariables={availableVariables}
+        defaultNodes={defaultNodes} // Pass defaultNodes to the context
+        defaultEdges={defaultEdges} // Pass defaultEdges to the context
+        diagramType={diagramType} // Pass diagramType to the context
+        onChange={onChange} // Pass onChange to the context
+        workflowNodeContent={workflowNodeContent} // Pass workflowNodeContent to the context
+        renderAddNodeView={renderAddNodeView} // Pass workflowNodeContent to the context
+        getDefaultNodeData={getDefaultNodeData}
+        conditionBuilderStates={conditionBuilderStates}
+        onNodeSelect={onNodeSelectProp}
+        enableNodeJsonPopover={enableNodeJsonPopoverProp}
+      >
+        {/* Variable registration handler */}
+        <VariableRegistrationHandler />
+
+        <DiagrammingPageInternal 
+          ref={ref} 
+          className={className} 
+          showAutomationExecutionPanel={showAutomationExecutionPanel}
+          onNodeOrderChange={onNodeOrderChange}
+        >
+          {children}
+        </DiagrammingPageInternal>
+      </DiagramStoreProvider>
+    </ThemeProvider>
+  );
+});