@eventcatalog/visualiser 3.13.0-beta.2 → 3.14.0

package/dist/index.d.mts

@@ -1,4 +1,5 @@
-import { Node, Connection, MarkerType, Edge, NodeTypes, EdgeTypes, EdgeProps, ReactFlowJsonObject } from '@xyflow/react';
+import * as _xyflow_react from '@xyflow/react';
+import { Node, Connection, MarkerType, Edge, NodeTypes, EdgeTypes, NodeProps, EdgeProps, ReactFlowJsonObject } from '@xyflow/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default from 'react';
@@ -9,6 +10,7 @@ import dagre from 'dagre';
  */
 type EventCatalogResource = {
     mode: "simple" | "full";
+    style?: string;
     collection?: string;
     filePath?: string;
     id?: string;
@@ -23,22 +25,37 @@ type Message = {
     owners?: string[];
     producers?: string[];
     consumers?: string[];
+    deprecated?: boolean;
+    draft?: boolean;
+    schema?: string;
+    notes?: Note[];
+};
+/**
+ * Note attached to a resource
+ */
+type Note = {
+    content: string;
+    author?: string;
+    priority?: string;
 };
 /**
  * Service type
  */
-type Service$1 = {
+type Service = {
     name: string;
     version: string;
     summary: string;
     owners?: string[];
     sends?: string[];
     receives?: string[];
+    deprecated?: boolean;
+    draft?: boolean;
+    notes?: Note[];
 };
 /**
  * Channel type
  */
-type Channel$1 = {
+type Channel = {
     name: string;
     version: string;
     summary: string;
@@ -46,35 +63,43 @@ type Channel$1 = {
     parameters?: Record<string, string>;
     protocols?: string[];
     address?: string;
+    deprecated?: boolean;
+    draft?: boolean;
+    notes?: Note[];
 };
 /**
  * External System type
  */
-type ExternalSystem$1 = {
+type ExternalSystem = {
     name: string;
     version: string;
     summary: string;
+    notes?: Note[];
 };
 /**
  * Data type
  */
-type Data$1 = {
+type Data = {
     name: string;
     version: string;
     summary: string;
     owners?: string[];
     type?: string;
     schemas?: string[];
+    deprecated?: boolean;
+    draft?: boolean;
+    notes?: Note[];
 };
 /**
  * View type
  */
-type View$1 = {
+type View = {
     name: string;
     version: string;
     summary: string;
     owners?: string[];
     screenshot?: string;
+    notes?: Note[];
 };
 /**
  * Generic node data structure - framework agnostic
@@ -178,14 +203,50 @@ interface VisualizerLink {
     label: string;
     url: string;
 }
+/**
+ * DSL Graph types – used by the playground and any consumer that wants
+ * to hand a high-level graph to the visualiser for automatic layout.
+ */
+interface GraphNode {
+    id: string;
+    type: "domain" | "service" | "event" | "command" | "query" | "channel" | "entity" | "container" | "data" | "data-product" | "flow" | "actor" | "external-system" | "step" | "user" | "team" | "diagram";
+    label: string;
+    parentId?: string;
+    metadata: Record<string, unknown>;
+}
+type GraphEdgeType = "sends" | "receives" | "publishes" | "subscribes" | "writes-to" | "reads-from" | "contains" | "owns" | "member-of" | "routes-to" | "flow-step";
+interface GraphEdge {
+    id: string;
+    source: string;
+    target: string;
+    type: GraphEdgeType;
+    label?: string;
+}
+interface DslGraph {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    visualizers?: string[];
+    activeVisualizer?: string;
+    title?: string;
+    empty?: boolean;
+    options?: {
+        legend?: boolean;
+        search?: boolean;
+        toolbar?: boolean;
+        focusMode?: boolean;
+        animated?: boolean;
+        style?: string;
+    };
+}
 
 interface NodeGraphProps {
     id: string;
     title?: string;
     href?: string;
     hrefLabel?: string;
-    nodes: Node[];
-    edges: Edge[];
+    nodes?: Node[];
+    edges?: Edge[];
+    graph?: DslGraph;
     linkTo?: "docs" | "visualiser";
     includeKey?: boolean;
     footerLabel?: string;
@@ -204,6 +265,8 @@ interface NodeGraphProps {
     maxTextSize?: number;
     isDevMode?: boolean;
     resourceKey?: string;
+    /** Controls whether message flow animation is enabled. When set, overrides URL params and localStorage. */
+    animated?: boolean;
     onNodeClick?: (node: Node) => void;
     onBuildUrl?: (path: string) => string;
     onNavigate?: (url: string) => void;
@@ -213,7 +276,7 @@ interface NodeGraphProps {
     }>) => Promise<boolean>;
     onResetLayout?: (resourceKey: string) => Promise<boolean>;
 }
-declare const NodeGraph: ({ id, nodes, edges, title, href, linkTo, hrefLabel, includeKey, footerLabel, linksToVisualiser, links, mode, portalId, showFlowWalkthrough, showSearch, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, onNodeClick, onBuildUrl, onNavigate, onSaveLayout, onResetLayout, }: NodeGraphProps) => react_jsx_runtime.JSX.Element | null;
+declare const NodeGraph: ({ id, nodes: nodesProp, edges: edgesProp, graph, title: titleProp, href, linkTo, hrefLabel, includeKey: includeKeyProp, footerLabel, linksToVisualiser, links, mode, portalId, showFlowWalkthrough, showSearch: showSearchProp, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, animated: animatedProp, onNodeClick, onBuildUrl, onNavigate, onSaveLayout, onResetLayout, }: NodeGraphProps) => react_jsx_runtime.JSX.Element | null;
 
 interface MermaidViewProps {
     nodes: Node[];
@@ -264,20 +327,26 @@ interface VisualiserSearchProps {
 interface VisualiserSearchRef {
     hideSuggestions: () => void;
 }
-declare const VisualiserSearch: react.ForwardRefExoticComponent<VisualiserSearchProps & react.RefAttributes<VisualiserSearchRef>>;
+declare const VisualiserSearch: react.NamedExoticComponent<VisualiserSearchProps & react.RefAttributes<VisualiserSearchRef>>;
 
 interface NodeData {
+    label?: string;
+    summary?: string;
     step?: {
         title?: string;
         summary?: string;
     };
     service?: {
+        name?: string;
+        summary?: string;
         data?: {
             name?: string;
             summary?: string;
         };
     };
     message?: {
+        name?: string;
+        summary?: string;
         data?: {
             name?: string;
             summary?: string;
@@ -311,7 +380,7 @@ interface StepWalkthroughProps {
     onStepChange: (nodeId: string | null, highlightPaths?: string[], shouldZoomOut?: boolean) => void;
     mode?: "full" | "simple";
 }
-declare function StepWalkthrough({ nodes, edges, isFlowVisualization, onStepChange, mode, }: StepWalkthroughProps): react_jsx_runtime.JSX.Element | null;
+declare const _default$l: react__default.NamedExoticComponent<StepWalkthroughProps>;
 
 interface FocusModeModalProps {
     isOpen: boolean;
@@ -328,39 +397,58 @@ interface NodeContextMenuProps {
     items: ContextMenuItem[];
     children: React.ReactNode;
 }
-declare function NodeContextMenu({ items, children, }: NodeContextMenuProps): react_jsx_runtime.JSX.Element;
+declare const _default$k: react.NamedExoticComponent<NodeContextMenuProps>;
 
-type MessageNodeData = EventCatalogResource & {
-    message: Message;
+type DataProductNodeData = EventCatalogResource & {
+    dataProduct: {
+        id: string;
+        version: string;
+        name: string;
+        summary?: string;
+        inputs?: any[];
+        outputs?: any[];
+        owners?: any[];
+        deprecated?: boolean;
+        draft?: boolean;
+        notes?: Note[];
+    };
 };
-type EventNode = Node<MessageNodeData, "event">;
-declare function Event(props: EventNode): react_jsx_runtime.JSX.Element;
+type DataProductNode = Node<DataProductNodeData, "data-product">;
+declare const _default$j: react.NamedExoticComponent<DataProductNode>;
 
-declare const _default$3: NodeConfiguration;
-
-type CommandNodeData = EventCatalogResource & {
-    message: Message;
+type ActorNodeData = EventCatalogResource & {
+    name: string;
+    summary: string;
+    deprecated?: boolean;
+    draft?: boolean;
+    notes?: Note[];
 };
-type CommandNode = Node<CommandNodeData, "command">;
-declare function Command(props: CommandNode): react_jsx_runtime.JSX.Element;
+type ActorNode = Node<ActorNodeData, "actor">;
+declare const _default$i: react.NamedExoticComponent<ActorNode>;
 
-type QueryNodeData = EventCatalogResource & {
-    message: Message;
+declare const _default$h: NodeConfiguration;
+
+type ViewNodeData = EventCatalogResource & {
+    view: View;
 };
-type QueryNode = Node<QueryNodeData, "query">;
-declare function Query(props: QueryNode): react_jsx_runtime.JSX.Element;
+type ViewNode = Node<ViewNodeData, "view">;
 
-type ServiceNodeData = EventCatalogResource & {
-    service: Service$1;
+type DataNodeData = EventCatalogResource & {
+    data: Data;
 };
-type ServiceNode = Node<ServiceNodeData, "service">;
-declare function Service(props: ServiceNode): react_jsx_runtime.JSX.Element;
+type DataNode = Node<DataNodeData, "data">;
 
-type ChannelNodeData = EventCatalogResource & {
-    channel: Channel$1;
+declare const _default$g: NodeConfiguration;
+
+type ExternalSystemNodeData = EventCatalogResource & {
+    externalSystem: ExternalSystem & {
+        deprecated?: boolean;
+        draft?: boolean;
+    };
 };
-type ChannelNode = Node<ChannelNodeData, "channel">;
-declare function Channel(props: ChannelNode): react_jsx_runtime.JSX.Element;
+type ExternalSystemNode = Node<ExternalSystemNodeData, "external-system">;
+
+declare const _default$f: NodeConfiguration;
 
 type NoteNodeData = {
     id: string;
@@ -375,69 +463,77 @@ interface NoteNodeProps extends NoteNode {
     showResizer?: boolean;
     readOnly?: boolean;
 }
-declare function NoteNodeComponent({ id, data, selected, onTextChange, onColorChange, readOnly, }: NoteNodeProps): react_jsx_runtime.JSX.Element;
+declare const _default$e: react__default.NamedExoticComponent<NoteNodeProps>;
 
-type DataNodeData = EventCatalogResource & {
-    data: Data$1;
+type ChannelNodeData = EventCatalogResource & {
+    channel: Channel;
 };
-type DataNode = Node<DataNodeData, "data">;
-declare function Data(props: DataNode): react_jsx_runtime.JSX.Element;
-
-declare const _default$2: NodeConfiguration;
+type ChannelNode = Node<ChannelNodeData, "channel">;
 
-type ViewNodeData = EventCatalogResource & {
-    view: View$1;
+type ServiceNodeData = EventCatalogResource & {
+    service: Service;
 };
-type ViewNode = Node<ViewNodeData, "view">;
-declare function View(props: ViewNode): react_jsx_runtime.JSX.Element;
+type ServiceNode = Node<ServiceNodeData, "service">;
 
-type ActorNodeData = EventCatalogResource & {
-    name: string;
-    summary: string;
+type QueryNodeData = EventCatalogResource & {
+    message: Message;
 };
-type ActorNode = Node<ActorNodeData, "actor">;
-declare function Actor(props: ActorNode): react_jsx_runtime.JSX.Element;
+type QueryNode = Node<QueryNodeData, "query">;
+declare const _default$d: react.NamedExoticComponent<QueryNode>;
 
-declare const _default$1: NodeConfiguration;
+type CommandNodeData = EventCatalogResource & {
+    message: Message;
+};
+type CommandNode = Node<CommandNodeData, "command">;
+declare const _default$c: react.NamedExoticComponent<CommandNode>;
 
-type ExternalSystemNodeData = EventCatalogResource & {
-    externalSystem: ExternalSystem$1;
+type MessageNodeData = EventCatalogResource & {
+    message: Message;
 };
-type ExternalSystemNode$1 = Node<ExternalSystemNodeData, "external-system">;
-declare function ExternalSystem(props: ExternalSystemNode$1): react_jsx_runtime.JSX.Element;
+type EventNode = Node<MessageNodeData, "event">;
+declare const _default$b: react.NamedExoticComponent<EventNode>;
 
-declare const _default: NodeConfiguration;
+declare const _default$a: NodeConfiguration;
 
-declare function UserNode$1({ data, sourcePosition, targetPosition, }: any): react_jsx_runtime.JSX.Element;
+declare const NotesIndicator: react.NamedExoticComponent<{
+    notes: Note[];
+    resourceName?: string;
+}>;
 
-declare function DomainNode({ data, id: nodeId }: any): react_jsx_runtime.JSX.Element;
+/**
+ * Normalise owners which may arrive as string[] or {id:string}[] from Astro.
+ */
+declare function normalizeOwners(raw: any[] | undefined): string[];
+/**
+ * Compact owner indicator for the bottom of a node card.
+ * Shows a small icon + primary owner name + overflow pill.
+ *
+ * @param accentColor - Tailwind color class for the pill, e.g. "bg-pink-400"
+ * @param borderColor - CSS color string for the top border
+ * @param iconClass   - Tailwind text color for the icon, e.g. "text-pink-300"
+ */
+declare const OwnerIndicator: react.NamedExoticComponent<{
+    owners: string[];
+    accentColor?: string;
+    borderColor?: string;
+    iconClass?: string;
+}>;
 
-declare function EntityNode({ data, sourcePosition, targetPosition, }: any): react_jsx_runtime.JSX.Element;
+declare const _default$9: react.NamedExoticComponent<any>;
 
-declare function FlowNode({ data, sourcePosition, targetPosition, }: any): react_jsx_runtime.JSX.Element;
+declare const _default$8: react.NamedExoticComponent<any>;
 
-declare function StepNode({ data, sourcePosition, targetPosition, }: any): react_jsx_runtime.JSX.Element;
+declare const _default$7: react.NamedExoticComponent<any>;
 
-declare function UserNode({ data, sourcePosition, targetPosition, }: any): react_jsx_runtime.JSX.Element;
+declare const _default$6: react.NamedExoticComponent<any>;
 
-interface DataProductNodeProps {
-    data: {
-        mode: "simple" | "full";
-        dataProduct: {
-            id: string;
-            version: string;
-            name: string;
-            summary?: string;
-            inputs?: any[];
-            outputs?: any[];
-            owners?: any[];
-        };
-    };
-    selected?: boolean;
-}
-declare function DataProductNode(props: DataProductNodeProps): react_jsx_runtime.JSX.Element;
+declare const _default$5: react.NamedExoticComponent<NodeProps>;
 
-declare function ExternalSystemNode(props: any): react_jsx_runtime.JSX.Element;
+declare const _default$4: react.NamedExoticComponent<any>;
+
+declare const _default$3: react.NamedExoticComponent<any>;
+
+declare const _default$2: react.NamedExoticComponent<any>;
 
 declare const SERVICE: string[];
 declare const EVENT: string[];
@@ -450,24 +546,25 @@ declare const VIEW: string[];
 declare const MESSAGE: string[];
 
 declare const nodeComponents: {
-    event: typeof Event;
-    command: typeof Command;
-    query: typeof Query;
-    service: typeof Service;
-    channel: typeof Channel;
-    note: typeof NoteNodeComponent;
-    externalSystem: typeof ExternalSystem;
-    data: typeof Data;
-    view: typeof View;
-    actor: typeof Actor;
-    custom: typeof UserNode$1;
-    domain: typeof DomainNode;
-    entity: typeof EntityNode;
-    flow: typeof FlowNode;
-    step: typeof StepNode;
-    user: typeof UserNode;
-    dataProduct: typeof DataProductNode;
-    externalSystem2: typeof ExternalSystemNode;
+    event: react.NamedExoticComponent<EventNode>;
+    command: react.NamedExoticComponent<CommandNode>;
+    query: react.NamedExoticComponent<QueryNode>;
+    service: react.NamedExoticComponent<ServiceNode>;
+    channel: react.NamedExoticComponent<ChannelNode>;
+    note: react.NamedExoticComponent<NoteNodeProps>;
+    externalSystem: react.NamedExoticComponent<ExternalSystemNode>;
+    data: react.NamedExoticComponent<DataNode>;
+    view: react.NamedExoticComponent<ViewNode>;
+    actor: react.NamedExoticComponent<ActorNode>;
+    custom: react.NamedExoticComponent<any>;
+    domain: react.NamedExoticComponent<any>;
+    entity: react.NamedExoticComponent<any>;
+    flow: react.NamedExoticComponent<any>;
+    group: react.NamedExoticComponent<_xyflow_react.NodeProps>;
+    step: react.NamedExoticComponent<any>;
+    user: react.NamedExoticComponent<any>;
+    dataProduct: react.NamedExoticComponent<DataProductNode>;
+    externalSystem2: react.NamedExoticComponent<any>;
 };
 declare const nodeConfigs: {
     event: NodeConfiguration;
@@ -476,8 +573,6 @@ declare const nodeConfigs: {
     externalSystem: NodeConfiguration;
 };
 
-declare const AnimatedMessageEdge: ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element;
-
 interface EdgeData {
     message?: {
         collection?: string;
@@ -488,14 +583,16 @@ interface EdgeData {
 interface CustomEdgeProps extends Omit<EdgeProps, "data"> {
     data?: EdgeData;
 }
-declare function CustomEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, label, labelStyle, data, }: CustomEdgeProps): react_jsx_runtime.JSX.Element;
+declare const _default$1: react.NamedExoticComponent<CustomEdgeProps>;
 
-declare function MultilineEdgeLabel(props: EdgeProps): react_jsx_runtime.JSX.Element;
+declare const AnimatedMessageEdge: react.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element>;
+
+declare const _default: react.NamedExoticComponent<EdgeProps>;
 
 declare const edgeTypes: {
-    animated: ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element;
-    "flow-edge": typeof CustomEdge;
-    multiline: typeof MultilineEdgeLabel;
+    animated: react.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element>;
+    "flow-edge": react.NamedExoticComponent<CustomEdgeProps>;
+    multiline: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
 };
 
 /**
@@ -546,4 +643,15 @@ declare const getNodesAndEdgesFromDagre: ({ nodes, edges, defaultFlow, }: {
     edges: Edge[];
 };
 
-export { ACTOR, Actor, type ActorNode, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel$1 as Channel, type ChannelNode, Command, type CommandNode, type ContextMenuItem, UserNode$1 as CustomNode, DATA, type Data$1 as Data, type DataNode, DataProductNode, DomainNode, EVENT, type EdgeType, EntityNode, Event, type EventCatalogResource, type EventNode, type ExternalSystem$1 as ExternalSystem, ExternalSystemNode as ExternalSystem2Node, type ExternalSystemNode$1 as ExternalSystemNode, CustomEdge as FlowEdge, FlowNode, FocusModeModal, MESSAGE, type MermaidExportOptions, MermaidView, type Message, MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, NodeContextMenu, NodeGraph, type NodeType, NoteNodeComponent as Note, type NoteNode, QUERY, Query, type QueryNode, type RegisteredNode, SERVICE, type Service$1 as Service, type ServiceNode, StepNode, StepWalkthrough, UserNode, VIEW, type View$1 as View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$1 as actorConfig, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$2 as dataNodeConfig, edgeTypes, _default$3 as eventConfig, exportNodeGraphForStudio, _default as externalSystemConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNodesAndEdgesFromDagre, nodeComponents, nodeConfigs };
+declare function buildNodeData(node: GraphNode, style?: string): Record<string, unknown>;
+declare function layoutGraph(nodes: GraphNode[], edges: GraphEdge[], options?: {
+    rankdir?: string;
+    nodesep?: number;
+    ranksep?: number;
+    edgesep?: number;
+}, style?: string): {
+    nodes: Node[];
+    edges: Edge[];
+};
+
+export { ACTOR, _default$i as Actor, type ActorNode, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$c as Command, type CommandNode, type ContextMenuItem, _default$9 as CustomNode, DATA, type Data, type DataNode, _default$j as DataProductNode, _default$8 as DomainNode, type DslGraph, EVENT, type EdgeType, _default$7 as EntityNode, _default$b as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$1 as FlowEdge, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$k as NodeContextMenu, NodeGraph, type NodeType, _default$e as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$d as Query, type QueryNode, type RegisteredNode, SERVICE, type Service, type ServiceNode, _default$4 as StepNode, _default$l as StepWalkthrough, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$h as actorConfig, buildNodeData, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$g as dataNodeConfig, edgeTypes, _default$a as eventConfig, exportNodeGraphForStudio, _default$f as externalSystemConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNodesAndEdgesFromDagre, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners };