@eventcatalog/core 3.10.2 → 3.12.0

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

@@ -12,6 +12,7 @@ import {
   useEdgesState,
   type Edge,
   type Node,
+  type NodeChange,
   useReactFlow,
   getNodesBounds,
   getViewportForBounds,
@@ -53,11 +54,15 @@ 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';
 import { copyToClipboard } from '@utils/clipboard';
 
+// Minimum pixel change to detect layout modifications (avoids floating point comparison issues)
+const POSITION_CHANGE_THRESHOLD = 1;
+
 interface Props {
   nodes: any;
   edges: any;
@@ -78,6 +83,8 @@ interface Props {
   setIsStudioModalOpen?: (isOpen: boolean) => void;
   isChatEnabled?: boolean;
   maxTextSize?: number;
+  isDevMode?: boolean;
+  resourceKey?: string;
 }
 
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
@@ -101,6 +108,8 @@ const NodeGraphBuilder = ({
   setIsStudioModalOpen = () => {},
   isChatEnabled = false,
   maxTextSize,
+  isDevMode = false,
+  resourceKey,
 }: Props) => {
   const nodeTypes = useMemo(
     () =>
@@ -153,7 +162,12 @@ const NodeGraphBuilder = ({
   const [shareUrlCopySuccess, setShareUrlCopySuccess] = useState(false);
   const [isMermaidView, setIsMermaidView] = useState(false);
   const [showMinimap, setShowMinimap] = useState(false);
+  const [hasLayoutChanges, setHasLayoutChanges] = useState(false);
+  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]);
@@ -169,6 +183,49 @@ const NodeGraphBuilder = ({
   const reactFlowWrapperRef = useRef<HTMLDivElement>(null);
   const scrollableContainerRef = useRef<HTMLElement | null>(null);
 
+  // Store initial node positions for change detection (dev mode only)
+  useEffect(() => {
+    if (isDevMode && initialNodes.length > 0) {
+      const positions: Record<string, { x: number; y: number }> = {};
+      initialNodes.forEach((node: Node) => {
+        positions[node.id] = { x: node.position.x, y: node.position.y };
+      });
+      initialPositionsRef.current = positions;
+    }
+  }, [isDevMode, initialNodes]);
+
+  // Detect layout changes by comparing current positions to initial positions
+  const checkForLayoutChanges = useCallback(() => {
+    if (!isDevMode) return;
+    const initial = initialPositionsRef.current;
+    if (Object.keys(initial).length === 0) return;
+
+    const hasChanges = nodes.some((node) => {
+      const initialPos = initial[node.id];
+      return (
+        initialPos &&
+        (Math.abs(node.position.x - initialPos.x) > POSITION_CHANGE_THRESHOLD ||
+          Math.abs(node.position.y - initialPos.y) > POSITION_CHANGE_THRESHOLD)
+      );
+    });
+
+    setHasLayoutChanges(hasChanges);
+  }, [isDevMode, nodes]);
+
+  // Wrap onNodesChange to detect layout changes after node drag
+  const handleNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      onNodesChange(changes);
+      // Check for position changes after drag ends
+      const hasDragEnd = changes.some((change) => change.type === 'position' && !change.dragging);
+      if (hasDragEnd) {
+        // Use setTimeout to ensure state is updated
+        setTimeout(checkForLayoutChanges, 0);
+      }
+    },
+    [onNodesChange, checkForLayoutChanges]
+  );
+
   const resetNodesAndEdges = useCallback(() => {
     setNodes((nds) =>
       nds.map((node) => {
@@ -197,50 +254,16 @@ const NodeGraphBuilder = ({
         return;
       }
 
-      resetNodesAndEdges();
-
-      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);
+      // 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;
 
-      // 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 = () => {
@@ -397,6 +420,63 @@ const NodeGraphBuilder = ({
     window.dispatchEvent(new CustomEvent('eventcatalog:open-chat'));
   }, []);
 
+  // Layout persistence handlers (dev mode only)
+  const handleSaveLayout = useCallback(async (): Promise<boolean> => {
+    if (!resourceKey) return false;
+
+    const positions: Record<string, { x: number; y: number }> = {};
+    nodes.forEach((node) => {
+      positions[node.id] = {
+        x: node.position.x,
+        y: node.position.y,
+      };
+    });
+
+    try {
+      const response = await fetch('/api/dev/visualizer-layout/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ resourceKey, positions }),
+      });
+      const result = await response.json();
+      return result.success === true;
+    } catch {
+      return false;
+    }
+  }, [nodes, resourceKey]);
+
+  const handleResetLayout = useCallback(async (): Promise<boolean> => {
+    if (!resourceKey) return false;
+
+    try {
+      const response = await fetch('/api/dev/visualizer-layout/reset', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ resourceKey }),
+      });
+      const result = await response.json();
+      return result.success === true;
+    } catch {
+      return false;
+    }
+  }, [resourceKey]);
+
+  // Quick save handler for the change detection UI
+  const handleQuickSaveLayout = useCallback(async () => {
+    setIsSavingLayout(true);
+    const success = await handleSaveLayout();
+    setIsSavingLayout(false);
+    if (success) {
+      // Update initial positions to current positions after save
+      const positions: Record<string, { x: number; y: number }> = {};
+      nodes.forEach((node) => {
+        positions[node.id] = { x: node.position.x, y: node.position.y };
+      });
+      initialPositionsRef.current = positions;
+      setHasLayoutChanges(false);
+    }
+  }, [handleSaveLayout, nodes]);
+
   const handleCopyArchitectureCode = useCallback(async () => {
     await copyToClipboard(mermaidCode);
   }, [mermaidCode]);
@@ -692,6 +772,9 @@ const NodeGraphBuilder = ({
                       setIsShareModalOpen={setIsShareModalOpen}
                       toggleFullScreen={toggleFullScreen}
                       openStudioModal={openStudioModal}
+                      isDevMode={isDevMode}
+                      onSaveLayout={handleSaveLayout}
+                      onResetLayout={handleResetLayout}
                     />
                   </DropdownMenu.Content>
                 </DropdownMenu.Portal>
@@ -720,7 +803,7 @@ const NodeGraphBuilder = ({
           nodes={nodes}
           edges={edges}
           fitView
-          onNodesChange={onNodesChange}
+          onNodesChange={handleNodesChange}
           onEdgesChange={onEdgesChange}
           connectionLineType={ConnectionLineType.SmoothStep}
           nodeOrigin={[0.1, 0.1]}
@@ -772,6 +855,9 @@ const NodeGraphBuilder = ({
                         setIsShareModalOpen={setIsShareModalOpen}
                         toggleFullScreen={toggleFullScreen}
                         openStudioModal={openStudioModal}
+                        isDevMode={isDevMode}
+                        onSaveLayout={handleSaveLayout}
+                        onResetLayout={handleResetLayout}
                       />
                     </DropdownMenu.Content>
                   </DropdownMenu.Portal>
@@ -845,6 +931,28 @@ const NodeGraphBuilder = ({
               />
             </Panel>
           )}
+          {/* Dev Mode: Layout change indicator */}
+          {isDevMode && hasLayoutChanges && (
+            <Panel
+              position="bottom-left"
+              style={
+                isFlowVisualization && showFlowWalkthrough
+                  ? { marginBottom: '20px', marginLeft: '410px' }
+                  : { marginLeft: '60px' }
+              }
+            >
+              <div className="bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md px-3 py-2 flex items-center gap-3">
+                <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">Layout changed</span>
+                <button
+                  onClick={handleQuickSaveLayout}
+                  disabled={isSavingLayout}
+                  className="text-xs font-medium text-[rgb(var(--ec-accent-text))] bg-[rgb(var(--ec-accent-subtle))] hover:bg-[rgb(var(--ec-accent-subtle)/0.7)] px-2 py-1 rounded transition-colors disabled:opacity-50"
+                >
+                  {isSavingLayout ? 'Saving...' : 'Save'}
+                </button>
+              </div>
+            </Panel>
+          )}
           {includeKey && (
             <Panel position="bottom-right" style={showMinimap ? { marginRight: '230px' } : undefined}>
               <div className=" bg-white font-light px-4 text-[12px] shadow-md py-1 rounded-md">
@@ -868,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 && (
@@ -952,6 +1069,8 @@ interface NodeGraphProps {
   designId?: string;
   isChatEnabled?: boolean;
   maxTextSize?: number;
+  isDevMode?: boolean;
+  resourceKey?: string;
 }
 
 const NodeGraph = ({
@@ -974,6 +1093,8 @@ const NodeGraph = ({
   designId,
   isChatEnabled = false,
   maxTextSize,
+  isDevMode = false,
+  resourceKey,
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
   const [showFooter, setShowFooter] = useState(true);
@@ -1021,6 +1142,8 @@ const NodeGraph = ({
             setIsStudioModalOpen={setIsStudioModalOpen}
             isChatEnabled={isChatEnabled}
             maxTextSize={maxTextSize}
+            isDevMode={isDevMode}
+            resourceKey={resourceKey}
           />
 
           {showFooter && (

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/components/MDX/NodeGraph/VisualizerDropdownContent.tsx

@@ -1,6 +1,20 @@
-import React, { type RefObject } from 'react';
+import React, { type RefObject, useState } from 'react';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { Code, Share2, Search, Grid3x3, Maximize2, Map, Sparkles, Zap, EyeOff, ExternalLink } from 'lucide-react';
+import {
+  Code,
+  Share2,
+  Search,
+  Grid3x3,
+  Maximize2,
+  Map,
+  Sparkles,
+  Zap,
+  EyeOff,
+  ExternalLink,
+  Save,
+  RotateCcw,
+  Loader2,
+} from 'lucide-react';
 import { DocumentArrowDownIcon, PresentationChartLineIcon } from '@heroicons/react/24/outline';
 import type { VisualiserSearchRef } from './VisualiserSearch';
 
@@ -23,6 +37,9 @@ interface VisualizerDropdownContentProps {
   setIsShareModalOpen: (value: boolean) => void;
   toggleFullScreen: () => void;
   openStudioModal: () => void;
+  isDevMode?: boolean;
+  onSaveLayout?: () => Promise<boolean>;
+  onResetLayout?: () => Promise<boolean>;
 }
 
 const VisualizerDropdownContent: React.FC<VisualizerDropdownContentProps> = ({
@@ -44,7 +61,33 @@ const VisualizerDropdownContent: React.FC<VisualizerDropdownContentProps> = ({
   setIsShareModalOpen,
   toggleFullScreen,
   openStudioModal,
+  isDevMode = false,
+  onSaveLayout,
+  onResetLayout,
 }) => {
+  const [layoutStatus, setLayoutStatus] = useState<'idle' | 'saving' | 'resetting'>('idle');
+
+  const handleSaveLayout = async () => {
+    if (!onSaveLayout) return;
+    setLayoutStatus('saving');
+    await onSaveLayout();
+    setLayoutStatus('idle');
+  };
+
+  const handleResetLayout = async () => {
+    if (!onResetLayout) return;
+    if (!window.confirm('Reset layout to auto-positioning? This will delete your saved layout.')) {
+      return;
+    }
+    setLayoutStatus('resetting');
+    const success = await onResetLayout();
+    if (success) {
+      window.location.reload();
+    } else {
+      setLayoutStatus('idle');
+    }
+  };
+
   return (
     <>
       {/* Canvas Settings Submenu */}
@@ -157,6 +200,52 @@ const VisualizerDropdownContent: React.FC<VisualizerDropdownContentProps> = ({
         </DropdownMenu.Portal>
       </DropdownMenu.Sub>
 
+      {/* Dev Mode: Layout Submenu */}
+      {isDevMode && onSaveLayout && (
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger className="flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2 outline-none">
+            <Save className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+            <span className="flex-1 font-normal">Layout</span>
+            <span className="text-[10px] text-amber-600 font-medium">DEV</span>
+            <svg className="w-3 h-3 text-[rgb(var(--ec-page-text-muted))]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </DropdownMenu.SubTrigger>
+          <DropdownMenu.Portal>
+            <DropdownMenu.SubContent
+              className="min-w-[180px] bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-xl border border-[rgb(var(--ec-page-border))] py-1.5 z-[60]"
+              sideOffset={8}
+              alignOffset={-8}
+            >
+              <DropdownMenu.Item
+                onClick={handleSaveLayout}
+                disabled={layoutStatus !== 'idle'}
+                className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {layoutStatus === 'saving' ? (
+                  <Loader2 className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" />
+                ) : (
+                  <Save className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+                )}
+                <span className="flex-1 font-normal">{layoutStatus === 'saving' ? 'Saving...' : 'Save Layout'}</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                onClick={handleResetLayout}
+                disabled={layoutStatus !== 'idle'}
+                className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {layoutStatus === 'resetting' ? (
+                  <Loader2 className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" />
+                ) : (
+                  <RotateCcw className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+                )}
+                <span className="flex-1 font-normal">{layoutStatus === 'resetting' ? 'Resetting...' : 'Reset Layout'}</span>
+              </DropdownMenu.Item>
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Portal>
+        </DropdownMenu.Sub>
+      )}
+
       {/* Ask AI */}
       {isChatEnabled && (
         <>

package/eventcatalog/src/enterprise/visualizer-layout/reset.ts

@@ -0,0 +1,45 @@
+import type { APIRoute } from 'astro';
+import fs from 'node:fs';
+import { getLayoutFilePath } from '@utils/node-graphs/layout-persistence';
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const body = await request.json();
+    const { resourceKey } = body;
+
+    // Validate input
+    if (!resourceKey) {
+      return new Response(JSON.stringify({ error: 'Missing required field: resourceKey' }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    const filePath = getLayoutFilePath(resourceKey);
+
+    // Check if file exists
+    try {
+      await fs.promises.access(filePath);
+    } catch {
+      // File doesn't exist, nothing to delete
+      return new Response(JSON.stringify({ success: true, message: 'No saved layout to reset' }), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    // Delete the layout file
+    await fs.promises.unlink(filePath);
+
+    return new Response(JSON.stringify({ success: true, message: 'Layout reset successfully' }), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    return new Response(JSON.stringify({ error: `Failed to reset layout: ${message}` }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+};
+
+export const prerender = false;

package/eventcatalog/src/enterprise/visualizer-layout/save.ts

@@ -0,0 +1,57 @@
+import type { APIRoute } from 'astro';
+import fs from 'node:fs';
+import path from 'node:path';
+import { getLayoutFilePath, type SavedLayout } from '@utils/node-graphs/layout-persistence';
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const body = await request.json();
+    const { resourceKey, positions } = body;
+
+    // Validate input
+    if (!resourceKey || !positions) {
+      return new Response(JSON.stringify({ error: 'Missing required fields: resourceKey and positions' }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    // Validate resourceKey doesn't contain path traversal
+    if (resourceKey.includes('..') || resourceKey.includes('~')) {
+      return new Response(JSON.stringify({ error: 'Invalid resourceKey' }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    // Build file path from resource key using shared utility
+    const filePath = getLayoutFilePath(resourceKey);
+
+    // Create directory structure if needed
+    const fileDir = path.dirname(filePath);
+    await fs.promises.mkdir(fileDir, { recursive: true });
+
+    // Build layout data
+    const layoutData: SavedLayout = {
+      version: 1,
+      savedAt: new Date().toISOString(),
+      resourceKey,
+      positions,
+    };
+
+    // Write file with pretty formatting
+    await fs.promises.writeFile(filePath, JSON.stringify(layoutData, null, 2));
+
+    return new Response(JSON.stringify({ success: true, filePath }), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    return new Response(JSON.stringify({ error: `Failed to save layout: ${message}` }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+};
+
+export const prerender = false;

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/src/utils/feature.ts

@@ -71,3 +71,5 @@ export const isCustomStylesEnabled = () => {
 export const isDiagramComparisonEnabled = () => isEventCatalogScaleEnabled();
 
 export const isEventCatalogMCPEnabled = () => isEventCatalogScaleEnabled() && isSSR();
+
+export const isDevMode = () => process.env.EVENTCATALOG_DEV_MODE === 'true';