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

package/dist/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2024 by Excalidraw (https://plus.excalidraw.com/excalifont).
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) and the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/fonts/README.md

@@ -0,0 +1,2 @@
+Excalifont: OFL-1.1, by Excalidraw (https://plus.excalidraw.com/excalifont). The Latin subset as published in @excalidraw/excalidraw.
+Its copyright notice and licence are in OFL.txt, which has to ship with it (the build copies this folder into dist/fonts).

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 };