@eventcatalog/visualiser 3.22.1 → 4.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.d.mts +56 -22
  2. package/dist/index.d.ts +56 -22
  3. package/dist/index.js +1529 -1189
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1195 -837
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles-core.css +55 -0
  8. package/dist/styles.css +55 -0
  9. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  useState as useState15,
6
6
  useCallback as useCallback12,
7
7
  useRef as useRef7,
8
- memo as memo37
8
+ memo as memo40
9
9
  } from "react";
10
10
  import { createPortal } from "react-dom";
11
11
  import {
@@ -28,7 +28,21 @@ import {
28
28
  HistoryIcon,
29
29
  CheckIcon as CheckIcon3,
30
30
  ClipboardIcon as ClipboardIcon3,
31
- MoreVertical
31
+ MoreVertical,
32
+ Zap as Zap7,
33
+ Bot as Bot4,
34
+ Wrench as Wrench3,
35
+ ServerIcon as ServerIcon4,
36
+ Workflow as Workflow3,
37
+ MessageSquare as MessageSquare4,
38
+ Search as SearchIcon2,
39
+ ArrowLeftRight,
40
+ Group as GroupIcon3,
41
+ Globe as Globe6,
42
+ User as User6,
43
+ Database as Database7,
44
+ Boxes,
45
+ Box
32
46
  } from "lucide-react";
33
47
  import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
34
48
  import { toPng } from "html-to-image";
@@ -51,6 +65,15 @@ function buildUrl(path) {
51
65
  }
52
66
  return path;
53
67
  }
68
+ function navigateTo(url) {
69
+ if (typeof window === "undefined") return;
70
+ const ecNavigate = window.__ecNavigate;
71
+ if (typeof ecNavigate === "function") {
72
+ ecNavigate(url);
73
+ return;
74
+ }
75
+ window.location.href = url;
76
+ }
54
77
 
55
78
  // src/utils/custom-icon.tsx
56
79
  import { jsx } from "react/jsx-runtime";
@@ -3968,13 +3991,145 @@ var config_default3 = {
3968
3991
  }
3969
3992
  };
3970
3993
 
3971
- // src/nodes/external-system/ExternalSystem.tsx
3994
+ // src/nodes/ContextActor.tsx
3972
3995
  import { memo as memo15 } from "react";
3973
- import { Globe as Globe2 } from "lucide-react";
3974
- import { Handle as Handle11, Position as Position11, useNodeConnections as useNodeConnections10 } from "@xyflow/react";
3996
+ import { Handle as Handle11, Position as Position11 } from "@xyflow/react";
3997
+ import { User as User3 } from "lucide-react";
3975
3998
  import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
3999
+ var ContextActor_default = memo15(function ContextActorNode({ data }) {
4000
+ const { name } = data;
4001
+ return /* @__PURE__ */ jsxs14(
4002
+ "div",
4003
+ {
4004
+ className: "relative flex w-44 flex-col items-center rounded-2xl border-2 border-yellow-500 bg-[var(--ec-actor-node-bg,rgb(var(--ec-card-bg)))] px-3 pb-3 pt-5",
4005
+ style: { boxShadow: "0 2px 12px rgba(234, 179, 8, 0.15)" },
4006
+ children: [
4007
+ /* @__PURE__ */ jsx16(
4008
+ Handle11,
4009
+ {
4010
+ type: "target",
4011
+ position: Position11.Left,
4012
+ style: HIDDEN_HANDLE_STYLE
4013
+ }
4014
+ ),
4015
+ /* @__PURE__ */ jsx16(
4016
+ Handle11,
4017
+ {
4018
+ type: "source",
4019
+ position: Position11.Right,
4020
+ style: HIDDEN_HANDLE_STYLE
4021
+ }
4022
+ ),
4023
+ /* @__PURE__ */ jsx16("div", { className: "absolute -top-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx16("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border-2 border-yellow-500 bg-[rgb(var(--ec-card-bg))] shadow-sm", children: /* @__PURE__ */ jsx16(User3, { className: "h-4 w-4 text-yellow-500", strokeWidth: 2 }) }) }),
4024
+ /* @__PURE__ */ jsx16(
4025
+ TruncatedResourceName,
4026
+ {
4027
+ as: "div",
4028
+ value: name,
4029
+ className: "mt-1 max-w-full text-center text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))] truncate",
4030
+ children: name
4031
+ }
4032
+ ),
4033
+ /* @__PURE__ */ jsx16("span", { className: "mt-0.5 text-[8px] font-bold uppercase tracking-widest text-yellow-600 dark:text-yellow-400", children: "Actor" })
4034
+ ]
4035
+ }
4036
+ );
4037
+ });
4038
+
4039
+ // src/nodes/SystemGroupNode.tsx
4040
+ import { memo as memo16 } from "react";
4041
+ import { Group as GroupIcon } from "lucide-react";
4042
+ import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
4043
+ var CONTAINER_STYLE = {
4044
+ width: "100%",
4045
+ height: "100%",
4046
+ borderRadius: 14,
4047
+ border: "2px solid var(--ec-system-group-border, #c4b5fd)",
4048
+ // Slightly gray, translucent body so the grouped children read as "inside".
4049
+ backgroundColor: "var(--ec-system-group-bg, rgba(100, 116, 139, 0.06))",
4050
+ position: "relative",
4051
+ overflow: "visible",
4052
+ boxShadow: "0 2px 16px rgba(139, 92, 246, 0.10)"
4053
+ };
4054
+ var HEADER_STYLE = {
4055
+ position: "absolute",
4056
+ top: 0,
4057
+ left: 0,
4058
+ right: 0,
4059
+ height: 48,
4060
+ borderTopLeftRadius: 12,
4061
+ borderTopRightRadius: 12,
4062
+ // Faint violet wash on the header, separated from the body by a hairline.
4063
+ background: "var(--ec-system-group-header-bg, rgba(139, 92, 246, 0.05))",
4064
+ borderBottom: "1px solid var(--ec-system-group-border, #c4b5fd)",
4065
+ display: "flex",
4066
+ alignItems: "center",
4067
+ padding: "0 16px",
4068
+ overflow: "visible"
4069
+ };
4070
+ var BADGE_STYLE = {
4071
+ position: "absolute",
4072
+ top: -11,
4073
+ left: 14,
4074
+ display: "inline-flex",
4075
+ alignItems: "center",
4076
+ gap: 4,
4077
+ fontSize: 8,
4078
+ fontWeight: 700,
4079
+ letterSpacing: "0.12em",
4080
+ textTransform: "uppercase",
4081
+ color: "white",
4082
+ background: "#8b5cf6",
4083
+ padding: "2px 7px",
4084
+ borderRadius: 5,
4085
+ boxShadow: "0 1px 2px rgba(0,0,0,0.12)",
4086
+ zIndex: 10
4087
+ };
4088
+ var NAME_STYLE = {
4089
+ fontSize: 14,
4090
+ fontWeight: 700,
4091
+ color: "var(--ec-system-group-text, #5b21b6)",
4092
+ whiteSpace: "nowrap"
4093
+ };
4094
+ var VERSION_STYLE = {
4095
+ fontSize: 10,
4096
+ fontWeight: 500,
4097
+ color: "#a78bfa",
4098
+ marginLeft: 6
4099
+ };
4100
+ var SystemGroupNode_default = memo16(function SystemGroupNode({ data }) {
4101
+ const { system } = data;
4102
+ return /* @__PURE__ */ jsxs15("div", { style: CONTAINER_STYLE, children: [
4103
+ /* @__PURE__ */ jsxs15("span", { style: BADGE_STYLE, children: [
4104
+ /* @__PURE__ */ jsx17(GroupIcon, { size: 10, strokeWidth: 2.5 }),
4105
+ "System"
4106
+ ] }),
4107
+ /* @__PURE__ */ jsxs15("div", { style: HEADER_STYLE, children: [
4108
+ /* @__PURE__ */ jsx17(
4109
+ TruncatedResourceName,
4110
+ {
4111
+ value: system?.name || "System",
4112
+ tooltipBorderColor: "#8b5cf6",
4113
+ className: "truncate",
4114
+ style: NAME_STYLE,
4115
+ children: system?.name || "System"
4116
+ }
4117
+ ),
4118
+ system?.version && /* @__PURE__ */ jsxs15("span", { style: VERSION_STYLE, children: [
4119
+ "v",
4120
+ system.version
4121
+ ] })
4122
+ ] })
4123
+ ] });
4124
+ });
4125
+
4126
+ // src/nodes/external-system/ExternalSystem.tsx
4127
+ import { memo as memo17 } from "react";
4128
+ import { Globe as Globe2 } from "lucide-react";
4129
+ import { Handle as Handle12, Position as Position12, useNodeConnections as useNodeConnections10 } from "@xyflow/react";
4130
+ import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
3976
4131
  function GlowHandle14({ side }) {
3977
- return /* @__PURE__ */ jsx16(
4132
+ return /* @__PURE__ */ jsx18(
3978
4133
  "div",
3979
4134
  {
3980
4135
  style: {
@@ -4000,7 +4155,7 @@ function classNames11(...classes) {
4000
4155
  function PostItExternalSystem(props) {
4001
4156
  const { version, name, summary, deprecated, draft, notes } = props.data.externalSystem;
4002
4157
  const mode = props.data.mode || "simple";
4003
- return /* @__PURE__ */ jsxs14(
4158
+ return /* @__PURE__ */ jsxs16(
4004
4159
  "div",
4005
4160
  {
4006
4161
  className: classNames11(
@@ -4008,24 +4163,24 @@ function PostItExternalSystem(props) {
4008
4163
  props?.selected ? "ring-2 ring-purple-400/60 ring-offset-1" : ""
4009
4164
  ),
4010
4165
  children: [
4011
- /* @__PURE__ */ jsx16(
4012
- Handle11,
4166
+ /* @__PURE__ */ jsx18(
4167
+ Handle12,
4013
4168
  {
4014
4169
  type: "target",
4015
- position: Position11.Left,
4170
+ position: Position12.Left,
4016
4171
  style: HIDDEN_HANDLE_STYLE
4017
4172
  }
4018
4173
  ),
4019
- /* @__PURE__ */ jsx16(
4020
- Handle11,
4174
+ /* @__PURE__ */ jsx18(
4175
+ Handle12,
4021
4176
  {
4022
4177
  type: "source",
4023
- position: Position11.Right,
4178
+ position: Position12.Right,
4024
4179
  style: HIDDEN_HANDLE_STYLE
4025
4180
  }
4026
4181
  ),
4027
- notes && notes.length > 0 && /* @__PURE__ */ jsx16(NotesIndicator, { notes, resourceName: name }),
4028
- /* @__PURE__ */ jsxs14(
4182
+ notes && notes.length > 0 && /* @__PURE__ */ jsx18(NotesIndicator, { notes, resourceName: name }),
4183
+ /* @__PURE__ */ jsxs16(
4029
4184
  "div",
4030
4185
  {
4031
4186
  className: "absolute inset-0",
@@ -4036,8 +4191,8 @@ function PostItExternalSystem(props) {
4036
4191
  border: deprecated ? "2px dashed rgba(239, 68, 68, 0.5)" : draft ? "2px dashed rgba(168, 85, 247, 0.5)" : "none"
4037
4192
  },
4038
4193
  children: [
4039
- /* @__PURE__ */ jsx16("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
4040
- /* @__PURE__ */ jsx16(
4194
+ /* @__PURE__ */ jsx18("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
4195
+ /* @__PURE__ */ jsx18(
4041
4196
  "div",
4042
4197
  {
4043
4198
  style: {
@@ -4056,16 +4211,16 @@ function PostItExternalSystem(props) {
4056
4211
  ]
4057
4212
  }
4058
4213
  ),
4059
- /* @__PURE__ */ jsxs14("div", { className: "relative px-3.5 py-3", children: [
4060
- /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between mb-2", children: [
4061
- /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1", children: [
4062
- /* @__PURE__ */ jsx16(Globe2, { className: "w-3 h-3 text-purple-900/50", strokeWidth: 2.5 }),
4063
- /* @__PURE__ */ jsx16("span", { className: "text-[8px] font-bold text-purple-900/50 uppercase tracking-widest", children: "External" })
4214
+ /* @__PURE__ */ jsxs16("div", { className: "relative px-3.5 py-3", children: [
4215
+ /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between mb-2", children: [
4216
+ /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
4217
+ /* @__PURE__ */ jsx18(Globe2, { className: "w-3 h-3 text-purple-900/50", strokeWidth: 2.5 }),
4218
+ /* @__PURE__ */ jsx18("span", { className: "text-[8px] font-bold text-purple-900/50 uppercase tracking-widest", children: "External" })
4064
4219
  ] }),
4065
- draft && /* @__PURE__ */ jsx16("span", { className: "text-[8px] font-extrabold text-amber-900 bg-amber-100 border border-dashed border-amber-400 px-1.5 py-0.5 rounded uppercase", children: "Draft" }),
4066
- deprecated && /* @__PURE__ */ jsx16("span", { className: "text-[7px] font-bold text-white bg-red-500 border border-red-600 px-1.5 py-0.5 rounded uppercase", children: "Deprecated" })
4220
+ draft && /* @__PURE__ */ jsx18("span", { className: "text-[8px] font-extrabold text-amber-900 bg-amber-100 border border-dashed border-amber-400 px-1.5 py-0.5 rounded uppercase", children: "Draft" }),
4221
+ deprecated && /* @__PURE__ */ jsx18("span", { className: "text-[7px] font-bold text-white bg-red-500 border border-red-600 px-1.5 py-0.5 rounded uppercase", children: "Deprecated" })
4067
4222
  ] }),
4068
- /* @__PURE__ */ jsx16(
4223
+ /* @__PURE__ */ jsx18(
4069
4224
  TruncatedResourceName,
4070
4225
  {
4071
4226
  as: "div",
@@ -4078,11 +4233,11 @@ function PostItExternalSystem(props) {
4078
4233
  children: name
4079
4234
  }
4080
4235
  ),
4081
- version && /* @__PURE__ */ jsxs14("div", { className: "text-[9px] text-purple-900/40 font-semibold mt-0.5", children: [
4236
+ version && /* @__PURE__ */ jsxs16("div", { className: "text-[9px] text-purple-900/40 font-semibold mt-0.5", children: [
4082
4237
  "v",
4083
4238
  version
4084
4239
  ] }),
4085
- mode === "full" && summary && /* @__PURE__ */ jsx16(
4240
+ mode === "full" && summary && /* @__PURE__ */ jsx18(
4086
4241
  "div",
4087
4242
  {
4088
4243
  className: "mt-2 pt-1.5 border-t border-purple-900/10 text-[9px] text-purple-950/60 leading-relaxed overflow-hidden",
@@ -4103,7 +4258,7 @@ function DefaultExternalSystem(props) {
4103
4258
  const sourceConnections = useNodeConnections10({ handleType: "source" });
4104
4259
  const isDark = useDarkMode();
4105
4260
  const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
4106
- return /* @__PURE__ */ jsxs14(
4261
+ return /* @__PURE__ */ jsxs16(
4107
4262
  "div",
4108
4263
  {
4109
4264
  className: classNames11(
@@ -4116,26 +4271,26 @@ function DefaultExternalSystem(props) {
4116
4271
  boxShadow: "0 2px 12px rgba(168, 85, 247, 0.15)"
4117
4272
  },
4118
4273
  children: [
4119
- /* @__PURE__ */ jsx16(
4120
- Handle11,
4274
+ /* @__PURE__ */ jsx18(
4275
+ Handle12,
4121
4276
  {
4122
4277
  type: "target",
4123
- position: Position11.Left,
4278
+ position: Position12.Left,
4124
4279
  style: HIDDEN_HANDLE_STYLE
4125
4280
  }
4126
4281
  ),
4127
- /* @__PURE__ */ jsx16(
4128
- Handle11,
4282
+ /* @__PURE__ */ jsx18(
4283
+ Handle12,
4129
4284
  {
4130
4285
  type: "source",
4131
- position: Position11.Right,
4286
+ position: Position12.Right,
4132
4287
  style: HIDDEN_HANDLE_STYLE
4133
4288
  }
4134
4289
  ),
4135
- notes && notes.length > 0 && /* @__PURE__ */ jsx16(NotesIndicator, { notes, resourceName: name }),
4136
- targetConnections.length > 0 && /* @__PURE__ */ jsx16(GlowHandle14, { side: "left" }),
4137
- sourceConnections.length > 0 && /* @__PURE__ */ jsx16(GlowHandle14, { side: "right" }),
4138
- /* @__PURE__ */ jsx16("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs14(
4290
+ notes && notes.length > 0 && /* @__PURE__ */ jsx18(NotesIndicator, { notes, resourceName: name }),
4291
+ targetConnections.length > 0 && /* @__PURE__ */ jsx18(GlowHandle14, { side: "left" }),
4292
+ sourceConnections.length > 0 && /* @__PURE__ */ jsx18(GlowHandle14, { side: "right" }),
4293
+ /* @__PURE__ */ jsx18("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs16(
4139
4294
  "span",
4140
4295
  {
4141
4296
  className: classNames11(
@@ -4143,16 +4298,16 @@ function DefaultExternalSystem(props) {
4143
4298
  deprecated ? "bg-red-500" : "bg-purple-500"
4144
4299
  ),
4145
4300
  children: [
4146
- /* @__PURE__ */ jsx16(Globe2, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
4301
+ /* @__PURE__ */ jsx18(Globe2, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
4147
4302
  "External System",
4148
4303
  draft && " (Draft)",
4149
4304
  deprecated && " (Deprecated)"
4150
4305
  ]
4151
4306
  }
4152
4307
  ) }),
4153
- /* @__PURE__ */ jsxs14("div", { className: "px-3 pt-3.5 pb-2.5", children: [
4154
- /* @__PURE__ */ jsxs14("div", { className: "flex items-baseline gap-1 min-w-0", children: [
4155
- /* @__PURE__ */ jsx16(
4308
+ /* @__PURE__ */ jsxs16("div", { className: "px-3 pt-3.5 pb-2.5", children: [
4309
+ /* @__PURE__ */ jsxs16("div", { className: "flex items-baseline gap-1 min-w-0", children: [
4310
+ /* @__PURE__ */ jsx18(
4156
4311
  TruncatedResourceName,
4157
4312
  {
4158
4313
  value: name,
@@ -4161,13 +4316,13 @@ function DefaultExternalSystem(props) {
4161
4316
  children: name
4162
4317
  }
4163
4318
  ),
4164
- version && /* @__PURE__ */ jsxs14("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
4319
+ version && /* @__PURE__ */ jsxs16("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
4165
4320
  "(v",
4166
4321
  version,
4167
4322
  ")"
4168
4323
  ] })
4169
4324
  ] }),
4170
- mode === "full" && summary && /* @__PURE__ */ jsx16(
4325
+ mode === "full" && summary && /* @__PURE__ */ jsx18(
4171
4326
  "div",
4172
4327
  {
4173
4328
  className: "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed overflow-hidden",
@@ -4181,12 +4336,12 @@ function DefaultExternalSystem(props) {
4181
4336
  }
4182
4337
  );
4183
4338
  }
4184
- var ExternalSystem_default = memo15(function ExternalSystem(props) {
4339
+ var ExternalSystem_default = memo17(function ExternalSystem(props) {
4185
4340
  const nodeStyle = props?.data?.style;
4186
4341
  if (nodeStyle === "post-it") {
4187
- return /* @__PURE__ */ jsx16(PostItExternalSystem, { ...props });
4342
+ return /* @__PURE__ */ jsx18(PostItExternalSystem, { ...props });
4188
4343
  }
4189
- return /* @__PURE__ */ jsx16(DefaultExternalSystem, { ...props });
4344
+ return /* @__PURE__ */ jsx18(DefaultExternalSystem, { ...props });
4190
4345
  });
4191
4346
 
4192
4347
  // src/nodes/external-system/config.ts
@@ -4254,9 +4409,9 @@ var config_default4 = {
4254
4409
  };
4255
4410
 
4256
4411
  // src/nodes/note/NoteNode.tsx
4257
- import { Handle as Handle12, Position as Position12 } from "@xyflow/react";
4258
- import { memo as memo16, useState as useState3, useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2 } from "react";
4259
- import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
4412
+ import { Handle as Handle13, Position as Position13 } from "@xyflow/react";
4413
+ import { memo as memo18, useState as useState3, useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2 } from "react";
4414
+ import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
4260
4415
  function classNames12(...classes) {
4261
4416
  return classes.filter(Boolean).join(" ");
4262
4417
  }
@@ -4312,7 +4467,7 @@ var AVAILABLE_COLORS = {
4312
4467
  };
4313
4468
  var POSITION_RELATIVE_STYLE = { position: "relative" };
4314
4469
  var TEXTAREA_STYLE = { height: "100%", minHeight: 0 };
4315
- var NoteNode_default = memo16(function NoteNodeComponent({
4470
+ var NoteNode_default = memo18(function NoteNodeComponent({
4316
4471
  id,
4317
4472
  data,
4318
4473
  selected,
@@ -4403,24 +4558,24 @@ var NoteNode_default = memo16(function NoteNodeComponent({
4403
4558
  },
4404
4559
  [id, onColorChange]
4405
4560
  );
4406
- return /* @__PURE__ */ jsxs15("div", { className: "relative group", style: FULL_SIZE_STYLE, children: [
4407
- /* @__PURE__ */ jsx17(
4408
- Handle12,
4561
+ return /* @__PURE__ */ jsxs17("div", { className: "relative group", style: FULL_SIZE_STYLE, children: [
4562
+ /* @__PURE__ */ jsx19(
4563
+ Handle13,
4409
4564
  {
4410
4565
  type: "target",
4411
- position: Position12.Left,
4566
+ position: Position13.Left,
4412
4567
  className: "!left-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10"
4413
4568
  }
4414
4569
  ),
4415
- /* @__PURE__ */ jsx17(
4416
- Handle12,
4570
+ /* @__PURE__ */ jsx19(
4571
+ Handle13,
4417
4572
  {
4418
4573
  type: "source",
4419
- position: Position12.Right,
4574
+ position: Position13.Right,
4420
4575
  className: "!right-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10"
4421
4576
  }
4422
4577
  ),
4423
- selected && !isEditing && !readOnly && /* @__PURE__ */ jsx17("div", { className: "absolute -top-10 left-1/2 transform -translate-x-1/2 flex space-x-1 p-1 bg-[rgb(var(--ec-card-bg))] rounded-md shadow-lg border border-[rgb(var(--ec-page-border))] z-20", children: Object.keys(AVAILABLE_COLORS).map((colorKey) => /* @__PURE__ */ jsx17(
4578
+ selected && !isEditing && !readOnly && /* @__PURE__ */ jsx19("div", { className: "absolute -top-10 left-1/2 transform -translate-x-1/2 flex space-x-1 p-1 bg-[rgb(var(--ec-card-bg))] rounded-md shadow-lg border border-[rgb(var(--ec-page-border))] z-20", children: Object.keys(AVAILABLE_COLORS).map((colorKey) => /* @__PURE__ */ jsx19(
4424
4579
  "button",
4425
4580
  {
4426
4581
  onClick: () => handleColorChange(colorKey),
@@ -4434,7 +4589,7 @@ var NoteNode_default = memo16(function NoteNodeComponent({
4434
4589
  },
4435
4590
  colorKey
4436
4591
  )) }),
4437
- /* @__PURE__ */ jsxs15(
4592
+ /* @__PURE__ */ jsxs17(
4438
4593
  "div",
4439
4594
  {
4440
4595
  onDoubleClick: handleDoubleClick,
@@ -4449,7 +4604,7 @@ var NoteNode_default = memo16(function NoteNodeComponent({
4449
4604
  ),
4450
4605
  style: POSITION_RELATIVE_STYLE,
4451
4606
  children: [
4452
- isEditing ? /* @__PURE__ */ jsx17(
4607
+ isEditing ? /* @__PURE__ */ jsx19(
4453
4608
  "textarea",
4454
4609
  {
4455
4610
  ref: textAreaRef,
@@ -4465,8 +4620,8 @@ var NoteNode_default = memo16(function NoteNodeComponent({
4465
4620
  style: TEXTAREA_STYLE,
4466
4621
  placeholder: "Enter text..."
4467
4622
  }
4468
- ) : /* @__PURE__ */ jsxs15(Fragment2, { children: [
4469
- /* @__PURE__ */ jsx17(
4623
+ ) : /* @__PURE__ */ jsxs17(Fragment2, { children: [
4624
+ /* @__PURE__ */ jsx19(
4470
4625
  "div",
4471
4626
  {
4472
4627
  ref: displayRef,
@@ -4476,14 +4631,14 @@ var NoteNode_default = memo16(function NoteNodeComponent({
4476
4631
  }
4477
4632
  }
4478
4633
  ),
4479
- isTextOverflowing && /* @__PURE__ */ jsxs15(
4634
+ isTextOverflowing && /* @__PURE__ */ jsxs17(
4480
4635
  "div",
4481
4636
  {
4482
4637
  className: "pointer-events-none absolute left-1/2 bottom-full z-[9999] mb-4 hidden w-max max-w-[320px] -translate-x-1/2 rounded-md border bg-slate-950 px-2.5 py-1.5 text-[11px] font-medium leading-snug text-white shadow-lg group-hover:block",
4483
4638
  style: { borderColor: colorClasses.tooltipBorderColor },
4484
4639
  children: [
4485
- /* @__PURE__ */ jsx17("span", { className: "block whitespace-pre-wrap break-words", children: currentText }),
4486
- /* @__PURE__ */ jsx17(
4640
+ /* @__PURE__ */ jsx19("span", { className: "block whitespace-pre-wrap break-words", children: currentText }),
4641
+ /* @__PURE__ */ jsx19(
4487
4642
  "span",
4488
4643
  {
4489
4644
  className: "absolute left-1/2 top-full h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r bg-slate-950",
@@ -4497,7 +4652,7 @@ var NoteNode_default = memo16(function NoteNodeComponent({
4497
4652
  }
4498
4653
  )
4499
4654
  ] }),
4500
- currentColorName === "yellow" && /* @__PURE__ */ jsx17("div", { className: "absolute top-0 right-0 w-4 h-4", children: /* @__PURE__ */ jsx17("div", { className: "absolute top-0 right-0 w-0 h-0 border-l-[16px] border-b-[16px] border-l-transparent border-b-yellow-400/30 rounded-br-lg" }) })
4655
+ currentColorName === "yellow" && /* @__PURE__ */ jsx19("div", { className: "absolute top-0 right-0 w-4 h-4", children: /* @__PURE__ */ jsx19("div", { className: "absolute top-0 right-0 w-0 h-0 border-l-[16px] border-b-[16px] border-l-transparent border-b-yellow-400/30 rounded-br-lg" }) })
4501
4656
  ]
4502
4657
  }
4503
4658
  )
@@ -4505,12 +4660,12 @@ var NoteNode_default = memo16(function NoteNodeComponent({
4505
4660
  });
4506
4661
 
4507
4662
  // src/nodes/field/FieldNode.tsx
4508
- import { memo as memo17 } from "react";
4663
+ import { memo as memo19 } from "react";
4509
4664
  import { Database as Database3 } from "lucide-react";
4510
- import { Handle as Handle13, Position as Position13, useNodeConnections as useNodeConnections11 } from "@xyflow/react";
4511
- import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
4665
+ import { Handle as Handle14, Position as Position14, useNodeConnections as useNodeConnections11 } from "@xyflow/react";
4666
+ import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
4512
4667
  function GlowHandle15({ side }) {
4513
- return /* @__PURE__ */ jsx18(
4668
+ return /* @__PURE__ */ jsx20(
4514
4669
  "div",
4515
4670
  {
4516
4671
  style: {
@@ -4533,13 +4688,13 @@ function GlowHandle15({ side }) {
4533
4688
  function classNames13(...classes) {
4534
4689
  return classes.filter(Boolean).join(" ");
4535
4690
  }
4536
- var FieldNode_default = memo17(function Field(props) {
4691
+ var FieldNode_default = memo19(function Field(props) {
4537
4692
  const { name, type: fieldType } = props.data;
4538
4693
  const mode = props.data.mode || "simple";
4539
4694
  const targetConnections = useNodeConnections11({ handleType: "target" });
4540
4695
  const sourceConnections = useNodeConnections11({ handleType: "source" });
4541
4696
  const isDark = useDarkMode();
4542
- return /* @__PURE__ */ jsxs16(
4697
+ return /* @__PURE__ */ jsxs18(
4543
4698
  "div",
4544
4699
  {
4545
4700
  className: classNames13(
@@ -4552,29 +4707,29 @@ var FieldNode_default = memo17(function Field(props) {
4552
4707
  boxShadow: "0 2px 12px rgba(6, 182, 212, 0.15)"
4553
4708
  },
4554
4709
  children: [
4555
- /* @__PURE__ */ jsx18(
4556
- Handle13,
4710
+ /* @__PURE__ */ jsx20(
4711
+ Handle14,
4557
4712
  {
4558
4713
  type: "target",
4559
- position: Position13.Left,
4714
+ position: Position14.Left,
4560
4715
  style: HIDDEN_HANDLE_STYLE
4561
4716
  }
4562
4717
  ),
4563
- /* @__PURE__ */ jsx18(
4564
- Handle13,
4718
+ /* @__PURE__ */ jsx20(
4719
+ Handle14,
4565
4720
  {
4566
4721
  type: "source",
4567
- position: Position13.Right,
4722
+ position: Position14.Right,
4568
4723
  style: HIDDEN_HANDLE_STYLE
4569
4724
  }
4570
4725
  ),
4571
- targetConnections.length > 0 && /* @__PURE__ */ jsx18(GlowHandle15, { side: "left" }),
4572
- sourceConnections.length > 0 && /* @__PURE__ */ jsx18(GlowHandle15, { side: "right" }),
4573
- /* @__PURE__ */ jsx18("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ jsxs16("span", { className: "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm bg-cyan-600", children: [
4574
- /* @__PURE__ */ jsx18(Database3, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
4726
+ targetConnections.length > 0 && /* @__PURE__ */ jsx20(GlowHandle15, { side: "left" }),
4727
+ sourceConnections.length > 0 && /* @__PURE__ */ jsx20(GlowHandle15, { side: "right" }),
4728
+ /* @__PURE__ */ jsx20("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ jsxs18("span", { className: "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm bg-cyan-600", children: [
4729
+ /* @__PURE__ */ jsx20(Database3, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
4575
4730
  "Field"
4576
4731
  ] }) }),
4577
- fieldType && /* @__PURE__ */ jsx18(
4732
+ fieldType && /* @__PURE__ */ jsx20(
4578
4733
  "span",
4579
4734
  {
4580
4735
  className: "z-10 text-[7px] font-semibold text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg))] border border-cyan-500 rounded-full px-1.5 py-0.5 uppercase tracking-wide",
@@ -4582,9 +4737,9 @@ var FieldNode_default = memo17(function Field(props) {
4582
4737
  children: fieldType
4583
4738
  }
4584
4739
  ),
4585
- /* @__PURE__ */ jsxs16("div", { className: "px-3 pt-3.5 pb-2.5", children: [
4586
- /* @__PURE__ */ jsx18("div", { className: "flex items-baseline gap-1", children: /* @__PURE__ */ jsx18("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))]", children: name }) }),
4587
- mode === "full" && fieldType && /* @__PURE__ */ jsxs16(
4740
+ /* @__PURE__ */ jsxs18("div", { className: "px-3 pt-3.5 pb-2.5", children: [
4741
+ /* @__PURE__ */ jsx20("div", { className: "flex items-baseline gap-1", children: /* @__PURE__ */ jsx20("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))]", children: name }) }),
4742
+ mode === "full" && fieldType && /* @__PURE__ */ jsxs18(
4588
4743
  "div",
4589
4744
  {
4590
4745
  className: "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed",
@@ -4631,8 +4786,8 @@ var config_default5 = {
4631
4786
  };
4632
4787
 
4633
4788
  // src/nodes/Flow.tsx
4634
- import { memo as memo18, useMemo as useMemo8 } from "react";
4635
- import { Handle as Handle14 } from "@xyflow/react";
4789
+ import { memo as memo20, useMemo as useMemo8 } from "react";
4790
+ import { Handle as Handle15 } from "@xyflow/react";
4636
4791
  import { Maximize2 } from "lucide-react";
4637
4792
  import * as ContextMenu from "@radix-ui/react-context-menu";
4638
4793
 
@@ -4641,15 +4796,15 @@ import * as HeroIcons from "@heroicons/react/24/outline";
4641
4796
 
4642
4797
  // src/utils/protocols.tsx
4643
4798
  import { Server, Radio, Wifi, Network, Globe as Globe4, Cloud } from "lucide-react";
4644
- import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
4799
+ import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
4645
4800
  function AwsEventBridge({ className }) {
4646
- return /* @__PURE__ */ jsxs17("svg", { viewBox: "0 0 40 40", className, children: [
4647
- /* @__PURE__ */ jsx19("defs", { children: /* @__PURE__ */ jsxs17("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "eb-g", children: [
4648
- /* @__PURE__ */ jsx19("stop", { stopColor: "#B0084D", offset: "0%" }),
4649
- /* @__PURE__ */ jsx19("stop", { stopColor: "#FF4F8B", offset: "100%" })
4801
+ return /* @__PURE__ */ jsxs19("svg", { viewBox: "0 0 40 40", className, children: [
4802
+ /* @__PURE__ */ jsx21("defs", { children: /* @__PURE__ */ jsxs19("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "eb-g", children: [
4803
+ /* @__PURE__ */ jsx21("stop", { stopColor: "#B0084D", offset: "0%" }),
4804
+ /* @__PURE__ */ jsx21("stop", { stopColor: "#FF4F8B", offset: "100%" })
4650
4805
  ] }) }),
4651
- /* @__PURE__ */ jsx19("rect", { width: "40", height: "40", rx: "4", fill: "url(#eb-g)" }),
4652
- /* @__PURE__ */ jsx19(
4806
+ /* @__PURE__ */ jsx21("rect", { width: "40", height: "40", rx: "4", fill: "url(#eb-g)" }),
4807
+ /* @__PURE__ */ jsx21(
4653
4808
  "path",
4654
4809
  {
4655
4810
  fill: "#FFF",
@@ -4659,13 +4814,13 @@ function AwsEventBridge({ className }) {
4659
4814
  ] });
4660
4815
  }
4661
4816
  function AwsSqs({ className }) {
4662
- return /* @__PURE__ */ jsxs17("svg", { viewBox: "0 0 40 40", className, children: [
4663
- /* @__PURE__ */ jsx19("defs", { children: /* @__PURE__ */ jsxs17("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "sqs-g", children: [
4664
- /* @__PURE__ */ jsx19("stop", { stopColor: "#B0084D", offset: "0%" }),
4665
- /* @__PURE__ */ jsx19("stop", { stopColor: "#FF4F8B", offset: "100%" })
4817
+ return /* @__PURE__ */ jsxs19("svg", { viewBox: "0 0 40 40", className, children: [
4818
+ /* @__PURE__ */ jsx21("defs", { children: /* @__PURE__ */ jsxs19("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "sqs-g", children: [
4819
+ /* @__PURE__ */ jsx21("stop", { stopColor: "#B0084D", offset: "0%" }),
4820
+ /* @__PURE__ */ jsx21("stop", { stopColor: "#FF4F8B", offset: "100%" })
4666
4821
  ] }) }),
4667
- /* @__PURE__ */ jsx19("rect", { width: "40", height: "40", rx: "4", fill: "url(#sqs-g)" }),
4668
- /* @__PURE__ */ jsx19(
4822
+ /* @__PURE__ */ jsx21("rect", { width: "40", height: "40", rx: "4", fill: "url(#sqs-g)" }),
4823
+ /* @__PURE__ */ jsx21(
4669
4824
  "path",
4670
4825
  {
4671
4826
  fill: "#FFF",
@@ -4675,13 +4830,13 @@ function AwsSqs({ className }) {
4675
4830
  ] });
4676
4831
  }
4677
4832
  function AwsSns({ className }) {
4678
- return /* @__PURE__ */ jsxs17("svg", { viewBox: "0 0 40 40", className, children: [
4679
- /* @__PURE__ */ jsx19("defs", { children: /* @__PURE__ */ jsxs17("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "sns-g", children: [
4680
- /* @__PURE__ */ jsx19("stop", { stopColor: "#B0084D", offset: "0%" }),
4681
- /* @__PURE__ */ jsx19("stop", { stopColor: "#FF4F8B", offset: "100%" })
4833
+ return /* @__PURE__ */ jsxs19("svg", { viewBox: "0 0 40 40", className, children: [
4834
+ /* @__PURE__ */ jsx21("defs", { children: /* @__PURE__ */ jsxs19("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "sns-g", children: [
4835
+ /* @__PURE__ */ jsx21("stop", { stopColor: "#B0084D", offset: "0%" }),
4836
+ /* @__PURE__ */ jsx21("stop", { stopColor: "#FF4F8B", offset: "100%" })
4682
4837
  ] }) }),
4683
- /* @__PURE__ */ jsx19("rect", { width: "40", height: "40", rx: "4", fill: "url(#sns-g)" }),
4684
- /* @__PURE__ */ jsx19(
4838
+ /* @__PURE__ */ jsx21("rect", { width: "40", height: "40", rx: "4", fill: "url(#sns-g)" }),
4839
+ /* @__PURE__ */ jsx21(
4685
4840
  "path",
4686
4841
  {
4687
4842
  fill: "#FFF",
@@ -4743,11 +4898,11 @@ function getIcon(iconName) {
4743
4898
  }
4744
4899
 
4745
4900
  // src/nodes/Flow.tsx
4746
- import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
4901
+ import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
4747
4902
  function classNames14(...classes) {
4748
4903
  return classes.filter(Boolean).join(" ");
4749
4904
  }
4750
- var Flow_default = memo18(function FlowNode({
4905
+ var Flow_default = memo20(function FlowNode({
4751
4906
  data,
4752
4907
  sourcePosition,
4753
4908
  targetPosition
@@ -4760,15 +4915,15 @@ var Flow_default = memo18(function FlowNode({
4760
4915
  const portalContainer = usePortalContainer();
4761
4916
  const nodeLabel = label || flow?.data?.sidebar?.badge || "Flow";
4762
4917
  const fontSize = nodeLabel.length > 10 ? "7px" : "9px";
4763
- return /* @__PURE__ */ jsxs18(ContextMenu.Root, { children: [
4764
- /* @__PURE__ */ jsx20(ContextMenu.Trigger, { children: /* @__PURE__ */ jsxs18(
4918
+ return /* @__PURE__ */ jsxs20(ContextMenu.Root, { children: [
4919
+ /* @__PURE__ */ jsx22(ContextMenu.Trigger, { children: /* @__PURE__ */ jsxs20(
4765
4920
  "div",
4766
4921
  {
4767
4922
  className: "relative",
4768
4923
  style: { isolation: "isolate", ...NODE_WIDTH_STYLE },
4769
4924
  children: [
4770
- canExpand && /* @__PURE__ */ jsxs18(Fragment3, { children: [
4771
- /* @__PURE__ */ jsx20(
4925
+ canExpand && /* @__PURE__ */ jsxs20(Fragment3, { children: [
4926
+ /* @__PURE__ */ jsx22(
4772
4927
  "div",
4773
4928
  {
4774
4929
  className: `absolute inset-0 rounded-md border border-${color}-400 bg-[rgb(var(--ec-card-bg))]`,
@@ -4776,7 +4931,7 @@ var Flow_default = memo18(function FlowNode({
4776
4931
  "aria-hidden": true
4777
4932
  }
4778
4933
  ),
4779
- /* @__PURE__ */ jsx20(
4934
+ /* @__PURE__ */ jsx22(
4780
4935
  "div",
4781
4936
  {
4782
4937
  className: `absolute inset-0 rounded-md border border-${color}-400 bg-[rgb(var(--ec-card-bg))]`,
@@ -4785,7 +4940,7 @@ var Flow_default = memo18(function FlowNode({
4785
4940
  }
4786
4941
  )
4787
4942
  ] }),
4788
- /* @__PURE__ */ jsxs18(
4943
+ /* @__PURE__ */ jsxs20(
4789
4944
  "div",
4790
4945
  {
4791
4946
  className: classNames14(
@@ -4793,7 +4948,7 @@ var Flow_default = memo18(function FlowNode({
4793
4948
  ),
4794
4949
  style: NODE_WIDTH_STYLE,
4795
4950
  children: [
4796
- /* @__PURE__ */ jsxs18(
4951
+ /* @__PURE__ */ jsxs20(
4797
4952
  "div",
4798
4953
  {
4799
4954
  className: classNames14(
@@ -4801,8 +4956,8 @@ var Flow_default = memo18(function FlowNode({
4801
4956
  `border-r-[1px] border-${color}-500`
4802
4957
  ),
4803
4958
  children: [
4804
- Icon && /* @__PURE__ */ jsx20(Icon, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
4805
- mode === "full" && /* @__PURE__ */ jsx20(
4959
+ Icon && /* @__PURE__ */ jsx22(Icon, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
4960
+ mode === "full" && /* @__PURE__ */ jsx22(
4806
4961
  "span",
4807
4962
  {
4808
4963
  className: `text-center text-[${fontSize}] text-white font-bold uppercase mb-4`,
@@ -4813,17 +4968,17 @@ var Flow_default = memo18(function FlowNode({
4813
4968
  ]
4814
4969
  }
4815
4970
  ),
4816
- /* @__PURE__ */ jsxs18("div", { className: "p-1 flex-1 min-w-0", children: [
4817
- targetPosition && /* @__PURE__ */ jsx20(Handle14, { type: "target", position: targetPosition }),
4818
- sourcePosition && /* @__PURE__ */ jsx20(Handle14, { type: "source", position: sourcePosition }),
4819
- /* @__PURE__ */ jsxs18(
4971
+ /* @__PURE__ */ jsxs20("div", { className: "p-1 flex-1 min-w-0", children: [
4972
+ targetPosition && /* @__PURE__ */ jsx22(Handle15, { type: "target", position: targetPosition }),
4973
+ sourcePosition && /* @__PURE__ */ jsx22(Handle15, { type: "source", position: sourcePosition }),
4974
+ /* @__PURE__ */ jsxs20(
4820
4975
  "div",
4821
4976
  {
4822
4977
  className: classNames14(
4823
4978
  mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
4824
4979
  ),
4825
4980
  children: [
4826
- /* @__PURE__ */ jsx20(
4981
+ /* @__PURE__ */ jsx22(
4827
4982
  TruncatedResourceName,
4828
4983
  {
4829
4984
  as: "div",
@@ -4833,25 +4988,25 @@ var Flow_default = memo18(function FlowNode({
4833
4988
  children: name
4834
4989
  }
4835
4990
  ),
4836
- /* @__PURE__ */ jsxs18("div", { className: "flex justify-between", children: [
4837
- /* @__PURE__ */ jsxs18("span", { className: "text-[10px] font-light block pt-0.5 pb-0.5 ", children: [
4991
+ /* @__PURE__ */ jsxs20("div", { className: "flex justify-between", children: [
4992
+ /* @__PURE__ */ jsxs20("span", { className: "text-[10px] font-light block pt-0.5 pb-0.5 ", children: [
4838
4993
  "v",
4839
4994
  version
4840
4995
  ] }),
4841
- mode === "simple" && /* @__PURE__ */ jsx20("span", { className: "text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: nodeLabel })
4996
+ mode === "simple" && /* @__PURE__ */ jsx22("span", { className: "text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: nodeLabel })
4842
4997
  ] })
4843
4998
  ]
4844
4999
  }
4845
5000
  ),
4846
- mode === "full" && /* @__PURE__ */ jsxs18("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
4847
- /* @__PURE__ */ jsx20("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx20("span", { className: "text-[8px] font-light", children: flow.data.summary }) }),
4848
- /* @__PURE__ */ jsx20("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: /* @__PURE__ */ jsxs18("span", { className: "text-xs", style: TINY_FONT_STYLE, children: [
5001
+ mode === "full" && /* @__PURE__ */ jsxs20("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
5002
+ /* @__PURE__ */ jsx22("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx22("span", { className: "text-[8px] font-light", children: flow.data.summary }) }),
5003
+ /* @__PURE__ */ jsx22("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: /* @__PURE__ */ jsxs20("span", { className: "text-xs", style: TINY_FONT_STYLE, children: [
4849
5004
  "Owners: ",
4850
5005
  owners.length
4851
5006
  ] }) })
4852
5007
  ] }),
4853
- canExpand && /* @__PURE__ */ jsxs18("div", { className: "mt-1 flex items-center gap-1 text-[8px] text-[rgb(var(--ec-page-text-muted))]", children: [
4854
- /* @__PURE__ */ jsx20(Maximize2, { className: "w-2.5 h-2.5" }),
5008
+ canExpand && /* @__PURE__ */ jsxs20("div", { className: "mt-1 flex items-center gap-1 text-[8px] text-[rgb(var(--ec-page-text-muted))]", children: [
5009
+ /* @__PURE__ */ jsx22(Maximize2, { className: "w-2.5 h-2.5" }),
4855
5010
  "Click to explore"
4856
5011
  ] })
4857
5012
  ] })
@@ -4861,25 +5016,25 @@ var Flow_default = memo18(function FlowNode({
4861
5016
  ]
4862
5017
  }
4863
5018
  ) }),
4864
- /* @__PURE__ */ jsx20(ContextMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs18(ContextMenu.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: [
4865
- /* @__PURE__ */ jsx20(
5019
+ /* @__PURE__ */ jsx22(ContextMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs20(ContextMenu.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: [
5020
+ /* @__PURE__ */ jsx22(
4866
5021
  ContextMenu.Item,
4867
5022
  {
4868
5023
  asChild: true,
4869
5024
  className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
4870
- children: /* @__PURE__ */ jsx20("a", { href: buildUrl(`/docs/flows/${id}/${version}`), children: "Read documentation" })
5025
+ children: /* @__PURE__ */ jsx22("a", { href: buildUrl(`/docs/flows/${id}/${version}`), children: "Read documentation" })
4871
5026
  }
4872
5027
  ),
4873
- /* @__PURE__ */ jsx20(
5028
+ /* @__PURE__ */ jsx22(
4874
5029
  ContextMenu.Item,
4875
5030
  {
4876
5031
  asChild: true,
4877
5032
  className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
4878
- children: /* @__PURE__ */ jsx20("a", { href: buildUrl(`/visualiser/flows/${id}/${version}`), children: "View in visualiser" })
5033
+ children: /* @__PURE__ */ jsx22("a", { href: buildUrl(`/visualiser/flows/${id}/${version}`), children: "View in visualiser" })
4879
5034
  }
4880
5035
  ),
4881
- /* @__PURE__ */ jsx20(ContextMenu.Separator, { className: "h-[1px] bg-[rgb(var(--ec-page-border))] m-1" }),
4882
- /* @__PURE__ */ jsx20(ContextMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx20(
5036
+ /* @__PURE__ */ jsx22(ContextMenu.Separator, { className: "h-[1px] bg-[rgb(var(--ec-page-border))] m-1" }),
5037
+ /* @__PURE__ */ jsx22(ContextMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx22(
4883
5038
  "a",
4884
5039
  {
4885
5040
  href: buildUrl(`/docs/flows/${id}/${version}/changelog`),
@@ -4894,10 +5049,10 @@ var Flow_default = memo18(function FlowNode({
4894
5049
  });
4895
5050
 
4896
5051
  // src/nodes/FlowExpandedNode.tsx
4897
- import { memo as memo19 } from "react";
5052
+ import { memo as memo21 } from "react";
4898
5053
  import { Workflow, Minimize2 } from "lucide-react";
4899
- import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
4900
- var CONTAINER_STYLE = {
5054
+ import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
5055
+ var CONTAINER_STYLE2 = {
4901
5056
  width: "100%",
4902
5057
  height: "100%",
4903
5058
  borderRadius: 12,
@@ -4907,7 +5062,7 @@ var CONTAINER_STYLE = {
4907
5062
  position: "relative",
4908
5063
  overflow: "visible"
4909
5064
  };
4910
- var HEADER_STYLE = {
5065
+ var HEADER_STYLE2 = {
4911
5066
  position: "absolute",
4912
5067
  top: 0,
4913
5068
  left: 0,
@@ -4919,7 +5074,7 @@ var HEADER_STYLE = {
4919
5074
  borderBottom: "1px solid rgba(20, 184, 166, 0.3)",
4920
5075
  overflow: "visible"
4921
5076
  };
4922
- var BADGE_STYLE = {
5077
+ var BADGE_STYLE2 = {
4923
5078
  position: "absolute",
4924
5079
  top: -10,
4925
5080
  left: 12,
@@ -4953,7 +5108,7 @@ var FLOW_NAME_STYLE = {
4953
5108
  textTransform: "uppercase",
4954
5109
  whiteSpace: "nowrap"
4955
5110
  };
4956
- var VERSION_STYLE = {
5111
+ var VERSION_STYLE2 = {
4957
5112
  fontSize: 10,
4958
5113
  fontWeight: 500,
4959
5114
  color: "#5eead4",
@@ -4972,17 +5127,17 @@ var COLLAPSE_BUTTON_STYLE = {
4972
5127
  fontWeight: 600,
4973
5128
  color: "white"
4974
5129
  };
4975
- var FlowExpandedNode_default = memo19(function FlowExpandedNode({
5130
+ var FlowExpandedNode_default = memo21(function FlowExpandedNode({
4976
5131
  data
4977
5132
  }) {
4978
5133
  const { flowName, version } = data;
4979
- return /* @__PURE__ */ jsx21("div", { style: CONTAINER_STYLE, children: /* @__PURE__ */ jsxs19("div", { style: HEADER_STYLE, children: [
4980
- /* @__PURE__ */ jsxs19("div", { style: BADGE_STYLE, children: [
4981
- /* @__PURE__ */ jsx21(Workflow, { size: 10, strokeWidth: 2.5 }),
5134
+ return /* @__PURE__ */ jsx23("div", { style: CONTAINER_STYLE2, children: /* @__PURE__ */ jsxs21("div", { style: HEADER_STYLE2, children: [
5135
+ /* @__PURE__ */ jsxs21("div", { style: BADGE_STYLE2, children: [
5136
+ /* @__PURE__ */ jsx23(Workflow, { size: 10, strokeWidth: 2.5 }),
4982
5137
  "Sub-flow"
4983
5138
  ] }),
4984
- /* @__PURE__ */ jsxs19("div", { style: HEADER_CONTENT_STYLE, children: [
4985
- /* @__PURE__ */ jsxs19(
5139
+ /* @__PURE__ */ jsxs21("div", { style: HEADER_CONTENT_STYLE, children: [
5140
+ /* @__PURE__ */ jsxs21(
4986
5141
  "div",
4987
5142
  {
4988
5143
  style: {
@@ -4992,7 +5147,7 @@ var FlowExpandedNode_default = memo19(function FlowExpandedNode({
4992
5147
  flex: 1
4993
5148
  },
4994
5149
  children: [
4995
- /* @__PURE__ */ jsx21(
5150
+ /* @__PURE__ */ jsx23(
4996
5151
  TruncatedResourceName,
4997
5152
  {
4998
5153
  value: flowName || "Flow",
@@ -5002,21 +5157,21 @@ var FlowExpandedNode_default = memo19(function FlowExpandedNode({
5002
5157
  children: flowName || "Flow"
5003
5158
  }
5004
5159
  ),
5005
- version && /* @__PURE__ */ jsxs19("span", { style: VERSION_STYLE, children: [
5160
+ version && /* @__PURE__ */ jsxs21("span", { style: VERSION_STYLE2, children: [
5006
5161
  "v",
5007
5162
  version
5008
5163
  ] })
5009
5164
  ]
5010
5165
  }
5011
5166
  ),
5012
- /* @__PURE__ */ jsxs19(
5167
+ /* @__PURE__ */ jsxs21(
5013
5168
  "button",
5014
5169
  {
5015
5170
  style: COLLAPSE_BUTTON_STYLE,
5016
5171
  className: "ec-collapse-flow-btn nodrag nopan",
5017
5172
  onMouseDown: (e) => e.stopPropagation(),
5018
5173
  children: [
5019
- /* @__PURE__ */ jsx21(Minimize2, { size: 12, strokeWidth: 2.5 }),
5174
+ /* @__PURE__ */ jsx23(Minimize2, { size: 12, strokeWidth: 2.5 }),
5020
5175
  "Collapse"
5021
5176
  ]
5022
5177
  }
@@ -5026,14 +5181,20 @@ var FlowExpandedNode_default = memo19(function FlowExpandedNode({
5026
5181
  });
5027
5182
 
5028
5183
  // src/nodes/Entity.tsx
5029
- import { Handle as Handle15, Position as Position14 } from "@xyflow/react";
5184
+ import { Handle as Handle16, Position as Position15 } from "@xyflow/react";
5030
5185
  import * as ContextMenu2 from "@radix-ui/react-context-menu";
5031
- import { memo as memo20, useState as useState4, useMemo as useMemo9 } from "react";
5032
- import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
5186
+ import { memo as memo22, useState as useState4, useMemo as useMemo9 } from "react";
5187
+ import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
5033
5188
  function classNames15(...classes) {
5034
5189
  return classes.filter(Boolean).join(" ");
5035
5190
  }
5036
- var Entity_default = memo20(function EntityNode({
5191
+ var getPropertyTypeLabel = (property) => {
5192
+ if (property.type === "array" && property.items?.type) {
5193
+ return `${property.items.type}[]`;
5194
+ }
5195
+ return property.type;
5196
+ };
5197
+ var Entity_default = memo22(function EntityNode({
5037
5198
  data,
5038
5199
  sourcePosition,
5039
5200
  targetPosition
@@ -5054,8 +5215,8 @@ var Entity_default = memo20(function EntityNode({
5054
5215
  const Icon = useMemo9(() => getIcon(icon), [icon]);
5055
5216
  const [hoveredProperty, setHoveredProperty] = useState4(null);
5056
5217
  const portalContainer = usePortalContainer();
5057
- return /* @__PURE__ */ jsxs20(ContextMenu2.Root, { children: [
5058
- /* @__PURE__ */ jsx22(ContextMenu2.Trigger, { children: /* @__PURE__ */ jsxs20(
5218
+ return /* @__PURE__ */ jsxs22(ContextMenu2.Root, { children: [
5219
+ /* @__PURE__ */ jsx24(ContextMenu2.Trigger, { children: /* @__PURE__ */ jsxs22(
5059
5220
  "div",
5060
5221
  {
5061
5222
  className: classNames15(
@@ -5063,7 +5224,7 @@ var Entity_default = memo20(function EntityNode({
5063
5224
  externalToDomain ? "border-amber-500/60" : "border-blue-400/50"
5064
5225
  ),
5065
5226
  children: [
5066
- /* @__PURE__ */ jsxs20(
5227
+ /* @__PURE__ */ jsxs22(
5067
5228
  "div",
5068
5229
  {
5069
5230
  className: classNames15(
@@ -5071,9 +5232,9 @@ var Entity_default = memo20(function EntityNode({
5071
5232
  externalToDomain ? "bg-amber-500/20" : "bg-blue-500/15"
5072
5233
  ),
5073
5234
  children: [
5074
- /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 min-w-0", children: [
5075
- Icon && /* @__PURE__ */ jsx22(Icon, { className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]" }),
5076
- /* @__PURE__ */ jsx22(
5235
+ /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 min-w-0", children: [
5236
+ Icon && /* @__PURE__ */ jsx24(Icon, { className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]" }),
5237
+ /* @__PURE__ */ jsx24(
5077
5238
  TruncatedResourceName,
5078
5239
  {
5079
5240
  value: name,
@@ -5082,91 +5243,91 @@ var Entity_default = memo20(function EntityNode({
5082
5243
  children: name
5083
5244
  }
5084
5245
  ),
5085
- aggregateRoot && /* @__PURE__ */ jsx22("span", { className: "text-xs bg-amber-500/20 text-amber-600 dark:text-amber-400 px-1.5 py-0.5 rounded font-medium shrink-0", children: "AR" })
5246
+ aggregateRoot && /* @__PURE__ */ jsx24("span", { className: "text-xs bg-amber-500/20 text-amber-600 dark:text-amber-400 px-1.5 py-0.5 rounded font-medium shrink-0", children: "AR" })
5086
5247
  ] }),
5087
- domainName && /* @__PURE__ */ jsxs20("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] font-medium mt-1", children: [
5248
+ domainName && /* @__PURE__ */ jsxs22("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] font-medium mt-1", children: [
5088
5249
  "from ",
5089
5250
  domainName,
5090
5251
  " domain"
5091
5252
  ] }),
5092
- mode === "full" && /* @__PURE__ */ jsxs20("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: [
5253
+ mode === "full" && /* @__PURE__ */ jsxs22("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: [
5093
5254
  "v",
5094
5255
  version
5095
5256
  ] })
5096
5257
  ]
5097
5258
  }
5098
5259
  ),
5099
- properties.length > 0 ? /* @__PURE__ */ jsx22("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: properties.map((property, index) => {
5260
+ properties.length > 0 ? /* @__PURE__ */ jsx24("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: properties.map((property, index) => {
5100
5261
  const propertyKey = `${property.name}-${index}`;
5101
5262
  const isHovered = hoveredProperty === propertyKey;
5102
- return /* @__PURE__ */ jsxs20(
5263
+ return /* @__PURE__ */ jsxs22(
5103
5264
  "div",
5104
5265
  {
5105
5266
  className: "relative flex items-center justify-between px-4 py-2 hover:bg-[rgb(var(--ec-page-border)/0.2)]",
5106
5267
  onMouseEnter: () => property.description && setHoveredProperty(propertyKey),
5107
5268
  onMouseLeave: () => setHoveredProperty(null),
5108
5269
  children: [
5109
- /* @__PURE__ */ jsx22(
5110
- Handle15,
5270
+ /* @__PURE__ */ jsx24(
5271
+ Handle16,
5111
5272
  {
5112
5273
  type: "target",
5113
- position: Position14.Left,
5274
+ position: Position15.Left,
5114
5275
  id: `${property.name}-target`,
5115
5276
  className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !left-[-0px]",
5116
5277
  style: HANDLE_LEFT_OFFSET_STYLE
5117
5278
  }
5118
5279
  ),
5119
- /* @__PURE__ */ jsx22(
5120
- Handle15,
5280
+ /* @__PURE__ */ jsx24(
5281
+ Handle16,
5121
5282
  {
5122
5283
  type: "source",
5123
- position: Position14.Right,
5284
+ position: Position15.Right,
5124
5285
  id: `${property.name}-source`,
5125
5286
  className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !right-[-0px]",
5126
5287
  style: HANDLE_RIGHT_OFFSET_STYLE
5127
5288
  }
5128
5289
  ),
5129
- /* @__PURE__ */ jsxs20("div", { className: "flex-1 flex items-center justify-between", children: [
5130
- /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
5131
- /* @__PURE__ */ jsx22("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: property.name }),
5132
- property.required && /* @__PURE__ */ jsx22("span", { className: "text-red-500 text-xs", children: "*" })
5290
+ /* @__PURE__ */ jsxs22("div", { className: "flex-1 flex items-center justify-between", children: [
5291
+ /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1", children: [
5292
+ /* @__PURE__ */ jsx24("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: property.name }),
5293
+ property.required && /* @__PURE__ */ jsx24("span", { className: "text-red-500 text-xs", children: "*" })
5133
5294
  ] }),
5134
- /* @__PURE__ */ jsx22("span", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] font-mono", children: property.type })
5295
+ /* @__PURE__ */ jsx24("span", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] font-mono", children: getPropertyTypeLabel(property) })
5135
5296
  ] }),
5136
- property.references && /* @__PURE__ */ jsx22("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx22(
5297
+ (property.references || property.type === "array" && property.items?.type) && /* @__PURE__ */ jsx24("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx24(
5137
5298
  "div",
5138
5299
  {
5139
5300
  className: "w-2 h-2 bg-blue-500 rounded-full",
5140
- title: `References ${property.references}`
5301
+ title: `References ${property.references || property.items.type}`
5141
5302
  }
5142
5303
  ) }),
5143
- isHovered && property.description && /* @__PURE__ */ jsxs20("div", { className: "absolute left-full ml-2 top-1/2 transform -translate-y-1/2 z-[9999] w-[200px] bg-gray-900 text-white text-xs rounded-lg py-2 px-3 pointer-events-none shadow-xl max-w-xl opacity-100", children: [
5144
- /* @__PURE__ */ jsx22("div", { className: "text-gray-200 whitespace-normal break-words", children: property.description }),
5145
- /* @__PURE__ */ jsx22("div", { className: "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900" })
5304
+ isHovered && property.description && /* @__PURE__ */ jsxs22("div", { className: "absolute left-full ml-2 top-1/2 transform -translate-y-1/2 z-[9999] w-[200px] bg-gray-900 text-white text-xs rounded-lg py-2 px-3 pointer-events-none shadow-xl max-w-xl opacity-100", children: [
5305
+ /* @__PURE__ */ jsx24("div", { className: "text-gray-200 whitespace-normal break-words", children: property.description }),
5306
+ /* @__PURE__ */ jsx24("div", { className: "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900" })
5146
5307
  ] })
5147
5308
  ]
5148
5309
  },
5149
5310
  propertyKey
5150
5311
  );
5151
- }) }) : /* @__PURE__ */ jsx22("div", { className: "px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))] text-center", children: "No properties defined" }),
5152
- properties.length === 0 && /* @__PURE__ */ jsxs20(Fragment4, { children: [
5153
- targetPosition && /* @__PURE__ */ jsx22(Handle15, { type: "target", position: targetPosition }),
5154
- sourcePosition && /* @__PURE__ */ jsx22(Handle15, { type: "source", position: sourcePosition })
5312
+ }) }) : /* @__PURE__ */ jsx24("div", { className: "px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))] text-center", children: "No properties defined" }),
5313
+ properties.length === 0 && /* @__PURE__ */ jsxs22(Fragment4, { children: [
5314
+ targetPosition && /* @__PURE__ */ jsx24(Handle16, { type: "target", position: targetPosition }),
5315
+ sourcePosition && /* @__PURE__ */ jsx24(Handle16, { type: "source", position: sourcePosition })
5155
5316
  ] })
5156
5317
  ]
5157
5318
  }
5158
5319
  ) }),
5159
- /* @__PURE__ */ jsx22(ContextMenu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx22(
5320
+ /* @__PURE__ */ jsx24(ContextMenu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx24(
5160
5321
  ContextMenu2.Content,
5161
5322
  {
5162
5323
  className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]",
5163
5324
  onClick: (e) => e.stopPropagation(),
5164
- children: /* @__PURE__ */ jsx22(
5325
+ children: /* @__PURE__ */ jsx24(
5165
5326
  ContextMenu2.Item,
5166
5327
  {
5167
5328
  asChild: true,
5168
5329
  className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-accent-subtle))] rounded-sm flex items-center",
5169
- children: /* @__PURE__ */ jsx22("a", { href: buildUrl(`/docs/entities/${entity.data.id}/${version}`), children: "Read documentation" })
5330
+ children: /* @__PURE__ */ jsx24("a", { href: buildUrl(`/docs/entities/${entity.data.id}/${version}`), children: "Read documentation" })
5170
5331
  }
5171
5332
  )
5172
5333
  }
@@ -5175,14 +5336,14 @@ var Entity_default = memo20(function EntityNode({
5175
5336
  });
5176
5337
 
5177
5338
  // src/nodes/User.tsx
5178
- import { memo as memo21 } from "react";
5339
+ import { memo as memo23 } from "react";
5179
5340
  import { UserIcon as UserIcon2 } from "@heroicons/react/20/solid";
5180
- import { Handle as Handle16 } from "@xyflow/react";
5181
- import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
5341
+ import { Handle as Handle17 } from "@xyflow/react";
5342
+ import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
5182
5343
  function classNames16(...classes) {
5183
5344
  return classes.filter(Boolean).join(" ");
5184
5345
  }
5185
- var User_default = memo21(function UserNode({
5346
+ var User_default = memo23(function UserNode({
5186
5347
  data,
5187
5348
  sourcePosition,
5188
5349
  targetPosition
@@ -5195,7 +5356,7 @@ var User_default = memo21(function UserNode({
5195
5356
  } = data;
5196
5357
  const { summary, actor: { name } = {} } = step;
5197
5358
  const displayName = name || step.name || step.title || "Actor";
5198
- return /* @__PURE__ */ jsxs21(
5359
+ return /* @__PURE__ */ jsxs23(
5199
5360
  "div",
5200
5361
  {
5201
5362
  className: classNames16(
@@ -5204,7 +5365,7 @@ var User_default = memo21(function UserNode({
5204
5365
  ),
5205
5366
  style: NODE_WIDTH_STYLE,
5206
5367
  children: [
5207
- /* @__PURE__ */ jsxs21(
5368
+ /* @__PURE__ */ jsxs23(
5208
5369
  "div",
5209
5370
  {
5210
5371
  className: classNames16(
@@ -5212,8 +5373,8 @@ var User_default = memo21(function UserNode({
5212
5373
  `border-r-[1px] border-yellow-500`
5213
5374
  ),
5214
5375
  children: [
5215
- /* @__PURE__ */ jsx23(UserIcon2, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
5216
- mode === "full" && /* @__PURE__ */ jsx23(
5376
+ /* @__PURE__ */ jsx25(UserIcon2, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
5377
+ mode === "full" && /* @__PURE__ */ jsx25(
5217
5378
  "span",
5218
5379
  {
5219
5380
  className: "text-center text-[9px] text-white font-bold uppercase mb-4",
@@ -5224,11 +5385,11 @@ var User_default = memo21(function UserNode({
5224
5385
  ]
5225
5386
  }
5226
5387
  ),
5227
- /* @__PURE__ */ jsxs21("div", { className: "p-1 flex-1 min-w-0", children: [
5228
- targetPosition && /* @__PURE__ */ jsx23(Handle16, { type: "target", position: targetPosition }),
5229
- sourcePosition && /* @__PURE__ */ jsx23(Handle16, { type: "source", position: sourcePosition }),
5230
- (!summary || mode !== "full") && /* @__PURE__ */ jsxs21("div", { className: "h-full min-w-0", children: [
5231
- /* @__PURE__ */ jsx23(
5388
+ /* @__PURE__ */ jsxs23("div", { className: "p-1 flex-1 min-w-0", children: [
5389
+ targetPosition && /* @__PURE__ */ jsx25(Handle17, { type: "target", position: targetPosition }),
5390
+ sourcePosition && /* @__PURE__ */ jsx25(Handle17, { type: "source", position: sourcePosition }),
5391
+ (!summary || mode !== "full") && /* @__PURE__ */ jsxs23("div", { className: "h-full min-w-0", children: [
5392
+ /* @__PURE__ */ jsx25(
5232
5393
  TruncatedResourceName,
5233
5394
  {
5234
5395
  as: "div",
@@ -5238,16 +5399,16 @@ var User_default = memo21(function UserNode({
5238
5399
  children: displayName
5239
5400
  }
5240
5401
  ),
5241
- mode === "simple" && /* @__PURE__ */ jsx23("div", { className: "w-full text-right", children: /* @__PURE__ */ jsx23("span", { className: " w-full text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: "Event" }) })
5402
+ mode === "simple" && /* @__PURE__ */ jsx25("div", { className: "w-full text-right", children: /* @__PURE__ */ jsx25("span", { className: " w-full text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: "Event" }) })
5242
5403
  ] }),
5243
- summary && mode === "full" && /* @__PURE__ */ jsxs21("div", { children: [
5244
- /* @__PURE__ */ jsx23(
5404
+ summary && mode === "full" && /* @__PURE__ */ jsxs23("div", { children: [
5405
+ /* @__PURE__ */ jsx25(
5245
5406
  "div",
5246
5407
  {
5247
5408
  className: classNames16(
5248
5409
  mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
5249
5410
  ),
5250
- children: /* @__PURE__ */ jsx23(
5411
+ children: /* @__PURE__ */ jsx25(
5251
5412
  TruncatedResourceName,
5252
5413
  {
5253
5414
  as: "div",
@@ -5259,7 +5420,7 @@ var User_default = memo21(function UserNode({
5259
5420
  )
5260
5421
  }
5261
5422
  ),
5262
- mode === "full" && /* @__PURE__ */ jsx23("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx23("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx23("span", { className: "text-[8px] font-light", children: summary }) }) })
5423
+ mode === "full" && /* @__PURE__ */ jsx25("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx25("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx25("span", { className: "text-[8px] font-light", children: summary }) }) })
5263
5424
  ] })
5264
5425
  ] })
5265
5426
  ]
@@ -5268,20 +5429,20 @@ var User_default = memo21(function UserNode({
5268
5429
  });
5269
5430
 
5270
5431
  // src/nodes/Step.tsx
5271
- import { memo as memo22 } from "react";
5272
- import { Handle as Handle17, Position as Position15 } from "@xyflow/react";
5273
- import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
5432
+ import { memo as memo24 } from "react";
5433
+ import { Handle as Handle18, Position as Position16 } from "@xyflow/react";
5434
+ import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
5274
5435
  function classNames17(...classes) {
5275
5436
  return classes.filter(Boolean).join(" ");
5276
5437
  }
5277
- var Step_default = memo22(function StepNode({
5438
+ var Step_default = memo24(function StepNode({
5278
5439
  data,
5279
5440
  sourcePosition,
5280
5441
  targetPosition
5281
5442
  }) {
5282
5443
  const { mode, step } = data;
5283
5444
  const { title, summary } = step;
5284
- return /* @__PURE__ */ jsxs22(
5445
+ return /* @__PURE__ */ jsxs24(
5285
5446
  "div",
5286
5447
  {
5287
5448
  className: classNames17(
@@ -5289,14 +5450,14 @@ var Step_default = memo22(function StepNode({
5289
5450
  ),
5290
5451
  style: NODE_WIDTH_STYLE,
5291
5452
  children: [
5292
- /* @__PURE__ */ jsx24(
5453
+ /* @__PURE__ */ jsx26(
5293
5454
  "div",
5294
5455
  {
5295
5456
  className: classNames17(
5296
5457
  "bg-gradient-to-b from-gray-700 to-gray-700 relative flex flex-col items-center w-5 justify-end rounded-l-sm text-orange-100-500",
5297
5458
  `border-r-[1px] border-gray-500`
5298
5459
  ),
5299
- children: mode === "full" && /* @__PURE__ */ jsx24(
5460
+ children: mode === "full" && /* @__PURE__ */ jsx26(
5300
5461
  "span",
5301
5462
  {
5302
5463
  className: "text-center text-[9px] text-white font-bold uppercase mb-4",
@@ -5306,24 +5467,24 @@ var Step_default = memo22(function StepNode({
5306
5467
  )
5307
5468
  }
5308
5469
  ),
5309
- /* @__PURE__ */ jsxs22("div", { className: "p-1 flex-1 min-w-0", children: [
5310
- /* @__PURE__ */ jsx24(
5311
- Handle17,
5470
+ /* @__PURE__ */ jsxs24("div", { className: "p-1 flex-1 min-w-0", children: [
5471
+ /* @__PURE__ */ jsx26(
5472
+ Handle18,
5312
5473
  {
5313
5474
  type: "target",
5314
- position: targetPosition || Position15.Left,
5475
+ position: targetPosition || Position16.Left,
5315
5476
  style: HIDDEN_HANDLE_STYLE
5316
5477
  }
5317
5478
  ),
5318
- /* @__PURE__ */ jsx24(
5319
- Handle17,
5479
+ /* @__PURE__ */ jsx26(
5480
+ Handle18,
5320
5481
  {
5321
5482
  type: "source",
5322
- position: sourcePosition || Position15.Right,
5483
+ position: sourcePosition || Position16.Right,
5323
5484
  style: HIDDEN_HANDLE_STYLE
5324
5485
  }
5325
5486
  ),
5326
- !summary && /* @__PURE__ */ jsx24("div", { className: "h-full flex items-center min-w-0", children: /* @__PURE__ */ jsx24(
5487
+ !summary && /* @__PURE__ */ jsx26("div", { className: "h-full flex items-center min-w-0", children: /* @__PURE__ */ jsx26(
5327
5488
  TruncatedResourceName,
5328
5489
  {
5329
5490
  as: "div",
@@ -5333,14 +5494,14 @@ var Step_default = memo22(function StepNode({
5333
5494
  children: title
5334
5495
  }
5335
5496
  ) }),
5336
- summary && /* @__PURE__ */ jsxs22("div", { children: [
5337
- /* @__PURE__ */ jsx24(
5497
+ summary && /* @__PURE__ */ jsxs24("div", { children: [
5498
+ /* @__PURE__ */ jsx26(
5338
5499
  "div",
5339
5500
  {
5340
5501
  className: classNames17(
5341
5502
  mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
5342
5503
  ),
5343
- children: /* @__PURE__ */ jsx24(
5504
+ children: /* @__PURE__ */ jsx26(
5344
5505
  TruncatedResourceName,
5345
5506
  {
5346
5507
  as: "div",
@@ -5352,7 +5513,7 @@ var Step_default = memo22(function StepNode({
5352
5513
  )
5353
5514
  }
5354
5515
  ),
5355
- mode === "full" && /* @__PURE__ */ jsx24("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx24("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx24("span", { className: "text-[8px] font-light", children: summary }) }) })
5516
+ mode === "full" && /* @__PURE__ */ jsx26("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx26("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx26("span", { className: "text-[8px] font-light", children: summary }) }) })
5356
5517
  ] })
5357
5518
  ] })
5358
5519
  ]
@@ -5362,15 +5523,15 @@ var Step_default = memo22(function StepNode({
5362
5523
 
5363
5524
  // src/nodes/Domain.tsx
5364
5525
  import {
5365
- Handle as Handle18,
5526
+ Handle as Handle19,
5366
5527
  useReactFlow,
5367
5528
  useOnSelectionChange,
5368
- Position as Position16
5529
+ Position as Position17
5369
5530
  } from "@xyflow/react";
5370
5531
  import * as ContextMenu3 from "@radix-ui/react-context-menu";
5371
- import { memo as memo23, useState as useState5, useCallback as useCallback3, useMemo as useMemo10 } from "react";
5372
- import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
5373
- var Domain_default = memo23(function DomainNode({ data, id: nodeId }) {
5532
+ import { memo as memo25, useState as useState5, useCallback as useCallback3, useMemo as useMemo10 } from "react";
5533
+ import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
5534
+ var Domain_default = memo25(function DomainNode({ data, id: nodeId }) {
5374
5535
  const { mode, domain } = data;
5375
5536
  const reactFlow = useReactFlow();
5376
5537
  const [highlightedServices, setHighlightedServices] = useState5(
@@ -5379,7 +5540,7 @@ var Domain_default = memo23(function DomainNode({ data, id: nodeId }) {
5379
5540
  const { id, version, name, services = [], styles } = domain.data;
5380
5541
  const { icon = "RectangleGroupIcon" } = styles || {};
5381
5542
  const Icon = useMemo10(() => getIcon(icon), [icon]);
5382
- const ServerIcon3 = useMemo10(() => getIcon("ServerIcon"), []);
5543
+ const ServerIcon5 = useMemo10(() => getIcon("ServerIcon"), []);
5383
5544
  const portalContainer = usePortalContainer();
5384
5545
  const handleSelectionChange = useCallback3(
5385
5546
  ({ nodes: selectedNodes }) => {
@@ -5413,59 +5574,59 @@ var Domain_default = memo23(function DomainNode({ data, id: nodeId }) {
5413
5574
  useOnSelectionChange({
5414
5575
  onChange: handleSelectionChange
5415
5576
  });
5416
- return /* @__PURE__ */ jsxs23(ContextMenu3.Root, { children: [
5417
- /* @__PURE__ */ jsx25(ContextMenu3.Trigger, { children: /* @__PURE__ */ jsxs23("div", { className: "w-full rounded-lg border-2 border-yellow-400 bg-[rgb(var(--ec-card-bg))] shadow-lg", children: [
5418
- /* @__PURE__ */ jsxs23("div", { className: "bg-[rgb(var(--ec-domain-header-bg,253_224_71)/0.2)] px-3 py-2 flex items-center space-x-2", children: [
5419
- Icon && /* @__PURE__ */ jsx25(Icon, { className: "w-4 h-4 text-yellow-500" }),
5420
- /* @__PURE__ */ jsxs23("div", { children: [
5421
- /* @__PURE__ */ jsx25("span", { className: "text-sm font-bold text-[rgb(var(--ec-page-text))]", children: name }),
5422
- /* @__PURE__ */ jsxs23("span", { className: "text-xs text-yellow-500 ml-2", children: [
5577
+ return /* @__PURE__ */ jsxs25(ContextMenu3.Root, { children: [
5578
+ /* @__PURE__ */ jsx27(ContextMenu3.Trigger, { children: /* @__PURE__ */ jsxs25("div", { className: "w-full rounded-lg border-2 border-yellow-400 bg-[rgb(var(--ec-card-bg))] shadow-lg", children: [
5579
+ /* @__PURE__ */ jsxs25("div", { className: "bg-[rgb(var(--ec-domain-header-bg,253_224_71)/0.2)] px-3 py-2 flex items-center space-x-2", children: [
5580
+ Icon && /* @__PURE__ */ jsx27(Icon, { className: "w-4 h-4 text-yellow-500" }),
5581
+ /* @__PURE__ */ jsxs25("div", { children: [
5582
+ /* @__PURE__ */ jsx27("span", { className: "text-sm font-bold text-[rgb(var(--ec-page-text))]", children: name }),
5583
+ /* @__PURE__ */ jsxs25("span", { className: "text-xs text-yellow-500 ml-2", children: [
5423
5584
  "v",
5424
5585
  version
5425
5586
  ] })
5426
5587
  ] })
5427
5588
  ] }),
5428
- mode === "full" && services.length > 0 && /* @__PURE__ */ jsx25("div", { children: services.map((service, index) => {
5589
+ mode === "full" && services.length > 0 && /* @__PURE__ */ jsx27("div", { children: services.map((service, index) => {
5429
5590
  const isHighlighted = highlightedServices.has(service.data.id);
5430
- return /* @__PURE__ */ jsxs23(ContextMenu3.Root, { children: [
5431
- /* @__PURE__ */ jsx25(ContextMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
5591
+ return /* @__PURE__ */ jsxs25(ContextMenu3.Root, { children: [
5592
+ /* @__PURE__ */ jsx27(ContextMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs25(
5432
5593
  "div",
5433
5594
  {
5434
5595
  className: `relative flex items-center justify-between px-3 py-2 cursor-pointer ${index !== services.length - 1 ? "border-b border-[rgb(var(--ec-page-border))]" : ""} ${isHighlighted ? "bg-pink-100 border-pink-300" : ""}`,
5435
5596
  children: [
5436
- /* @__PURE__ */ jsx25(
5437
- Handle18,
5597
+ /* @__PURE__ */ jsx27(
5598
+ Handle19,
5438
5599
  {
5439
5600
  type: "target",
5440
- position: Position16.Left,
5601
+ position: Position17.Left,
5441
5602
  id: `${service.data.id}-target`,
5442
5603
  className: "!left-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10",
5443
5604
  style: HANDLE_LEFT_STYLE
5444
5605
  }
5445
5606
  ),
5446
- /* @__PURE__ */ jsx25(
5447
- Handle18,
5607
+ /* @__PURE__ */ jsx27(
5608
+ Handle19,
5448
5609
  {
5449
5610
  type: "source",
5450
- position: Position16.Right,
5611
+ position: Position17.Right,
5451
5612
  id: `${service.data.id}-source`,
5452
5613
  className: "!right-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10",
5453
5614
  style: HANDLE_RIGHT_STYLE
5454
5615
  }
5455
5616
  ),
5456
- /* @__PURE__ */ jsxs23("div", { className: "flex items-center space-x-3", children: [
5457
- /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-center w-5 h-5 bg-pink-500 rounded", children: ServerIcon3 && /* @__PURE__ */ jsx25(ServerIcon3, { className: "w-3 h-3 text-white" }) }),
5458
- /* @__PURE__ */ jsx25("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: service.data.name || service.data.id })
5617
+ /* @__PURE__ */ jsxs25("div", { className: "flex items-center space-x-3", children: [
5618
+ /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-center w-5 h-5 bg-pink-500 rounded", children: ServerIcon5 && /* @__PURE__ */ jsx27(ServerIcon5, { className: "w-3 h-3 text-white" }) }),
5619
+ /* @__PURE__ */ jsx27("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: service.data.name || service.data.id })
5459
5620
  ] }),
5460
- /* @__PURE__ */ jsx25("div", { className: "flex items-center space-x-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: /* @__PURE__ */ jsxs23("span", { className: "text-xs", children: [
5621
+ /* @__PURE__ */ jsx27("div", { className: "flex items-center space-x-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: /* @__PURE__ */ jsxs25("span", { className: "text-xs", children: [
5461
5622
  "v",
5462
5623
  service.data.version
5463
5624
  ] }) })
5464
5625
  ]
5465
5626
  }
5466
5627
  ) }),
5467
- /* @__PURE__ */ jsx25(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs23(ContextMenu3.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: [
5468
- /* @__PURE__ */ jsx25(
5628
+ /* @__PURE__ */ jsx27(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs25(ContextMenu3.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: [
5629
+ /* @__PURE__ */ jsx27(
5469
5630
  ContextMenu3.Item,
5470
5631
  {
5471
5632
  className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-page-border)/0.5)] rounded-sm flex items-center",
@@ -5475,7 +5636,7 @@ var Domain_default = memo23(function DomainNode({ data, id: nodeId }) {
5475
5636
  children: "View Service Documentation"
5476
5637
  }
5477
5638
  ),
5478
- /* @__PURE__ */ jsx25(
5639
+ /* @__PURE__ */ jsx27(
5479
5640
  ContextMenu3.Item,
5480
5641
  {
5481
5642
  className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-page-border)/0.5)] rounded-sm flex items-center",
@@ -5489,8 +5650,8 @@ var Domain_default = memo23(function DomainNode({ data, id: nodeId }) {
5489
5650
  ] }, `${service.data.id}-${index}`);
5490
5651
  }) })
5491
5652
  ] }) }),
5492
- /* @__PURE__ */ jsx25(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs23(ContextMenu3.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: [
5493
- /* @__PURE__ */ jsx25(
5653
+ /* @__PURE__ */ jsx27(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs25(ContextMenu3.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: [
5654
+ /* @__PURE__ */ jsx27(
5494
5655
  ContextMenu3.Item,
5495
5656
  {
5496
5657
  className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-page-border)/0.5)] rounded-sm flex items-center",
@@ -5500,7 +5661,7 @@ var Domain_default = memo23(function DomainNode({ data, id: nodeId }) {
5500
5661
  children: "View Domain Documentation"
5501
5662
  }
5502
5663
  ),
5503
- /* @__PURE__ */ jsx25(
5664
+ /* @__PURE__ */ jsx27(
5504
5665
  ContextMenu3.Item,
5505
5666
  {
5506
5667
  className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-page-border)/0.5)] rounded-sm flex items-center",
@@ -5514,10 +5675,131 @@ var Domain_default = memo23(function DomainNode({ data, id: nodeId }) {
5514
5675
  ] });
5515
5676
  });
5516
5677
 
5678
+ // src/nodes/System.tsx
5679
+ import { Handle as Handle20, Position as Position18 } from "@xyflow/react";
5680
+ import {
5681
+ Group as GroupIcon2,
5682
+ Server as ServerIcon2,
5683
+ Box as BoxIcon,
5684
+ Database as DatabaseIcon,
5685
+ MessageSquare as MessageSquareIcon
5686
+ } from "lucide-react";
5687
+ import { memo as memo26 } from "react";
5688
+ import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
5689
+ function classNames18(...classes) {
5690
+ return classes.filter(Boolean).join(" ");
5691
+ }
5692
+ var System_default = memo26(function SystemNode({ data }) {
5693
+ const {
5694
+ system,
5695
+ mode = "simple",
5696
+ servicesCount = 0,
5697
+ entitiesCount = 0,
5698
+ containersCount = 0,
5699
+ messagesCount = 0
5700
+ } = data;
5701
+ const { id, version, name, summary, scope } = system;
5702
+ const isExternal = scope === "external";
5703
+ const isDark = useDarkMode();
5704
+ const stats = [
5705
+ { icon: ServerIcon2, label: "Services", count: servicesCount },
5706
+ { icon: MessageSquareIcon, label: "Messages", count: messagesCount },
5707
+ { icon: BoxIcon, label: "Entities", count: entitiesCount },
5708
+ { icon: DatabaseIcon, label: "Data Stores", count: containersCount }
5709
+ ].filter((stat) => stat.count > 0);
5710
+ const cardBackground = isExternal ? isDark ? "rgba(148,163,184,0.12)" : "rgba(148,163,184,0.1)" : "var(--ec-system-node-bg, rgb(var(--ec-card-bg)))";
5711
+ const goToMap = () => {
5712
+ navigateTo(buildUrl(`/visualiser/systems/${id}/${version}`));
5713
+ };
5714
+ return /* @__PURE__ */ jsxs26(
5715
+ "div",
5716
+ {
5717
+ role: "button",
5718
+ tabIndex: 0,
5719
+ onClick: goToMap,
5720
+ onKeyDown: (e) => {
5721
+ if (e.key === "Enter" || e.key === " ") goToMap();
5722
+ },
5723
+ title: `Open the ${name} map`,
5724
+ className: classNames18(
5725
+ "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible cursor-pointer",
5726
+ isExternal ? "border-dashed border-violet-400" : "border-violet-500"
5727
+ ),
5728
+ style: {
5729
+ background: cardBackground,
5730
+ boxShadow: "0 2px 12px rgba(139, 92, 246, 0.15)"
5731
+ },
5732
+ children: [
5733
+ /* @__PURE__ */ jsx28(
5734
+ Handle20,
5735
+ {
5736
+ type: "target",
5737
+ position: Position18.Left,
5738
+ style: HIDDEN_HANDLE_STYLE
5739
+ }
5740
+ ),
5741
+ /* @__PURE__ */ jsx28(
5742
+ Handle20,
5743
+ {
5744
+ type: "source",
5745
+ position: Position18.Right,
5746
+ style: HIDDEN_HANDLE_STYLE
5747
+ }
5748
+ ),
5749
+ /* @__PURE__ */ jsx28("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs26("span", { className: "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm bg-violet-500", children: [
5750
+ /* @__PURE__ */ jsx28(GroupIcon2, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
5751
+ isExternal ? "External System" : "System"
5752
+ ] }) }),
5753
+ /* @__PURE__ */ jsxs26("div", { className: "px-3 pt-3.5 pb-2.5", children: [
5754
+ /* @__PURE__ */ jsxs26("div", { className: "flex items-baseline gap-1 min-w-0", children: [
5755
+ /* @__PURE__ */ jsx28(
5756
+ TruncatedResourceName,
5757
+ {
5758
+ value: name,
5759
+ tooltipBorderColor: "#8b5cf6",
5760
+ className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))] truncate",
5761
+ children: name
5762
+ }
5763
+ ),
5764
+ version && /* @__PURE__ */ jsxs26("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
5765
+ "(v",
5766
+ version,
5767
+ ")"
5768
+ ] })
5769
+ ] }),
5770
+ mode === "full" && summary && /* @__PURE__ */ jsx28(
5771
+ "div",
5772
+ {
5773
+ className: classNames18(
5774
+ "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed overflow-hidden"
5775
+ ),
5776
+ style: LINE_CLAMP_STYLE,
5777
+ title: summary,
5778
+ children: summary
5779
+ }
5780
+ ),
5781
+ stats.length > 0 && /* @__PURE__ */ jsx28("div", { className: "mt-2 flex items-center gap-3 border-t border-[rgb(var(--ec-page-border))] pt-1.5", children: stats.map(({ icon: Icon, label, count }) => /* @__PURE__ */ jsxs26(
5782
+ "div",
5783
+ {
5784
+ title: `${count} ${label}`,
5785
+ className: "flex items-center gap-1 text-[10px] text-[rgb(var(--ec-page-text-muted))]",
5786
+ children: [
5787
+ /* @__PURE__ */ jsx28(Icon, { className: "w-3 h-3 text-violet-500", strokeWidth: 2 }),
5788
+ /* @__PURE__ */ jsx28("span", { className: "font-medium", children: count })
5789
+ ]
5790
+ },
5791
+ label
5792
+ )) })
5793
+ ] })
5794
+ ]
5795
+ }
5796
+ );
5797
+ });
5798
+
5517
5799
  // src/nodes/GroupNode.tsx
5518
- import { memo as memo24 } from "react";
5800
+ import { memo as memo27 } from "react";
5519
5801
  import { BoxesIcon } from "lucide-react";
5520
- import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
5802
+ import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
5521
5803
  var GROUP_CONTAINER_STYLE = {
5522
5804
  width: "100%",
5523
5805
  height: "100%",
@@ -5591,11 +5873,11 @@ var GROUP_VERSION_STYLE = {
5591
5873
  };
5592
5874
  var GROUP_ICON_COLOR_STYLE = { color: "#7c3aed" };
5593
5875
  var GROUP_ICON_WHITE_STYLE = { color: "white" };
5594
- var GroupNode_default = memo24(function GroupNode({ data }) {
5876
+ var GroupNode_default = memo27(function GroupNode({ data }) {
5595
5877
  const { domain } = data;
5596
- return /* @__PURE__ */ jsx26("div", { style: GROUP_CONTAINER_STYLE, children: /* @__PURE__ */ jsxs24("div", { style: GROUP_HEADER_STYLE, children: [
5597
- /* @__PURE__ */ jsx26("div", { style: GROUP_WATERMARK_STYLE, children: /* @__PURE__ */ jsx26(BoxesIcon, { size: 28, strokeWidth: 2, style: GROUP_ICON_COLOR_STYLE }) }),
5598
- /* @__PURE__ */ jsx26("div", { style: GROUP_ICON_CIRCLE_STYLE, children: /* @__PURE__ */ jsx26(
5878
+ return /* @__PURE__ */ jsx29("div", { style: GROUP_CONTAINER_STYLE, children: /* @__PURE__ */ jsxs27("div", { style: GROUP_HEADER_STYLE, children: [
5879
+ /* @__PURE__ */ jsx29("div", { style: GROUP_WATERMARK_STYLE, children: /* @__PURE__ */ jsx29(BoxesIcon, { size: 28, strokeWidth: 2, style: GROUP_ICON_COLOR_STYLE }) }),
5880
+ /* @__PURE__ */ jsx29("div", { style: GROUP_ICON_CIRCLE_STYLE, children: /* @__PURE__ */ jsx29(
5599
5881
  BoxesIcon,
5600
5882
  {
5601
5883
  size: 16,
@@ -5603,8 +5885,8 @@ var GroupNode_default = memo24(function GroupNode({ data }) {
5603
5885
  style: GROUP_ICON_WHITE_STYLE
5604
5886
  }
5605
5887
  ) }),
5606
- /* @__PURE__ */ jsx26("div", { style: GROUP_BANNER_CONTENT_STYLE, children: /* @__PURE__ */ jsxs24("div", { style: GROUP_BANNER_INNER_STYLE, children: [
5607
- /* @__PURE__ */ jsx26(
5888
+ /* @__PURE__ */ jsx29("div", { style: GROUP_BANNER_CONTENT_STYLE, children: /* @__PURE__ */ jsxs27("div", { style: GROUP_BANNER_INNER_STYLE, children: [
5889
+ /* @__PURE__ */ jsx29(
5608
5890
  TruncatedResourceName,
5609
5891
  {
5610
5892
  value: domain?.name || "Domain",
@@ -5614,7 +5896,7 @@ var GroupNode_default = memo24(function GroupNode({ data }) {
5614
5896
  children: domain?.name || "Domain"
5615
5897
  }
5616
5898
  ),
5617
- domain?.version && /* @__PURE__ */ jsxs24("span", { style: GROUP_VERSION_STYLE, children: [
5899
+ domain?.version && /* @__PURE__ */ jsxs27("span", { style: GROUP_VERSION_STYLE, children: [
5618
5900
  "v",
5619
5901
  domain.version
5620
5902
  ] })
@@ -5623,11 +5905,11 @@ var GroupNode_default = memo24(function GroupNode({ data }) {
5623
5905
  });
5624
5906
 
5625
5907
  // src/nodes/Custom.tsx
5626
- import { memo as memo25, useMemo as useMemo11 } from "react";
5627
- import { Handle as Handle19, Position as Position17, useNodeConnections as useNodeConnections12 } from "@xyflow/react";
5908
+ import { memo as memo28, useMemo as useMemo11 } from "react";
5909
+ import { Handle as Handle21, Position as Position19, useNodeConnections as useNodeConnections12 } from "@xyflow/react";
5628
5910
  import * as Icons from "@heroicons/react/24/solid";
5629
5911
  import * as ContextMenu4 from "@radix-ui/react-context-menu";
5630
- import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
5912
+ import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
5631
5913
  var PALETTES = {
5632
5914
  blue: {
5633
5915
  border: "border-blue-500",
@@ -5758,7 +6040,7 @@ var PALETTES = {
5758
6040
  pillBorder: "#f43f5e"
5759
6041
  }
5760
6042
  };
5761
- function classNames18(...classes) {
6043
+ function classNames19(...classes) {
5762
6044
  return classes.filter(Boolean).join(" ");
5763
6045
  }
5764
6046
  function getPalette(color) {
@@ -5768,7 +6050,7 @@ function GlowHandle16({
5768
6050
  side,
5769
6051
  gradient
5770
6052
  }) {
5771
- return /* @__PURE__ */ jsx27(
6053
+ return /* @__PURE__ */ jsx30(
5772
6054
  "div",
5773
6055
  {
5774
6056
  style: {
@@ -5788,7 +6070,7 @@ function GlowHandle16({
5788
6070
  }
5789
6071
  );
5790
6072
  }
5791
- var Custom_default = memo25(function CustomNode({ data, selected }) {
6073
+ var Custom_default = memo28(function CustomNode({ data, selected }) {
5792
6074
  const { mode, custom: customProps, step } = data;
5793
6075
  const {
5794
6076
  color = "blue",
@@ -5808,11 +6090,11 @@ var Custom_default = memo25(function CustomNode({ data, selected }) {
5808
6090
  const sourceConnections = useNodeConnections12({ handleType: "source" });
5809
6091
  const propertyEntries = Object.entries(properties);
5810
6092
  const contextMenuItems = url ? [{ label: `Open ${type.toLowerCase()}`, url }, ...menu] : menu;
5811
- return /* @__PURE__ */ jsxs25(ContextMenu4.Root, { children: [
5812
- /* @__PURE__ */ jsx27(ContextMenu4.Trigger, { children: /* @__PURE__ */ jsxs25(
6093
+ return /* @__PURE__ */ jsxs28(ContextMenu4.Root, { children: [
6094
+ /* @__PURE__ */ jsx30(ContextMenu4.Trigger, { children: /* @__PURE__ */ jsxs28(
5813
6095
  "div",
5814
6096
  {
5815
- className: classNames18(
6097
+ className: classNames19(
5816
6098
  "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
5817
6099
  selected ? palette.ring : "",
5818
6100
  palette.border
@@ -5823,39 +6105,39 @@ var Custom_default = memo25(function CustomNode({ data, selected }) {
5823
6105
  minHeight: mode === "full" ? `${height}em` : void 0
5824
6106
  },
5825
6107
  children: [
5826
- /* @__PURE__ */ jsx27(
5827
- Handle19,
6108
+ /* @__PURE__ */ jsx30(
6109
+ Handle21,
5828
6110
  {
5829
6111
  type: "target",
5830
- position: Position17.Left,
6112
+ position: Position19.Left,
5831
6113
  style: HIDDEN_HANDLE_STYLE
5832
6114
  }
5833
6115
  ),
5834
- /* @__PURE__ */ jsx27(
5835
- Handle19,
6116
+ /* @__PURE__ */ jsx30(
6117
+ Handle21,
5836
6118
  {
5837
6119
  type: "source",
5838
- position: Position17.Right,
6120
+ position: Position19.Right,
5839
6121
  style: HIDDEN_HANDLE_STYLE
5840
6122
  }
5841
6123
  ),
5842
- targetConnections.length > 0 && /* @__PURE__ */ jsx27(GlowHandle16, { side: "left", gradient: palette.glow }),
5843
- sourceConnections.length > 0 && /* @__PURE__ */ jsx27(GlowHandle16, { side: "right", gradient: palette.glow }),
5844
- /* @__PURE__ */ jsx27("div", { className: "absolute -top-3 left-2.5 z-10", children: /* @__PURE__ */ jsxs25(
6124
+ targetConnections.length > 0 && /* @__PURE__ */ jsx30(GlowHandle16, { side: "left", gradient: palette.glow }),
6125
+ sourceConnections.length > 0 && /* @__PURE__ */ jsx30(GlowHandle16, { side: "right", gradient: palette.glow }),
6126
+ /* @__PURE__ */ jsx30("div", { className: "absolute -top-3 left-2.5 z-10", children: /* @__PURE__ */ jsxs28(
5845
6127
  "span",
5846
6128
  {
5847
- className: classNames18(
6129
+ className: classNames19(
5848
6130
  "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm",
5849
6131
  palette.badge
5850
6132
  ),
5851
6133
  children: [
5852
- IconComponent && /* @__PURE__ */ jsx27(IconComponent, { className: "w-2.5 h-2.5", "aria-hidden": true }),
6134
+ IconComponent && /* @__PURE__ */ jsx30(IconComponent, { className: "w-2.5 h-2.5", "aria-hidden": true }),
5853
6135
  type
5854
6136
  ]
5855
6137
  }
5856
6138
  ) }),
5857
- /* @__PURE__ */ jsxs25("div", { className: "px-3 pt-3.5 pb-2.5", children: [
5858
- /* @__PURE__ */ jsx27("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx27(
6139
+ /* @__PURE__ */ jsxs28("div", { className: "px-3 pt-3.5 pb-2.5", children: [
6140
+ /* @__PURE__ */ jsx30("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx30(
5859
6141
  TruncatedResourceName,
5860
6142
  {
5861
6143
  value: title,
@@ -5864,7 +6146,7 @@ var Custom_default = memo25(function CustomNode({ data, selected }) {
5864
6146
  children: title
5865
6147
  }
5866
6148
  ) }),
5867
- mode === "full" && summary && /* @__PURE__ */ jsx27(
6149
+ mode === "full" && summary && /* @__PURE__ */ jsx30(
5868
6150
  "div",
5869
6151
  {
5870
6152
  className: "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed overflow-hidden",
@@ -5873,9 +6155,9 @@ var Custom_default = memo25(function CustomNode({ data, selected }) {
5873
6155
  children: summary
5874
6156
  }
5875
6157
  ),
5876
- mode === "full" && propertyEntries.length > 0 && /* @__PURE__ */ jsx27("div", { className: "mt-2 pt-1.5 border-t border-[rgb(var(--ec-page-border))] grid grid-cols-2 gap-x-2 gap-y-1", children: propertyEntries.map(([key, value]) => /* @__PURE__ */ jsxs25("div", { className: "min-w-0", children: [
5877
- /* @__PURE__ */ jsx27("div", { className: "text-[7px] font-bold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))] truncate", children: key }),
5878
- typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ jsx27(
6158
+ mode === "full" && propertyEntries.length > 0 && /* @__PURE__ */ jsx30("div", { className: "mt-2 pt-1.5 border-t border-[rgb(var(--ec-page-border))] grid grid-cols-2 gap-x-2 gap-y-1", children: propertyEntries.map(([key, value]) => /* @__PURE__ */ jsxs28("div", { className: "min-w-0", children: [
6159
+ /* @__PURE__ */ jsx30("div", { className: "text-[7px] font-bold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))] truncate", children: key }),
6160
+ typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ jsx30(
5879
6161
  "a",
5880
6162
  {
5881
6163
  href: value,
@@ -5885,7 +6167,7 @@ var Custom_default = memo25(function CustomNode({ data, selected }) {
5885
6167
  title: value,
5886
6168
  children: value
5887
6169
  }
5888
- ) : /* @__PURE__ */ jsx27(
6170
+ ) : /* @__PURE__ */ jsx30(
5889
6171
  "div",
5890
6172
  {
5891
6173
  className: "text-[8px] text-[rgb(var(--ec-page-text))] truncate",
@@ -5898,12 +6180,12 @@ var Custom_default = memo25(function CustomNode({ data, selected }) {
5898
6180
  ]
5899
6181
  }
5900
6182
  ) }),
5901
- contextMenuItems.length > 0 && /* @__PURE__ */ jsx27(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx27(ContextMenu4.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: contextMenuItems.map((item) => /* @__PURE__ */ jsx27(
6183
+ contextMenuItems.length > 0 && /* @__PURE__ */ jsx30(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx30(ContextMenu4.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: contextMenuItems.map((item) => /* @__PURE__ */ jsx30(
5902
6184
  ContextMenu4.Item,
5903
6185
  {
5904
6186
  asChild: true,
5905
6187
  className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
5906
- children: /* @__PURE__ */ jsx27(
6188
+ children: /* @__PURE__ */ jsx30(
5907
6189
  "a",
5908
6190
  {
5909
6191
  href: item.url,
@@ -5920,40 +6202,40 @@ var Custom_default = memo25(function CustomNode({ data, selected }) {
5920
6202
  });
5921
6203
 
5922
6204
  // src/nodes/ExternalSystem2.tsx
5923
- import { memo as memo26 } from "react";
5924
- import { Handle as Handle20, Position as Position18 } from "@xyflow/react";
5925
- import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
5926
- var ExternalSystem2_default = memo26(function ExternalSystemNode(props) {
5927
- return /* @__PURE__ */ jsxs26("div", { className: "relative", children: [
5928
- /* @__PURE__ */ jsx28(
5929
- Handle20,
6205
+ import { memo as memo29 } from "react";
6206
+ import { Handle as Handle22, Position as Position20 } from "@xyflow/react";
6207
+ import { jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
6208
+ var ExternalSystem2_default = memo29(function ExternalSystemNode(props) {
6209
+ return /* @__PURE__ */ jsxs29("div", { className: "relative", children: [
6210
+ /* @__PURE__ */ jsx31(
6211
+ Handle22,
5930
6212
  {
5931
6213
  type: "target",
5932
- position: Position18.Left,
6214
+ position: Position20.Left,
5933
6215
  style: EXTERNAL_SYSTEM_HANDLE_STYLE,
5934
6216
  className: "bg-gray-500"
5935
6217
  }
5936
6218
  ),
5937
- /* @__PURE__ */ jsx28(
5938
- Handle20,
6219
+ /* @__PURE__ */ jsx31(
6220
+ Handle22,
5939
6221
  {
5940
6222
  type: "source",
5941
- position: Position18.Right,
6223
+ position: Position20.Right,
5942
6224
  style: EXTERNAL_SYSTEM_HANDLE_STYLE,
5943
6225
  className: "bg-gray-500"
5944
6226
  }
5945
6227
  ),
5946
- /* @__PURE__ */ jsx28(ExternalSystem_default, { ...props })
6228
+ /* @__PURE__ */ jsx31(ExternalSystem_default, { ...props })
5947
6229
  ] });
5948
6230
  });
5949
6231
 
5950
6232
  // src/nodes/DataProduct.tsx
5951
- import { memo as memo27 } from "react";
6233
+ import { memo as memo30 } from "react";
5952
6234
  import { Package } from "lucide-react";
5953
- import { Handle as Handle21, Position as Position19, useNodeConnections as useNodeConnections13 } from "@xyflow/react";
5954
- import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
6235
+ import { Handle as Handle23, Position as Position21, useNodeConnections as useNodeConnections13 } from "@xyflow/react";
6236
+ import { jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
5955
6237
  function GlowHandle17({ side }) {
5956
- return /* @__PURE__ */ jsx29(
6238
+ return /* @__PURE__ */ jsx32(
5957
6239
  "div",
5958
6240
  {
5959
6241
  style: {
@@ -5973,39 +6255,39 @@ function GlowHandle17({ side }) {
5973
6255
  }
5974
6256
  );
5975
6257
  }
5976
- function classNames19(...classes) {
6258
+ function classNames20(...classes) {
5977
6259
  return classes.filter(Boolean).join(" ");
5978
6260
  }
5979
6261
  function PostItDataProduct(props) {
5980
6262
  const { version, name, summary, deprecated, draft, notes, styles } = props.data.dataProduct;
5981
6263
  const mode = props.data.mode || "simple";
5982
6264
  const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
5983
- return /* @__PURE__ */ jsxs27(
6265
+ return /* @__PURE__ */ jsxs30(
5984
6266
  "div",
5985
6267
  {
5986
- className: classNames19(
6268
+ className: classNames20(
5987
6269
  "relative min-w-44 max-w-56 min-h-[120px]",
5988
6270
  props?.selected ? "ring-2 ring-indigo-400/60 ring-offset-1" : ""
5989
6271
  ),
5990
6272
  children: [
5991
- /* @__PURE__ */ jsx29(
5992
- Handle21,
6273
+ /* @__PURE__ */ jsx32(
6274
+ Handle23,
5993
6275
  {
5994
6276
  type: "target",
5995
- position: Position19.Left,
6277
+ position: Position21.Left,
5996
6278
  style: HIDDEN_HANDLE_STYLE
5997
6279
  }
5998
6280
  ),
5999
- /* @__PURE__ */ jsx29(
6000
- Handle21,
6281
+ /* @__PURE__ */ jsx32(
6282
+ Handle23,
6001
6283
  {
6002
6284
  type: "source",
6003
- position: Position19.Right,
6285
+ position: Position21.Right,
6004
6286
  style: HIDDEN_HANDLE_STYLE
6005
6287
  }
6006
6288
  ),
6007
- notes && notes.length > 0 && /* @__PURE__ */ jsx29(NotesIndicator, { notes, resourceName: name }),
6008
- /* @__PURE__ */ jsxs27(
6289
+ notes && notes.length > 0 && /* @__PURE__ */ jsx32(NotesIndicator, { notes, resourceName: name }),
6290
+ /* @__PURE__ */ jsxs30(
6009
6291
  "div",
6010
6292
  {
6011
6293
  className: "absolute inset-0",
@@ -6016,8 +6298,8 @@ function PostItDataProduct(props) {
6016
6298
  border: deprecated ? "2px dashed rgba(239, 68, 68, 0.5)" : draft ? "2px dashed rgba(99, 102, 241, 0.5)" : "none"
6017
6299
  },
6018
6300
  children: [
6019
- /* @__PURE__ */ jsx29("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
6020
- /* @__PURE__ */ jsx29(
6301
+ /* @__PURE__ */ jsx32("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
6302
+ /* @__PURE__ */ jsx32(
6021
6303
  "div",
6022
6304
  {
6023
6305
  style: {
@@ -6036,17 +6318,17 @@ function PostItDataProduct(props) {
6036
6318
  ]
6037
6319
  }
6038
6320
  ),
6039
- /* @__PURE__ */ jsxs27("div", { className: "relative px-3.5 py-3", children: [
6040
- /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between mb-2", children: [
6041
- /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-1", children: [
6042
- /* @__PURE__ */ jsx29(Package, { className: "w-3 h-3 text-indigo-900/50", strokeWidth: 2.5 }),
6043
- /* @__PURE__ */ jsx29("span", { className: "text-[8px] font-bold text-indigo-900/50 uppercase tracking-widest", children: "Data Product" })
6321
+ /* @__PURE__ */ jsxs30("div", { className: "relative px-3.5 py-3", children: [
6322
+ /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between mb-2", children: [
6323
+ /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-1", children: [
6324
+ /* @__PURE__ */ jsx32(Package, { className: "w-3 h-3 text-indigo-900/50", strokeWidth: 2.5 }),
6325
+ /* @__PURE__ */ jsx32("span", { className: "text-[8px] font-bold text-indigo-900/50 uppercase tracking-widest", children: "Data Product" })
6044
6326
  ] }),
6045
- draft && /* @__PURE__ */ jsx29("span", { className: "text-[8px] font-extrabold text-amber-900 bg-amber-100 border border-dashed border-amber-400 px-1.5 py-0.5 rounded uppercase", children: "Draft" }),
6046
- deprecated && /* @__PURE__ */ jsx29("span", { className: "text-[7px] font-bold text-white bg-red-500 border border-red-600 px-1.5 py-0.5 rounded uppercase", children: "Deprecated" })
6327
+ draft && /* @__PURE__ */ jsx32("span", { className: "text-[8px] font-extrabold text-amber-900 bg-amber-100 border border-dashed border-amber-400 px-1.5 py-0.5 rounded uppercase", children: "Draft" }),
6328
+ deprecated && /* @__PURE__ */ jsx32("span", { className: "text-[7px] font-bold text-white bg-red-500 border border-red-600 px-1.5 py-0.5 rounded uppercase", children: "Deprecated" })
6047
6329
  ] }),
6048
- /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
6049
- customIcon && /* @__PURE__ */ jsx29(
6330
+ /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
6331
+ customIcon && /* @__PURE__ */ jsx32(
6050
6332
  CustomIcon,
6051
6333
  {
6052
6334
  src: customIcon,
@@ -6054,13 +6336,13 @@ function PostItDataProduct(props) {
6054
6336
  className: mode === "full" ? "w-[26px] h-[26px] shrink-0" : "w-4 h-4 shrink-0 -my-1"
6055
6337
  }
6056
6338
  ),
6057
- /* @__PURE__ */ jsx29(
6339
+ /* @__PURE__ */ jsx32(
6058
6340
  TruncatedResourceName,
6059
6341
  {
6060
6342
  as: "div",
6061
6343
  value: name,
6062
6344
  tooltipBorderColor: "#6366f1",
6063
- className: classNames19(
6345
+ className: classNames20(
6064
6346
  "text-[13px] font-bold leading-snug min-w-0 truncate",
6065
6347
  deprecated ? "text-indigo-950/40 line-through" : "text-indigo-950"
6066
6348
  ),
@@ -6068,11 +6350,11 @@ function PostItDataProduct(props) {
6068
6350
  }
6069
6351
  )
6070
6352
  ] }),
6071
- version && /* @__PURE__ */ jsxs27("div", { className: "text-[9px] text-indigo-900/40 font-semibold mt-0.5", children: [
6353
+ version && /* @__PURE__ */ jsxs30("div", { className: "text-[9px] text-indigo-900/40 font-semibold mt-0.5", children: [
6072
6354
  "v",
6073
6355
  version
6074
6356
  ] }),
6075
- mode === "full" && summary && /* @__PURE__ */ jsx29(
6357
+ mode === "full" && summary && /* @__PURE__ */ jsx32(
6076
6358
  "div",
6077
6359
  {
6078
6360
  className: "mt-2 pt-1.5 border-t border-indigo-900/10 text-[9px] text-indigo-950/60 leading-relaxed overflow-hidden",
@@ -6094,10 +6376,10 @@ function DefaultDataProduct(props) {
6094
6376
  const sourceConnections = useNodeConnections13({ handleType: "source" });
6095
6377
  const isDark = useDarkMode();
6096
6378
  const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
6097
- return /* @__PURE__ */ jsxs27(
6379
+ return /* @__PURE__ */ jsxs30(
6098
6380
  "div",
6099
6381
  {
6100
- className: classNames19(
6382
+ className: classNames20(
6101
6383
  "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
6102
6384
  props?.selected ? "ring-2 ring-indigo-400/60 ring-offset-2" : "",
6103
6385
  deprecated ? "border-dashed border-red-500" : draft ? `border-dashed ${isDark ? "border-indigo-400" : "border-indigo-400/60"}` : "border-indigo-500"
@@ -6107,43 +6389,43 @@ function DefaultDataProduct(props) {
6107
6389
  boxShadow: "0 2px 12px rgba(99, 102, 241, 0.15)"
6108
6390
  },
6109
6391
  children: [
6110
- /* @__PURE__ */ jsx29(
6111
- Handle21,
6392
+ /* @__PURE__ */ jsx32(
6393
+ Handle23,
6112
6394
  {
6113
6395
  type: "target",
6114
- position: Position19.Left,
6396
+ position: Position21.Left,
6115
6397
  style: HIDDEN_HANDLE_STYLE
6116
6398
  }
6117
6399
  ),
6118
- /* @__PURE__ */ jsx29(
6119
- Handle21,
6400
+ /* @__PURE__ */ jsx32(
6401
+ Handle23,
6120
6402
  {
6121
6403
  type: "source",
6122
- position: Position19.Right,
6404
+ position: Position21.Right,
6123
6405
  style: HIDDEN_HANDLE_STYLE
6124
6406
  }
6125
6407
  ),
6126
- notes && notes.length > 0 && /* @__PURE__ */ jsx29(NotesIndicator, { notes, resourceName: name }),
6127
- targetConnections.length > 0 && /* @__PURE__ */ jsx29(GlowHandle17, { side: "left" }),
6128
- sourceConnections.length > 0 && /* @__PURE__ */ jsx29(GlowHandle17, { side: "right" }),
6129
- /* @__PURE__ */ jsx29("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs27(
6408
+ notes && notes.length > 0 && /* @__PURE__ */ jsx32(NotesIndicator, { notes, resourceName: name }),
6409
+ targetConnections.length > 0 && /* @__PURE__ */ jsx32(GlowHandle17, { side: "left" }),
6410
+ sourceConnections.length > 0 && /* @__PURE__ */ jsx32(GlowHandle17, { side: "right" }),
6411
+ /* @__PURE__ */ jsx32("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs30(
6130
6412
  "span",
6131
6413
  {
6132
- className: classNames19(
6414
+ className: classNames20(
6133
6415
  "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm",
6134
6416
  deprecated ? "bg-red-500" : "bg-indigo-500"
6135
6417
  ),
6136
6418
  children: [
6137
- /* @__PURE__ */ jsx29(Package, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
6419
+ /* @__PURE__ */ jsx32(Package, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
6138
6420
  "Data Product",
6139
6421
  draft && " (Draft)",
6140
6422
  deprecated && " (Deprecated)"
6141
6423
  ]
6142
6424
  }
6143
6425
  ) }),
6144
- /* @__PURE__ */ jsxs27("div", { className: "px-3 pt-3.5 pb-2.5", children: [
6145
- /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
6146
- customIcon && /* @__PURE__ */ jsx29(
6426
+ /* @__PURE__ */ jsxs30("div", { className: "px-3 pt-3.5 pb-2.5", children: [
6427
+ /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
6428
+ customIcon && /* @__PURE__ */ jsx32(
6147
6429
  CustomIcon,
6148
6430
  {
6149
6431
  src: customIcon,
@@ -6151,8 +6433,8 @@ function DefaultDataProduct(props) {
6151
6433
  className: mode === "full" ? "w-[26px] h-[26px] shrink-0" : "w-4 h-4 shrink-0 -my-1"
6152
6434
  }
6153
6435
  ),
6154
- /* @__PURE__ */ jsxs27("div", { className: "flex items-baseline gap-1 min-w-0", children: [
6155
- /* @__PURE__ */ jsx29(
6436
+ /* @__PURE__ */ jsxs30("div", { className: "flex items-baseline gap-1 min-w-0", children: [
6437
+ /* @__PURE__ */ jsx32(
6156
6438
  TruncatedResourceName,
6157
6439
  {
6158
6440
  value: name,
@@ -6161,14 +6443,14 @@ function DefaultDataProduct(props) {
6161
6443
  children: name
6162
6444
  }
6163
6445
  ),
6164
- version && /* @__PURE__ */ jsxs27("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
6446
+ version && /* @__PURE__ */ jsxs30("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
6165
6447
  "(v",
6166
6448
  version,
6167
6449
  ")"
6168
6450
  ] })
6169
6451
  ] })
6170
6452
  ] }),
6171
- mode === "full" && summary && /* @__PURE__ */ jsx29(
6453
+ mode === "full" && summary && /* @__PURE__ */ jsx32(
6172
6454
  "div",
6173
6455
  {
6174
6456
  className: "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed overflow-hidden",
@@ -6182,19 +6464,19 @@ function DefaultDataProduct(props) {
6182
6464
  }
6183
6465
  );
6184
6466
  }
6185
- var DataProduct_default = memo27(function DataProductNode(props) {
6467
+ var DataProduct_default = memo30(function DataProductNode(props) {
6186
6468
  const nodeStyle = props?.data?.style;
6187
6469
  if (nodeStyle === "post-it") {
6188
- return /* @__PURE__ */ jsx29(PostItDataProduct, { ...props });
6470
+ return /* @__PURE__ */ jsx32(PostItDataProduct, { ...props });
6189
6471
  }
6190
- return /* @__PURE__ */ jsx29(DefaultDataProduct, { ...props });
6472
+ return /* @__PURE__ */ jsx32(DefaultDataProduct, { ...props });
6191
6473
  });
6192
6474
 
6193
6475
  // src/nodes/message-group/MessageGroupNode.tsx
6194
- import { memo as memo28, useMemo as useMemo12 } from "react";
6476
+ import { memo as memo31, useMemo as useMemo12 } from "react";
6195
6477
  import { Layers, Zap as Zap3, Terminal, HelpCircle, Maximize2 as Maximize22 } from "lucide-react";
6196
- import { Handle as Handle22, Position as Position20, useNodeConnections as useNodeConnections14 } from "@xyflow/react";
6197
- import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
6478
+ import { Handle as Handle24, Position as Position22, useNodeConnections as useNodeConnections14 } from "@xyflow/react";
6479
+ import { jsx as jsx33, jsxs as jsxs31 } from "react/jsx-runtime";
6198
6480
  var TYPE_ICONS = {
6199
6481
  events: Zap3,
6200
6482
  commands: Terminal,
@@ -6206,7 +6488,7 @@ var CARD_STYLE = {
6206
6488
  background: "var(--ec-message-group-node-bg, rgb(var(--ec-card-bg)))",
6207
6489
  pointerEvents: "none"
6208
6490
  };
6209
- var MessageGroupNode_default = memo28(function MessageGroupNode(props) {
6491
+ var MessageGroupNode_default = memo31(function MessageGroupNode(props) {
6210
6492
  const { groupName, messageCount } = props.data;
6211
6493
  const isDark = useDarkMode();
6212
6494
  const targetConnections = useNodeConnections14({ handleType: "target" });
@@ -6220,8 +6502,8 @@ var MessageGroupNode_default = memo28(function MessageGroupNode(props) {
6220
6502
  });
6221
6503
  return counts;
6222
6504
  }, [props.data.messages]);
6223
- return /* @__PURE__ */ jsxs28("div", { className: "relative", style: { isolation: "isolate" }, children: [
6224
- stackDepth >= 3 && /* @__PURE__ */ jsx30(
6505
+ return /* @__PURE__ */ jsxs31("div", { className: "relative", style: { isolation: "isolate" }, children: [
6506
+ stackDepth >= 3 && /* @__PURE__ */ jsx33(
6225
6507
  "div",
6226
6508
  {
6227
6509
  style: {
@@ -6233,7 +6515,7 @@ var MessageGroupNode_default = memo28(function MessageGroupNode(props) {
6233
6515
  }
6234
6516
  }
6235
6517
  ),
6236
- stackDepth >= 2 && /* @__PURE__ */ jsx30(
6518
+ stackDepth >= 2 && /* @__PURE__ */ jsx33(
6237
6519
  "div",
6238
6520
  {
6239
6521
  style: {
@@ -6245,7 +6527,7 @@ var MessageGroupNode_default = memo28(function MessageGroupNode(props) {
6245
6527
  }
6246
6528
  }
6247
6529
  ),
6248
- /* @__PURE__ */ jsxs28(
6530
+ /* @__PURE__ */ jsxs31(
6249
6531
  "div",
6250
6532
  {
6251
6533
  className: `relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible ${props.selected ? "ring-2 ring-violet-400/60 ring-offset-2" : ""} border-violet-500`,
@@ -6254,23 +6536,23 @@ var MessageGroupNode_default = memo28(function MessageGroupNode(props) {
6254
6536
  boxShadow: "0 2px 12px rgba(139, 92, 246, 0.15)"
6255
6537
  },
6256
6538
  children: [
6257
- /* @__PURE__ */ jsx30(
6258
- Handle22,
6539
+ /* @__PURE__ */ jsx33(
6540
+ Handle24,
6259
6541
  {
6260
6542
  type: "target",
6261
- position: Position20.Left,
6543
+ position: Position22.Left,
6262
6544
  style: HIDDEN_HANDLE_STYLE
6263
6545
  }
6264
6546
  ),
6265
- /* @__PURE__ */ jsx30(
6266
- Handle22,
6547
+ /* @__PURE__ */ jsx33(
6548
+ Handle24,
6267
6549
  {
6268
6550
  type: "source",
6269
- position: Position20.Right,
6551
+ position: Position22.Right,
6270
6552
  style: HIDDEN_HANDLE_STYLE
6271
6553
  }
6272
6554
  ),
6273
- targetConnections.length > 0 && /* @__PURE__ */ jsx30(
6555
+ targetConnections.length > 0 && /* @__PURE__ */ jsx33(
6274
6556
  "div",
6275
6557
  {
6276
6558
  style: {
@@ -6289,7 +6571,7 @@ var MessageGroupNode_default = memo28(function MessageGroupNode(props) {
6289
6571
  }
6290
6572
  }
6291
6573
  ),
6292
- sourceConnections.length > 0 && /* @__PURE__ */ jsx30(
6574
+ sourceConnections.length > 0 && /* @__PURE__ */ jsx33(
6293
6575
  "div",
6294
6576
  {
6295
6577
  style: {
@@ -6308,12 +6590,12 @@ var MessageGroupNode_default = memo28(function MessageGroupNode(props) {
6308
6590
  }
6309
6591
  }
6310
6592
  ),
6311
- /* @__PURE__ */ jsx30("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ jsxs28("span", { className: "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm bg-violet-600", children: [
6312
- /* @__PURE__ */ jsx30(Layers, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
6593
+ /* @__PURE__ */ jsx33("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ jsxs31("span", { className: "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm bg-violet-600", children: [
6594
+ /* @__PURE__ */ jsx33(Layers, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
6313
6595
  "Group"
6314
6596
  ] }) }),
6315
- /* @__PURE__ */ jsxs28("div", { className: "px-3 pt-3.5 pb-2.5", children: [
6316
- /* @__PURE__ */ jsx30(
6597
+ /* @__PURE__ */ jsxs31("div", { className: "px-3 pt-3.5 pb-2.5", children: [
6598
+ /* @__PURE__ */ jsx33(
6317
6599
  TruncatedResourceName,
6318
6600
  {
6319
6601
  as: "div",
@@ -6323,8 +6605,8 @@ var MessageGroupNode_default = memo28(function MessageGroupNode(props) {
6323
6605
  children: groupName
6324
6606
  }
6325
6607
  ),
6326
- /* @__PURE__ */ jsxs28("div", { className: "mt-1.5 flex items-center gap-2", children: [
6327
- /* @__PURE__ */ jsxs28(
6608
+ /* @__PURE__ */ jsxs31("div", { className: "mt-1.5 flex items-center gap-2", children: [
6609
+ /* @__PURE__ */ jsxs31(
6328
6610
  "span",
6329
6611
  {
6330
6612
  className: "text-[10px] font-medium px-1.5 py-0.5 rounded",
@@ -6339,14 +6621,14 @@ var MessageGroupNode_default = memo28(function MessageGroupNode(props) {
6339
6621
  ]
6340
6622
  }
6341
6623
  ),
6342
- /* @__PURE__ */ jsx30("div", { className: "flex items-center gap-1", children: Object.entries(typeBreakdown).map(([type, count]) => {
6624
+ /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1", children: Object.entries(typeBreakdown).map(([type, count]) => {
6343
6625
  const Icon = TYPE_ICONS[type] || HelpCircle;
6344
- return /* @__PURE__ */ jsxs28(
6626
+ return /* @__PURE__ */ jsxs31(
6345
6627
  "span",
6346
6628
  {
6347
6629
  className: "flex items-center gap-0.5 text-[9px] text-[rgb(var(--ec-page-text-muted))]",
6348
6630
  children: [
6349
- /* @__PURE__ */ jsx30(Icon, { className: "w-2.5 h-2.5", strokeWidth: 2 }),
6631
+ /* @__PURE__ */ jsx33(Icon, { className: "w-2.5 h-2.5", strokeWidth: 2 }),
6350
6632
  count
6351
6633
  ]
6352
6634
  },
@@ -6354,8 +6636,8 @@ var MessageGroupNode_default = memo28(function MessageGroupNode(props) {
6354
6636
  );
6355
6637
  }) })
6356
6638
  ] }),
6357
- /* @__PURE__ */ jsxs28("div", { className: "mt-1.5 flex items-center gap-1 text-[8px] text-[rgb(var(--ec-page-text-muted))]", children: [
6358
- /* @__PURE__ */ jsx30(Maximize22, { className: "w-2.5 h-2.5" }),
6639
+ /* @__PURE__ */ jsxs31("div", { className: "mt-1.5 flex items-center gap-1 text-[8px] text-[rgb(var(--ec-page-text-muted))]", children: [
6640
+ /* @__PURE__ */ jsx33(Maximize22, { className: "w-2.5 h-2.5" }),
6359
6641
  "Click to explore"
6360
6642
  ] })
6361
6643
  ] })
@@ -6366,10 +6648,10 @@ var MessageGroupNode_default = memo28(function MessageGroupNode(props) {
6366
6648
  });
6367
6649
 
6368
6650
  // src/nodes/message-group/MessageGroupExpandedNode.tsx
6369
- import { memo as memo29 } from "react";
6651
+ import { memo as memo32 } from "react";
6370
6652
  import { Layers as Layers2, Minimize2 as Minimize22 } from "lucide-react";
6371
- import { jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
6372
- var CONTAINER_STYLE2 = {
6653
+ import { jsx as jsx34, jsxs as jsxs32 } from "react/jsx-runtime";
6654
+ var CONTAINER_STYLE3 = {
6373
6655
  width: "100%",
6374
6656
  height: "100%",
6375
6657
  borderRadius: 12,
@@ -6378,7 +6660,7 @@ var CONTAINER_STYLE2 = {
6378
6660
  position: "relative",
6379
6661
  overflow: "visible"
6380
6662
  };
6381
- var HEADER_STYLE2 = {
6663
+ var HEADER_STYLE3 = {
6382
6664
  position: "absolute",
6383
6665
  top: 0,
6384
6666
  left: 0,
@@ -6390,7 +6672,7 @@ var HEADER_STYLE2 = {
6390
6672
  borderBottom: "1px solid rgba(139, 92, 246, 0.3)",
6391
6673
  overflow: "visible"
6392
6674
  };
6393
- var BADGE_STYLE2 = {
6675
+ var BADGE_STYLE3 = {
6394
6676
  position: "absolute",
6395
6677
  top: -10,
6396
6678
  left: 12,
@@ -6437,17 +6719,17 @@ var COLLAPSE_BUTTON_STYLE2 = {
6437
6719
  fontWeight: 600,
6438
6720
  color: "white"
6439
6721
  };
6440
- var MessageGroupExpandedNode_default = memo29(function MessageGroupExpandedNode({
6722
+ var MessageGroupExpandedNode_default = memo32(function MessageGroupExpandedNode({
6441
6723
  data
6442
6724
  }) {
6443
6725
  const { groupName, messageCount } = data;
6444
- return /* @__PURE__ */ jsx31("div", { style: CONTAINER_STYLE2, children: /* @__PURE__ */ jsxs29("div", { style: HEADER_STYLE2, children: [
6445
- /* @__PURE__ */ jsxs29("div", { style: BADGE_STYLE2, children: [
6446
- /* @__PURE__ */ jsx31(Layers2, { size: 10, strokeWidth: 2.5 }),
6726
+ return /* @__PURE__ */ jsx34("div", { style: CONTAINER_STYLE3, children: /* @__PURE__ */ jsxs32("div", { style: HEADER_STYLE3, children: [
6727
+ /* @__PURE__ */ jsxs32("div", { style: BADGE_STYLE3, children: [
6728
+ /* @__PURE__ */ jsx34(Layers2, { size: 10, strokeWidth: 2.5 }),
6447
6729
  "Group"
6448
6730
  ] }),
6449
- /* @__PURE__ */ jsxs29("div", { style: HEADER_CONTENT_STYLE2, children: [
6450
- /* @__PURE__ */ jsx31(
6731
+ /* @__PURE__ */ jsxs32("div", { style: HEADER_CONTENT_STYLE2, children: [
6732
+ /* @__PURE__ */ jsx34(
6451
6733
  "div",
6452
6734
  {
6453
6735
  style: {
@@ -6456,7 +6738,7 @@ var MessageGroupExpandedNode_default = memo29(function MessageGroupExpandedNode(
6456
6738
  minWidth: 0,
6457
6739
  flex: 1
6458
6740
  },
6459
- children: /* @__PURE__ */ jsx31(
6741
+ children: /* @__PURE__ */ jsx34(
6460
6742
  TruncatedResourceName,
6461
6743
  {
6462
6744
  value: groupName || "Group",
@@ -6468,14 +6750,14 @@ var MessageGroupExpandedNode_default = memo29(function MessageGroupExpandedNode(
6468
6750
  )
6469
6751
  }
6470
6752
  ),
6471
- /* @__PURE__ */ jsxs29(
6753
+ /* @__PURE__ */ jsxs32(
6472
6754
  "button",
6473
6755
  {
6474
6756
  style: COLLAPSE_BUTTON_STYLE2,
6475
6757
  className: "ec-collapse-group-btn nodrag nopan",
6476
6758
  onMouseDown: (e) => e.stopPropagation(),
6477
6759
  children: [
6478
- /* @__PURE__ */ jsx31(Minimize22, { size: 12, strokeWidth: 2.5 }),
6760
+ /* @__PURE__ */ jsx34(Minimize22, { size: 12, strokeWidth: 2.5 }),
6479
6761
  "Collapse"
6480
6762
  ]
6481
6763
  }
@@ -6485,9 +6767,9 @@ var MessageGroupExpandedNode_default = memo29(function MessageGroupExpandedNode(
6485
6767
  });
6486
6768
 
6487
6769
  // src/edges/AnimatedMessageEdge.tsx
6488
- import { memo as memo30, useMemo as useMemo13 } from "react";
6770
+ import { memo as memo33, useMemo as useMemo13 } from "react";
6489
6771
  import { BaseEdge, getSmoothStepPath } from "@xyflow/react";
6490
- import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
6772
+ import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs33 } from "react/jsx-runtime";
6491
6773
  function messageColor(collection) {
6492
6774
  switch (collection) {
6493
6775
  case "events":
@@ -6502,7 +6784,7 @@ function messageColor(collection) {
6502
6784
  }
6503
6785
  var TSPAN_NORMAL_STYLE = { fontStyle: "normal" };
6504
6786
  var TSPAN_ITALIC_STYLE = { fontStyle: "italic" };
6505
- var AnimatedMessageEdge = memo30(
6787
+ var AnimatedMessageEdge = memo33(
6506
6788
  ({
6507
6789
  id,
6508
6790
  sourceX,
@@ -6534,12 +6816,12 @@ var AnimatedMessageEdge = memo30(
6534
6816
  const animatedNodes = useMemo13(
6535
6817
  () => customColors.map((color, index) => {
6536
6818
  const delay = randomDelay + index * 0.3;
6537
- return /* @__PURE__ */ jsx32(
6819
+ return /* @__PURE__ */ jsx35(
6538
6820
  "g",
6539
6821
  {
6540
6822
  className: `ec-animated-msg ${opacityClass}`,
6541
- children: /* @__PURE__ */ jsxs30("g", { children: [
6542
- /* @__PURE__ */ jsx32(
6823
+ children: /* @__PURE__ */ jsxs33("g", { children: [
6824
+ /* @__PURE__ */ jsx35(
6543
6825
  "rect",
6544
6826
  {
6545
6827
  x: "-7",
@@ -6551,7 +6833,7 @@ var AnimatedMessageEdge = memo30(
6551
6833
  fill: color
6552
6834
  }
6553
6835
  ),
6554
- /* @__PURE__ */ jsx32(
6836
+ /* @__PURE__ */ jsx35(
6555
6837
  "path",
6556
6838
  {
6557
6839
  d: "M-7,-5 L0,1 L7,-5",
@@ -6561,7 +6843,7 @@ var AnimatedMessageEdge = memo30(
6561
6843
  strokeLinejoin: "round"
6562
6844
  }
6563
6845
  ),
6564
- /* @__PURE__ */ jsx32(
6846
+ /* @__PURE__ */ jsx35(
6565
6847
  "animateMotion",
6566
6848
  {
6567
6849
  dur: "2s",
@@ -6569,7 +6851,7 @@ var AnimatedMessageEdge = memo30(
6569
6851
  path: edgePath,
6570
6852
  rotate: "auto",
6571
6853
  begin: `${delay}s`,
6572
- children: /* @__PURE__ */ jsx32("mpath", { href: `#${id}` })
6854
+ children: /* @__PURE__ */ jsx35("mpath", { href: `#${id}` })
6573
6855
  }
6574
6856
  )
6575
6857
  ] })
@@ -6591,8 +6873,8 @@ var AnimatedMessageEdge = memo30(
6591
6873
  );
6592
6874
  const labelWidth = Math.max(longestLine.length * 6.5 + 16, 50);
6593
6875
  const firstLineDy = `${-((lines.length - 1) * 1.2) / 2}em`;
6594
- return /* @__PURE__ */ jsxs30(Fragment5, { children: [
6595
- /* @__PURE__ */ jsx32(
6876
+ return /* @__PURE__ */ jsxs33(Fragment5, { children: [
6877
+ /* @__PURE__ */ jsx35(
6596
6878
  BaseEdge,
6597
6879
  {
6598
6880
  id,
@@ -6603,8 +6885,8 @@ var AnimatedMessageEdge = memo30(
6603
6885
  }
6604
6886
  ),
6605
6887
  animatedNodes,
6606
- /* @__PURE__ */ jsxs30("g", { children: [
6607
- label && /* @__PURE__ */ jsx32(
6888
+ /* @__PURE__ */ jsxs33("g", { children: [
6889
+ label && /* @__PURE__ */ jsx35(
6608
6890
  "rect",
6609
6891
  {
6610
6892
  x: labelX - labelWidth / 2,
@@ -6619,7 +6901,7 @@ var AnimatedMessageEdge = memo30(
6619
6901
  ry: 5
6620
6902
  }
6621
6903
  ),
6622
- /* @__PURE__ */ jsx32(
6904
+ /* @__PURE__ */ jsx35(
6623
6905
  "text",
6624
6906
  {
6625
6907
  x: labelX,
@@ -6630,7 +6912,7 @@ var AnimatedMessageEdge = memo30(
6630
6912
  fontWeight: 500,
6631
6913
  fill: "rgb(var(--ec-page-text))",
6632
6914
  pointerEvents: "none",
6633
- children: lines.map((line, i) => /* @__PURE__ */ jsx32(
6915
+ children: lines.map((line, i) => /* @__PURE__ */ jsx35(
6634
6916
  "tspan",
6635
6917
  {
6636
6918
  x: labelX,
@@ -6649,12 +6931,12 @@ var AnimatedMessageEdge = memo30(
6649
6931
  var AnimatedMessageEdge_default = AnimatedMessageEdge;
6650
6932
 
6651
6933
  // src/edges/MultilineEdgeLabel.tsx
6652
- import { memo as memo31, useMemo as useMemo14 } from "react";
6934
+ import { memo as memo34, useMemo as useMemo14 } from "react";
6653
6935
  import { getSmoothStepPath as getSmoothStepPath2 } from "@xyflow/react";
6654
- import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs31 } from "react/jsx-runtime";
6936
+ import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs34 } from "react/jsx-runtime";
6655
6937
  var TSPAN_NORMAL_STYLE2 = { fontStyle: "normal" };
6656
6938
  var TSPAN_ITALIC_STYLE2 = { fontStyle: "italic" };
6657
- var MultilineEdgeLabel_default = memo31(function MultilineEdgeLabel(props) {
6939
+ var MultilineEdgeLabel_default = memo34(function MultilineEdgeLabel(props) {
6658
6940
  const {
6659
6941
  id,
6660
6942
  sourceX,
@@ -6689,8 +6971,8 @@ var MultilineEdgeLabel_default = memo31(function MultilineEdgeLabel(props) {
6689
6971
  );
6690
6972
  const labelWidth = Math.max(longestLine.length * 5.5 + 14, 44);
6691
6973
  const labelHeight = lines.length * 12 + 4;
6692
- return /* @__PURE__ */ jsxs31(Fragment6, { children: [
6693
- /* @__PURE__ */ jsx33(
6974
+ return /* @__PURE__ */ jsxs34(Fragment6, { children: [
6975
+ /* @__PURE__ */ jsx36(
6694
6976
  "path",
6695
6977
  {
6696
6978
  id,
@@ -6701,7 +6983,7 @@ var MultilineEdgeLabel_default = memo31(function MultilineEdgeLabel(props) {
6701
6983
  style
6702
6984
  }
6703
6985
  ),
6704
- label && /* @__PURE__ */ jsx33(
6986
+ label && /* @__PURE__ */ jsx36(
6705
6987
  "rect",
6706
6988
  {
6707
6989
  x: labelX - labelWidth / 2,
@@ -6717,7 +6999,7 @@ var MultilineEdgeLabel_default = memo31(function MultilineEdgeLabel(props) {
6717
6999
  pointerEvents: "none"
6718
7000
  }
6719
7001
  ),
6720
- /* @__PURE__ */ jsx33(
7002
+ /* @__PURE__ */ jsx36(
6721
7003
  "text",
6722
7004
  {
6723
7005
  x: labelX,
@@ -6727,7 +7009,7 @@ var MultilineEdgeLabel_default = memo31(function MultilineEdgeLabel(props) {
6727
7009
  fontSize: "10px",
6728
7010
  fill: "rgb(var(--ec-page-text))",
6729
7011
  pointerEvents: "none",
6730
- children: lines.map((line, i) => /* @__PURE__ */ jsx33(
7012
+ children: lines.map((line, i) => /* @__PURE__ */ jsx36(
6731
7013
  "tspan",
6732
7014
  {
6733
7015
  x: labelX,
@@ -6743,13 +7025,13 @@ var MultilineEdgeLabel_default = memo31(function MultilineEdgeLabel(props) {
6743
7025
  });
6744
7026
 
6745
7027
  // src/edges/FlowEdge.tsx
6746
- import { memo as memo32, useMemo as useMemo15 } from "react";
7028
+ import { memo as memo35, useMemo as useMemo15 } from "react";
6747
7029
  import {
6748
7030
  BaseEdge as BaseEdge2,
6749
7031
  EdgeLabelRenderer,
6750
7032
  getSmoothStepPath as getSmoothStepPath3
6751
7033
  } from "@xyflow/react";
6752
- import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs32 } from "react/jsx-runtime";
7034
+ import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs35 } from "react/jsx-runtime";
6753
7035
  function messageColor2(collection) {
6754
7036
  switch (collection) {
6755
7037
  case "events":
@@ -6763,7 +7045,7 @@ function messageColor2(collection) {
6763
7045
  }
6764
7046
  }
6765
7047
  var EMPTY_STYLE = {};
6766
- var FlowEdge_default = memo32(function CustomEdge({
7048
+ var FlowEdge_default = memo35(function CustomEdge({
6767
7049
  id,
6768
7050
  sourceX,
6769
7051
  sourceY,
@@ -6801,20 +7083,20 @@ var FlowEdge_default = memo32(function CustomEdge({
6801
7083
  }),
6802
7084
  [labelX, labelY, labelStyle]
6803
7085
  );
6804
- return /* @__PURE__ */ jsxs32(Fragment7, { children: [
6805
- /* @__PURE__ */ jsx34(BaseEdge2, { path: edgePath, markerEnd, style: mergedStyle }),
6806
- data?.animated && /* @__PURE__ */ jsx34(
7086
+ return /* @__PURE__ */ jsxs35(Fragment7, { children: [
7087
+ /* @__PURE__ */ jsx37(BaseEdge2, { path: edgePath, markerEnd, style: mergedStyle }),
7088
+ data?.animated && /* @__PURE__ */ jsx37(
6807
7089
  "g",
6808
7090
  {
6809
7091
  className: `ec-animated-msg z-30 ${opacity === 1 ? "opacity-100" : "opacity-10"}`,
6810
- children: /* @__PURE__ */ jsx34(
7092
+ children: /* @__PURE__ */ jsx37(
6811
7093
  "circle",
6812
7094
  {
6813
7095
  cx: "0",
6814
7096
  cy: "0",
6815
7097
  r: "7",
6816
7098
  fill: messageColor2(collection || "default"),
6817
- children: /* @__PURE__ */ jsx34(
7099
+ children: /* @__PURE__ */ jsx37(
6818
7100
  "animateMotion",
6819
7101
  {
6820
7102
  dur: "2s",
@@ -6822,14 +7104,14 @@ var FlowEdge_default = memo32(function CustomEdge({
6822
7104
  path: edgePath,
6823
7105
  rotate: "auto",
6824
7106
  begin: `${randomDelay}s`,
6825
- children: /* @__PURE__ */ jsx34("mpath", { href: `#${id}` })
7107
+ children: /* @__PURE__ */ jsx37("mpath", { href: `#${id}` })
6826
7108
  }
6827
7109
  )
6828
7110
  }
6829
7111
  )
6830
7112
  }
6831
7113
  ),
6832
- label && /* @__PURE__ */ jsx34(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx34(
7114
+ label && /* @__PURE__ */ jsx37(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx37(
6833
7115
  "div",
6834
7116
  {
6835
7117
  style: labelPositionStyle,
@@ -6848,23 +7130,24 @@ import {
6848
7130
  useEffect as useEffect3,
6849
7131
  forwardRef,
6850
7132
  useImperativeHandle,
6851
- memo as memo33
7133
+ memo as memo36
6852
7134
  } from "react";
6853
7135
  import {
6854
7136
  Blocks,
6855
7137
  Bot as Bot2,
6856
7138
  Database as Database5,
7139
+ Group,
6857
7140
  Layers as Layers3,
6858
7141
  ListTree,
6859
7142
  MessageSquare as MessageSquare2,
6860
7143
  Search as SearchIcon,
6861
7144
  Server as Server2,
6862
- User as User3,
7145
+ User as User4,
6863
7146
  Workflow as Workflow2,
6864
7147
  Wrench as Wrench2,
6865
7148
  Zap as Zap4
6866
7149
  } from "lucide-react";
6867
- import { jsx as jsx35, jsxs as jsxs33 } from "react/jsx-runtime";
7150
+ import { jsx as jsx38, jsxs as jsxs36 } from "react/jsx-runtime";
6868
7151
  var formatVersionedName = (name, version) => {
6869
7152
  if (version) {
6870
7153
  const nameWithoutVersion = name.replace(
@@ -6922,7 +7205,7 @@ var getNodeResourceData = (data, key) => {
6922
7205
  if (!resource || typeof resource !== "object") return void 0;
6923
7206
  return "data" in resource && resource.data ? resource.data : resource;
6924
7207
  };
6925
- var VisualiserSearch = memo33(
7208
+ var VisualiserSearch = memo36(
6926
7209
  forwardRef(
6927
7210
  ({ nodes, onNodeSelect, onClear, onPaneClick: _onPaneClick }, ref) => {
6928
7211
  const [searchQuery, setSearchQuery] = useState6("");
@@ -6956,12 +7239,13 @@ var VisualiserSearch = memo33(
6956
7239
  const agentTool = getNodeResourceData(node.data, "agentTool");
6957
7240
  const service = getNodeResourceData(node.data, "service");
6958
7241
  const domain = getNodeResourceData(node.data, "domain");
7242
+ const system = getNodeResourceData(node.data, "system");
6959
7243
  const entity = getNodeResourceData(node.data, "entity");
6960
7244
  const channel = getNodeResourceData(node.data, "channel");
6961
7245
  const dataProduct = getNodeResourceData(node.data, "dataProduct");
6962
7246
  const data = getNodeResourceData(node.data, "data");
6963
- const name = message?.name || message?.id || agent?.name || agent?.id || agentTool?.name || agentTool?.id || service?.name || service?.id || domain?.name || domain?.id || entity?.name || entity?.id || channel?.name || channel?.id || dataProduct?.name || dataProduct?.id || data?.name || data?.id || node.data?.name || node.id;
6964
- const version = message?.version || agent?.version || agentTool?.version || service?.version || domain?.version || entity?.version || channel?.version || dataProduct?.version || data?.version || node.data?.version;
7247
+ const name = message?.name || message?.id || agent?.name || agent?.id || agentTool?.name || agentTool?.id || service?.name || service?.id || domain?.name || domain?.id || system?.name || system?.id || entity?.name || entity?.id || channel?.name || channel?.id || dataProduct?.name || dataProduct?.id || data?.name || data?.id || node.data?.name || node.id;
7248
+ const version = message?.version || agent?.version || agentTool?.version || service?.version || domain?.version || system?.version || entity?.version || channel?.version || dataProduct?.version || data?.version || node.data?.version;
6965
7249
  return formatVersionedName(name, version);
6966
7250
  }, []);
6967
7251
  const getNodeResourceKey = useCallback4(
@@ -6970,7 +7254,7 @@ var VisualiserSearch = memo33(
6970
7254
  return `${node.type}:${node.id}`.toLowerCase();
6971
7255
  }
6972
7256
  const data = node.data;
6973
- const resource = getNodeResourceData(data, "message") || getNodeResourceData(data, "agent") || getNodeResourceData(data, "agentTool") || getNodeResourceData(data, "service") || getNodeResourceData(data, "domain") || getNodeResourceData(data, "entity") || getNodeResourceData(data, "channel") || getNodeResourceData(data, "dataProduct") || data?.data || data;
7257
+ const resource = getNodeResourceData(data, "message") || getNodeResourceData(data, "agent") || getNodeResourceData(data, "agentTool") || getNodeResourceData(data, "service") || getNodeResourceData(data, "domain") || getNodeResourceData(data, "system") || getNodeResourceData(data, "entity") || getNodeResourceData(data, "channel") || getNodeResourceData(data, "dataProduct") || data?.data || data;
6974
7258
  return getResourceKey({
6975
7259
  type: node.type || "unknown",
6976
7260
  id: resource?.id,
@@ -7007,6 +7291,7 @@ var VisualiserSearch = memo33(
7007
7291
  const getSearchSuggestions = useCallback4(
7008
7292
  (nodesToIndex) => {
7009
7293
  const suggestions = nodesToIndex.flatMap((node) => {
7294
+ if (node.type === "system-group") return [];
7010
7295
  const nodeName = getNodeDisplayName(node);
7011
7296
  const suggestions2 = [
7012
7297
  {
@@ -7123,6 +7408,12 @@ var VisualiserSearch = memo33(
7123
7408
  iconClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
7124
7409
  badgeClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300"
7125
7410
  },
7411
+ systems: {
7412
+ label: "System",
7413
+ Icon: Group,
7414
+ iconClass: "border-violet-500/25 bg-violet-500/10 text-violet-500",
7415
+ badgeClass: "border-violet-500/25 bg-violet-500/10 text-violet-700 dark:text-violet-300"
7416
+ },
7126
7417
  flows: {
7127
7418
  label: "Flow",
7128
7419
  Icon: Workflow2,
@@ -7155,13 +7446,19 @@ var VisualiserSearch = memo33(
7155
7446
  },
7156
7447
  actor: {
7157
7448
  label: "Actor",
7158
- Icon: User3,
7449
+ Icon: User4,
7450
+ iconClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
7451
+ badgeClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300"
7452
+ },
7453
+ "context-actor": {
7454
+ label: "Actor",
7455
+ Icon: User4,
7159
7456
  iconClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
7160
7457
  badgeClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300"
7161
7458
  },
7162
7459
  user: {
7163
7460
  label: "User",
7164
- Icon: User3,
7461
+ Icon: User4,
7165
7462
  iconClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
7166
7463
  badgeClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300"
7167
7464
  },
@@ -7313,9 +7610,9 @@ var VisualiserSearch = memo33(
7313
7610
  document.removeEventListener("mousedown", handleClickOutside);
7314
7611
  };
7315
7612
  }, []);
7316
- return /* @__PURE__ */ jsxs33("div", { ref: containerRef, className: "w-full max-w-md mx-auto relative", children: [
7317
- /* @__PURE__ */ jsxs33("div", { className: "relative", children: [
7318
- /* @__PURE__ */ jsx35(
7613
+ return /* @__PURE__ */ jsxs36("div", { ref: containerRef, className: "w-full max-w-md mx-auto relative", children: [
7614
+ /* @__PURE__ */ jsxs36("div", { className: "relative", children: [
7615
+ /* @__PURE__ */ jsx38(
7319
7616
  "input",
7320
7617
  {
7321
7618
  ref: searchInputRef,
@@ -7328,20 +7625,20 @@ var VisualiserSearch = memo33(
7328
7625
  className: "w-full px-4 py-2 pr-10 bg-[rgb(var(--ec-input-bg))] border border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent"
7329
7626
  }
7330
7627
  ),
7331
- searchQuery && /* @__PURE__ */ jsx35(
7628
+ searchQuery && /* @__PURE__ */ jsx38(
7332
7629
  "button",
7333
7630
  {
7334
7631
  onClick: clearSearch,
7335
7632
  className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]",
7336
7633
  "aria-label": "Clear search",
7337
- children: /* @__PURE__ */ jsx35(
7634
+ children: /* @__PURE__ */ jsx38(
7338
7635
  "svg",
7339
7636
  {
7340
7637
  className: "w-5 h-5",
7341
7638
  fill: "none",
7342
7639
  stroke: "currentColor",
7343
7640
  viewBox: "0 0 24 24",
7344
- children: /* @__PURE__ */ jsx35(
7641
+ children: /* @__PURE__ */ jsx38(
7345
7642
  "path",
7346
7643
  {
7347
7644
  strokeLinecap: "round",
@@ -7355,7 +7652,7 @@ var VisualiserSearch = memo33(
7355
7652
  }
7356
7653
  )
7357
7654
  ] }),
7358
- showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ jsx35(
7655
+ showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ jsx38(
7359
7656
  "div",
7360
7657
  {
7361
7658
  ref: suggestionsListRef,
@@ -7364,7 +7661,7 @@ var VisualiserSearch = memo33(
7364
7661
  const nodeTypeMeta = getNodeTypeMeta(suggestion.type);
7365
7662
  const Icon = nodeTypeMeta.Icon;
7366
7663
  const isSelected = index === selectedSuggestionIndex;
7367
- return /* @__PURE__ */ jsxs33(
7664
+ return /* @__PURE__ */ jsxs36(
7368
7665
  "div",
7369
7666
  {
7370
7667
  ref: (element) => {
@@ -7374,21 +7671,21 @@ var VisualiserSearch = memo33(
7374
7671
  onMouseEnter: () => setSelectedSuggestionIndex(index),
7375
7672
  className: `px-3 py-2 cursor-pointer flex items-start gap-3 ${isSelected ? "bg-[rgb(var(--ec-accent-subtle))] outline outline-1 -outline-offset-1 outline-[rgb(var(--ec-accent))]" : "hover:bg-[rgb(var(--ec-page-border)/0.5)]"}`,
7376
7673
  children: [
7377
- /* @__PURE__ */ jsx35(
7674
+ /* @__PURE__ */ jsx38(
7378
7675
  "span",
7379
7676
  {
7380
7677
  className: `mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border ${nodeTypeMeta.iconClass}`,
7381
- children: /* @__PURE__ */ jsx35(Icon, { className: "h-3.5 w-3.5" })
7678
+ children: /* @__PURE__ */ jsx38(Icon, { className: "h-3.5 w-3.5" })
7382
7679
  }
7383
7680
  ),
7384
- /* @__PURE__ */ jsxs33("span", { className: "min-w-0 flex-1", children: [
7385
- /* @__PURE__ */ jsx35("span", { className: "block truncate text-sm font-medium text-[rgb(var(--ec-page-text))]", children: suggestion.label }),
7386
- suggestion.isGroupedMessage && suggestion.groupName && /* @__PURE__ */ jsxs33("span", { className: "mt-0.5 block truncate text-xs text-[rgb(var(--ec-page-text-muted))]", children: [
7681
+ /* @__PURE__ */ jsxs36("span", { className: "min-w-0 flex-1", children: [
7682
+ /* @__PURE__ */ jsx38("span", { className: "block truncate text-sm font-medium text-[rgb(var(--ec-page-text))]", children: suggestion.label }),
7683
+ suggestion.isGroupedMessage && suggestion.groupName && /* @__PURE__ */ jsxs36("span", { className: "mt-0.5 block truncate text-xs text-[rgb(var(--ec-page-text-muted))]", children: [
7387
7684
  "in ",
7388
7685
  suggestion.groupName
7389
7686
  ] })
7390
7687
  ] }),
7391
- /* @__PURE__ */ jsx35(
7688
+ /* @__PURE__ */ jsx38(
7392
7689
  "span",
7393
7690
  {
7394
7691
  className: `mt-0.5 flex-shrink-0 rounded border px-2 py-0.5 text-xs font-medium ${nodeTypeMeta.badgeClass}`,
@@ -7416,11 +7713,11 @@ import {
7416
7713
  useCallback as useCallback5,
7417
7714
  useMemo as useMemo16,
7418
7715
  useRef as useRef4,
7419
- memo as memo34
7716
+ memo as memo37
7420
7717
  } from "react";
7421
7718
  import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
7422
- import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs34 } from "react/jsx-runtime";
7423
- var StepWalkthrough_default = memo34(function StepWalkthrough({
7719
+ import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs37 } from "react/jsx-runtime";
7720
+ var StepWalkthrough_default = memo37(function StepWalkthrough({
7424
7721
  nodes,
7425
7722
  edges,
7426
7723
  isFlowVisualization,
@@ -7589,14 +7886,14 @@ var StepWalkthrough_default = memo34(function StepWalkthrough({
7589
7886
  }
7590
7887
  return { title: title2, description: description2 };
7591
7888
  }, [currentStepIndex, currentNodeId, nodeIdsKey]);
7592
- return /* @__PURE__ */ jsxs34("div", { className: "ml-12 bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-sm px-4 py-2 z-30 border border-[rgb(var(--ec-page-border))] w-[350px]", children: [
7593
- /* @__PURE__ */ jsxs34("div", { className: "mb-2", children: [
7594
- /* @__PURE__ */ jsx36("h3", { className: "text-sm font-semibold text-[rgb(var(--ec-page-text))]", children: title }),
7595
- description && /* @__PURE__ */ jsx36("p", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: description })
7889
+ return /* @__PURE__ */ jsxs37("div", { className: "ml-12 bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-sm px-4 py-2 z-30 border border-[rgb(var(--ec-page-border))] w-[350px]", children: [
7890
+ /* @__PURE__ */ jsxs37("div", { className: "mb-2", children: [
7891
+ /* @__PURE__ */ jsx39("h3", { className: "text-sm font-semibold text-[rgb(var(--ec-page-text))]", children: title }),
7892
+ description && /* @__PURE__ */ jsx39("p", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: description })
7596
7893
  ] }),
7597
- currentNodeId && availablePaths.length > 1 && /* @__PURE__ */ jsxs34("div", { className: "mb-3", children: [
7598
- /* @__PURE__ */ jsx36("label", { className: "block text-xs font-medium text-[rgb(var(--ec-page-text-muted))] mb-2", children: "Choose next path:" }),
7599
- /* @__PURE__ */ jsx36(
7894
+ currentNodeId && availablePaths.length > 1 && /* @__PURE__ */ jsxs37("div", { className: "mb-3", children: [
7895
+ /* @__PURE__ */ jsx39("label", { className: "block text-xs font-medium text-[rgb(var(--ec-page-text-muted))] mb-2", children: "Choose next path:" }),
7896
+ /* @__PURE__ */ jsx39(
7600
7897
  "select",
7601
7898
  {
7602
7899
  value: selectedPathIndex,
@@ -7604,16 +7901,16 @@ var StepWalkthrough_default = memo34(function StepWalkthrough({
7604
7901
  className: "w-full px-3 py-2 text-xs border border-[rgb(var(--ec-input-border))] rounded-md bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-[rgb(var(--ec-accent))]",
7605
7902
  children: availablePaths.map((path, index) => {
7606
7903
  const nodeLabel = path.targetNode.data.step?.title || path.targetNode.data.service?.name || path.targetNode.data.message?.name || path.targetNode.data.flow?.data?.name || path.targetNode.data.custom?.title || path.targetNode.data.custom?.label || path.targetNode.data.externalSystem?.label || path.targetNode.data.label || "Unknown";
7607
- return /* @__PURE__ */ jsx36("option", { value: index, children: path.label ? `${path.label}: ${nodeLabel}` : nodeLabel }, path.targetId);
7904
+ return /* @__PURE__ */ jsx39("option", { value: index, children: path.label ? `${path.label}: ${nodeLabel}` : nodeLabel }, path.targetId);
7608
7905
  })
7609
7906
  }
7610
7907
  )
7611
7908
  ] }),
7612
- /* @__PURE__ */ jsx36("div", { className: "flex items-center justify-between", children: currentStepIndex === -1 ? (
7909
+ /* @__PURE__ */ jsx39("div", { className: "flex items-center justify-between", children: currentStepIndex === -1 ? (
7613
7910
  // Initial state - show only Start button on the right
7614
- /* @__PURE__ */ jsxs34(Fragment8, { children: [
7615
- /* @__PURE__ */ jsx36("div", { className: "flex-1" }),
7616
- /* @__PURE__ */ jsx36(
7911
+ /* @__PURE__ */ jsxs37(Fragment8, { children: [
7912
+ /* @__PURE__ */ jsx39("div", { className: "flex-1" }),
7913
+ /* @__PURE__ */ jsx39(
7617
7914
  "button",
7618
7915
  {
7619
7916
  onClick: handleNextStep,
@@ -7624,29 +7921,29 @@ var StepWalkthrough_default = memo34(function StepWalkthrough({
7624
7921
  ] })
7625
7922
  ) : (
7626
7923
  // In walkthrough - show Previous on left, Next on right (only if paths available)
7627
- /* @__PURE__ */ jsxs34(Fragment8, { children: [
7628
- /* @__PURE__ */ jsxs34(
7924
+ /* @__PURE__ */ jsxs37(Fragment8, { children: [
7925
+ /* @__PURE__ */ jsxs37(
7629
7926
  "button",
7630
7927
  {
7631
7928
  onClick: handlePreviousStep,
7632
7929
  className: "flex items-center justify-center px-4 py-2 text-xs font-medium bg-[rgb(var(--ec-accent))] text-white rounded-md hover:bg-[rgb(var(--ec-accent-hover))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors",
7633
7930
  children: [
7634
- /* @__PURE__ */ jsx36(ChevronLeftIcon, { className: "w-4 h-4 mr-1" }),
7931
+ /* @__PURE__ */ jsx39(ChevronLeftIcon, { className: "w-4 h-4 mr-1" }),
7635
7932
  "Previous"
7636
7933
  ]
7637
7934
  }
7638
7935
  ),
7639
- availablePaths.length > 0 ? /* @__PURE__ */ jsxs34(
7936
+ availablePaths.length > 0 ? /* @__PURE__ */ jsxs37(
7640
7937
  "button",
7641
7938
  {
7642
7939
  onClick: handleNextStep,
7643
7940
  className: "flex items-center justify-center px-4 py-2 text-xs font-medium bg-[rgb(var(--ec-accent))] text-white rounded-md hover:bg-[rgb(var(--ec-accent-hover))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors",
7644
7941
  children: [
7645
7942
  "Next",
7646
- /* @__PURE__ */ jsx36(ChevronRightIcon, { className: "w-4 h-4 ml-1" })
7943
+ /* @__PURE__ */ jsx39(ChevronRightIcon, { className: "w-4 h-4 ml-1" })
7647
7944
  ]
7648
7945
  }
7649
- ) : /* @__PURE__ */ jsx36(
7946
+ ) : /* @__PURE__ */ jsx39(
7650
7947
  "button",
7651
7948
  {
7652
7949
  onClick: handleFinish,
@@ -7728,7 +8025,7 @@ var exportNodeGraphForStudio = (data) => {
7728
8025
  };
7729
8026
 
7730
8027
  // src/components/StudioModal.tsx
7731
- import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs35 } from "react/jsx-runtime";
8028
+ import { Fragment as Fragment9, jsx as jsx40, jsxs as jsxs38 } from "react/jsx-runtime";
7732
8029
  var StudioModal = ({ isOpen, onClose }) => {
7733
8030
  const [copySuccess, setCopySuccess] = useState8(false);
7734
8031
  const portalContainer = usePortalContainer();
@@ -7759,14 +8056,14 @@ var StudioModal = ({ isOpen, onClose }) => {
7759
8056
  );
7760
8057
  onClose();
7761
8058
  };
7762
- return /* @__PURE__ */ jsx37(Dialog2.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs35(Dialog2.Portal, { container: portalContainer, children: [
7763
- /* @__PURE__ */ jsx37(Dialog2.Overlay, { className: "fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" }),
7764
- /* @__PURE__ */ jsxs35(Dialog2.Content, { className: "fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100]", children: [
7765
- /* @__PURE__ */ jsx37(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-3", children: "Open in EventCatalog Studio" }),
7766
- /* @__PURE__ */ jsxs35(Dialog2.Description, { className: "text-sm text-gray-600 mb-6", children: [
8059
+ return /* @__PURE__ */ jsx40(Dialog2.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs38(Dialog2.Portal, { container: portalContainer, children: [
8060
+ /* @__PURE__ */ jsx40(Dialog2.Overlay, { className: "fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" }),
8061
+ /* @__PURE__ */ jsxs38(Dialog2.Content, { className: "fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100]", children: [
8062
+ /* @__PURE__ */ jsx40(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-3", children: "Open in EventCatalog Studio" }),
8063
+ /* @__PURE__ */ jsxs38(Dialog2.Description, { className: "text-sm text-gray-600 mb-6", children: [
7767
8064
  "Import your diagram into",
7768
8065
  " ",
7769
- /* @__PURE__ */ jsx37(
8066
+ /* @__PURE__ */ jsx40(
7770
8067
  "a",
7771
8068
  {
7772
8069
  href: "https://eventcatalog.studio",
@@ -7779,43 +8076,43 @@ var StudioModal = ({ isOpen, onClose }) => {
7779
8076
  " ",
7780
8077
  "to create designs from your visualization of your architecture."
7781
8078
  ] }),
7782
- /* @__PURE__ */ jsxs35("div", { className: "space-y-4", children: [
7783
- /* @__PURE__ */ jsxs35("div", { className: "bg-gray-50 rounded-lg p-4 border border-gray-200", children: [
7784
- /* @__PURE__ */ jsx37("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 1: Copy diagram" }),
7785
- /* @__PURE__ */ jsx37("p", { className: "text-xs text-gray-600 mb-3", children: "Copy your diagram data to your clipboard." }),
7786
- /* @__PURE__ */ jsx37(
8079
+ /* @__PURE__ */ jsxs38("div", { className: "space-y-4", children: [
8080
+ /* @__PURE__ */ jsxs38("div", { className: "bg-gray-50 rounded-lg p-4 border border-gray-200", children: [
8081
+ /* @__PURE__ */ jsx40("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 1: Copy diagram" }),
8082
+ /* @__PURE__ */ jsx40("p", { className: "text-xs text-gray-600 mb-3", children: "Copy your diagram data to your clipboard." }),
8083
+ /* @__PURE__ */ jsx40(
7787
8084
  "button",
7788
8085
  {
7789
8086
  onClick: handleCopyToClipboard,
7790
8087
  className: `w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium rounded-md border transition-colors ${copySuccess ? "bg-green-50 border-green-200 text-green-700" : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50"}`,
7791
- children: copySuccess ? /* @__PURE__ */ jsxs35(Fragment9, { children: [
7792
- /* @__PURE__ */ jsx37(CheckIcon, { className: "w-4 h-4" }),
7793
- /* @__PURE__ */ jsx37("span", { children: "Copied!" })
7794
- ] }) : /* @__PURE__ */ jsxs35(Fragment9, { children: [
7795
- /* @__PURE__ */ jsx37(ClipboardIcon, { className: "w-4 h-4" }),
7796
- /* @__PURE__ */ jsx37("span", { children: "Copy diagram to clipboard" })
8088
+ children: copySuccess ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
8089
+ /* @__PURE__ */ jsx40(CheckIcon, { className: "w-4 h-4" }),
8090
+ /* @__PURE__ */ jsx40("span", { children: "Copied!" })
8091
+ ] }) : /* @__PURE__ */ jsxs38(Fragment9, { children: [
8092
+ /* @__PURE__ */ jsx40(ClipboardIcon, { className: "w-4 h-4" }),
8093
+ /* @__PURE__ */ jsx40("span", { children: "Copy diagram to clipboard" })
7797
8094
  ] })
7798
8095
  }
7799
8096
  )
7800
8097
  ] }),
7801
- /* @__PURE__ */ jsxs35("div", { className: "bg-[rgb(var(--ec-accent-subtle))] rounded-lg p-4 border border-[rgb(var(--ec-accent)/0.3)]", children: [
7802
- /* @__PURE__ */ jsx37("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 2: Open EventCatalog Studio" }),
7803
- /* @__PURE__ */ jsx37("p", { className: "text-xs text-gray-600 mb-3", children: 'Go to EventCatalog Studio and import your design using the "Import from EventCatalog" button.' }),
7804
- /* @__PURE__ */ jsxs35(
8098
+ /* @__PURE__ */ jsxs38("div", { className: "bg-[rgb(var(--ec-accent-subtle))] rounded-lg p-4 border border-[rgb(var(--ec-accent)/0.3)]", children: [
8099
+ /* @__PURE__ */ jsx40("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 2: Open EventCatalog Studio" }),
8100
+ /* @__PURE__ */ jsx40("p", { className: "text-xs text-gray-600 mb-3", children: 'Go to EventCatalog Studio and import your design using the "Import from EventCatalog" button.' }),
8101
+ /* @__PURE__ */ jsxs38(
7805
8102
  "button",
7806
8103
  {
7807
8104
  onClick: handleOpenStudio,
7808
8105
  className: "w-full flex items-center justify-center space-x-2 px-4 py-2 bg-[rgb(var(--ec-accent))] text-white text-sm font-medium rounded-md hover:bg-[rgb(var(--ec-accent-hover))] transition-colors",
7809
8106
  children: [
7810
- /* @__PURE__ */ jsx37(ExternalLinkIcon, { className: "w-4 h-4" }),
7811
- /* @__PURE__ */ jsx37("span", { children: "Open EventCatalog Studio" })
8107
+ /* @__PURE__ */ jsx40(ExternalLinkIcon, { className: "w-4 h-4" }),
8108
+ /* @__PURE__ */ jsx40("span", { children: "Open EventCatalog Studio" })
7812
8109
  ]
7813
8110
  }
7814
8111
  ),
7815
- /* @__PURE__ */ jsx37("p", { className: "text-[12px] text-gray-500 italic mt-4 mb-0", children: "Don't worry, none of your data is stored by EventCatalog Studio, everything is local to your browser." })
8112
+ /* @__PURE__ */ jsx40("p", { className: "text-[12px] text-gray-500 italic mt-4 mb-0", children: "Don't worry, none of your data is stored by EventCatalog Studio, everything is local to your browser." })
7816
8113
  ] })
7817
8114
  ] }),
7818
- /* @__PURE__ */ jsx37("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsx37(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx37(
8115
+ /* @__PURE__ */ jsx40("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsx40(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx40(
7819
8116
  "button",
7820
8117
  {
7821
8118
  type: "button",
@@ -7963,9 +8260,9 @@ function getNodeDocUrl(node) {
7963
8260
  }
7964
8261
 
7965
8262
  // src/components/FocusMode/FocusModeNodeActions.tsx
7966
- import { NodeToolbar, Position as Position21, useViewport } from "@xyflow/react";
8263
+ import { NodeToolbar, Position as Position23, useViewport } from "@xyflow/react";
7967
8264
  import { ArrowRightLeft as ArrowRightLeft2, FileText } from "lucide-react";
7968
- import { jsx as jsx38, jsxs as jsxs36 } from "react/jsx-runtime";
8265
+ import { jsx as jsx41, jsxs as jsxs39 } from "react/jsx-runtime";
7969
8266
  var FocusModeNodeActions = ({
7970
8267
  node,
7971
8268
  isCenter,
@@ -7992,26 +8289,26 @@ var FocusModeNodeActions = ({
7992
8289
  };
7993
8290
  if (isCenter) {
7994
8291
  if (!docUrl) return null;
7995
- return /* @__PURE__ */ jsx38(
8292
+ return /* @__PURE__ */ jsx41(
7996
8293
  NodeToolbar,
7997
8294
  {
7998
8295
  nodeId: node.id,
7999
- position: Position21.Bottom,
8296
+ position: Position23.Bottom,
8000
8297
  isVisible: true,
8001
8298
  offset: -16,
8002
- children: /* @__PURE__ */ jsx38(
8299
+ children: /* @__PURE__ */ jsx41(
8003
8300
  "div",
8004
8301
  {
8005
8302
  className: "flex items-center gap-1 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md",
8006
8303
  style: { padding: Math.round(4 * scaleFactor) },
8007
- children: /* @__PURE__ */ jsx38(
8304
+ children: /* @__PURE__ */ jsx41(
8008
8305
  "button",
8009
8306
  {
8010
8307
  onClick: handleDocClick,
8011
8308
  className: "flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors",
8012
8309
  style: { width: buttonSize, height: buttonSize },
8013
8310
  title: "View documentation",
8014
- children: /* @__PURE__ */ jsx38(FileText, { style: { width: iconSize, height: iconSize } })
8311
+ children: /* @__PURE__ */ jsx41(FileText, { style: { width: iconSize, height: iconSize } })
8015
8312
  }
8016
8313
  )
8017
8314
  }
@@ -8019,37 +8316,37 @@ var FocusModeNodeActions = ({
8019
8316
  }
8020
8317
  );
8021
8318
  }
8022
- return /* @__PURE__ */ jsx38(
8319
+ return /* @__PURE__ */ jsx41(
8023
8320
  NodeToolbar,
8024
8321
  {
8025
8322
  nodeId: node.id,
8026
- position: Position21.Bottom,
8323
+ position: Position23.Bottom,
8027
8324
  isVisible: true,
8028
8325
  offset: -16,
8029
- children: /* @__PURE__ */ jsxs36(
8326
+ children: /* @__PURE__ */ jsxs39(
8030
8327
  "div",
8031
8328
  {
8032
8329
  className: "flex items-center gap-1 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md",
8033
8330
  style: { padding: Math.round(4 * scaleFactor) },
8034
8331
  children: [
8035
- docUrl && /* @__PURE__ */ jsx38(
8332
+ docUrl && /* @__PURE__ */ jsx41(
8036
8333
  "button",
8037
8334
  {
8038
8335
  onClick: handleDocClick,
8039
8336
  className: "flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors",
8040
8337
  style: { width: buttonSize, height: buttonSize },
8041
8338
  title: "View documentation",
8042
- children: /* @__PURE__ */ jsx38(FileText, { style: { width: iconSize, height: iconSize } })
8339
+ children: /* @__PURE__ */ jsx41(FileText, { style: { width: iconSize, height: iconSize } })
8043
8340
  }
8044
8341
  ),
8045
- /* @__PURE__ */ jsx38(
8342
+ /* @__PURE__ */ jsx41(
8046
8343
  "button",
8047
8344
  {
8048
8345
  onClick: handleSwitch,
8049
8346
  className: "flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors",
8050
8347
  style: { width: buttonSize, height: buttonSize },
8051
8348
  title: "Focus on this node",
8052
- children: /* @__PURE__ */ jsx38(ArrowRightLeft2, { style: { width: iconSize, height: iconSize } })
8349
+ children: /* @__PURE__ */ jsx41(ArrowRightLeft2, { style: { width: iconSize, height: iconSize } })
8053
8350
  }
8054
8351
  )
8055
8352
  ]
@@ -8061,32 +8358,32 @@ var FocusModeNodeActions = ({
8061
8358
  var FocusModeNodeActions_default = FocusModeNodeActions;
8062
8359
 
8063
8360
  // src/components/FocusMode/FocusModePlaceholder.tsx
8064
- import { Handle as Handle23, Position as Position22 } from "@xyflow/react";
8065
- import { jsx as jsx39, jsxs as jsxs37 } from "react/jsx-runtime";
8361
+ import { Handle as Handle25, Position as Position24 } from "@xyflow/react";
8362
+ import { jsx as jsx42, jsxs as jsxs40 } from "react/jsx-runtime";
8066
8363
  var FocusModePlaceholder = ({
8067
8364
  data
8068
8365
  }) => {
8069
8366
  const { label, side } = data;
8070
- return /* @__PURE__ */ jsxs37(
8367
+ return /* @__PURE__ */ jsxs40(
8071
8368
  "div",
8072
8369
  {
8073
8370
  className: "px-4 py-4 rounded-lg border-2 border-dashed border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg)/0.5)] max-w-[280px] flex items-center justify-center",
8074
8371
  style: { opacity: 0.6, minHeight: "130px" },
8075
8372
  children: [
8076
- side === "right" && /* @__PURE__ */ jsx39(
8077
- Handle23,
8373
+ side === "right" && /* @__PURE__ */ jsx42(
8374
+ Handle25,
8078
8375
  {
8079
8376
  type: "target",
8080
- position: Position22.Left,
8377
+ position: Position24.Left,
8081
8378
  style: { visibility: "hidden" }
8082
8379
  }
8083
8380
  ),
8084
- /* @__PURE__ */ jsx39("div", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] italic", children: label }),
8085
- side === "left" && /* @__PURE__ */ jsx39(
8086
- Handle23,
8381
+ /* @__PURE__ */ jsx42("div", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] italic", children: label }),
8382
+ side === "left" && /* @__PURE__ */ jsx42(
8383
+ Handle25,
8087
8384
  {
8088
8385
  type: "source",
8089
- position: Position22.Right,
8386
+ position: Position24.Right,
8090
8387
  style: { visibility: "hidden" }
8091
8388
  }
8092
8389
  )
@@ -8097,7 +8394,7 @@ var FocusModePlaceholder = ({
8097
8394
  var FocusModePlaceholder_default = FocusModePlaceholder;
8098
8395
 
8099
8396
  // src/components/FocusMode/FocusModeContent.tsx
8100
- import { jsx as jsx40, jsxs as jsxs38 } from "react/jsx-runtime";
8397
+ import { jsx as jsx43, jsxs as jsxs41 } from "react/jsx-runtime";
8101
8398
  var HORIZONTAL_SPACING = 450;
8102
8399
  var VERTICAL_SPACING = 200;
8103
8400
  var SLIDE_DURATION = 300;
@@ -8306,14 +8603,14 @@ var FocusModeContent = ({
8306
8603
  [nodeTypes]
8307
8604
  );
8308
8605
  if (displayNodes.length === 0) {
8309
- return /* @__PURE__ */ jsx40("div", { className: "flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]", children: "Node not found" });
8606
+ return /* @__PURE__ */ jsx43("div", { className: "flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]", children: "Node not found" });
8310
8607
  }
8311
- return /* @__PURE__ */ jsx40(
8608
+ return /* @__PURE__ */ jsx43(
8312
8609
  "div",
8313
8610
  {
8314
8611
  className: "h-full w-full focus-mode-container",
8315
8612
  style: { opacity: isReady ? 1 : 0 },
8316
- children: /* @__PURE__ */ jsxs38(
8613
+ children: /* @__PURE__ */ jsxs41(
8317
8614
  ReactFlow,
8318
8615
  {
8319
8616
  nodes: displayNodes,
@@ -8333,9 +8630,9 @@ var FocusModeContent = ({
8333
8630
  minZoom: 0.3,
8334
8631
  maxZoom: 2,
8335
8632
  children: [
8336
- /* @__PURE__ */ jsx40(Background, { color: "rgb(var(--ec-page-border))", gap: 20 }),
8337
- /* @__PURE__ */ jsx40(Controls, { showInteractive: false }),
8338
- displayNodes.map((node, index) => /* @__PURE__ */ jsx40(
8633
+ /* @__PURE__ */ jsx43(Background, { color: "rgb(var(--ec-page-border))", gap: 20 }),
8634
+ /* @__PURE__ */ jsx43(Controls, { showInteractive: false }),
8635
+ displayNodes.map((node, index) => /* @__PURE__ */ jsx43(
8339
8636
  FocusModeNodeActions_default,
8340
8637
  {
8341
8638
  node,
@@ -8353,7 +8650,7 @@ var FocusModeContent = ({
8353
8650
  var FocusModeContent_default = FocusModeContent;
8354
8651
 
8355
8652
  // src/components/FocusModeModal.tsx
8356
- import { jsx as jsx41, jsxs as jsxs39 } from "react/jsx-runtime";
8653
+ import { jsx as jsx44, jsxs as jsxs42 } from "react/jsx-runtime";
8357
8654
  var FocusModeModal = ({
8358
8655
  isOpen,
8359
8656
  onClose,
@@ -8384,7 +8681,7 @@ var FocusModeModal = ({
8384
8681
  if (!centerNodeId) {
8385
8682
  return null;
8386
8683
  }
8387
- return /* @__PURE__ */ jsx41(Dialog3.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx41(Dialog3.Portal, { children: /* @__PURE__ */ jsxs39(
8684
+ return /* @__PURE__ */ jsx44(Dialog3.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx44(Dialog3.Portal, { children: /* @__PURE__ */ jsxs42(
8388
8685
  "div",
8389
8686
  {
8390
8687
  className: "eventcatalog-visualizer",
@@ -8395,7 +8692,7 @@ var FocusModeModal = ({
8395
8692
  zIndex: 99999
8396
8693
  },
8397
8694
  children: [
8398
- /* @__PURE__ */ jsx41(
8695
+ /* @__PURE__ */ jsx44(
8399
8696
  Dialog3.Overlay,
8400
8697
  {
8401
8698
  style: {
@@ -8406,7 +8703,7 @@ var FocusModeModal = ({
8406
8703
  }
8407
8704
  }
8408
8705
  ),
8409
- /* @__PURE__ */ jsxs39(
8706
+ /* @__PURE__ */ jsxs42(
8410
8707
  Dialog3.Content,
8411
8708
  {
8412
8709
  style: {
@@ -8422,7 +8719,7 @@ var FocusModeModal = ({
8422
8719
  overflow: "hidden"
8423
8720
  },
8424
8721
  children: [
8425
- /* @__PURE__ */ jsxs39(
8722
+ /* @__PURE__ */ jsxs42(
8426
8723
  "div",
8427
8724
  {
8428
8725
  style: {
@@ -8434,8 +8731,8 @@ var FocusModeModal = ({
8434
8731
  flexShrink: 0
8435
8732
  },
8436
8733
  children: [
8437
- /* @__PURE__ */ jsxs39("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
8438
- /* @__PURE__ */ jsx41(
8734
+ /* @__PURE__ */ jsxs42("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
8735
+ /* @__PURE__ */ jsx44(
8439
8736
  "div",
8440
8737
  {
8441
8738
  style: {
@@ -8447,7 +8744,7 @@ var FocusModeModal = ({
8447
8744
  borderRadius: 10,
8448
8745
  background: isDark ? "rgba(59, 130, 246, 0.18)" : "rgba(59, 130, 246, 0.12)"
8449
8746
  },
8450
- children: /* @__PURE__ */ jsx41(
8747
+ children: /* @__PURE__ */ jsx44(
8451
8748
  FocusIcon,
8452
8749
  {
8453
8750
  style: {
@@ -8459,8 +8756,8 @@ var FocusModeModal = ({
8459
8756
  )
8460
8757
  }
8461
8758
  ),
8462
- /* @__PURE__ */ jsxs39("div", { children: [
8463
- /* @__PURE__ */ jsx41(
8759
+ /* @__PURE__ */ jsxs42("div", { children: [
8760
+ /* @__PURE__ */ jsx44(
8464
8761
  Dialog3.Title,
8465
8762
  {
8466
8763
  style: {
@@ -8471,7 +8768,7 @@ var FocusModeModal = ({
8471
8768
  children: "Focus Mode"
8472
8769
  }
8473
8770
  ),
8474
- /* @__PURE__ */ jsx41(
8771
+ /* @__PURE__ */ jsx44(
8475
8772
  Dialog3.Description,
8476
8773
  {
8477
8774
  style: {
@@ -8484,7 +8781,7 @@ var FocusModeModal = ({
8484
8781
  )
8485
8782
  ] })
8486
8783
  ] }),
8487
- /* @__PURE__ */ jsx41(Dialog3.Close, { asChild: true, children: /* @__PURE__ */ jsx41(
8784
+ /* @__PURE__ */ jsx44(Dialog3.Close, { asChild: true, children: /* @__PURE__ */ jsx44(
8488
8785
  "button",
8489
8786
  {
8490
8787
  style: {
@@ -8500,13 +8797,13 @@ var FocusModeModal = ({
8500
8797
  color: isDark ? "#94a3b8" : "#64748b"
8501
8798
  },
8502
8799
  "aria-label": "Close",
8503
- children: /* @__PURE__ */ jsx41(XIcon2, { style: { width: 20, height: 20 } })
8800
+ children: /* @__PURE__ */ jsx44(XIcon2, { style: { width: 20, height: 20 } })
8504
8801
  }
8505
8802
  ) })
8506
8803
  ]
8507
8804
  }
8508
8805
  ),
8509
- /* @__PURE__ */ jsx41("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx41(ReactFlowProvider, { children: /* @__PURE__ */ jsx41(
8806
+ /* @__PURE__ */ jsx44("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx44(ReactFlowProvider, { children: /* @__PURE__ */ jsx44(
8510
8807
  FocusModeContent_default,
8511
8808
  {
8512
8809
  centerNodeId,
@@ -8810,7 +9107,7 @@ async function copyToClipboard(text) {
8810
9107
  }
8811
9108
 
8812
9109
  // src/components/MermaidView.tsx
8813
- import { jsx as jsx42, jsxs as jsxs40 } from "react/jsx-runtime";
9110
+ import { jsx as jsx45, jsxs as jsxs43 } from "react/jsx-runtime";
8814
9111
  var MermaidView = ({
8815
9112
  nodes,
8816
9113
  edges,
@@ -8920,51 +9217,51 @@ var MermaidView = ({
8920
9217
  setCopySuccess(true);
8921
9218
  setTimeout(() => setCopySuccess(false), 2e3);
8922
9219
  }, [mermaidCode]);
8923
- return /* @__PURE__ */ jsxs40(
9220
+ return /* @__PURE__ */ jsxs43(
8924
9221
  "div",
8925
9222
  {
8926
9223
  ref: containerRef,
8927
9224
  className: "absolute inset-0 bg-[rgb(var(--ec-page-bg))]",
8928
9225
  style: { animation: "fadeIn 200ms ease-out" },
8929
9226
  children: [
8930
- /* @__PURE__ */ jsx42("style", { children: `
9227
+ /* @__PURE__ */ jsx45("style", { children: `
8931
9228
  @keyframes fadeIn {
8932
9229
  from { opacity: 0; }
8933
9230
  to { opacity: 1; }
8934
9231
  }
8935
9232
  ` }),
8936
- /* @__PURE__ */ jsx42("div", { className: "absolute top-[10px] right-4 z-20", children: /* @__PURE__ */ jsxs40("div", { className: "relative group", children: [
8937
- /* @__PURE__ */ jsx42(
9233
+ /* @__PURE__ */ jsx45("div", { className: "absolute top-[10px] right-4 z-20", children: /* @__PURE__ */ jsxs43("div", { className: "relative group", children: [
9234
+ /* @__PURE__ */ jsx45(
8938
9235
  "button",
8939
9236
  {
8940
9237
  onClick: handleCopyToClipboard,
8941
9238
  className: `p-2.5 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] transition-all duration-150 ${copySuccess ? "bg-green-500 text-white scale-110" : "bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-page-border))/0.5] text-[rgb(var(--ec-icon-color))] hover:scale-105"}`,
8942
9239
  "aria-label": copySuccess ? "Copied!" : "Copy Mermaid code",
8943
- children: copySuccess ? /* @__PURE__ */ jsx42(CheckIcon2, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx42(ClipboardIcon2, { className: "h-5 w-5" })
9240
+ children: copySuccess ? /* @__PURE__ */ jsx45(CheckIcon2, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx45(ClipboardIcon2, { className: "h-5 w-5" })
8944
9241
  }
8945
9242
  ),
8946
- /* @__PURE__ */ jsx42("div", { className: "absolute top-full right-0 mt-2 px-2 py-1 bg-[rgb(var(--ec-page-text))] text-[rgb(var(--ec-page-bg))] text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50", children: copySuccess ? "Copied!" : "Copy Mermaid code" })
9243
+ /* @__PURE__ */ jsx45("div", { className: "absolute top-full right-0 mt-2 px-2 py-1 bg-[rgb(var(--ec-page-text))] text-[rgb(var(--ec-page-bg))] text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50", children: copySuccess ? "Copied!" : "Copy Mermaid code" })
8947
9244
  ] }) }),
8948
- /* @__PURE__ */ jsxs40("div", { className: "absolute inset-0 overflow-hidden", children: [
8949
- isRendering && /* @__PURE__ */ jsx42("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs40("div", { className: "relative", children: [
8950
- /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-4 opacity-40", children: [
8951
- /* @__PURE__ */ jsx42("div", { className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse" }),
8952
- /* @__PURE__ */ jsx42("div", { className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse" }),
8953
- /* @__PURE__ */ jsx42(
9245
+ /* @__PURE__ */ jsxs43("div", { className: "absolute inset-0 overflow-hidden", children: [
9246
+ isRendering && /* @__PURE__ */ jsx45("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs43("div", { className: "relative", children: [
9247
+ /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-4 opacity-40", children: [
9248
+ /* @__PURE__ */ jsx45("div", { className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse" }),
9249
+ /* @__PURE__ */ jsx45("div", { className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse" }),
9250
+ /* @__PURE__ */ jsx45(
8954
9251
  "div",
8955
9252
  {
8956
9253
  className: "w-20 h-10 bg-[rgb(var(--ec-page-border))] rounded-full animate-pulse",
8957
9254
  style: { animationDelay: "75ms" }
8958
9255
  }
8959
9256
  ),
8960
- /* @__PURE__ */ jsx42(
9257
+ /* @__PURE__ */ jsx45(
8961
9258
  "div",
8962
9259
  {
8963
9260
  className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse",
8964
9261
  style: { animationDelay: "150ms" }
8965
9262
  }
8966
9263
  ),
8967
- /* @__PURE__ */ jsx42(
9264
+ /* @__PURE__ */ jsx45(
8968
9265
  "div",
8969
9266
  {
8970
9267
  className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse",
@@ -8972,14 +9269,14 @@ var MermaidView = ({
8972
9269
  }
8973
9270
  )
8974
9271
  ] }),
8975
- /* @__PURE__ */ jsx42("p", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] mt-4", children: "Rendering diagram..." })
9272
+ /* @__PURE__ */ jsx45("p", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] mt-4", children: "Rendering diagram..." })
8976
9273
  ] }) }),
8977
- previewError && !isRendering && /* @__PURE__ */ jsxs40("div", { className: "w-full h-full flex flex-col items-center justify-center p-4", children: [
8978
- /* @__PURE__ */ jsx42("div", { className: "text-red-500 text-sm mb-2", children: "Failed to render diagram" }),
8979
- /* @__PURE__ */ jsx42("div", { className: "text-[rgb(var(--ec-page-text-muted))] text-xs font-mono bg-[rgb(var(--ec-code-bg))] p-2 rounded max-w-lg overflow-auto", children: previewError }),
8980
- /* @__PURE__ */ jsxs40("div", { className: "mt-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: [
8981
- /* @__PURE__ */ jsx42("p", { children: "You can still copy the Mermaid code and paste it into" }),
8982
- /* @__PURE__ */ jsx42(
9274
+ previewError && !isRendering && /* @__PURE__ */ jsxs43("div", { className: "w-full h-full flex flex-col items-center justify-center p-4", children: [
9275
+ /* @__PURE__ */ jsx45("div", { className: "text-red-500 text-sm mb-2", children: "Failed to render diagram" }),
9276
+ /* @__PURE__ */ jsx45("div", { className: "text-[rgb(var(--ec-page-text-muted))] text-xs font-mono bg-[rgb(var(--ec-code-bg))] p-2 rounded max-w-lg overflow-auto", children: previewError }),
9277
+ /* @__PURE__ */ jsxs43("div", { className: "mt-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: [
9278
+ /* @__PURE__ */ jsx45("p", { children: "You can still copy the Mermaid code and paste it into" }),
9279
+ /* @__PURE__ */ jsx45(
8983
9280
  "a",
8984
9281
  {
8985
9282
  href: "https://mermaid.live",
@@ -8991,7 +9288,7 @@ var MermaidView = ({
8991
9288
  )
8992
9289
  ] })
8993
9290
  ] }),
8994
- previewSvg && !isRendering && !previewError && /* @__PURE__ */ jsx42(
9291
+ previewSvg && !isRendering && !previewError && /* @__PURE__ */ jsx45(
8995
9292
  "div",
8996
9293
  {
8997
9294
  ref: svgContainerRef,
@@ -9000,15 +9297,15 @@ var MermaidView = ({
9000
9297
  }
9001
9298
  )
9002
9299
  ] }),
9003
- /* @__PURE__ */ jsx42("div", { className: "absolute bottom-4 left-4 z-20", children: /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2 bg-[rgb(var(--ec-card-bg))]/90 backdrop-blur-sm px-3 py-1.5 rounded-md shadow-sm border border-[rgb(var(--ec-page-border))]", children: [
9004
- /* @__PURE__ */ jsx42(
9300
+ /* @__PURE__ */ jsx45("div", { className: "absolute bottom-4 left-4 z-20", children: /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-2 bg-[rgb(var(--ec-card-bg))]/90 backdrop-blur-sm px-3 py-1.5 rounded-md shadow-sm border border-[rgb(var(--ec-page-border))]", children: [
9301
+ /* @__PURE__ */ jsx45(
9005
9302
  "svg",
9006
9303
  {
9007
9304
  className: "w-3.5 h-3.5 text-[rgb(var(--ec-icon-color))]",
9008
9305
  fill: "none",
9009
9306
  viewBox: "0 0 24 24",
9010
9307
  stroke: "currentColor",
9011
- children: /* @__PURE__ */ jsx42(
9308
+ children: /* @__PURE__ */ jsx45(
9012
9309
  "path",
9013
9310
  {
9014
9311
  strokeLinecap: "round",
@@ -9019,7 +9316,7 @@ var MermaidView = ({
9019
9316
  )
9020
9317
  }
9021
9318
  ),
9022
- /* @__PURE__ */ jsx42("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Scroll to zoom \xB7 Drag to pan" })
9319
+ /* @__PURE__ */ jsx45("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Scroll to zoom \xB7 Drag to pan" })
9023
9320
  ] }) })
9024
9321
  ]
9025
9322
  }
@@ -9031,7 +9328,7 @@ var MermaidView_default = MermaidView;
9031
9328
  import { useCallback as useCallback10, useMemo as useMemo18, useState as useState12, useEffect as useEffect8 } from "react";
9032
9329
 
9033
9330
  // src/utils/utils/utils.ts
9034
- import { MarkerType as MarkerType6, Position as Position23 } from "@xyflow/react";
9331
+ import { MarkerType as MarkerType6, Position as Position25 } from "@xyflow/react";
9035
9332
  import dagre from "dagre";
9036
9333
  var generateIdForNode = (node) => {
9037
9334
  return `${node.data.id}-${node.data.version}`;
@@ -9121,8 +9418,8 @@ var createEdge = (edgeOptions) => {
9121
9418
  };
9122
9419
  var createNode = (values) => {
9123
9420
  return {
9124
- sourcePosition: Position23.Right,
9125
- targetPosition: Position23.Left,
9421
+ sourcePosition: Position25.Right,
9422
+ targetPosition: Position25.Left,
9126
9423
  ...values
9127
9424
  };
9128
9425
  };
@@ -9244,7 +9541,7 @@ var useChannelVisibility = ({
9244
9541
  };
9245
9542
 
9246
9543
  // src/components/VisualizerDropdownContent.tsx
9247
- import { useState as useState13, memo as memo35 } from "react";
9544
+ import { useState as useState13, memo as memo38 } from "react";
9248
9545
  import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
9249
9546
  import {
9250
9547
  Code,
@@ -9266,13 +9563,14 @@ import {
9266
9563
  DocumentArrowDownIcon,
9267
9564
  PresentationChartLineIcon
9268
9565
  } from "@heroicons/react/24/outline";
9269
- import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs41 } from "react/jsx-runtime";
9270
- var VisualizerDropdownContent = memo35(
9566
+ import { Fragment as Fragment10, jsx as jsx46, jsxs as jsxs44 } from "react/jsx-runtime";
9567
+ var VisualizerDropdownContent = memo38(
9271
9568
  ({
9272
9569
  isMermaidView,
9273
9570
  setIsMermaidView,
9274
9571
  animateMessages,
9275
9572
  toggleAnimateMessages,
9573
+ hideAnimateMessages = false,
9276
9574
  hideChannels,
9277
9575
  toggleChannelsVisibility,
9278
9576
  hasChannels,
@@ -9316,19 +9614,19 @@ var VisualizerDropdownContent = memo35(
9316
9614
  setLayoutStatus("idle");
9317
9615
  }
9318
9616
  };
9319
- return /* @__PURE__ */ jsxs41(Fragment10, { children: [
9320
- /* @__PURE__ */ jsxs41(DropdownMenu.Sub, { children: [
9321
- /* @__PURE__ */ jsxs41(DropdownMenu.SubTrigger, { className: "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 outline-none", children: [
9322
- /* @__PURE__ */ jsx43(Grid3x3, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9323
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Canvas" }),
9324
- /* @__PURE__ */ jsx43(
9617
+ return /* @__PURE__ */ jsxs44(Fragment10, { children: [
9618
+ /* @__PURE__ */ jsxs44(DropdownMenu.Sub, { children: [
9619
+ /* @__PURE__ */ jsxs44(DropdownMenu.SubTrigger, { className: "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 outline-none", children: [
9620
+ /* @__PURE__ */ jsx46(Grid3x3, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9621
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Canvas" }),
9622
+ /* @__PURE__ */ jsx46(
9325
9623
  "svg",
9326
9624
  {
9327
9625
  className: "w-3 h-3 text-[rgb(var(--ec-page-text-muted))]",
9328
9626
  fill: "none",
9329
9627
  viewBox: "0 0 24 24",
9330
9628
  stroke: "currentColor",
9331
- children: /* @__PURE__ */ jsx43(
9629
+ children: /* @__PURE__ */ jsx46(
9332
9630
  "path",
9333
9631
  {
9334
9632
  strokeLinecap: "round",
@@ -9340,27 +9638,27 @@ var VisualizerDropdownContent = memo35(
9340
9638
  }
9341
9639
  )
9342
9640
  ] }),
9343
- /* @__PURE__ */ jsx43(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs41(
9641
+ /* @__PURE__ */ jsx46(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs44(
9344
9642
  DropdownMenu.SubContent,
9345
9643
  {
9346
9644
  className: "min-w-[200px] bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-xl border border-[rgb(var(--ec-page-border))] py-1.5 z-[60]",
9347
9645
  sideOffset: 8,
9348
9646
  alignOffset: -8,
9349
9647
  children: [
9350
- /* @__PURE__ */ jsxs41(
9648
+ /* @__PURE__ */ jsxs44(
9351
9649
  DropdownMenu.CheckboxItem,
9352
9650
  {
9353
9651
  checked: isMermaidView,
9354
9652
  onCheckedChange: setIsMermaidView,
9355
9653
  className: "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",
9356
9654
  children: [
9357
- /* @__PURE__ */ jsx43(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9358
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Render as mermaid" }),
9359
- /* @__PURE__ */ jsx43(
9655
+ /* @__PURE__ */ jsx46(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9656
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Render as mermaid" }),
9657
+ /* @__PURE__ */ jsx46(
9360
9658
  "div",
9361
9659
  {
9362
9660
  className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${isMermaidView ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
9363
- children: /* @__PURE__ */ jsx43(
9661
+ children: /* @__PURE__ */ jsx46(
9364
9662
  "div",
9365
9663
  {
9366
9664
  className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${isMermaidView ? "left-3.5" : "left-0.5"}`
@@ -9371,45 +9669,47 @@ var VisualizerDropdownContent = memo35(
9371
9669
  ]
9372
9670
  }
9373
9671
  ),
9374
- /* @__PURE__ */ jsx43(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
9375
- /* @__PURE__ */ jsxs41(
9376
- DropdownMenu.CheckboxItem,
9377
- {
9378
- checked: animateMessages,
9379
- onCheckedChange: toggleAnimateMessages,
9380
- className: "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",
9381
- children: [
9382
- /* @__PURE__ */ jsx43(Zap5, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9383
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Simulate Messages" }),
9384
- /* @__PURE__ */ jsx43(
9385
- "div",
9386
- {
9387
- className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${animateMessages ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
9388
- children: /* @__PURE__ */ jsx43(
9389
- "div",
9390
- {
9391
- className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${animateMessages ? "left-3.5" : "left-0.5"}`
9392
- }
9393
- )
9394
- }
9395
- )
9396
- ]
9397
- }
9398
- ),
9399
- hasChannels && /* @__PURE__ */ jsxs41(
9672
+ !hideAnimateMessages && /* @__PURE__ */ jsxs44(Fragment10, { children: [
9673
+ /* @__PURE__ */ jsx46(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
9674
+ /* @__PURE__ */ jsxs44(
9675
+ DropdownMenu.CheckboxItem,
9676
+ {
9677
+ checked: animateMessages,
9678
+ onCheckedChange: toggleAnimateMessages,
9679
+ className: "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",
9680
+ children: [
9681
+ /* @__PURE__ */ jsx46(Zap5, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9682
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Simulate Messages" }),
9683
+ /* @__PURE__ */ jsx46(
9684
+ "div",
9685
+ {
9686
+ className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${animateMessages ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
9687
+ children: /* @__PURE__ */ jsx46(
9688
+ "div",
9689
+ {
9690
+ className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${animateMessages ? "left-3.5" : "left-0.5"}`
9691
+ }
9692
+ )
9693
+ }
9694
+ )
9695
+ ]
9696
+ }
9697
+ )
9698
+ ] }),
9699
+ hasChannels && /* @__PURE__ */ jsxs44(
9400
9700
  DropdownMenu.CheckboxItem,
9401
9701
  {
9402
9702
  checked: hideChannels,
9403
9703
  onCheckedChange: toggleChannelsVisibility,
9404
9704
  className: "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",
9405
9705
  children: [
9406
- /* @__PURE__ */ jsx43(EyeOff, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9407
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Hide channels" }),
9408
- /* @__PURE__ */ jsx43(
9706
+ /* @__PURE__ */ jsx46(EyeOff, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9707
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Hide channels" }),
9708
+ /* @__PURE__ */ jsx46(
9409
9709
  "div",
9410
9710
  {
9411
9711
  className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${hideChannels ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
9412
- children: /* @__PURE__ */ jsx43(
9712
+ children: /* @__PURE__ */ jsx46(
9413
9713
  "div",
9414
9714
  {
9415
9715
  className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${hideChannels ? "left-3.5" : "left-0.5"}`
@@ -9420,20 +9720,20 @@ var VisualizerDropdownContent = memo35(
9420
9720
  ]
9421
9721
  }
9422
9722
  ),
9423
- /* @__PURE__ */ jsxs41(
9723
+ /* @__PURE__ */ jsxs44(
9424
9724
  DropdownMenu.CheckboxItem,
9425
9725
  {
9426
9726
  checked: showMinimap,
9427
9727
  onCheckedChange: setShowMinimap,
9428
9728
  className: "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",
9429
9729
  children: [
9430
- /* @__PURE__ */ jsx43(Map2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9431
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Show minimap" }),
9432
- /* @__PURE__ */ jsx43(
9730
+ /* @__PURE__ */ jsx46(Map2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9731
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Show minimap" }),
9732
+ /* @__PURE__ */ jsx46(
9433
9733
  "div",
9434
9734
  {
9435
9735
  className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${showMinimap ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
9436
- children: /* @__PURE__ */ jsx43(
9736
+ children: /* @__PURE__ */ jsx46(
9437
9737
  "div",
9438
9738
  {
9439
9739
  className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${showMinimap ? "left-3.5" : "left-0.5"}`
@@ -9444,19 +9744,19 @@ var VisualizerDropdownContent = memo35(
9444
9744
  ]
9445
9745
  }
9446
9746
  ),
9447
- /* @__PURE__ */ jsx43(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
9448
- /* @__PURE__ */ jsxs41(
9747
+ /* @__PURE__ */ jsx46(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
9748
+ /* @__PURE__ */ jsxs44(
9449
9749
  DropdownMenu.Item,
9450
9750
  {
9451
9751
  onClick: handleFitView,
9452
9752
  className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
9453
9753
  children: [
9454
- /* @__PURE__ */ jsx43(Maximize23, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9455
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Fit to view" })
9754
+ /* @__PURE__ */ jsx46(Maximize23, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9755
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Fit to view" })
9456
9756
  ]
9457
9757
  }
9458
9758
  ),
9459
- /* @__PURE__ */ jsxs41(
9759
+ /* @__PURE__ */ jsxs44(
9460
9760
  DropdownMenu.Item,
9461
9761
  {
9462
9762
  onClick: () => {
@@ -9470,8 +9770,8 @@ var VisualizerDropdownContent = memo35(
9470
9770
  },
9471
9771
  className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
9472
9772
  children: [
9473
- /* @__PURE__ */ jsx43(Search2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9474
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Find on canvas" })
9773
+ /* @__PURE__ */ jsx46(Search2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9774
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Find on canvas" })
9475
9775
  ]
9476
9776
  }
9477
9777
  )
@@ -9479,14 +9779,14 @@ var VisualizerDropdownContent = memo35(
9479
9779
  }
9480
9780
  ) })
9481
9781
  ] }),
9482
- notesCount > 0 && onOpenNotes && /* @__PURE__ */ jsxs41(
9782
+ notesCount > 0 && onOpenNotes && /* @__PURE__ */ jsxs44(
9483
9783
  DropdownMenu.Item,
9484
9784
  {
9485
9785
  onClick: onOpenNotes,
9486
9786
  className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
9487
9787
  children: [
9488
- /* @__PURE__ */ jsx43(MessageCircle2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9489
- /* @__PURE__ */ jsxs41("span", { className: "flex-1 font-normal", children: [
9788
+ /* @__PURE__ */ jsx46(MessageCircle2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9789
+ /* @__PURE__ */ jsxs44("span", { className: "flex-1 font-normal", children: [
9490
9790
  "View notes (",
9491
9791
  notesCount,
9492
9792
  ")"
@@ -9494,19 +9794,19 @@ var VisualizerDropdownContent = memo35(
9494
9794
  ]
9495
9795
  }
9496
9796
  ),
9497
- isDevMode && onSaveLayout && /* @__PURE__ */ jsxs41(DropdownMenu.Sub, { children: [
9498
- /* @__PURE__ */ jsxs41(DropdownMenu.SubTrigger, { className: "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 outline-none", children: [
9499
- /* @__PURE__ */ jsx43(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9500
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Layout" }),
9501
- /* @__PURE__ */ jsx43("span", { className: "text-[10px] text-amber-600 font-medium", children: "DEV" }),
9502
- /* @__PURE__ */ jsx43(
9797
+ isDevMode && onSaveLayout && /* @__PURE__ */ jsxs44(DropdownMenu.Sub, { children: [
9798
+ /* @__PURE__ */ jsxs44(DropdownMenu.SubTrigger, { className: "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 outline-none", children: [
9799
+ /* @__PURE__ */ jsx46(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9800
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Layout" }),
9801
+ /* @__PURE__ */ jsx46("span", { className: "text-[10px] text-amber-600 font-medium", children: "DEV" }),
9802
+ /* @__PURE__ */ jsx46(
9503
9803
  "svg",
9504
9804
  {
9505
9805
  className: "w-3 h-3 text-[rgb(var(--ec-page-text-muted))]",
9506
9806
  fill: "none",
9507
9807
  viewBox: "0 0 24 24",
9508
9808
  stroke: "currentColor",
9509
- children: /* @__PURE__ */ jsx43(
9809
+ children: /* @__PURE__ */ jsx46(
9510
9810
  "path",
9511
9811
  {
9512
9812
  strokeLinecap: "round",
@@ -9518,34 +9818,34 @@ var VisualizerDropdownContent = memo35(
9518
9818
  }
9519
9819
  )
9520
9820
  ] }),
9521
- /* @__PURE__ */ jsx43(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs41(
9821
+ /* @__PURE__ */ jsx46(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs44(
9522
9822
  DropdownMenu.SubContent,
9523
9823
  {
9524
9824
  className: "min-w-[180px] bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-xl border border-[rgb(var(--ec-page-border))] py-1.5 z-[60]",
9525
9825
  sideOffset: 8,
9526
9826
  alignOffset: -8,
9527
9827
  children: [
9528
- /* @__PURE__ */ jsxs41(
9828
+ /* @__PURE__ */ jsxs44(
9529
9829
  DropdownMenu.Item,
9530
9830
  {
9531
9831
  onClick: handleSaveLayout,
9532
9832
  disabled: layoutStatus !== "idle",
9533
9833
  className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
9534
9834
  children: [
9535
- layoutStatus === "saving" ? /* @__PURE__ */ jsx43(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx43(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9536
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: layoutStatus === "saving" ? "Saving..." : "Save Layout" })
9835
+ layoutStatus === "saving" ? /* @__PURE__ */ jsx46(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx46(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9836
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: layoutStatus === "saving" ? "Saving..." : "Save Layout" })
9537
9837
  ]
9538
9838
  }
9539
9839
  ),
9540
- /* @__PURE__ */ jsxs41(
9840
+ /* @__PURE__ */ jsxs44(
9541
9841
  DropdownMenu.Item,
9542
9842
  {
9543
9843
  onClick: handleResetLayout,
9544
9844
  disabled: layoutStatus !== "idle",
9545
9845
  className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
9546
9846
  children: [
9547
- layoutStatus === "resetting" ? /* @__PURE__ */ jsx43(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx43(RotateCcw, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9548
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: layoutStatus === "resetting" ? "Resetting..." : "Reset Layout" })
9847
+ layoutStatus === "resetting" ? /* @__PURE__ */ jsx46(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx46(RotateCcw, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9848
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: layoutStatus === "resetting" ? "Resetting..." : "Reset Layout" })
9549
9849
  ]
9550
9850
  }
9551
9851
  )
@@ -9553,75 +9853,75 @@ var VisualizerDropdownContent = memo35(
9553
9853
  }
9554
9854
  ) })
9555
9855
  ] }),
9556
- isChatEnabled && /* @__PURE__ */ jsxs41(Fragment10, { children: [
9557
- /* @__PURE__ */ jsx43(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
9558
- /* @__PURE__ */ jsxs41(
9856
+ isChatEnabled && /* @__PURE__ */ jsxs44(Fragment10, { children: [
9857
+ /* @__PURE__ */ jsx46(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
9858
+ /* @__PURE__ */ jsxs44(
9559
9859
  DropdownMenu.Item,
9560
9860
  {
9561
9861
  onClick: openChat,
9562
9862
  className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
9563
9863
  children: [
9564
- /* @__PURE__ */ jsx43(Sparkles, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9565
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Ask a question" })
9864
+ /* @__PURE__ */ jsx46(Sparkles, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9865
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Ask a question" })
9566
9866
  ]
9567
9867
  }
9568
9868
  )
9569
9869
  ] }),
9570
- /* @__PURE__ */ jsx43(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
9571
- /* @__PURE__ */ jsxs41(
9870
+ /* @__PURE__ */ jsx46(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
9871
+ /* @__PURE__ */ jsxs44(
9572
9872
  DropdownMenu.Item,
9573
9873
  {
9574
9874
  onClick: handleCopyArchitectureCode,
9575
9875
  className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
9576
9876
  children: [
9577
- /* @__PURE__ */ jsx43(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9578
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Copy as mermaid" })
9877
+ /* @__PURE__ */ jsx46(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9878
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Copy as mermaid" })
9579
9879
  ]
9580
9880
  }
9581
9881
  ),
9582
- /* @__PURE__ */ jsxs41(
9882
+ /* @__PURE__ */ jsxs44(
9583
9883
  DropdownMenu.Item,
9584
9884
  {
9585
9885
  onClick: handleExportVisual,
9586
9886
  className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
9587
9887
  children: [
9588
- /* @__PURE__ */ jsx43(DocumentArrowDownIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9589
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Export image" })
9888
+ /* @__PURE__ */ jsx46(DocumentArrowDownIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9889
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Export image" })
9590
9890
  ]
9591
9891
  }
9592
9892
  ),
9593
- /* @__PURE__ */ jsxs41(
9893
+ /* @__PURE__ */ jsxs44(
9594
9894
  DropdownMenu.Item,
9595
9895
  {
9596
9896
  onClick: () => setIsShareModalOpen(true),
9597
9897
  className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
9598
9898
  children: [
9599
- /* @__PURE__ */ jsx43(Share2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9600
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Share Link" })
9899
+ /* @__PURE__ */ jsx46(Share2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9900
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Share Link" })
9601
9901
  ]
9602
9902
  }
9603
9903
  ),
9604
- /* @__PURE__ */ jsx43(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
9605
- /* @__PURE__ */ jsxs41(
9904
+ /* @__PURE__ */ jsx46(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
9905
+ /* @__PURE__ */ jsxs44(
9606
9906
  DropdownMenu.Item,
9607
9907
  {
9608
9908
  onClick: toggleFullScreen,
9609
9909
  className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
9610
9910
  children: [
9611
- /* @__PURE__ */ jsx43(PresentationChartLineIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9612
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Start Presentation" })
9911
+ /* @__PURE__ */ jsx46(PresentationChartLineIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9912
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Start Presentation" })
9613
9913
  ]
9614
9914
  }
9615
9915
  ),
9616
- /* @__PURE__ */ jsx43(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
9617
- /* @__PURE__ */ jsxs41(
9916
+ /* @__PURE__ */ jsx46(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
9917
+ /* @__PURE__ */ jsxs44(
9618
9918
  DropdownMenu.Item,
9619
9919
  {
9620
9920
  onClick: openStudioModal,
9621
9921
  className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
9622
9922
  children: [
9623
- /* @__PURE__ */ jsx43(ExternalLink, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9624
- /* @__PURE__ */ jsx43("span", { className: "flex-1 font-normal", children: "Open in EventCatalog Studio" })
9923
+ /* @__PURE__ */ jsx46(ExternalLink, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
9924
+ /* @__PURE__ */ jsx46("span", { className: "flex-1 font-normal", children: "Open in EventCatalog Studio" })
9625
9925
  ]
9626
9926
  }
9627
9927
  )
@@ -9632,30 +9932,30 @@ VisualizerDropdownContent.displayName = "VisualizerDropdownContent";
9632
9932
  var VisualizerDropdownContent_default = VisualizerDropdownContent;
9633
9933
 
9634
9934
  // src/components/NodeContextMenu.tsx
9635
- import { memo as memo36 } from "react";
9935
+ import { memo as memo39 } from "react";
9636
9936
  import * as ContextMenu5 from "@radix-ui/react-context-menu";
9637
- import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs42 } from "react/jsx-runtime";
9638
- var NodeContextMenu_default = memo36(function NodeContextMenu({
9937
+ import { Fragment as Fragment11, jsx as jsx47, jsxs as jsxs45 } from "react/jsx-runtime";
9938
+ var NodeContextMenu_default = memo39(function NodeContextMenu({
9639
9939
  items,
9640
9940
  children
9641
9941
  }) {
9642
9942
  const portalContainer = usePortalContainer();
9643
- if (!items || items.length === 0) return /* @__PURE__ */ jsx44(Fragment11, { children });
9644
- return /* @__PURE__ */ jsxs42(ContextMenu5.Root, { children: [
9645
- /* @__PURE__ */ jsx44(ContextMenu5.Trigger, { children }),
9646
- /* @__PURE__ */ jsx44(ContextMenu5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx44(
9943
+ if (!items || items.length === 0) return /* @__PURE__ */ jsx47(Fragment11, { children });
9944
+ return /* @__PURE__ */ jsxs45(ContextMenu5.Root, { children: [
9945
+ /* @__PURE__ */ jsx47(ContextMenu5.Trigger, { children }),
9946
+ /* @__PURE__ */ jsx47(ContextMenu5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx47(
9647
9947
  ContextMenu5.Content,
9648
9948
  {
9649
9949
  className: "min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200 z-50",
9650
9950
  onClick: (e) => e.stopPropagation(),
9651
- children: items.map((item, index) => /* @__PURE__ */ jsxs42("div", { children: [
9652
- item.separator && index > 0 && /* @__PURE__ */ jsx44(ContextMenu5.Separator, { className: "h-[1px] bg-gray-200 m-1" }),
9653
- /* @__PURE__ */ jsx44(
9951
+ children: items.map((item, index) => /* @__PURE__ */ jsxs45("div", { children: [
9952
+ item.separator && index > 0 && /* @__PURE__ */ jsx47(ContextMenu5.Separator, { className: "h-[1px] bg-gray-200 m-1" }),
9953
+ /* @__PURE__ */ jsx47(
9654
9954
  ContextMenu5.Item,
9655
9955
  {
9656
9956
  asChild: true,
9657
9957
  className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center text-gray-900 hover:text-gray-900 visited:text-gray-900 no-underline hover:no-underline visited:no-underline",
9658
- children: /* @__PURE__ */ jsx44(
9958
+ children: /* @__PURE__ */ jsx47(
9659
9959
  "a",
9660
9960
  {
9661
9961
  href: item.href,
@@ -10314,7 +10614,7 @@ import {
10314
10614
  X,
10315
10615
  Locate,
10316
10616
  ChevronRight,
10317
- ServerIcon as ServerIcon2,
10617
+ ServerIcon as ServerIcon3,
10318
10618
  Bot as Bot3,
10319
10619
  Zap as Zap6,
10320
10620
  MessageSquare as MessageSquare3,
@@ -10323,16 +10623,16 @@ import {
10323
10623
  Database as Database6,
10324
10624
  Package as Package2,
10325
10625
  Globe as Globe5,
10326
- User as User4,
10626
+ User as User5,
10327
10627
  MonitorIcon as MonitorIcon2,
10328
10628
  BoxesIcon as BoxesIcon2
10329
10629
  } from "lucide-react";
10330
10630
  import { useReactFlow as useReactFlow4 } from "@xyflow/react";
10331
10631
  import * as Dialog4 from "@radix-ui/react-dialog";
10332
- import { Fragment as Fragment12, jsx as jsx45, jsxs as jsxs43 } from "react/jsx-runtime";
10632
+ import { Fragment as Fragment12, jsx as jsx48, jsxs as jsxs46 } from "react/jsx-runtime";
10333
10633
  var NODE_TYPE_META = {
10334
- service: { icon: ServerIcon2, color: "#ec4899", label: "Service" },
10335
- services: { icon: ServerIcon2, color: "#ec4899", label: "Service" },
10634
+ service: { icon: ServerIcon3, color: "#ec4899", label: "Service" },
10635
+ services: { icon: ServerIcon3, color: "#ec4899", label: "Service" },
10336
10636
  agent: { icon: Bot3, color: "#0ea5e9", label: "Agent" },
10337
10637
  agents: { icon: Bot3, color: "#0ea5e9", label: "Agent" },
10338
10638
  event: { icon: Zap6, color: "#f97316", label: "Event" },
@@ -10346,7 +10646,7 @@ var NODE_TYPE_META = {
10346
10646
  data: { icon: Database6, color: "#3b82f6", label: "Data" },
10347
10647
  "data-products": { icon: Package2, color: "#6366f1", label: "Data Product" },
10348
10648
  externalSystem: { icon: Globe5, color: "#ec4899", label: "External System" },
10349
- actor: { icon: User4, color: "#eab308", label: "Actor" },
10649
+ actor: { icon: User5, color: "#eab308", label: "Actor" },
10350
10650
  view: { icon: MonitorIcon2, color: "#8b5cf6", label: "View" },
10351
10651
  domain: { icon: BoxesIcon2, color: "#14b8a6", label: "Domain" },
10352
10652
  domains: { icon: BoxesIcon2, color: "#14b8a6", label: "Domain" }
@@ -10437,7 +10737,7 @@ function hashStr2(s) {
10437
10737
  function Avatar2({ name, size = 28 }) {
10438
10738
  const initials = name.split(/\s+/).map((w) => w[0]).join("").toUpperCase().slice(0, 2);
10439
10739
  const [c1, c2] = AVATAR_PALETTES2[hashStr2(name) % AVATAR_PALETTES2.length];
10440
- return /* @__PURE__ */ jsx45(
10740
+ return /* @__PURE__ */ jsx48(
10441
10741
  "div",
10442
10742
  {
10443
10743
  style: {
@@ -10450,7 +10750,7 @@ function Avatar2({ name, size = 28 }) {
10450
10750
  justifyContent: "center",
10451
10751
  flexShrink: 0
10452
10752
  },
10453
- children: /* @__PURE__ */ jsx45(
10753
+ children: /* @__PURE__ */ jsx48(
10454
10754
  "span",
10455
10755
  {
10456
10756
  style: {
@@ -10469,7 +10769,7 @@ function PriorityBadge({ priority }) {
10469
10769
  const p = PRIORITY2[priority.toLowerCase()];
10470
10770
  if (!p) return null;
10471
10771
  const isUrgent = priority === "high" || priority === "critical";
10472
- return /* @__PURE__ */ jsxs43(
10772
+ return /* @__PURE__ */ jsxs46(
10473
10773
  "span",
10474
10774
  {
10475
10775
  style: {
@@ -10488,7 +10788,7 @@ function PriorityBadge({ priority }) {
10488
10788
  lineHeight: 1.4
10489
10789
  },
10490
10790
  children: [
10491
- isUrgent && /* @__PURE__ */ jsx45(AlertTriangle2, { style: { width: 9, height: 9 }, strokeWidth: 2.5 }),
10791
+ isUrgent && /* @__PURE__ */ jsx48(AlertTriangle2, { style: { width: 9, height: 9 }, strokeWidth: 2.5 }),
10492
10792
  p.label
10493
10793
  ]
10494
10794
  }
@@ -10496,7 +10796,7 @@ function PriorityBadge({ priority }) {
10496
10796
  }
10497
10797
  function NoteCard2({ note, index }) {
10498
10798
  const prioStyle = note.priority ? PRIORITY2[note.priority.toLowerCase()] : null;
10499
- return /* @__PURE__ */ jsxs43(
10799
+ return /* @__PURE__ */ jsxs46(
10500
10800
  "div",
10501
10801
  {
10502
10802
  style: {
@@ -10508,7 +10808,7 @@ function NoteCard2({ note, index }) {
10508
10808
  boxShadow: "0 1px 3px rgba(0,0,0,0.04)"
10509
10809
  },
10510
10810
  children: [
10511
- prioStyle && /* @__PURE__ */ jsx45(
10811
+ prioStyle && /* @__PURE__ */ jsx48(
10512
10812
  "div",
10513
10813
  {
10514
10814
  style: {
@@ -10522,7 +10822,7 @@ function NoteCard2({ note, index }) {
10522
10822
  }
10523
10823
  }
10524
10824
  ),
10525
- /* @__PURE__ */ jsxs43(
10825
+ /* @__PURE__ */ jsxs46(
10526
10826
  "div",
10527
10827
  {
10528
10828
  style: {
@@ -10532,7 +10832,7 @@ function NoteCard2({ note, index }) {
10532
10832
  marginBottom: 8
10533
10833
  },
10534
10834
  children: [
10535
- note.author ? /* @__PURE__ */ jsx45(Avatar2, { name: note.author, size: 24 }) : /* @__PURE__ */ jsx45(
10835
+ note.author ? /* @__PURE__ */ jsx48(Avatar2, { name: note.author, size: 24 }) : /* @__PURE__ */ jsx48(
10536
10836
  "div",
10537
10837
  {
10538
10838
  style: {
@@ -10546,10 +10846,10 @@ function NoteCard2({ note, index }) {
10546
10846
  justifyContent: "center",
10547
10847
  flexShrink: 0
10548
10848
  },
10549
- children: /* @__PURE__ */ jsx45("span", { style: { fontSize: 10, fontWeight: 700, color: AMBER2[700] }, children: index + 1 })
10849
+ children: /* @__PURE__ */ jsx48("span", { style: { fontSize: 10, fontWeight: 700, color: AMBER2[700] }, children: index + 1 })
10550
10850
  }
10551
10851
  ),
10552
- /* @__PURE__ */ jsx45("div", { style: { flex: 1, minWidth: 0 }, children: note.author && /* @__PURE__ */ jsx45(
10852
+ /* @__PURE__ */ jsx48("div", { style: { flex: 1, minWidth: 0 }, children: note.author && /* @__PURE__ */ jsx48(
10553
10853
  "span",
10554
10854
  {
10555
10855
  style: {
@@ -10561,11 +10861,11 @@ function NoteCard2({ note, index }) {
10561
10861
  children: note.author
10562
10862
  }
10563
10863
  ) }),
10564
- note.priority && /* @__PURE__ */ jsx45(PriorityBadge, { priority: note.priority })
10864
+ note.priority && /* @__PURE__ */ jsx48(PriorityBadge, { priority: note.priority })
10565
10865
  ]
10566
10866
  }
10567
10867
  ),
10568
- /* @__PURE__ */ jsx45(
10868
+ /* @__PURE__ */ jsx48(
10569
10869
  "p",
10570
10870
  {
10571
10871
  style: {
@@ -10609,7 +10909,7 @@ function AllNotesModal({
10609
10909
  [nodes, setCenter, getZoom, onClose]
10610
10910
  );
10611
10911
  if (totalNotes === 0) return null;
10612
- return /* @__PURE__ */ jsx45(
10912
+ return /* @__PURE__ */ jsx48(
10613
10913
  Dialog4.Root,
10614
10914
  {
10615
10915
  open: isOpen,
@@ -10619,13 +10919,13 @@ function AllNotesModal({
10619
10919
  setSelectedIdx(0);
10620
10920
  }
10621
10921
  },
10622
- children: /* @__PURE__ */ jsx45(Dialog4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs43(
10922
+ children: /* @__PURE__ */ jsx48(Dialog4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs46(
10623
10923
  "div",
10624
10924
  {
10625
10925
  className: "fixed inset-0 z-[99999]",
10626
10926
  style: { isolation: "isolate" },
10627
10927
  children: [
10628
- /* @__PURE__ */ jsx45(
10928
+ /* @__PURE__ */ jsx48(
10629
10929
  Dialog4.Overlay,
10630
10930
  {
10631
10931
  style: {
@@ -10636,7 +10936,7 @@ function AllNotesModal({
10636
10936
  }
10637
10937
  }
10638
10938
  ),
10639
- /* @__PURE__ */ jsxs43(
10939
+ /* @__PURE__ */ jsxs46(
10640
10940
  Dialog4.Content,
10641
10941
  {
10642
10942
  style: {
@@ -10657,7 +10957,7 @@ function AllNotesModal({
10657
10957
  outline: "none"
10658
10958
  },
10659
10959
  children: [
10660
- /* @__PURE__ */ jsxs43(
10960
+ /* @__PURE__ */ jsxs46(
10661
10961
  "div",
10662
10962
  {
10663
10963
  style: {
@@ -10669,7 +10969,7 @@ function AllNotesModal({
10669
10969
  flexShrink: 0
10670
10970
  },
10671
10971
  children: [
10672
- /* @__PURE__ */ jsx45(
10972
+ /* @__PURE__ */ jsx48(
10673
10973
  "div",
10674
10974
  {
10675
10975
  style: {
@@ -10682,7 +10982,7 @@ function AllNotesModal({
10682
10982
  justifyContent: "center",
10683
10983
  flexShrink: 0
10684
10984
  },
10685
- children: /* @__PURE__ */ jsx45(
10985
+ children: /* @__PURE__ */ jsx48(
10686
10986
  MessageCircle3,
10687
10987
  {
10688
10988
  style: { width: 16, height: 16, color: "#64748b" },
@@ -10691,8 +10991,8 @@ function AllNotesModal({
10691
10991
  )
10692
10992
  }
10693
10993
  ),
10694
- /* @__PURE__ */ jsxs43("div", { style: { flex: 1, minWidth: 0 }, children: [
10695
- /* @__PURE__ */ jsx45(
10994
+ /* @__PURE__ */ jsxs46("div", { style: { flex: 1, minWidth: 0 }, children: [
10995
+ /* @__PURE__ */ jsx48(
10696
10996
  Dialog4.Title,
10697
10997
  {
10698
10998
  style: {
@@ -10705,7 +11005,7 @@ function AllNotesModal({
10705
11005
  children: "Notes"
10706
11006
  }
10707
11007
  ),
10708
- /* @__PURE__ */ jsxs43(
11008
+ /* @__PURE__ */ jsxs46(
10709
11009
  Dialog4.Description,
10710
11010
  {
10711
11011
  style: {
@@ -10727,7 +11027,7 @@ function AllNotesModal({
10727
11027
  }
10728
11028
  )
10729
11029
  ] }),
10730
- /* @__PURE__ */ jsx45(Dialog4.Close, { asChild: true, children: /* @__PURE__ */ jsx45(
11030
+ /* @__PURE__ */ jsx48(Dialog4.Close, { asChild: true, children: /* @__PURE__ */ jsx48(
10731
11031
  "button",
10732
11032
  {
10733
11033
  style: {
@@ -10744,14 +11044,14 @@ function AllNotesModal({
10744
11044
  flexShrink: 0
10745
11045
  },
10746
11046
  "aria-label": "Close",
10747
- children: /* @__PURE__ */ jsx45(X, { style: { width: 15, height: 15 } })
11047
+ children: /* @__PURE__ */ jsx48(X, { style: { width: 15, height: 15 } })
10748
11048
  }
10749
11049
  ) })
10750
11050
  ]
10751
11051
  }
10752
11052
  ),
10753
- /* @__PURE__ */ jsxs43("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
10754
- /* @__PURE__ */ jsx45(
11053
+ /* @__PURE__ */ jsxs46("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
11054
+ /* @__PURE__ */ jsx48(
10755
11055
  "div",
10756
11056
  {
10757
11057
  style: {
@@ -10766,7 +11066,7 @@ function AllNotesModal({
10766
11066
  const meta = getNodeMeta(group.nodeType);
10767
11067
  const IconComp = meta?.icon || MessageCircle3;
10768
11068
  const iconColor = meta?.color || "#64748b";
10769
- return /* @__PURE__ */ jsxs43(
11069
+ return /* @__PURE__ */ jsxs46(
10770
11070
  "button",
10771
11071
  {
10772
11072
  onClick: () => setSelectedIdx(i),
@@ -10785,7 +11085,7 @@ function AllNotesModal({
10785
11085
  transition: "background 0.1s"
10786
11086
  },
10787
11087
  children: [
10788
- /* @__PURE__ */ jsx45(
11088
+ /* @__PURE__ */ jsx48(
10789
11089
  "div",
10790
11090
  {
10791
11091
  style: {
@@ -10799,7 +11099,7 @@ function AllNotesModal({
10799
11099
  flexShrink: 0,
10800
11100
  transition: "background 0.15s"
10801
11101
  },
10802
- children: /* @__PURE__ */ jsx45(
11102
+ children: /* @__PURE__ */ jsx48(
10803
11103
  IconComp,
10804
11104
  {
10805
11105
  style: {
@@ -10813,8 +11113,8 @@ function AllNotesModal({
10813
11113
  )
10814
11114
  }
10815
11115
  ),
10816
- /* @__PURE__ */ jsxs43("div", { style: { flex: 1, minWidth: 0 }, children: [
10817
- /* @__PURE__ */ jsx45(
11116
+ /* @__PURE__ */ jsxs46("div", { style: { flex: 1, minWidth: 0 }, children: [
11117
+ /* @__PURE__ */ jsx48(
10818
11118
  "div",
10819
11119
  {
10820
11120
  style: {
@@ -10829,7 +11129,7 @@ function AllNotesModal({
10829
11129
  children: group.name
10830
11130
  }
10831
11131
  ),
10832
- /* @__PURE__ */ jsxs43(
11132
+ /* @__PURE__ */ jsxs46(
10833
11133
  "div",
10834
11134
  {
10835
11135
  style: {
@@ -10852,7 +11152,7 @@ function AllNotesModal({
10852
11152
  }
10853
11153
  )
10854
11154
  ] }),
10855
- /* @__PURE__ */ jsx45(
11155
+ /* @__PURE__ */ jsx48(
10856
11156
  ChevronRight,
10857
11157
  {
10858
11158
  style: {
@@ -10871,7 +11171,7 @@ function AllNotesModal({
10871
11171
  })
10872
11172
  }
10873
11173
  ),
10874
- /* @__PURE__ */ jsx45(
11174
+ /* @__PURE__ */ jsx48(
10875
11175
  "div",
10876
11176
  {
10877
11177
  style: {
@@ -10880,8 +11180,8 @@ function AllNotesModal({
10880
11180
  display: "flex",
10881
11181
  flexDirection: "column"
10882
11182
  },
10883
- children: selected && /* @__PURE__ */ jsxs43(Fragment12, { children: [
10884
- /* @__PURE__ */ jsxs43(
11183
+ children: selected && /* @__PURE__ */ jsxs46(Fragment12, { children: [
11184
+ /* @__PURE__ */ jsxs46(
10885
11185
  "div",
10886
11186
  {
10887
11187
  style: {
@@ -10894,7 +11194,7 @@ function AllNotesModal({
10894
11194
  background: "#fafbfc"
10895
11195
  },
10896
11196
  children: [
10897
- /* @__PURE__ */ jsxs43(
11197
+ /* @__PURE__ */ jsxs46(
10898
11198
  "div",
10899
11199
  {
10900
11200
  style: {
@@ -10907,7 +11207,7 @@ function AllNotesModal({
10907
11207
  const meta = getNodeMeta(selected.nodeType);
10908
11208
  const Icon = meta?.icon || MessageCircle3;
10909
11209
  const color = meta?.color || "#64748b";
10910
- return /* @__PURE__ */ jsx45(
11210
+ return /* @__PURE__ */ jsx48(
10911
11211
  "div",
10912
11212
  {
10913
11213
  style: {
@@ -10920,7 +11220,7 @@ function AllNotesModal({
10920
11220
  justifyContent: "center",
10921
11221
  flexShrink: 0
10922
11222
  },
10923
- children: /* @__PURE__ */ jsx45(
11223
+ children: /* @__PURE__ */ jsx48(
10924
11224
  Icon,
10925
11225
  {
10926
11226
  style: {
@@ -10934,8 +11234,8 @@ function AllNotesModal({
10934
11234
  }
10935
11235
  );
10936
11236
  })(),
10937
- /* @__PURE__ */ jsxs43("div", { children: [
10938
- /* @__PURE__ */ jsx45(
11237
+ /* @__PURE__ */ jsxs46("div", { children: [
11238
+ /* @__PURE__ */ jsx48(
10939
11239
  "div",
10940
11240
  {
10941
11241
  style: {
@@ -10947,7 +11247,7 @@ function AllNotesModal({
10947
11247
  children: selected.name
10948
11248
  }
10949
11249
  ),
10950
- /* @__PURE__ */ jsxs43(
11250
+ /* @__PURE__ */ jsxs46(
10951
11251
  "div",
10952
11252
  {
10953
11253
  style: {
@@ -10969,7 +11269,7 @@ function AllNotesModal({
10969
11269
  ]
10970
11270
  }
10971
11271
  ),
10972
- /* @__PURE__ */ jsxs43(
11272
+ /* @__PURE__ */ jsxs46(
10973
11273
  "button",
10974
11274
  {
10975
11275
  onClick: () => handleNavigate(selected.nodeId),
@@ -10996,7 +11296,7 @@ function AllNotesModal({
10996
11296
  e.currentTarget.style.color = "#475569";
10997
11297
  },
10998
11298
  children: [
10999
- /* @__PURE__ */ jsx45(Locate, { style: { width: 12, height: 12 } }),
11299
+ /* @__PURE__ */ jsx48(Locate, { style: { width: 12, height: 12 } }),
11000
11300
  "Find on canvas"
11001
11301
  ]
11002
11302
  }
@@ -11004,7 +11304,7 @@ function AllNotesModal({
11004
11304
  ]
11005
11305
  }
11006
11306
  ),
11007
- /* @__PURE__ */ jsx45(
11307
+ /* @__PURE__ */ jsx48(
11008
11308
  "div",
11009
11309
  {
11010
11310
  style: {
@@ -11015,7 +11315,7 @@ function AllNotesModal({
11015
11315
  flexDirection: "column",
11016
11316
  gap: 10
11017
11317
  },
11018
- children: selected.notes.map((note, i) => /* @__PURE__ */ jsx45(NoteCard2, { note, index: i }, i))
11318
+ children: selected.notes.map((note, i) => /* @__PURE__ */ jsx48(NoteCard2, { note, index: i }, i))
11019
11319
  }
11020
11320
  )
11021
11321
  ] })
@@ -11034,7 +11334,7 @@ function AllNotesModal({
11034
11334
 
11035
11335
  // src/components/NodeGraph.tsx
11036
11336
  import dagre3 from "dagre";
11037
- import { Fragment as Fragment13, jsx as jsx46, jsxs as jsxs44 } from "react/jsx-runtime";
11337
+ import { Fragment as Fragment13, jsx as jsx49, jsxs as jsxs47 } from "react/jsx-runtime";
11038
11338
  var POSITION_CHANGE_THRESHOLD = 1;
11039
11339
  var LARGE_GRAPH_NODE_THRESHOLD = 30;
11040
11340
  var NODE_ORIGIN = [0.1, 0.1];
@@ -11054,34 +11354,69 @@ var EXPANDED_WRAPPER_TYPES = /* @__PURE__ */ new Set([
11054
11354
  "messageGroupExpanded"
11055
11355
  ]);
11056
11356
  var isExpandedWrapper = (type) => type != null && EXPANDED_WRAPPER_TYPES.has(type);
11057
- var LegendPanel = memo37(function LegendPanel2({
11357
+ var LEGEND_LABELS = {
11358
+ "context-actor": "Actors"
11359
+ };
11360
+ var getLegendLabel = (key) => LEGEND_LABELS[key] ?? key;
11361
+ var LEGEND_ICONS = {
11362
+ events: { Icon: Zap7, colorClass: "text-orange-600" },
11363
+ agent: { Icon: Bot4, colorClass: "text-sky-600" },
11364
+ agents: { Icon: Bot4, colorClass: "text-sky-600" },
11365
+ agentTool: { Icon: Wrench3, colorClass: "text-violet-600" },
11366
+ "agent-tool": { Icon: Wrench3, colorClass: "text-violet-600" },
11367
+ services: { Icon: ServerIcon4, colorClass: "text-pink-600" },
11368
+ flows: { Icon: Workflow3, colorClass: "text-teal-600" },
11369
+ commands: { Icon: MessageSquare4, colorClass: "text-blue-600" },
11370
+ queries: { Icon: SearchIcon2, colorClass: "text-green-600" },
11371
+ channels: { Icon: ArrowLeftRight, colorClass: "text-gray-600" },
11372
+ externalSystem: { Icon: Globe6, colorClass: "text-pink-600" },
11373
+ systems: { Icon: GroupIcon3, colorClass: "text-purple-600" },
11374
+ system: { Icon: GroupIcon3, colorClass: "text-purple-600" },
11375
+ actor: { Icon: User6, colorClass: "text-yellow-500" },
11376
+ "context-actor": { Icon: User6, colorClass: "text-yellow-500" },
11377
+ data: { Icon: Database7, colorClass: "text-blue-600" },
11378
+ "data-products": { Icon: Boxes, colorClass: "text-indigo-600" },
11379
+ field: { Icon: Box, colorClass: "text-cyan-600" }
11380
+ };
11381
+ var getLegendIcon = (key) => LEGEND_ICONS[key];
11382
+ var LegendPanel = memo40(function LegendPanel2({
11058
11383
  legend,
11059
11384
  showMinimap,
11060
11385
  onLegendClick
11061
11386
  }) {
11062
- return /* @__PURE__ */ jsx46(
11387
+ return /* @__PURE__ */ jsx49(
11063
11388
  Panel,
11064
11389
  {
11065
11390
  position: "bottom-right",
11066
11391
  style: showMinimap ? LEGEND_PANEL_STYLE_WITH_MINIMAP : void 0,
11067
- children: /* @__PURE__ */ jsx46("div", { className: "bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] font-light px-4 text-[12px] shadow-md py-1 rounded-md", children: /* @__PURE__ */ jsx46("ul", { className: "m-0 p-0 ", children: Object.entries(legend).map(
11068
- ([key, { count, colorClass, groupId }]) => /* @__PURE__ */ jsxs44(
11069
- "li",
11070
- {
11071
- className: "flex space-x-2 items-center text-[10px] cursor-pointer text-[rgb(var(--ec-page-text))] hover:text-[rgb(var(--ec-accent))] hover:underline",
11072
- onClick: () => onLegendClick(key, groupId),
11073
- children: [
11074
- /* @__PURE__ */ jsx46("span", { className: `w-2 h-2 block ${colorClass}` }),
11075
- /* @__PURE__ */ jsxs44("span", { className: "block capitalize", children: [
11076
- key,
11077
- " (",
11078
- count,
11079
- ")"
11080
- ] })
11081
- ]
11082
- },
11083
- key
11084
- )
11392
+ children: /* @__PURE__ */ jsx49("div", { className: "bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] font-light px-4 text-[12px] shadow-md py-1 rounded-md", children: /* @__PURE__ */ jsx49("ul", { className: "m-0 p-0 ", children: Object.entries(legend).map(
11393
+ ([key, { count, colorClass, groupId }]) => {
11394
+ const legendIcon = getLegendIcon(key);
11395
+ return /* @__PURE__ */ jsxs47(
11396
+ "li",
11397
+ {
11398
+ className: "flex space-x-2 items-center text-[10px] cursor-pointer text-[rgb(var(--ec-page-text))] hover:text-[rgb(var(--ec-accent))] hover:underline",
11399
+ onClick: () => onLegendClick(key, groupId),
11400
+ children: [
11401
+ legendIcon ? /* @__PURE__ */ jsx49(
11402
+ legendIcon.Icon,
11403
+ {
11404
+ className: `w-3 h-3 shrink-0 ${legendIcon.colorClass}`,
11405
+ strokeWidth: 2,
11406
+ "aria-hidden": "true"
11407
+ }
11408
+ ) : /* @__PURE__ */ jsx49("span", { className: `w-2 h-2 block ${colorClass}` }),
11409
+ /* @__PURE__ */ jsxs47("span", { className: "block capitalize", children: [
11410
+ getLegendLabel(key),
11411
+ " (",
11412
+ count,
11413
+ ")"
11414
+ ] })
11415
+ ]
11416
+ },
11417
+ key
11418
+ );
11419
+ }
11085
11420
  ) }) })
11086
11421
  }
11087
11422
  );
@@ -11178,6 +11513,7 @@ var NodeGraphBuilder = ({
11178
11513
  isDevMode = false,
11179
11514
  resourceKey,
11180
11515
  animated,
11516
+ disableMessageAnimation = false,
11181
11517
  focusNodeId,
11182
11518
  focusRequestId,
11183
11519
  fitRequestId,
@@ -11194,10 +11530,10 @@ var NodeGraphBuilder = ({
11194
11530
  }, []);
11195
11531
  const nodeTypes = useMemo19(() => {
11196
11532
  const wrapWithContextMenu = (Component) => {
11197
- const Wrapped = memo37((props) => {
11533
+ const Wrapped = memo40((props) => {
11198
11534
  const items = props.data?.contextMenu;
11199
- if (!items?.length) return /* @__PURE__ */ jsx46(Component, { ...props });
11200
- return /* @__PURE__ */ jsx46(NodeContextMenu_default, { items, children: /* @__PURE__ */ jsx46(Component, { ...props }) });
11535
+ if (!items?.length) return /* @__PURE__ */ jsx49(Component, { ...props });
11536
+ return /* @__PURE__ */ jsx49(NodeContextMenu_default, { items, children: /* @__PURE__ */ jsx49(Component, { ...props }) });
11201
11537
  });
11202
11538
  Wrapped.displayName = `WithContextMenu(${Component.displayName || Component.name || "Component"})`;
11203
11539
  return Wrapped;
@@ -11221,6 +11557,8 @@ var NodeGraphBuilder = ({
11221
11557
  commands: wrapWithContextMenu(CommandNode_default),
11222
11558
  domain: wrapWithContextMenu(Domain_default),
11223
11559
  domains: wrapWithContextMenu(Domain_default),
11560
+ system: wrapWithContextMenu(System_default),
11561
+ systems: wrapWithContextMenu(System_default),
11224
11562
  step: Step_default,
11225
11563
  user: User_default,
11226
11564
  custom: Custom_default,
@@ -11231,11 +11569,13 @@ var NodeGraphBuilder = ({
11231
11569
  data: wrapWithContextMenu(DataNode_default),
11232
11570
  view: wrapWithContextMenu(ViewNode_default),
11233
11571
  actor: ActorNode_default,
11572
+ "context-actor": ContextActor_default,
11234
11573
  container: wrapWithContextMenu(DataNode_default),
11235
11574
  "data-product": wrapWithContextMenu(DataProduct_default),
11236
11575
  "data-products": wrapWithContextMenu(DataProduct_default),
11237
11576
  group: GroupNode_default,
11238
- note: memo37((props) => /* @__PURE__ */ jsx46(NoteNode_default, { ...props, readOnly: true })),
11577
+ "system-group": SystemGroupNode_default,
11578
+ note: memo40((props) => /* @__PURE__ */ jsx49(NoteNode_default, { ...props, readOnly: true })),
11239
11579
  field: wrapWithContextMenu(FieldNode_default),
11240
11580
  messageGroup: MessageGroupNode_default,
11241
11581
  messageGroupExpanded: MessageGroupExpandedNode_default,
@@ -11709,6 +12049,9 @@ var NodeGraphBuilder = ({
11709
12049
  const isExpandableFlow = (node.type === "flows" || node.type === "flow") && Array.isArray(node.data?.expandedNodes) && node.data.expandedNodes.length > 0;
11710
12050
  if ((isFlow || isEntityVisualizer) && !isExpandableFlow) return;
11711
12051
  if (node.type === "domain" || node.type === "domains") return;
12052
+ if (node.type === "system" || node.type === "systems") return;
12053
+ if (node.type === "context-actor") return;
12054
+ if (node.type === "system-group") return;
11712
12055
  if (isExpandedWrapper(node.type)) return;
11713
12056
  if (node.type === "messageGroup") {
11714
12057
  const groupData = node.data;
@@ -12104,6 +12447,10 @@ var NodeGraphBuilder = ({
12104
12447
  fitView({ duration: 400, padding: 0.2 });
12105
12448
  }, [fitView]);
12106
12449
  useEffect9(() => {
12450
+ if (disableMessageAnimation) {
12451
+ setAnimateMessages(false);
12452
+ return;
12453
+ }
12107
12454
  if (animated !== void 0) {
12108
12455
  setAnimateMessages(animated);
12109
12456
  return;
@@ -12124,7 +12471,7 @@ var NodeGraphBuilder = ({
12124
12471
  setAnimateMessages(initialNodes.length <= LARGE_GRAPH_NODE_THRESHOLD);
12125
12472
  }
12126
12473
  }
12127
- }, [animated, initialNodes.length]);
12474
+ }, [animated, disableMessageAnimation, initialNodes.length]);
12128
12475
  useEffect9(() => {
12129
12476
  setEdges(
12130
12477
  (eds) => eds.map((edge) => {
@@ -12371,7 +12718,10 @@ var NodeGraphBuilder = ({
12371
12718
  queries: "bg-green-600",
12372
12719
  channels: "bg-gray-600",
12373
12720
  externalSystem: "bg-pink-600",
12721
+ systems: "bg-purple-600",
12722
+ system: "bg-purple-600",
12374
12723
  actor: "bg-yellow-500",
12724
+ "context-actor": "bg-yellow-500",
12375
12725
  step: "bg-gray-700",
12376
12726
  data: "bg-blue-600",
12377
12727
  "data-products": "bg-indigo-600",
@@ -12534,7 +12884,7 @@ var NodeGraphBuilder = ({
12534
12884
  const isCompactMenuButton = !title;
12535
12885
  const menuButtonClassName = isCompactMenuButton ? "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" : "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";
12536
12886
  const menuIconClassName = isCompactMenuButton ? "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" : "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";
12537
- return /* @__PURE__ */ jsx46(
12887
+ return /* @__PURE__ */ jsx49(
12538
12888
  "div",
12539
12889
  {
12540
12890
  ref: reactFlowWrapperRef,
@@ -12546,22 +12896,22 @@ var NodeGraphBuilder = ({
12546
12896
  display: "flex",
12547
12897
  flexDirection: "column"
12548
12898
  },
12549
- children: /* @__PURE__ */ jsxs44(PortalContainerProvider, { value: reactFlowWrapperRef.current, children: [
12550
- isMermaidView ? /* @__PURE__ */ jsxs44(Fragment13, { children: [
12551
- /* @__PURE__ */ jsxs44("div", { className: "w-full pr-6 flex space-x-2 justify-between items-center bg-[rgb(var(--ec-page-bg))] border-b border-[rgb(var(--ec-page-border))] p-4", children: [
12552
- /* @__PURE__ */ jsx46("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs44(DropdownMenu2.Root, { children: [
12553
- /* @__PURE__ */ jsx46(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs44(
12899
+ children: /* @__PURE__ */ jsxs47(PortalContainerProvider, { value: reactFlowWrapperRef.current, children: [
12900
+ isMermaidView ? /* @__PURE__ */ jsxs47(Fragment13, { children: [
12901
+ /* @__PURE__ */ jsxs47("div", { className: "w-full pr-6 flex space-x-2 justify-between items-center bg-[rgb(var(--ec-page-bg))] border-b border-[rgb(var(--ec-page-border))] p-4", children: [
12902
+ /* @__PURE__ */ jsx49("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs47(DropdownMenu2.Root, { children: [
12903
+ /* @__PURE__ */ jsx49(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs47(
12554
12904
  "button",
12555
12905
  {
12556
12906
  className: menuButtonClassName,
12557
12907
  "aria-label": "Open menu",
12558
12908
  children: [
12559
- title && /* @__PURE__ */ jsx46("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
12560
- /* @__PURE__ */ jsx46(MoreVertical, { className: menuIconClassName })
12909
+ title && /* @__PURE__ */ jsx49("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
12910
+ /* @__PURE__ */ jsx49(MoreVertical, { className: menuIconClassName })
12561
12911
  ]
12562
12912
  }
12563
12913
  ) }),
12564
- /* @__PURE__ */ jsx46(DropdownMenu2.Portal, { container: reactFlowWrapperRef.current, children: /* @__PURE__ */ jsxs44(
12914
+ /* @__PURE__ */ jsx49(DropdownMenu2.Portal, { container: reactFlowWrapperRef.current, children: /* @__PURE__ */ jsxs47(
12565
12915
  DropdownMenu2.Content,
12566
12916
  {
12567
12917
  className: "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 animate-in fade-in zoom-in-95 duration-200",
@@ -12569,14 +12919,15 @@ var NodeGraphBuilder = ({
12569
12919
  align: "end",
12570
12920
  alignOffset: -180,
12571
12921
  children: [
12572
- /* @__PURE__ */ jsx46(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
12573
- /* @__PURE__ */ jsx46(
12922
+ /* @__PURE__ */ jsx49(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
12923
+ /* @__PURE__ */ jsx49(
12574
12924
  VisualizerDropdownContent_default,
12575
12925
  {
12576
12926
  isMermaidView,
12577
12927
  setIsMermaidView,
12578
12928
  animateMessages,
12579
12929
  toggleAnimateMessages,
12930
+ hideAnimateMessages: disableMessageAnimation,
12580
12931
  hideChannels,
12581
12932
  toggleChannelsVisibility,
12582
12933
  hasChannels,
@@ -12600,7 +12951,7 @@ var NodeGraphBuilder = ({
12600
12951
  }
12601
12952
  ) })
12602
12953
  ] }) }),
12603
- mode === "full" && showSearch && /* @__PURE__ */ jsx46("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx46("div", { className: "w-96", children: /* @__PURE__ */ jsx46(
12954
+ mode === "full" && showSearch && /* @__PURE__ */ jsx49("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx49("div", { className: "w-96", children: /* @__PURE__ */ jsx49(
12604
12955
  VisualiserSearch_default,
12605
12956
  {
12606
12957
  ref: searchRef,
@@ -12610,7 +12961,7 @@ var NodeGraphBuilder = ({
12610
12961
  }
12611
12962
  ) }) })
12612
12963
  ] }),
12613
- /* @__PURE__ */ jsx46("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ jsx46(
12964
+ /* @__PURE__ */ jsx49("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ jsx49(
12614
12965
  MermaidView_default,
12615
12966
  {
12616
12967
  nodes,
@@ -12618,7 +12969,7 @@ var NodeGraphBuilder = ({
12618
12969
  maxTextSize
12619
12970
  }
12620
12971
  ) })
12621
- ] }) : /* @__PURE__ */ jsxs44(
12972
+ ] }) : /* @__PURE__ */ jsxs47(
12622
12973
  ReactFlow2,
12623
12974
  {
12624
12975
  nodeTypes,
@@ -12644,30 +12995,30 @@ var NodeGraphBuilder = ({
12644
12995
  zoomOnScroll,
12645
12996
  className: "relative",
12646
12997
  children: [
12647
- /* @__PURE__ */ jsxs44(
12998
+ /* @__PURE__ */ jsxs47(
12648
12999
  Panel,
12649
13000
  {
12650
13001
  position: "top-center",
12651
13002
  className: "w-full pr-6 pointer-events-none",
12652
13003
  children: [
12653
- /* @__PURE__ */ jsxs44("div", { className: "flex space-x-2 justify-between items-center pointer-events-auto", children: [
12654
- /* @__PURE__ */ jsx46("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs44(DropdownMenu2.Root, { children: [
12655
- /* @__PURE__ */ jsx46(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs44(
13004
+ /* @__PURE__ */ jsxs47("div", { className: "flex space-x-2 justify-between items-center pointer-events-auto", children: [
13005
+ /* @__PURE__ */ jsx49("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs47(DropdownMenu2.Root, { children: [
13006
+ /* @__PURE__ */ jsx49(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs47(
12656
13007
  "button",
12657
13008
  {
12658
13009
  className: menuButtonClassName,
12659
13010
  "aria-label": "Open menu",
12660
13011
  children: [
12661
- title && /* @__PURE__ */ jsx46("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
12662
- /* @__PURE__ */ jsx46(MoreVertical, { className: menuIconClassName })
13012
+ title && /* @__PURE__ */ jsx49("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
13013
+ /* @__PURE__ */ jsx49(MoreVertical, { className: menuIconClassName })
12663
13014
  ]
12664
13015
  }
12665
13016
  ) }),
12666
- /* @__PURE__ */ jsx46(
13017
+ /* @__PURE__ */ jsx49(
12667
13018
  DropdownMenu2.Portal,
12668
13019
  {
12669
13020
  container: reactFlowWrapperRef.current,
12670
- children: /* @__PURE__ */ jsxs44(
13021
+ children: /* @__PURE__ */ jsxs47(
12671
13022
  DropdownMenu2.Content,
12672
13023
  {
12673
13024
  className: "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 animate-in fade-in zoom-in-95 duration-200",
@@ -12675,14 +13026,15 @@ var NodeGraphBuilder = ({
12675
13026
  align: "end",
12676
13027
  alignOffset: -180,
12677
13028
  children: [
12678
- /* @__PURE__ */ jsx46(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
12679
- /* @__PURE__ */ jsx46(
13029
+ /* @__PURE__ */ jsx49(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
13030
+ /* @__PURE__ */ jsx49(
12680
13031
  VisualizerDropdownContent_default,
12681
13032
  {
12682
13033
  isMermaidView,
12683
13034
  setIsMermaidView,
12684
13035
  animateMessages,
12685
13036
  toggleAnimateMessages,
13037
+ hideAnimateMessages: disableMessageAnimation,
12686
13038
  hideChannels,
12687
13039
  toggleChannelsVisibility,
12688
13040
  hasChannels,
@@ -12710,7 +13062,7 @@ var NodeGraphBuilder = ({
12710
13062
  }
12711
13063
  )
12712
13064
  ] }) }),
12713
- mode === "full" && showSearch && /* @__PURE__ */ jsx46("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx46("div", { className: "w-96", children: /* @__PURE__ */ jsx46(
13065
+ mode === "full" && showSearch && /* @__PURE__ */ jsx49("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx49("div", { className: "w-96", children: /* @__PURE__ */ jsx49(
12714
13066
  VisualiserSearch_default,
12715
13067
  {
12716
13068
  ref: searchRef,
@@ -12720,9 +13072,9 @@ var NodeGraphBuilder = ({
12720
13072
  }
12721
13073
  ) }) })
12722
13074
  ] }),
12723
- links.length > 0 && /* @__PURE__ */ jsx46("div", { className: "flex justify-end mt-3", children: /* @__PURE__ */ jsxs44("div", { className: "relative flex items-center -mt-1", children: [
12724
- /* @__PURE__ */ jsx46("span", { className: "absolute left-2 pointer-events-none flex items-center h-full", children: /* @__PURE__ */ jsx46(HistoryIcon, { className: "h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" }) }),
12725
- /* @__PURE__ */ jsx46(
13075
+ links.length > 0 && /* @__PURE__ */ jsx49("div", { className: "flex justify-end mt-3", children: /* @__PURE__ */ jsxs47("div", { className: "relative flex items-center -mt-1", children: [
13076
+ /* @__PURE__ */ jsx49("span", { className: "absolute left-2 pointer-events-none flex items-center h-full", children: /* @__PURE__ */ jsx49(HistoryIcon, { className: "h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" }) }),
13077
+ /* @__PURE__ */ jsx49(
12726
13078
  "select",
12727
13079
  {
12728
13080
  value: links.find(
@@ -12737,10 +13089,10 @@ var NodeGraphBuilder = ({
12737
13089
  },
12738
13090
  className: "appearance-none pl-7 pr-6 py-0 text-[14px] bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] rounded-md border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.5)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))]",
12739
13091
  style: { minWidth: 120, height: "26px" },
12740
- children: links.map((link) => /* @__PURE__ */ jsx46("option", { value: link.url, children: link.label }, link.url))
13092
+ children: links.map((link) => /* @__PURE__ */ jsx49("option", { value: link.url, children: link.label }, link.url))
12741
13093
  }
12742
13094
  ),
12743
- /* @__PURE__ */ jsx46("span", { className: "absolute right-2 pointer-events-none", children: /* @__PURE__ */ jsx46(
13095
+ /* @__PURE__ */ jsx49("span", { className: "absolute right-2 pointer-events-none", children: /* @__PURE__ */ jsx49(
12744
13096
  "svg",
12745
13097
  {
12746
13098
  className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]",
@@ -12748,7 +13100,7 @@ var NodeGraphBuilder = ({
12748
13100
  stroke: "currentColor",
12749
13101
  strokeWidth: "2",
12750
13102
  viewBox: "0 0 24 24",
12751
- children: /* @__PURE__ */ jsx46(
13103
+ children: /* @__PURE__ */ jsx49(
12752
13104
  "path",
12753
13105
  {
12754
13106
  strokeLinecap: "round",
@@ -12762,9 +13114,9 @@ var NodeGraphBuilder = ({
12762
13114
  ]
12763
13115
  }
12764
13116
  ),
12765
- includeBackground && /* @__PURE__ */ jsx46(Background2, { color: "var(--ec-bg-dots)", gap: 16 }),
12766
- includeBackground && /* @__PURE__ */ jsx46(Controls2, {}),
12767
- showMinimap && /* @__PURE__ */ jsx46(
13117
+ includeBackground && /* @__PURE__ */ jsx49(Background2, { color: "var(--ec-bg-dots)", gap: 16 }),
13118
+ includeBackground && /* @__PURE__ */ jsx49(Controls2, {}),
13119
+ showMinimap && /* @__PURE__ */ jsx49(
12768
13120
  MiniMap,
12769
13121
  {
12770
13122
  nodeStrokeWidth: 3,
@@ -12773,7 +13125,7 @@ var NodeGraphBuilder = ({
12773
13125
  style: MINIMAP_STYLE
12774
13126
  }
12775
13127
  ),
12776
- isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ jsx46(Panel, { position: "bottom-left", children: /* @__PURE__ */ jsx46(
13128
+ isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ jsx49(Panel, { position: "bottom-left", children: /* @__PURE__ */ jsx49(
12777
13129
  StepWalkthrough_default,
12778
13130
  {
12779
13131
  nodes: walkthroughNodes,
@@ -12783,14 +13135,14 @@ var NodeGraphBuilder = ({
12783
13135
  mode
12784
13136
  }
12785
13137
  ) }),
12786
- isDevMode && hasLayoutChanges && /* @__PURE__ */ jsx46(
13138
+ isDevMode && hasLayoutChanges && /* @__PURE__ */ jsx49(
12787
13139
  Panel,
12788
13140
  {
12789
13141
  position: "bottom-left",
12790
13142
  style: isFlowVisualization && showFlowWalkthrough ? LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH : LAYOUT_CHANGE_PANEL_STYLE_DEFAULT,
12791
- children: /* @__PURE__ */ jsxs44("div", { className: "bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md px-3 py-2 flex items-center gap-3", children: [
12792
- /* @__PURE__ */ jsx46("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Layout changed" }),
12793
- /* @__PURE__ */ jsx46(
13143
+ children: /* @__PURE__ */ jsxs47("div", { className: "bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md px-3 py-2 flex items-center gap-3", children: [
13144
+ /* @__PURE__ */ jsx49("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Layout changed" }),
13145
+ /* @__PURE__ */ jsx49(
12794
13146
  "button",
12795
13147
  {
12796
13148
  onClick: handleQuickSaveLayout,
@@ -12802,7 +13154,7 @@ var NodeGraphBuilder = ({
12802
13154
  ] })
12803
13155
  }
12804
13156
  ),
12805
- includeKey && /* @__PURE__ */ jsx46(
13157
+ includeKey && /* @__PURE__ */ jsx49(
12806
13158
  LegendPanel,
12807
13159
  {
12808
13160
  legend,
@@ -12813,14 +13165,14 @@ var NodeGraphBuilder = ({
12813
13165
  ]
12814
13166
  }
12815
13167
  ),
12816
- /* @__PURE__ */ jsx46(
13168
+ /* @__PURE__ */ jsx49(
12817
13169
  StudioModal_default,
12818
13170
  {
12819
13171
  isOpen: isStudioModalOpen || false,
12820
13172
  onClose: () => setIsStudioModalOpen(false)
12821
13173
  }
12822
13174
  ),
12823
- /* @__PURE__ */ jsx46(
13175
+ /* @__PURE__ */ jsx49(
12824
13176
  FocusModeModal_default,
12825
13177
  {
12826
13178
  isOpen: focusModeOpen,
@@ -12834,7 +13186,7 @@ var NodeGraphBuilder = ({
12834
13186
  edgeTypes: edgeTypes2
12835
13187
  }
12836
13188
  ),
12837
- /* @__PURE__ */ jsx46(
13189
+ /* @__PURE__ */ jsx49(
12838
13190
  AllNotesModal,
12839
13191
  {
12840
13192
  noteGroups: allNoteGroups,
@@ -12843,8 +13195,8 @@ var NodeGraphBuilder = ({
12843
13195
  nodes
12844
13196
  }
12845
13197
  ),
12846
- isShareModalOpen && /* @__PURE__ */ jsxs44(Fragment13, { children: [
12847
- /* @__PURE__ */ jsx46(
13198
+ isShareModalOpen && /* @__PURE__ */ jsxs47(Fragment13, { children: [
13199
+ /* @__PURE__ */ jsx49(
12848
13200
  "div",
12849
13201
  {
12850
13202
  className: "fixed inset-0 bg-black/20 z-40",
@@ -12852,13 +13204,13 @@ var NodeGraphBuilder = ({
12852
13204
  style: { animation: "fadeIn 150ms ease-out" }
12853
13205
  }
12854
13206
  ),
12855
- /* @__PURE__ */ jsxs44(
13207
+ /* @__PURE__ */ jsxs47(
12856
13208
  "div",
12857
13209
  {
12858
13210
  className: "fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[rgb(var(--ec-page-bg))] rounded-lg shadow-xl z-50 w-full max-w-md p-6 border border-[rgb(var(--ec-page-border))]",
12859
13211
  style: { animation: "slideInCenter 250ms ease-out" },
12860
13212
  children: [
12861
- /* @__PURE__ */ jsx46("style", { children: `
13213
+ /* @__PURE__ */ jsx49("style", { children: `
12862
13214
  @keyframes fadeIn {
12863
13215
  from { opacity: 0; }
12864
13216
  to { opacity: 1; }
@@ -12868,21 +13220,21 @@ var NodeGraphBuilder = ({
12868
13220
  to { opacity: 1; transform: translate(-50%, -50%); }
12869
13221
  }
12870
13222
  ` }),
12871
- /* @__PURE__ */ jsxs44("div", { className: "flex justify-between items-start mb-4", children: [
12872
- /* @__PURE__ */ jsx46("h3", { className: "text-lg font-semibold text-[rgb(var(--ec-page-text))]", children: "Share Link" }),
12873
- /* @__PURE__ */ jsx46(
13223
+ /* @__PURE__ */ jsxs47("div", { className: "flex justify-between items-start mb-4", children: [
13224
+ /* @__PURE__ */ jsx49("h3", { className: "text-lg font-semibold text-[rgb(var(--ec-page-text))]", children: "Share Link" }),
13225
+ /* @__PURE__ */ jsx49(
12874
13226
  "button",
12875
13227
  {
12876
13228
  onClick: () => setIsShareModalOpen(false),
12877
13229
  className: "text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] transition-colors",
12878
13230
  "aria-label": "Close modal",
12879
- children: /* @__PURE__ */ jsx46(ExternalLink2, { className: "w-5 h-5 rotate-180" })
13231
+ children: /* @__PURE__ */ jsx49(ExternalLink2, { className: "w-5 h-5 rotate-180" })
12880
13232
  }
12881
13233
  )
12882
13234
  ] }),
12883
- /* @__PURE__ */ jsx46("p", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] mb-4", children: "Share this link with your team to let them view this visualization." }),
12884
- /* @__PURE__ */ jsxs44("div", { className: "flex gap-2", children: [
12885
- /* @__PURE__ */ jsx46(
13235
+ /* @__PURE__ */ jsx49("p", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] mb-4", children: "Share this link with your team to let them view this visualization." }),
13236
+ /* @__PURE__ */ jsxs47("div", { className: "flex gap-2", children: [
13237
+ /* @__PURE__ */ jsx49(
12886
13238
  "input",
12887
13239
  {
12888
13240
  type: "text",
@@ -12891,15 +13243,15 @@ var NodeGraphBuilder = ({
12891
13243
  className: "flex-1 px-3 py-2.5 bg-[rgb(var(--ec-input-bg))] border border-[rgb(var(--ec-input-border))] rounded-md text-[rgb(var(--ec-input-text))] text-sm focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
12892
13244
  }
12893
13245
  ),
12894
- /* @__PURE__ */ jsxs44(
13246
+ /* @__PURE__ */ jsxs47(
12895
13247
  "button",
12896
13248
  {
12897
13249
  onClick: handleCopyShareUrl,
12898
13250
  className: `px-4 py-2.5 rounded-md font-medium transition-all duration-200 flex items-center gap-2 ${shareUrlCopySuccess ? "bg-green-500 text-white" : "bg-[rgb(var(--ec-accent))] text-white hover:opacity-90"}`,
12899
13251
  "aria-label": shareUrlCopySuccess ? "Copied!" : "Copy link",
12900
13252
  children: [
12901
- shareUrlCopySuccess ? /* @__PURE__ */ jsx46(CheckIcon3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx46(ClipboardIcon3, { className: "w-4 h-4" }),
12902
- /* @__PURE__ */ jsx46("span", { children: shareUrlCopySuccess ? "Copied!" : "Copy" })
13253
+ shareUrlCopySuccess ? /* @__PURE__ */ jsx49(CheckIcon3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx49(ClipboardIcon3, { className: "w-4 h-4" }),
13254
+ /* @__PURE__ */ jsx49("span", { children: shareUrlCopySuccess ? "Copied!" : "Copy" })
12903
13255
  ]
12904
13256
  }
12905
13257
  )
@@ -12978,9 +13330,9 @@ var NodeGraph = ({
12978
13330
  }
12979
13331
  }, []);
12980
13332
  if (!elem) return null;
12981
- return /* @__PURE__ */ jsx46("div", { children: createPortal(
12982
- /* @__PURE__ */ jsxs44(ReactFlowProvider2, { children: [
12983
- /* @__PURE__ */ jsx46(
13333
+ return /* @__PURE__ */ jsx49("div", { children: createPortal(
13334
+ /* @__PURE__ */ jsxs47(ReactFlowProvider2, { children: [
13335
+ /* @__PURE__ */ jsx49(
12984
13336
  NodeGraphBuilder,
12985
13337
  {
12986
13338
  edges,
@@ -13012,11 +13364,11 @@ var NodeGraph = ({
13012
13364
  onResetLayout
13013
13365
  }
13014
13366
  ),
13015
- showFooter && /* @__PURE__ */ jsxs44("div", { className: "flex justify-between", id: "visualiser-footer", children: [
13016
- footerLabel && /* @__PURE__ */ jsx46("div", { className: "py-2 w-full text-left ", children: /* @__PURE__ */ jsx46("span", { className: " text-sm no-underline py-2 text-[rgb(var(--ec-page-text-muted))]", children: footerLabel }) }),
13017
- href && /* @__PURE__ */ jsxs44("div", { className: "py-2 w-full text-right flex justify-between", children: [
13018
- /* @__PURE__ */ jsx46("span", {}),
13019
- /* @__PURE__ */ jsxs44(
13367
+ showFooter && /* @__PURE__ */ jsxs47("div", { className: "flex justify-between", id: "visualiser-footer", children: [
13368
+ footerLabel && /* @__PURE__ */ jsx49("div", { className: "py-2 w-full text-left ", children: /* @__PURE__ */ jsx49("span", { className: " text-sm no-underline py-2 text-[rgb(var(--ec-page-text-muted))]", children: footerLabel }) }),
13369
+ href && /* @__PURE__ */ jsxs47("div", { className: "py-2 w-full text-right flex justify-between", children: [
13370
+ /* @__PURE__ */ jsx49("span", {}),
13371
+ /* @__PURE__ */ jsxs47(
13020
13372
  "a",
13021
13373
  {
13022
13374
  className: " text-sm underline text-[rgb(var(--ec-page-text))] hover:text-[rgb(var(--ec-accent))]",
@@ -13054,6 +13406,9 @@ var nodeComponents = {
13054
13406
  // Core nodes are available via individual imports
13055
13407
  custom: Custom_default,
13056
13408
  domain: Domain_default,
13409
+ system: System_default,
13410
+ "context-actor": ContextActor_default,
13411
+ "system-group": SystemGroupNode_default,
13057
13412
  entity: Entity_default,
13058
13413
  flow: Flow_default,
13059
13414
  flowExpanded: FlowExpandedNode_default,
@@ -13091,6 +13446,7 @@ export {
13091
13446
  COMMAND,
13092
13447
  ChannelNode_default as Channel,
13093
13448
  CommandNode_default as Command,
13449
+ ContextActor_default as ContextActorNode,
13094
13450
  Custom_default as CustomNode,
13095
13451
  DATA,
13096
13452
  DataNode_default as Data,
@@ -13123,6 +13479,8 @@ export {
13123
13479
  ServiceNode_default as Service,
13124
13480
  Step_default as StepNode,
13125
13481
  StepWalkthrough_default as StepWalkthrough,
13482
+ SystemGroupNode_default as SystemGroupNode,
13483
+ System_default as SystemNode,
13126
13484
  User_default as UserNode,
13127
13485
  VIEW,
13128
13486
  ViewNode_default as View,