@eventcatalog/core 3.10.2 → 3.12.0

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.10.2";
+var version = "3.12.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-DGE5ITBR.js";
-import "../chunk-K7EPHS7S.js";
+} from "../chunk-K44BXVHU.js";
+import "../chunk-G7GG3HEB.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.10.2";
+var version = "3.12.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-QWSUFHCT.js";
-import "../chunk-DGE5ITBR.js";
+} from "../chunk-VUBZ6A7B.js";
+import "../chunk-K44BXVHU.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-K7EPHS7S.js";
+import "../chunk-G7GG3HEB.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-K7EPHS7S.js → chunk-G7GG3HEB.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "3.10.2";
+var version = "3.12.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-DGE5ITBR.js → chunk-K44BXVHU.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-K7EPHS7S.js";
+} from "./chunk-G7GG3HEB.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-IJKRHWWO.js → chunk-LXOS3MXQ.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-AL67CV2N.js";
+} from "./chunk-WVKLG26T.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-QWSUFHCT.js → chunk-VUBZ6A7B.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-DGE5ITBR.js";
+} from "./chunk-K44BXVHU.js";
 import {
   countResources,
   serializeCounts

package/dist/{chunk-AL67CV2N.js → chunk-WVKLG26T.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-K7EPHS7S.js";
+} from "./chunk-G7GG3HEB.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "3.10.2";
+var version = "3.12.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-K7EPHS7S.js";
+} from "./chunk-G7GG3HEB.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -109,7 +109,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.10.2";
+var version = "3.12.0";
 
 // src/constants.ts
 var VERSION = version;
@@ -812,6 +812,7 @@ program.command("dev").description("Run development server of EventCatalog").opt
             ENABLE_EMBED: canEmbedPages || isEventCatalogScale,
             EVENTCATALOG_STARTER: isEventCatalogStarter,
             EVENTCATALOG_SCALE: isEventCatalogScale,
+            EVENTCATALOG_DEV_MODE: "true",
             NODE_NO_WARNINGS: "1"
           }
         }

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-QWSUFHCT.js";
-import "./chunk-DGE5ITBR.js";
+} from "./chunk-VUBZ6A7B.js";
+import "./chunk-K44BXVHU.js";
 import "./chunk-4UVFXLPI.js";
 import {
   runMigrations
@@ -22,13 +22,13 @@ import {
 } from "./chunk-5VBIXL6C.js";
 import {
   generate
-} from "./chunk-IJKRHWWO.js";
+} from "./chunk-LXOS3MXQ.js";
 import {
   logger
-} from "./chunk-AL67CV2N.js";
+} from "./chunk-WVKLG26T.js";
 import {
   VERSION
-} from "./chunk-K7EPHS7S.js";
+} from "./chunk-G7GG3HEB.js";
 import "./chunk-UPONRQSN.js";
 
 // src/eventcatalog.ts
@@ -165,6 +165,7 @@ program.command("dev").description("Run development server of EventCatalog").opt
             ENABLE_EMBED: canEmbedPages || isEventCatalogScale,
             EVENTCATALOG_STARTER: isEventCatalogStarter,
             EVENTCATALOG_SCALE: isEventCatalogScale,
+            EVENTCATALOG_DEV_MODE: "true",
             NODE_NO_WARNINGS: "1"
           }
         }

package/dist/generate.cjs

@@ -73,7 +73,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.10.2";
+var version = "3.12.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-IJKRHWWO.js";
-import "./chunk-AL67CV2N.js";
-import "./chunk-K7EPHS7S.js";
+} from "./chunk-LXOS3MXQ.js";
+import "./chunk-WVKLG26T.js";
+import "./chunk-G7GG3HEB.js";
 import "./chunk-UPONRQSN.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.10.2";
+var version = "3.12.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-AL67CV2N.js";
-import "../chunk-K7EPHS7S.js";
+} from "../chunk-WVKLG26T.js";
+import "../chunk-G7GG3HEB.js";
 export {
   logger
 };

package/eventcatalog/integrations/eventcatalog-features.ts

@@ -6,6 +6,7 @@ import {
   isEventCatalogScaleEnabled,
   isEventCatalogStarterEnabled,
   isEventCatalogMCPEnabled,
+  isDevMode,
 } from '../src/utils/feature';
 
 const catalogDirectory = process.env.CATALOG_DIR || process.cwd();
@@ -72,6 +73,18 @@ export default function eventCatalogIntegration(): AstroIntegration {
             entrypoint: path.join(catalogDirectory, 'src/enterprise/plans/index.astro'),
           });
         }
+
+        // Dev-only routes for visualizer layout persistence
+        if (isDevMode()) {
+          params.injectRoute({
+            pattern: '/api/dev/visualizer-layout/save',
+            entrypoint: path.join(catalogDirectory, 'src/enterprise/visualizer-layout/save.ts'),
+          });
+          params.injectRoute({
+            pattern: '/api/dev/visualizer-layout/reset',
+            entrypoint: path.join(catalogDirectory, 'src/enterprise/visualizer-layout/reset.ts'),
+          });
+        }
       },
     },
   };

package/eventcatalog/src/components/MDX/Design/Design.astro

@@ -5,7 +5,8 @@ import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
 
-import { isVisualiserEnabled, isEventCatalogChatEnabled } from '@utils/feature';
+import { isVisualiserEnabled, isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
+import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 
 const isChatEnabled = isEventCatalogChatEnabled();
 
@@ -21,6 +22,11 @@ try {
 } catch (error) {
   console.error(`Error reading design file: ${error}`);
 }
+
+// Load and apply saved layout if it exists
+const resourceKey = design ? buildResourceKey('designs', design.id || id) : '';
+const savedLayout = resourceKey ? await loadSavedLayout(resourceKey) : null;
+const nodesWithLayout = design ? applyLayoutToNodes(design.nodes || [], savedLayout) : ([] as any[]);
 ---
 
 {
@@ -51,7 +57,7 @@ try {
         <NodeGraph
           id={id}
           title={title ?? design.name}
-          nodes={design.nodes || []}
+          nodes={nodesWithLayout}
           edges={design.edges || []}
           hrefLabel={isVisualiserEnabled() ? 'View in visualizer' : undefined}
           href={isVisualiserEnabled() ? `/visualiser/designs/${design.id}` : undefined}
@@ -60,6 +66,8 @@ try {
           client:only="react"
           showSearch={search}
           isChatEnabled={isChatEnabled}
+          isDevMode={isDevMode()}
+          resourceKey={resourceKey}
         />
       </div>
     </div>

package/eventcatalog/src/components/MDX/EntityMap/EntityMap.astro

@@ -5,7 +5,8 @@ import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { getServices } from '@utils/collections/services';
-import { isEventCatalogChatEnabled } from '@utils/feature';
+import { isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
+import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 
 const isChatEnabled = isEventCatalogChatEnabled();
 
@@ -38,6 +39,11 @@ const { nodes, edges } = await getNodesAndEdges({
   ...(entities ? { entities } : {}), // Pass entities if provided
   type: collection,
 });
+
+// Load and apply saved layout if it exists
+const resourceKey = buildResourceKey(collection, resourceId, resource?.data?.version);
+const savedLayout = await loadSavedLayout(resourceKey);
+const nodesWithLayout = applyLayoutToNodes(nodes as any[], savedLayout);
 ---
 
 {
@@ -66,7 +72,7 @@ const { nodes, edges } = await getNodesAndEdges({
 <div>
   <NodeGraph
     id={id}
-    nodes={nodes}
+    nodes={nodesWithLayout}
     edges={edges}
     linkTo={'visualiser'}
     mode="simple"
@@ -75,6 +81,8 @@ const { nodes, edges } = await getNodesAndEdges({
     client:only="react"
     portalId={`${id}-entity-map-portal`}
     isChatEnabled={isChatEnabled}
+    isDevMode={isDevMode()}
+    resourceKey={resourceKey}
   />
 </div>
 

package/eventcatalog/src/components/MDX/Flow/Flow.astro

@@ -4,7 +4,8 @@ import { getNodesAndEdges } from '@utils/node-graphs/flows-node-graph';
 import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
 import { getVersionFromCollection } from '@utils/collections/versions';
-import { isVisualiserEnabled, isEventCatalogChatEnabled } from '@utils/feature';
+import { isVisualiserEnabled, isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
+import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 
 const isChatEnabled = isEventCatalogChatEnabled();
 
@@ -22,6 +23,11 @@ const { nodes, edges } = await getNodesAndEdges({
   version: flow.data.version,
   mode: mode,
 });
+
+// Load and apply saved layout if it exists
+const resourceKey = buildResourceKey('flows', id, flow.data.version);
+const savedLayout = await loadSavedLayout(resourceKey);
+const nodesWithLayout = applyLayoutToNodes(nodes, savedLayout);
 ---
 
 {
@@ -49,7 +55,7 @@ const { nodes, edges } = await getNodesAndEdges({
 <div>
   <NodeGraph
     id={id}
-    nodes={nodes}
+    nodes={nodesWithLayout}
     edges={edges}
     hrefLabel={'View in visualizer'}
     href={isVisualiserEnabled() ? `/visualiser/flows/${id}/${version}` : undefined}
@@ -60,6 +66,8 @@ const { nodes, edges } = await getNodesAndEdges({
     showFlowWalkthrough={walkthrough}
     showSearch={search}
     isChatEnabled={isChatEnabled}
+    isDevMode={isDevMode()}
+    resourceKey={resourceKey}
   />
 </div>
 

package/eventcatalog/src/components/MDX/NodeGraph/Edges/AnimatedMessageEdge.tsx

@@ -81,6 +81,19 @@ const AnimatedMessageEdge = ({
       {/* <g className={`z-30 ${opacity === 1 ? 'opacity-100' : 'opacity-10'}`}>
       </g> */}
       <g>
+        {/* Background rect for label */}
+        {label && (
+          <rect
+            x={labelX - 30}
+            y={labelY - lines.length * 6}
+            width={60}
+            height={lines.length * 14}
+            fill="white"
+            fillOpacity={0.3}
+            rx={4}
+            ry={4}
+          />
+        )}
         {/* Text element */}
         <text x={labelX} y={labelY} textAnchor="middle" dominantBaseline="middle" fontSize="10px" pointerEvents="none">
           {lines.map((line, i) => (

package/eventcatalog/src/components/MDX/NodeGraph/FocusMode/FocusModeContent.tsx

@@ -0,0 +1,294 @@
+import React, { useMemo, useCallback, useEffect, useState, useRef } from 'react';
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  useReactFlow,
+  useNodesState,
+  useEdgesState,
+  type Node,
+  type Edge,
+  type NodeTypes,
+  type EdgeTypes,
+} from '@xyflow/react';
+import { getConnectedNodes, getNodeDisplayInfo } from './utils';
+import FocusModeNodeActions from './FocusModeNodeActions';
+import FocusModePlaceholder from './FocusModePlaceholder';
+
+interface FocusModeContentProps {
+  centerNodeId: string;
+  nodes: Node[];
+  edges: Edge[];
+  nodeTypes: NodeTypes;
+  edgeTypes: EdgeTypes;
+  onSwitchCenter: (newCenterNodeId: string, direction: 'left' | 'right') => void;
+}
+
+const HORIZONTAL_SPACING = 450;
+const VERTICAL_SPACING = 200;
+const SLIDE_DURATION = 300;
+
+const FocusModeContent: React.FC<FocusModeContentProps> = ({
+  centerNodeId,
+  nodes: allNodes,
+  edges: allEdges,
+  nodeTypes,
+  edgeTypes,
+  onSwitchCenter,
+}) => {
+  const { fitView } = useReactFlow();
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [needsFitView, setNeedsFitView] = useState(false);
+  const [hoveredEdgeId, setHoveredEdgeId] = useState<string | null>(null);
+  const reactFlowInitialized = useRef(false);
+  const animationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Calculate focused nodes and edges with positions
+  const calculateFocusedGraph = useCallback(
+    (centerId: string) => {
+      const centerNode = allNodes.find((n) => n.id === centerId);
+      if (!centerNode) {
+        return { nodes: [], edges: [] };
+      }
+
+      const { leftNodes, rightNodes } = getConnectedNodes(centerId, allNodes, allEdges);
+      const centerNodeInfo = getNodeDisplayInfo(centerNode);
+      const positionedNodes: Node[] = [];
+
+      // Center node at origin
+      positionedNodes.push({
+        ...centerNode,
+        position: { x: 0, y: 0 },
+        style: { ...centerNode.style, opacity: 1 },
+        data: { ...centerNode.data, isFocusCenter: true },
+      });
+
+      // Left nodes (incoming)
+      leftNodes.forEach((node, index) => {
+        const yOffset = (index - (leftNodes.length - 1) / 2) * VERTICAL_SPACING;
+        positionedNodes.push({
+          ...node,
+          position: { x: -HORIZONTAL_SPACING, y: yOffset },
+          style: { ...node.style, opacity: 1 },
+        });
+      });
+
+      // Right nodes (outgoing)
+      rightNodes.forEach((node, index) => {
+        const yOffset = (index - (rightNodes.length - 1) / 2) * VERTICAL_SPACING;
+        positionedNodes.push({
+          ...node,
+          position: { x: HORIZONTAL_SPACING, y: yOffset },
+          style: { ...node.style, opacity: 1 },
+        });
+      });
+
+      // Add placeholder nodes if no connections exist
+      if (leftNodes.length === 0) {
+        positionedNodes.push({
+          id: '__placeholder-left__',
+          type: 'placeholder',
+          position: { x: -HORIZONTAL_SPACING, y: 0 },
+          data: { label: `No inputs found for "${centerNodeInfo.name}" in this diagram`, side: 'left' },
+          draggable: false,
+          selectable: false,
+        } as Node);
+      }
+
+      if (rightNodes.length === 0) {
+        positionedNodes.push({
+          id: '__placeholder-right__',
+          type: 'placeholder',
+          position: { x: HORIZONTAL_SPACING, y: 0 },
+          data: { label: `No outputs found for "${centerNodeInfo.name}" in this diagram`, side: 'right' },
+          draggable: false,
+          selectable: false,
+        } as Node);
+      }
+
+      // Filter edges - only show edges connected to center node
+      const focusedNodeIds = new Set(positionedNodes.map((n) => n.id));
+      const filteredEdges = allEdges
+        .filter((edge) => {
+          // Only include edges where center node is either source or target
+          const connectsToCenter = edge.source === centerId || edge.target === centerId;
+          // And the other end is in our focused nodes
+          const otherEndInFocus = focusedNodeIds.has(edge.source) && focusedNodeIds.has(edge.target);
+          return connectsToCenter && otherEndInFocus;
+        })
+        .map((edge) => ({
+          ...edge,
+          style: { ...edge.style, opacity: 1 },
+          labelStyle: { ...edge.labelStyle, opacity: 1 },
+          data: { ...edge.data, opacity: 1, animated: false },
+          animated: false,
+        }));
+
+      return { nodes: positionedNodes, edges: filteredEdges };
+    },
+    [allNodes, allEdges]
+  );
+
+  // Initial graph
+  const initialGraph = useMemo(() => calculateFocusedGraph(centerNodeId), [centerNodeId, calculateFocusedGraph]);
+
+  const [displayNodes, setDisplayNodes] = useNodesState(initialGraph.nodes);
+  const [displayEdges, setDisplayEdges] = useEdgesState(initialGraph.edges);
+
+  // Update when centerNodeId changes externally
+  useEffect(() => {
+    const { nodes, edges } = calculateFocusedGraph(centerNodeId);
+    setDisplayNodes(nodes);
+    setDisplayEdges(edges);
+    setNeedsFitView(true);
+  }, [centerNodeId, calculateFocusedGraph, setDisplayNodes, setDisplayEdges]);
+
+  // FitView when needed - triggered after nodes are updated
+  useEffect(() => {
+    if (needsFitView && reactFlowInitialized.current) {
+      // Wait for nodes to be fully rendered, then fit view with animation
+      const timer = setTimeout(() => {
+        fitView({ padding: 0.2, duration: 400 });
+        setNeedsFitView(false);
+      }, 150);
+      return () => clearTimeout(timer);
+    }
+  }, [needsFitView, displayNodes, fitView]);
+
+  // Handle ReactFlow initialization
+  const handleInit = useCallback(() => {
+    reactFlowInitialized.current = true;
+    // Wait for nodes to be fully rendered, then fit view with animation
+    setTimeout(() => {
+      fitView({ padding: 0.2, duration: 400 });
+    }, 150);
+  }, [fitView]);
+
+  // Handle switching to a new center node with animation
+  const handleSwitchNode = useCallback(
+    (nodeId: string, direction: 'left' | 'right') => {
+      if (nodeId === centerNodeId || isAnimating) return;
+
+      setIsAnimating(true);
+
+      // Animate: clicked node slides to center, current center hides
+      setDisplayNodes((currentNodes) =>
+        currentNodes.map((node) => {
+          if (node.id === nodeId) {
+            // Clicked node slides to center
+            return {
+              ...node,
+              position: { x: 0, y: 0 },
+              style: { ...node.style, transition: `all ${SLIDE_DURATION}ms ease-out` },
+            };
+          }
+          if (node.id === centerNodeId) {
+            // Current center node hides
+            return {
+              ...node,
+              style: { ...node.style, opacity: 0, transition: `opacity ${SLIDE_DURATION}ms ease-out` },
+            };
+          }
+          return node;
+        })
+      );
+
+      // After slide completes, switch to new center
+      animationTimeoutRef.current = setTimeout(() => {
+        onSwitchCenter(nodeId, direction);
+        setIsAnimating(false);
+      }, SLIDE_DURATION);
+    },
+    [centerNodeId, isAnimating, setDisplayNodes, onSwitchCenter]
+  );
+
+  // Handle node click with animation
+  const handleNodeClick = useCallback(
+    (_: React.MouseEvent, clickedNode: Node) => {
+      if (clickedNode.id === centerNodeId || isAnimating) return;
+      const direction = (clickedNode.position?.x ?? 0) < 0 ? 'left' : 'right';
+      handleSwitchNode(clickedNode.id, direction);
+    },
+    [centerNodeId, isAnimating, handleSwitchNode]
+  );
+
+  // Handle edge hover for animation
+  const handleEdgeMouseEnter = useCallback((_: React.MouseEvent, edge: Edge) => {
+    setHoveredEdgeId(edge.id);
+  }, []);
+
+  const handleEdgeMouseLeave = useCallback(() => {
+    setHoveredEdgeId(null);
+  }, []);
+
+  // Apply hover animation to edges - use ReactFlow's built-in animated property
+  const edgesWithHover = useMemo(() => {
+    return displayEdges.map((edge) => {
+      if (edge.id === hoveredEdgeId) {
+        return {
+          ...edge,
+          animated: true,
+        };
+      }
+      return edge;
+    });
+  }, [displayEdges, hoveredEdgeId]);
+
+  // Merge nodeTypes with placeholder
+  const mergedNodeTypes = useMemo(
+    () => ({
+      ...nodeTypes,
+      placeholder: FocusModePlaceholder,
+    }),
+    [nodeTypes]
+  );
+
+  if (displayNodes.length === 0) {
+    return <div className="flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]">Node not found</div>;
+  }
+
+  return (
+    <div className="h-full w-full focus-mode-container">
+      <ReactFlow
+        nodes={displayNodes}
+        edges={edgesWithHover}
+        nodeTypes={mergedNodeTypes}
+        edgeTypes={edgeTypes}
+        onNodeClick={handleNodeClick}
+        onEdgeMouseEnter={handleEdgeMouseEnter}
+        onEdgeMouseLeave={handleEdgeMouseLeave}
+        onInit={handleInit}
+        proOptions={{ hideAttribution: true }}
+        nodesDraggable={true}
+        nodesConnectable={false}
+        elementsSelectable={true}
+        panOnDrag={true}
+        zoomOnScroll={true}
+        minZoom={0.3}
+        maxZoom={2}
+      >
+        <Background color="rgb(var(--ec-page-border))" gap={20} />
+        <Controls showInteractive={false} />
+        {displayNodes.map((node, index) => (
+          <FocusModeNodeActions
+            key={`actions-${node.id}-${index}`}
+            node={node}
+            isCenter={node.id === centerNodeId}
+            onSwitch={handleSwitchNode}
+          />
+        ))}
+      </ReactFlow>
+    </div>
+  );
+};
+
+export default FocusModeContent;