@eventcatalog/core 3.11.0 → 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.11.0";
+var version = "3.12.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-JGYH3AAT.js";
-import "../chunk-744TUGLY.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.11.0";
+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-LHPQHOE5.js";
-import "../chunk-JGYH3AAT.js";
+} from "../chunk-VUBZ6A7B.js";
+import "../chunk-K44BXVHU.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-744TUGLY.js";
+import "../chunk-G7GG3HEB.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-744TUGLY.js → chunk-G7GG3HEB.js}

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-744TUGLY.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.11.0";
+var version = "3.12.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-744TUGLY.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.11.0";
+var version = "3.12.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-LHPQHOE5.js";
-import "./chunk-JGYH3AAT.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-Q6BRAXMP.js";
+} from "./chunk-LXOS3MXQ.js";
 import {
   logger
-} from "./chunk-TE67QRWX.js";
+} from "./chunk-WVKLG26T.js";
 import {
   VERSION
-} from "./chunk-744TUGLY.js";
+} from "./chunk-G7GG3HEB.js";
 import "./chunk-UPONRQSN.js";
 
 // src/eventcatalog.ts

package/dist/generate.cjs

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

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-Q6BRAXMP.js";
-import "./chunk-TE67QRWX.js";
-import "./chunk-744TUGLY.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.11.0";
+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-TE67QRWX.js";
-import "../chunk-744TUGLY.js";
+} from "../chunk-WVKLG26T.js";
+import "../chunk-G7GG3HEB.js";
 export {
   logger
 };

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;

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { NodeToolbar, Position, useViewport, type Node } from '@xyflow/react';
+import { ArrowRightLeft, FileText } from 'lucide-react';
+import { getNodeDocUrl } from './utils';
+import { buildUrl } from '@utils/url-builder';
+
+interface FocusModeNodeActionsProps {
+  node: Node;
+  isCenter: boolean;
+  onSwitch: (nodeId: string, direction: 'left' | 'right') => void;
+}
+
+const FocusModeNodeActions: React.FC<FocusModeNodeActionsProps> = ({ node, isCenter, onSwitch }) => {
+  const { zoom } = useViewport();
+
+  // Don't show actions for placeholder nodes
+  if (node.type === 'placeholder') return null;
+
+  const docUrl = getNodeDocUrl(node);
+  const direction = (node.position?.x ?? 0) < 0 ? 'left' : 'right';
+
+  // Scale sizes based on zoom (inverse relationship - smaller when zoomed out)
+  const baseButtonSize = 32;
+  const baseIconSize = 16;
+  const scaleFactor = Math.max(0.6, Math.min(1, zoom));
+  const buttonSize = Math.round(baseButtonSize * scaleFactor);
+  const iconSize = Math.round(baseIconSize * scaleFactor);
+
+  const handleSwitch = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onSwitch(node.id, direction);
+  };
+
+  const handleDocClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (docUrl) {
+      window.location.href = buildUrl(docUrl);
+    }
+  };
+
+  // Center node only shows docs icon (if available)
+  if (isCenter) {
+    if (!docUrl) return null;
+    return (
+      <NodeToolbar nodeId={node.id} position={Position.Bottom} isVisible={true} offset={-16}>
+        <div
+          className="flex items-center gap-1 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md"
+          style={{ padding: Math.round(4 * scaleFactor) }}
+        >
+          <button
+            onClick={handleDocClick}
+            className="flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
+            style={{ width: buttonSize, height: buttonSize }}
+            title="View documentation"
+          >
+            <FileText style={{ width: iconSize, height: iconSize }} />
+          </button>
+        </div>
+      </NodeToolbar>
+    );
+  }
+
+  return (
+    <NodeToolbar nodeId={node.id} position={Position.Bottom} isVisible={true} offset={-16}>
+      <div
+        className="flex items-center gap-1 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md"
+        style={{ padding: Math.round(4 * scaleFactor) }}
+      >
+        {docUrl && (
+          <button
+            onClick={handleDocClick}
+            className="flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
+            style={{ width: buttonSize, height: buttonSize }}
+            title="View documentation"
+          >
+            <FileText style={{ width: iconSize, height: iconSize }} />
+          </button>
+        )}
+        <button
+          onClick={handleSwitch}
+          className="flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
+          style={{ width: buttonSize, height: buttonSize }}
+          title="Focus on this node"
+        >
+          <ArrowRightLeft style={{ width: iconSize, height: iconSize }} />
+        </button>
+      </div>
+    </NodeToolbar>
+  );
+};
+
+export default FocusModeNodeActions;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+
+interface FocusModePlaceholderProps {
+  data: {
+    label: string;
+    side: 'left' | 'right';
+  };
+}
+
+const FocusModePlaceholder: React.FC<FocusModePlaceholderProps> = ({ data }) => {
+  const { label, side } = data;
+
+  return (
+    <div
+      className="px-4 py-4 rounded-lg border-2 border-dashed border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg)/0.5)] max-w-[280px] flex items-center justify-center"
+      style={{ opacity: 0.6, minHeight: '130px' }}
+    >
+      {side === 'right' && <Handle type="target" position={Position.Left} style={{ visibility: 'hidden' }} />}
+      <div className="text-center text-sm text-[rgb(var(--ec-page-text-muted))] italic">{label}</div>
+      {side === 'left' && <Handle type="source" position={Position.Right} style={{ visibility: 'hidden' }} />}
+    </div>
+  );
+};
+
+export default FocusModePlaceholder;

package/eventcatalog/src/components/MDX/NodeGraph/FocusMode/utils.ts

@@ -0,0 +1,163 @@
+import type { Node, Edge } from '@xyflow/react';
+
+export interface NodeDisplayInfo {
+  id: string;
+  name: string;
+  type: string;
+  version?: string;
+  description?: string;
+}
+
+export interface ConnectedNodes {
+  leftNodes: Node[];
+  rightNodes: Node[];
+}
+
+export const NODE_COLOR_CLASSES: Record<string, string> = {
+  events: 'bg-orange-600',
+  services: 'bg-pink-600',
+  flows: 'bg-teal-600',
+  commands: 'bg-blue-600',
+  queries: 'bg-green-600',
+  channels: 'bg-gray-600',
+  externalSystem: 'bg-pink-600',
+  actor: 'bg-yellow-500',
+  step: 'bg-gray-700',
+  data: 'bg-blue-600',
+  'data-products': 'bg-indigo-600',
+  domains: 'bg-yellow-600',
+  entities: 'bg-purple-600',
+};
+
+export const NODE_TYPE_LABELS: Record<string, string> = {
+  events: 'Event',
+  services: 'Service',
+  flows: 'Flow',
+  commands: 'Command',
+  queries: 'Query',
+  channels: 'Channel',
+  externalSystem: 'External System',
+  actor: 'Actor',
+  step: 'Step',
+  data: 'Data',
+  'data-products': 'Data Product',
+  domains: 'Domain',
+  entities: 'Entity',
+};
+
+/**
+ * Get connected nodes for a given center node
+ * Left nodes: incoming edges (they send TO this node)
+ * Right nodes: outgoing edges (this node sends TO them)
+ */
+export function getConnectedNodes(centerNodeId: string, nodes: Node[], edges: Edge[]): ConnectedNodes {
+  const leftIds = new Set<string>();
+  const rightIds = new Set<string>();
+
+  edges.forEach((edge) => {
+    if (edge.target === centerNodeId) {
+      leftIds.add(edge.source);
+    }
+    if (edge.source === centerNodeId) {
+      rightIds.add(edge.target);
+    }
+  });
+
+  return {
+    leftNodes: nodes.filter((n) => leftIds.has(n.id)),
+    rightNodes: nodes.filter((n) => rightIds.has(n.id)),
+  };
+}
+
+// Entity keys that follow the standard data structure pattern
+const ENTITY_KEYS = ['service', 'message', 'flow', 'channel', 'domain', 'entity', 'dataProduct'] as const;
+
+/**
+ * Extract display information from a ReactFlow node
+ */
+export function getNodeDisplayInfo(node: Node): NodeDisplayInfo {
+  const nodeType = node.type || 'unknown';
+  const data = node.data as any;
+
+  // Find the entity in data using standard keys
+  const entityKey = ENTITY_KEYS.find((key) => data[key]);
+  const entity = entityKey ? data[entityKey] : null;
+
+  const name = entity?.data?.name || entity?.id || data.label || data.name || node.id;
+  const version = entity?.data?.version || entity?.version || data.version || '';
+  const description = entity?.data?.summary || entity?.data?.description || data.summary || data.description || '';
+
+  return {
+    id: node.id,
+    name,
+    type: nodeType,
+    version,
+    description: description ? truncateDescription(description, 100) : undefined,
+  };
+}
+
+/**
+ * Truncate description to a max length
+ */
+function truncateDescription(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength).trim() + '...';
+}
+
+/**
+ * Get the color class for a node type
+ */
+export function getNodeColorClass(nodeType: string): string {
+  return NODE_COLOR_CLASSES[nodeType] || 'bg-gray-500';
+}
+
+/**
+ * Get the display label for a node type
+ */
+export function getNodeTypeLabel(nodeType: string): string {
+  return NODE_TYPE_LABELS[nodeType] || nodeType;
+}
+
+// Mapping from entity key to doc path
+const DOC_PATH_MAP: Record<string, string> = {
+  service: 'services',
+  flow: 'flows',
+  channel: 'channels',
+  domain: 'domains',
+  entity: 'entities',
+  dataProduct: 'data-products',
+};
+
+/**
+ * Get the documentation URL for a node
+ */
+export function getNodeDocUrl(node: Node): string | null {
+  const nodeType = node.type || 'unknown';
+  const data = node.data as any;
+
+  // Handle message type separately due to type mapping
+  if (data.message) {
+    const id = data.message.data?.id || data.message.id || '';
+    const version = data.message.data?.version || data.message.version || '';
+    const collectionType = nodeType === 'events' ? 'events' : nodeType === 'commands' ? 'commands' : 'queries';
+    return id && version ? `/docs/${collectionType}/${id}/${version}` : null;
+  }
+
+  // Handle data/container nodes with nested data.data structure
+  if (data.data && nodeType === 'data') {
+    const id = data.data.id || '';
+    const version = data.data.version || '';
+    return id && version ? `/docs/containers/${id}/${version}` : null;
+  }
+
+  // Handle standard entity types
+  for (const [key, path] of Object.entries(DOC_PATH_MAP)) {
+    if (data[key]) {
+      const id = data[key].data?.id || data[key].id || '';
+      const version = data[key].data?.version || data[key].version || '';
+      return id && version ? `/docs/${path}/${id}/${version}` : null;
+    }
+  }
+
+  return null;
+}

package/eventcatalog/src/components/MDX/NodeGraph/FocusModeModal.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { XIcon, FocusIcon } from 'lucide-react';
+import { ReactFlowProvider, type Node, type Edge, type NodeTypes, type EdgeTypes } from '@xyflow/react';
+import FocusModeContent from './FocusMode/FocusModeContent';
+import { getNodeDisplayInfo } from './FocusMode/utils';
+
+interface FocusModeModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialNodeId: string | null;
+  nodes: Node[];
+  edges: Edge[];
+  nodeTypes: NodeTypes;
+  edgeTypes: EdgeTypes;
+}
+
+const FocusModeModal: React.FC<FocusModeModalProps> = ({
+  isOpen,
+  onClose,
+  initialNodeId,
+  nodes,
+  edges,
+  nodeTypes,
+  edgeTypes,
+}) => {
+  const [centerNodeId, setCenterNodeId] = useState<string | null>(initialNodeId);
+
+  // Reset center node when modal opens with new initial node
+  useEffect(() => {
+    if (isOpen && initialNodeId) {
+      setCenterNodeId(initialNodeId);
+    }
+  }, [isOpen, initialNodeId]);
+
+  const handleSwitchCenter = useCallback((newCenterNodeId: string, _direction: 'left' | 'right') => {
+    setCenterNodeId(newCenterNodeId);
+  }, []);
+
+  // Get center node info for title
+  const centerNode = centerNodeId ? nodes.find((n) => n.id === centerNodeId) : null;
+  const centerNodeInfo = centerNode ? getNodeDisplayInfo(centerNode) : null;
+
+  if (!centerNodeId) {
+    return null;
+  }
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <Dialog.Portal container={typeof document !== 'undefined' ? document.body : undefined}>
+        <div className="fixed inset-0 z-[99999]" style={{ isolation: 'isolate' }}>
+          <Dialog.Overlay className="fixed inset-0 bg-black/70 data-[state=open]:animate-overlayShow" />
+          <Dialog.Content className="fixed inset-4 md:inset-8 lg:inset-12 rounded-lg bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] shadow-xl focus:outline-none data-[state=open]:animate-contentShow flex flex-col overflow-hidden">
+            {/* Header */}
+            <div className="flex items-center justify-between px-6 py-4 border-b border-[rgb(var(--ec-page-border))] flex-shrink-0">
+              <div className="flex items-center gap-3">
+                <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-[rgb(var(--ec-accent-subtle))]">
+                  <FocusIcon className="w-5 h-5 text-[rgb(var(--ec-accent))]" />
+                </div>
+                <div>
+                  <Dialog.Title className="text-lg font-semibold text-[rgb(var(--ec-page-text))]">Focus Mode</Dialog.Title>
+                  <Dialog.Description className="text-sm text-[rgb(var(--ec-page-text-muted))]">
+                    {centerNodeInfo
+                      ? `Exploring: ${centerNodeInfo.name} - Click on connected nodes to navigate`
+                      : 'Explore node connections'}
+                  </Dialog.Description>
+                </div>
+              </div>
+              <Dialog.Close asChild>
+                <button
+                  className="flex items-center justify-center w-10 h-10 rounded-lg text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover,var(--ec-page-border)/0.5))] transition-colors"
+                  aria-label="Close"
+                >
+                  <XIcon className="w-5 h-5" />
+                </button>
+              </Dialog.Close>
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-hidden">
+              <ReactFlowProvider>
+                <FocusModeContent
+                  centerNodeId={centerNodeId}
+                  nodes={nodes}
+                  edges={edges}
+                  nodeTypes={nodeTypes}
+                  edgeTypes={edgeTypes}
+                  onSwitchCenter={handleSwitchCenter}
+                />
+              </ReactFlowProvider>
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export default FocusModeModal;

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

@@ -54,6 +54,7 @@ import { useEventCatalogVisualiser } from 'src/hooks/eventcatalog-visualizer';
 import VisualiserSearch, { type VisualiserSearchRef } from './VisualiserSearch';
 import StepWalkthrough from './StepWalkthrough';
 import StudioModal from './StudioModal';
+import FocusModeModal from './FocusModeModal';
 import MermaidView from './MermaidView';
 import VisualizerDropdownContent from './VisualizerDropdownContent';
 import { convertToMermaid } from '@utils/node-graphs/export-mermaid';
@@ -165,6 +166,8 @@ const NodeGraphBuilder = ({
   const [isSavingLayout, setIsSavingLayout] = useState(false);
   const initialPositionsRef = useRef<Record<string, { x: number; y: number }>>({});
   // const [isStudioModalOpen, setIsStudioModalOpen] = useState(false);
+  const [focusModeOpen, setFocusModeOpen] = useState(false);
+  const [focusedNodeId, setFocusedNodeId] = useState<string | null>(null);
 
   // Check if there are channels to determine if we need the visualizer functionality
   const hasChannels = useMemo(() => initialNodes.some((node: any) => node.type === 'channels'), [initialNodes]);
@@ -251,50 +254,16 @@ const NodeGraphBuilder = ({
         return;
       }
 
-      resetNodesAndEdges();
+      // Disable focus mode for flow and entity visualizations
+      const isFlow = edges.some((edge: Edge) => edge.type === 'flow-edge');
+      const isEntityVisualizer = nodes.some((n: Node) => n.type === 'entities');
+      if (isFlow || isEntityVisualizer) return;
 
-      const connectedNodeIds = new Set<string>();
-      connectedNodeIds.add(node.id);
-
-      const updatedEdges = edges.map((edge) => {
-        if (edge.source === node.id || edge.target === node.id) {
-          connectedNodeIds.add(edge.source);
-          connectedNodeIds.add(edge.target);
-          return {
-            ...edge,
-            data: { ...edge.data, opacity: 1, animated: animateMessages },
-            style: { ...edge.style, opacity: 1 },
-            labelStyle: { ...edge.labelStyle, opacity: 1 },
-            animated: true,
-          };
-        }
-        return {
-          ...edge,
-          data: { ...edge.data, opacity: 0.1, animated: animateMessages },
-          style: { ...edge.style, opacity: 0.1 },
-          labelStyle: { ...edge.labelStyle, opacity: 0.1 },
-          animated: animateMessages,
-        };
-      });
-
-      const updatedNodes = nodes.map((n) => {
-        if (connectedNodeIds.has(n.id)) {
-          return { ...n, style: { ...n.style, opacity: 1 } };
-        }
-        return { ...n, style: { ...n.style, opacity: 0.1 } };
-      });
-
-      setNodes(updatedNodes);
-      setEdges(updatedEdges);
-
-      // Fit the clicked node and its connected nodes into view
-      fitView({
-        padding: 0.2,
-        duration: 800,
-        nodes: updatedNodes.filter((n) => connectedNodeIds.has(n.id)),
-      });
+      // Open focus mode modal
+      setFocusedNodeId(node.id);
+      setFocusModeOpen(true);
     },
-    [nodes, edges, setNodes, setEdges, resetNodesAndEdges, fitView]
+    [linksToVisualiser, edges, nodes]
   );
 
   const toggleAnimateMessages = () => {
@@ -1007,6 +976,15 @@ const NodeGraphBuilder = ({
         </ReactFlow>
       )}
       <StudioModal isOpen={isStudioModalOpen || false} onClose={() => setIsStudioModalOpen(false)} />
+      <FocusModeModal
+        isOpen={focusModeOpen}
+        onClose={() => setFocusModeOpen(false)}
+        initialNodeId={focusedNodeId}
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+      />
 
       {/* Share Link Modal */}
       {isShareModalOpen && (

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Entity.tsx

@@ -137,7 +137,10 @@ export default function EntityNode({ data, sourcePosition, targetPosition }: any
         </div>
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
-        <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
+        <ContextMenu.Content
+          className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200"
+          onClick={(e) => e.stopPropagation()}
+        >
           <ContextMenu.Item
             asChild
             className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/MessageContextMenu.tsx

@@ -22,7 +22,10 @@ export default function MessageContextMenu(data: Data) {
     <ContextMenu.Root>
       <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
       <ContextMenu.Portal>
-        <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
+        <ContextMenu.Content
+          className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200"
+          onClick={(e) => e.stopPropagation()}
+        >
           <ContextMenu.Item
             asChild
             className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Service.tsx

@@ -57,7 +57,10 @@ export default function ServiceNode(props: ServiceNode) {
         </div>
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
-        <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
+        <ContextMenu.Content
+          className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200"
+          onClick={(e) => e.stopPropagation()}
+        >
           <ContextMenu.Item
             asChild
             className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"

package/eventcatalog/src/layouts/Footer.astro

@@ -4,7 +4,10 @@ import { showEventCatalogBranding } from '@utils/feature';
 const { className } = Astro.props;
 ---
 
-<footer class={`relative py-4 space-y-8 border-t border-[rgb(var(--ec-page-border))] ${className}`}>
+<footer
+  transition:persist="site-footer"
+  class={`relative py-4 space-y-8 border-t border-[rgb(var(--ec-page-border))] ${className}`}
+>
   {
     showEventCatalogBranding() && (
       <div class="flex justify-between items-center py-8 text-[rgb(var(--ec-page-text-muted))] text-sm font-light">

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -277,7 +277,9 @@ const canPageBeEmbedded = isEmbedEnabled();
     {/* Load search data even when sidebar is hidden */}
     <SearchDataLoader />
     <main id="eventcatalog-application" class="relative">
-      <Header />
+      <div transition:persist="site-header">
+        <Header />
+      </div>
       <div class="flex">
         <aside class="flex" id="eventcatalog-vertical-nav">
           <div

package/eventcatalog/tailwind.config.mjs

@@ -44,10 +44,20 @@ export default {
           '0%': { transform: 'translateX(100%)' },
           '100%': { transform: 'translateX(-100%)' },
         },
+        overlayShow: {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        contentShow: {
+          from: { opacity: '0', transform: 'scale(0.96)' },
+          to: { opacity: '1', transform: 'scale(1)' },
+        },
       },
       animation: {
         'progress-bar': 'progress-bar 2s linear infinite',
         'progress-bar-reverse': 'progress-bar-reverse 2s linear infinite',
+        overlayShow: 'overlayShow 200ms ease-out',
+        contentShow: 'contentShow 200ms ease-out',
       },
     },
   },

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "publishConfig": {
     "access": "public"
   },