@eventcatalog/core 5.0.0-beta.1 → 5.0.0-beta.3

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 = "5.0.0-beta.1";
+var version = "5.0.0-beta.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-KYJZJLBD.js";
-import "../chunk-S2QGT7ZF.js";
+} from "../chunk-NDJOAITI.js";
+import "../chunk-GYIVJXOJ.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

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

package/dist/analytics/log-build.js

@@ -1,10 +1,10 @@
 import {
   log_build_default
-} from "../chunk-UDS3SYLZ.js";
+} from "../chunk-6OC46WQJ.js";
 import "../chunk-TQLRG35T.js";
 import "../chunk-ZAZHAVKB.js";
-import "../chunk-KYJZJLBD.js";
-import "../chunk-S2QGT7ZF.js";
+import "../chunk-NDJOAITI.js";
+import "../chunk-GYIVJXOJ.js";
 import "../chunk-RFIXKATC.js";
 export {
   log_build_default as default

package/dist/{chunk-AYNZXUB5.js → chunk-3PKS2IIP.js}

@@ -1,9 +1,12 @@
+import {
+  withFederationOutputTransaction
+} from "./chunk-WRNH5C3U.js";
 import {
   composePublicAssets
 } from "./chunk-5EPNFDT5.js";
 import {
   createFederationSourceProvider
-} from "./chunk-A2RZR3U4.js";
+} from "./chunk-6K7XZAYI.js";
 import {
   createFederationContentCache
 } from "./chunk-R7Z5ALYI.js";
@@ -11,9 +14,6 @@ import {
   getFederationDiagnostics,
   resolveFederationRules
 } from "./chunk-JJPB6EOZ.js";
-import {
-  withFederationOutputTransaction
-} from "./chunk-WRNH5C3U.js";
 import {
   getEventCatalogConfigFile
 } from "./chunk-RFIXKATC.js";

package/dist/{chunk-Q6SD5SNQ.js → chunk-423S2KHN.js}

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

package/dist/{chunk-UDS3SYLZ.js → chunk-6OC46WQJ.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-ZAZHAVKB.js";
 import {
   raiseEvent
-} from "./chunk-KYJZJLBD.js";
+} from "./chunk-NDJOAITI.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-K2ACDO7Y.js → chunk-BH2F5WPN.js}

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

package/dist/{chunk-S2QGT7ZF.js → chunk-GYIVJXOJ.js}

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

package/dist/{chunk-KYJZJLBD.js → chunk-NDJOAITI.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

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

package/dist/eventcatalog.js

@@ -1,30 +1,30 @@
-import {
-  runMigrations
-} from "./chunk-XUAF2H54.js";
-import "./chunk-CA4U2JP7.js";
 import {
   log_build_default
-} from "./chunk-UDS3SYLZ.js";
+} from "./chunk-6OC46WQJ.js";
 import {
   getLicenseStatus,
   printLicenseStatus
 } from "./chunk-TQLRG35T.js";
 import "./chunk-ZAZHAVKB.js";
+import {
+  runMigrations
+} from "./chunk-XUAF2H54.js";
+import "./chunk-CA4U2JP7.js";
 import {
   FederationConflictError,
   FederationDiagnosticError,
   federateCatalog
-} from "./chunk-AYNZXUB5.js";
+} from "./chunk-3PKS2IIP.js";
+import "./chunk-WRNH5C3U.js";
 import "./chunk-5EPNFDT5.js";
-import "./chunk-A2RZR3U4.js";
+import "./chunk-6K7XZAYI.js";
+import "./chunk-352FGP6W.js";
 import "./chunk-R7Z5ALYI.js";
 import {
   getFederationDiagnosticCounts,
   getVisibleFederationDiagnostics
 } from "./chunk-JJPB6EOZ.js";
 import "./chunk-SDZQJTJW.js";
-import "./chunk-352FGP6W.js";
-import "./chunk-WRNH5C3U.js";
 import {
   getProjectOutDir,
   isAuthEnabled,
@@ -33,10 +33,10 @@ import {
 } from "./chunk-MDWB5HLO.js";
 import {
   generate
-} from "./chunk-Q6SD5SNQ.js";
+} from "./chunk-423S2KHN.js";
 import {
   logger
-} from "./chunk-K2ACDO7Y.js";
+} from "./chunk-BH2F5WPN.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-36RYTYT5.js";
@@ -50,7 +50,7 @@ import {
 import {
   watch
 } from "./chunk-U63GDPPY.js";
-import "./chunk-KYJZJLBD.js";
+import "./chunk-NDJOAITI.js";
 import {
   getAstroConfigPath
 } from "./chunk-VIJJ7JKH.js";
@@ -66,7 +66,7 @@ import {
 } from "./chunk-LFQJXLHG.js";
 import {
   VERSION
-} from "./chunk-S2QGT7ZF.js";
+} from "./chunk-GYIVJXOJ.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/federation/federate.js

@@ -2,14 +2,14 @@ import {
   FederationConflictError,
   FederationDiagnosticError,
   federateCatalog
-} from "../chunk-AYNZXUB5.js";
+} from "../chunk-3PKS2IIP.js";
+import "../chunk-WRNH5C3U.js";
 import "../chunk-5EPNFDT5.js";
-import "../chunk-A2RZR3U4.js";
+import "../chunk-6K7XZAYI.js";
+import "../chunk-352FGP6W.js";
 import "../chunk-R7Z5ALYI.js";
 import "../chunk-JJPB6EOZ.js";
 import "../chunk-SDZQJTJW.js";
-import "../chunk-352FGP6W.js";
-import "../chunk-WRNH5C3U.js";
 import "../chunk-RFIXKATC.js";
 export {
   FederationConflictError,

package/dist/federation/source-provider.js

@@ -1,8 +1,8 @@
 import {
   createFederationSourceProvider
-} from "../chunk-A2RZR3U4.js";
-import "../chunk-SDZQJTJW.js";
+} from "../chunk-6K7XZAYI.js";
 import "../chunk-352FGP6W.js";
+import "../chunk-SDZQJTJW.js";
 export {
   createFederationSourceProvider
 };

package/dist/generate.cjs

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

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-Q6SD5SNQ.js";
-import "./chunk-K2ACDO7Y.js";
-import "./chunk-S2QGT7ZF.js";
+} from "./chunk-423S2KHN.js";
+import "./chunk-BH2F5WPN.js";
+import "./chunk-GYIVJXOJ.js";
 import "./chunk-RFIXKATC.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 = "5.0.0-beta.1";
+var version = "5.0.0-beta.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-K2ACDO7Y.js";
-import "../chunk-S2QGT7ZF.js";
+} from "../chunk-BH2F5WPN.js";
+import "../chunk-GYIVJXOJ.js";
 export {
   logger
 };

package/eventcatalog/src/components/Grids/utils.tsx

@@ -24,26 +24,3 @@ export const getCollectionStyles = (collection: CollectionMessageTypes | Collect
       return { color: 'gray', Icon: EnvelopeIcon };
   }
 };
-
-export interface PaginationProps {
-  currentPage: number;
-  totalPages: number;
-  totalItems: number;
-  itemsPerPage: number;
-  onPageChange: (page: number) => void;
-}
-
-export interface SearchBarProps {
-  searchQuery: string;
-  onSearchChange: (query: string) => void;
-  placeholder?: string;
-  totalResults?: number;
-  totalItems?: number;
-}
-
-export interface TypeFilterProps {
-  selectedTypes: CollectionMessageTypes[];
-  onTypeChange: (types: CollectionMessageTypes[]) => void;
-  filteredCount?: number;
-  totalCount?: number;
-}

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

@@ -167,7 +167,12 @@ export default function CodeGroup({
             hidden={index !== active}
             tabIndex={0}
           >
-            {item.html !== undefined ? <div dangerouslySetInnerHTML={{ __html: item.html }} /> : item.content}
+            {/* Astro's router marks scripts in this HTML with data-astro-exec before hydration, so it never matches exactly. */}
+            {item.html !== undefined ? (
+              <div suppressHydrationWarning dangerouslySetInnerHTML={{ __html: item.html }} />
+            ) : (
+              item.content
+            )}
           </div>
         ))}
       </div>

package/eventcatalog/src/components/SchemaExplorer/SchemaDetailsPanel.tsx

@@ -384,6 +384,9 @@ export default function SchemaDetailsPanel({
     [diffToVersion, uniqueAvailableVersions]
   );
   const comparing = (activeTab === 'versions' && hasMultipleVersions) || isDiffModalOpen;
+  const contentReady = !content.loading && !content.error;
+  // Server-rendered examples stay mounted and are only shown on the Examples tab (see the tab content below).
+  const showRenderedExamples = !!renderedExamples && activeTab === 'examples' && contentReady;
 
   const compareWithCurrent = (version: string) => {
     setDiffFromVersion(version);
@@ -705,11 +708,16 @@ export default function SchemaDetailsPanel({
 
         {/* Tab content */}
         <div className="flex-1 min-h-0 overflow-hidden p-6">
-          {content.loading || content.error ? (
+          {/* Always render the examples slot and hide it on other tabs. Astro moves a slot missing from the
+              server HTML into a <template>, where its island scripts never run and no island on the page hydrates. */}
+          {renderedExamples && (
+            <div className="h-full overflow-auto pr-1" hidden={!showRenderedExamples}>
+              {renderedExamples}
+            </div>
+          )}
+          {!contentReady ? (
             <SchemaLoadingState loading={content.loading} error={content.error} retry={content.retry} />
-          ) : activeTab === 'examples' && renderedExamples ? (
-            <div className="h-full overflow-auto pr-1">{renderedExamples}</div>
-          ) : activeTab === 'examples' && examples.length > 0 ? (
+          ) : showRenderedExamples ? null : activeTab === 'examples' && examples.length > 0 ? (
             <ExamplesViewer examples={examples} />
           ) : activeTab === 'metadata' ? (
             <SchemaMetadata message={message} owners={showOwners ? owners : []} />

package/eventcatalog/src/components/Tables/Discover/DiscoverTable.tsx

@@ -11,7 +11,7 @@ import {
   type ColumnFiltersState,
   type SortingState,
 } from '@tanstack/react-table';
-import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, SearchX, X, Search, Users } from 'lucide-react';
+import { ArrowDown, ArrowUp, ArrowUpDown, SearchX, X, Search, Users } from 'lucide-react';
 import { UserIcon } from '@heroicons/react/24/outline';
 import { useEffect, useMemo, useState } from 'react';
 import type { TableConfiguration } from '@types';
@@ -19,6 +19,7 @@ import { isSameVersion } from '@utils/collections/version-compare';
 import { resolveIconUrl } from '@utils/icon';
 import { FilterDropdown, CheckboxItem } from './FilterComponents';
 import { getDiscoverColumns } from './columns';
+import { TablePagination, useStoredPageSize } from '../TablePagination';
 import { formatAdrStatus, type AdrStatus } from '@utils/collections/adr-constants';
 import { buildDiscoverFilterSearch, filterKnownValues, parseDiscoverFilterSearch } from './url-filters';
 
@@ -243,18 +244,7 @@ export function DiscoverTable<T extends DiscoverTableData>({
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [sorting, setSorting] = useState<SortingState>([]);
   const [tableFilter, setTableFilter] = useState(initialUrlFilters.q);
-  const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-  const PAGE_SIZE_STORAGE_KEY = 'eventcatalog-discover-page-size';
-  const [pageSize, setPageSize] = useState<number>(() => {
-    if (typeof window === 'undefined') return 10;
-    const stored = Number(window.localStorage.getItem(PAGE_SIZE_STORAGE_KEY));
-    return PAGE_SIZE_OPTIONS.includes(stored) ? stored : 10;
-  });
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      window.localStorage.setItem(PAGE_SIZE_STORAGE_KEY, String(pageSize));
-    }
-  }, [pageSize]);
+  const [pageSize, setPageSize] = useStoredPageSize('eventcatalog-discover-page-size');
   const [showOnlyLatest, setShowOnlyLatest] = useState(initialUrlFilters.showOnlyLatest);
   const [onlyShowDrafts, setOnlyShowDrafts] = useState(initialUrlFilters.onlyShowDrafts);
   const [selectedDomains, setSelectedDomains] = useState<string[]>(() =>
@@ -1287,55 +1277,7 @@ export function DiscoverTable<T extends DiscoverTableData>({
           </div>
         </div>
 
-        {/* Pagination */}
-        <div className="flex-shrink-0 flex items-center justify-between px-6 py-3 border-t border-[rgb(var(--ec-page-border))]">
-          <div className="flex items-center gap-3 text-xs text-[rgb(var(--ec-page-text-muted))]">
-            {totalResults > 0 && (
-              <span>
-                <span className="font-medium text-[rgb(var(--ec-page-text))]">{table.getRowModel().rows.length}</span> of{' '}
-                <span className="font-medium text-[rgb(var(--ec-page-text))]">{totalResults}</span> results
-              </span>
-            )}
-            {totalResults > 0 && <span aria-hidden className="h-3 w-px bg-[rgb(var(--ec-page-border))]" />}
-            <label className="flex items-center gap-1.5">
-              <span>Per page</span>
-              <select
-                value={pageSize}
-                onChange={(e) => setPageSize(Number(e.target.value))}
-                className="cursor-pointer rounded bg-transparent px-1 py-0.5 font-medium text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] focus:bg-[rgb(var(--ec-content-hover))] focus:outline-none"
-              >
-                {PAGE_SIZE_OPTIONS.map((size) => (
-                  <option key={size} value={size}>
-                    {size}
-                  </option>
-                ))}
-              </select>
-            </label>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <button
-              className="p-1.5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-              onClick={() => table.previousPage()}
-              disabled={!table.getCanPreviousPage()}
-              title="Previous page"
-            >
-              <ChevronLeft className="w-4 h-4" />
-            </button>
-            <span className="text-xs tabular-nums text-[rgb(var(--ec-page-text-muted))] min-w-[60px] text-center">
-              <span className="font-medium text-[rgb(var(--ec-page-text))]">{table.getState().pagination.pageIndex + 1}</span>
-              {' / '}
-              <span>{table.getPageCount() || 1}</span>
-            </span>
-            <button
-              className="p-1.5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-              onClick={() => table.nextPage()}
-              disabled={!table.getCanNextPage()}
-              title="Next page"
-            >
-              <ChevronRight className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
+        <TablePagination table={table} pageSize={pageSize} onPageSizeChange={setPageSize} />
       </div>
     </div>
   );

package/eventcatalog/src/components/Tables/Discover/columns.tsx

@@ -1,25 +1,16 @@
 import { createColumnHelper } from '@tanstack/react-table';
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { DocumentTextIcon, MapIcon } from '@heroicons/react/24/solid';
-import {
-  ArrowDownIcon,
-  ArrowTopRightOnSquareIcon,
-  ArrowUpIcon,
-  EllipsisVerticalIcon,
-  StarIcon,
-} from '@heroicons/react/24/outline';
+import { useMemo, useState } from 'react';
+import { ArrowDownIcon, ArrowTopRightOnSquareIcon, ArrowUpIcon } from '@heroicons/react/24/outline';
 import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForCollection } from '@utils/collections/icons';
 import { getCollectionTextColorClass } from '@utils/collection-colors';
 import { getBadgeHref, getBadgeReactStyle } from '@utils/badge-styles';
 import { isIconPath, resolveIconUrl } from '@utils/icon';
-import { useStore } from '@nanostores/react';
-import { favoritesStore, toggleFavorite, type FavoriteItem } from '../../../stores/favorites-store';
 import type { DiscoverTableData, CollectionType } from './DiscoverTable';
 import type { TableConfiguration } from '@types';
 import { formatAdrDate, isAdrCollection } from '@utils/collections/adr-constants';
 import { CornerDownRight } from 'lucide-react';
+import { RowActionsMenu } from '../RowActionsMenu';
 
 const columnHelper = createColumnHelper<DiscoverTableData>();
 
@@ -167,147 +158,23 @@ const ResourceNameCell = ({ item }: { item: DiscoverTableData }) => {
   );
 };
 
-const MENU_WIDTH = 280;
-const MENU_GAP = 6;
-
-const RowActionsMenu = ({ item, collectionType }: { item: DiscoverTableData; collectionType: CollectionType }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null);
-  const favorites = useStore(favoritesStore);
-  const href = buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`);
-  const visualiserHref = buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`);
-  const hasVisualiser = !isAdrCollection(item.collection);
-  const nodeKey = `${item.collection}-${item.data.id}-${item.data.version}`;
-  const badgeLabel =
+// Discover keys favorites as `${collection}-${id}-${version}`; keep that so existing favorites still match.
+const DiscoverRowActions = ({ item, collectionType }: { item: DiscoverTableData; collectionType: CollectionType }) => {
+  const badge =
     collectionType === 'external-systems'
       ? 'External System'
       : collectionType.charAt(0).toUpperCase() + collectionType.slice(1, -1);
-  const isFavorite = favorites.some((fav) => fav.nodeKey === nodeKey);
-
-  // The table lives inside scrollable, overflow-hidden containers, so the menu is
-  // rendered in a portal with fixed positioning to avoid being clipped.
-  const updatePosition = () => {
-    const button = buttonRef.current;
-    if (!button) return;
-    const rect = button.getBoundingClientRect();
-    const menuHeight = menuRef.current?.offsetHeight ?? 0;
-    const spaceBelow = window.innerHeight - rect.bottom;
-
-    // Flip above the trigger when there isn't enough room below it.
-    const openUpwards = menuHeight > 0 && spaceBelow < menuHeight + MENU_GAP && rect.top > spaceBelow;
-    const top = openUpwards ? rect.top - menuHeight - MENU_GAP : rect.bottom + MENU_GAP;
-    const left = Math.max(MENU_GAP, rect.right - MENU_WIDTH);
-
-    setMenuPosition({ top, left });
-  };
-
-  useLayoutEffect(() => {
-    if (!isOpen) return;
-    updatePosition();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handlePointerDown = (event: MouseEvent) => {
-      const target = event.target as Node;
-      if (!menuRef.current?.contains(target) && !buttonRef.current?.contains(target)) {
-        setIsOpen(false);
-      }
-    };
-
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setIsOpen(false);
-      }
-    };
-
-    const handleReposition = () => updatePosition();
-
-    document.addEventListener('mousedown', handlePointerDown);
-    document.addEventListener('keydown', handleEscape);
-    window.addEventListener('resize', handleReposition);
-    window.addEventListener('scroll', handleReposition, true);
-
-    return () => {
-      document.removeEventListener('mousedown', handlePointerDown);
-      document.removeEventListener('keydown', handleEscape);
-      window.removeEventListener('resize', handleReposition);
-      window.removeEventListener('scroll', handleReposition, true);
-    };
-  }, [isOpen]);
-
-  const handleToggleFavorite = () => {
-    const favoriteItem: FavoriteItem = {
-      nodeKey,
-      path: [],
-      title: item.data.name,
-      badge: badgeLabel,
-      href,
-    };
-    toggleFavorite(favoriteItem);
-    setIsOpen(false);
-  };
-
   return (
-    <div className="relative flex justify-end">
-      <button
-        ref={buttonRef}
-        type="button"
-        aria-haspopup="menu"
-        aria-expanded={isOpen}
-        onClick={() => setIsOpen((prev) => !prev)}
-        className="rounded-md p-1.5 text-[rgb(var(--ec-icon-color))] transition-colors hover:bg-[rgb(var(--ec-content-hover)/0.5)] hover:text-[rgb(var(--ec-page-text))]"
-      >
-        <EllipsisVerticalIcon className="h-4 w-4" />
-      </button>
-
-      {isOpen &&
-        typeof document !== 'undefined' &&
-        createPortal(
-          <div
-            ref={menuRef}
-            role="menu"
-            style={{
-              position: 'fixed',
-              top: menuPosition?.top ?? -9999,
-              left: menuPosition?.left ?? -9999,
-              width: MENU_WIDTH,
-              visibility: menuPosition ? 'visible' : 'hidden',
-            }}
-            className="z-50 overflow-hidden rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg))] shadow-xl"
-          >
-            <a
-              href={href}
-              className="flex items-center gap-2.5 px-3 py-2.5 text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-accent))]"
-            >
-              <DocumentTextIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
-              View documentation
-            </a>
-            {hasVisualiser && (
-              <a
-                href={visualiserHref}
-                className="flex items-center gap-2.5 px-3 py-2.5 text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-accent))]"
-              >
-                <MapIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
-                View in visualiser
-              </a>
-            )}
-            <button
-              type="button"
-              onClick={handleToggleFavorite}
-              className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-accent))]"
-            >
-              <StarIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
-              {isFavorite ? 'Remove from favorites' : 'Add to favorites'}
-            </button>
-          </div>,
-          document.body
-        )}
-    </div>
+    <RowActionsMenu
+      title={item.data.name}
+      href={buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`)}
+      visualiserHref={
+        isAdrCollection(item.collection)
+          ? undefined
+          : buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`)
+      }
+      favorite={{ nodeKey: `${item.collection}-${item.data.id}-${item.data.version}`, badge }}
+    />
   );
 };
 
@@ -319,7 +186,7 @@ const createActionsColumn = (collectionType: CollectionType, tableConfiguration:
     enableSorting: false,
     cell: (info) => {
       const item = info.row.original;
-      return <RowActionsMenu item={item} collectionType={collectionType} />;
+      return <DiscoverRowActions item={item} collectionType={collectionType} />;
     },
     meta: {
       showFilter: false,