@eventcatalog/core 5.0.0-beta.0 → 5.0.0-beta.10

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/Header.astro

@@ -94,16 +94,16 @@ const providerName = user?.provider ? providerNames[user.provider] || user.provi
                     <img
                       src={userImage}
                       alt=""
-                      class="h-8 w-8 rounded-full object-cover ring-1 ring-[rgb(var(--ec-page-border))]"
+                      class="h-7 w-7 rounded-full object-cover ring-1 ring-[rgb(var(--ec-page-border))]"
                     />
                   ) : (
-                    <span class="h-8 w-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] ring-1 ring-[rgb(var(--ec-page-border))] flex items-center justify-center text-xs font-semibold">
+                    <span class="h-7 w-7 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] ring-1 ring-[rgb(var(--ec-page-border))] flex items-center justify-center text-[11px] font-semibold">
                       {userInitials}
                     </span>
                   )}
                   <svg
                     viewBox="0 0 24 24"
-                    class="h-4 w-4 transition-transform group-aria-expanded:rotate-180"
+                    class="h-3.5 w-3.5 transition-transform group-aria-expanded:rotate-180"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="2"

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/SideNav/NestedSideBar/index.tsx

@@ -25,6 +25,7 @@ import {
   findNodeKeyByUrl,
   getBadgeClasses,
   getDefaultCollapsedState,
+  hidesDefaultItemIcon,
   isGroupCollapsed,
   toggleGroupCollapsed,
 } from './utils';
@@ -663,6 +664,11 @@ export default function NestedSideBar() {
 
   const isTopLevel = navigationStack.length === 1;
 
+  // The list drilled into (e.g. Channels): its items, even those in groups under it (e.g. ADRs
+  // grouped by status), drop a default icon that repeats the list's own
+  const levelNode = currentLevel.key ? resolveRef(currentLevel.key) : null;
+  const repeatsLevelIcon = (item: NavNode) => !!levelNode && hidesDefaultItemIcon(levelNode, item, false);
+
   /**
    * Render a list of child refs (resolving keys as needed)
    */
@@ -674,7 +680,7 @@ export default function NestedSideBar() {
       if (currentItemGroup.length > 0) {
         result.push(
           <div key={`items-${result.length}`} className="flex flex-col gap-0.5 mb-1.5">
-            {currentItemGroup.map((item, idx) => renderItem(item.node, item.key, idx))}
+            {currentItemGroup.map((item, idx) => renderItem(item.node, item.key, idx, repeatsLevelIcon(item.node)))}
           </div>
         );
         currentItemGroup = [];
@@ -795,9 +801,12 @@ export default function NestedSideBar() {
                 return renderGroup(child, childKey, childIndex, depth + 1);
               }
 
-              // Under a nested group the header already conveys the resource type, so the
-              // default per-collection glyph is dropped; custom icons still show.
-              return renderItem(child, childKey, childIndex, isNested);
+              return renderItem(
+                child,
+                childKey,
+                childIndex,
+                hidesDefaultItemIcon(group, child, isNested) || repeatsLevelIcon(child)
+              );
             })}
           </div>
         )}
@@ -814,9 +823,9 @@ export default function NestedSideBar() {
     const isFav = isFavorited(itemKey);
     const canFavorite = itemKey !== null; // Only items with keys can be favorited
 
-    // Get icon component from lucide-react. When suppressDefaultIcon is set (e.g. items
-    // listed under a typed subtle subgroup) the default per-collection glyph is hidden;
-    // a custom icon (item.leftIcon) is always still shown.
+    // Get icon component from lucide-react. When suppressDefaultIcon is set (the group heading
+    // already shows the item's type, see hidesDefaultItemIcon) the default per-collection glyph
+    // is hidden; a custom icon (item.leftIcon) is always still shown.
     const IconComponent =
       item.icon && !suppressDefaultIcon ? (LucideIcons as unknown as Record<string, LucideIcons.LucideIcon>)[item.icon] : null;
     const handleStarClick = (e: React.MouseEvent) => {

package/eventcatalog/src/components/SideNav/NestedSideBar/utils.ts

@@ -1,5 +1,7 @@
 // Shared utilities for NestedSideBar components
 
+import type { NavNode } from '@stores/sidebar-store/state';
+
 export const SIDEBAR_GROUP_COLLAPSE_THRESHOLD = 5;
 
 /**
@@ -67,6 +69,14 @@ export const toggleGroupCollapsed = (
  * Finds the sidebar node represented by a resource URL.
  * The URL must have its configured base path removed before it is passed in.
  */
+/**
+ * Whether an item in a group drops its default per-collection icon because the group heading
+ * already conveys its type: every item under a nested group, and items whose icon is the
+ * group's own (e.g. events listed under Events). Custom icons (`leftIcon`) always show.
+ */
+export const hidesDefaultItemIcon = (group: NavNode, item: NavNode, isNested: boolean): boolean =>
+  isNested || (!!group.icon && group.icon === item.icon);
+
 export const findNodeKeyByUrl = (
   url: string,
   nodes: Record<string, unknown>,

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,