@eventcatalog/visualiser 5.0.0 → 5.1.0

package/dist/chunk-P2DH6CFV.mjs

@@ -0,0 +1,1196 @@
+// src/nodes/node-types.ts
+var SERVICE = ["service", "services"];
+var AGENT = ["agent", "agents"];
+var AGENT_TOOL = ["agentTool", "agent-tool"];
+var EVENT = ["event", "events"];
+var QUERY = ["queries", "query", "querie"];
+var COMMAND = ["command", "commands"];
+var CHANNEL = ["channel", "channels"];
+var ACTOR = ["actor", "actors"];
+var DATA = ["data"];
+var VIEW = ["view"];
+var MESSAGE = [...EVENT, ...COMMAND, ...QUERY];
+
+// src/utils/utils/utils.ts
+import { MarkerType, Position } from "@xyflow/react";
+var generateIdForNode = (node) => {
+  return `${node.data.id}-${node.data.version}`;
+};
+var generateIdForNodes = (nodes) => {
+  return nodes.map((node) => `${node.data.id}-${node.data.version}`).join("-");
+};
+var generatedIdForEdge = (source, target) => {
+  return `${source.data.id}-${source.data.version}-${target.data.id}-${target.data.version}`;
+};
+var getColorFromString = (id) => {
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = id.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let color = "#";
+  for (let i = 0; i < 3; i++) {
+    const value = hash >> i * 8 & 255;
+    color += value.toString(16).padStart(2, "0");
+  }
+  return color;
+};
+var getEdgeLabelForServiceAsTarget = (data) => {
+  const type = data.collection;
+  switch (type) {
+    case "commands":
+      return "invokes";
+    case "events":
+      return "publishes \nevent";
+    case "queries":
+      return "requests";
+    default:
+      return "sends to";
+  }
+};
+var getEdgeLabelForMessageAsSource = (data, throughChannel = false) => {
+  const type = data.collection;
+  switch (type) {
+    case "commands":
+      return "accepts";
+    case "events":
+      return throughChannel ? "subscribed to" : "subscribed by";
+    case "queries":
+      return "accepts";
+    default:
+      return "sends to";
+  }
+};
+var getEdgeLabelSize = (label) => {
+  if (typeof label !== "string" || !label.trim())
+    return { width: 0, height: 0 };
+  const lines = label.split("\n");
+  const longestLine = Math.max(...lines.map((line) => line.trim().length));
+  return { width: longestLine * 6 + 20, height: lines.length * 14 + 12 };
+};
+var createEdge = (edgeOptions) => {
+  return {
+    label: "subscribed by",
+    animated: false,
+    // markerStart: {
+    //   type: MarkerType.Arrow,
+    //   width: 40,
+    //   height: 40,
+    // },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 40,
+      height: 40,
+      color: "rgb(var(--ec-page-text-muted))"
+    },
+    style: {
+      strokeWidth: 1.5,
+      stroke: "rgb(var(--ec-page-text-muted))",
+      strokeDasharray: "5 5"
+    },
+    ...edgeOptions
+  };
+};
+var createNode = (values) => {
+  return {
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+    ...values
+  };
+};
+
+// src/utils/elk-layout.ts
+var DEFAULT_SIZE = { width: 240, height: 112 };
+var NODE_SIZES = {
+  events: { width: 240, height: 104 },
+  commands: { width: 240, height: 126 },
+  queries: { width: 240, height: 126 },
+  services: { width: 240, height: 112 },
+  data: { width: 240, height: 108 },
+  systems: { width: 240, height: 120 },
+  system: { width: 240, height: 120 },
+  "context-domain": { width: 240, height: 112 },
+  "context-actor": { width: 180, height: 80 },
+  actor: { width: 180, height: 80 },
+  note: { width: 200, height: 150 },
+  step: { width: 240, height: 80 },
+  // Groups with nothing in them (groups with children are sized to fit them)
+  "domain-group": { width: 320, height: 160 },
+  "system-group": { width: 320, height: 160 }
+};
+var GROUP_TYPES = /* @__PURE__ */ new Set(["domain-group", "system-group", "group"]);
+var getNodeSize = (node) => {
+  if (node.measured?.width && node.measured?.height) {
+    return { width: node.measured.width, height: node.measured.height };
+  }
+  if (typeof node.width === "number" && typeof node.height === "number") {
+    return { width: node.width, height: node.height };
+  }
+  if (node.type === "domains" || node.type === "domain") {
+    const services = node.data?.domain?.data?.services || [];
+    return { width: 260, height: 60 + services.length * 40 };
+  }
+  return NODE_SIZES[node.type || ""] ?? DEFAULT_SIZE;
+};
+var GROUP_PADDING = "[top=100,left=40,bottom=40,right=40]";
+var SPACING = {
+  "elk.layered.spacing.nodeNodeBetweenLayers": "60",
+  "elk.spacing.nodeNode": "40",
+  "elk.spacing.edgeNode": "25",
+  "elk.spacing.edgeEdge": "15"
+};
+var LARGE_GRAPH_NODES = 80;
+var LARGE_GRAPH_EDGES = 200;
+var LARGE_GRAPH_OPTIONS = {
+  "elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+  "elk.layered.thoroughness": "1",
+  "elk.layered.crossingMinimization.greedySwitch.type": "OFF"
+};
+var elk;
+var getElk = async () => {
+  if (!elk) {
+    const { default: ELK } = await import("elkjs/lib/elk.bundled.js");
+    elk = new ELK();
+  }
+  return elk;
+};
+var layoutWithElk = async ({ nodes, edges }, { sizeOf = getNodeSize } = {}) => {
+  const nodesById = new Map(nodes.map((node) => [node.id, node]));
+  const groupIds = new Set(
+    nodes.map((node) => node.parentId).filter((id) => !!id && nodesById.has(id))
+  );
+  const parentOf = (node) => node.parentId && groupIds.has(node.parentId) ? node.parentId : void 0;
+  const layoutEdges = edges.filter(
+    (edge) => nodesById.has(edge.source) && nodesById.has(edge.target)
+  );
+  const ports = /* @__PURE__ */ new Map();
+  const addPort = (nodeId, id, side) => {
+    const nodePorts = ports.get(nodeId) || [];
+    if (!nodePorts.some((port) => port.id === id)) {
+      ports.set(nodeId, [
+        ...nodePorts,
+        { id, layoutOptions: { "elk.port.side": side } }
+      ]);
+    }
+    return id;
+  };
+  const edgePorts = layoutEdges.map((edge, index) => ({
+    source: addPort(
+      edge.source,
+      edge.sourceHandle ? `${edge.source}__${edge.sourceHandle}` : `e${index}__out`,
+      "EAST"
+    ),
+    target: addPort(
+      edge.target,
+      edge.targetHandle ? `${edge.target}__${edge.targetHandle}` : `e${index}__in`,
+      "WEST"
+    )
+  }));
+  const toElkNode = (node) => ({
+    id: node.id,
+    ...groupIds.has(node.id) ? {
+      children: nodes.filter((child) => parentOf(child) === node.id).map(toElkNode)
+    } : sizeOf(node),
+    layoutOptions: {
+      "elk.portConstraints": "FIXED_SIDE",
+      ...groupIds.has(node.id) ? { "elk.padding": GROUP_PADDING, ...SPACING } : {},
+      // A node's own options (e.g. a group's padding) win
+      ...node.data?.layoutOptions ?? {}
+    },
+    ports: ports.get(node.id) || []
+  });
+  const layout = await (await getElk()).layout({
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": "RIGHT",
+      "elk.hierarchyHandling": "INCLUDE_CHILDREN",
+      "elk.edgeRouting": "ORTHOGONAL",
+      // Edge routes in absolute coordinates (node positions stay relative to their parent)
+      "elk.json.edgeCoords": "ROOT",
+      "elk.edgeLabels.placement": "CENTER",
+      ...SPACING,
+      ...nodes.length >= LARGE_GRAPH_NODES || edges.length >= LARGE_GRAPH_EDGES ? LARGE_GRAPH_OPTIONS : { "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX" }
+    },
+    children: nodes.filter((node) => !parentOf(node)).map(toElkNode),
+    edges: layoutEdges.map((edge, index) => ({
+      id: `e${index}`,
+      sources: [edgePorts[index].source],
+      targets: [edgePorts[index].target],
+      // Labels sit on their edge, rather than beside it (only works set per label)
+      labels: edge.label ? [
+        {
+          text: String(edge.label),
+          ...getEdgeLabelSize(edge.label),
+          layoutOptions: { "elk.edgeLabels.inline": "true" }
+        }
+      ] : []
+    }))
+  });
+  const laidOut = /* @__PURE__ */ new Map();
+  const collect = (elkNode) => (elkNode.children || []).forEach((child) => {
+    laidOut.set(child.id, child);
+    collect(child);
+  });
+  collect(layout);
+  const absolute = (nodeId) => {
+    const node = nodesById.get(nodeId);
+    const parent = node && parentOf(node);
+    const offset = parent ? absolute(parent) : { x: 0, y: 0 };
+    const elkNode = laidOut.get(nodeId);
+    return { x: offset.x + (elkNode?.x ?? 0), y: offset.y + (elkNode?.y ?? 0) };
+  };
+  const laidOutAt = (nodeId) => ({
+    ...absolute(nodeId),
+    height: laidOut.get(nodeId)?.height
+  });
+  const routes = /* @__PURE__ */ new Map();
+  (layout.edges || []).forEach((elkEdge) => {
+    const section = elkEdge.sections?.[0];
+    if (!section) return;
+    const label = elkEdge.labels?.[0];
+    const edge = layoutEdges[Number(elkEdge.id.slice(1))];
+    routes.set(edge, {
+      points: [
+        section.startPoint,
+        ...section.bendPoints || [],
+        section.endPoint
+      ],
+      label: label ? {
+        x: (label.x ?? 0) + (label.width ?? 0) / 2,
+        y: (label.y ?? 0) + (label.height ?? 0) / 2
+      } : void 0,
+      source: laidOutAt(edge.source),
+      target: laidOutAt(edge.target)
+    });
+  });
+  const depth = (node) => {
+    const parent = node && parentOf(node);
+    return parent ? depth(nodesById.get(parent)) + 1 : 0;
+  };
+  return {
+    // Parents must come before their children in the array for React Flow
+    nodes: [...nodes].sort((a, b) => depth(a) - depth(b)).map((node) => {
+      const elkNode = laidOut.get(node.id);
+      if (!elkNode) return node;
+      return {
+        ...node,
+        origin: [0, 0],
+        position: { x: elkNode.x ?? 0, y: elkNode.y ?? 0 },
+        ...groupIds.has(node.id) || GROUP_TYPES.has(node.type || "") && typeof node.style?.width !== "number" ? {
+          style: {
+            ...node.style,
+            width: elkNode.width,
+            height: elkNode.height
+          },
+          // Re-measured at its new size
+          measured: void 0
+        } : {}
+      };
+    }),
+    edges: edges.map((edge) => {
+      const route = routes.get(edge);
+      return route ? { ...edge, data: { ...edge.data, route } } : edge;
+    })
+  };
+};
+
+// src/utils/swimlanes.ts
+var SWIMLANE_NODE_TYPE = "swimlane";
+var FLOW_GROUP_BYS = [
+  "domain",
+  "system",
+  "team",
+  "domain-system"
+];
+var isFlowGroupBy = (value) => FLOW_GROUP_BYS.includes(value);
+var isFlowGroupStyle = (value) => value === "lanes" || value === "boxes";
+var SWIMLANE_GROUP_BY_LABELS = {
+  domain: "Domain",
+  system: "System",
+  team: "Team",
+  "domain-system": "Domain, then system"
+};
+var EXTERNAL_LANE = "__external";
+var UNASSIGNED_LANE = "__unassigned";
+var LANE_HEADER_WIDTH = 96;
+var LANE_PADDING = { x: 48, y: 48 };
+var ROW_GAP = 32;
+var COLUMN_GAP = 24;
+var LANE_LABEL = { fontSize: 20, iconSize: 20, gap: 10 };
+var LANE_LABEL_PADDING = 40;
+var labelLength = (label) => LANE_LABEL.iconSize + LANE_LABEL.gap + label.length * LANE_LABEL.fontSize * 0.62;
+var lanesOf = (node) => node.data?.lanes;
+var isSwimlaneNode = (node) => node.type === SWIMLANE_NODE_TYPE;
+var hasSwimlanes = (nodes, groupBy) => groupBy === "domain-system" ? hasSwimlanes(nodes, "domain") && hasSwimlanes(nodes, "system") : nodes.some((node) => !!lanesOf(node)?.[groupBy]);
+var countGroups = (nodes, groupBy) => {
+  const level = groupBy === "domain-system" ? "domain" : groupBy;
+  return new Set(
+    nodes.map((node) => lanesOf(node)?.[level]?.id).filter(Boolean)
+  ).size;
+};
+var assignLanes = (nodes, edges, groupBy) => {
+  const laneOf = /* @__PURE__ */ new Map();
+  const names = /* @__PURE__ */ new Map();
+  nodes.forEach((node) => {
+    const lanes = lanesOf(node);
+    const lane = lanes?.[groupBy];
+    if (lane) {
+      laneOf.set(node.id, lane.id);
+      names.set(lane.id, lane.name);
+    } else if (lanes?.external) {
+      laneOf.set(node.id, EXTERNAL_LANE);
+    }
+  });
+  const ids = new Set(nodes.map((node) => node.id));
+  const ownLanes = new Set(
+    nodes.filter((node) => lanesOf(node)).map((node) => node.id)
+  );
+  const links = edges.filter(
+    (edge) => ids.has(edge.source) && ids.has(edge.target)
+  );
+  const inherit = (from, to) => {
+    let changed = true;
+    while (changed) {
+      changed = false;
+      links.forEach((edge) => {
+        const lane = laneOf.get(edge[from]);
+        if (lane && !laneOf.has(edge[to]) && !ownLanes.has(edge[to])) {
+          laneOf.set(edge[to], lane);
+          changed = true;
+        }
+      });
+    }
+  };
+  inherit("source", "target");
+  inherit("target", "source");
+  nodes.forEach((node) => {
+    if (!laneOf.has(node.id)) laneOf.set(node.id, UNASSIGNED_LANE);
+  });
+  return { laneOf, names };
+};
+var layoutSwimlanes = ({ nodes, edges }, groupBy, { sizeOf = getNodeSize } = {}) => {
+  const topLevel = nodes.filter((node) => !node.parentId);
+  if (topLevel.length === 0) return { nodes, edges };
+  const { laneOf, names } = assignLanes(topLevel, edges, groupBy);
+  const boxes = new Map(
+    topLevel.map((node) => [node.id, { ...node.position, ...sizeOf(node) }])
+  );
+  const order = (lane) => lane === EXTERNAL_LANE ? -Infinity : lane === UNASSIGNED_LANE ? Infinity : Math.min(
+    ...topLevel.filter((node) => laneOf.get(node.id) === lane).map((node) => boxes.get(node.id).x)
+  );
+  const lanes = [...new Set(laneOf.values())].sort(
+    (a, b) => order(a) - order(b)
+  );
+  const minX = Math.min(...[...boxes.values()].map((box) => box.x));
+  const maxX = Math.max(...[...boxes.values()].map((box) => box.x + box.width));
+  const laneX = minX - LANE_HEADER_WIDTH - LANE_PADDING.x;
+  const laneWidth = maxX - laneX + LANE_PADDING.x;
+  const laneNodes = [];
+  const positions = /* @__PURE__ */ new Map();
+  let laneY = 0;
+  lanes.forEach((lane, index) => {
+    const members = topLevel.filter((node) => laneOf.get(node.id) === lane).sort((a, b) => boxes.get(a.id).y - boxes.get(b.id).y);
+    const rows = [];
+    const rowOf = /* @__PURE__ */ new Map();
+    members.forEach((node) => {
+      const box = boxes.get(node.id);
+      const overlaps = (other) => box.x < other.x + other.width + COLUMN_GAP && other.x < box.x + box.width + COLUMN_GAP;
+      let row = rows.findIndex((r) => !r.boxes.some(overlaps));
+      if (row === -1) {
+        rows.push({ boxes: [], height: 0 });
+        row = rows.length - 1;
+      }
+      rows[row].boxes.push(box);
+      rows[row].height = Math.max(rows[row].height, box.height);
+      rowOf.set(node.id, row);
+    });
+    const label = lane === EXTERNAL_LANE ? "External" : lane === UNASSIGNED_LANE ? `No ${SWIMLANE_GROUP_BY_LABELS[groupBy].toLowerCase()}` : names.get(lane) ?? lane;
+    const rowsHeight = rows.reduce((total, row) => total + row.height, 0) + ROW_GAP * (rows.length - 1);
+    const laneHeight = Math.max(
+      rowsHeight + LANE_PADDING.y * 2,
+      labelLength(label) + LANE_LABEL_PADDING * 2
+    );
+    const rowTops = [];
+    let rowY = (laneHeight - rowsHeight) / 2;
+    rows.forEach((row) => {
+      rowTops.push(rowY);
+      rowY += row.height + ROW_GAP;
+    });
+    const laneId = `swimlane-${lane}`;
+    members.forEach((node) => {
+      const box = boxes.get(node.id);
+      const row = rowOf.get(node.id);
+      positions.set(node.id, {
+        x: box.x - laneX,
+        // Centred in its row
+        y: rowTops[row] + (rows[row].height - box.height) / 2
+      });
+    });
+    laneNodes.push({
+      id: laneId,
+      type: SWIMLANE_NODE_TYPE,
+      position: { x: laneX, y: laneY },
+      origin: [0, 0],
+      style: { width: laneWidth, height: laneHeight },
+      draggable: false,
+      selectable: false,
+      focusable: false,
+      data: {
+        label,
+        groupBy,
+        level: groupBy,
+        style: "lanes",
+        kind: lane === EXTERNAL_LANE ? "external" : lane === UNASSIGNED_LANE ? "unassigned" : "lane",
+        index
+      }
+    });
+    laneY += laneHeight;
+  });
+  return {
+    // Lanes come before their nodes, as React Flow needs parents first
+    nodes: [
+      ...laneNodes,
+      ...nodes.map((node) => {
+        const position = positions.get(node.id);
+        if (!position) return node;
+        return {
+          ...node,
+          parentId: `swimlane-${laneOf.get(node.id)}`,
+          origin: [0, 0],
+          position
+        };
+      })
+    ],
+    edges: edges.map((edge) => {
+      if (!edge.data?.route) return edge;
+      const { route: _route, ...data } = edge.data;
+      return { ...edge, data };
+    })
+  };
+};
+var getGrouping = (nodes) => {
+  const data = nodes.find(isSwimlaneNode)?.data;
+  return data ? { groupBy: data.groupBy, style: data.style } : null;
+};
+var removeSwimlanes = ({
+  nodes,
+  edges
+}) => {
+  const groups = new Map(
+    nodes.filter(isSwimlaneNode).map((group) => [group.id, group])
+  );
+  if (groups.size === 0) return { nodes, edges };
+  const offset = (id) => {
+    const group = id ? groups.get(id) : void 0;
+    if (!group) return { x: 0, y: 0 };
+    const parent = offset(group.parentId);
+    return { x: parent.x + group.position.x, y: parent.y + group.position.y };
+  };
+  return {
+    nodes: nodes.filter((node) => !groups.has(node.id)).map((node) => {
+      if (!node.parentId || !groups.has(node.parentId)) return node;
+      const { parentId, ...rest } = node;
+      const at = offset(parentId);
+      return {
+        ...rest,
+        position: { x: at.x + node.position.x, y: at.y + node.position.y }
+      };
+    }),
+    edges
+  };
+};
+var BOX_PADDING = 40;
+var groupIntoBoxes = async ({ nodes, edges }, groupBy, { sizeOf = getNodeSize } = {}) => {
+  const topLevel = nodes.filter((node) => !node.parentId);
+  const levels = groupBy === "domain-system" ? ["domain", "system"] : [groupBy];
+  const assignments = levels.map(
+    (level) => assignLanes(topLevel, edges, level)
+  );
+  const groups = /* @__PURE__ */ new Map();
+  const parentOf = /* @__PURE__ */ new Map();
+  topLevel.forEach((node) => {
+    let parentId;
+    assignments.forEach(({ laneOf, names }, depth) => {
+      const lane = laneOf.get(node.id);
+      if (lane === UNASSIGNED_LANE || depth > 0 && lane === EXTERNAL_LANE)
+        return;
+      const level = levels[depth];
+      const id = `${parentId ?? "swimlane"}__${level}-${lane}`;
+      if (!groups.has(id)) {
+        const label = lane === EXTERNAL_LANE ? "External" : names.get(lane) ?? lane;
+        const minHeight = labelLength(label) + LANE_LABEL_PADDING * 2;
+        groups.set(id, {
+          id,
+          type: SWIMLANE_NODE_TYPE,
+          ...parentId && { parentId },
+          position: { x: 0, y: 0 },
+          selectable: false,
+          focusable: false,
+          data: {
+            label,
+            groupBy,
+            level,
+            style: "boxes",
+            kind: lane === EXTERNAL_LANE ? "external" : "lane",
+            index: groups.size,
+            // Room for its name on the left, and at least as tall as it
+            layoutOptions: {
+              "elk.padding": `[top=${BOX_PADDING},left=${LANE_HEADER_WIDTH + BOX_PADDING},bottom=${BOX_PADDING},right=${BOX_PADDING}]`,
+              "elk.nodeSize.constraints": "MINIMUM_SIZE",
+              "elk.nodeSize.minimum": `(0, ${Math.ceil(minHeight)})`
+            }
+          }
+        });
+      }
+      parentId = id;
+    });
+    if (parentId) parentOf.set(node.id, parentId);
+  });
+  return layoutWithElk(
+    {
+      nodes: [
+        ...groups.values(),
+        ...nodes.map((node) => {
+          const parentId = parentOf.get(node.id);
+          return parentId ? { ...node, parentId } : node;
+        })
+      ],
+      edges
+    },
+    { sizeOf }
+  );
+};
+
+// src/utils/export-mermaid.ts
+var NODE_SHAPE_MAP = {
+  agents: ["[[", "]]"],
+  agent: ["[[", "]]"],
+  agentTool: ["[", "]"],
+  "agent-tool": ["[", "]"],
+  services: ["[[", "]]"],
+  // stadium shape
+  service: ["[[", "]]"],
+  events: [">", "]"],
+  // flag/asymmetric shape (message-like)
+  event: [">", "]"],
+  commands: [">", "]"],
+  // flag/asymmetric shape (message-like)
+  command: [">", "]"],
+  queries: ["{{", "}}"],
+  // hexagon
+  query: ["{{", "}}"],
+  // Parallelogram: what messages pass through, not a cylinder, which reads as
+  // a database (and is what data stores are drawn as)
+  channels: ["[/", "/]"],
+  channel: ["[/", "/]"],
+  domains: ["[", "]"],
+  // rectangle
+  domain: ["[", "]"],
+  "context-domain": ["[", "]"],
+  // another domain, shown as a single card
+  flows: ["([", "])"],
+  // stadium (rounded)
+  flow: ["([", "])"],
+  flowExpanded: ["([", "])"],
+  systems: ["[[", "]]"],
+  // a system shown as a single node
+  system: ["[[", "]]"],
+  step: ["[", "]"],
+  // rectangle
+  user: ["((", "))"],
+  // circle
+  actor: ["((", "))"],
+  // circle
+  "context-actor": ["((", "))"],
+  // circle
+  externalSystem: ["[[", "]]"],
+  // stadium
+  "external-system": ["[[", "]]"],
+  data: ["[(", ")]"],
+  // cylinder (database)
+  container: ["[(", ")]"],
+  "data-product": ["[[", "]]"],
+  // stadium
+  "data-products": ["[[", "]]"],
+  entities: ["[", "]"],
+  // rectangle
+  entity: ["[", "]"],
+  custom: ["[", "]"],
+  // rectangle
+  view: ["[", "]"],
+  // rectangle
+  note: ["[", "]"],
+  // rectangle
+  field: ["[(", ")]"],
+  // cylinder
+  fields: ["[(", ")]"],
+  // cylinder
+  messageGroup: ["[[", "]]"],
+  messageGroupExpanded: ["[[", "]]"]
+};
+var NODE_STYLE_CLASSES = {
+  agents: "fill:#0ea5e9,stroke:#0369a1,color:#fff",
+  agent: "fill:#0ea5e9,stroke:#0369a1,color:#fff",
+  agentTool: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
+  "agent-tool": "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
+  services: "fill:#ec4899,stroke:#be185d,color:#fff",
+  service: "fill:#ec4899,stroke:#be185d,color:#fff",
+  events: "fill:#f97316,stroke:#c2410c,color:#fff",
+  event: "fill:#f97316,stroke:#c2410c,color:#fff",
+  commands: "fill:#3b82f6,stroke:#1d4ed8,color:#fff",
+  command: "fill:#3b82f6,stroke:#1d4ed8,color:#fff",
+  queries: "fill:#22c55e,stroke:#15803d,color:#fff",
+  query: "fill:#22c55e,stroke:#15803d,color:#fff",
+  channels: "fill:#6b7280,stroke:#374151,color:#fff",
+  channel: "fill:#6b7280,stroke:#374151,color:#fff",
+  domains: "fill:#eab308,stroke:#a16207,color:#000",
+  domain: "fill:#eab308,stroke:#a16207,color:#000",
+  "context-domain": "fill:#eab308,stroke:#a16207,color:#000",
+  flows: "fill:#14b8a6,stroke:#0f766e,color:#fff",
+  flow: "fill:#14b8a6,stroke:#0f766e,color:#fff",
+  flowExpanded: "fill:#14b8a6,stroke:#0f766e,color:#fff",
+  systems: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
+  system: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
+  step: "fill:#374151,stroke:#1f2937,color:#fff",
+  user: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
+  actor: "fill:#eab308,stroke:#a16207,color:#000",
+  "context-actor": "fill:#eab308,stroke:#a16207,color:#000",
+  // yellow, as actors are on the diagram
+  externalSystem: "fill:#ec4899,stroke:#be185d,color:#fff",
+  "external-system": "fill:#ec4899,stroke:#be185d,color:#fff",
+  data: "fill:#3b82f6,stroke:#1d4ed8,color:#fff",
+  container: "fill:#3b82f6,stroke:#1d4ed8,color:#fff",
+  "data-product": "fill:#6366f1,stroke:#4338ca,color:#fff",
+  "data-products": "fill:#6366f1,stroke:#4338ca,color:#fff",
+  entities: "fill:#6b7280,stroke:#374151,color:#fff",
+  entity: "fill:#6b7280,stroke:#374151,color:#fff",
+  custom: "fill:#9ca3af,stroke:#6b7280,color:#000",
+  view: "fill:#9ca3af,stroke:#6b7280,color:#000",
+  note: "fill:#fef3c7,stroke:#d97706,color:#000",
+  field: "fill:#06b6d4,stroke:#0891b2,color:#fff",
+  fields: "fill:#06b6d4,stroke:#0891b2,color:#fff",
+  messageGroup: "fill:#7c3aed,stroke:#5b21b6,color:#fff",
+  messageGroupExpanded: "fill:#7c3aed,stroke:#5b21b6,color:#fff"
+};
+var GROUP_NODE_TYPES = /* @__PURE__ */ new Set(["system-group", "domain-group", "group"]);
+var GROUP_STYLE_CLASSES = {
+  domainGroup: "fill:#eab30814,stroke:#ca8a04,stroke-width:2px,stroke-dasharray:6 4,color:#a16207",
+  subdomainGroup: "fill:#eab3080d,stroke:#ca8a04,stroke-dasharray:4 4,color:#a16207",
+  otherDomainGroup: "fill:#9ca3af14,stroke:#9ca3af,stroke-dasharray:4 4,color:#6b7280",
+  systemGroup: "fill:#8b5cf614,stroke:#8b5cf6,stroke-width:2px,color:#7c3aed",
+  laneGroup: "fill:#9ca3af0d,stroke:#9ca3af,stroke-dasharray:4 4,color:#6b7280"
+};
+var FOCUSED_STYLE = "stroke-width:4px";
+var CROSS_DOMAIN_LINK_STYLE = "stroke:#4f46e5,stroke-width:3px";
+var RESERVED_IDS = /* @__PURE__ */ new Set([
+  "end",
+  "subgraph",
+  "graph",
+  "flowchart",
+  "style",
+  "class",
+  "classdef",
+  "click",
+  "linkstyle",
+  "call",
+  "href"
+]);
+function sanitizeMermaidId(id) {
+  const sanitized = id.replace(/[^a-zA-Z0-9_]/g, "_");
+  return RESERVED_IDS.has(sanitized.toLowerCase()) ? `node_${sanitized}` : sanitized;
+}
+function normaliseLines(label) {
+  return label.split("\n").map((line) => line.replace(/\s+/g, " ").trim()).filter(Boolean);
+}
+function escapeMermaidLabel(label) {
+  return label.replace(/#/g, "#35;").replace(/"/g, "#quot;");
+}
+function getMermaidNodeShape(type) {
+  return NODE_SHAPE_MAP[type] || ["[", "]"];
+}
+function formatLabelWithVersion(name, version) {
+  if (version) {
+    return `${name} (${version})`;
+  }
+  return name;
+}
+function resourceLabel(resource, fallback) {
+  const name = resource?.name || resource?.data?.name || resource?.id || resource?.data?.id;
+  const version = resource?.version || resource?.data?.version;
+  return formatLabelWithVersion(name || fallback, version);
+}
+function getNodeLabel(node) {
+  const { type } = node;
+  const data = node.data;
+  if (!data) return node.id;
+  if (type === "agents" || type === "agent") {
+    return resourceLabel(data.agent, node.id);
+  }
+  if (type === "agentTool" || type === "agent-tool") {
+    const agentTool = data.agentTool;
+    return agentTool?.name || agentTool?.id || node.id;
+  }
+  if (type === "services" || type === "service") {
+    return resourceLabel(data.service, node.id);
+  }
+  if (type === "events" || type === "event" || type === "commands" || type === "command" || type === "queries" || type === "query") {
+    return resourceLabel(data.message, node.id);
+  }
+  if (type === "channels" || type === "channel") {
+    return resourceLabel(data.channel, node.id);
+  }
+  if (type === "domains" || type === "domain" || type === "context-domain" || type === "domain-group" || type === "group") {
+    return resourceLabel(data.domain, node.id);
+  }
+  if (type === "systems" || type === "system" || type === "system-group") {
+    return resourceLabel(data.system, node.id);
+  }
+  if (type === "flows" || type === "flow") {
+    return resourceLabel(data.flow, node.id);
+  }
+  if (type === "flowExpanded") {
+    return formatLabelWithVersion(data.flowName || node.id, data.version);
+  }
+  if (type === "step") {
+    const step = data.step;
+    return step?.title || step?.name || step?.id || node.id;
+  }
+  if (type === "custom") {
+    return data.custom?.title || data.step?.title || data.label || node.id;
+  }
+  if (type === "externalSystem" || type === "external-system") {
+    const system = data.externalSystem || data;
+    return system?.name || system?.id || node.id;
+  }
+  if (type === "data" || type === "container") {
+    const dataNode = data.data;
+    return dataNode?.name || dataNode?.id || node.id;
+  }
+  if (type === "data-product" || type === "data-products") {
+    return resourceLabel(data.dataProduct, node.id);
+  }
+  if (type === "entities" || type === "entity") {
+    const entity = data.entity;
+    return entity?.name || entity?.id || node.id;
+  }
+  if (type === "view") {
+    return data.view?.name || data.view?.id || node.id;
+  }
+  if (type === "note") {
+    return data.text || data.label || "Note";
+  }
+  if (type === "field" || type === "fields") {
+    const name = data.name || node.id;
+    return data.type ? `${name} (${data.type})` : name;
+  }
+  if (type === "messageGroup" || type === "messageGroupExpanded") {
+    const groupName = data.groupName || node.id;
+    const count = data.messageCount || 0;
+    return `${groupName} (${count} messages)`;
+  }
+  return data.name || data.label || data.title || data.id || node.id;
+}
+function getEdgeLabel(edge) {
+  if (edge.label && typeof edge.label === "string") {
+    return edge.label;
+  }
+  if (edge.data?.label && typeof edge.data.label === "string") {
+    return edge.data.label;
+  }
+  return void 0;
+}
+function getMermaidIds(nodes) {
+  const mermaidIds = /* @__PURE__ */ new Map();
+  const usedIds = /* @__PURE__ */ new Set();
+  nodes.forEach((node) => {
+    const base = sanitizeMermaidId(node.id);
+    let id = base;
+    for (let n = 2; usedIds.has(id); n++) id = `${base}_${n}`;
+    usedIds.add(id);
+    mermaidIds.set(node.id, id);
+  });
+  return mermaidIds;
+}
+var isEntityNode = (node) => node.type === "entities" || node.type === "entity";
+var CARDINALITY_RELATIONS = /* @__PURE__ */ new Set([
+  "hasOne",
+  "hasMany",
+  "belongsTo",
+  "references"
+]);
+var ENTITY_STYLE_CLASSES = {
+  externalEntity: "fill:#9ca3af1a,stroke:#9ca3af,stroke-dasharray:4 4",
+  aggregateRoot: "stroke-width:3px"
+};
+function sanitizeErToken(value, fallback) {
+  const token = value.trim().replace(/[^A-Za-z0-9_\-[\]().]/g, "_");
+  return /^[A-Za-z_]/.test(token) ? token : `${fallback}_${token}`;
+}
+function getErCardinality(property) {
+  const required = !!property.required;
+  if (property.relationType === "hasMany" || property.type === "array") {
+    return required ? "||--|{" : "||--o{";
+  }
+  if (property.relationType === "hasOne") {
+    return required ? "||--||" : "||--o|";
+  }
+  return required ? "}o--||" : "}o--o|";
+}
+function convertEntitiesToMermaid(nodes, edges, { includeStyles = true } = {}) {
+  const mermaidIds = getMermaidIds(nodes);
+  const lines = ["erDiagram"];
+  const classes = /* @__PURE__ */ new Map();
+  const addClass = (name, id) => classes.set(name, [...classes.get(name) ?? [], id]);
+  nodes.forEach((node) => {
+    const data = node.data;
+    const entity = data?.entity?.data ?? {};
+    const id = mermaidIds.get(node.id);
+    const name = entity.name || data?.label || node.id;
+    const label = data?.externalToDomain && data?.domainName ? `${name} (${data.domainName})` : name;
+    const references = new Set(data?.referencePropertyNames ?? []);
+    const properties = entity.properties ?? [];
+    const attributes = properties.map((property) => {
+      const type = property.type === "array" && property.items?.type ? `${property.items.type}[]` : property.type || "unknown";
+      const keys = [
+        property.name === entity.identifier && "PK",
+        (property.references || references.has(property.name)) && "FK"
+      ].filter(Boolean);
+      return `        ${sanitizeErToken(type, "t")} ${sanitizeErToken(property.name, "p")}${keys.length ? ` ${keys.join(", ")}` : ""}`;
+    });
+    const definition = `    ${id}["${escapeMermaidLabel(label)}"]`;
+    lines.push(
+      ...attributes.length ? [`${definition} {`, ...attributes, "    }"] : [definition]
+    );
+    if (data?.externalToDomain) addClass("externalEntity", id);
+    if (entity.aggregateRoot) addClass("aggregateRoot", id);
+  });
+  const nodesById = new Map(nodes.map((node) => [node.id, node]));
+  const relationships = edges.filter(
+    (edge) => !edge.hidden && mermaidIds.has(edge.source) && mermaidIds.has(edge.target)
+  ).map((edge) => {
+    const propertyName = edge.sourceHandle?.replace(/-source$/, "");
+    const properties = nodesById.get(edge.source)?.data?.entity?.data?.properties ?? [];
+    const property = properties.find((p) => p.name === propertyName);
+    const relation = property?.relationType?.trim();
+    const label = relation && !CARDINALITY_RELATIONS.has(relation) ? relation : propertyName || getEdgeLabel(edge) || "references";
+    const cardinality = property ? getErCardinality(property) : "}o--o|";
+    return `    ${mermaidIds.get(edge.source)} ${cardinality} ${mermaidIds.get(edge.target)} : "${escapeMermaidLabel(label)}"`;
+  });
+  if (relationships.length > 0) lines.push("", ...relationships);
+  if (includeStyles && classes.size > 0) {
+    lines.push("");
+    classes.forEach((ids, name) => {
+      lines.push(`    classDef ${name} ${ENTITY_STYLE_CLASSES[name]}`);
+      lines.push(`    class ${ids.join(",")} ${name}`);
+    });
+  }
+  return lines.join("\n");
+}
+function getGroupClass(node) {
+  const data = node.data;
+  if (isSwimlaneNode(node)) return "laneGroup";
+  if (node.type === "system-group") return "systemGroup";
+  if (data?.otherDomain) return "otherDomainGroup";
+  if (data?.subdomain) return "subdomainGroup";
+  return "domainGroup";
+}
+var isCrossDomain = (edge) => !!edge.data?.crossDomain;
+function convertToMermaid(graphNodes, graphEdges, options = {}) {
+  const { includeStyles = true, direction = "LR" } = options;
+  const nodes = graphNodes.filter((node) => !node.hidden);
+  if (nodes.length > 0 && nodes.every(isEntityNode)) {
+    return convertEntitiesToMermaid(nodes, graphEdges, { includeStyles });
+  }
+  const mermaidIds = getMermaidIds(nodes);
+  const lines = [];
+  lines.push(`flowchart ${direction}`);
+  const childrenOf = /* @__PURE__ */ new Map();
+  const topLevelNodes = [];
+  nodes.forEach((node) => {
+    if (node.parentId && mermaidIds.has(node.parentId)) {
+      childrenOf.set(node.parentId, [
+        ...childrenOf.get(node.parentId) ?? [],
+        node
+      ]);
+    } else {
+      topLevelNodes.push(node);
+    }
+  });
+  const isGroup = (node) => childrenOf.has(node.id) || GROUP_NODE_TYPES.has(node.type ?? "") || isSwimlaneNode(node);
+  const usedTypes = /* @__PURE__ */ new Set();
+  const groupsByClass = /* @__PURE__ */ new Map();
+  const focusedIds = [];
+  nodes.forEach((node) => {
+    const id = mermaidIds.get(node.id);
+    if (isGroup(node)) {
+      const groupClass = getGroupClass(node);
+      groupsByClass.set(groupClass, [
+        ...groupsByClass.get(groupClass) ?? [],
+        id
+      ]);
+      return;
+    }
+    if (node.type && NODE_STYLE_CLASSES[node.type]) usedTypes.add(node.type);
+    if (node.data?.isFocused) focusedIds.push(id);
+  });
+  if (includeStyles) {
+    lines.push("");
+    lines.push("    %% Style definitions");
+    usedTypes.forEach((type) => {
+      lines.push(
+        `    classDef ${sanitizeMermaidId(type)} ${NODE_STYLE_CLASSES[type]}`
+      );
+    });
+    groupsByClass.forEach((_, groupClass) => {
+      lines.push(
+        `    classDef ${groupClass} ${GROUP_STYLE_CLASSES[groupClass]}`
+      );
+    });
+    if (focusedIds.length > 0) {
+      lines.push(`    classDef focused ${FOCUSED_STYLE}`);
+    }
+  }
+  lines.push("");
+  lines.push("    %% Nodes");
+  const addNode = (node, depth) => {
+    const indent = "    ".repeat(depth);
+    const id = mermaidIds.get(node.id);
+    const label = escapeMermaidLabel(
+      normaliseLines(getNodeLabel(node)).join("<br/>")
+    );
+    if (isGroup(node)) {
+      lines.push(`${indent}subgraph ${id}["${label}"]`);
+      childrenOf.get(node.id)?.forEach((child) => addNode(child, depth + 1));
+      lines.push(`${indent}end`);
+      return;
+    }
+    const [prefix, suffix] = getMermaidNodeShape(node.type || "custom");
+    let nodeLine = `${indent}${id}${prefix}"${label}"${suffix}`;
+    if (includeStyles && node.type && usedTypes.has(node.type)) {
+      nodeLine += `:::${sanitizeMermaidId(node.type)}`;
+    }
+    lines.push(nodeLine);
+  };
+  topLevelNodes.forEach((node) => addNode(node, 1));
+  lines.push("");
+  lines.push("    %% Edges");
+  const crossDomainLinks = [];
+  graphEdges.filter(
+    (edge) => !edge.hidden && mermaidIds.has(edge.source) && mermaidIds.has(edge.target)
+  ).forEach((edge, index) => {
+    const sourceId = mermaidIds.get(edge.source);
+    const targetId = mermaidIds.get(edge.target);
+    const label = normaliseLines(getEdgeLabel(edge) ?? "").join(" ");
+    lines.push(
+      label ? `    ${sourceId} -->|"${escapeMermaidLabel(label)}"| ${targetId}` : `    ${sourceId} --> ${targetId}`
+    );
+    if (isCrossDomain(edge)) crossDomainLinks.push(index);
+  });
+  if (includeStyles) {
+    const styleLines = [];
+    groupsByClass.forEach((ids, groupClass) => {
+      styleLines.push(`    class ${ids.join(",")} ${groupClass}`);
+    });
+    if (focusedIds.length > 0) {
+      styleLines.push(`    class ${focusedIds.join(",")} focused`);
+    }
+    if (crossDomainLinks.length > 0) {
+      styleLines.push(
+        `    linkStyle ${crossDomainLinks.join(",")} ${CROSS_DOMAIN_LINK_STYLE}`
+      );
+    }
+    if (styleLines.length > 0) {
+      lines.push("");
+      lines.push("    %% Boundaries and highlights");
+      lines.push(...styleLines);
+    }
+  }
+  return lines.join("\n");
+}
+
+// src/utils/hide-messages.ts
+import { MarkerType as MarkerType2 } from "@xyflow/react";
+var MESSAGE_NODE_TYPES = [...MESSAGE, "messageGroup", "messageGroupExpanded"];
+var isMessageNode = (node) => MESSAGE_NODE_TYPES.includes(node.type || "");
+var getCollection = (type = "") => {
+  if (EVENT.includes(type)) return "events";
+  if (COMMAND.includes(type)) return "commands";
+  if (QUERY.includes(type)) return "queries";
+  return "messages";
+};
+var getMessages = (node) => {
+  const data = node.data;
+  if (node.type === "messageGroup") {
+    return (data?.messages || []).map(({ message: message2 }) => [
+      message2?.data?.name || message2?.data?.id,
+      getCollection(message2?.collection)
+    ]);
+  }
+  const message = data?.message;
+  return message ? [[message.name || message.id, getCollection(node.type)]] : [];
+};
+var VERBS = {
+  events: "publishes",
+  commands: "invokes",
+  queries: "requests"
+};
+var getMessagesLabel = (messages) => {
+  if (messages.size === 0) return void 0;
+  const collections = new Set(messages.values());
+  const collection = collections.size === 1 ? Array.from(collections)[0] : "messages";
+  const verb = VERBS[collection] || "sends";
+  const sent = messages.size === 1 ? Array.from(messages.keys())[0] : `${messages.size} ${collection}`;
+  return `${verb}
+${sent}`;
+};
+var isCarrier = (node) => isMessageNode(node) || node.type === "channels";
+var isCrossDomain2 = (edge) => !!edge.data?.crossDomain;
+var getRoute = (edge) => edge.data?.route;
+var joinRoutes = (routes) => {
+  if (!routes.every((route) => route && route.points.length > 0)) return;
+  const laidOut = routes;
+  const arrives = laidOut[0].points[laidOut[0].points.length - 1];
+  const leaves = laidOut[1].points[0];
+  return {
+    points: laidOut.flatMap((route) => route.points),
+    label: { x: (arrives.x + leaves.x) / 2, y: (arrives.y + leaves.y) / 2 },
+    source: laidOut[0].source,
+    target: laidOut[laidOut.length - 1].target
+  };
+};
+var hideNodes = (nodes, edges, isHidden) => {
+  const hiddenNodes = new Map(
+    nodes.filter(isHidden).map((node) => [node.id, node])
+  );
+  if (hiddenNodes.size === 0) return { nodes, edges };
+  const outgoingEdges = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    const outgoing = outgoingEdges.get(edge.source) || [];
+    outgoing.push(edge);
+    outgoingEdges.set(edge.source, outgoing);
+  }
+  const keptEdges = [];
+  const bridgedEdges = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    if (hiddenNodes.has(edge.source)) continue;
+    const target = hiddenNodes.get(edge.target);
+    if (!target) {
+      keptEdges.push(edge);
+      continue;
+    }
+    if (!isCarrier(target)) continue;
+    const stack = [
+      {
+        id: edge.target,
+        messages: [],
+        routes: [getRoute(edge)],
+        crossDomain: isCrossDomain2(edge)
+      }
+    ];
+    const visited = /* @__PURE__ */ new Set();
+    while (stack.length > 0) {
+      const current = stack.pop();
+      if (visited.has(current.id)) continue;
+      visited.add(current.id);
+      const messages = [
+        ...current.messages,
+        ...getMessages(hiddenNodes.get(current.id))
+      ];
+      for (const next of outgoingEdges.get(current.id) || []) {
+        const routes = [...current.routes, getRoute(next)];
+        const crossDomain = current.crossDomain || isCrossDomain2(next);
+        const nextNode = hiddenNodes.get(next.target);
+        if (nextNode) {
+          if (isCarrier(nextNode))
+            stack.push({ id: next.target, messages, routes, crossDomain });
+          continue;
+        }
+        if (next.target === edge.source) continue;
+        const id = `bridged-${edge.source}-${next.target}`;
+        const bridged = bridgedEdges.get(id) || {
+          source: edge.source,
+          target: next.target,
+          messages: /* @__PURE__ */ new Map(),
+          route: joinRoutes(routes),
+          crossDomain: false
+        };
+        bridged.crossDomain || (bridged.crossDomain = crossDomain);
+        messages.forEach(
+          ([name, collection]) => bridged.messages.set(name, collection)
+        );
+        bridgedEdges.set(id, bridged);
+      }
+    }
+  }
+  const newEdges = Array.from(
+    bridgedEdges,
+    ([id, bridged]) => createEdge({
+      id,
+      source: bridged.source,
+      target: bridged.target,
+      label: getMessagesLabel(bridged.messages),
+      // The same size arrow as the rest of the graph's edges
+      markerEnd: {
+        type: MarkerType2.ArrowClosed,
+        width: 20,
+        height: 20,
+        color: "rgb(var(--ec-page-text-muted))"
+      },
+      // Along the same route, and crossing domains if any edge it replaces did
+      data: {
+        ...bridged.route ? { route: bridged.route } : {},
+        ...bridged.crossDomain ? { crossDomain: true } : {}
+      }
+    })
+  );
+  return {
+    nodes: nodes.filter((node) => !hiddenNodes.has(node.id)),
+    edges: [...keptEdges, ...newEdges]
+  };
+};
+var hideMessageNodes = (nodes, edges) => hideNodes(nodes, edges, isCarrier);
+
+export {
+  SERVICE,
+  AGENT,
+  AGENT_TOOL,
+  EVENT,
+  QUERY,
+  COMMAND,
+  CHANNEL,
+  ACTOR,
+  DATA,
+  VIEW,
+  MESSAGE,
+  generateIdForNode,
+  generateIdForNodes,
+  generatedIdForEdge,
+  getColorFromString,
+  getEdgeLabelForServiceAsTarget,
+  getEdgeLabelForMessageAsSource,
+  getEdgeLabelSize,
+  createEdge,
+  createNode,
+  getNodeSize,
+  layoutWithElk,
+  FLOW_GROUP_BYS,
+  isFlowGroupBy,
+  isFlowGroupStyle,
+  SWIMLANE_GROUP_BY_LABELS,
+  LANE_HEADER_WIDTH,
+  LANE_LABEL,
+  isSwimlaneNode,
+  hasSwimlanes,
+  countGroups,
+  layoutSwimlanes,
+  getGrouping,
+  removeSwimlanes,
+  groupIntoBoxes,
+  convertToMermaid,
+  isMessageNode,
+  getMessagesLabel,
+  isCarrier,
+  hideNodes,
+  hideMessageNodes
+};
+//# sourceMappingURL=chunk-P2DH6CFV.mjs.map