@eventcatalog/core 4.2.4 → 4.2.5

package/dist/analytics/analytics.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.2.4";
+var version = "4.2.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-BXEGST4Z.js";
-import "../chunk-J2MVHSKA.js";
+} from "../chunk-7JCTB2SM.js";
+import "../chunk-EU4BANDV.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -140,7 +140,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.2.4";
+var version = "4.2.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-GCEFDCZB.js";
+} from "../chunk-R5HOP2PF.js";
 import "../chunk-K2XIENVT.js";
-import "../chunk-BXEGST4Z.js";
-import "../chunk-J2MVHSKA.js";
+import "../chunk-7JCTB2SM.js";
+import "../chunk-EU4BANDV.js";
 import "../chunk-6QENHZZP.js";
 export {
   log_build_default as default

package/dist/{chunk-BXEGST4Z.js → chunk-7JCTB2SM.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-J2MVHSKA.js";
+} from "./chunk-EU4BANDV.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/{chunk-J2MVHSKA.js → chunk-EU4BANDV.js}

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

package/dist/{chunk-WVIOZDVK.js → chunk-FXSZNWHH.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-5MIGBCON.js";
+} from "./chunk-JB6RZSTL.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-5MIGBCON.js → chunk-JB6RZSTL.js}

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

package/dist/{chunk-GCEFDCZB.js → chunk-R5HOP2PF.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-K2XIENVT.js";
 import {
   raiseEvent
-} from "./chunk-BXEGST4Z.js";
+} from "./chunk-7JCTB2SM.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/docs/development/deployment/build-ssr-mode.md

@@ -51,8 +51,8 @@ The easiest way to do this is to use [a docker container](/docs/development/depl
 
 ## Loading indicator
 
-<AddedIn version="4.2.4" />
+<AddedIn version="4.2.5" />
 
 Server-side rendering means a page's render time depends on your server, so navigations can occasionally take longer than a static build.
 
-EventCatalog shows a thin progress bar at the top of the page during navigations that take longer than 200ms, so the catalog never looks unresponsive. It works automatically and needs no configuration.
+EventCatalog shows a thin progress bar at the top of the page during navigations that take longer than 200ms, so the catalog never looks unresponsive. It works automatically and needs no configuration.

package/dist/eventcatalog.cjs

@@ -144,7 +144,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.2.4";
+var version = "4.2.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -1,6 +1,6 @@
 import {
   log_build_default
-} from "./chunk-GCEFDCZB.js";
+} from "./chunk-R5HOP2PF.js";
 import "./chunk-K2XIENVT.js";
 import {
   runMigrations
@@ -14,10 +14,10 @@ import {
 } from "./chunk-B7HCX5HM.js";
 import {
   generate
-} from "./chunk-WVIOZDVK.js";
+} from "./chunk-FXSZNWHH.js";
 import {
   logger
-} from "./chunk-5MIGBCON.js";
+} from "./chunk-JB6RZSTL.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-LHR4G2UO.js";
@@ -27,7 +27,7 @@ import {
 import {
   watch
 } from "./chunk-CAJUIMDJ.js";
-import "./chunk-BXEGST4Z.js";
+import "./chunk-7JCTB2SM.js";
 import {
   createAstroDevLineFilter,
   createAstroLineFilter
@@ -38,7 +38,7 @@ import {
 import "./chunk-W5JQON7Z.js";
 import {
   VERSION
-} from "./chunk-J2MVHSKA.js";
+} from "./chunk-EU4BANDV.js";
 import {
   linkCoreNodeModules,
   resolveInstalledCoreNodeModules

package/dist/generate.cjs

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

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-WVIOZDVK.js";
-import "./chunk-5MIGBCON.js";
-import "./chunk-J2MVHSKA.js";
+} from "./chunk-FXSZNWHH.js";
+import "./chunk-JB6RZSTL.js";
+import "./chunk-EU4BANDV.js";
 import "./chunk-6QENHZZP.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 = "4.2.4";
+var version = "4.2.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-5MIGBCON.js";
-import "../chunk-J2MVHSKA.js";
+} from "../chunk-JB6RZSTL.js";
+import "../chunk-EU4BANDV.js";
 export {
   logger
 };

package/eventcatalog/src/components/NavigationProgress.astro

@@ -0,0 +1,64 @@
+<div id="navigation-progress-container" transition:persist="navigation-progress">
+  <div id="navigation-progress" role="progressbar" aria-label="Loading page" aria-hidden="true" data-visible="false">
+    <div class="navigation-progress__bar"></div>
+  </div>
+  <span id="navigation-progress-status" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></span>
+</div>
+
+<style>
+  #navigation-progress {
+    position: fixed;
+    inset: 0 0 auto;
+    z-index: 100;
+    height: 3px;
+    overflow: hidden;
+    pointer-events: none;
+    background: rgb(var(--ec-accent) / 0.14);
+    opacity: 0;
+    transition: opacity 120ms ease;
+  }
+
+  #navigation-progress[data-visible='true'] {
+    opacity: 1;
+  }
+
+  .navigation-progress__bar {
+    width: 35%;
+    height: 100%;
+    background: rgb(var(--ec-accent));
+    box-shadow: 0 0 10px rgb(var(--ec-accent) / 0.55);
+    animation: navigation-progress 1.1s ease-in-out infinite;
+  }
+
+  :global([data-navigation-pending='true']) {
+    cursor: progress;
+  }
+
+  @keyframes navigation-progress {
+    from {
+      transform: translateX(-110%);
+    }
+
+    to {
+      transform: translateX(395%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    #navigation-progress {
+      transition: none;
+    }
+
+    .navigation-progress__bar {
+      width: 100%;
+      animation: none;
+      opacity: 0.75;
+    }
+  }
+</style>
+
+<script>
+  import { initializeNavigationProgress } from './navigation-progress';
+
+  initializeNavigationProgress();
+</script>

package/eventcatalog/src/components/navigation-progress.spec.ts

@@ -0,0 +1,68 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { initializeNavigationProgress } from './navigation-progress';
+
+const dispatchNavigationEvent = (name: string, sourceElement?: HTMLElement) => {
+  const event = new Event(name) as Event & { sourceElement?: HTMLElement };
+  event.sourceElement = sourceElement;
+  document.dispatchEvent(event);
+};
+
+describe('navigation progress', () => {
+  let cleanup: () => void;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    document.body.innerHTML = `
+      <a id="navigation-link" href="/next">Next page</a>
+      <div id="navigation-progress" data-visible="false" aria-hidden="true"></div>
+      <span id="navigation-progress-status"></span>
+      <main id="content"></main>
+    `;
+    cleanup = initializeNavigationProgress();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+  });
+
+  it('does not show the indicator for fast navigations', () => {
+    const link = document.getElementById('navigation-link')!;
+
+    dispatchNavigationEvent('astro:before-preparation', link);
+    vi.advanceTimersByTime(199);
+    dispatchNavigationEvent('astro:after-preparation');
+    vi.runAllTimers();
+
+    expect(document.getElementById('navigation-progress')?.dataset.visible).toBe('false');
+    expect(link.hasAttribute('aria-busy')).toBe(false);
+    expect(document.getElementById('content')?.hasAttribute('aria-busy')).toBe(false);
+  });
+
+  it('shows accessible pending state during slow navigations', () => {
+    const link = document.getElementById('navigation-link')!;
+
+    dispatchNavigationEvent('astro:before-preparation', link);
+    expect(link.getAttribute('aria-busy')).toBe('true');
+    expect(link.dataset.navigationPending).toBe('true');
+
+    vi.advanceTimersByTime(200);
+
+    expect(document.getElementById('navigation-progress')?.dataset.visible).toBe('true');
+    expect(document.getElementById('navigation-progress')?.getAttribute('aria-hidden')).toBe('false');
+    expect(document.getElementById('content')?.getAttribute('aria-busy')).toBe('true');
+    expect(document.getElementById('navigation-progress-status')?.textContent).toBe('Loading page');
+
+    dispatchNavigationEvent('astro:after-preparation');
+    vi.advanceTimersByTime(249);
+    expect(document.getElementById('navigation-progress')?.dataset.visible).toBe('true');
+
+    vi.advanceTimersByTime(1);
+    expect(document.getElementById('navigation-progress')?.dataset.visible).toBe('false');
+    expect(link.hasAttribute('data-navigation-pending')).toBe(false);
+    expect(document.getElementById('content')?.hasAttribute('aria-busy')).toBe(false);
+    expect(document.getElementById('navigation-progress-status')?.textContent).toBe('');
+  });
+});

package/eventcatalog/src/components/navigation-progress.ts

@@ -0,0 +1,98 @@
+const SHOW_DELAY_MS = 200;
+const MINIMUM_VISIBLE_MS = 250;
+
+type NavigationPreparationEvent = Event & {
+  sourceElement?: EventTarget | null;
+};
+
+export const initializeNavigationProgress = () => {
+  let showTimer: ReturnType<typeof setTimeout> | undefined;
+  let hideTimer: ReturnType<typeof setTimeout> | undefined;
+  let visibleAt = 0;
+  let pendingSource: HTMLElement | null = null;
+
+  const getProgress = () => document.getElementById('navigation-progress');
+  const getStatus = () => document.getElementById('navigation-progress-status');
+
+  const clearPendingSource = () => {
+    pendingSource?.removeAttribute('aria-busy');
+    pendingSource?.removeAttribute('data-navigation-pending');
+    pendingSource = null;
+  };
+
+  const showProgress = () => {
+    const progress = getProgress();
+    if (!progress) return;
+
+    visibleAt = performance.now();
+    progress.dataset.visible = 'true';
+    progress.setAttribute('aria-hidden', 'false');
+    document.getElementById('content')?.setAttribute('aria-busy', 'true');
+
+    const status = getStatus();
+    if (status) status.textContent = 'Loading page';
+  };
+
+  const hideProgress = () => {
+    const progress = getProgress();
+    if (progress) {
+      progress.dataset.visible = 'false';
+      progress.setAttribute('aria-hidden', 'true');
+    }
+
+    document.getElementById('content')?.removeAttribute('aria-busy');
+    const status = getStatus();
+    if (status) status.textContent = '';
+
+    clearPendingSource();
+    visibleAt = 0;
+    hideTimer = undefined;
+  };
+
+  const startProgress = (event: NavigationPreparationEvent) => {
+    if (showTimer) clearTimeout(showTimer);
+    if (hideTimer) clearTimeout(hideTimer);
+
+    clearPendingSource();
+
+    if (event.sourceElement instanceof HTMLElement) {
+      pendingSource = event.sourceElement;
+      pendingSource.setAttribute('aria-busy', 'true');
+      pendingSource.dataset.navigationPending = 'true';
+    }
+
+    showTimer = setTimeout(showProgress, SHOW_DELAY_MS);
+  };
+
+  const finishProgress = () => {
+    if (showTimer) {
+      clearTimeout(showTimer);
+      showTimer = undefined;
+    }
+
+    if (!visibleAt) {
+      hideProgress();
+      return;
+    }
+
+    const remainingVisibleTime = Math.max(0, MINIMUM_VISIBLE_MS - (performance.now() - visibleAt));
+    hideTimer = setTimeout(hideProgress, remainingVisibleTime);
+  };
+
+  const resetProgress = () => {
+    if (!showTimer && !hideTimer && !visibleAt) hideProgress();
+  };
+
+  document.addEventListener('astro:before-preparation', startProgress);
+  document.addEventListener('astro:after-preparation', finishProgress);
+  document.addEventListener('astro:page-load', resetProgress);
+
+  return () => {
+    if (showTimer) clearTimeout(showTimer);
+    if (hideTimer) clearTimeout(hideTimer);
+    hideProgress();
+    document.removeEventListener('astro:before-preparation', startProgress);
+    document.removeEventListener('astro:after-preparation', finishProgress);
+    document.removeEventListener('astro:page-load', resetProgress);
+  };
+};

package/eventcatalog/src/layouts/BaseLayout.astro

@@ -2,6 +2,7 @@
 import SEO from '../components/Seo.astro';
 import AnalyticsHead from '../enterprise/analytics/components/AnalyticsHead.astro';
 import AnalyticsTracker from '../enterprise/analytics/components/AnalyticsTracker.astro';
+import NavigationProgress from '../components/NavigationProgress.astro';
 import config from '@config';
 
 interface Props {
@@ -46,6 +47,7 @@ const catalogTheme = config.theme || 'default';
     <slot name="head" />
   </head>
   <body>
+    <NavigationProgress />
     <slot />
     <AnalyticsTracker />
   </body>

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "4.2.4",
+  "version": "4.2.5",
   "publishConfig": {
     "access": "public"
   },
@@ -116,9 +116,9 @@
     "update-notifier": "^7.3.1",
     "uuid": "^10.0.0",
     "zod": "^4.3.6",
-    "@eventcatalog/sdk": "2.26.1",
+    "@eventcatalog/visualiser": "^4.1.0",
     "@eventcatalog/linter": "1.1.6",
-    "@eventcatalog/visualiser": "^4.1.0"
+    "@eventcatalog/sdk": "2.26.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",