@eventcatalog/visualiser 5.0.0-beta.4 → 5.0.0-beta.5

package/dist/elk-layout-BVUJjv6i.d.mts

@@ -0,0 +1,47 @@
+import { Node, Edge } from '@xyflow/react';
+
+type LayoutGraph = {
+    nodes: Node[];
+    edges: Edge[];
+};
+type LayoutSize = {
+    width: number;
+    height: number;
+};
+type EdgeRoute = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+    label?: {
+        x: number;
+        y: number;
+    };
+    /** Where the edge's source and target were laid out (top-left, in the flow) */
+    source?: {
+        x: number;
+        y: number;
+    };
+    target?: {
+        x: number;
+        y: number;
+    };
+};
+/** The size a node is laid out at: as rendered, or an estimate for its type */
+declare const getNodeSize: (node: Node) => LayoutSize;
+/**
+ * Lays a graph out with ELK (left to right). Nested groups (nodes other nodes
+ * have as their `parentId`) are laid out in one pass with their children.
+ * Edges are routed at right angles around nodes, each edge with its own
+ * connection point so edges don't run on top of each other, and labels are
+ * placed on their edge. Each edge keeps its type and gets its route (and label
+ * position) in `data.route`, which the visualiser's edges are drawn along.
+ *
+ * Node positions are top-left corners (nodes get `origin: [0, 0]`), children
+ * relative to their group. Groups are sized to fit their children.
+ */
+declare const layoutWithElk: ({ nodes, edges }: LayoutGraph, { sizeOf }?: {
+    sizeOf?: (node: Node) => LayoutSize;
+}) => Promise<LayoutGraph>;
+
+export { type EdgeRoute as E, type LayoutGraph as L, type LayoutSize as a, getNodeSize as g, layoutWithElk as l };

package/dist/elk-layout-BVUJjv6i.d.ts

@@ -0,0 +1,47 @@
+import { Node, Edge } from '@xyflow/react';
+
+type LayoutGraph = {
+    nodes: Node[];
+    edges: Edge[];
+};
+type LayoutSize = {
+    width: number;
+    height: number;
+};
+type EdgeRoute = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+    label?: {
+        x: number;
+        y: number;
+    };
+    /** Where the edge's source and target were laid out (top-left, in the flow) */
+    source?: {
+        x: number;
+        y: number;
+    };
+    target?: {
+        x: number;
+        y: number;
+    };
+};
+/** The size a node is laid out at: as rendered, or an estimate for its type */
+declare const getNodeSize: (node: Node) => LayoutSize;
+/**
+ * Lays a graph out with ELK (left to right). Nested groups (nodes other nodes
+ * have as their `parentId`) are laid out in one pass with their children.
+ * Edges are routed at right angles around nodes, each edge with its own
+ * connection point so edges don't run on top of each other, and labels are
+ * placed on their edge. Each edge keeps its type and gets its route (and label
+ * position) in `data.route`, which the visualiser's edges are drawn along.
+ *
+ * Node positions are top-left corners (nodes get `origin: [0, 0]`), children
+ * relative to their group. Groups are sized to fit their children.
+ */
+declare const layoutWithElk: ({ nodes, edges }: LayoutGraph, { sizeOf }?: {
+    sizeOf?: (node: Node) => LayoutSize;
+}) => Promise<LayoutGraph>;
+
+export { type EdgeRoute as E, type LayoutGraph as L, type LayoutSize as a, getNodeSize as g, layoutWithElk as l };

package/dist/index.d.mts

@@ -1,8 +1,9 @@
 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 { E as EdgeRoute } from './elk-layout-BVUJjv6i.mjs';
 import * as react from 'react';
-import react__default from 'react';
+import react__default, { ReactNode, ComponentType } from 'react';
 
 /**
  * EventCatalog resource mode
@@ -334,6 +335,60 @@ type FlowGroupBy = SwimlaneGroupBy | "domain-system";
 type FlowGroupStyle = "lanes" | "boxes";
 declare const isFlowGroupBy: (value: unknown) => value is FlowGroupBy;
 
+/**
+ * What a diagram shows, to start a Studio canvas from: its full graph (level 3, whatever level is shown, as Studio
+ * shows the other levels itself), its nodes where they are (as on screen when level 3 is shown), and the
+ * connections between them
+ */
+type VisualiserSnapshot = {
+    title?: string;
+    /** The level of detail shown (1 to 3), for Studio to open at. Studio gets the full graph (level 3) whatever it is. */
+    level: 1 | 2 | 3;
+    nodes: {
+        id: string;
+        type?: string;
+        data: Record<string, unknown>;
+        /** The container it's shown in */
+        parentId?: string;
+        /** Its centre on the diagram (not relative to its container) */
+        center: {
+            x: number;
+            y: number;
+        };
+        /** Its size as shown */
+        width: number;
+        height: number;
+    }[];
+    edges: {
+        source: string;
+        target: string;
+        label?: string;
+        /** How it's drawn: the points it goes through on the diagram, and where its label is (from the layout) */
+        route?: Pick<EdgeRoute, "points" | "label">;
+    }[];
+    /**
+     * Levels 1 and 2 as the diagram shows them (laid out, positions relative to their parents), for Studio to show
+     * them the same. Level 1 only when the diagram has an overview.
+     */
+    levels: {
+        1?: LevelGraph;
+        2?: LevelGraph;
+    };
+    /** Levels 1 and 2 the diagram doesn't have, and why (as it says on them) */
+    unavailableLevels: {
+        1?: string;
+        2?: string;
+    };
+};
+type LevelGraph = {
+    nodes: Node[];
+    edges: Edge[];
+};
+/** Opening a diagram in Studio: its title, and what it shows (taken when asked for, e.g. once the canvas is named) */
+type OpenInStudioRequest = {
+    title?: string;
+    getSnapshot: () => Promise<VisualiserSnapshot>;
+};
 interface NodeGraphProps {
     id: string;
     title?: string;
@@ -412,8 +467,10 @@ interface NodeGraphProps {
         y: number;
     }>) => Promise<boolean>;
     onResetLayout?: (resourceKey: string) => Promise<boolean>;
+    /** Starts a Studio canvas from what the diagram shows (the menu has "Open in Studio" when set) */
+    onOpenInStudio?: (request: OpenInStudioRequest) => void;
 }
-declare const NodeGraph: ({ id, nodes: nodesProp, edges: edgesProp, graph, title: titleProp, href, linkTo, hrefLabel, includeKey: includeKeyProp, footerLabel, linksToVisualiser, links, mode, portalId, showFlowWalkthrough, showSearch: showSearchProp, showMenu, compactSearch, hideAttribution, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, animated: animatedProp, disableMessageAnimation, overviewGraph, hiddenMessagesGraph, preferenceScope, swimlanes, focusNodeId, focusRequestId, fitRequestId, 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, showMenu, compactSearch, hideAttribution, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, animated: animatedProp, disableMessageAnimation, overviewGraph, hiddenMessagesGraph, preferenceScope, swimlanes, focusNodeId, focusRequestId, fitRequestId, onNodeClick, onBuildUrl, onNavigate, onSaveLayout, onResetLayout, onOpenInStudio, }: NodeGraphProps) => react_jsx_runtime.JSX.Element | null;
 
 interface MermaidViewProps {
     nodes: Node[];
@@ -422,6 +479,70 @@ interface MermaidViewProps {
 }
 declare const MermaidView: ({ nodes, edges, maxTextSize, }: MermaidViewProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * A diagram's background: dots on the canvas colour (`.react-flow` in styles-core.css), the same wherever a
+ * diagram is drawn (the visualiser and Studio)
+ */
+declare const DiagramBackground: react.NamedExoticComponent<object>;
+
+/**
+ * A diagram's legend: how many of each kind of node it shows (and of each domain's, when steps are grouped by
+ * domain), with the kind's icon. Clicking an entry hides or shows those nodes. Studio's canvases have the same one.
+ */
+type LegendEntry = {
+    count: number;
+    colorClass: string;
+    groupId?: string;
+};
+/** The legend for some nodes: each domain's steps (when grouped by domain), then each kind of node */
+declare const getLegend: (nodes: Node<any>[]) => Record<string, LegendEntry>;
+/** The legend, bottom right */
+declare const LegendPanel: react.NamedExoticComponent<{
+    legend: Record<string, LegendEntry>;
+    /** Entries whose nodes are hidden, shown faded */
+    hiddenKeys: string[];
+    showMinimap?: boolean;
+    onLegendClick: (key: string) => void;
+}>;
+
+/** A button in a toolbar, with its tooltip (what it does, and why it can't be used when it can't) */
+declare const ToolbarButton: ({ label, hint, active, disabled, onClick, children, }: {
+    label: string;
+    /** Shown under the label on hover */
+    hint?: string;
+    active?: boolean;
+    disabled?: boolean;
+    onClick: () => void;
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * How far the canvas is zoomed in, as a percentage. Isolated, so what it's in only re-renders when the zoom changes
+ * (not on every pan). Studio's bar shows it too.
+ */
+declare const ZoomLevel: react.NamedExoticComponent<{
+    className?: string;
+}>;
+declare const ToolbarDivider: () => react_jsx_runtime.JSX.Element;
+/** The frame of a toolbar (e.g. the bar at the bottom of a diagram, or of a Studio canvas), with tooltips */
+declare const Toolbar: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+/** Tooltips for a group of controls (e.g. a toolbar): shown after a moment, then straight away while moving along */
+declare const TipProvider: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * A tooltip above a control: what it does, and optionally why it can't be used (`hint`). The control stays
+ * focusable when unavailable (`aria-disabled`, not `disabled`), so it can still say why. Used in a TipProvider.
+ */
+declare const Tip: ({ label, hint, children, }: {
+    label: string;
+    hint?: string;
+    /** The control: one element that takes a ref */
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
 interface ResourceData {
     id?: string;
     name?: string;
@@ -549,6 +670,23 @@ interface NodeContextMenuProps {
 }
 declare const _default$w: react.NamedExoticComponent<NodeContextMenuProps>;
 
+/**
+ * How a diagram's menu looks (the button at the top left, with the diagram's title, and the menu it opens). Studio's
+ * canvas menu uses the same, so the two feel the same.
+ */
+/** The button: the title, then the menu icon (DIAGRAM_MENU_BUTTON_ICON) */
+declare const DIAGRAM_MENU_BUTTON = "py-2.5 px-4 bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center gap-3 transition-colors duration-150 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap";
+/** The button without a title: just the icon */
+declare const DIAGRAM_MENU_BUTTON_COMPACT = "h-9 w-9 p-0 bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center justify-center transition-colors duration-150 hover:border-[rgb(var(--ec-accent)/0.3)] group";
+declare const DIAGRAM_MENU_TITLE = "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight";
+declare const DIAGRAM_MENU_BUTTON_ICON = "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150";
+declare const DIAGRAM_MENU_BUTTON_ICON_COMPACT = "h-4 w-4 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150";
+/** The menu, its items (an icon, then the label), and the lines between groups of them */
+declare const DIAGRAM_MENU = "min-w-56 bg-[rgb(var(--ec-page-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-xl z-50 py-1.5";
+declare const DIAGRAM_MENU_ITEM = "flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2";
+declare const DIAGRAM_MENU_ITEM_ICON = "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0";
+declare const DIAGRAM_MENU_SEPARATOR = "my-1 h-px bg-[rgb(var(--ec-page-border))]";
+
 type MessageGroupNodeData = {
     mode?: string;
     groupName: string;
@@ -841,6 +979,12 @@ declare const DATA: string[];
 declare const VIEW: string[];
 declare const MESSAGE: string[];
 
+/**
+ * The component a diagram draws each type of node with (types as EventCatalog's node graphs build them, singular
+ * and plural). Studio draws diagrams' levels with them too, so they look the same.
+ */
+declare const diagramNodeComponents: Record<string, ComponentType<any>>;
+
 declare const nodeComponents: {
     event: react.NamedExoticComponent<EventNode>;
     command: react.NamedExoticComponent<CommandNode>;
@@ -894,17 +1038,17 @@ declare const AnimatedMessageEdge: react.MemoExoticComponent<({ id, sourceX, sou
 
 declare const _default: react.NamedExoticComponent<EdgeProps>;
 
-declare function LabelledDefaultEdge(props: EdgeProps): react_jsx_runtime.JSX.Element;
-declare function LabelledSmoothStepEdge(props: EdgeProps): react_jsx_runtime.JSX.Element;
-declare function LabelledStepEdge(props: EdgeProps): react_jsx_runtime.JSX.Element;
+declare const LabelledDefaultEdge: react.NamedExoticComponent<EdgeProps>;
+declare const LabelledSmoothStepEdge: react.NamedExoticComponent<EdgeProps>;
+declare const LabelledStepEdge: react.NamedExoticComponent<EdgeProps>;
 
 declare const edgeTypes: {
     animated: react.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, source, target, sourceHandleId, targetHandleId, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element>;
     "flow-edge": react.NamedExoticComponent<CustomEdgeProps>;
     multiline: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
-    default: typeof LabelledDefaultEdge;
-    smoothstep: typeof LabelledSmoothStepEdge;
-    step: typeof LabelledStepEdge;
+    default: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
+    smoothstep: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
+    step: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
 };
 
 /**
@@ -963,4 +1107,29 @@ declare function layoutGraph(nodes: GraphNode[], edges: GraphEdge[], { style }?:
     edges: Edge[];
 }>;
 
-export { ACTOR, AGENT, AGENT_TOOL, _default$p as Actor, type ActorNode, type Agent$1 as Agent, _default$j as AgentNode, type AgentTool$1 as AgentTool, _default$k as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$g as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$c as CustomNode, DATA, type Data, type DataNode, _default$t as DataProductNode, _default$a as DomainCardNode, _default$b as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$d as EntityNode, type EntityProperty, _default$f as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$r as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$s as FlowExpandedNode, type FlowGroupBy, type FlowGroupStyle, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$u as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$v as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$w as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$l as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$h as Query, type QueryNode, type RegisteredNode, SERVICE, _default$i as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$x as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$o as actorConfig, buildNodeData, convertToMermaid, createEdge, createNode, _default$n as dataNodeConfig, edgeTypes, _default$e as eventConfig, exportNodeGraphForStudio, _default$m as externalSystemConfig, _default$q as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getEdgeLabelSize, getNestedEntityProperties, getPropertyTypeLabel, isFlowGroupBy, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners };
+/**
+ * How a diagram is fitted to the screen: all of it, filling the view with the same room around it at any size (clear
+ * of the title and menus at the top, and the bar at the bottom), never zoomed in past full size (e.g. a graph with
+ * one small node). Studio fits its canvases the same way.
+ */
+declare const DIAGRAM_FIT_VIEW_OPTIONS: {
+    readonly padding: {
+        readonly top: "100px";
+        readonly right: "60px";
+        readonly bottom: "80px";
+        readonly left: "60px";
+    };
+    readonly maxZoom: 1;
+};
+
+/** Memoizes a custom node so it renders again only when something besides its position changes. */
+declare const memoNode: <P extends object>(Component: ComponentType<P>) => react.MemoExoticComponent<ComponentType<P>>;
+
+/**
+ * Pauses (or resumes) the SMIL animations of a canvas's edges: the message envelopes moving along them. Hiding
+ * them doesn't stop them (SMIL keeps running, with a style recalc and layout every frame), so while the canvas
+ * is panned, zoomed or dragged they're paused. Each edge is its own <svg>, with its own timeline.
+ */
+declare const pauseEdgeAnimations: (canvas: Element | null, paused: boolean) => void | undefined;
+
+export { ACTOR, AGENT, AGENT_TOOL, _default$p as Actor, type ActorNode, type Agent$1 as Agent, _default$j as AgentNode, type AgentTool$1 as AgentTool, _default$k as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$g as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$c as CustomNode, DATA, DIAGRAM_FIT_VIEW_OPTIONS, DIAGRAM_MENU, DIAGRAM_MENU_BUTTON, DIAGRAM_MENU_BUTTON_COMPACT, DIAGRAM_MENU_BUTTON_ICON, DIAGRAM_MENU_BUTTON_ICON_COMPACT, DIAGRAM_MENU_ITEM, DIAGRAM_MENU_ITEM_ICON, DIAGRAM_MENU_SEPARATOR, DIAGRAM_MENU_TITLE, type Data, type DataNode, _default$t as DataProductNode, DiagramBackground, _default$a as DomainCardNode, _default$b as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$d as EntityNode, type EntityProperty, _default$f as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$r as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$s as FlowExpandedNode, type FlowGroupBy, type FlowGroupStyle, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, type LegendEntry, LegendPanel, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$u as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$v as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$w as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$l as Note, type NoteNode, NotesIndicator, type OpenInStudioRequest, OwnerIndicator, QUERY, _default$h as Query, type QueryNode, type RegisteredNode, SERVICE, _default$i as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$x as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, Tip, TipProvider, Toolbar, ToolbarButton, ToolbarDivider, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualiserSnapshot, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, ZoomLevel, _default$o as actorConfig, buildNodeData, convertToMermaid, createEdge, createNode, _default$n as dataNodeConfig, diagramNodeComponents, edgeTypes, _default$e as eventConfig, exportNodeGraphForStudio, _default$m as externalSystemConfig, _default$q as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getEdgeLabelSize, getLegend, getNestedEntityProperties, getPropertyTypeLabel, isFlowGroupBy, layoutGraph, memoNode, nodeComponents, nodeConfigs, normalizeOwners, pauseEdgeAnimations };

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 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 { E as EdgeRoute } from './elk-layout-BVUJjv6i.js';
 import * as react from 'react';
-import react__default from 'react';
+import react__default, { ReactNode, ComponentType } from 'react';
 
 /**
  * EventCatalog resource mode
@@ -334,6 +335,60 @@ type FlowGroupBy = SwimlaneGroupBy | "domain-system";
 type FlowGroupStyle = "lanes" | "boxes";
 declare const isFlowGroupBy: (value: unknown) => value is FlowGroupBy;
 
+/**
+ * What a diagram shows, to start a Studio canvas from: its full graph (level 3, whatever level is shown, as Studio
+ * shows the other levels itself), its nodes where they are (as on screen when level 3 is shown), and the
+ * connections between them
+ */
+type VisualiserSnapshot = {
+    title?: string;
+    /** The level of detail shown (1 to 3), for Studio to open at. Studio gets the full graph (level 3) whatever it is. */
+    level: 1 | 2 | 3;
+    nodes: {
+        id: string;
+        type?: string;
+        data: Record<string, unknown>;
+        /** The container it's shown in */
+        parentId?: string;
+        /** Its centre on the diagram (not relative to its container) */
+        center: {
+            x: number;
+            y: number;
+        };
+        /** Its size as shown */
+        width: number;
+        height: number;
+    }[];
+    edges: {
+        source: string;
+        target: string;
+        label?: string;
+        /** How it's drawn: the points it goes through on the diagram, and where its label is (from the layout) */
+        route?: Pick<EdgeRoute, "points" | "label">;
+    }[];
+    /**
+     * Levels 1 and 2 as the diagram shows them (laid out, positions relative to their parents), for Studio to show
+     * them the same. Level 1 only when the diagram has an overview.
+     */
+    levels: {
+        1?: LevelGraph;
+        2?: LevelGraph;
+    };
+    /** Levels 1 and 2 the diagram doesn't have, and why (as it says on them) */
+    unavailableLevels: {
+        1?: string;
+        2?: string;
+    };
+};
+type LevelGraph = {
+    nodes: Node[];
+    edges: Edge[];
+};
+/** Opening a diagram in Studio: its title, and what it shows (taken when asked for, e.g. once the canvas is named) */
+type OpenInStudioRequest = {
+    title?: string;
+    getSnapshot: () => Promise<VisualiserSnapshot>;
+};
 interface NodeGraphProps {
     id: string;
     title?: string;
@@ -412,8 +467,10 @@ interface NodeGraphProps {
         y: number;
     }>) => Promise<boolean>;
     onResetLayout?: (resourceKey: string) => Promise<boolean>;
+    /** Starts a Studio canvas from what the diagram shows (the menu has "Open in Studio" when set) */
+    onOpenInStudio?: (request: OpenInStudioRequest) => void;
 }
-declare const NodeGraph: ({ id, nodes: nodesProp, edges: edgesProp, graph, title: titleProp, href, linkTo, hrefLabel, includeKey: includeKeyProp, footerLabel, linksToVisualiser, links, mode, portalId, showFlowWalkthrough, showSearch: showSearchProp, showMenu, compactSearch, hideAttribution, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, animated: animatedProp, disableMessageAnimation, overviewGraph, hiddenMessagesGraph, preferenceScope, swimlanes, focusNodeId, focusRequestId, fitRequestId, 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, showMenu, compactSearch, hideAttribution, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, animated: animatedProp, disableMessageAnimation, overviewGraph, hiddenMessagesGraph, preferenceScope, swimlanes, focusNodeId, focusRequestId, fitRequestId, onNodeClick, onBuildUrl, onNavigate, onSaveLayout, onResetLayout, onOpenInStudio, }: NodeGraphProps) => react_jsx_runtime.JSX.Element | null;
 
 interface MermaidViewProps {
     nodes: Node[];
@@ -422,6 +479,70 @@ interface MermaidViewProps {
 }
 declare const MermaidView: ({ nodes, edges, maxTextSize, }: MermaidViewProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * A diagram's background: dots on the canvas colour (`.react-flow` in styles-core.css), the same wherever a
+ * diagram is drawn (the visualiser and Studio)
+ */
+declare const DiagramBackground: react.NamedExoticComponent<object>;
+
+/**
+ * A diagram's legend: how many of each kind of node it shows (and of each domain's, when steps are grouped by
+ * domain), with the kind's icon. Clicking an entry hides or shows those nodes. Studio's canvases have the same one.
+ */
+type LegendEntry = {
+    count: number;
+    colorClass: string;
+    groupId?: string;
+};
+/** The legend for some nodes: each domain's steps (when grouped by domain), then each kind of node */
+declare const getLegend: (nodes: Node<any>[]) => Record<string, LegendEntry>;
+/** The legend, bottom right */
+declare const LegendPanel: react.NamedExoticComponent<{
+    legend: Record<string, LegendEntry>;
+    /** Entries whose nodes are hidden, shown faded */
+    hiddenKeys: string[];
+    showMinimap?: boolean;
+    onLegendClick: (key: string) => void;
+}>;
+
+/** A button in a toolbar, with its tooltip (what it does, and why it can't be used when it can't) */
+declare const ToolbarButton: ({ label, hint, active, disabled, onClick, children, }: {
+    label: string;
+    /** Shown under the label on hover */
+    hint?: string;
+    active?: boolean;
+    disabled?: boolean;
+    onClick: () => void;
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * How far the canvas is zoomed in, as a percentage. Isolated, so what it's in only re-renders when the zoom changes
+ * (not on every pan). Studio's bar shows it too.
+ */
+declare const ZoomLevel: react.NamedExoticComponent<{
+    className?: string;
+}>;
+declare const ToolbarDivider: () => react_jsx_runtime.JSX.Element;
+/** The frame of a toolbar (e.g. the bar at the bottom of a diagram, or of a Studio canvas), with tooltips */
+declare const Toolbar: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+/** Tooltips for a group of controls (e.g. a toolbar): shown after a moment, then straight away while moving along */
+declare const TipProvider: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * A tooltip above a control: what it does, and optionally why it can't be used (`hint`). The control stays
+ * focusable when unavailable (`aria-disabled`, not `disabled`), so it can still say why. Used in a TipProvider.
+ */
+declare const Tip: ({ label, hint, children, }: {
+    label: string;
+    hint?: string;
+    /** The control: one element that takes a ref */
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
 interface ResourceData {
     id?: string;
     name?: string;
@@ -549,6 +670,23 @@ interface NodeContextMenuProps {
 }
 declare const _default$w: react.NamedExoticComponent<NodeContextMenuProps>;
 
+/**
+ * How a diagram's menu looks (the button at the top left, with the diagram's title, and the menu it opens). Studio's
+ * canvas menu uses the same, so the two feel the same.
+ */
+/** The button: the title, then the menu icon (DIAGRAM_MENU_BUTTON_ICON) */
+declare const DIAGRAM_MENU_BUTTON = "py-2.5 px-4 bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center gap-3 transition-colors duration-150 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap";
+/** The button without a title: just the icon */
+declare const DIAGRAM_MENU_BUTTON_COMPACT = "h-9 w-9 p-0 bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center justify-center transition-colors duration-150 hover:border-[rgb(var(--ec-accent)/0.3)] group";
+declare const DIAGRAM_MENU_TITLE = "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight";
+declare const DIAGRAM_MENU_BUTTON_ICON = "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150";
+declare const DIAGRAM_MENU_BUTTON_ICON_COMPACT = "h-4 w-4 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150";
+/** The menu, its items (an icon, then the label), and the lines between groups of them */
+declare const DIAGRAM_MENU = "min-w-56 bg-[rgb(var(--ec-page-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-xl z-50 py-1.5";
+declare const DIAGRAM_MENU_ITEM = "flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2";
+declare const DIAGRAM_MENU_ITEM_ICON = "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0";
+declare const DIAGRAM_MENU_SEPARATOR = "my-1 h-px bg-[rgb(var(--ec-page-border))]";
+
 type MessageGroupNodeData = {
     mode?: string;
     groupName: string;
@@ -841,6 +979,12 @@ declare const DATA: string[];
 declare const VIEW: string[];
 declare const MESSAGE: string[];
 
+/**
+ * The component a diagram draws each type of node with (types as EventCatalog's node graphs build them, singular
+ * and plural). Studio draws diagrams' levels with them too, so they look the same.
+ */
+declare const diagramNodeComponents: Record<string, ComponentType<any>>;
+
 declare const nodeComponents: {
     event: react.NamedExoticComponent<EventNode>;
     command: react.NamedExoticComponent<CommandNode>;
@@ -894,17 +1038,17 @@ declare const AnimatedMessageEdge: react.MemoExoticComponent<({ id, sourceX, sou
 
 declare const _default: react.NamedExoticComponent<EdgeProps>;
 
-declare function LabelledDefaultEdge(props: EdgeProps): react_jsx_runtime.JSX.Element;
-declare function LabelledSmoothStepEdge(props: EdgeProps): react_jsx_runtime.JSX.Element;
-declare function LabelledStepEdge(props: EdgeProps): react_jsx_runtime.JSX.Element;
+declare const LabelledDefaultEdge: react.NamedExoticComponent<EdgeProps>;
+declare const LabelledSmoothStepEdge: react.NamedExoticComponent<EdgeProps>;
+declare const LabelledStepEdge: react.NamedExoticComponent<EdgeProps>;
 
 declare const edgeTypes: {
     animated: react.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, source, target, sourceHandleId, targetHandleId, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element>;
     "flow-edge": react.NamedExoticComponent<CustomEdgeProps>;
     multiline: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
-    default: typeof LabelledDefaultEdge;
-    smoothstep: typeof LabelledSmoothStepEdge;
-    step: typeof LabelledStepEdge;
+    default: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
+    smoothstep: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
+    step: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
 };
 
 /**
@@ -963,4 +1107,29 @@ declare function layoutGraph(nodes: GraphNode[], edges: GraphEdge[], { style }?:
     edges: Edge[];
 }>;
 
-export { ACTOR, AGENT, AGENT_TOOL, _default$p as Actor, type ActorNode, type Agent$1 as Agent, _default$j as AgentNode, type AgentTool$1 as AgentTool, _default$k as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$g as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$c as CustomNode, DATA, type Data, type DataNode, _default$t as DataProductNode, _default$a as DomainCardNode, _default$b as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$d as EntityNode, type EntityProperty, _default$f as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$r as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$s as FlowExpandedNode, type FlowGroupBy, type FlowGroupStyle, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$u as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$v as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$w as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$l as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$h as Query, type QueryNode, type RegisteredNode, SERVICE, _default$i as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$x as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$o as actorConfig, buildNodeData, convertToMermaid, createEdge, createNode, _default$n as dataNodeConfig, edgeTypes, _default$e as eventConfig, exportNodeGraphForStudio, _default$m as externalSystemConfig, _default$q as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getEdgeLabelSize, getNestedEntityProperties, getPropertyTypeLabel, isFlowGroupBy, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners };
+/**
+ * How a diagram is fitted to the screen: all of it, filling the view with the same room around it at any size (clear
+ * of the title and menus at the top, and the bar at the bottom), never zoomed in past full size (e.g. a graph with
+ * one small node). Studio fits its canvases the same way.
+ */
+declare const DIAGRAM_FIT_VIEW_OPTIONS: {
+    readonly padding: {
+        readonly top: "100px";
+        readonly right: "60px";
+        readonly bottom: "80px";
+        readonly left: "60px";
+    };
+    readonly maxZoom: 1;
+};
+
+/** Memoizes a custom node so it renders again only when something besides its position changes. */
+declare const memoNode: <P extends object>(Component: ComponentType<P>) => react.MemoExoticComponent<ComponentType<P>>;
+
+/**
+ * Pauses (or resumes) the SMIL animations of a canvas's edges: the message envelopes moving along them. Hiding
+ * them doesn't stop them (SMIL keeps running, with a style recalc and layout every frame), so while the canvas
+ * is panned, zoomed or dragged they're paused. Each edge is its own <svg>, with its own timeline.
+ */
+declare const pauseEdgeAnimations: (canvas: Element | null, paused: boolean) => void | undefined;
+
+export { ACTOR, AGENT, AGENT_TOOL, _default$p as Actor, type ActorNode, type Agent$1 as Agent, _default$j as AgentNode, type AgentTool$1 as AgentTool, _default$k as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$g as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$c as CustomNode, DATA, DIAGRAM_FIT_VIEW_OPTIONS, DIAGRAM_MENU, DIAGRAM_MENU_BUTTON, DIAGRAM_MENU_BUTTON_COMPACT, DIAGRAM_MENU_BUTTON_ICON, DIAGRAM_MENU_BUTTON_ICON_COMPACT, DIAGRAM_MENU_ITEM, DIAGRAM_MENU_ITEM_ICON, DIAGRAM_MENU_SEPARATOR, DIAGRAM_MENU_TITLE, type Data, type DataNode, _default$t as DataProductNode, DiagramBackground, _default$a as DomainCardNode, _default$b as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$d as EntityNode, type EntityProperty, _default$f as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$r as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$s as FlowExpandedNode, type FlowGroupBy, type FlowGroupStyle, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, type LegendEntry, LegendPanel, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$u as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$v as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$w as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$l as Note, type NoteNode, NotesIndicator, type OpenInStudioRequest, OwnerIndicator, QUERY, _default$h as Query, type QueryNode, type RegisteredNode, SERVICE, _default$i as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$x as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, Tip, TipProvider, Toolbar, ToolbarButton, ToolbarDivider, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualiserSnapshot, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, ZoomLevel, _default$o as actorConfig, buildNodeData, convertToMermaid, createEdge, createNode, _default$n as dataNodeConfig, diagramNodeComponents, edgeTypes, _default$e as eventConfig, exportNodeGraphForStudio, _default$m as externalSystemConfig, _default$q as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getEdgeLabelSize, getLegend, getNestedEntityProperties, getPropertyTypeLabel, isFlowGroupBy, layoutGraph, memoNode, nodeComponents, nodeConfigs, normalizeOwners, pauseEdgeAnimations };