@eventcatalog/core 3.48.4 → 4.0.0-beta.1

package/eventcatalog/src/layouts/VisualiserLayout.astro

@@ -143,6 +143,72 @@ const getColor = (collection: string) => {
   document.addEventListener('astro:page-load', setupSidebarToggle);
 </script>
 
+<!--
+  Bridge Astro's view-transition router onto `window` so the standalone
+  visualiser package (which can't import `astro:*`) can trigger soft, animated
+  client navigations instead of hard page reloads. Used by node "drill-in"
+  clicks (e.g. a system node on the System Diagram -> that system's Map).
+-->
+<script>
+  import { navigate } from 'astro:transitions/client';
+
+  function bridgeNavigate() {
+    // @ts-ignore - intentional global bridge for the decoupled visualiser island
+    window.__ecNavigate = (url: string) => navigate(url);
+  }
+
+  bridgeNavigate();
+  document.addEventListener('astro:page-load', bridgeNavigate);
+</script>
+
+<style is:global>
+  /*
+   * "Drill into detail" transition for the visualiser graph container.
+   *
+   * Both the System Diagram and a system's Map render their graph inside
+   * a portal tagged with `transition:name="visualiser-graph"`. When navigating
+   * between them, Astro morphs that shared container: the outgoing graph fades
+   * and scales back, the incoming graph fades and scales up into place — reading
+   * as descending one level deeper rather than a flat cross-fade.
+   */
+  @keyframes ec-visualiser-drill-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(1.04);
+    }
+  }
+
+  @keyframes ec-visualiser-drill-in {
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  ::view-transition-old(visualiser-graph) {
+    animation: ec-visualiser-drill-out 0.28s ease both;
+  }
+
+  ::view-transition-new(visualiser-graph) {
+    animation: ec-visualiser-drill-in 0.28s ease both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ::view-transition-old(visualiser-graph),
+    ::view-transition-new(visualiser-graph) {
+      animation-duration: 0.01ms;
+    }
+  }
+</style>
+
 <style>
   .visualiser-full-bleed {
     margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1);

package/eventcatalog/src/pages/architecture/[type]/[id]/[version]/_index.data.ts

@@ -4,8 +4,9 @@ import type { PageTypes } from '@types';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { getDomains } from '@utils/collections/domains';
 import { getServices } from '@utils/collections/services';
+import { getSystems } from '@utils/collections/systems';
 
-const architecturePageTypes: PageTypes[] = ['services', 'domains'];
+const architecturePageTypes: PageTypes[] = ['services', 'domains', 'systems'];
 
 /**
  * Documentation page class for all collection types with versioning
@@ -18,8 +19,9 @@ export class Page extends HybridPage {
 
     const domains = await getDomains({ enrichServices: true });
     const services = await getServices();
+    const systems = await getSystems();
 
-    const pageData = [services, domains];
+    const pageData = [services, domains, systems];
 
     return pageData.flatMap((items, index) =>
       items.map((item) => ({

package/eventcatalog/src/pages/architecture/[type]/[id]/[version]/index.astro

@@ -1,5 +1,6 @@
 ---
 import DomainGrid from '@components/Grids/DomainGrid';
+import SystemGrid from '@components/Grids/SystemGrid';
 import MessageGrid from '@components/Grids/MessageGrid';
 import { getSpecificationsForService } from '@utils/collections/services';
 
@@ -25,6 +26,7 @@ const specifications = type === 'services' ? getSpecificationsForService(props)
     <div class="flex docs-layout w-full">
       <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
         {type === 'domains' && <DomainGrid domain={domain} client:load />}
+        {type === 'systems' && <SystemGrid system={props} client:load />}
         {
           (type === 'agents' || type === 'services') && (
             <MessageGrid service={props} specifications={specifications} client:load />

package/eventcatalog/src/pages/diagrams/[id]/[version]/index.astro

@@ -35,7 +35,7 @@ const chatQuery = `Tell me about the "${props.data.name}" diagram (version ${pro
     >
       <main class="diagram-content w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
         <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-2">
-          <div class="flex items-start justify-between gap-4">
+          <div class="flex items-start gap-4">
             <div class="min-w-0">
               <h1 class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))] truncate">
                 {props.data.name}
@@ -45,20 +45,20 @@ const chatQuery = `Tell me about the "${props.data.name}" diagram (version ${pro
                   <p class="pt-2 text-base font-light text-[rgb(var(--ec-page-text-muted))]">{props.data.summary}</p>
                 )
               }
-            </div>
-
-            <div class="flex items-center gap-2">
-              <CopyAsMarkdown
-                client:only="react"
-                schemas={[]}
-                chatQuery={chatQuery}
-                chatEnabled={chatEnabled}
-                editUrl=""
-                markdownDownloadEnabled={markdownDownloadEnabled}
-                rssFeedEnabled={false}
-                preferChatAsDefault={chatEnabled}
-                chatButtonText="Ask about this diagram"
-              />
+              <div class="pt-4">
+                <CopyAsMarkdown
+                  client:only="react"
+                  variant="toolbar"
+                  schemas={[]}
+                  chatQuery={chatQuery}
+                  chatEnabled={chatEnabled}
+                  editUrl=""
+                  markdownDownloadEnabled={markdownDownloadEnabled}
+                  rssFeedEnabled={false}
+                  preferChatAsDefault={chatEnabled}
+                  chatButtonText="Ask about this diagram"
+                />
+              </div>
             </div>
           </div>
         </div>

package/eventcatalog/src/pages/discover/[type]/_index.data.ts

@@ -35,6 +35,7 @@ export class Page extends HybridPage {
       'commands',
       'queries',
       'domains',
+      'systems',
       'services',
       'external-systems',
       'flows',

package/eventcatalog/src/pages/discover/[type]/index.astro

@@ -8,12 +8,20 @@ import { getServices } from '@utils/collections/services';
 import { getQueries } from '@utils/collections/queries';
 import { getContainers } from '@utils/collections/containers';
 import { getDataProducts } from '@utils/collections/data-products';
+import { getFlows } from '@utils/collections/flows';
 import { getUsers } from '@utils/collections/users';
 import { getTeams } from '@utils/collections/teams';
 import { getChannels } from '@utils/collections/channels';
+import { getSystems } from '@utils/collections/systems';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { DiscoverTable, type DiscoverTableData, type CollectionType } from '@components/Tables/Discover';
+import {
+  DiscoverTable,
+  type CollectionKindOption,
+  type DiscoverTableData,
+  type CollectionType,
+} from '@components/Tables/Discover';
 import config from '@config';
+import { buildUrl } from '@utils/url-builder';
 import { Page } from './_index.data';
 
 export const prerender = Page.prerender;
@@ -28,8 +36,10 @@ const agents = await getAgents();
 const adrs = await getAdrs();
 const services = await getServices();
 const domains = await getDomains({ getAllVersions: false });
+const systems = await getSystems({ getAllVersions: false });
 const containers = await getContainers();
 const dataProducts = await getDataProducts();
+const flows = await getFlows();
 const channels = await getChannels();
 const users = await getUsers();
 const teams = await getTeams();
@@ -87,6 +97,16 @@ const typeConfig: Record<
       { id: 'isDeprecated', label: 'Is Deprecated' },
     ],
   },
+  systems: {
+    label: 'Systems',
+    description: 'Explore the systems that group services and flows across your architecture, independently of domains.',
+    propertyOptions: [
+      { id: 'hasServices', label: 'Has Services' },
+      { id: 'hasFlows', label: 'Has Flows' },
+      { id: 'hasOwners', label: 'Has Owners' },
+      { id: 'isDeprecated', label: 'Is Deprecated' },
+    ],
+  },
   services: {
     label: 'Services',
     description: 'Browse the internal services in your catalog and inspect the capabilities they expose.',
@@ -161,6 +181,28 @@ const typeConfig: Record<
 };
 
 const currentTypeConfig = typeConfig[type] || typeConfig.events;
+const internalServices = services.filter((service) => !service.data.externalSystem);
+const externalSystems = services.filter((service) => service.data.externalSystem);
+
+const collectionKinds = [
+  { id: 'domains', label: typeConfig.domains.label, count: domains.length },
+  { id: 'systems', label: typeConfig.systems.label, count: systems.length },
+  { id: 'services', label: typeConfig.services.label, count: internalServices.length },
+  { id: 'external-systems', label: typeConfig['external-systems'].label, count: externalSystems.length },
+  { id: 'agents', label: typeConfig.agents.label, count: agents.length },
+  { id: 'adrs', label: typeConfig.adrs.label, count: adrs.length },
+  { id: 'data-products', label: typeConfig['data-products'].label, count: dataProducts.length },
+  { id: 'containers', label: typeConfig.containers.label, count: containers.length },
+  { id: 'events', label: typeConfig.events.label, count: events.length },
+  { id: 'commands', label: typeConfig.commands.label, count: commands.length },
+  { id: 'queries', label: typeConfig.queries.label, count: queries.length },
+  { id: 'flows', label: typeConfig.flows.label, count: flows.length },
+]
+  .filter((kind) => kind.count > 0)
+  .map((kind) => ({
+    ...kind,
+    href: buildUrl(`/discover/${kind.id}`),
+  })) as CollectionKindOption[];
 
 // External systems reuse the user's `services.tableConfiguration` so customisations apply to both tabs
 const tableConfigurationKey = type === 'external-systems' ? 'services' : type;
@@ -269,7 +311,8 @@ const tableData = enrichedData.map((d: any) => ({
   collection: d.collection,
   owners: (d.data?.owners || []).map(mapOwner).filter(Boolean),
   hasOwners: (d.data?.owners || []).length > 0,
-  hasServices: type === 'domains' ? (d.data?.services || []).length > 0 : false,
+  hasServices: type === 'domains' || type === 'systems' ? (d.data?.services || []).length > 0 : false,
+  hasFlows: type === 'systems' ? (d.data?.flows || []).length > 0 : false,
   isSubdomain: type === 'domains' ? allSubdomainIds.has(d.data.id) : false,
   // Service-specific properties
   domains: isServiceOrAgentLike ? d.enrichedDomains : undefined,
@@ -304,6 +347,7 @@ const tableData = enrichedData.map((d: any) => ({
     tools: d.data?.tools ?? [],
     agents: d.data?.agents?.map(mapToItem) ?? [],
     services: d.data?.services?.map(mapToItem) ?? [],
+    flows: d.data?.flows?.map(mapToItem) ?? [],
     servicesThatWriteToContainer: d.data?.servicesThatWriteToContainer?.map(mapToItem) ?? [],
     servicesThatReadFromContainer: d.data?.servicesThatReadFromContainer?.map(mapToItem) ?? [],
     inputs: d.data?.inputs?.map(resolvePointer).filter(Boolean) ?? [],
@@ -395,6 +439,7 @@ const title = `${currentTypeConfig.label} (${data.length})`;
         collectionType={type as CollectionType}
         collectionLabel={currentTypeConfig.label}
         collectionDescription={currentTypeConfig.description}
+        collectionKinds={collectionKinds}
         domains={uniqueDomains}
         owners={uniqueOwners as Array<{ id: string; name: string; type?: 'user' | 'team' }>}
         producers={uniqueProducers}

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId]/[docVersion]/index.astro

@@ -54,22 +54,10 @@ const pagefindAttributes =
       <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
         <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-2">
           <div>
-            <div class="flex justify-between items-center">
+            <div class="flex items-center">
               <div class="flex items-center gap-2">
                 <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{title}</h2>
               </div>
-              <div class="hidden lg:block">
-                <CopyAsMarkdown
-                  client:only="react"
-                  schemas={[]}
-                  chatQuery={chatQuery}
-                  chatEnabled={chatEnabled}
-                  editUrl=""
-                  markdownDownloadEnabled={true}
-                  rssFeedEnabled={false}
-                  preferChatAsDefault={false}
-                />
-              </div>
             </div>
           </div>
           {
@@ -79,11 +67,24 @@ const pagefindAttributes =
           }
           {
             badges.length > 0 && (
-              <div class="flex flex-wrap gap-3 py-4">
+              <div class="flex flex-wrap gap-1.5 py-3">
                 {badges.map((badge: any) => <Badge badge={badge} />)}
               </div>
             )
           }
+          <div class="pt-4">
+            <CopyAsMarkdown
+              client:only="react"
+              variant="toolbar"
+              schemas={[]}
+              chatQuery={chatQuery}
+              chatEnabled={chatEnabled}
+              editUrl=""
+              markdownDownloadEnabled={true}
+              rssFeedEnabled={false}
+              preferChatAsDefault={false}
+            />
+          </div>
         </div>
         <div data-pagefind-ignore>
           {

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId]/index.astro

@@ -54,29 +54,28 @@ const pagefindAttributes =
       <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
         <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-2">
           <div class="flex flex-col gap-4">
-            <div class="flex justify-between items-center gap-4">
+            <div class="flex items-center gap-4">
               <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{title}</h2>
-              <div class="hidden lg:block shrink-0">
-                <CopyAsMarkdown
-                  client:only="react"
-                  schemas={[]}
-                  chatQuery={chatQuery}
-                  chatEnabled={chatEnabled}
-                  editUrl=""
-                  markdownDownloadEnabled={true}
-                  rssFeedEnabled={false}
-                  preferChatAsDefault={false}
-                />
-              </div>
             </div>
             {props.data.summary && <p class="text-base text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</p>}
             {
               badges.length > 0 && (
-                <div class="flex flex-wrap gap-3 py-4">
+                <div class="flex flex-wrap gap-1.5 py-1">
                   {badges.map((badge: any) => <Badge badge={badge} />)}
                 </div>
               )
             }
+            <CopyAsMarkdown
+              client:only="react"
+              variant="toolbar"
+              schemas={[]}
+              chatQuery={chatQuery}
+              chatEnabled={chatEnabled}
+              editUrl=""
+              markdownDownloadEnabled={true}
+              rssFeedEnabled={false}
+              preferChatAsDefault={false}
+            />
           </div>
         </div>
         <div data-pagefind-ignore>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/_index.data.ts

@@ -20,6 +20,7 @@ export class Page extends HybridPage {
       'queries',
       'services',
       'domains',
+      'systems',
       'flows',
       'channels',
       'entities',

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/changelog/_index.data.ts

@@ -14,7 +14,17 @@ export class Page extends HybridPage {
 
     const { pageDataLoader } = await import('@utils/page-loaders/page-data-loader');
 
-    const itemTypes: PageTypes[] = ['agents', 'events', 'commands', 'queries', 'services', 'domains', 'flows', 'containers'];
+    const itemTypes: PageTypes[] = [
+      'agents',
+      'events',
+      'commands',
+      'queries',
+      'services',
+      'domains',
+      'systems',
+      'flows',
+      'containers',
+    ];
     const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
     return allItems.flatMap((items, index) =>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -33,13 +33,14 @@ import {
   Bot,
   Box,
   Boxes,
+  Group,
   SquarePenIcon,
   DatabaseIcon,
   DatabaseZapIcon,
   ShieldCheckIcon,
   AlignLeft,
   Package,
-  BookText,
+  ClipboardList,
   CalendarDays,
 } from 'lucide-react';
 
@@ -148,7 +149,7 @@ const getBadge = () => {
 
   if (isAdrPage) {
     return [
-      createResourceBadge('Decision Record', BookText),
+      createResourceBadge('Decision Record', ClipboardList),
       createResourceBadge(formatAdrDate(props.data.date), CalendarDays),
       createAdrStatusBadge(props.data.status),
     ];
@@ -170,6 +171,10 @@ const getBadge = () => {
     return [createResourceBadge('Domain', RectangleGroupIcon)];
   }
 
+  if (props.collection === 'systems') {
+    return [createResourceBadge('System', Group)];
+  }
+
   if (props.collection === 'flows') {
     return [createResourceBadge('Flow', QueueListIcon)];
   }
@@ -326,6 +331,33 @@ let nodeGraphs =
   }) || [];
 const flowEmbeds = getMDXComponentsByName(props.body || '', 'Flow') || [];
 
+// Context Diagrams embedded via <ContextDiagram />. When no id is passed we assume
+// the current page. Valid on system pages (renders the system's context) and domain
+// pages (renders the context across the domain's systems). Each renders into its own
+// portal so it doesn't collide with the page's default diagram.
+//
+// The underlying graph + visualiser link differ per page type:
+//   - systems → `systems-context`, links to /visualiser/systems/:id/:version/context
+//   - domains → `domains-systems-context`, links to /visualiser/domains/:id/:version/systems-context
+const contextDiagramSupported = props.collection === 'systems' || props.collection === 'domains';
+const contextDiagrams = contextDiagramSupported
+  ? (getMDXComponentsByName(props.body || '', 'ContextDiagram') || []).map((diagram: any) => {
+      const id = diagram.id ?? props.data.id;
+      const version = diagram.version ?? props.data.version;
+      return {
+        id,
+        version,
+        search: parseMdxBooleanProp(diagram.search, true),
+        legend: parseMdxBooleanProp(diagram.legend, true),
+        graphCollection: props.collection === 'domains' ? 'domains-systems-context' : 'systems-context',
+        visualiserUrl:
+          props.collection === 'domains'
+            ? buildUrl(`/visualiser/domains/${id}/${version}/systems-context`)
+            : buildUrl(`/visualiser/systems/${id}/${version}/context`),
+      };
+    })
+  : [];
+
 // Get props for the node graph (when no id is passed, we assume its the current page)
 const hasCurrentFlowEmbed =
   props.collection === 'flows' &&
@@ -376,7 +408,7 @@ if (!isAdrPage && !hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
       <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
         <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-6 pt-4">
           <div>
-            <div class="flex justify-between items-end">
+            <div>
               <div class="flex flex-col gap-4">
                 <span class="text-xs md:text-sm font-semibold text-[rgb(var(--ec-accent))] capitalize">
                   {friendlyCollectionName}
@@ -410,22 +442,32 @@ if (!isAdrPage && !hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
                   </div>
                 </div>
               </div>
-              <div class="hidden lg:block mb-2">
-                <CopyAsMarkdown
-                  client:only="react"
-                  schemas={schemasForResource}
-                  chatQuery={generatePromptForResource(props)}
-                  chatEnabled={isEventCatalogChatEnabled()}
-                  markdownDownloadEnabled={isMarkdownDownloadEnabled()}
-                  rssFeedEnabled={isRSSEnabled()}
-                  editUrl={editUrl}
-                  preferChatAsDefault={isEventCatalogChatEnabled()}
-                  printUrl={printUrl}
-                />
-              </div>
             </div>
 
             <h2 class="text-base pt-4 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</h2>
+            {
+              badges && (
+                <div class="flex flex-wrap gap-1.5 pt-4">
+                  {badges.map((badge: any) => {
+                    return <Badge badge={badge} />;
+                  })}
+                </div>
+              )
+            }
+            <div class="pt-5">
+              <CopyAsMarkdown
+                client:only="react"
+                variant="toolbar"
+                schemas={schemasForResource}
+                chatQuery={generatePromptForResource(props)}
+                chatEnabled={isEventCatalogChatEnabled()}
+                markdownDownloadEnabled={isMarkdownDownloadEnabled()}
+                rssFeedEnabled={isRSSEnabled()}
+                editUrl={editUrl}
+                preferChatAsDefault={isEventCatalogChatEnabled()}
+                printUrl={printUrl}
+              />
+            </div>
             {
               httpOperation && (
                 <div class="pt-4">
@@ -446,16 +488,6 @@ if (!isAdrPage && !hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
                 </div>
               )
             }
-            {
-              badges && (
-                <div class="flex flex-wrap gap-3 pt-6 pb-2">
-                  {badges.map((badge: any) => {
-                    return <Badge badge={badge} />;
-                  })}
-                </div>
-              )
-            }
-
             {
               isSupersededAdr(props) && (
                 <Admonition type="warning" title="This architecture decision has been superseded">
@@ -593,6 +625,29 @@ if (!isAdrPage && !hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
                 );
               })
           }
+          {
+            contextDiagrams.length > 0 &&
+              contextDiagrams.map((diagram: any) => (
+                <NodeGraph
+                  id={diagram.id}
+                  version={diagram.version}
+                  collection={diagram.graphCollection}
+                  mode="simple"
+                  linksToVisualiser={true}
+                  showSearch={diagram.search ?? true}
+                  showLegend={diagram.legend ?? true}
+                  portalId={`${diagram.id}-context-diagram-portal`}
+                  href={
+                    isVisualiserEnabled()
+                      ? {
+                          label: 'Open Context Diagram',
+                          url: diagram.visualiserUrl,
+                        }
+                      : undefined
+                  }
+                />
+              ))
+          }
         </div>
         <Footer />
         <!-- Add edit this page button  with icon and text-->

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/resources/_index.data.ts

@@ -0,0 +1,89 @@
+import { isSSR } from '@utils/feature';
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+
+// The Resources page lists the top-level resources (services, flows, entities and
+// data stores) attached to a single system or domain. It is only available for
+// systems and domains — every other resource type 404s.
+const SUPPORTED_TYPES = ['systems', 'domains'] as const;
+type SupportedType = (typeof SUPPORTED_TYPES)[number];
+
+const isSupportedType = (type: string): type is SupportedType => SUPPORTED_TYPES.includes(type as SupportedType);
+
+const loadResourceOwner = async (type: SupportedType) => {
+  if (type === 'systems') {
+    const { getSystems } = await import('@utils/collections/systems');
+    return getSystems();
+  }
+  const { getDomains } = await import('@utils/collections/domains');
+  return getDomains();
+};
+
+// A system/domain only gets a Resources page when it actually has resources attached.
+// Mirrors what the page renders: services, flows, entities, data stores and (domains
+// only) the domain's own messages.
+const hasResources = (owner: any): boolean => {
+  const data = owner?.data ?? {};
+  return (
+    (data.services || []).length > 0 ||
+    (data.flows || []).length > 0 ||
+    (data.entities || []).length > 0 ||
+    (data.containers || []).length > 0 ||
+    (data.sends || []).length > 0 ||
+    (data.receives || []).length > 0
+  );
+};
+
+export class Page extends HybridPage {
+  static get prerender(): boolean {
+    return !isSSR();
+  }
+
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    if (isSSR()) {
+      return [];
+    }
+
+    const owners = await Promise.all(SUPPORTED_TYPES.map((type) => loadResourceOwner(type)));
+
+    return SUPPORTED_TYPES.flatMap((type, index) =>
+      owners[index]
+        .filter((owner) => hasResources(owner))
+        .map((owner) => ({
+          params: {
+            type,
+            id: owner.data.id,
+            version: owner.data.version,
+          },
+          props: {
+            ...owner,
+          },
+        }))
+    );
+  }
+
+  protected static async fetchData(params: any) {
+    const { type, id, version } = params;
+
+    if (!type || !id || !version || !isSupportedType(type)) {
+      return null;
+    }
+
+    const owners = await loadResourceOwner(type);
+    const owner = owners.find((o) => o.data.id === id && o.data.version === version);
+
+    if (!owner || !hasResources(owner)) {
+      return null;
+    }
+
+    return {
+      ...owner,
+    };
+  }
+
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Resources not found',
+    });
+  }
+}