@eventcatalog/core 4.10.5 → 4.10.7

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

@@ -444,8 +444,18 @@ const title = `${currentTypeConfig.label} (${data.length})`;
     #eventcatalog-header {
       left: calc(var(--ec-vertical-nav-width, 14rem) + var(--ec-discover-sidebar-width, 320px)) !important;
     }
+    :root[data-embedded='true'] #discover-filter-sidebar {
+      display: none !important;
+    }
+    :root[data-embedded='true'] #discover-results {
+      margin-left: 0 !important;
+    }
+    :root[data-embedded='true'] #discover-page {
+      height: 100dvh !important;
+    }
   </style>
   <main
+    id="discover-page"
     class="ml-0 flex h-full min-h-0 flex-col overflow-hidden bg-[rgb(var(--ec-page-bg))]"
     style={`--ec-discover-sidebar-width: 320px; margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1); height: calc(100dvh - 60px);`}
   >

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

@@ -130,8 +130,14 @@ const apiAccessEnabled = isEventCatalogScaleEnabled();
 ---
 
 <VerticalSideBarLayout title={pageTitle}>
+  <style is:global>
+    :root[data-embedded='true'] #schema-detail-page {
+      height: 100dvh !important;
+    }
+  </style>
   {/* The schema viewer is an app-style surface: pull it out of the content gutter so it sits flush against the sidebar. */}
   <div
+    id="schema-detail-page"
     class="h-[calc(100vh-4rem)] overflow-hidden flex flex-col"
     style="margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1);"
   >

package/eventcatalog/src/pages/schemas/explorer/index.astro

@@ -17,8 +17,18 @@ const apiAccessEnabled = isEventCatalogScaleEnabled();
     #eventcatalog-header {
       left: calc(var(--ec-vertical-nav-width, 14rem) + var(--ec-schema-sidebar-width, 360px)) !important;
     }
+    :root[data-embedded='true'] #schema-explorer-sidebar {
+      display: none !important;
+    }
+    :root[data-embedded='true'] #schema-explorer-content {
+      margin-left: 0 !important;
+    }
+    :root[data-embedded='true'] #schema-explorer-page {
+      height: 100dvh !important;
+    }
   </style>
   <main
+    id="schema-explorer-page"
     class="min-h-0 overflow-hidden bg-[rgb(var(--ec-page-bg))]"
     style={`--ec-schema-sidebar-width: 360px; margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1); height: calc(100dvh - 60px);`}
   >

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

@@ -20,9 +20,9 @@ const {
 ---
 
 <VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
-  <div class="p-2">
+  <div id="visualiser-page" class="p-2">
     <div
-      class="h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
+      class="visualiser-viewport h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
       id={`${id}-portal`}
       transition:name="visualiser-graph"
     >
@@ -45,15 +45,13 @@ const {
   <ClientRouter />
 </VisualiserLayout>
 
-<script define:vars={{ id }}>
-  document.addEventListener('DOMContentLoaded', () => {
-    const urlSearchParams = new URLSearchParams(window.location.search);
-    const params = Object.fromEntries(urlSearchParams.entries());
-    const embeded = params.embed === 'true' ? true : false;
-    const viewport = document.getElementById(`${id}-portal`);
+<style is:global>
+  html[data-embedded='true'] #visualiser-page {
+    box-sizing: border-box;
+    height: 100vh;
+  }
 
-    if (embeded) {
-      viewport.style.height = 'calc(100vh - 30px)';
-    }
-  });
-</script>
+  html[data-embedded='true'] #visualiser-page .visualiser-viewport {
+    height: 100%;
+  }
+</style>

package/eventcatalog/src/pages/visualiser/graph/index.astro

@@ -16,9 +16,25 @@ const { nodes: wireNodes, links: wireLinks, linkLabels } = toCatalogForceGraphWi
 ---
 
 <VisualiserLayout title="Visualiser | Architecture Graph" description="Force-directed graph of every resource in the catalog">
-  <div class="m-4">
-    <div class="h-[calc(100vh-130px)] w-full relative border border-[rgb(var(--ec-page-border))] rounded-md overflow-hidden">
+  <div id="architecture-graph-page" class="m-4">
+    <div
+      id="architecture-graph-container"
+      class="h-[calc(100vh-130px)] w-full relative border border-[rgb(var(--ec-page-border))] rounded-md overflow-hidden"
+    >
       <CatalogForceGraph nodes={wireNodes} links={wireLinks} linkLabels={linkLabels} client:only="react" />
     </div>
   </div>
 </VisualiserLayout>
+
+<style is:global>
+  html[data-embedded='true'] #architecture-graph-page {
+    box-sizing: border-box;
+    height: 100vh;
+    margin: 0;
+    padding: 1rem;
+  }
+
+  html[data-embedded='true'] #architecture-graph-container {
+    height: 100%;
+  }
+</style>

package/eventcatalog/src/pages/visualiser/system-context-map/index.astro

@@ -7,9 +7,9 @@ const id = 'system-context-map';
 ---
 
 <VisualiserLayout title={`Visualiser | System context map`}>
-  <div class="p-2">
+  <div id="system-context-map-page" class="p-2">
     <div
-      class="h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
+      class="system-context-map-viewport h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
       id={`${id}-portal`}
       transition:name="visualiser-graph"
     >
@@ -27,15 +27,13 @@ const id = 'system-context-map';
   <ClientRouter />
 </VisualiserLayout>
 
-<script define:vars={{ id }}>
-  document.addEventListener('DOMContentLoaded', () => {
-    const urlSearchParams = new URLSearchParams(window.location.search);
-    const params = Object.fromEntries(urlSearchParams.entries());
-    const embeded = params.embed === 'true' ? true : false;
-    const viewport = document.getElementById(`${id}-portal`);
+<style is:global>
+  html[data-embedded='true'] #system-context-map-page {
+    box-sizing: border-box;
+    height: 100vh;
+  }
 
-    if (embeded && viewport) {
-      viewport.style.height = 'calc(100vh - 30px)';
-    }
-  });
-</script>
+  html[data-embedded='true'] #system-context-map-page .system-context-map-viewport {
+    height: 100%;
+  }
+</style>

package/eventcatalog/src/pages/visualiser/systems/[id]/[version]/context/index.astro

@@ -17,9 +17,9 @@ const {
 ---
 
 <VisualiserLayout title={`Visualiser | ${props.data.name} - System Context`} description={props.data.summary}>
-  <div class="p-2">
+  <div id="system-context-map-page" class="p-2">
     <div
-      class="h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
+      class="system-context-map-viewport h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
       id={`${id}-portal`}
       transition:name="visualiser-graph"
     >
@@ -37,15 +37,13 @@ const {
   <ClientRouter />
 </VisualiserLayout>
 
-<script define:vars={{ id }}>
-  document.addEventListener('DOMContentLoaded', () => {
-    const urlSearchParams = new URLSearchParams(window.location.search);
-    const params = Object.fromEntries(urlSearchParams.entries());
-    const embeded = params.embed === 'true' ? true : false;
-    const viewport = document.getElementById(`${id}-portal`);
+<style is:global>
+  html[data-embedded='true'] #system-context-map-page {
+    box-sizing: border-box;
+    height: 100vh;
+  }
 
-    if (embeded) {
-      viewport.style.height = 'calc(100vh - 30px)';
-    }
-  });
-</script>
+  html[data-embedded='true'] #system-context-map-page .system-context-map-viewport {
+    height: 100%;
+  }
+</style>

package/eventcatalog/src/remark-plugins/mermaid.ts

@@ -11,15 +11,62 @@ const escapeMap: Record<string, string> = {
 
 const escapeHtml = (str: string) => str.replace(/[&<>"']/g, (c) => escapeMap[c]);
 
+const PLACEMENTS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;
+
+export interface MermaidCodeBlockOptions {
+  /** Position of the interactive controls */
+  placement?: (typeof PLACEMENTS)[number];
+  /** Force the interactive controls on or off */
+  actions?: boolean;
+}
+
+/**
+ * Parses options from the code fence meta string, e.g.
+ *
+ *   ```mermaid placement="top-left" actions={false}
+ *
+ * Supports `placement="..."` / `placement='...'` and `actions={true|false}` / `actions=true|false`.
+ */
+export function parseMermaidMeta(meta: string | null | undefined): MermaidCodeBlockOptions {
+  const options: MermaidCodeBlockOptions = {};
+  if (!meta) return options;
+
+  const placementMatch = meta.match(/placement=(?:["']([^"']+)["']|\{["']([^"']+)["']\})/);
+  const placement = placementMatch?.[1] ?? placementMatch?.[2];
+  if (placement && (PLACEMENTS as readonly string[]).includes(placement)) {
+    options.placement = placement as MermaidCodeBlockOptions['placement'];
+  }
+
+  const actionsMatch = meta.match(/actions=\{?(true|false)\}?/);
+  if (actionsMatch) {
+    options.actions = actionsMatch[1] === 'true';
+  }
+
+  return options;
+}
+
+/**
+ * Builds the `data-*` attributes used by the client-side renderer to configure the controls
+ */
+export function buildControlAttributes(options: MermaidCodeBlockOptions): string {
+  const attributes: string[] = [];
+  if (options.placement) attributes.push(`data-placement="${options.placement}"`);
+  if (options.actions !== undefined) attributes.push(`data-actions="${options.actions}"`);
+  return attributes.length > 0 ? ` ${attributes.join(' ')}` : '';
+}
+
 export const mermaid: RemarkPlugin<[]> = () => (tree) => {
   visit(tree, 'code', (node) => {
     if (node.lang !== 'mermaid') return;
 
+    // @ts-ignore meta is present on code nodes
+    const controlAttributes = buildControlAttributes(parseMermaidMeta(node.meta));
+
     // @ts-ignore test
     node.type = 'html';
     node.value = `
     <div class="mermaid-block pb-4">
-      <div class="mermaid border border-[rgb(var(--ec-page-border))] rounded-lg p-1" data-content="${escapeHtml(node.value)}">
+      <div class="mermaid border border-[rgb(var(--ec-page-border))] rounded-lg p-1" data-content="${escapeHtml(node.value)}"${controlAttributes}>
         <p class="text-[rgb(var(--ec-page-text-muted))]">Loading graph...</p>
       </div>
     </div>

package/eventcatalog/src/stores/theme-store.ts

@@ -14,6 +14,15 @@ const getDefaultTheme = (): Theme => {
   return DEFAULT_THEME;
 };
 
+const getEmbeddedTheme = (): Theme | null => {
+  if (typeof window === 'undefined') return null;
+
+  const params = new URLSearchParams(window.location.search);
+  const requestedTheme = params.get('theme');
+  const embedded = params.get('embed') === 'true';
+  return embedded && (requestedTheme === 'light' || requestedTheme === 'dark') ? requestedTheme : null;
+};
+
 // Apply theme to document via data-theme attribute
 const applyTheme = (theme: Theme) => {
   if (typeof document !== 'undefined') {
@@ -25,6 +34,13 @@ const applyTheme = (theme: Theme) => {
 const initStore = () => {
   if (typeof window !== 'undefined') {
     try {
+      const embeddedTheme = getEmbeddedTheme();
+      if (embeddedTheme) {
+        themeStore.set(embeddedTheme);
+        applyTheme(embeddedTheme);
+        return;
+      }
+
       const stored = localStorage.getItem(THEME_KEY) as Theme | null;
       if (stored && (stored === 'light' || stored === 'dark')) {
         // User has explicitly chosen a theme, use that
@@ -49,6 +65,8 @@ if (typeof window !== 'undefined') {
   // Listen for system preference changes
   if (window.matchMedia) {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      if (getEmbeddedTheme()) return;
+
       // Only follow system preference if user hasn't explicitly set a theme
       const stored = localStorage.getItem(THEME_KEY);
       if (!stored) {