@eventcatalog/core 5.0.0-beta.9 → 5.0.0

package/eventcatalog/integrations/config-loader.mjs

@@ -1,8 +1,8 @@
-import { readFile, rm, copyFile, mkdtemp, symlink } from 'node:fs/promises';
+import { readFile, rm } from 'node:fs/promises';
 import { existsSync } from 'node:fs';
 import path from 'node:path';
 import { pathToFileURL } from 'node:url';
-import { tmpdir } from 'node:os';
+import { register } from 'node:module';
 
 export async function cleanup(projectDirectory) {
   const filePath = path.join(projectDirectory, 'eventcatalog.config.mjs');
@@ -11,75 +11,73 @@ export async function cleanup(projectDirectory) {
   }
 }
 
-const findNodeModulesDirectory = (directory) => {
-  let currentDirectory = directory;
-
-  while (true) {
-    const nodeModulesDirectory = path.join(currentDirectory, 'node_modules');
-
-    if (existsSync(nodeModulesDirectory)) {
-      return nodeModulesDirectory;
-    }
-
-    const parentDirectory = path.dirname(currentDirectory);
-
-    if (parentDirectory === currentDirectory) {
-      return undefined;
-    }
-
-    currentDirectory = parentDirectory;
-  }
+let hidesConfigModuleTypeWarning = false;
+let loads = 0;
+
+/**
+ * Node loads an eventcatalog.config.js that uses import/export as an ES module even when the catalog's
+ * package.json has no "type": "module" (a new catalog's doesn't), and warns that it had to detect it.
+ * That warning, for the config file only, is hidden: the catalog doesn't need to change anything.
+ */
+const hideConfigModuleTypeWarning = () => {
+  if (hidesConfigModuleTypeWarning) return;
+  hidesConfigModuleTypeWarning = true;
+
+  const emitWarning = process.emitWarning;
+  process.emitWarning = function (warning, ...args) {
+    const code = typeof args[0] === 'object' ? args[0]?.code : args[1];
+    const message = typeof warning === 'string' ? warning : warning?.message;
+    if (code === 'MODULE_TYPELESS_PACKAGE_JSON' && message?.includes('eventcatalog.config.js')) return;
+    return emitWarning.call(this, warning, ...args);
+  };
 };
 
-const linkNodeModulesIntoTempDirectory = async ({ projectDirectory, tempDir }) => {
-  const nodeModulesDirectory = findNodeModulesDirectory(projectDirectory);
-
-  if (!nodeModulesDirectory) {
-    return;
-  }
-
-  await symlink(nodeModulesDirectory, path.join(tempDir, 'node_modules'), 'dir');
+// Marks a config URL Node should load as an ES module, whatever the catalog's package.json says
+const AS_MODULE_QUERY = 'eventcatalog-config-as-module';
+let loadsMarkedConfigsAsModules = false;
+
+/**
+ * Node won't load a config written with import/export in a catalog whose package.json has
+ * "type": "commonjs". A loader hook loads that config file (and only it) as an ES module.
+ */
+const loadMarkedConfigsAsModules = () => {
+  if (loadsMarkedConfigsAsModules) return;
+  loadsMarkedConfigsAsModules = true;
+  const hook = `export async function load(url, context, nextLoad) {
+    return nextLoad(url, url.includes('${AS_MODULE_QUERY}=') ? { ...context, format: 'module' } : context);
+  }`;
+  register(`data:text/javascript,${encodeURIComponent(hook)}`);
 };
 
-const createTemporaryConfigDirectory = async (projectDirectory) => {
-  const nodeModulesDirectory = findNodeModulesDirectory(projectDirectory);
-
-  if (nodeModulesDirectory) {
-    return mkdtemp(path.join(nodeModulesDirectory, '.eventcatalog-config-'));
+/**
+ * Loads the catalog's eventcatalog.config.js from where it is, so paths it builds from its own location
+ * (`import.meta.url`, `import.meta.dirname`) and its relative imports point into the catalog. It was
+ * loaded from a copy in a temporary folder before, which broke them (e.g. the paths to a generator's specs).
+ */
+const isCommonJSPackage = async (projectDirectory) => {
+  try {
+    const packageJson = JSON.parse(await readFile(path.join(projectDirectory, 'package.json'), 'utf-8'));
+    return packageJson?.type === 'commonjs';
+  } catch {
+    return false;
   }
-
-  const tempDir = await mkdtemp(path.join(tmpdir(), 'eventcatalog-config-'));
-  await linkNodeModulesIntoTempDirectory({ projectDirectory, tempDir });
-  return tempDir;
 };
 
 export const getEventCatalogConfigFile = async (projectDirectory) => {
-  let tempDir;
-
   try {
-    let configFilePath = path.join(projectDirectory, 'eventcatalog.config.js');
-
-    const filePath = path.join(projectDirectory, 'package.json');
-    const packageJson = JSON.parse(await readFile(filePath, 'utf-8'));
+    hideConfigModuleTypeWarning();
+    // A catalog's config is an ES module, as it always was (with "type": "commonjs" it was loaded from an .mjs copy)
+    const asModule = await isCommonJSPackage(projectDirectory);
+    if (asModule) loadMarkedConfigsAsModules();
 
-    if (packageJson?.type !== 'module') {
-      // Importing CommonJS config via ESM import requires an .mjs file.
-      // Keep this temp copy outside the project directory so Astro/Vite
-      // file watchers do not trigger a dev-server restart during startup.
-      tempDir = await createTemporaryConfigDirectory(projectDirectory);
-      configFilePath = path.join(tempDir, 'eventcatalog.config.mjs');
-      await copyFile(path.join(projectDirectory, 'eventcatalog.config.js'), configFilePath);
-    }
-
-    const configFileURL = `${pathToFileURL(configFilePath).href}?t=${Date.now()}`;
-    const config = await import(/* @vite-ignore */ configFileURL);
+    const configFileURL = pathToFileURL(path.join(projectDirectory, 'eventcatalog.config.js')).href;
+    // A new URL each time, so a changed config is loaded again (not `?t=`: Vite drops it as its own timestamp)
+    const query = `${asModule ? AS_MODULE_QUERY : 'loaded'}=${Date.now()}-${loads++}`;
+    const config = await import(/* @vite-ignore */ `${configFileURL}?${query}`);
 
     return config.default;
   } finally {
+    // Earlier versions loaded a copy from eventcatalog.config.mjs in the catalog: remove one left behind
     await cleanup(projectDirectory);
-
-    if (tempDir) {
-      await rm(tempDir, { recursive: true, force: true });
-    }
   }
 };

package/eventcatalog/integrations/skip-startup-reload.mjs

@@ -0,0 +1,31 @@
+// Astro writes its content data store as the dev server starts, which sends the browser a
+// full reload. With no browser connected yet, Vite holds that reload and hands it to the
+// first page that connects, so the first page opened after every start loaded twice.
+// A reload sent before any page has been served has nothing to refresh (a tab left open
+// from the previous run reloads itself when it reconnects), so drop those. Once a page has
+// been requested, reloads pass through as usual.
+
+const isFullReload = (payload) => typeof payload === 'object' && payload?.type === 'full-reload';
+
+export default function skipStartupReload() {
+  return {
+    name: 'eventcatalog:skip-startup-reload',
+    apply: 'serve',
+    configureServer(server) {
+      let pageRequested = false;
+      server.middlewares.use((req, _res, next) => {
+        // Browser navigations ask for HTML; the CLI's prewarm request doesn't
+        if (!pageRequested && req.headers.accept?.includes('text/html')) pageRequested = true;
+        next();
+      });
+
+      for (const channel of new Set([server.ws, server.environments?.client?.hot].filter(Boolean))) {
+        const send = channel.send.bind(channel);
+        channel.send = (...args) => {
+          if (!pageRequested && isFullReload(args[0])) return;
+          return send(...args);
+        };
+      }
+    },
+  };
+}

package/eventcatalog/integrations/stable-dependency-order.mjs

@@ -0,0 +1,29 @@
+// Astro crawls framework packages with vitefu, which looks them up concurrently and lists
+// each one in `resolve.external` / `resolve.noExternal` as its lookup finishes, so the
+// order changes from one start to the next. Vite hashes these lists unsorted to decide
+// whether its pre-bundled dependencies are still valid, so every `eventcatalog dev` saw a
+// "changed" config and re-bundled all of them. Only membership matters in these lists, so
+// sorting them keeps the hash (and the dependency cache) stable across starts.
+
+const byName = (a, b) => {
+  const left = String(a);
+  const right = String(b);
+  return left < right ? -1 : left > right ? 1 : 0;
+};
+
+const sortResolveLists = (resolve) => {
+  if (Array.isArray(resolve?.external)) resolve.external.sort(byName);
+  if (Array.isArray(resolve?.noExternal)) resolve.noExternal.sort(byName);
+};
+
+export default function stableDependencyOrder() {
+  return {
+    name: 'eventcatalog:stable-dependency-order',
+    apply: 'serve',
+    configResolved(config) {
+      sortResolveLists(config.resolve);
+      sortResolveLists(config.ssr);
+      for (const environment of Object.values(config.environments ?? {})) sortResolveLists(environment.resolve);
+    },
+  };
+}

package/eventcatalog/integrations/storage.mjs

@@ -0,0 +1,20 @@
+import { startStorage } from '../src/features/storage/database.ts';
+
+// The state EventCatalog keeps (`storage` in eventcatalog.config.js): as the dev server starts, its database is opened
+// and brought up to date (migrated), whether or not a feature that uses it is opened. `eventcatalog start` does the
+// same through /_eventcatalog/start.
+export default function storage() {
+  return {
+    name: 'eventcatalog-storage',
+    hooks: {
+      'astro:server:setup': async ({ logger }) => {
+        try {
+          const file = await startStorage();
+          if (file) logger.info(`Database ready (${file})`);
+        } catch (error) {
+          logger.error(`Could not open the database: ${error.message}`);
+        }
+      },
+    },
+  };
+}

package/eventcatalog/integrations/studio-server.mjs

@@ -1,4 +1,5 @@
 import { getStudioRuntime } from '../src/features/studio/server/runtime.ts';
+import { isDatabaseTooNew } from '../src/features/storage/migrations.ts';
 import config from '../src/utils/eventcatalog-config/source.ts';
 import { isCanvasEnabled } from '../src/utils/feature.ts';
 
@@ -14,8 +15,10 @@ export default function studioServer() {
         const projectDirectory = process.env.PROJECT_DIR || process.cwd();
         // Canvases are loaded from storage before anyone can open one
         try {
-          await runtime.useStorage(config.studio?.storage, projectDirectory);
+          await runtime.useStorage(config.storage, projectDirectory);
         } catch (error) {
+          // Not kept in memory instead (changes would quietly stop being saved): Studio's pages say why
+          if (isDatabaseTooNew(error)) return logger.error(`Studio isn't available: ${error.message}`);
           logger.error(`Could not use the Studio storage configured, keeping canvases in memory: ${error.message}`);
           await runtime.useStorage({ type: 'memory' }, projectDirectory);
         }

package/eventcatalog/src/components/CatalogGraph/CatalogForceGraph.tsx

@@ -170,6 +170,16 @@ const nodeRadius = (degree: number, isHub = false) =>
 /** Above this node count, expensive extras (collision force) are disabled. */
 const LARGE_GRAPH_NODE_COUNT = 1500;
 
+/**
+ * The first layout settles before it paints instead of animating into place for ~5s: ticks
+ * run in short slices across frames (no long tasks) until it settles, ~40ms of work for 100
+ * nodes. Big catalogs stop once ticking has taken the work limit, paint past their largest
+ * moves and animate the rest. The limit counts ticking time, not elapsed time, so a page busy
+ * hydrating other islands doesn't cut the settle short.
+ */
+const INITIAL_SETTLE_SLICE_MS = 12;
+const INITIAL_SETTLE_WORK_LIMIT_MS = 400;
+
 /** Sprite resolution for node icons (drawn scaled-down, so keep it crisp) */
 const ICON_SPRITE_SIZE = 64;
 
@@ -617,6 +627,10 @@ const CatalogForceGraph = ({
     // normal-sized, whatever the lens's usual hubs are
     const isHub = (d: SimNode) => (focusKey ? d.key === focusKey : hubs.has(d.collection));
 
+    // Later layouts (lens, focus and filter changes) animate from the previous positions
+    const isFirstLayout = positionsRef.current.size === 0;
+    // Nothing paints until the first layout has settled (see INITIAL_SETTLE_SLICE_MS)
+    let settling = isFirstLayout;
     const visibleNodes: SimNode[] = viewNodes
       .filter((n) => !hiddenCollections.has(n.collection))
       .map((n) => ({ ...n, degree: 0, ...positionsRef.current.get(n.key) }));
@@ -734,6 +748,7 @@ const CatalogForceGraph = ({
     };
 
     const draw = () => {
+      if (settling) return;
       context.save();
       context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
       context.clearRect(0, 0, width, height);
@@ -1014,6 +1029,29 @@ const CatalogForceGraph = ({
       );
     }
 
+    // Settle the first layout before it paints rather than animating it into place
+    let settleFrame: number | undefined;
+    if (isFirstLayout) {
+      simulation.stop();
+      let workLeft = INITIAL_SETTLE_WORK_LIMIT_MS;
+      const settle = () => {
+        const sliceStart = performance.now();
+        const sliceEnd = sliceStart + Math.min(INITIAL_SETTLE_SLICE_MS, workLeft);
+        while (simulation.alpha() > simulation.alphaMin() && performance.now() < sliceEnd) simulation.tick();
+        workLeft -= performance.now() - sliceStart;
+        if (simulation.alpha() > simulation.alphaMin() && workLeft > 0) {
+          settleFrame = requestAnimationFrame(settle);
+          return;
+        }
+        settling = false;
+        // Settled: paint it as is (restarting would run one tick more than the animated
+        // layout). Otherwise paint and animate whatever is left.
+        if (simulation.alpha() <= simulation.alphaMin()) fitToView();
+        else simulation.restart();
+      };
+      settleFrame = requestAnimationFrame(settle);
+    }
+
     const findNode = (canvasX: number, canvasY: number): SimNode | null => {
       if (Number.isNaN(canvasX) || Number.isNaN(canvasY)) return null;
       const x = transform.invertX(canvasX);
@@ -1219,6 +1257,7 @@ const CatalogForceGraph = ({
       for (const node of visibleNodes) {
         if (node.x !== undefined && node.y !== undefined) positionsRef.current.set(node.key, { x: node.x, y: node.y });
       }
+      if (settleFrame !== undefined) cancelAnimationFrame(settleFrame);
       simulation.stop();
       // The tooltip outlives this effect — never leave it showing stale content
       tooltip.style.opacity = '0';

package/eventcatalog/src/components/ChatPanel/ChatPanel.tsx

@@ -29,6 +29,8 @@ const CHAT_PANEL_STYLES = `
   }
   .ec-chat-surface { font-weight: 400; }
   .ec-chat-avatar { background: rgb(var(--ec-accent) / .06); animation: ec-chat-breathe 5s ease-in-out infinite; }
+  /* The closed panel stays on the page (off screen): a running animation there still costs every frame */
+  .ec-chat-surface[aria-hidden='true'] .ec-chat-avatar { animation-play-state: paused; }
   .ec-chat-suggestion { width: fit-content; max-width: 100%; transition: background 180ms, transform 180ms; }
   .ec-chat-suggestion:hover { transform: translateX(3px); }
   .ec-chat-message { animation: fadeInUp 280ms ease-out both; }

package/eventcatalog/src/components/Homepage/CatalogDashboard.astro

@@ -0,0 +1,342 @@
+---
+import config from '@config';
+import { buildUrl } from '@utils/url-builder';
+import { getColorForCollection } from '@utils/collection-colors';
+import { isArchitectureGraphEnabled, isEventCatalogChatEnabled } from '@utils/feature';
+import CatalogForceGraph from '@components/CatalogGraph/CatalogForceGraph';
+import { getCatalogForceGraph, toCatalogForceGraphWire } from '@utils/node-graphs/catalog-force-graph';
+import { getDashboard, type DashboardCollection } from '@utils/homepage-dashboard';
+import { Boxes, Clock, FileJson, Mail, Network, Search, Server, Sparkles, Users, Waypoints } from 'lucide-react';
+
+interface Props {
+  /** The heading, the catalog's title by default */
+  title?: string;
+  /** Under the heading, the catalog's tagline by default */
+  description?: string;
+}
+
+const {
+  title = config?.title || config?.organizationName || 'EventCatalog',
+  description = config?.tagline || 'Explore and understand your event-driven architecture.',
+} = Astro.props;
+
+const dashboard = await getDashboard();
+const { counts, recentlyUpdated } = dashboard;
+const chatEnabled = isEventCatalogChatEnabled();
+// The architecture graph leads the dashboard; it's opt-in while in beta, and without it the dashboard shows what changed recently
+const graph = isArchitectureGraphEnabled() ? toCatalogForceGraphWire(await getCatalogForceGraph()) : undefined;
+
+const TYPE_LABELS: Record<DashboardCollection, string> = {
+  domains: 'Domain',
+  services: 'Service',
+  events: 'Event',
+  commands: 'Command',
+  queries: 'Query',
+  flows: 'Flow',
+};
+// The colour each kind of resource has across the catalog, from the theme's badge colours
+const badgeStyle = (collection: string) => {
+  const color = getColorForCollection(collection);
+  return `color: rgb(var(--ec-badge-color-${color}-text)); background: rgb(var(--ec-badge-color-${color}-background));`;
+};
+
+const stats = [
+  { label: 'Domains', value: counts.domains, href: buildUrl('/discover/domains'), icon: Boxes },
+  { label: 'Services', value: counts.services, href: buildUrl('/discover/services'), icon: Server },
+  { label: 'Messages', value: counts.messages, href: buildUrl('/discover/events'), icon: Mail },
+  { label: 'Flows', value: counts.flows, href: buildUrl('/discover/flows'), icon: Waypoints },
+  { label: 'Schemas', value: counts.schemas, href: buildUrl('/schemas/explorer'), icon: FileJson },
+  { label: 'Teams', value: counts.teams, href: buildUrl('/directory/teams'), icon: Users },
+];
+
+const formatDate = (timestamp: number) =>
+  new Date(timestamp).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
+---
+
+<div class="ec-dashboard">
+  <!-- Header -->
+  <header class="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
+    <div class="min-w-0">
+      <h1 class="text-[26px] font-semibold leading-tight tracking-tight text-[rgb(var(--ec-page-text))] md:text-[30px]">
+        {title}
+      </h1>
+      <p class="mt-1.5 max-w-2xl text-[14px] leading-relaxed text-[rgb(var(--ec-page-text-muted))]">
+        {description}
+      </p>
+    </div>
+    <div class="flex w-full items-center gap-2 lg:w-auto">
+      <button type="button" data-dashboard-search class="ec-dashboard-search group">
+        <Search className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" />
+        <span class="flex-1 text-left">Search the catalog</span>
+        <kbd class="ec-dashboard-kbd">⌘K</kbd>
+      </button>
+      {
+        chatEnabled && (
+          <button type="button" data-dashboard-ask class="ec-dashboard-button">
+            <Sparkles className="h-4 w-4" />
+            Ask
+          </button>
+        )
+      }
+    </div>
+  </header>
+
+  <!-- Counts -->
+  <section class="ec-dashboard-stats mt-8" aria-label="Catalog at a glance">
+    {
+      stats.map((stat) => (
+        <a href={stat.href} class="ec-dashboard-card ec-dashboard-stat group">
+          <div class="flex items-center justify-between">
+            <span class="text-[12px] font-medium text-[rgb(var(--ec-page-text-muted))]">{stat.label}</span>
+            <stat.icon className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))] transition-colors group-hover:text-[rgb(var(--ec-page-text))]" />
+          </div>
+          <span class="mt-2 block text-[28px] font-semibold leading-none tracking-tight tabular-nums text-[rgb(var(--ec-page-text))]">
+            {stat.value}
+          </span>
+        </a>
+      ))
+    }
+  </section>
+
+  <!-- The architecture graph, or what changed recently without it -->
+  <div class="mt-6">
+    {
+      graph ? (
+        <section class="ec-dashboard-card overflow-hidden">
+          <div class="ec-dashboard-card-header">
+            <h2 class="ec-dashboard-title">
+              <Network className="h-4 w-4" /> Architecture
+            </h2>
+          </div>
+          <div class="relative h-[34rem] border-t border-[rgb(var(--ec-page-border))]">
+            <CatalogForceGraph
+              client:only="react"
+              nodes={graph.nodes}
+              links={graph.links}
+              linkLabels={graph.linkLabels}
+              initialLens="domains"
+              showSearch
+              showLegend
+              showLensPicker
+              syncUrl={false}
+              zoomOnScroll={false}
+              openInGraphUrl={buildUrl('/visualiser/graph')}
+              openInGraphLabel="Open full screen"
+            />
+          </div>
+        </section>
+      ) : (
+        <section class="ec-dashboard-card">
+          <div class="ec-dashboard-card-header">
+            <h2 class="ec-dashboard-title">
+              <Clock className="h-4 w-4" /> Recently updated
+            </h2>
+          </div>
+          {recentlyUpdated.length === 0 ? (
+            <p class="px-5 pb-5 text-[13px] text-[rgb(var(--ec-page-text-muted))]">Nothing to show yet.</p>
+          ) : (
+            <ul class="divide-y divide-[rgb(var(--ec-page-border))]">
+              {recentlyUpdated.map((resource) => (
+                <li>
+                  <a href={resource.href} class="ec-dashboard-row">
+                    <span class="ec-dashboard-type" style={badgeStyle(resource.collection)}>
+                      {TYPE_LABELS[resource.collection]}
+                    </span>
+                    <span class="min-w-0 flex-1">
+                      <span class="block truncate text-[13.5px] font-medium text-[rgb(var(--ec-page-text))]">
+                        {resource.name}
+                        <span class="ml-1.5 font-mono text-[11.5px] font-normal text-[rgb(var(--ec-page-text-muted))]">
+                          v{resource.version}
+                        </span>
+                      </span>
+                      {resource.summary && (
+                        <span class="block truncate text-[12.5px] text-[rgb(var(--ec-page-text-muted))]">{resource.summary}</span>
+                      )}
+                    </span>
+                    {resource.owners[0] && (
+                      <span class="hidden shrink-0 text-[12px] text-[rgb(var(--ec-page-text-muted))] md:block">
+                        {resource.owners[0].name}
+                      </span>
+                    )}
+                    <time
+                      class="w-24 shrink-0 text-right text-[12px] tabular-nums text-[rgb(var(--ec-page-text-muted))]"
+                      datetime={new Date(resource.updatedAt!).toISOString()}
+                      data-relative-time
+                    >
+                      {formatDate(resource.updatedAt!)}
+                    </time>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      )
+    }
+  </div>
+</div>
+
+<script>
+  // The search bar and Ask button open the catalog's search and assistant
+  const bind = () => {
+    document.querySelector('[data-dashboard-search]')?.addEventListener('click', () => {
+      (window as any).searchModalState?.open();
+    });
+    document.querySelector('[data-dashboard-ask]')?.addEventListener('click', () => {
+      window.dispatchEvent(new CustomEvent('eventcatalog:open-chat'));
+    });
+
+    // "3 days ago", counted in the browser so a prerendered page stays current
+    const format = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+    const units: [Intl.RelativeTimeFormatUnit, number][] = [
+      ['year', 365 * 24 * 3600],
+      ['month', 30 * 24 * 3600],
+      ['week', 7 * 24 * 3600],
+      ['day', 24 * 3600],
+      ['hour', 3600],
+      ['minute', 60],
+    ];
+    document.querySelectorAll<HTMLTimeElement>('time[data-relative-time]').forEach((time) => {
+      const seconds = (new Date(time.dateTime).getTime() - Date.now()) / 1000;
+      const [unit, size] = units.find(([, size]) => Math.abs(seconds) >= size) ?? ['minute', 60];
+      time.textContent = format.format(Math.round(seconds / size), unit);
+      time.title = new Date(time.dateTime).toLocaleString();
+    });
+  };
+  bind();
+  document.addEventListener('astro:page-load', bind);
+</script>
+
+<style is:global>
+  .ec-dashboard {
+    max-width: 96rem;
+    padding-bottom: 2.5rem;
+  }
+  .ec-dashboard-card {
+    border: 1px solid rgb(var(--ec-page-border));
+    border-radius: 0.875rem;
+    background: rgb(var(--ec-card-bg, var(--ec-page-bg)));
+  }
+  .ec-dashboard-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem 0.75rem;
+  }
+  .ec-dashboard-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 13.5px;
+    font-weight: 600;
+    color: rgb(var(--ec-page-text));
+  }
+  .ec-dashboard-title svg {
+    color: rgb(var(--ec-page-text-muted));
+  }
+  .ec-dashboard-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 12px;
+    font-weight: 500;
+    color: rgb(var(--ec-page-text-muted));
+  }
+  .ec-dashboard-link:hover {
+    color: rgb(var(--ec-page-text));
+  }
+  .ec-dashboard-search {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 0.625rem;
+    min-width: 0;
+    height: 2.5rem;
+    padding: 0 0.75rem;
+    border: 1px solid rgb(var(--ec-page-border));
+    border-radius: 0.625rem;
+    background: rgb(var(--ec-card-bg, var(--ec-page-bg)));
+    font-size: 13px;
+    color: rgb(var(--ec-page-text-muted));
+    transition: border-color 150ms;
+  }
+  @media (min-width: 1024px) {
+    .ec-dashboard-search {
+      width: 22rem;
+      flex: none;
+    }
+  }
+  .ec-dashboard-search:hover {
+    border-color: rgb(var(--ec-page-text) / 0.35);
+  }
+  .ec-dashboard-kbd {
+    border: 1px solid rgb(var(--ec-page-border));
+    border-radius: 0.375rem;
+    padding: 0.05rem 0.375rem;
+    font-family: inherit;
+    font-size: 11px;
+  }
+  .ec-dashboard-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    height: 2.5rem;
+    padding: 0 0.875rem;
+    border-radius: 0.625rem;
+    background: rgb(var(--ec-page-text));
+    font-size: 13px;
+    font-weight: 500;
+    color: rgb(var(--ec-page-bg));
+    transition: opacity 150ms;
+  }
+  .ec-dashboard-button:hover {
+    opacity: 0.85;
+  }
+  .ec-dashboard-stats {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.75rem;
+  }
+  @media (min-width: 768px) {
+    .ec-dashboard-stats {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  @media (min-width: 1280px) {
+    .ec-dashboard-stats {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .ec-dashboard-stat {
+    display: block;
+    padding: 1rem 1.1rem;
+    transition: border-color 150ms;
+  }
+  .ec-dashboard-stat:hover {
+    border-color: rgb(var(--ec-page-text) / 0.35);
+  }
+  .ec-dashboard-row {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    padding: 0.7rem 1.25rem;
+    transition: background 150ms;
+  }
+  .ec-dashboard-row:hover {
+    background: rgb(var(--ec-page-text) / 0.03);
+  }
+  .ec-dashboard-type {
+    flex-shrink: 0;
+    width: 4.75rem;
+    border-radius: 0.375rem;
+    padding: 0.15rem 0;
+    text-align: center;
+    font-size: 11px;
+    font-weight: 600;
+  }
+  @media (min-width: 640px) {
+  }
+  @media (min-width: 1280px) {
+  }
+</style>