@eventcatalog/core 3.13.0-beta.2 → 3.14.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.13.0-beta.2";
+var version = "3.14.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-GC6XBLGZ.js";
-import "../chunk-XIZQ27W3.js";
+} from "../chunk-SJ5OPJEM.js";
+import "../chunk-2OZIUQR5.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.13.0-beta.2";
+var version = "3.14.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-QCHSOWJP.js";
-import "../chunk-GC6XBLGZ.js";
+} from "../chunk-KZCWZ5PZ.js";
+import "../chunk-SJ5OPJEM.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-XIZQ27W3.js";
+import "../chunk-2OZIUQR5.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/catalog-to-astro-content-directory.cjs

@@ -34,7 +34,7 @@ __export(catalog_to_astro_content_directory_exports, {
 });
 module.exports = __toCommonJS(catalog_to_astro_content_directory_exports);
 
-// ../../node_modules/.pnpm/tsup@8.5.0_jiti@1.21.7_postcss@8.5.6_typescript@5.9.3_yaml@2.8.1/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.5.0_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3_yaml@2.8.1/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
 var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 

package/dist/{chunk-XIZQ27W3.js → chunk-2OZIUQR5.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "3.13.0-beta.2";
+var version = "3.14.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-PBMJ6OIP.js → chunk-BWF7CUGM.js}

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

package/dist/{chunk-QCHSOWJP.js → chunk-KZCWZ5PZ.js}

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

package/dist/{chunk-VQJRAI3N.js → chunk-Q23QNBZG.js}

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

package/dist/{chunk-GC6XBLGZ.js → chunk-SJ5OPJEM.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-XIZQ27W3.js";
+} from "./chunk-2OZIUQR5.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -22,7 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@8.5.0_jiti@1.21.7_postcss@8.5.6_typescript@5.9.3_yaml@2.8.1/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.5.0_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3_yaml@2.8.1/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
 var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 
@@ -30,6 +30,7 @@ var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 var import_commander = require("commander");
 var import_node_child_process = require("child_process");
 var import_node_path7 = require("path");
+var import_node_http = __toESM(require("http"), 1);
 var import_fs2 = __toESM(require("fs"), 1);
 var import_node_path8 = __toESM(require("path"), 1);
 var import_node_url = require("url");
@@ -109,7 +110,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.13.0-beta.2";
+var version = "3.14.0";
 
 // src/constants.ts
 var VERSION = version;
@@ -710,6 +711,56 @@ var ensureDir = (dir2) => {
     import_fs2.default.mkdirSync(dir2);
   }
 };
+var resolveDevPort = async ({ projectDir }) => {
+  try {
+    const config = await getEventCatalogConfigFile(projectDir);
+    const fromConfig = Number(config?.port);
+    if (Number.isFinite(fromConfig) && fromConfig > 0) return fromConfig;
+  } catch (error) {
+  }
+  return 3e3;
+};
+var startDevPrewarm = ({
+  port = 3e3,
+  paths = ["/ping", "/"],
+  retries = 80,
+  intervalMs = 250,
+  initialDelayMs = 500
+}) => {
+  let attempt = 0;
+  const hit = (requestPath) => new Promise((resolve2) => {
+    const req = import_node_http.default.get(
+      {
+        hostname: "127.0.0.1",
+        port,
+        path: requestPath,
+        timeout: 1200
+      },
+      (res) => {
+        res.resume();
+        resolve2(true);
+      }
+    );
+    req.on("error", () => resolve2(false));
+    req.on("timeout", () => {
+      req.destroy();
+      resolve2(false);
+    });
+  });
+  const tick = async () => {
+    attempt += 1;
+    for (const requestPath of paths) {
+      const ok = await hit(requestPath);
+      if (ok) {
+        return;
+      }
+    }
+    if (attempt < retries) {
+      setTimeout(tick, intervalMs);
+    }
+  };
+  setTimeout(tick, initialDelayMs);
+};
 var copyCore = () => {
   ensureDir(core);
   if (eventCatalogDir === core) {
@@ -772,7 +823,7 @@ Run npm i @eventcatalog/core to update`;
     );
   }
 };
-program.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").option("--force-recreate", "Recreate the eventcatalog-core directory", false).action(async (options, command) => {
+program.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").option("--force-recreate", "Recreate the eventcatalog-core directory", false).option("--no-prewarm", "Disable automatic dev prewarm request").action(async (options, command) => {
   logger.welcome();
   logger.info("Setting up EventCatalog...", "eventcatalog");
   const isServer = await isOutputServer();
@@ -801,11 +852,22 @@ program.command("dev").description("Run development server of EventCatalog").opt
   let watchUnsub;
   try {
     watchUnsub = await watch(dir, core);
+    const args = command.args.join(" ").trim();
+    if (options.prewarm) {
+      const prewarmPort = await resolveDevPort({
+        projectDir: dir
+      });
+      startDevPrewarm({
+        port: prewarmPort,
+        paths: ["/ping", "/"]
+      });
+    }
+    const astroCommand = process.platform === "win32" ? `npx astro dev ${args} 2>&1 | findstr /V /C:"[glob-loader]" /C:"The collection" /C:"[router]"` : `npx astro dev ${args} 2>&1 | grep -v -e "\\[glob-loader\\]" -e "The collection.*does not exist" -e "\\[router\\]"`;
     const { result } = (0, import_concurrently.default)(
       [
         {
           name: "astro",
-          command: process.platform === "win32" ? `npx astro dev ${command.args.join(" ").trim()} 2>&1 | findstr /V /C:"[glob-loader]" /C:"The collection" /C:"[router]"` : `npx astro dev ${command.args.join(" ").trim()} 2>&1 | grep -v -e "\\[glob-loader\\]" -e "The collection.*does not exist" -e "\\[router\\]"`,
+          command: astroCommand,
           cwd: core,
           env: {
             PROJECT_DIR: dir,

package/dist/eventcatalog.config.d.cts

@@ -82,6 +82,7 @@ interface Config {
     };
     asyncAPI?: {
         renderParsedSchemas?: boolean;
+        allowAnyEnvInSpecHeaders?: boolean;
     };
     mdxOptimize?: boolean;
     compress?: boolean;
@@ -124,7 +125,7 @@ interface Config {
         /**
          * Enable or disable the /api/catalog endpoint that dumps the entire catalog as JSON.
          * Disabling this can significantly reduce memory usage during builds for large catalogs (1000+ files).
-         * @default true
+         * @default false
          */
         fullCatalogAPIEnabled?: boolean;
     };

package/dist/eventcatalog.config.d.ts

@@ -82,6 +82,7 @@ interface Config {
     };
     asyncAPI?: {
         renderParsedSchemas?: boolean;
+        allowAnyEnvInSpecHeaders?: boolean;
     };
     mdxOptimize?: boolean;
     compress?: boolean;
@@ -124,7 +125,7 @@ interface Config {
         /**
          * Enable or disable the /api/catalog endpoint that dumps the entire catalog as JSON.
          * Disabling this can significantly reduce memory usage during builds for large catalogs (1000+ files).
-         * @default true
+         * @default false
          */
         fullCatalogAPIEnabled?: boolean;
     };

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-QCHSOWJP.js";
-import "./chunk-GC6XBLGZ.js";
+} from "./chunk-KZCWZ5PZ.js";
+import "./chunk-SJ5OPJEM.js";
 import "./chunk-4UVFXLPI.js";
 import {
   runMigrations
@@ -22,14 +22,15 @@ import {
 } from "./chunk-5VBIXL6C.js";
 import {
   generate
-} from "./chunk-PBMJ6OIP.js";
+} from "./chunk-BWF7CUGM.js";
 import {
   logger
-} from "./chunk-VQJRAI3N.js";
+} from "./chunk-Q23QNBZG.js";
 import {
   VERSION
-} from "./chunk-XIZQ27W3.js";
+} from "./chunk-2OZIUQR5.js";
 import {
+  getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile
 } from "./chunk-UPONRQSN.js";
 
@@ -37,6 +38,7 @@ import {
 import { Command } from "commander";
 import { execSync } from "child_process";
 import { join } from "path";
+import http from "http";
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
@@ -65,6 +67,56 @@ var ensureDir = (dir2) => {
     fs.mkdirSync(dir2);
   }
 };
+var resolveDevPort = async ({ projectDir }) => {
+  try {
+    const config = await getEventCatalogConfigFile(projectDir);
+    const fromConfig = Number(config?.port);
+    if (Number.isFinite(fromConfig) && fromConfig > 0) return fromConfig;
+  } catch (error) {
+  }
+  return 3e3;
+};
+var startDevPrewarm = ({
+  port = 3e3,
+  paths = ["/ping", "/"],
+  retries = 80,
+  intervalMs = 250,
+  initialDelayMs = 500
+}) => {
+  let attempt = 0;
+  const hit = (requestPath) => new Promise((resolve) => {
+    const req = http.get(
+      {
+        hostname: "127.0.0.1",
+        port,
+        path: requestPath,
+        timeout: 1200
+      },
+      (res) => {
+        res.resume();
+        resolve(true);
+      }
+    );
+    req.on("error", () => resolve(false));
+    req.on("timeout", () => {
+      req.destroy();
+      resolve(false);
+    });
+  });
+  const tick = async () => {
+    attempt += 1;
+    for (const requestPath of paths) {
+      const ok = await hit(requestPath);
+      if (ok) {
+        return;
+      }
+    }
+    if (attempt < retries) {
+      setTimeout(tick, intervalMs);
+    }
+  };
+  setTimeout(tick, initialDelayMs);
+};
 var copyCore = () => {
   ensureDir(core);
   if (eventCatalogDir === core) {
@@ -127,7 +179,7 @@ Run npm i @eventcatalog/core to update`;
     );
   }
 };
-program.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").option("--force-recreate", "Recreate the eventcatalog-core directory", false).action(async (options, command) => {
+program.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").option("--force-recreate", "Recreate the eventcatalog-core directory", false).option("--no-prewarm", "Disable automatic dev prewarm request").action(async (options, command) => {
   logger.welcome();
   logger.info("Setting up EventCatalog...", "eventcatalog");
   const isServer = await isOutputServer();
@@ -156,11 +208,22 @@ program.command("dev").description("Run development server of EventCatalog").opt
   let watchUnsub;
   try {
     watchUnsub = await watch(dir, core);
+    const args = command.args.join(" ").trim();
+    if (options.prewarm) {
+      const prewarmPort = await resolveDevPort({
+        projectDir: dir
+      });
+      startDevPrewarm({
+        port: prewarmPort,
+        paths: ["/ping", "/"]
+      });
+    }
+    const astroCommand = process.platform === "win32" ? `npx astro dev ${args} 2>&1 | findstr /V /C:"[glob-loader]" /C:"The collection" /C:"[router]"` : `npx astro dev ${args} 2>&1 | grep -v -e "\\[glob-loader\\]" -e "The collection.*does not exist" -e "\\[router\\]"`;
     const { result } = concurrently(
       [
         {
           name: "astro",
-          command: process.platform === "win32" ? `npx astro dev ${command.args.join(" ").trim()} 2>&1 | findstr /V /C:"[glob-loader]" /C:"The collection" /C:"[router]"` : `npx astro dev ${command.args.join(" ").trim()} 2>&1 | grep -v -e "\\[glob-loader\\]" -e "The collection.*does not exist" -e "\\[router\\]"`,
+          command: astroCommand,
           cwd: core,
           env: {
             PROJECT_DIR: dir,

package/dist/generate.cjs

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

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-PBMJ6OIP.js";
-import "./chunk-VQJRAI3N.js";
-import "./chunk-XIZQ27W3.js";
+} from "./chunk-BWF7CUGM.js";
+import "./chunk-Q23QNBZG.js";
+import "./chunk-2OZIUQR5.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.13.0-beta.2";
+var version = "3.14.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-VQJRAI3N.js";
-import "../chunk-XIZQ27W3.js";
+} from "../chunk-Q23QNBZG.js";
+import "../chunk-2OZIUQR5.js";
 export {
   logger
 };

package/eventcatalog/integrations/eventcatalog-features.ts

@@ -6,6 +6,7 @@ import {
   isEventCatalogScaleEnabled,
   isEventCatalogStarterEnabled,
   isEventCatalogMCPEnabled,
+  isFullCatalogAPIEnabled,
   isDevMode,
 } from '../src/utils/feature';
 
@@ -74,6 +75,14 @@ export default function eventCatalogIntegration(): AstroIntegration {
           });
         }
 
+        // Full catalog API route (opt-in)
+        if (isFullCatalogAPIEnabled()) {
+          params.injectRoute({
+            pattern: '/api/catalog',
+            entrypoint: path.join(catalogDirectory, 'src/enterprise/api/catalog.ts'),
+          });
+        }
+
         // Dev-only routes for visualizer layout persistence
         if (isDevMode()) {
           params.injectRoute({

package/eventcatalog/src/components/Header.astro

@@ -48,7 +48,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
         <div class="flex-grow max-w-xl">
           <Search />
         </div>
-        {isEventCatalogChatEnabled() && <ChatPanelButton client:load />}
+        {isEventCatalogChatEnabled() && <ChatPanelButton client:idle />}
       </div>
 
       <div class="hidden md:block w-3/12">
@@ -56,9 +56,9 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
           session ? (
             <div class="flex items-center space-x-4 justify-end pr-2">
               {catalog.environments && catalog.environments.length > 0 && (
-                <EnvironmentDropdown environments={catalog.environments} client:load />
+                <EnvironmentDropdown environments={catalog.environments} client:idle />
               )}
-              <ThemeToggle client:load />
+              <ThemeToggle client:idle />
               <div class="relative">
                 <button
                   id="profile-menu-button"
@@ -110,7 +110,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
             <>
               <div class="flex items-center space-x-4 justify-end pr-2">
                 {catalog.environments && catalog.environments.length > 0 && (
-                  <EnvironmentDropdown environments={catalog.environments} client:load />
+                  <EnvironmentDropdown environments={catalog.environments} client:idle />
                 )}
                 {isAuthEnabled() && (
                   <button
@@ -120,7 +120,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                     Sign In
                   </button>
                 )}
-                <ThemeToggle client:load />
+                <ThemeToggle client:idle />
                 {showEventCatalogBranding() && (
                   <ul class="flex space-x-4">
                     <li>

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

@@ -8,11 +8,12 @@
  * - URL building with Astro's URL utilities
  */
 
-import { useCallback } from 'react';
-import { NodeGraph } from '@eventcatalog/visualiser';
+import { useCallback, lazy, Suspense } from 'react';
 import '@eventcatalog/visualiser/styles.css';
 import type { Node, Edge } from '@xyflow/react';
 
+const NodeGraph = lazy(() => import('@eventcatalog/visualiser').then((module) => ({ default: module.NodeGraph })));
+
 interface AstroNodeGraphProps {
   id: string;
   nodes: Node[];
@@ -89,15 +90,17 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: Astro
   }, []);
 
   return (
-    <NodeGraph
-      {...otherProps}
-      resourceKey={resourceKey}
-      isDevMode={isDevMode}
-      onNavigate={handleNavigate}
-      onBuildUrl={handleBuildUrl}
-      onSaveLayout={handleSaveLayout}
-      onResetLayout={handleResetLayout}
-    />
+    <Suspense fallback={<div>Loading graph...</div>}>
+      <NodeGraph
+        {...otherProps}
+        resourceKey={resourceKey}
+        isDevMode={isDevMode}
+        onNavigate={handleNavigate}
+        onBuildUrl={handleBuildUrl}
+        onSaveLayout={handleSaveLayout}
+        onResetLayout={handleResetLayout}
+      />
+    </Suspense>
   );
 };
 

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

@@ -1,7 +1,7 @@
 const NodeGraphPortal = (props: any) => {
   return (
     <div
-      className="h-[30em] my-6 mb-12 w-full relative border border-gray-200 rounded-md"
+      className="h-[30em] my-6 mb-12 w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
       id={`${props.id}-portal`}
       style={{
         maxHeight: props.maxHeight ? `${props.maxHeight}em` : `30em`,

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

@@ -3,6 +3,7 @@ import jsonpath from 'jsonpath';
 import JSONSchemaViewer from '@components/SchemaExplorer/JSONSchemaViewer';
 import { Code } from 'astro-expressive-code/components';
 import { isPrivateRemoteSchemaEnabled } from '@utils/feature';
+import { resolveTemplateVariables } from '@utils/remote-file';
 
 const {
   url,
@@ -14,18 +15,6 @@ const {
   ...props
 } = Astro.props;
 
-function resolveTemplates(input: any): any {
-  if (typeof input === 'string') {
-    return input.replace(/\$\{(\w+)\}/g, (_, varName) => import.meta.env[varName] || '');
-  }
-
-  if (typeof input === 'object' && input !== null) {
-    return Object.fromEntries(Object.entries(input).map(([k, v]) => [k, resolveTemplates(v)]));
-  }
-
-  return input;
-}
-
 function isValidJSON(str: string): boolean {
   try {
     JSON.parse(str);
@@ -69,8 +58,8 @@ function extractWithJSONPath(data: any, path: string): any {
   }
 }
 
-const resolvedUrl = resolveTemplates(url);
-const resolvedHeaders = isPrivateRemoteSchemaEnabled() ? resolveTemplates(headers) : {};
+const resolvedUrl = resolveTemplateVariables(url);
+const resolvedHeaders = isPrivateRemoteSchemaEnabled() ? resolveTemplateVariables(headers) : {};
 
 let content = '';
 let processedData: any = null;
@@ -86,8 +75,8 @@ if (Object.keys(headers).length > 0 && !isPrivateRemoteSchemaEnabled()) {
 }
 
 try {
-  const response = await fetch(resolvedUrl, {
-    headers: resolvedHeaders,
+  const response = await fetch(String(resolvedUrl), {
+    headers: resolvedHeaders as HeadersInit,
   });
 
   if (!response.ok) {

package/eventcatalog/src/components/Search/Search.astro

@@ -20,7 +20,7 @@ import SearchModal from './SearchModal.tsx';
   </div>
 </div>
 
-<SearchModal client:only="react" />
+<SearchModal client:idle />
 
 <script>
   // Create a global state for the search modal

package/eventcatalog/src/components/Search/SearchDataLoader.astro

@@ -20,18 +20,30 @@
   if (!sidebarStore.get()) {
     const apiUrl = buildUrl('/api/sidebar-data.json', true);
 
-    fetch(apiUrl)
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`Failed to fetch sidebar data: ${response.status}`);
-        }
-        return response.json();
-      })
-      .then((data) => {
-        setSidebarData(data);
-      })
-      .catch((error) => {
-        console.error('Error loading sidebar data:', error);
-      });
+    const loadSidebarData = () => {
+      // Double-check cache in case another component loaded data while waiting for idle
+      if (sidebarStore.get()) return;
+
+      fetch(apiUrl)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`Failed to fetch sidebar data: ${response.status}`);
+          }
+          return response.json();
+        })
+        .then((data) => {
+          setSidebarData(data);
+        })
+        .catch((error) => {
+          console.error('Error loading sidebar data:', error);
+        });
+    };
+
+    // Defer non-critical sidebar payload fetch until browser is idle
+    if (typeof window.requestIdleCallback === 'function') {
+      window.requestIdleCallback(loadSidebarData, { timeout: 1200 });
+    } else {
+      setTimeout(loadSidebarData, 300);
+    }
   }
 </script>