@eventcatalog/core 4.12.3 → 5.0.0-beta.0

package/eventcatalog/src/styles/themes/sunset.css

@@ -6,8 +6,8 @@
  */
 
 /* Sunset Light Mode */
-:root[data-catalog-theme="sunset"],
-:root[data-catalog-theme="sunset"][data-theme="light"] {
+:root[data-catalog-theme='sunset'],
+:root[data-catalog-theme='sunset'][data-theme='light'] {
   /* Header - clean white */
   --ec-header-bg: 255 255 255; /* #ffffff */
   --ec-header-text: 23 23 23; /* #171717 neutral-900 */
@@ -110,7 +110,7 @@
 }
 
 /* Sunset Dark Mode */
-:root[data-catalog-theme="sunset"][data-theme="dark"] {
+:root[data-catalog-theme='sunset'][data-theme='dark'] {
   /* Header - matches page bg for unified look */
   --ec-header-bg: 10 10 10; /* #0a0a0a neutral-950 - matches page bg */
   --ec-header-text: 245 245 245; /* #f5f5f5 neutral-100 */
@@ -209,7 +209,7 @@
 }
 
 /* Sunset theme prose overrides */
-:root[data-catalog-theme="sunset"][data-theme="dark"] .prose {
+:root[data-catalog-theme='sunset'][data-theme='dark'] .prose {
   --tw-prose-body: rgb(163 163 163); /* neutral-400 */
   --tw-prose-headings: rgb(245 245 245); /* neutral-100 */
   --tw-prose-lead: rgb(115 115 115); /* neutral-500 */
@@ -228,19 +228,19 @@
   --tw-prose-td-borders: rgb(38 38 38); /* neutral-800 */
 }
 
-:root[data-catalog-theme="sunset"][data-theme="dark"] .prose code {
+:root[data-catalog-theme='sunset'][data-theme='dark'] .prose code {
   background-color: rgb(38 38 38); /* neutral-800 */
 }
 
-:root[data-catalog-theme="sunset"][data-theme="dark"] .prose pre {
+:root[data-catalog-theme='sunset'][data-theme='dark'] .prose pre {
   background-color: rgb(23 23 23); /* neutral-900 */
   border: 1px solid rgb(38 38 38); /* neutral-800 */
 }
 
-:root[data-catalog-theme="sunset"][data-theme="dark"] .prose a {
+:root[data-catalog-theme='sunset'][data-theme='dark'] .prose a {
   color: rgb(251 146 60); /* orange-400 */
 }
 
-:root[data-catalog-theme="sunset"][data-theme="dark"] .prose a:hover {
+:root[data-catalog-theme='sunset'][data-theme='dark'] .prose a:hover {
   color: rgb(253 186 116); /* orange-300 */
 }

package/eventcatalog/src/utils/clipboard.ts

@@ -1,22 +1,22 @@
 /**
  * Copy text to clipboard with fallback for older browsers
  * @param text - The text to copy to clipboard
- * @returns Promise that resolves to true if successful
+ * @returns Promise that resolves to true if the text was copied
  */
 export async function copyToClipboard(text: string): Promise<boolean> {
   try {
     await navigator.clipboard.writeText(text);
     return true;
   } catch {
-    // Fallback for older browsers
+    // Fallback for older browsers, and for sandboxed frames (such as MCP App views) without clipboard access
     const textarea = document.createElement('textarea');
     textarea.value = text;
     textarea.style.position = 'fixed';
     textarea.style.opacity = '0';
     document.body.appendChild(textarea);
     textarea.select();
-    document.execCommand('copy');
+    const copied = document.execCommand('copy');
     document.body.removeChild(textarea);
-    return true;
+    return copied;
   }
 }

package/eventcatalog/src/utils/collections/flow-step-schema.ts

@@ -0,0 +1,117 @@
+import { z } from 'astro/zod';
+import { withExtensionProperties } from './extension-properties';
+import { pointer } from './pointer-schema';
+
+const nextStep = z
+  .union([
+    // Can be a string or a number just to reference a step
+    z.union([z.string(), z.number()]),
+    z
+      .object({
+        id: z.union([z.string(), z.number()]),
+        label: z.string().optional(),
+      })
+      .optional(),
+  ])
+  .optional();
+
+// What a step can be (a step is one of these, or just a titled box)
+const STEP_KINDS = [
+  'message',
+  'agent',
+  'service',
+  'systems',
+  'system',
+  'channel',
+  'flow',
+  'container',
+  'dataProduct',
+  'actor',
+  'custom',
+  'externalSystem',
+] as const;
+
+/**
+ * A step in a flow's frontmatter. Keys a step doesn't have are rejected (unless
+ * they start with `x-`), so a typo like `servce:` fails the build rather than
+ * quietly drawing a plain box.
+ *
+ * The linter checks flows with its own copy of these rules
+ * (packages/linter/src/schemas/flow.ts): keep the two in sync.
+ */
+export const flowStepSchema = withExtensionProperties(
+  z.object({
+    id: z.union([z.string(), z.number()]),
+    /** Ignored: the kind of step comes from what it points at. Older flows (and the editor) still write it. */
+    type: z.string().optional(),
+    /** Defaults to the name of what the step points at (or the custom step's title, or its id) */
+    title: z.string().optional(),
+    summary: z.string().optional(),
+    message: pointer.optional(),
+    agent: pointer.optional(),
+    service: pointer.optional(),
+    // Catalog system reference. `systems` matches how authors write the
+    // pointer (same shape as `service`); `system` is accepted as an alias.
+    systems: pointer.optional(),
+    system: pointer.optional(),
+    channel: pointer.optional(),
+    flow: pointer.optional(),
+    container: pointer.optional(),
+    dataProduct: pointer.optional(),
+
+    actor: z
+      .object({
+        name: z.string(),
+        summary: z.string().optional(),
+      })
+      .optional(),
+    custom: z
+      .object({
+        /** Defaults to the step's title */
+        title: z.string().optional(),
+        icon: z.string().optional(),
+        type: z.string().optional(),
+        summary: z.string().optional(),
+        url: z.string().url().optional(),
+        color: z.string().optional(),
+        properties: z.record(z.string(), z.union([z.string(), z.number()])).optional(),
+        height: z.number().optional(),
+        menu: z
+          .array(
+            z.object({
+              label: z.string(),
+              url: z.string().url().optional(),
+            })
+          )
+          .optional(),
+      })
+      .optional(),
+    externalSystem: z
+      .object({
+        name: z.string(),
+        summary: z.string().optional(),
+        url: z.string().url().optional(),
+      })
+      .optional(),
+    next_step: nextStep,
+    next_steps: z.array(nextStep).optional(),
+  })
+).superRefine((step, context) => {
+  if (step.next_step !== undefined && step.next_steps !== undefined) {
+    context.addIssue({
+      code: 'custom',
+      path: ['next_steps'],
+      message: `Step "${step.id}" has both next_step and next_steps. Use next_step for one next step, or next_steps for several.`,
+    });
+  }
+
+  const kinds = STEP_KINDS.filter((kind) => step[kind] !== undefined);
+  if (kinds.length > 1) {
+    const listed = `${kinds.slice(0, -1).join(', ')} and ${kinds[kinds.length - 1]}`;
+    context.addIssue({
+      code: 'custom',
+      path: [kinds[1]],
+      message: `Step "${step.id}" points at ${listed}. A step can only be one thing, so split it into ${kinds.length === 2 ? 'two' : 'separate'} steps.`,
+    });
+  }
+});

package/eventcatalog/src/utils/collections/pointer-schema.ts

@@ -0,0 +1,7 @@
+import { z } from 'astro/zod';
+
+/** A reference to a versioned resource in the catalog (the latest version unless one is given) */
+export const pointer = z.object({
+  id: z.string(),
+  version: z.string().optional().default('latest'),
+});