@eventcatalog/visualiser 3.15.4 → 3.16.1

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.
package/dist/index.mjs CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  useState as useState14,
6
6
  useCallback as useCallback12,
7
7
  useRef as useRef6,
8
- memo as memo30
8
+ memo as memo31
9
9
  } from "react";
10
10
  import { createPortal } from "react-dom";
11
11
  import {
@@ -22,7 +22,6 @@ import {
22
22
  getNodesBounds,
23
23
  getViewportForBounds
24
24
  } from "@xyflow/react";
25
- import "@xyflow/react/dist/style.css";
26
25
  import {
27
26
  ExternalLink as ExternalLink2,
28
27
  HistoryIcon,
@@ -3708,9 +3707,135 @@ var NoteNode_default = memo13(function NoteNodeComponent({
3708
3707
  ] });
3709
3708
  });
3710
3709
 
3710
+ // src/nodes/field/FieldNode.tsx
3711
+ import { memo as memo14 } from "react";
3712
+ import { Database as Database3 } from "lucide-react";
3713
+ import { Handle as Handle11, Position as Position11, useHandleConnections as useHandleConnections9 } from "@xyflow/react";
3714
+ import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
3715
+ function GlowHandle13({ side }) {
3716
+ return /* @__PURE__ */ jsx14(
3717
+ "div",
3718
+ {
3719
+ style: {
3720
+ position: "absolute",
3721
+ top: "50%",
3722
+ [side]: -6,
3723
+ transform: "translateY(-50%)",
3724
+ width: 12,
3725
+ height: 12,
3726
+ borderRadius: "50%",
3727
+ background: "linear-gradient(135deg, #06b6d4, #0891b2)",
3728
+ border: "2px solid rgb(var(--ec-page-bg))",
3729
+ zIndex: 20,
3730
+ animation: "ec-handle-pulse 2s ease-in-out infinite",
3731
+ pointerEvents: "none"
3732
+ }
3733
+ }
3734
+ );
3735
+ }
3736
+ function classNames11(...classes) {
3737
+ return classes.filter(Boolean).join(" ");
3738
+ }
3739
+ var FieldNode_default = memo14(function Field(props) {
3740
+ const { name, type: fieldType } = props.data;
3741
+ const mode = props.data.mode || "simple";
3742
+ const targetConnections = useHandleConnections9({ type: "target" });
3743
+ const sourceConnections = useHandleConnections9({ type: "source" });
3744
+ const isDark = useDarkMode();
3745
+ return /* @__PURE__ */ jsxs13(
3746
+ "div",
3747
+ {
3748
+ className: classNames11(
3749
+ "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
3750
+ props?.selected ? "ring-2 ring-cyan-400/60 ring-offset-2" : "",
3751
+ "border-cyan-500"
3752
+ ),
3753
+ style: {
3754
+ background: "var(--ec-field-node-bg, rgb(var(--ec-card-bg)))",
3755
+ boxShadow: "0 2px 12px rgba(6, 182, 212, 0.15)"
3756
+ },
3757
+ children: [
3758
+ /* @__PURE__ */ jsx14(
3759
+ Handle11,
3760
+ {
3761
+ type: "target",
3762
+ position: Position11.Left,
3763
+ style: HIDDEN_HANDLE_STYLE
3764
+ }
3765
+ ),
3766
+ /* @__PURE__ */ jsx14(
3767
+ Handle11,
3768
+ {
3769
+ type: "source",
3770
+ position: Position11.Right,
3771
+ style: HIDDEN_HANDLE_STYLE
3772
+ }
3773
+ ),
3774
+ targetConnections.length > 0 && /* @__PURE__ */ jsx14(GlowHandle13, { side: "left" }),
3775
+ sourceConnections.length > 0 && /* @__PURE__ */ jsx14(GlowHandle13, { side: "right" }),
3776
+ /* @__PURE__ */ jsx14("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ jsxs13("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: [
3777
+ /* @__PURE__ */ jsx14(Database3, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
3778
+ "Field"
3779
+ ] }) }),
3780
+ fieldType && /* @__PURE__ */ jsx14(
3781
+ "span",
3782
+ {
3783
+ 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",
3784
+ style: { position: "absolute", top: -8, right: 10 },
3785
+ children: fieldType
3786
+ }
3787
+ ),
3788
+ /* @__PURE__ */ jsxs13("div", { className: "px-3 pt-3.5 pb-2.5", children: [
3789
+ /* @__PURE__ */ jsx14("div", { className: "flex items-baseline gap-1", children: /* @__PURE__ */ jsx14("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))]", children: name }) }),
3790
+ mode === "full" && fieldType && /* @__PURE__ */ jsxs13(
3791
+ "div",
3792
+ {
3793
+ className: "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed",
3794
+ title: `Type: ${fieldType}`,
3795
+ children: [
3796
+ "Type: ",
3797
+ fieldType
3798
+ ]
3799
+ }
3800
+ )
3801
+ ] })
3802
+ ]
3803
+ }
3804
+ );
3805
+ });
3806
+
3807
+ // src/nodes/field/config.ts
3808
+ import { MarkerType as MarkerType5 } from "@xyflow/react";
3809
+ import { Database as Database4 } from "lucide-react";
3810
+ var config_default5 = {
3811
+ type: "field",
3812
+ icon: Database4,
3813
+ color: "cyan",
3814
+ targetCanConnectTo: [],
3815
+ sourceCanConnectTo: [],
3816
+ validateConnection: () => false,
3817
+ getEdgeOptions: () => ({
3818
+ label: "contains",
3819
+ markerEnd: { type: MarkerType5.ArrowClosed, color: "#06b6d4" }
3820
+ }),
3821
+ defaultData: { name: "New Field", type: "string", mode: "full" },
3822
+ editor: {
3823
+ title: "Field",
3824
+ subtitle: "Schema field",
3825
+ schema: {
3826
+ type: "object",
3827
+ required: ["name"],
3828
+ properties: {
3829
+ name: { type: "string", title: "Field Path" },
3830
+ type: { type: "string", title: "Type" }
3831
+ }
3832
+ }
3833
+ }
3834
+ };
3835
+
3711
3836
  // src/nodes/Flow.tsx
3712
- import { memo as memo14, useMemo as useMemo7 } from "react";
3713
- import { Handle as Handle11 } from "@xyflow/react";
3837
+ import { memo as memo15, useMemo as useMemo7 } from "react";
3838
+ import { Handle as Handle12 } from "@xyflow/react";
3714
3839
  import * as ContextMenu from "@radix-ui/react-context-menu";
3715
3840
 
3716
3841
  // src/utils/url-builder.ts
@@ -3730,15 +3855,15 @@ import * as HeroIcons from "@heroicons/react/24/outline";
3730
3855
 
3731
3856
  // src/utils/protocols.tsx
3732
3857
  import { Server, Radio, Wifi, Network, Globe as Globe3, Cloud } from "lucide-react";
3733
- import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
3858
+ import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
3734
3859
  function AwsEventBridge({ className }) {
3735
- return /* @__PURE__ */ jsxs13("svg", { viewBox: "0 0 40 40", className, children: [
3736
- /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsxs13("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "eb-g", children: [
3737
- /* @__PURE__ */ jsx14("stop", { stopColor: "#B0084D", offset: "0%" }),
3738
- /* @__PURE__ */ jsx14("stop", { stopColor: "#FF4F8B", offset: "100%" })
3860
+ return /* @__PURE__ */ jsxs14("svg", { viewBox: "0 0 40 40", className, children: [
3861
+ /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsxs14("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "eb-g", children: [
3862
+ /* @__PURE__ */ jsx15("stop", { stopColor: "#B0084D", offset: "0%" }),
3863
+ /* @__PURE__ */ jsx15("stop", { stopColor: "#FF4F8B", offset: "100%" })
3739
3864
  ] }) }),
3740
- /* @__PURE__ */ jsx14("rect", { width: "40", height: "40", rx: "4", fill: "url(#eb-g)" }),
3741
- /* @__PURE__ */ jsx14(
3865
+ /* @__PURE__ */ jsx15("rect", { width: "40", height: "40", rx: "4", fill: "url(#eb-g)" }),
3866
+ /* @__PURE__ */ jsx15(
3742
3867
  "path",
3743
3868
  {
3744
3869
  fill: "#FFF",
@@ -3748,13 +3873,13 @@ function AwsEventBridge({ className }) {
3748
3873
  ] });
3749
3874
  }
3750
3875
  function AwsSqs({ className }) {
3751
- return /* @__PURE__ */ jsxs13("svg", { viewBox: "0 0 40 40", className, children: [
3752
- /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsxs13("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "sqs-g", children: [
3753
- /* @__PURE__ */ jsx14("stop", { stopColor: "#B0084D", offset: "0%" }),
3754
- /* @__PURE__ */ jsx14("stop", { stopColor: "#FF4F8B", offset: "100%" })
3876
+ return /* @__PURE__ */ jsxs14("svg", { viewBox: "0 0 40 40", className, children: [
3877
+ /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsxs14("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "sqs-g", children: [
3878
+ /* @__PURE__ */ jsx15("stop", { stopColor: "#B0084D", offset: "0%" }),
3879
+ /* @__PURE__ */ jsx15("stop", { stopColor: "#FF4F8B", offset: "100%" })
3755
3880
  ] }) }),
3756
- /* @__PURE__ */ jsx14("rect", { width: "40", height: "40", rx: "4", fill: "url(#sqs-g)" }),
3757
- /* @__PURE__ */ jsx14(
3881
+ /* @__PURE__ */ jsx15("rect", { width: "40", height: "40", rx: "4", fill: "url(#sqs-g)" }),
3882
+ /* @__PURE__ */ jsx15(
3758
3883
  "path",
3759
3884
  {
3760
3885
  fill: "#FFF",
@@ -3764,13 +3889,13 @@ function AwsSqs({ className }) {
3764
3889
  ] });
3765
3890
  }
3766
3891
  function AwsSns({ className }) {
3767
- return /* @__PURE__ */ jsxs13("svg", { viewBox: "0 0 40 40", className, children: [
3768
- /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsxs13("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "sns-g", children: [
3769
- /* @__PURE__ */ jsx14("stop", { stopColor: "#B0084D", offset: "0%" }),
3770
- /* @__PURE__ */ jsx14("stop", { stopColor: "#FF4F8B", offset: "100%" })
3892
+ return /* @__PURE__ */ jsxs14("svg", { viewBox: "0 0 40 40", className, children: [
3893
+ /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsxs14("linearGradient", { x1: "0%", y1: "100%", x2: "100%", y2: "0%", id: "sns-g", children: [
3894
+ /* @__PURE__ */ jsx15("stop", { stopColor: "#B0084D", offset: "0%" }),
3895
+ /* @__PURE__ */ jsx15("stop", { stopColor: "#FF4F8B", offset: "100%" })
3771
3896
  ] }) }),
3772
- /* @__PURE__ */ jsx14("rect", { width: "40", height: "40", rx: "4", fill: "url(#sns-g)" }),
3773
- /* @__PURE__ */ jsx14(
3897
+ /* @__PURE__ */ jsx15("rect", { width: "40", height: "40", rx: "4", fill: "url(#sns-g)" }),
3898
+ /* @__PURE__ */ jsx15(
3774
3899
  "path",
3775
3900
  {
3776
3901
  fill: "#FFF",
@@ -3832,11 +3957,11 @@ function getIcon(iconName) {
3832
3957
  }
3833
3958
 
3834
3959
  // src/nodes/Flow.tsx
3835
- import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
3836
- function classNames11(...classes) {
3960
+ import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
3961
+ function classNames12(...classes) {
3837
3962
  return classes.filter(Boolean).join(" ");
3838
3963
  }
3839
- var Flow_default = memo14(function FlowNode({
3964
+ var Flow_default = memo15(function FlowNode({
3840
3965
  data,
3841
3966
  sourcePosition,
3842
3967
  targetPosition
@@ -3848,25 +3973,25 @@ var Flow_default = memo14(function FlowNode({
3848
3973
  const portalContainer = usePortalContainer();
3849
3974
  const nodeLabel = label || flow?.data?.sidebar?.badge || "Flow";
3850
3975
  const fontSize = nodeLabel.length > 10 ? "7px" : "9px";
3851
- return /* @__PURE__ */ jsxs14(ContextMenu.Root, { children: [
3852
- /* @__PURE__ */ jsx15(ContextMenu.Trigger, { children: /* @__PURE__ */ jsxs14(
3976
+ return /* @__PURE__ */ jsxs15(ContextMenu.Root, { children: [
3977
+ /* @__PURE__ */ jsx16(ContextMenu.Trigger, { children: /* @__PURE__ */ jsxs15(
3853
3978
  "div",
3854
3979
  {
3855
- className: classNames11(
3980
+ className: classNames12(
3856
3981
  `rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-${color}-400`
3857
3982
  ),
3858
3983
  style: NODE_WIDTH_STYLE,
3859
3984
  children: [
3860
- /* @__PURE__ */ jsxs14(
3985
+ /* @__PURE__ */ jsxs15(
3861
3986
  "div",
3862
3987
  {
3863
- className: classNames11(
3988
+ className: classNames12(
3864
3989
  `bg-gradient-to-b from-${color}-500 to-${color}-700 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-${color}-100`,
3865
3990
  `border-r-[1px] border-${color}-500`
3866
3991
  ),
3867
3992
  children: [
3868
- Icon && /* @__PURE__ */ jsx15(Icon, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
3869
- mode === "full" && /* @__PURE__ */ jsx15(
3993
+ Icon && /* @__PURE__ */ jsx16(Icon, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
3994
+ mode === "full" && /* @__PURE__ */ jsx16(
3870
3995
  "span",
3871
3996
  {
3872
3997
  className: `text-center text-[${fontSize}] text-white font-bold uppercase mb-4`,
@@ -3877,30 +4002,30 @@ var Flow_default = memo14(function FlowNode({
3877
4002
  ]
3878
4003
  }
3879
4004
  ),
3880
- /* @__PURE__ */ jsxs14("div", { className: "p-1 flex-1", children: [
3881
- targetPosition && /* @__PURE__ */ jsx15(Handle11, { type: "target", position: targetPosition }),
3882
- sourcePosition && /* @__PURE__ */ jsx15(Handle11, { type: "source", position: sourcePosition }),
3883
- /* @__PURE__ */ jsxs14(
4005
+ /* @__PURE__ */ jsxs15("div", { className: "p-1 flex-1", children: [
4006
+ targetPosition && /* @__PURE__ */ jsx16(Handle12, { type: "target", position: targetPosition }),
4007
+ sourcePosition && /* @__PURE__ */ jsx16(Handle12, { type: "source", position: sourcePosition }),
4008
+ /* @__PURE__ */ jsxs15(
3884
4009
  "div",
3885
4010
  {
3886
- className: classNames11(
4011
+ className: classNames12(
3887
4012
  mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
3888
4013
  ),
3889
4014
  children: [
3890
- /* @__PURE__ */ jsx15("span", { className: "text-xs font-bold block pt-0.5 pb-0.5", children: name }),
3891
- /* @__PURE__ */ jsxs14("div", { className: "flex justify-between", children: [
3892
- /* @__PURE__ */ jsxs14("span", { className: "text-[10px] font-light block pt-0.5 pb-0.5 ", children: [
4015
+ /* @__PURE__ */ jsx16("span", { className: "text-xs font-bold block pt-0.5 pb-0.5", children: name }),
4016
+ /* @__PURE__ */ jsxs15("div", { className: "flex justify-between", children: [
4017
+ /* @__PURE__ */ jsxs15("span", { className: "text-[10px] font-light block pt-0.5 pb-0.5 ", children: [
3893
4018
  "v",
3894
4019
  version
3895
4020
  ] }),
3896
- mode === "simple" && /* @__PURE__ */ jsx15("span", { className: "text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: nodeLabel })
4021
+ mode === "simple" && /* @__PURE__ */ jsx16("span", { className: "text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: nodeLabel })
3897
4022
  ] })
3898
4023
  ]
3899
4024
  }
3900
4025
  ),
3901
- mode === "full" && /* @__PURE__ */ jsxs14("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
3902
- /* @__PURE__ */ jsx15("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx15("span", { className: "text-[8px] font-light", children: flow.data.summary }) }),
3903
- /* @__PURE__ */ jsx15("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: /* @__PURE__ */ jsxs14("span", { className: "text-xs", style: TINY_FONT_STYLE, children: [
4026
+ mode === "full" && /* @__PURE__ */ jsxs15("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
4027
+ /* @__PURE__ */ jsx16("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx16("span", { className: "text-[8px] font-light", children: flow.data.summary }) }),
4028
+ /* @__PURE__ */ jsx16("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: /* @__PURE__ */ jsxs15("span", { className: "text-xs", style: TINY_FONT_STYLE, children: [
3904
4029
  "Owners: ",
3905
4030
  owners.length
3906
4031
  ] }) })
@@ -3909,25 +4034,25 @@ var Flow_default = memo14(function FlowNode({
3909
4034
  ]
3910
4035
  }
3911
4036
  ) }),
3912
- /* @__PURE__ */ jsx15(ContextMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs14(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: [
3913
- /* @__PURE__ */ jsx15(
4037
+ /* @__PURE__ */ jsx16(ContextMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs15(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: [
4038
+ /* @__PURE__ */ jsx16(
3914
4039
  ContextMenu.Item,
3915
4040
  {
3916
4041
  asChild: true,
3917
4042
  className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
3918
- children: /* @__PURE__ */ jsx15("a", { href: buildUrl(`/docs/flows/${id}/${version}`), children: "Read documentation" })
4043
+ children: /* @__PURE__ */ jsx16("a", { href: buildUrl(`/docs/flows/${id}/${version}`), children: "Read documentation" })
3919
4044
  }
3920
4045
  ),
3921
- /* @__PURE__ */ jsx15(
4046
+ /* @__PURE__ */ jsx16(
3922
4047
  ContextMenu.Item,
3923
4048
  {
3924
4049
  asChild: true,
3925
4050
  className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
3926
- children: /* @__PURE__ */ jsx15("a", { href: buildUrl(`/visualiser/flows/${id}/${version}`), children: "View in visualiser" })
4051
+ children: /* @__PURE__ */ jsx16("a", { href: buildUrl(`/visualiser/flows/${id}/${version}`), children: "View in visualiser" })
3927
4052
  }
3928
4053
  ),
3929
- /* @__PURE__ */ jsx15(ContextMenu.Separator, { className: "h-[1px] bg-[rgb(var(--ec-page-border))] m-1" }),
3930
- /* @__PURE__ */ jsx15(ContextMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx15(
4054
+ /* @__PURE__ */ jsx16(ContextMenu.Separator, { className: "h-[1px] bg-[rgb(var(--ec-page-border))] m-1" }),
4055
+ /* @__PURE__ */ jsx16(ContextMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx16(
3931
4056
  "a",
3932
4057
  {
3933
4058
  href: buildUrl(`/docs/flows/${id}/${version}/changelog`),
@@ -3942,14 +4067,14 @@ var Flow_default = memo14(function FlowNode({
3942
4067
  });
3943
4068
 
3944
4069
  // src/nodes/Entity.tsx
3945
- import { Handle as Handle12, Position as Position11 } from "@xyflow/react";
4070
+ import { Handle as Handle13, Position as Position12 } from "@xyflow/react";
3946
4071
  import * as ContextMenu2 from "@radix-ui/react-context-menu";
3947
- import { memo as memo15, useState as useState3, useMemo as useMemo8 } from "react";
3948
- import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
3949
- function classNames12(...classes) {
4072
+ import { memo as memo16, useState as useState3, useMemo as useMemo8 } from "react";
4073
+ import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
4074
+ function classNames13(...classes) {
3950
4075
  return classes.filter(Boolean).join(" ");
3951
4076
  }
3952
- var Entity_default = memo15(function EntityNode({
4077
+ var Entity_default = memo16(function EntityNode({
3953
4078
  data,
3954
4079
  sourcePosition,
3955
4080
  targetPosition
@@ -3970,111 +4095,111 @@ var Entity_default = memo15(function EntityNode({
3970
4095
  const Icon = useMemo8(() => getIcon(icon), [icon]);
3971
4096
  const [hoveredProperty, setHoveredProperty] = useState3(null);
3972
4097
  const portalContainer = usePortalContainer();
3973
- return /* @__PURE__ */ jsxs15(ContextMenu2.Root, { children: [
3974
- /* @__PURE__ */ jsx16(ContextMenu2.Trigger, { children: /* @__PURE__ */ jsxs15(
4098
+ return /* @__PURE__ */ jsxs16(ContextMenu2.Root, { children: [
4099
+ /* @__PURE__ */ jsx17(ContextMenu2.Trigger, { children: /* @__PURE__ */ jsxs16(
3975
4100
  "div",
3976
4101
  {
3977
- className: classNames12(
4102
+ className: classNames13(
3978
4103
  "bg-[rgb(var(--ec-card-bg))] border rounded-lg shadow-sm min-w-[200px]",
3979
4104
  externalToDomain ? "border-amber-500/60" : "border-blue-400/50"
3980
4105
  ),
3981
4106
  children: [
3982
- /* @__PURE__ */ jsxs15(
4107
+ /* @__PURE__ */ jsxs16(
3983
4108
  "div",
3984
4109
  {
3985
- className: classNames12(
4110
+ className: classNames13(
3986
4111
  "px-4 py-2 rounded-t-lg border-b border-[rgb(var(--ec-page-border))]",
3987
4112
  externalToDomain ? "bg-amber-500/20" : "bg-blue-500/15"
3988
4113
  ),
3989
4114
  children: [
3990
- /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
3991
- Icon && /* @__PURE__ */ jsx16(Icon, { className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]" }),
3992
- /* @__PURE__ */ jsx16("span", { className: "font-semibold text-[rgb(var(--ec-page-text))] text-sm", children: name }),
3993
- aggregateRoot && /* @__PURE__ */ jsx16("span", { className: "text-xs bg-amber-500/20 text-amber-600 dark:text-amber-400 px-1.5 py-0.5 rounded font-medium", children: "AR" })
4115
+ /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
4116
+ Icon && /* @__PURE__ */ jsx17(Icon, { className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]" }),
4117
+ /* @__PURE__ */ jsx17("span", { className: "font-semibold text-[rgb(var(--ec-page-text))] text-sm", children: name }),
4118
+ aggregateRoot && /* @__PURE__ */ jsx17("span", { className: "text-xs bg-amber-500/20 text-amber-600 dark:text-amber-400 px-1.5 py-0.5 rounded font-medium", children: "AR" })
3994
4119
  ] }),
3995
- domainName && /* @__PURE__ */ jsxs15("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] font-medium mt-1", children: [
4120
+ domainName && /* @__PURE__ */ jsxs16("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] font-medium mt-1", children: [
3996
4121
  "from ",
3997
4122
  domainName,
3998
4123
  " domain"
3999
4124
  ] }),
4000
- mode === "full" && /* @__PURE__ */ jsxs15("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: [
4125
+ mode === "full" && /* @__PURE__ */ jsxs16("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: [
4001
4126
  "v",
4002
4127
  version
4003
4128
  ] })
4004
4129
  ]
4005
4130
  }
4006
4131
  ),
4007
- properties.length > 0 ? /* @__PURE__ */ jsx16("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: properties.map((property, index) => {
4132
+ properties.length > 0 ? /* @__PURE__ */ jsx17("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: properties.map((property, index) => {
4008
4133
  const propertyKey = `${property.name}-${index}`;
4009
4134
  const isHovered = hoveredProperty === propertyKey;
4010
- return /* @__PURE__ */ jsxs15(
4135
+ return /* @__PURE__ */ jsxs16(
4011
4136
  "div",
4012
4137
  {
4013
4138
  className: "relative flex items-center justify-between px-4 py-2 hover:bg-[rgb(var(--ec-page-border)/0.2)]",
4014
4139
  onMouseEnter: () => property.description && setHoveredProperty(propertyKey),
4015
4140
  onMouseLeave: () => setHoveredProperty(null),
4016
4141
  children: [
4017
- /* @__PURE__ */ jsx16(
4018
- Handle12,
4142
+ /* @__PURE__ */ jsx17(
4143
+ Handle13,
4019
4144
  {
4020
4145
  type: "target",
4021
- position: Position11.Left,
4146
+ position: Position12.Left,
4022
4147
  id: `${property.name}-target`,
4023
4148
  className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !left-[-0px]",
4024
4149
  style: HANDLE_LEFT_OFFSET_STYLE
4025
4150
  }
4026
4151
  ),
4027
- /* @__PURE__ */ jsx16(
4028
- Handle12,
4152
+ /* @__PURE__ */ jsx17(
4153
+ Handle13,
4029
4154
  {
4030
4155
  type: "source",
4031
- position: Position11.Right,
4156
+ position: Position12.Right,
4032
4157
  id: `${property.name}-source`,
4033
4158
  className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !right-[-0px]",
4034
4159
  style: HANDLE_RIGHT_OFFSET_STYLE
4035
4160
  }
4036
4161
  ),
4037
- /* @__PURE__ */ jsxs15("div", { className: "flex-1 flex items-center justify-between", children: [
4038
- /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
4039
- /* @__PURE__ */ jsx16("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: property.name }),
4040
- property.required && /* @__PURE__ */ jsx16("span", { className: "text-red-500 text-xs", children: "*" })
4162
+ /* @__PURE__ */ jsxs16("div", { className: "flex-1 flex items-center justify-between", children: [
4163
+ /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
4164
+ /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: property.name }),
4165
+ property.required && /* @__PURE__ */ jsx17("span", { className: "text-red-500 text-xs", children: "*" })
4041
4166
  ] }),
4042
- /* @__PURE__ */ jsx16("span", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] font-mono", children: property.type })
4167
+ /* @__PURE__ */ jsx17("span", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] font-mono", children: property.type })
4043
4168
  ] }),
4044
- property.references && /* @__PURE__ */ jsx16("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx16(
4169
+ property.references && /* @__PURE__ */ jsx17("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx17(
4045
4170
  "div",
4046
4171
  {
4047
4172
  className: "w-2 h-2 bg-blue-500 rounded-full",
4048
4173
  title: `References ${property.references}`
4049
4174
  }
4050
4175
  ) }),
4051
- isHovered && property.description && /* @__PURE__ */ jsxs15("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: [
4052
- /* @__PURE__ */ jsx16("div", { className: "text-gray-200 whitespace-normal break-words", children: property.description }),
4053
- /* @__PURE__ */ jsx16("div", { className: "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900" })
4176
+ isHovered && property.description && /* @__PURE__ */ jsxs16("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: [
4177
+ /* @__PURE__ */ jsx17("div", { className: "text-gray-200 whitespace-normal break-words", children: property.description }),
4178
+ /* @__PURE__ */ jsx17("div", { className: "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900" })
4054
4179
  ] })
4055
4180
  ]
4056
4181
  },
4057
4182
  propertyKey
4058
4183
  );
4059
- }) }) : /* @__PURE__ */ jsx16("div", { className: "px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))] text-center", children: "No properties defined" }),
4060
- properties.length === 0 && /* @__PURE__ */ jsxs15(Fragment2, { children: [
4061
- targetPosition && /* @__PURE__ */ jsx16(Handle12, { type: "target", position: targetPosition }),
4062
- sourcePosition && /* @__PURE__ */ jsx16(Handle12, { type: "source", position: sourcePosition })
4184
+ }) }) : /* @__PURE__ */ jsx17("div", { className: "px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))] text-center", children: "No properties defined" }),
4185
+ properties.length === 0 && /* @__PURE__ */ jsxs16(Fragment2, { children: [
4186
+ targetPosition && /* @__PURE__ */ jsx17(Handle13, { type: "target", position: targetPosition }),
4187
+ sourcePosition && /* @__PURE__ */ jsx17(Handle13, { type: "source", position: sourcePosition })
4063
4188
  ] })
4064
4189
  ]
4065
4190
  }
4066
4191
  ) }),
4067
- /* @__PURE__ */ jsx16(ContextMenu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx16(
4192
+ /* @__PURE__ */ jsx17(ContextMenu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx17(
4068
4193
  ContextMenu2.Content,
4069
4194
  {
4070
4195
  className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]",
4071
4196
  onClick: (e) => e.stopPropagation(),
4072
- children: /* @__PURE__ */ jsx16(
4197
+ children: /* @__PURE__ */ jsx17(
4073
4198
  ContextMenu2.Item,
4074
4199
  {
4075
4200
  asChild: true,
4076
4201
  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",
4077
- children: /* @__PURE__ */ jsx16("a", { href: buildUrl(`/docs/entities/${entity.data.id}/${version}`), children: "Read documentation" })
4202
+ children: /* @__PURE__ */ jsx17("a", { href: buildUrl(`/docs/entities/${entity.data.id}/${version}`), children: "Read documentation" })
4078
4203
  }
4079
4204
  )
4080
4205
  }
@@ -4083,14 +4208,14 @@ var Entity_default = memo15(function EntityNode({
4083
4208
  });
4084
4209
 
4085
4210
  // src/nodes/User.tsx
4086
- import { memo as memo16 } from "react";
4211
+ import { memo as memo17 } from "react";
4087
4212
  import { UserIcon as UserIcon2 } from "@heroicons/react/20/solid";
4088
- import { Handle as Handle13 } from "@xyflow/react";
4089
- import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
4090
- function classNames13(...classes) {
4213
+ import { Handle as Handle14 } from "@xyflow/react";
4214
+ import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
4215
+ function classNames14(...classes) {
4091
4216
  return classes.filter(Boolean).join(" ");
4092
4217
  }
4093
- var User_default = memo16(function UserNode({
4218
+ var User_default = memo17(function UserNode({
4094
4219
  data,
4095
4220
  sourcePosition,
4096
4221
  targetPosition
@@ -4102,25 +4227,25 @@ var User_default = memo16(function UserNode({
4102
4227
  showSource: _showSource = true
4103
4228
  } = data;
4104
4229
  const { summary, actor: { name } = {} } = step;
4105
- return /* @__PURE__ */ jsxs16(
4230
+ return /* @__PURE__ */ jsxs17(
4106
4231
  "div",
4107
4232
  {
4108
- className: classNames13(
4233
+ className: classNames14(
4109
4234
  `rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-yellow-400`,
4110
4235
  mode === "full" ? "min-h-[5em]" : "min-h-[2em]"
4111
4236
  ),
4112
4237
  style: NODE_WIDTH_STYLE,
4113
4238
  children: [
4114
- /* @__PURE__ */ jsxs16(
4239
+ /* @__PURE__ */ jsxs17(
4115
4240
  "div",
4116
4241
  {
4117
- className: classNames13(
4242
+ className: classNames14(
4118
4243
  "bg-gradient-to-b from-yellow-400 to-yellow-600 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-orange-100-500",
4119
4244
  `border-r-[1px] border-yellow-500`
4120
4245
  ),
4121
4246
  children: [
4122
- /* @__PURE__ */ jsx17(UserIcon2, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
4123
- mode === "full" && /* @__PURE__ */ jsx17(
4247
+ /* @__PURE__ */ jsx18(UserIcon2, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
4248
+ mode === "full" && /* @__PURE__ */ jsx18(
4124
4249
  "span",
4125
4250
  {
4126
4251
  className: "text-center text-[9px] text-white font-bold uppercase mb-4",
@@ -4131,24 +4256,24 @@ var User_default = memo16(function UserNode({
4131
4256
  ]
4132
4257
  }
4133
4258
  ),
4134
- /* @__PURE__ */ jsxs16("div", { className: "p-1 flex-1", children: [
4135
- targetPosition && /* @__PURE__ */ jsx17(Handle13, { type: "target", position: targetPosition }),
4136
- sourcePosition && /* @__PURE__ */ jsx17(Handle13, { type: "source", position: sourcePosition }),
4137
- (!summary || mode !== "full") && /* @__PURE__ */ jsxs16("div", { className: "h-full ", children: [
4138
- /* @__PURE__ */ jsx17("span", { className: "text-sm font-bold block pb-0.5 w-full", children: name }),
4139
- mode === "simple" && /* @__PURE__ */ jsx17("div", { className: "w-full text-right", children: /* @__PURE__ */ jsx17("span", { className: " w-full text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: "Event" }) })
4259
+ /* @__PURE__ */ jsxs17("div", { className: "p-1 flex-1", children: [
4260
+ targetPosition && /* @__PURE__ */ jsx18(Handle14, { type: "target", position: targetPosition }),
4261
+ sourcePosition && /* @__PURE__ */ jsx18(Handle14, { type: "source", position: sourcePosition }),
4262
+ (!summary || mode !== "full") && /* @__PURE__ */ jsxs17("div", { className: "h-full ", children: [
4263
+ /* @__PURE__ */ jsx18("span", { className: "text-sm font-bold block pb-0.5 w-full", children: name }),
4264
+ mode === "simple" && /* @__PURE__ */ jsx18("div", { className: "w-full text-right", children: /* @__PURE__ */ jsx18("span", { className: " w-full text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: "Event" }) })
4140
4265
  ] }),
4141
- summary && mode === "full" && /* @__PURE__ */ jsxs16("div", { children: [
4142
- /* @__PURE__ */ jsx17(
4266
+ summary && mode === "full" && /* @__PURE__ */ jsxs17("div", { children: [
4267
+ /* @__PURE__ */ jsx18(
4143
4268
  "div",
4144
4269
  {
4145
- className: classNames13(
4270
+ className: classNames14(
4146
4271
  mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
4147
4272
  ),
4148
- children: /* @__PURE__ */ jsx17("span", { className: "text-xs font-bold block pb-0.5", children: name })
4273
+ children: /* @__PURE__ */ jsx18("span", { className: "text-xs font-bold block pb-0.5", children: name })
4149
4274
  }
4150
4275
  ),
4151
- mode === "full" && /* @__PURE__ */ jsx17("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx17("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx17("span", { className: "text-[8px] font-light", children: summary }) }) })
4276
+ mode === "full" && /* @__PURE__ */ jsx18("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx18("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx18("span", { className: "text-[8px] font-light", children: summary }) }) })
4152
4277
  ] })
4153
4278
  ] })
4154
4279
  ]
@@ -4157,35 +4282,35 @@ var User_default = memo16(function UserNode({
4157
4282
  });
4158
4283
 
4159
4284
  // src/nodes/Step.tsx
4160
- import { memo as memo17 } from "react";
4161
- import { Handle as Handle14, Position as Position12 } from "@xyflow/react";
4162
- import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
4163
- function classNames14(...classes) {
4285
+ import { memo as memo18 } from "react";
4286
+ import { Handle as Handle15, Position as Position13 } from "@xyflow/react";
4287
+ import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
4288
+ function classNames15(...classes) {
4164
4289
  return classes.filter(Boolean).join(" ");
4165
4290
  }
4166
- var Step_default = memo17(function StepNode({
4291
+ var Step_default = memo18(function StepNode({
4167
4292
  data,
4168
4293
  sourcePosition,
4169
4294
  targetPosition
4170
4295
  }) {
4171
4296
  const { mode, step } = data;
4172
4297
  const { title, summary } = step;
4173
- return /* @__PURE__ */ jsxs17(
4298
+ return /* @__PURE__ */ jsxs18(
4174
4299
  "div",
4175
4300
  {
4176
- className: classNames14(
4301
+ className: classNames15(
4177
4302
  "rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-blue-400 min-h-[3em]"
4178
4303
  ),
4179
4304
  style: NODE_WIDTH_STYLE,
4180
4305
  children: [
4181
- /* @__PURE__ */ jsx18(
4306
+ /* @__PURE__ */ jsx19(
4182
4307
  "div",
4183
4308
  {
4184
- className: classNames14(
4309
+ className: classNames15(
4185
4310
  "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",
4186
4311
  `border-r-[1px] border-gray-500`
4187
4312
  ),
4188
- children: mode === "full" && /* @__PURE__ */ jsx18(
4313
+ children: mode === "full" && /* @__PURE__ */ jsx19(
4189
4314
  "span",
4190
4315
  {
4191
4316
  className: "text-center text-[9px] text-white font-bold uppercase mb-4",
@@ -4195,35 +4320,35 @@ var Step_default = memo17(function StepNode({
4195
4320
  )
4196
4321
  }
4197
4322
  ),
4198
- /* @__PURE__ */ jsxs17("div", { className: "p-1 flex-1", children: [
4199
- /* @__PURE__ */ jsx18(
4200
- Handle14,
4323
+ /* @__PURE__ */ jsxs18("div", { className: "p-1 flex-1", children: [
4324
+ /* @__PURE__ */ jsx19(
4325
+ Handle15,
4201
4326
  {
4202
4327
  type: "target",
4203
- position: targetPosition || Position12.Left,
4328
+ position: targetPosition || Position13.Left,
4204
4329
  style: HIDDEN_HANDLE_STYLE
4205
4330
  }
4206
4331
  ),
4207
- /* @__PURE__ */ jsx18(
4208
- Handle14,
4332
+ /* @__PURE__ */ jsx19(
4333
+ Handle15,
4209
4334
  {
4210
4335
  type: "source",
4211
- position: sourcePosition || Position12.Right,
4336
+ position: sourcePosition || Position13.Right,
4212
4337
  style: HIDDEN_HANDLE_STYLE
4213
4338
  }
4214
4339
  ),
4215
- !summary && /* @__PURE__ */ jsx18("div", { className: "h-full flex items-center", children: /* @__PURE__ */ jsx18("span", { className: "text-sm font-bold block pb-0.5", children: title }) }),
4216
- summary && /* @__PURE__ */ jsxs17("div", { children: [
4217
- /* @__PURE__ */ jsx18(
4340
+ !summary && /* @__PURE__ */ jsx19("div", { className: "h-full flex items-center", children: /* @__PURE__ */ jsx19("span", { className: "text-sm font-bold block pb-0.5", children: title }) }),
4341
+ summary && /* @__PURE__ */ jsxs18("div", { children: [
4342
+ /* @__PURE__ */ jsx19(
4218
4343
  "div",
4219
4344
  {
4220
- className: classNames14(
4345
+ className: classNames15(
4221
4346
  mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
4222
4347
  ),
4223
- children: /* @__PURE__ */ jsx18("span", { className: "text-xs font-bold block pb-0.5", children: title })
4348
+ children: /* @__PURE__ */ jsx19("span", { className: "text-xs font-bold block pb-0.5", children: title })
4224
4349
  }
4225
4350
  ),
4226
- mode === "full" && /* @__PURE__ */ jsx18("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx18("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx18("span", { className: "text-[8px] font-light", children: summary }) }) })
4351
+ mode === "full" && /* @__PURE__ */ jsx19("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx19("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx19("span", { className: "text-[8px] font-light", children: summary }) }) })
4227
4352
  ] })
4228
4353
  ] })
4229
4354
  ]
@@ -4233,15 +4358,15 @@ var Step_default = memo17(function StepNode({
4233
4358
 
4234
4359
  // src/nodes/Domain.tsx
4235
4360
  import {
4236
- Handle as Handle15,
4361
+ Handle as Handle16,
4237
4362
  useReactFlow,
4238
4363
  useOnSelectionChange,
4239
- Position as Position13
4364
+ Position as Position14
4240
4365
  } from "@xyflow/react";
4241
4366
  import * as ContextMenu3 from "@radix-ui/react-context-menu";
4242
- import { memo as memo18, useState as useState4, useCallback as useCallback3, useMemo as useMemo9 } from "react";
4243
- import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
4244
- var Domain_default = memo18(function DomainNode({ data, id: nodeId }) {
4367
+ import { memo as memo19, useState as useState4, useCallback as useCallback3, useMemo as useMemo9 } from "react";
4368
+ import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
4369
+ var Domain_default = memo19(function DomainNode({ data, id: nodeId }) {
4245
4370
  const { mode, domain } = data;
4246
4371
  const reactFlow = useReactFlow();
4247
4372
  const [highlightedServices, setHighlightedServices] = useState4(
@@ -4284,59 +4409,59 @@ var Domain_default = memo18(function DomainNode({ data, id: nodeId }) {
4284
4409
  useOnSelectionChange({
4285
4410
  onChange: handleSelectionChange
4286
4411
  });
4287
- return /* @__PURE__ */ jsxs18(ContextMenu3.Root, { children: [
4288
- /* @__PURE__ */ jsx19(ContextMenu3.Trigger, { children: /* @__PURE__ */ jsxs18("div", { className: "w-full rounded-lg border-2 border-yellow-400 bg-[rgb(var(--ec-card-bg))] shadow-lg", children: [
4289
- /* @__PURE__ */ jsxs18("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: [
4290
- Icon && /* @__PURE__ */ jsx19(Icon, { className: "w-4 h-4 text-yellow-500" }),
4291
- /* @__PURE__ */ jsxs18("div", { children: [
4292
- /* @__PURE__ */ jsx19("span", { className: "text-sm font-bold text-[rgb(var(--ec-page-text))]", children: name }),
4293
- /* @__PURE__ */ jsxs18("span", { className: "text-xs text-yellow-500 ml-2", children: [
4412
+ return /* @__PURE__ */ jsxs19(ContextMenu3.Root, { children: [
4413
+ /* @__PURE__ */ jsx20(ContextMenu3.Trigger, { children: /* @__PURE__ */ jsxs19("div", { className: "w-full rounded-lg border-2 border-yellow-400 bg-[rgb(var(--ec-card-bg))] shadow-lg", children: [
4414
+ /* @__PURE__ */ jsxs19("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: [
4415
+ Icon && /* @__PURE__ */ jsx20(Icon, { className: "w-4 h-4 text-yellow-500" }),
4416
+ /* @__PURE__ */ jsxs19("div", { children: [
4417
+ /* @__PURE__ */ jsx20("span", { className: "text-sm font-bold text-[rgb(var(--ec-page-text))]", children: name }),
4418
+ /* @__PURE__ */ jsxs19("span", { className: "text-xs text-yellow-500 ml-2", children: [
4294
4419
  "v",
4295
4420
  version
4296
4421
  ] })
4297
4422
  ] })
4298
4423
  ] }),
4299
- mode === "full" && services.length > 0 && /* @__PURE__ */ jsx19("div", { children: services.map((service, index) => {
4424
+ mode === "full" && services.length > 0 && /* @__PURE__ */ jsx20("div", { children: services.map((service, index) => {
4300
4425
  const isHighlighted = highlightedServices.has(service.data.id);
4301
- return /* @__PURE__ */ jsxs18(ContextMenu3.Root, { children: [
4302
- /* @__PURE__ */ jsx19(ContextMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs18(
4426
+ return /* @__PURE__ */ jsxs19(ContextMenu3.Root, { children: [
4427
+ /* @__PURE__ */ jsx20(ContextMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs19(
4303
4428
  "div",
4304
4429
  {
4305
4430
  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" : ""}`,
4306
4431
  children: [
4307
- /* @__PURE__ */ jsx19(
4308
- Handle15,
4432
+ /* @__PURE__ */ jsx20(
4433
+ Handle16,
4309
4434
  {
4310
4435
  type: "target",
4311
- position: Position13.Left,
4436
+ position: Position14.Left,
4312
4437
  id: `${service.data.id}-target`,
4313
4438
  className: "!left-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10",
4314
4439
  style: HANDLE_LEFT_STYLE
4315
4440
  }
4316
4441
  ),
4317
- /* @__PURE__ */ jsx19(
4318
- Handle15,
4442
+ /* @__PURE__ */ jsx20(
4443
+ Handle16,
4319
4444
  {
4320
4445
  type: "source",
4321
- position: Position13.Right,
4446
+ position: Position14.Right,
4322
4447
  id: `${service.data.id}-source`,
4323
4448
  className: "!right-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10",
4324
4449
  style: HANDLE_RIGHT_STYLE
4325
4450
  }
4326
4451
  ),
4327
- /* @__PURE__ */ jsxs18("div", { className: "flex items-center space-x-3", children: [
4328
- /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center w-5 h-5 bg-pink-500 rounded", children: ServerIcon3 && /* @__PURE__ */ jsx19(ServerIcon3, { className: "w-3 h-3 text-white" }) }),
4329
- /* @__PURE__ */ jsx19("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: service.data.name || service.data.id })
4452
+ /* @__PURE__ */ jsxs19("div", { className: "flex items-center space-x-3", children: [
4453
+ /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center w-5 h-5 bg-pink-500 rounded", children: ServerIcon3 && /* @__PURE__ */ jsx20(ServerIcon3, { className: "w-3 h-3 text-white" }) }),
4454
+ /* @__PURE__ */ jsx20("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: service.data.name || service.data.id })
4330
4455
  ] }),
4331
- /* @__PURE__ */ jsx19("div", { className: "flex items-center space-x-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: /* @__PURE__ */ jsxs18("span", { className: "text-xs", children: [
4456
+ /* @__PURE__ */ jsx20("div", { className: "flex items-center space-x-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: /* @__PURE__ */ jsxs19("span", { className: "text-xs", children: [
4332
4457
  "v",
4333
4458
  service.data.version
4334
4459
  ] }) })
4335
4460
  ]
4336
4461
  }
4337
4462
  ) }),
4338
- /* @__PURE__ */ jsx19(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs18(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: [
4339
- /* @__PURE__ */ jsx19(
4463
+ /* @__PURE__ */ jsx20(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs19(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: [
4464
+ /* @__PURE__ */ jsx20(
4340
4465
  ContextMenu3.Item,
4341
4466
  {
4342
4467
  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",
@@ -4346,7 +4471,7 @@ var Domain_default = memo18(function DomainNode({ data, id: nodeId }) {
4346
4471
  children: "View Service Documentation"
4347
4472
  }
4348
4473
  ),
4349
- /* @__PURE__ */ jsx19(
4474
+ /* @__PURE__ */ jsx20(
4350
4475
  ContextMenu3.Item,
4351
4476
  {
4352
4477
  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",
@@ -4360,8 +4485,8 @@ var Domain_default = memo18(function DomainNode({ data, id: nodeId }) {
4360
4485
  ] }, `${service.data.id}-${index}`);
4361
4486
  }) })
4362
4487
  ] }) }),
4363
- /* @__PURE__ */ jsx19(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs18(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: [
4364
- /* @__PURE__ */ jsx19(
4488
+ /* @__PURE__ */ jsx20(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs19(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: [
4489
+ /* @__PURE__ */ jsx20(
4365
4490
  ContextMenu3.Item,
4366
4491
  {
4367
4492
  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",
@@ -4371,7 +4496,7 @@ var Domain_default = memo18(function DomainNode({ data, id: nodeId }) {
4371
4496
  children: "View Domain Documentation"
4372
4497
  }
4373
4498
  ),
4374
- /* @__PURE__ */ jsx19(
4499
+ /* @__PURE__ */ jsx20(
4375
4500
  ContextMenu3.Item,
4376
4501
  {
4377
4502
  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",
@@ -4386,9 +4511,9 @@ var Domain_default = memo18(function DomainNode({ data, id: nodeId }) {
4386
4511
  });
4387
4512
 
4388
4513
  // src/nodes/GroupNode.tsx
4389
- import { memo as memo19 } from "react";
4514
+ import { memo as memo20 } from "react";
4390
4515
  import { BoxesIcon } from "lucide-react";
4391
- import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
4516
+ import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
4392
4517
  var GROUP_CONTAINER_STYLE = {
4393
4518
  width: "100%",
4394
4519
  height: "100%",
@@ -4460,11 +4585,11 @@ var GROUP_VERSION_STYLE = {
4460
4585
  };
4461
4586
  var GROUP_ICON_COLOR_STYLE = { color: "#7c3aed" };
4462
4587
  var GROUP_ICON_WHITE_STYLE = { color: "white" };
4463
- var GroupNode_default = memo19(function GroupNode({ data }) {
4588
+ var GroupNode_default = memo20(function GroupNode({ data }) {
4464
4589
  const { domain } = data;
4465
- return /* @__PURE__ */ jsx20("div", { style: GROUP_CONTAINER_STYLE, children: /* @__PURE__ */ jsxs19("div", { style: GROUP_HEADER_STYLE, children: [
4466
- /* @__PURE__ */ jsx20("div", { style: GROUP_WATERMARK_STYLE, children: /* @__PURE__ */ jsx20(BoxesIcon, { size: 28, strokeWidth: 2, style: GROUP_ICON_COLOR_STYLE }) }),
4467
- /* @__PURE__ */ jsx20("div", { style: GROUP_ICON_CIRCLE_STYLE, children: /* @__PURE__ */ jsx20(
4590
+ return /* @__PURE__ */ jsx21("div", { style: GROUP_CONTAINER_STYLE, children: /* @__PURE__ */ jsxs20("div", { style: GROUP_HEADER_STYLE, children: [
4591
+ /* @__PURE__ */ jsx21("div", { style: GROUP_WATERMARK_STYLE, children: /* @__PURE__ */ jsx21(BoxesIcon, { size: 28, strokeWidth: 2, style: GROUP_ICON_COLOR_STYLE }) }),
4592
+ /* @__PURE__ */ jsx21("div", { style: GROUP_ICON_CIRCLE_STYLE, children: /* @__PURE__ */ jsx21(
4468
4593
  BoxesIcon,
4469
4594
  {
4470
4595
  size: 16,
@@ -4472,9 +4597,9 @@ var GroupNode_default = memo19(function GroupNode({ data }) {
4472
4597
  style: GROUP_ICON_WHITE_STYLE
4473
4598
  }
4474
4599
  ) }),
4475
- /* @__PURE__ */ jsx20("div", { style: GROUP_BANNER_CONTENT_STYLE, children: /* @__PURE__ */ jsxs19("div", { style: GROUP_BANNER_INNER_STYLE, children: [
4476
- /* @__PURE__ */ jsx20("span", { style: GROUP_DOMAIN_NAME_STYLE, children: domain?.name || "Domain" }),
4477
- domain?.version && /* @__PURE__ */ jsxs19("span", { style: GROUP_VERSION_STYLE, children: [
4600
+ /* @__PURE__ */ jsx21("div", { style: GROUP_BANNER_CONTENT_STYLE, children: /* @__PURE__ */ jsxs20("div", { style: GROUP_BANNER_INNER_STYLE, children: [
4601
+ /* @__PURE__ */ jsx21("span", { style: GROUP_DOMAIN_NAME_STYLE, children: domain?.name || "Domain" }),
4602
+ domain?.version && /* @__PURE__ */ jsxs20("span", { style: GROUP_VERSION_STYLE, children: [
4478
4603
  "v",
4479
4604
  domain.version
4480
4605
  ] })
@@ -4483,16 +4608,16 @@ var GroupNode_default = memo19(function GroupNode({ data }) {
4483
4608
  });
4484
4609
 
4485
4610
  // src/nodes/Custom.tsx
4486
- import { Handle as Handle16 } from "@xyflow/react";
4611
+ import { Handle as Handle17 } from "@xyflow/react";
4487
4612
  import * as Icons from "@heroicons/react/24/solid";
4488
- import { memo as memo20, useMemo as useMemo10 } from "react";
4613
+ import { memo as memo21, useMemo as useMemo10 } from "react";
4489
4614
  import * as ContextMenu4 from "@radix-ui/react-context-menu";
4490
4615
  import * as Tooltip from "@radix-ui/react-tooltip";
4491
- import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
4492
- function classNames15(...classes) {
4616
+ import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
4617
+ function classNames16(...classes) {
4493
4618
  return classes.filter(Boolean).join(" ");
4494
4619
  }
4495
- var Custom_default = memo20(function UserNode2({
4620
+ var Custom_default = memo21(function UserNode2({
4496
4621
  data,
4497
4622
  sourcePosition,
4498
4623
  targetPosition
@@ -4514,11 +4639,11 @@ var Custom_default = memo20(function UserNode2({
4514
4639
  const isLongType = type && type.length > 10;
4515
4640
  const displayType = isLongType ? `${type.substring(0, 10)}...` : type;
4516
4641
  const portalContainer = usePortalContainer();
4517
- return /* @__PURE__ */ jsxs20(ContextMenu4.Root, { children: [
4518
- /* @__PURE__ */ jsx21(ContextMenu4.Trigger, { children: /* @__PURE__ */ jsxs20(
4642
+ return /* @__PURE__ */ jsxs21(ContextMenu4.Root, { children: [
4643
+ /* @__PURE__ */ jsx22(ContextMenu4.Trigger, { children: /* @__PURE__ */ jsxs21(
4519
4644
  "div",
4520
4645
  {
4521
- className: classNames15(
4646
+ className: classNames16(
4522
4647
  `rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-${color}-400`
4523
4648
  ),
4524
4649
  style: {
@@ -4526,17 +4651,17 @@ var Custom_default = memo20(function UserNode2({
4526
4651
  ...NODE_WIDTH_STYLE
4527
4652
  },
4528
4653
  children: [
4529
- /* @__PURE__ */ jsxs20(
4654
+ /* @__PURE__ */ jsxs21(
4530
4655
  "div",
4531
4656
  {
4532
- className: classNames15(
4657
+ className: classNames16(
4533
4658
  `bg-gradient-to-b from-${color}-400 to-${color}-600 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-orange-100-500`,
4534
4659
  `border-r-[1px] border-${color}`
4535
4660
  ),
4536
4661
  children: [
4537
- IconComponent && /* @__PURE__ */ jsx21(IconComponent, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
4538
- mode === "full" && /* @__PURE__ */ jsx21(Tooltip.Provider, { children: /* @__PURE__ */ jsxs20(Tooltip.Root, { children: [
4539
- /* @__PURE__ */ jsx21(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx21(
4662
+ IconComponent && /* @__PURE__ */ jsx22(IconComponent, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
4663
+ mode === "full" && /* @__PURE__ */ jsx22(Tooltip.Provider, { children: /* @__PURE__ */ jsxs21(Tooltip.Root, { children: [
4664
+ /* @__PURE__ */ jsx22(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx22(
4540
4665
  "span",
4541
4666
  {
4542
4667
  className: "text-center text-[9px] text-white font-bold uppercase mb-4",
@@ -4544,7 +4669,7 @@ var Custom_default = memo20(function UserNode2({
4544
4669
  children: displayType
4545
4670
  }
4546
4671
  ) }),
4547
- isLongType && /* @__PURE__ */ jsx21(Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs20(
4672
+ isLongType && /* @__PURE__ */ jsx22(Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs21(
4548
4673
  Tooltip.Content,
4549
4674
  {
4550
4675
  className: "bg-slate-800 text-white rounded px-2 py-1 text-xs shadow-md z-50",
@@ -4552,7 +4677,7 @@ var Custom_default = memo20(function UserNode2({
4552
4677
  sideOffset: 5,
4553
4678
  children: [
4554
4679
  type,
4555
- /* @__PURE__ */ jsx21(Tooltip.Arrow, { className: "fill-slate-800" })
4680
+ /* @__PURE__ */ jsx22(Tooltip.Arrow, { className: "fill-slate-800" })
4556
4681
  ]
4557
4682
  }
4558
4683
  ) })
@@ -4560,23 +4685,23 @@ var Custom_default = memo20(function UserNode2({
4560
4685
  ]
4561
4686
  }
4562
4687
  ),
4563
- /* @__PURE__ */ jsxs20("div", { className: "p-1 flex-1", children: [
4564
- targetPosition && /* @__PURE__ */ jsx21(Handle16, { type: "target", position: targetPosition }),
4565
- sourcePosition && /* @__PURE__ */ jsx21(Handle16, { type: "source", position: sourcePosition }),
4566
- (!summary || mode !== "full") && /* @__PURE__ */ jsx21("div", { className: "h-full ", children: /* @__PURE__ */ jsx21("span", { className: "text-sm font-bold block pb-0.5 w-full", children: title }) }),
4567
- summary && mode === "full" && /* @__PURE__ */ jsxs20("div", { children: [
4568
- /* @__PURE__ */ jsx21(
4688
+ /* @__PURE__ */ jsxs21("div", { className: "p-1 flex-1", children: [
4689
+ targetPosition && /* @__PURE__ */ jsx22(Handle17, { type: "target", position: targetPosition }),
4690
+ sourcePosition && /* @__PURE__ */ jsx22(Handle17, { type: "source", position: sourcePosition }),
4691
+ (!summary || mode !== "full") && /* @__PURE__ */ jsx22("div", { className: "h-full ", children: /* @__PURE__ */ jsx22("span", { className: "text-sm font-bold block pb-0.5 w-full", children: title }) }),
4692
+ summary && mode === "full" && /* @__PURE__ */ jsxs21("div", { children: [
4693
+ /* @__PURE__ */ jsx22(
4569
4694
  "div",
4570
4695
  {
4571
- className: classNames15(
4696
+ className: classNames16(
4572
4697
  mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
4573
4698
  ),
4574
- children: /* @__PURE__ */ jsx21("span", { className: "text-xs font-bold block pb-0.5", children: title })
4699
+ children: /* @__PURE__ */ jsx22("span", { className: "text-xs font-bold block pb-0.5", children: title })
4575
4700
  }
4576
4701
  ),
4577
- mode === "full" && /* @__PURE__ */ jsxs20("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
4578
- /* @__PURE__ */ jsx21("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx21("span", { className: "text-[8px] font-light", children: summary }) }),
4579
- properties && /* @__PURE__ */ jsx21("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: Object.entries(properties).map(([key, value]) => /* @__PURE__ */ jsxs20(
4702
+ mode === "full" && /* @__PURE__ */ jsxs21("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
4703
+ /* @__PURE__ */ jsx22("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx22("span", { className: "text-[8px] font-light", children: summary }) }),
4704
+ properties && /* @__PURE__ */ jsx22("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: Object.entries(properties).map(([key, value]) => /* @__PURE__ */ jsxs21(
4580
4705
  "span",
4581
4706
  {
4582
4707
  className: "text-xs",
@@ -4585,7 +4710,7 @@ var Custom_default = memo20(function UserNode2({
4585
4710
  key,
4586
4711
  ":",
4587
4712
  " ",
4588
- typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ jsx21(
4713
+ typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ jsx22(
4589
4714
  "a",
4590
4715
  {
4591
4716
  href: value,
@@ -4605,13 +4730,13 @@ var Custom_default = memo20(function UserNode2({
4605
4730
  ]
4606
4731
  }
4607
4732
  ) }),
4608
- menu?.length > 0 && /* @__PURE__ */ jsx21(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx21(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: menu?.map((item) => {
4609
- return /* @__PURE__ */ jsx21(
4733
+ menu?.length > 0 && /* @__PURE__ */ jsx22(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx22(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: menu?.map((item) => {
4734
+ return /* @__PURE__ */ jsx22(
4610
4735
  ContextMenu4.Item,
4611
4736
  {
4612
4737
  asChild: true,
4613
4738
  className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
4614
- children: /* @__PURE__ */ jsx21("a", { href: item.url, children: item.label })
4739
+ children: /* @__PURE__ */ jsx22("a", { href: item.url, children: item.label })
4615
4740
  }
4616
4741
  );
4617
4742
  }) }) })
@@ -4619,40 +4744,40 @@ var Custom_default = memo20(function UserNode2({
4619
4744
  });
4620
4745
 
4621
4746
  // src/nodes/ExternalSystem2.tsx
4622
- import { memo as memo21 } from "react";
4623
- import { Handle as Handle17, Position as Position14 } from "@xyflow/react";
4624
- import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
4625
- var ExternalSystem2_default = memo21(function ExternalSystemNode(props) {
4626
- return /* @__PURE__ */ jsxs21("div", { className: "relative", children: [
4627
- /* @__PURE__ */ jsx22(
4628
- Handle17,
4747
+ import { memo as memo22 } from "react";
4748
+ import { Handle as Handle18, Position as Position15 } from "@xyflow/react";
4749
+ import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
4750
+ var ExternalSystem2_default = memo22(function ExternalSystemNode(props) {
4751
+ return /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
4752
+ /* @__PURE__ */ jsx23(
4753
+ Handle18,
4629
4754
  {
4630
4755
  type: "target",
4631
- position: Position14.Left,
4756
+ position: Position15.Left,
4632
4757
  style: EXTERNAL_SYSTEM_HANDLE_STYLE,
4633
4758
  className: "bg-gray-500"
4634
4759
  }
4635
4760
  ),
4636
- /* @__PURE__ */ jsx22(
4637
- Handle17,
4761
+ /* @__PURE__ */ jsx23(
4762
+ Handle18,
4638
4763
  {
4639
4764
  type: "source",
4640
- position: Position14.Right,
4765
+ position: Position15.Right,
4641
4766
  style: EXTERNAL_SYSTEM_HANDLE_STYLE,
4642
4767
  className: "bg-gray-500"
4643
4768
  }
4644
4769
  ),
4645
- /* @__PURE__ */ jsx22(ExternalSystem_default, { ...props })
4770
+ /* @__PURE__ */ jsx23(ExternalSystem_default, { ...props })
4646
4771
  ] });
4647
4772
  });
4648
4773
 
4649
4774
  // src/nodes/DataProduct.tsx
4650
- import { memo as memo22 } from "react";
4775
+ import { memo as memo23 } from "react";
4651
4776
  import { Package } from "lucide-react";
4652
- import { Handle as Handle18, Position as Position15, useHandleConnections as useHandleConnections9 } from "@xyflow/react";
4653
- import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
4654
- function GlowHandle13({ side }) {
4655
- return /* @__PURE__ */ jsx23(
4777
+ import { Handle as Handle19, Position as Position16, useHandleConnections as useHandleConnections10 } from "@xyflow/react";
4778
+ import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
4779
+ function GlowHandle14({ side }) {
4780
+ return /* @__PURE__ */ jsx24(
4656
4781
  "div",
4657
4782
  {
4658
4783
  style: {
@@ -4672,38 +4797,38 @@ function GlowHandle13({ side }) {
4672
4797
  }
4673
4798
  );
4674
4799
  }
4675
- function classNames16(...classes) {
4800
+ function classNames17(...classes) {
4676
4801
  return classes.filter(Boolean).join(" ");
4677
4802
  }
4678
4803
  function PostItDataProduct(props) {
4679
4804
  const { version, name, summary, deprecated, draft, notes } = props.data.dataProduct;
4680
4805
  const mode = props.data.mode || "simple";
4681
- return /* @__PURE__ */ jsxs22(
4806
+ return /* @__PURE__ */ jsxs23(
4682
4807
  "div",
4683
4808
  {
4684
- className: classNames16(
4809
+ className: classNames17(
4685
4810
  "relative min-w-44 max-w-56 min-h-[120px]",
4686
4811
  props?.selected ? "ring-2 ring-indigo-400/60 ring-offset-1" : ""
4687
4812
  ),
4688
4813
  children: [
4689
- /* @__PURE__ */ jsx23(
4690
- Handle18,
4814
+ /* @__PURE__ */ jsx24(
4815
+ Handle19,
4691
4816
  {
4692
4817
  type: "target",
4693
- position: Position15.Left,
4818
+ position: Position16.Left,
4694
4819
  style: HIDDEN_HANDLE_STYLE
4695
4820
  }
4696
4821
  ),
4697
- /* @__PURE__ */ jsx23(
4698
- Handle18,
4822
+ /* @__PURE__ */ jsx24(
4823
+ Handle19,
4699
4824
  {
4700
4825
  type: "source",
4701
- position: Position15.Right,
4826
+ position: Position16.Right,
4702
4827
  style: HIDDEN_HANDLE_STYLE
4703
4828
  }
4704
4829
  ),
4705
- notes && notes.length > 0 && /* @__PURE__ */ jsx23(NotesIndicator, { notes, resourceName: name }),
4706
- /* @__PURE__ */ jsxs22(
4830
+ notes && notes.length > 0 && /* @__PURE__ */ jsx24(NotesIndicator, { notes, resourceName: name }),
4831
+ /* @__PURE__ */ jsxs23(
4707
4832
  "div",
4708
4833
  {
4709
4834
  className: "absolute inset-0",
@@ -4714,8 +4839,8 @@ function PostItDataProduct(props) {
4714
4839
  border: deprecated ? "2px dashed rgba(239, 68, 68, 0.5)" : draft ? "2px dashed rgba(99, 102, 241, 0.5)" : "none"
4715
4840
  },
4716
4841
  children: [
4717
- /* @__PURE__ */ jsx23("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
4718
- /* @__PURE__ */ jsx23(
4842
+ /* @__PURE__ */ jsx24("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
4843
+ /* @__PURE__ */ jsx24(
4719
4844
  "div",
4720
4845
  {
4721
4846
  style: {
@@ -4734,30 +4859,30 @@ function PostItDataProduct(props) {
4734
4859
  ]
4735
4860
  }
4736
4861
  ),
4737
- /* @__PURE__ */ jsxs22("div", { className: "relative px-3.5 py-3", children: [
4738
- /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between mb-2", children: [
4739
- /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1", children: [
4740
- /* @__PURE__ */ jsx23(Package, { className: "w-3 h-3 text-indigo-900/50", strokeWidth: 2.5 }),
4741
- /* @__PURE__ */ jsx23("span", { className: "text-[8px] font-bold text-indigo-900/50 uppercase tracking-widest", children: "Data Product" })
4862
+ /* @__PURE__ */ jsxs23("div", { className: "relative px-3.5 py-3", children: [
4863
+ /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between mb-2", children: [
4864
+ /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1", children: [
4865
+ /* @__PURE__ */ jsx24(Package, { className: "w-3 h-3 text-indigo-900/50", strokeWidth: 2.5 }),
4866
+ /* @__PURE__ */ jsx24("span", { className: "text-[8px] font-bold text-indigo-900/50 uppercase tracking-widest", children: "Data Product" })
4742
4867
  ] }),
4743
- draft && /* @__PURE__ */ jsx23("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" }),
4744
- deprecated && /* @__PURE__ */ jsx23("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" })
4868
+ draft && /* @__PURE__ */ jsx24("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" }),
4869
+ deprecated && /* @__PURE__ */ jsx24("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" })
4745
4870
  ] }),
4746
- /* @__PURE__ */ jsx23(
4871
+ /* @__PURE__ */ jsx24(
4747
4872
  "div",
4748
4873
  {
4749
- className: classNames16(
4874
+ className: classNames17(
4750
4875
  "text-[13px] font-bold leading-snug",
4751
4876
  deprecated ? "text-indigo-950/40 line-through" : "text-indigo-950"
4752
4877
  ),
4753
4878
  children: name
4754
4879
  }
4755
4880
  ),
4756
- version && /* @__PURE__ */ jsxs22("div", { className: "text-[9px] text-indigo-900/40 font-semibold mt-0.5", children: [
4881
+ version && /* @__PURE__ */ jsxs23("div", { className: "text-[9px] text-indigo-900/40 font-semibold mt-0.5", children: [
4757
4882
  "v",
4758
4883
  version
4759
4884
  ] }),
4760
- mode === "full" && summary && /* @__PURE__ */ jsx23(
4885
+ mode === "full" && summary && /* @__PURE__ */ jsx24(
4761
4886
  "div",
4762
4887
  {
4763
4888
  className: "mt-2 pt-1.5 border-t border-indigo-900/10 text-[9px] text-indigo-950/60 leading-relaxed overflow-hidden",
@@ -4774,14 +4899,14 @@ function PostItDataProduct(props) {
4774
4899
  function DefaultDataProduct(props) {
4775
4900
  const { version, name, summary, deprecated, draft, notes } = props.data.dataProduct;
4776
4901
  const mode = props.data.mode || "simple";
4777
- const targetConnections = useHandleConnections9({ type: "target" });
4778
- const sourceConnections = useHandleConnections9({ type: "source" });
4902
+ const targetConnections = useHandleConnections10({ type: "target" });
4903
+ const sourceConnections = useHandleConnections10({ type: "source" });
4779
4904
  const isDark = useDarkMode();
4780
4905
  const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
4781
- return /* @__PURE__ */ jsxs22(
4906
+ return /* @__PURE__ */ jsxs23(
4782
4907
  "div",
4783
4908
  {
4784
- className: classNames16(
4909
+ className: classNames17(
4785
4910
  "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
4786
4911
  props?.selected ? "ring-2 ring-indigo-400/60 ring-offset-2" : "",
4787
4912
  deprecated ? "border-dashed border-red-500" : draft ? `border-dashed ${isDark ? "border-indigo-400" : "border-indigo-400/60"}` : "border-indigo-500"
@@ -4791,50 +4916,50 @@ function DefaultDataProduct(props) {
4791
4916
  boxShadow: "0 2px 12px rgba(99, 102, 241, 0.15)"
4792
4917
  },
4793
4918
  children: [
4794
- /* @__PURE__ */ jsx23(
4795
- Handle18,
4919
+ /* @__PURE__ */ jsx24(
4920
+ Handle19,
4796
4921
  {
4797
4922
  type: "target",
4798
- position: Position15.Left,
4923
+ position: Position16.Left,
4799
4924
  style: HIDDEN_HANDLE_STYLE
4800
4925
  }
4801
4926
  ),
4802
- /* @__PURE__ */ jsx23(
4803
- Handle18,
4927
+ /* @__PURE__ */ jsx24(
4928
+ Handle19,
4804
4929
  {
4805
4930
  type: "source",
4806
- position: Position15.Right,
4931
+ position: Position16.Right,
4807
4932
  style: HIDDEN_HANDLE_STYLE
4808
4933
  }
4809
4934
  ),
4810
- notes && notes.length > 0 && /* @__PURE__ */ jsx23(NotesIndicator, { notes, resourceName: name }),
4811
- targetConnections.length > 0 && /* @__PURE__ */ jsx23(GlowHandle13, { side: "left" }),
4812
- sourceConnections.length > 0 && /* @__PURE__ */ jsx23(GlowHandle13, { side: "right" }),
4813
- /* @__PURE__ */ jsx23("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs22(
4935
+ notes && notes.length > 0 && /* @__PURE__ */ jsx24(NotesIndicator, { notes, resourceName: name }),
4936
+ targetConnections.length > 0 && /* @__PURE__ */ jsx24(GlowHandle14, { side: "left" }),
4937
+ sourceConnections.length > 0 && /* @__PURE__ */ jsx24(GlowHandle14, { side: "right" }),
4938
+ /* @__PURE__ */ jsx24("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs23(
4814
4939
  "span",
4815
4940
  {
4816
- className: classNames16(
4941
+ className: classNames17(
4817
4942
  "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm",
4818
4943
  deprecated ? "bg-red-500" : "bg-indigo-500"
4819
4944
  ),
4820
4945
  children: [
4821
- /* @__PURE__ */ jsx23(Package, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
4946
+ /* @__PURE__ */ jsx24(Package, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
4822
4947
  "Data Product",
4823
4948
  draft && " (Draft)",
4824
4949
  deprecated && " (Deprecated)"
4825
4950
  ]
4826
4951
  }
4827
4952
  ) }),
4828
- /* @__PURE__ */ jsxs22("div", { className: "px-3 pt-3.5 pb-2.5", children: [
4829
- /* @__PURE__ */ jsxs22("div", { className: "flex items-baseline gap-1", children: [
4830
- /* @__PURE__ */ jsx23("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))]", children: name }),
4831
- version && /* @__PURE__ */ jsxs22("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
4953
+ /* @__PURE__ */ jsxs23("div", { className: "px-3 pt-3.5 pb-2.5", children: [
4954
+ /* @__PURE__ */ jsxs23("div", { className: "flex items-baseline gap-1", children: [
4955
+ /* @__PURE__ */ jsx24("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))]", children: name }),
4956
+ version && /* @__PURE__ */ jsxs23("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
4832
4957
  "(v",
4833
4958
  version,
4834
4959
  ")"
4835
4960
  ] })
4836
4961
  ] }),
4837
- mode === "full" && summary && /* @__PURE__ */ jsx23(
4962
+ mode === "full" && summary && /* @__PURE__ */ jsx24(
4838
4963
  "div",
4839
4964
  {
4840
4965
  className: "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed overflow-hidden",
@@ -4848,18 +4973,18 @@ function DefaultDataProduct(props) {
4848
4973
  }
4849
4974
  );
4850
4975
  }
4851
- var DataProduct_default = memo22(function DataProductNode(props) {
4976
+ var DataProduct_default = memo23(function DataProductNode(props) {
4852
4977
  const nodeStyle = props?.data?.style;
4853
4978
  if (nodeStyle === "post-it") {
4854
- return /* @__PURE__ */ jsx23(PostItDataProduct, { ...props });
4979
+ return /* @__PURE__ */ jsx24(PostItDataProduct, { ...props });
4855
4980
  }
4856
- return /* @__PURE__ */ jsx23(DefaultDataProduct, { ...props });
4981
+ return /* @__PURE__ */ jsx24(DefaultDataProduct, { ...props });
4857
4982
  });
4858
4983
 
4859
4984
  // src/edges/AnimatedMessageEdge.tsx
4860
- import { memo as memo23, useMemo as useMemo11 } from "react";
4985
+ import { memo as memo24, useMemo as useMemo11 } from "react";
4861
4986
  import { BaseEdge, getSmoothStepPath } from "@xyflow/react";
4862
- import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
4987
+ import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
4863
4988
  function messageColor(collection) {
4864
4989
  switch (collection) {
4865
4990
  case "events":
@@ -4874,7 +4999,7 @@ function messageColor(collection) {
4874
4999
  }
4875
5000
  var TSPAN_NORMAL_STYLE = { fontStyle: "normal" };
4876
5001
  var TSPAN_ITALIC_STYLE = { fontStyle: "italic" };
4877
- var AnimatedMessageEdge = memo23(
5002
+ var AnimatedMessageEdge = memo24(
4878
5003
  ({
4879
5004
  id,
4880
5005
  sourceX,
@@ -4906,12 +5031,12 @@ var AnimatedMessageEdge = memo23(
4906
5031
  const animatedNodes = useMemo11(
4907
5032
  () => customColors.map((color, index) => {
4908
5033
  const delay = randomDelay + index * 0.3;
4909
- return /* @__PURE__ */ jsx24(
5034
+ return /* @__PURE__ */ jsx25(
4910
5035
  "g",
4911
5036
  {
4912
5037
  className: `ec-animated-msg ${opacityClass}`,
4913
- children: /* @__PURE__ */ jsxs23("g", { children: [
4914
- /* @__PURE__ */ jsx24(
5038
+ children: /* @__PURE__ */ jsxs24("g", { children: [
5039
+ /* @__PURE__ */ jsx25(
4915
5040
  "rect",
4916
5041
  {
4917
5042
  x: "-7",
@@ -4923,7 +5048,7 @@ var AnimatedMessageEdge = memo23(
4923
5048
  fill: color
4924
5049
  }
4925
5050
  ),
4926
- /* @__PURE__ */ jsx24(
5051
+ /* @__PURE__ */ jsx25(
4927
5052
  "path",
4928
5053
  {
4929
5054
  d: "M-7,-5 L0,1 L7,-5",
@@ -4933,7 +5058,7 @@ var AnimatedMessageEdge = memo23(
4933
5058
  strokeLinejoin: "round"
4934
5059
  }
4935
5060
  ),
4936
- /* @__PURE__ */ jsx24(
5061
+ /* @__PURE__ */ jsx25(
4937
5062
  "animateMotion",
4938
5063
  {
4939
5064
  dur: "2s",
@@ -4941,7 +5066,7 @@ var AnimatedMessageEdge = memo23(
4941
5066
  path: edgePath,
4942
5067
  rotate: "auto",
4943
5068
  begin: `${delay}s`,
4944
- children: /* @__PURE__ */ jsx24("mpath", { href: `#${id}` })
5069
+ children: /* @__PURE__ */ jsx25("mpath", { href: `#${id}` })
4945
5070
  }
4946
5071
  )
4947
5072
  ] })
@@ -4962,8 +5087,8 @@ var AnimatedMessageEdge = memo23(
4962
5087
  [lines]
4963
5088
  );
4964
5089
  const labelWidth = Math.max(longestLine.length * 6.5 + 16, 50);
4965
- return /* @__PURE__ */ jsxs23(Fragment3, { children: [
4966
- /* @__PURE__ */ jsx24(
5090
+ return /* @__PURE__ */ jsxs24(Fragment3, { children: [
5091
+ /* @__PURE__ */ jsx25(
4967
5092
  BaseEdge,
4968
5093
  {
4969
5094
  id,
@@ -4974,8 +5099,8 @@ var AnimatedMessageEdge = memo23(
4974
5099
  }
4975
5100
  ),
4976
5101
  animatedNodes,
4977
- /* @__PURE__ */ jsxs23("g", { children: [
4978
- label && /* @__PURE__ */ jsx24(
5102
+ /* @__PURE__ */ jsxs24("g", { children: [
5103
+ label && /* @__PURE__ */ jsx25(
4979
5104
  "rect",
4980
5105
  {
4981
5106
  x: labelX - labelWidth / 2,
@@ -4990,7 +5115,7 @@ var AnimatedMessageEdge = memo23(
4990
5115
  ry: 5
4991
5116
  }
4992
5117
  ),
4993
- /* @__PURE__ */ jsx24(
5118
+ /* @__PURE__ */ jsx25(
4994
5119
  "text",
4995
5120
  {
4996
5121
  x: labelX,
@@ -5001,7 +5126,7 @@ var AnimatedMessageEdge = memo23(
5001
5126
  fontWeight: 500,
5002
5127
  fill: "rgb(var(--ec-page-text))",
5003
5128
  pointerEvents: "none",
5004
- children: lines.map((line, i) => /* @__PURE__ */ jsx24(
5129
+ children: lines.map((line, i) => /* @__PURE__ */ jsx25(
5005
5130
  "tspan",
5006
5131
  {
5007
5132
  x: labelX,
@@ -5020,12 +5145,12 @@ var AnimatedMessageEdge = memo23(
5020
5145
  var AnimatedMessageEdge_default = AnimatedMessageEdge;
5021
5146
 
5022
5147
  // src/edges/MultilineEdgeLabel.tsx
5023
- import { memo as memo24, useMemo as useMemo12 } from "react";
5148
+ import { memo as memo25, useMemo as useMemo12 } from "react";
5024
5149
  import { getSmoothStepPath as getSmoothStepPath2 } from "@xyflow/react";
5025
- import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
5150
+ import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
5026
5151
  var TSPAN_NORMAL_STYLE2 = { fontStyle: "normal" };
5027
5152
  var TSPAN_ITALIC_STYLE2 = { fontStyle: "italic" };
5028
- var MultilineEdgeLabel_default = memo24(function MultilineEdgeLabel(props) {
5153
+ var MultilineEdgeLabel_default = memo25(function MultilineEdgeLabel(props) {
5029
5154
  const {
5030
5155
  id,
5031
5156
  sourceX,
@@ -5050,8 +5175,8 @@ var MultilineEdgeLabel_default = memo24(function MultilineEdgeLabel(props) {
5050
5175
  targetPosition
5051
5176
  });
5052
5177
  const lines = useMemo12(() => String(label ?? "").split("\n"), [label]);
5053
- return /* @__PURE__ */ jsxs24(Fragment4, { children: [
5054
- /* @__PURE__ */ jsx25(
5178
+ return /* @__PURE__ */ jsxs25(Fragment4, { children: [
5179
+ /* @__PURE__ */ jsx26(
5055
5180
  "path",
5056
5181
  {
5057
5182
  id,
@@ -5062,7 +5187,7 @@ var MultilineEdgeLabel_default = memo24(function MultilineEdgeLabel(props) {
5062
5187
  style
5063
5188
  }
5064
5189
  ),
5065
- /* @__PURE__ */ jsx25(
5190
+ /* @__PURE__ */ jsx26(
5066
5191
  "text",
5067
5192
  {
5068
5193
  x: labelX,
@@ -5072,7 +5197,7 @@ var MultilineEdgeLabel_default = memo24(function MultilineEdgeLabel(props) {
5072
5197
  fontSize: "10px",
5073
5198
  fill: "rgb(var(--ec-page-text))",
5074
5199
  pointerEvents: "none",
5075
- children: lines.map((line, i) => /* @__PURE__ */ jsx25(
5200
+ children: lines.map((line, i) => /* @__PURE__ */ jsx26(
5076
5201
  "tspan",
5077
5202
  {
5078
5203
  x: labelX,
@@ -5088,13 +5213,13 @@ var MultilineEdgeLabel_default = memo24(function MultilineEdgeLabel(props) {
5088
5213
  });
5089
5214
 
5090
5215
  // src/edges/FlowEdge.tsx
5091
- import { memo as memo25, useMemo as useMemo13 } from "react";
5216
+ import { memo as memo26, useMemo as useMemo13 } from "react";
5092
5217
  import {
5093
5218
  BaseEdge as BaseEdge2,
5094
5219
  EdgeLabelRenderer,
5095
5220
  getSmoothStepPath as getSmoothStepPath3
5096
5221
  } from "@xyflow/react";
5097
- import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
5222
+ import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
5098
5223
  function messageColor2(collection) {
5099
5224
  switch (collection) {
5100
5225
  case "events":
@@ -5108,7 +5233,7 @@ function messageColor2(collection) {
5108
5233
  }
5109
5234
  }
5110
5235
  var EMPTY_STYLE = {};
5111
- var FlowEdge_default = memo25(function CustomEdge({
5236
+ var FlowEdge_default = memo26(function CustomEdge({
5112
5237
  id,
5113
5238
  sourceX,
5114
5239
  sourceY,
@@ -5146,20 +5271,20 @@ var FlowEdge_default = memo25(function CustomEdge({
5146
5271
  }),
5147
5272
  [labelX, labelY, labelStyle]
5148
5273
  );
5149
- return /* @__PURE__ */ jsxs25(Fragment5, { children: [
5150
- /* @__PURE__ */ jsx26(BaseEdge2, { path: edgePath, markerEnd, style: mergedStyle }),
5151
- data?.animated && /* @__PURE__ */ jsx26(
5274
+ return /* @__PURE__ */ jsxs26(Fragment5, { children: [
5275
+ /* @__PURE__ */ jsx27(BaseEdge2, { path: edgePath, markerEnd, style: mergedStyle }),
5276
+ data?.animated && /* @__PURE__ */ jsx27(
5152
5277
  "g",
5153
5278
  {
5154
5279
  className: `ec-animated-msg z-30 ${opacity === 1 ? "opacity-100" : "opacity-10"}`,
5155
- children: /* @__PURE__ */ jsx26(
5280
+ children: /* @__PURE__ */ jsx27(
5156
5281
  "circle",
5157
5282
  {
5158
5283
  cx: "0",
5159
5284
  cy: "0",
5160
5285
  r: "7",
5161
5286
  fill: messageColor2(collection || "default"),
5162
- children: /* @__PURE__ */ jsx26(
5287
+ children: /* @__PURE__ */ jsx27(
5163
5288
  "animateMotion",
5164
5289
  {
5165
5290
  dur: "2s",
@@ -5167,14 +5292,14 @@ var FlowEdge_default = memo25(function CustomEdge({
5167
5292
  path: edgePath,
5168
5293
  rotate: "auto",
5169
5294
  begin: `${randomDelay}s`,
5170
- children: /* @__PURE__ */ jsx26("mpath", { href: `#${id}` })
5295
+ children: /* @__PURE__ */ jsx27("mpath", { href: `#${id}` })
5171
5296
  }
5172
5297
  )
5173
5298
  }
5174
5299
  )
5175
5300
  }
5176
5301
  ),
5177
- label && /* @__PURE__ */ jsx26(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx26(
5302
+ label && /* @__PURE__ */ jsx27(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx27(
5178
5303
  "div",
5179
5304
  {
5180
5305
  style: labelPositionStyle,
@@ -5193,10 +5318,10 @@ import {
5193
5318
  useEffect as useEffect2,
5194
5319
  forwardRef,
5195
5320
  useImperativeHandle,
5196
- memo as memo26
5321
+ memo as memo27
5197
5322
  } from "react";
5198
- import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
5199
- var VisualiserSearch = memo26(
5323
+ import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
5324
+ var VisualiserSearch = memo27(
5200
5325
  forwardRef(
5201
5326
  ({ nodes, onNodeSelect, onClear, onPaneClick: _onPaneClick }, ref) => {
5202
5327
  const [searchQuery, setSearchQuery] = useState5("");
@@ -5234,7 +5359,8 @@ var VisualiserSearch = memo26(
5234
5359
  actor: "bg-yellow-500 text-white",
5235
5360
  step: "bg-gray-700 text-white",
5236
5361
  user: "bg-yellow-500 text-white",
5237
- custom: "bg-gray-500 text-white"
5362
+ custom: "bg-gray-500 text-white",
5363
+ field: "bg-cyan-600 text-white"
5238
5364
  };
5239
5365
  return colorClasses[nodeType] || "bg-gray-100 text-gray-700";
5240
5366
  }, []);
@@ -5332,9 +5458,9 @@ var VisualiserSearch = memo26(
5332
5458
  document.removeEventListener("mousedown", handleClickOutside);
5333
5459
  };
5334
5460
  }, []);
5335
- return /* @__PURE__ */ jsxs26("div", { ref: containerRef, className: "w-full max-w-md mx-auto relative", children: [
5336
- /* @__PURE__ */ jsxs26("div", { className: "relative", children: [
5337
- /* @__PURE__ */ jsx27(
5461
+ return /* @__PURE__ */ jsxs27("div", { ref: containerRef, className: "w-full max-w-md mx-auto relative", children: [
5462
+ /* @__PURE__ */ jsxs27("div", { className: "relative", children: [
5463
+ /* @__PURE__ */ jsx28(
5338
5464
  "input",
5339
5465
  {
5340
5466
  ref: searchInputRef,
@@ -5347,20 +5473,20 @@ var VisualiserSearch = memo26(
5347
5473
  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"
5348
5474
  }
5349
5475
  ),
5350
- searchQuery && /* @__PURE__ */ jsx27(
5476
+ searchQuery && /* @__PURE__ */ jsx28(
5351
5477
  "button",
5352
5478
  {
5353
5479
  onClick: clearSearch,
5354
5480
  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))]",
5355
5481
  "aria-label": "Clear search",
5356
- children: /* @__PURE__ */ jsx27(
5482
+ children: /* @__PURE__ */ jsx28(
5357
5483
  "svg",
5358
5484
  {
5359
5485
  className: "w-5 h-5",
5360
5486
  fill: "none",
5361
5487
  stroke: "currentColor",
5362
5488
  viewBox: "0 0 24 24",
5363
- children: /* @__PURE__ */ jsx27(
5489
+ children: /* @__PURE__ */ jsx28(
5364
5490
  "path",
5365
5491
  {
5366
5492
  strokeLinecap: "round",
@@ -5374,17 +5500,17 @@ var VisualiserSearch = memo26(
5374
5500
  }
5375
5501
  )
5376
5502
  ] }),
5377
- showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ jsx27("div", { className: "absolute top-full left-0 right-0 mt-1 bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-md shadow-lg z-50 max-h-60 overflow-y-auto", children: filteredSuggestions.map((node, index) => {
5503
+ showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ jsx28("div", { className: "absolute top-full left-0 right-0 mt-1 bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-md shadow-lg z-50 max-h-60 overflow-y-auto", children: filteredSuggestions.map((node, index) => {
5378
5504
  const nodeName = getNodeDisplayName(node);
5379
5505
  const nodeType = node.type || "unknown";
5380
- return /* @__PURE__ */ jsxs26(
5506
+ return /* @__PURE__ */ jsxs27(
5381
5507
  "div",
5382
5508
  {
5383
5509
  onClick: () => handleSuggestionClick(node),
5384
5510
  className: `px-4 py-2 cursor-pointer flex items-center justify-between hover:bg-[rgb(var(--ec-page-border)/0.5)] ${index === selectedSuggestionIndex ? "bg-[rgb(var(--ec-accent-subtle))]" : ""}`,
5385
5511
  children: [
5386
- /* @__PURE__ */ jsx27("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: nodeName }),
5387
- /* @__PURE__ */ jsx27(
5512
+ /* @__PURE__ */ jsx28("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: nodeName }),
5513
+ /* @__PURE__ */ jsx28(
5388
5514
  "span",
5389
5515
  {
5390
5516
  className: `text-xs capitalize px-2 py-1 rounded ${getNodeTypeColorClass(nodeType)}`,
@@ -5410,11 +5536,11 @@ import {
5410
5536
  useCallback as useCallback5,
5411
5537
  useMemo as useMemo14,
5412
5538
  useRef as useRef3,
5413
- memo as memo27
5539
+ memo as memo28
5414
5540
  } from "react";
5415
5541
  import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
5416
- import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
5417
- var StepWalkthrough_default = memo27(function StepWalkthrough({
5542
+ import { Fragment as Fragment6, jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
5543
+ var StepWalkthrough_default = memo28(function StepWalkthrough({
5418
5544
  nodes,
5419
5545
  edges,
5420
5546
  isFlowVisualization,
@@ -5573,14 +5699,14 @@ var StepWalkthrough_default = memo27(function StepWalkthrough({
5573
5699
  }
5574
5700
  return { title: title2, description: description2 };
5575
5701
  }, [currentStepIndex, currentNodeId, nodeIdsKey]);
5576
- return /* @__PURE__ */ jsxs27("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: [
5577
- /* @__PURE__ */ jsxs27("div", { className: "mb-2", children: [
5578
- /* @__PURE__ */ jsx28("h3", { className: "text-sm font-semibold text-[rgb(var(--ec-page-text))]", children: title }),
5579
- description && /* @__PURE__ */ jsx28("p", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: description })
5702
+ return /* @__PURE__ */ jsxs28("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: [
5703
+ /* @__PURE__ */ jsxs28("div", { className: "mb-2", children: [
5704
+ /* @__PURE__ */ jsx29("h3", { className: "text-sm font-semibold text-[rgb(var(--ec-page-text))]", children: title }),
5705
+ description && /* @__PURE__ */ jsx29("p", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: description })
5580
5706
  ] }),
5581
- currentNodeId && availablePaths.length > 1 && /* @__PURE__ */ jsxs27("div", { className: "mb-3", children: [
5582
- /* @__PURE__ */ jsx28("label", { className: "block text-xs font-medium text-[rgb(var(--ec-page-text-muted))] mb-2", children: "Choose next path:" }),
5583
- /* @__PURE__ */ jsx28(
5707
+ currentNodeId && availablePaths.length > 1 && /* @__PURE__ */ jsxs28("div", { className: "mb-3", children: [
5708
+ /* @__PURE__ */ jsx29("label", { className: "block text-xs font-medium text-[rgb(var(--ec-page-text-muted))] mb-2", children: "Choose next path:" }),
5709
+ /* @__PURE__ */ jsx29(
5584
5710
  "select",
5585
5711
  {
5586
5712
  value: selectedPathIndex,
@@ -5588,16 +5714,16 @@ var StepWalkthrough_default = memo27(function StepWalkthrough({
5588
5714
  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))]",
5589
5715
  children: availablePaths.map((path, index) => {
5590
5716
  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";
5591
- return /* @__PURE__ */ jsx28("option", { value: index, children: path.label ? `${path.label}: ${nodeLabel}` : nodeLabel }, path.targetId);
5717
+ return /* @__PURE__ */ jsx29("option", { value: index, children: path.label ? `${path.label}: ${nodeLabel}` : nodeLabel }, path.targetId);
5592
5718
  })
5593
5719
  }
5594
5720
  )
5595
5721
  ] }),
5596
- /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-between", children: currentStepIndex === -1 ? (
5722
+ /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-between", children: currentStepIndex === -1 ? (
5597
5723
  // Initial state - show only Start button on the right
5598
- /* @__PURE__ */ jsxs27(Fragment6, { children: [
5599
- /* @__PURE__ */ jsx28("div", { className: "flex-1" }),
5600
- /* @__PURE__ */ jsx28(
5724
+ /* @__PURE__ */ jsxs28(Fragment6, { children: [
5725
+ /* @__PURE__ */ jsx29("div", { className: "flex-1" }),
5726
+ /* @__PURE__ */ jsx29(
5601
5727
  "button",
5602
5728
  {
5603
5729
  onClick: handleNextStep,
@@ -5608,29 +5734,29 @@ var StepWalkthrough_default = memo27(function StepWalkthrough({
5608
5734
  ] })
5609
5735
  ) : (
5610
5736
  // In walkthrough - show Previous on left, Next on right (only if paths available)
5611
- /* @__PURE__ */ jsxs27(Fragment6, { children: [
5612
- /* @__PURE__ */ jsxs27(
5737
+ /* @__PURE__ */ jsxs28(Fragment6, { children: [
5738
+ /* @__PURE__ */ jsxs28(
5613
5739
  "button",
5614
5740
  {
5615
5741
  onClick: handlePreviousStep,
5616
5742
  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",
5617
5743
  children: [
5618
- /* @__PURE__ */ jsx28(ChevronLeftIcon, { className: "w-4 h-4 mr-1" }),
5744
+ /* @__PURE__ */ jsx29(ChevronLeftIcon, { className: "w-4 h-4 mr-1" }),
5619
5745
  "Previous"
5620
5746
  ]
5621
5747
  }
5622
5748
  ),
5623
- availablePaths.length > 0 ? /* @__PURE__ */ jsxs27(
5749
+ availablePaths.length > 0 ? /* @__PURE__ */ jsxs28(
5624
5750
  "button",
5625
5751
  {
5626
5752
  onClick: handleNextStep,
5627
5753
  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",
5628
5754
  children: [
5629
5755
  "Next",
5630
- /* @__PURE__ */ jsx28(ChevronRightIcon, { className: "w-4 h-4 ml-1" })
5756
+ /* @__PURE__ */ jsx29(ChevronRightIcon, { className: "w-4 h-4 ml-1" })
5631
5757
  ]
5632
5758
  }
5633
- ) : /* @__PURE__ */ jsx28(
5759
+ ) : /* @__PURE__ */ jsx29(
5634
5760
  "button",
5635
5761
  {
5636
5762
  onClick: handleFinish,
@@ -5710,7 +5836,7 @@ var exportNodeGraphForStudio = (data) => {
5710
5836
  };
5711
5837
 
5712
5838
  // src/components/StudioModal.tsx
5713
- import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
5839
+ import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
5714
5840
  var StudioModal = ({ isOpen, onClose }) => {
5715
5841
  const [copySuccess, setCopySuccess] = useState7(false);
5716
5842
  const portalContainer = usePortalContainer();
@@ -5741,14 +5867,14 @@ var StudioModal = ({ isOpen, onClose }) => {
5741
5867
  );
5742
5868
  onClose();
5743
5869
  };
5744
- return /* @__PURE__ */ jsx29(Dialog2.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs28(Dialog2.Portal, { container: portalContainer, children: [
5745
- /* @__PURE__ */ jsx29(Dialog2.Overlay, { className: "fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" }),
5746
- /* @__PURE__ */ jsxs28(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: [
5747
- /* @__PURE__ */ jsx29(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-3", children: "Open in EventCatalog Studio" }),
5748
- /* @__PURE__ */ jsxs28(Dialog2.Description, { className: "text-sm text-gray-600 mb-6", children: [
5870
+ return /* @__PURE__ */ jsx30(Dialog2.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs29(Dialog2.Portal, { container: portalContainer, children: [
5871
+ /* @__PURE__ */ jsx30(Dialog2.Overlay, { className: "fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" }),
5872
+ /* @__PURE__ */ jsxs29(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: [
5873
+ /* @__PURE__ */ jsx30(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-3", children: "Open in EventCatalog Studio" }),
5874
+ /* @__PURE__ */ jsxs29(Dialog2.Description, { className: "text-sm text-gray-600 mb-6", children: [
5749
5875
  "Import your diagram into",
5750
5876
  " ",
5751
- /* @__PURE__ */ jsx29(
5877
+ /* @__PURE__ */ jsx30(
5752
5878
  "a",
5753
5879
  {
5754
5880
  href: "https://eventcatalog.studio",
@@ -5761,43 +5887,43 @@ var StudioModal = ({ isOpen, onClose }) => {
5761
5887
  " ",
5762
5888
  "to create designs from your visualization of your architecture."
5763
5889
  ] }),
5764
- /* @__PURE__ */ jsxs28("div", { className: "space-y-4", children: [
5765
- /* @__PURE__ */ jsxs28("div", { className: "bg-gray-50 rounded-lg p-4 border border-gray-200", children: [
5766
- /* @__PURE__ */ jsx29("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 1: Copy diagram" }),
5767
- /* @__PURE__ */ jsx29("p", { className: "text-xs text-gray-600 mb-3", children: "Copy your diagram data to your clipboard." }),
5768
- /* @__PURE__ */ jsx29(
5890
+ /* @__PURE__ */ jsxs29("div", { className: "space-y-4", children: [
5891
+ /* @__PURE__ */ jsxs29("div", { className: "bg-gray-50 rounded-lg p-4 border border-gray-200", children: [
5892
+ /* @__PURE__ */ jsx30("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 1: Copy diagram" }),
5893
+ /* @__PURE__ */ jsx30("p", { className: "text-xs text-gray-600 mb-3", children: "Copy your diagram data to your clipboard." }),
5894
+ /* @__PURE__ */ jsx30(
5769
5895
  "button",
5770
5896
  {
5771
5897
  onClick: handleCopyToClipboard,
5772
5898
  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"}`,
5773
- children: copySuccess ? /* @__PURE__ */ jsxs28(Fragment7, { children: [
5774
- /* @__PURE__ */ jsx29(CheckIcon, { className: "w-4 h-4" }),
5775
- /* @__PURE__ */ jsx29("span", { children: "Copied!" })
5776
- ] }) : /* @__PURE__ */ jsxs28(Fragment7, { children: [
5777
- /* @__PURE__ */ jsx29(ClipboardIcon, { className: "w-4 h-4" }),
5778
- /* @__PURE__ */ jsx29("span", { children: "Copy diagram to clipboard" })
5899
+ children: copySuccess ? /* @__PURE__ */ jsxs29(Fragment7, { children: [
5900
+ /* @__PURE__ */ jsx30(CheckIcon, { className: "w-4 h-4" }),
5901
+ /* @__PURE__ */ jsx30("span", { children: "Copied!" })
5902
+ ] }) : /* @__PURE__ */ jsxs29(Fragment7, { children: [
5903
+ /* @__PURE__ */ jsx30(ClipboardIcon, { className: "w-4 h-4" }),
5904
+ /* @__PURE__ */ jsx30("span", { children: "Copy diagram to clipboard" })
5779
5905
  ] })
5780
5906
  }
5781
5907
  )
5782
5908
  ] }),
5783
- /* @__PURE__ */ jsxs28("div", { className: "bg-[rgb(var(--ec-accent-subtle))] rounded-lg p-4 border border-[rgb(var(--ec-accent)/0.3)]", children: [
5784
- /* @__PURE__ */ jsx29("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 2: Open EventCatalog Studio" }),
5785
- /* @__PURE__ */ jsx29("p", { className: "text-xs text-gray-600 mb-3", children: 'Go to EventCatalog Studio and import your design using the "Import from EventCatalog" button.' }),
5786
- /* @__PURE__ */ jsxs28(
5909
+ /* @__PURE__ */ jsxs29("div", { className: "bg-[rgb(var(--ec-accent-subtle))] rounded-lg p-4 border border-[rgb(var(--ec-accent)/0.3)]", children: [
5910
+ /* @__PURE__ */ jsx30("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 2: Open EventCatalog Studio" }),
5911
+ /* @__PURE__ */ jsx30("p", { className: "text-xs text-gray-600 mb-3", children: 'Go to EventCatalog Studio and import your design using the "Import from EventCatalog" button.' }),
5912
+ /* @__PURE__ */ jsxs29(
5787
5913
  "button",
5788
5914
  {
5789
5915
  onClick: handleOpenStudio,
5790
5916
  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",
5791
5917
  children: [
5792
- /* @__PURE__ */ jsx29(ExternalLinkIcon, { className: "w-4 h-4" }),
5793
- /* @__PURE__ */ jsx29("span", { children: "Open EventCatalog Studio" })
5918
+ /* @__PURE__ */ jsx30(ExternalLinkIcon, { className: "w-4 h-4" }),
5919
+ /* @__PURE__ */ jsx30("span", { children: "Open EventCatalog Studio" })
5794
5920
  ]
5795
5921
  }
5796
5922
  ),
5797
- /* @__PURE__ */ jsx29("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." })
5923
+ /* @__PURE__ */ jsx30("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." })
5798
5924
  ] })
5799
5925
  ] }),
5800
- /* @__PURE__ */ jsx29("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsx29(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx29(
5926
+ /* @__PURE__ */ jsx30("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsx30(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx30(
5801
5927
  "button",
5802
5928
  {
5803
5929
  type: "button",
@@ -5865,6 +5991,15 @@ var ENTITY_KEYS = [
5865
5991
  function getNodeDisplayInfo(node) {
5866
5992
  const nodeType = node.type || "unknown";
5867
5993
  const data = node.data;
5994
+ if (nodeType === "field") {
5995
+ return {
5996
+ id: node.id,
5997
+ name: data?.name || node.id,
5998
+ type: "field",
5999
+ version: void 0,
6000
+ description: `Type: ${data?.type || "unknown"}`
6001
+ };
6002
+ }
5868
6003
  const entityKey = ENTITY_KEYS.find((key) => data[key]);
5869
6004
  const entity = entityKey ? data[entityKey] : null;
5870
6005
  const name = entity?.data?.name || entity?.id || data.label || data.name || node.id;
@@ -5915,9 +6050,9 @@ function getNodeDocUrl(node) {
5915
6050
  }
5916
6051
 
5917
6052
  // src/components/FocusMode/FocusModeNodeActions.tsx
5918
- import { NodeToolbar, Position as Position16, useViewport } from "@xyflow/react";
6053
+ import { NodeToolbar, Position as Position17, useViewport } from "@xyflow/react";
5919
6054
  import { ArrowRightLeft as ArrowRightLeft2, FileText } from "lucide-react";
5920
- import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
6055
+ import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
5921
6056
  var FocusModeNodeActions = ({
5922
6057
  node,
5923
6058
  isCenter,
@@ -5944,26 +6079,26 @@ var FocusModeNodeActions = ({
5944
6079
  };
5945
6080
  if (isCenter) {
5946
6081
  if (!docUrl) return null;
5947
- return /* @__PURE__ */ jsx30(
6082
+ return /* @__PURE__ */ jsx31(
5948
6083
  NodeToolbar,
5949
6084
  {
5950
6085
  nodeId: node.id,
5951
- position: Position16.Bottom,
6086
+ position: Position17.Bottom,
5952
6087
  isVisible: true,
5953
6088
  offset: -16,
5954
- children: /* @__PURE__ */ jsx30(
6089
+ children: /* @__PURE__ */ jsx31(
5955
6090
  "div",
5956
6091
  {
5957
6092
  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",
5958
6093
  style: { padding: Math.round(4 * scaleFactor) },
5959
- children: /* @__PURE__ */ jsx30(
6094
+ children: /* @__PURE__ */ jsx31(
5960
6095
  "button",
5961
6096
  {
5962
6097
  onClick: handleDocClick,
5963
6098
  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",
5964
6099
  style: { width: buttonSize, height: buttonSize },
5965
6100
  title: "View documentation",
5966
- children: /* @__PURE__ */ jsx30(FileText, { style: { width: iconSize, height: iconSize } })
6101
+ children: /* @__PURE__ */ jsx31(FileText, { style: { width: iconSize, height: iconSize } })
5967
6102
  }
5968
6103
  )
5969
6104
  }
@@ -5971,37 +6106,37 @@ var FocusModeNodeActions = ({
5971
6106
  }
5972
6107
  );
5973
6108
  }
5974
- return /* @__PURE__ */ jsx30(
6109
+ return /* @__PURE__ */ jsx31(
5975
6110
  NodeToolbar,
5976
6111
  {
5977
6112
  nodeId: node.id,
5978
- position: Position16.Bottom,
6113
+ position: Position17.Bottom,
5979
6114
  isVisible: true,
5980
6115
  offset: -16,
5981
- children: /* @__PURE__ */ jsxs29(
6116
+ children: /* @__PURE__ */ jsxs30(
5982
6117
  "div",
5983
6118
  {
5984
6119
  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",
5985
6120
  style: { padding: Math.round(4 * scaleFactor) },
5986
6121
  children: [
5987
- docUrl && /* @__PURE__ */ jsx30(
6122
+ docUrl && /* @__PURE__ */ jsx31(
5988
6123
  "button",
5989
6124
  {
5990
6125
  onClick: handleDocClick,
5991
6126
  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",
5992
6127
  style: { width: buttonSize, height: buttonSize },
5993
6128
  title: "View documentation",
5994
- children: /* @__PURE__ */ jsx30(FileText, { style: { width: iconSize, height: iconSize } })
6129
+ children: /* @__PURE__ */ jsx31(FileText, { style: { width: iconSize, height: iconSize } })
5995
6130
  }
5996
6131
  ),
5997
- /* @__PURE__ */ jsx30(
6132
+ /* @__PURE__ */ jsx31(
5998
6133
  "button",
5999
6134
  {
6000
6135
  onClick: handleSwitch,
6001
6136
  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",
6002
6137
  style: { width: buttonSize, height: buttonSize },
6003
6138
  title: "Focus on this node",
6004
- children: /* @__PURE__ */ jsx30(ArrowRightLeft2, { style: { width: iconSize, height: iconSize } })
6139
+ children: /* @__PURE__ */ jsx31(ArrowRightLeft2, { style: { width: iconSize, height: iconSize } })
6005
6140
  }
6006
6141
  )
6007
6142
  ]
@@ -6013,32 +6148,32 @@ var FocusModeNodeActions = ({
6013
6148
  var FocusModeNodeActions_default = FocusModeNodeActions;
6014
6149
 
6015
6150
  // src/components/FocusMode/FocusModePlaceholder.tsx
6016
- import { Handle as Handle19, Position as Position17 } from "@xyflow/react";
6017
- import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
6151
+ import { Handle as Handle20, Position as Position18 } from "@xyflow/react";
6152
+ import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
6018
6153
  var FocusModePlaceholder = ({
6019
6154
  data
6020
6155
  }) => {
6021
6156
  const { label, side } = data;
6022
- return /* @__PURE__ */ jsxs30(
6157
+ return /* @__PURE__ */ jsxs31(
6023
6158
  "div",
6024
6159
  {
6025
6160
  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",
6026
6161
  style: { opacity: 0.6, minHeight: "130px" },
6027
6162
  children: [
6028
- side === "right" && /* @__PURE__ */ jsx31(
6029
- Handle19,
6163
+ side === "right" && /* @__PURE__ */ jsx32(
6164
+ Handle20,
6030
6165
  {
6031
6166
  type: "target",
6032
- position: Position17.Left,
6167
+ position: Position18.Left,
6033
6168
  style: { visibility: "hidden" }
6034
6169
  }
6035
6170
  ),
6036
- /* @__PURE__ */ jsx31("div", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] italic", children: label }),
6037
- side === "left" && /* @__PURE__ */ jsx31(
6038
- Handle19,
6171
+ /* @__PURE__ */ jsx32("div", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] italic", children: label }),
6172
+ side === "left" && /* @__PURE__ */ jsx32(
6173
+ Handle20,
6039
6174
  {
6040
6175
  type: "source",
6041
- position: Position17.Right,
6176
+ position: Position18.Right,
6042
6177
  style: { visibility: "hidden" }
6043
6178
  }
6044
6179
  )
@@ -6049,7 +6184,7 @@ var FocusModePlaceholder = ({
6049
6184
  var FocusModePlaceholder_default = FocusModePlaceholder;
6050
6185
 
6051
6186
  // src/components/FocusMode/FocusModeContent.tsx
6052
- import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
6187
+ import { jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
6053
6188
  var HORIZONTAL_SPACING = 450;
6054
6189
  var VERTICAL_SPACING = 200;
6055
6190
  var SLIDE_DURATION = 300;
@@ -6258,14 +6393,14 @@ var FocusModeContent = ({
6258
6393
  [nodeTypes]
6259
6394
  );
6260
6395
  if (displayNodes.length === 0) {
6261
- return /* @__PURE__ */ jsx32("div", { className: "flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]", children: "Node not found" });
6396
+ return /* @__PURE__ */ jsx33("div", { className: "flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]", children: "Node not found" });
6262
6397
  }
6263
- return /* @__PURE__ */ jsx32(
6398
+ return /* @__PURE__ */ jsx33(
6264
6399
  "div",
6265
6400
  {
6266
6401
  className: "h-full w-full focus-mode-container",
6267
6402
  style: { opacity: isReady ? 1 : 0 },
6268
- children: /* @__PURE__ */ jsxs31(
6403
+ children: /* @__PURE__ */ jsxs32(
6269
6404
  ReactFlow,
6270
6405
  {
6271
6406
  nodes: displayNodes,
@@ -6285,9 +6420,9 @@ var FocusModeContent = ({
6285
6420
  minZoom: 0.3,
6286
6421
  maxZoom: 2,
6287
6422
  children: [
6288
- /* @__PURE__ */ jsx32(Background, { color: "rgb(var(--ec-page-border))", gap: 20 }),
6289
- /* @__PURE__ */ jsx32(Controls, { showInteractive: false }),
6290
- displayNodes.map((node, index) => /* @__PURE__ */ jsx32(
6423
+ /* @__PURE__ */ jsx33(Background, { color: "rgb(var(--ec-page-border))", gap: 20 }),
6424
+ /* @__PURE__ */ jsx33(Controls, { showInteractive: false }),
6425
+ displayNodes.map((node, index) => /* @__PURE__ */ jsx33(
6291
6426
  FocusModeNodeActions_default,
6292
6427
  {
6293
6428
  node,
@@ -6305,7 +6440,7 @@ var FocusModeContent = ({
6305
6440
  var FocusModeContent_default = FocusModeContent;
6306
6441
 
6307
6442
  // src/components/FocusModeModal.tsx
6308
- import { jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
6443
+ import { jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
6309
6444
  var FocusModeModal = ({
6310
6445
  isOpen,
6311
6446
  onClose,
@@ -6336,7 +6471,7 @@ var FocusModeModal = ({
6336
6471
  if (!centerNodeId) {
6337
6472
  return null;
6338
6473
  }
6339
- return /* @__PURE__ */ jsx33(Dialog3.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx33(Dialog3.Portal, { children: /* @__PURE__ */ jsxs32(
6474
+ return /* @__PURE__ */ jsx34(Dialog3.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx34(Dialog3.Portal, { children: /* @__PURE__ */ jsxs33(
6340
6475
  "div",
6341
6476
  {
6342
6477
  className: "eventcatalog-visualizer",
@@ -6347,7 +6482,7 @@ var FocusModeModal = ({
6347
6482
  zIndex: 99999
6348
6483
  },
6349
6484
  children: [
6350
- /* @__PURE__ */ jsx33(
6485
+ /* @__PURE__ */ jsx34(
6351
6486
  Dialog3.Overlay,
6352
6487
  {
6353
6488
  style: {
@@ -6358,7 +6493,7 @@ var FocusModeModal = ({
6358
6493
  }
6359
6494
  }
6360
6495
  ),
6361
- /* @__PURE__ */ jsxs32(
6496
+ /* @__PURE__ */ jsxs33(
6362
6497
  Dialog3.Content,
6363
6498
  {
6364
6499
  style: {
@@ -6374,7 +6509,7 @@ var FocusModeModal = ({
6374
6509
  overflow: "hidden"
6375
6510
  },
6376
6511
  children: [
6377
- /* @__PURE__ */ jsxs32(
6512
+ /* @__PURE__ */ jsxs33(
6378
6513
  "div",
6379
6514
  {
6380
6515
  style: {
@@ -6386,8 +6521,8 @@ var FocusModeModal = ({
6386
6521
  flexShrink: 0
6387
6522
  },
6388
6523
  children: [
6389
- /* @__PURE__ */ jsxs32("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
6390
- /* @__PURE__ */ jsx33(
6524
+ /* @__PURE__ */ jsxs33("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
6525
+ /* @__PURE__ */ jsx34(
6391
6526
  "div",
6392
6527
  {
6393
6528
  style: {
@@ -6399,7 +6534,7 @@ var FocusModeModal = ({
6399
6534
  borderRadius: 10,
6400
6535
  background: isDark ? "rgba(59, 130, 246, 0.18)" : "rgba(59, 130, 246, 0.12)"
6401
6536
  },
6402
- children: /* @__PURE__ */ jsx33(
6537
+ children: /* @__PURE__ */ jsx34(
6403
6538
  FocusIcon,
6404
6539
  {
6405
6540
  style: {
@@ -6411,8 +6546,8 @@ var FocusModeModal = ({
6411
6546
  )
6412
6547
  }
6413
6548
  ),
6414
- /* @__PURE__ */ jsxs32("div", { children: [
6415
- /* @__PURE__ */ jsx33(
6549
+ /* @__PURE__ */ jsxs33("div", { children: [
6550
+ /* @__PURE__ */ jsx34(
6416
6551
  Dialog3.Title,
6417
6552
  {
6418
6553
  style: {
@@ -6423,7 +6558,7 @@ var FocusModeModal = ({
6423
6558
  children: "Focus Mode"
6424
6559
  }
6425
6560
  ),
6426
- /* @__PURE__ */ jsx33(
6561
+ /* @__PURE__ */ jsx34(
6427
6562
  Dialog3.Description,
6428
6563
  {
6429
6564
  style: {
@@ -6436,7 +6571,7 @@ var FocusModeModal = ({
6436
6571
  )
6437
6572
  ] })
6438
6573
  ] }),
6439
- /* @__PURE__ */ jsx33(Dialog3.Close, { asChild: true, children: /* @__PURE__ */ jsx33(
6574
+ /* @__PURE__ */ jsx34(Dialog3.Close, { asChild: true, children: /* @__PURE__ */ jsx34(
6440
6575
  "button",
6441
6576
  {
6442
6577
  style: {
@@ -6452,13 +6587,13 @@ var FocusModeModal = ({
6452
6587
  color: isDark ? "#94a3b8" : "#64748b"
6453
6588
  },
6454
6589
  "aria-label": "Close",
6455
- children: /* @__PURE__ */ jsx33(XIcon2, { style: { width: 20, height: 20 } })
6590
+ children: /* @__PURE__ */ jsx34(XIcon2, { style: { width: 20, height: 20 } })
6456
6591
  }
6457
6592
  ) })
6458
6593
  ]
6459
6594
  }
6460
6595
  ),
6461
- /* @__PURE__ */ jsx33("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx33(ReactFlowProvider, { children: /* @__PURE__ */ jsx33(
6596
+ /* @__PURE__ */ jsx34("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx34(ReactFlowProvider, { children: /* @__PURE__ */ jsx34(
6462
6597
  FocusModeContent_default,
6463
6598
  {
6464
6599
  centerNodeId,
@@ -6526,8 +6661,12 @@ var NODE_SHAPE_MAP = {
6526
6661
  // rectangle
6527
6662
  view: ["[", "]"],
6528
6663
  // rectangle
6529
- note: ["[", "]"]
6664
+ note: ["[", "]"],
6530
6665
  // rectangle
6666
+ field: ["[(", ")]"],
6667
+ // cylinder
6668
+ fields: ["[(", ")]"]
6669
+ // cylinder
6531
6670
  };
6532
6671
  var NODE_STYLE_CLASSES = {
6533
6672
  services: "fill:#ec4899,stroke:#be185d,color:#fff",
@@ -6556,7 +6695,9 @@ var NODE_STYLE_CLASSES = {
6556
6695
  entity: "fill:#6b7280,stroke:#374151,color:#fff",
6557
6696
  custom: "fill:#9ca3af,stroke:#6b7280,color:#000",
6558
6697
  view: "fill:#9ca3af,stroke:#6b7280,color:#000",
6559
- note: "fill:#fef3c7,stroke:#d97706,color:#000"
6698
+ note: "fill:#fef3c7,stroke:#d97706,color:#000",
6699
+ field: "fill:#06b6d4,stroke:#0891b2,color:#fff",
6700
+ fields: "fill:#06b6d4,stroke:#0891b2,color:#fff"
6560
6701
  };
6561
6702
  function sanitizeMermaidId(id) {
6562
6703
  return id.replace(/[^a-zA-Z0-9_]/g, "_");
@@ -6635,6 +6776,11 @@ function getNodeLabel(node) {
6635
6776
  if (type === "note") {
6636
6777
  return data.text || data.label || "Note";
6637
6778
  }
6779
+ if (type === "field" || type === "fields") {
6780
+ const name = data.name || node.id;
6781
+ const fieldType = data.type;
6782
+ return fieldType ? `${name} (${fieldType})` : name;
6783
+ }
6638
6784
  return data.name || data.label || data.title || data.id || node.id;
6639
6785
  }
6640
6786
  function getEdgeLabel(edge) {
@@ -6719,7 +6865,7 @@ async function copyToClipboard(text) {
6719
6865
  }
6720
6866
 
6721
6867
  // src/components/MermaidView.tsx
6722
- import { jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
6868
+ import { jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
6723
6869
  var MermaidView = ({
6724
6870
  nodes,
6725
6871
  edges,
@@ -6829,51 +6975,51 @@ var MermaidView = ({
6829
6975
  setCopySuccess(true);
6830
6976
  setTimeout(() => setCopySuccess(false), 2e3);
6831
6977
  }, [mermaidCode]);
6832
- return /* @__PURE__ */ jsxs33(
6978
+ return /* @__PURE__ */ jsxs34(
6833
6979
  "div",
6834
6980
  {
6835
6981
  ref: containerRef,
6836
6982
  className: "absolute inset-0 bg-[rgb(var(--ec-page-bg))]",
6837
6983
  style: { animation: "fadeIn 200ms ease-out" },
6838
6984
  children: [
6839
- /* @__PURE__ */ jsx34("style", { children: `
6985
+ /* @__PURE__ */ jsx35("style", { children: `
6840
6986
  @keyframes fadeIn {
6841
6987
  from { opacity: 0; }
6842
6988
  to { opacity: 1; }
6843
6989
  }
6844
6990
  ` }),
6845
- /* @__PURE__ */ jsx34("div", { className: "absolute top-[10px] right-4 z-20", children: /* @__PURE__ */ jsxs33("div", { className: "relative group", children: [
6846
- /* @__PURE__ */ jsx34(
6991
+ /* @__PURE__ */ jsx35("div", { className: "absolute top-[10px] right-4 z-20", children: /* @__PURE__ */ jsxs34("div", { className: "relative group", children: [
6992
+ /* @__PURE__ */ jsx35(
6847
6993
  "button",
6848
6994
  {
6849
6995
  onClick: handleCopyToClipboard,
6850
6996
  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"}`,
6851
6997
  "aria-label": copySuccess ? "Copied!" : "Copy Mermaid code",
6852
- children: copySuccess ? /* @__PURE__ */ jsx34(CheckIcon2, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx34(ClipboardIcon2, { className: "h-5 w-5" })
6998
+ children: copySuccess ? /* @__PURE__ */ jsx35(CheckIcon2, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx35(ClipboardIcon2, { className: "h-5 w-5" })
6853
6999
  }
6854
7000
  ),
6855
- /* @__PURE__ */ jsx34("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" })
7001
+ /* @__PURE__ */ jsx35("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" })
6856
7002
  ] }) }),
6857
- /* @__PURE__ */ jsxs33("div", { className: "absolute inset-0 overflow-hidden", children: [
6858
- isRendering && /* @__PURE__ */ jsx34("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs33("div", { className: "relative", children: [
6859
- /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-4 opacity-40", children: [
6860
- /* @__PURE__ */ jsx34("div", { className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse" }),
6861
- /* @__PURE__ */ jsx34("div", { className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse" }),
6862
- /* @__PURE__ */ jsx34(
7003
+ /* @__PURE__ */ jsxs34("div", { className: "absolute inset-0 overflow-hidden", children: [
7004
+ isRendering && /* @__PURE__ */ jsx35("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs34("div", { className: "relative", children: [
7005
+ /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-4 opacity-40", children: [
7006
+ /* @__PURE__ */ jsx35("div", { className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse" }),
7007
+ /* @__PURE__ */ jsx35("div", { className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse" }),
7008
+ /* @__PURE__ */ jsx35(
6863
7009
  "div",
6864
7010
  {
6865
7011
  className: "w-20 h-10 bg-[rgb(var(--ec-page-border))] rounded-full animate-pulse",
6866
7012
  style: { animationDelay: "75ms" }
6867
7013
  }
6868
7014
  ),
6869
- /* @__PURE__ */ jsx34(
7015
+ /* @__PURE__ */ jsx35(
6870
7016
  "div",
6871
7017
  {
6872
7018
  className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse",
6873
7019
  style: { animationDelay: "150ms" }
6874
7020
  }
6875
7021
  ),
6876
- /* @__PURE__ */ jsx34(
7022
+ /* @__PURE__ */ jsx35(
6877
7023
  "div",
6878
7024
  {
6879
7025
  className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse",
@@ -6881,14 +7027,14 @@ var MermaidView = ({
6881
7027
  }
6882
7028
  )
6883
7029
  ] }),
6884
- /* @__PURE__ */ jsx34("p", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] mt-4", children: "Rendering diagram..." })
7030
+ /* @__PURE__ */ jsx35("p", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] mt-4", children: "Rendering diagram..." })
6885
7031
  ] }) }),
6886
- previewError && !isRendering && /* @__PURE__ */ jsxs33("div", { className: "w-full h-full flex flex-col items-center justify-center p-4", children: [
6887
- /* @__PURE__ */ jsx34("div", { className: "text-red-500 text-sm mb-2", children: "Failed to render diagram" }),
6888
- /* @__PURE__ */ jsx34("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 }),
6889
- /* @__PURE__ */ jsxs33("div", { className: "mt-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: [
6890
- /* @__PURE__ */ jsx34("p", { children: "You can still copy the Mermaid code and paste it into" }),
6891
- /* @__PURE__ */ jsx34(
7032
+ previewError && !isRendering && /* @__PURE__ */ jsxs34("div", { className: "w-full h-full flex flex-col items-center justify-center p-4", children: [
7033
+ /* @__PURE__ */ jsx35("div", { className: "text-red-500 text-sm mb-2", children: "Failed to render diagram" }),
7034
+ /* @__PURE__ */ jsx35("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 }),
7035
+ /* @__PURE__ */ jsxs34("div", { className: "mt-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: [
7036
+ /* @__PURE__ */ jsx35("p", { children: "You can still copy the Mermaid code and paste it into" }),
7037
+ /* @__PURE__ */ jsx35(
6892
7038
  "a",
6893
7039
  {
6894
7040
  href: "https://mermaid.live",
@@ -6900,7 +7046,7 @@ var MermaidView = ({
6900
7046
  )
6901
7047
  ] })
6902
7048
  ] }),
6903
- previewSvg && !isRendering && !previewError && /* @__PURE__ */ jsx34(
7049
+ previewSvg && !isRendering && !previewError && /* @__PURE__ */ jsx35(
6904
7050
  "div",
6905
7051
  {
6906
7052
  ref: svgContainerRef,
@@ -6909,15 +7055,15 @@ var MermaidView = ({
6909
7055
  }
6910
7056
  )
6911
7057
  ] }),
6912
- /* @__PURE__ */ jsx34("div", { className: "absolute bottom-4 left-4 z-20", children: /* @__PURE__ */ jsxs33("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: [
6913
- /* @__PURE__ */ jsx34(
7058
+ /* @__PURE__ */ jsx35("div", { className: "absolute bottom-4 left-4 z-20", children: /* @__PURE__ */ jsxs34("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: [
7059
+ /* @__PURE__ */ jsx35(
6914
7060
  "svg",
6915
7061
  {
6916
7062
  className: "w-3.5 h-3.5 text-[rgb(var(--ec-icon-color))]",
6917
7063
  fill: "none",
6918
7064
  viewBox: "0 0 24 24",
6919
7065
  stroke: "currentColor",
6920
- children: /* @__PURE__ */ jsx34(
7066
+ children: /* @__PURE__ */ jsx35(
6921
7067
  "path",
6922
7068
  {
6923
7069
  strokeLinecap: "round",
@@ -6928,7 +7074,7 @@ var MermaidView = ({
6928
7074
  )
6929
7075
  }
6930
7076
  ),
6931
- /* @__PURE__ */ jsx34("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Scroll to zoom \xB7 Drag to pan" })
7077
+ /* @__PURE__ */ jsx35("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Scroll to zoom \xB7 Drag to pan" })
6932
7078
  ] }) })
6933
7079
  ]
6934
7080
  }
@@ -6940,7 +7086,7 @@ var MermaidView_default = MermaidView;
6940
7086
  import { useCallback as useCallback10, useMemo as useMemo16, useState as useState11, useEffect as useEffect7 } from "react";
6941
7087
 
6942
7088
  // src/utils/utils/utils.ts
6943
- import { MarkerType as MarkerType5, Position as Position18 } from "@xyflow/react";
7089
+ import { MarkerType as MarkerType6, Position as Position19 } from "@xyflow/react";
6944
7090
  import dagre from "dagre";
6945
7091
  var generateIdForNode = (node) => {
6946
7092
  return `${node.data.id}-${node.data.version}`;
@@ -7015,7 +7161,7 @@ var createEdge = (edgeOptions) => {
7015
7161
  // height: 40,
7016
7162
  // },
7017
7163
  markerEnd: {
7018
- type: MarkerType5.ArrowClosed,
7164
+ type: MarkerType6.ArrowClosed,
7019
7165
  width: 40,
7020
7166
  height: 40,
7021
7167
  color: "rgb(var(--ec-page-text-muted))"
@@ -7030,8 +7176,8 @@ var createEdge = (edgeOptions) => {
7030
7176
  };
7031
7177
  var createNode = (values) => {
7032
7178
  return {
7033
- sourcePosition: Position18.Right,
7034
- targetPosition: Position18.Left,
7179
+ sourcePosition: Position19.Right,
7180
+ targetPosition: Position19.Left,
7035
7181
  ...values
7036
7182
  };
7037
7183
  };
@@ -7153,7 +7299,7 @@ var useChannelVisibility = ({
7153
7299
  };
7154
7300
 
7155
7301
  // src/components/VisualizerDropdownContent.tsx
7156
- import { useState as useState12, memo as memo28 } from "react";
7302
+ import { useState as useState12, memo as memo29 } from "react";
7157
7303
  import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
7158
7304
  import {
7159
7305
  Code,
@@ -7175,8 +7321,8 @@ import {
7175
7321
  DocumentArrowDownIcon,
7176
7322
  PresentationChartLineIcon
7177
7323
  } from "@heroicons/react/24/outline";
7178
- import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
7179
- var VisualizerDropdownContent = memo28(
7324
+ import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs35 } from "react/jsx-runtime";
7325
+ var VisualizerDropdownContent = memo29(
7180
7326
  ({
7181
7327
  isMermaidView,
7182
7328
  setIsMermaidView,
@@ -7225,19 +7371,19 @@ var VisualizerDropdownContent = memo28(
7225
7371
  setLayoutStatus("idle");
7226
7372
  }
7227
7373
  };
7228
- return /* @__PURE__ */ jsxs34(Fragment8, { children: [
7229
- /* @__PURE__ */ jsxs34(DropdownMenu.Sub, { children: [
7230
- /* @__PURE__ */ jsxs34(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: [
7231
- /* @__PURE__ */ jsx35(Grid3x3, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7232
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Canvas" }),
7233
- /* @__PURE__ */ jsx35(
7374
+ return /* @__PURE__ */ jsxs35(Fragment8, { children: [
7375
+ /* @__PURE__ */ jsxs35(DropdownMenu.Sub, { children: [
7376
+ /* @__PURE__ */ jsxs35(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: [
7377
+ /* @__PURE__ */ jsx36(Grid3x3, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7378
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Canvas" }),
7379
+ /* @__PURE__ */ jsx36(
7234
7380
  "svg",
7235
7381
  {
7236
7382
  className: "w-3 h-3 text-[rgb(var(--ec-page-text-muted))]",
7237
7383
  fill: "none",
7238
7384
  viewBox: "0 0 24 24",
7239
7385
  stroke: "currentColor",
7240
- children: /* @__PURE__ */ jsx35(
7386
+ children: /* @__PURE__ */ jsx36(
7241
7387
  "path",
7242
7388
  {
7243
7389
  strokeLinecap: "round",
@@ -7249,27 +7395,27 @@ var VisualizerDropdownContent = memo28(
7249
7395
  }
7250
7396
  )
7251
7397
  ] }),
7252
- /* @__PURE__ */ jsx35(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs34(
7398
+ /* @__PURE__ */ jsx36(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs35(
7253
7399
  DropdownMenu.SubContent,
7254
7400
  {
7255
7401
  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]",
7256
7402
  sideOffset: 8,
7257
7403
  alignOffset: -8,
7258
7404
  children: [
7259
- /* @__PURE__ */ jsxs34(
7405
+ /* @__PURE__ */ jsxs35(
7260
7406
  DropdownMenu.CheckboxItem,
7261
7407
  {
7262
7408
  checked: isMermaidView,
7263
7409
  onCheckedChange: setIsMermaidView,
7264
7410
  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",
7265
7411
  children: [
7266
- /* @__PURE__ */ jsx35(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7267
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Render as mermaid" }),
7268
- /* @__PURE__ */ jsx35(
7412
+ /* @__PURE__ */ jsx36(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7413
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Render as mermaid" }),
7414
+ /* @__PURE__ */ jsx36(
7269
7415
  "div",
7270
7416
  {
7271
7417
  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))]"}`,
7272
- children: /* @__PURE__ */ jsx35(
7418
+ children: /* @__PURE__ */ jsx36(
7273
7419
  "div",
7274
7420
  {
7275
7421
  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"}`
@@ -7280,21 +7426,21 @@ var VisualizerDropdownContent = memo28(
7280
7426
  ]
7281
7427
  }
7282
7428
  ),
7283
- /* @__PURE__ */ jsx35(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
7284
- /* @__PURE__ */ jsxs34(
7429
+ /* @__PURE__ */ jsx36(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
7430
+ /* @__PURE__ */ jsxs35(
7285
7431
  DropdownMenu.CheckboxItem,
7286
7432
  {
7287
7433
  checked: animateMessages,
7288
7434
  onCheckedChange: toggleAnimateMessages,
7289
7435
  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",
7290
7436
  children: [
7291
- /* @__PURE__ */ jsx35(Zap3, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7292
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Simulate Messages" }),
7293
- /* @__PURE__ */ jsx35(
7437
+ /* @__PURE__ */ jsx36(Zap3, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7438
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Simulate Messages" }),
7439
+ /* @__PURE__ */ jsx36(
7294
7440
  "div",
7295
7441
  {
7296
7442
  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))]"}`,
7297
- children: /* @__PURE__ */ jsx35(
7443
+ children: /* @__PURE__ */ jsx36(
7298
7444
  "div",
7299
7445
  {
7300
7446
  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"}`
@@ -7305,20 +7451,20 @@ var VisualizerDropdownContent = memo28(
7305
7451
  ]
7306
7452
  }
7307
7453
  ),
7308
- hasChannels && /* @__PURE__ */ jsxs34(
7454
+ hasChannels && /* @__PURE__ */ jsxs35(
7309
7455
  DropdownMenu.CheckboxItem,
7310
7456
  {
7311
7457
  checked: hideChannels,
7312
7458
  onCheckedChange: toggleChannelsVisibility,
7313
7459
  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",
7314
7460
  children: [
7315
- /* @__PURE__ */ jsx35(EyeOff, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7316
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Hide channels" }),
7317
- /* @__PURE__ */ jsx35(
7461
+ /* @__PURE__ */ jsx36(EyeOff, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7462
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Hide channels" }),
7463
+ /* @__PURE__ */ jsx36(
7318
7464
  "div",
7319
7465
  {
7320
7466
  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))]"}`,
7321
- children: /* @__PURE__ */ jsx35(
7467
+ children: /* @__PURE__ */ jsx36(
7322
7468
  "div",
7323
7469
  {
7324
7470
  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"}`
@@ -7329,20 +7475,20 @@ var VisualizerDropdownContent = memo28(
7329
7475
  ]
7330
7476
  }
7331
7477
  ),
7332
- /* @__PURE__ */ jsxs34(
7478
+ /* @__PURE__ */ jsxs35(
7333
7479
  DropdownMenu.CheckboxItem,
7334
7480
  {
7335
7481
  checked: showMinimap,
7336
7482
  onCheckedChange: setShowMinimap,
7337
7483
  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",
7338
7484
  children: [
7339
- /* @__PURE__ */ jsx35(Map2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7340
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Show minimap" }),
7341
- /* @__PURE__ */ jsx35(
7485
+ /* @__PURE__ */ jsx36(Map2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7486
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Show minimap" }),
7487
+ /* @__PURE__ */ jsx36(
7342
7488
  "div",
7343
7489
  {
7344
7490
  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))]"}`,
7345
- children: /* @__PURE__ */ jsx35(
7491
+ children: /* @__PURE__ */ jsx36(
7346
7492
  "div",
7347
7493
  {
7348
7494
  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"}`
@@ -7353,19 +7499,19 @@ var VisualizerDropdownContent = memo28(
7353
7499
  ]
7354
7500
  }
7355
7501
  ),
7356
- /* @__PURE__ */ jsx35(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
7357
- /* @__PURE__ */ jsxs34(
7502
+ /* @__PURE__ */ jsx36(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
7503
+ /* @__PURE__ */ jsxs35(
7358
7504
  DropdownMenu.Item,
7359
7505
  {
7360
7506
  onClick: handleFitView,
7361
7507
  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",
7362
7508
  children: [
7363
- /* @__PURE__ */ jsx35(Maximize2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7364
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Fit to view" })
7509
+ /* @__PURE__ */ jsx36(Maximize2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7510
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Fit to view" })
7365
7511
  ]
7366
7512
  }
7367
7513
  ),
7368
- /* @__PURE__ */ jsxs34(
7514
+ /* @__PURE__ */ jsxs35(
7369
7515
  DropdownMenu.Item,
7370
7516
  {
7371
7517
  onClick: () => {
@@ -7379,8 +7525,8 @@ var VisualizerDropdownContent = memo28(
7379
7525
  },
7380
7526
  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",
7381
7527
  children: [
7382
- /* @__PURE__ */ jsx35(Search2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7383
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Find on canvas" })
7528
+ /* @__PURE__ */ jsx36(Search2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7529
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Find on canvas" })
7384
7530
  ]
7385
7531
  }
7386
7532
  )
@@ -7388,14 +7534,14 @@ var VisualizerDropdownContent = memo28(
7388
7534
  }
7389
7535
  ) })
7390
7536
  ] }),
7391
- notesCount > 0 && onOpenNotes && /* @__PURE__ */ jsxs34(
7537
+ notesCount > 0 && onOpenNotes && /* @__PURE__ */ jsxs35(
7392
7538
  DropdownMenu.Item,
7393
7539
  {
7394
7540
  onClick: onOpenNotes,
7395
7541
  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",
7396
7542
  children: [
7397
- /* @__PURE__ */ jsx35(MessageCircle2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7398
- /* @__PURE__ */ jsxs34("span", { className: "flex-1 font-normal", children: [
7543
+ /* @__PURE__ */ jsx36(MessageCircle2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7544
+ /* @__PURE__ */ jsxs35("span", { className: "flex-1 font-normal", children: [
7399
7545
  "View notes (",
7400
7546
  notesCount,
7401
7547
  ")"
@@ -7403,19 +7549,19 @@ var VisualizerDropdownContent = memo28(
7403
7549
  ]
7404
7550
  }
7405
7551
  ),
7406
- isDevMode && onSaveLayout && /* @__PURE__ */ jsxs34(DropdownMenu.Sub, { children: [
7407
- /* @__PURE__ */ jsxs34(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: [
7408
- /* @__PURE__ */ jsx35(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7409
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Layout" }),
7410
- /* @__PURE__ */ jsx35("span", { className: "text-[10px] text-amber-600 font-medium", children: "DEV" }),
7411
- /* @__PURE__ */ jsx35(
7552
+ isDevMode && onSaveLayout && /* @__PURE__ */ jsxs35(DropdownMenu.Sub, { children: [
7553
+ /* @__PURE__ */ jsxs35(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: [
7554
+ /* @__PURE__ */ jsx36(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7555
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Layout" }),
7556
+ /* @__PURE__ */ jsx36("span", { className: "text-[10px] text-amber-600 font-medium", children: "DEV" }),
7557
+ /* @__PURE__ */ jsx36(
7412
7558
  "svg",
7413
7559
  {
7414
7560
  className: "w-3 h-3 text-[rgb(var(--ec-page-text-muted))]",
7415
7561
  fill: "none",
7416
7562
  viewBox: "0 0 24 24",
7417
7563
  stroke: "currentColor",
7418
- children: /* @__PURE__ */ jsx35(
7564
+ children: /* @__PURE__ */ jsx36(
7419
7565
  "path",
7420
7566
  {
7421
7567
  strokeLinecap: "round",
@@ -7427,34 +7573,34 @@ var VisualizerDropdownContent = memo28(
7427
7573
  }
7428
7574
  )
7429
7575
  ] }),
7430
- /* @__PURE__ */ jsx35(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs34(
7576
+ /* @__PURE__ */ jsx36(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs35(
7431
7577
  DropdownMenu.SubContent,
7432
7578
  {
7433
7579
  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]",
7434
7580
  sideOffset: 8,
7435
7581
  alignOffset: -8,
7436
7582
  children: [
7437
- /* @__PURE__ */ jsxs34(
7583
+ /* @__PURE__ */ jsxs35(
7438
7584
  DropdownMenu.Item,
7439
7585
  {
7440
7586
  onClick: handleSaveLayout,
7441
7587
  disabled: layoutStatus !== "idle",
7442
7588
  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",
7443
7589
  children: [
7444
- layoutStatus === "saving" ? /* @__PURE__ */ jsx35(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx35(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7445
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: layoutStatus === "saving" ? "Saving..." : "Save Layout" })
7590
+ layoutStatus === "saving" ? /* @__PURE__ */ jsx36(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx36(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7591
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: layoutStatus === "saving" ? "Saving..." : "Save Layout" })
7446
7592
  ]
7447
7593
  }
7448
7594
  ),
7449
- /* @__PURE__ */ jsxs34(
7595
+ /* @__PURE__ */ jsxs35(
7450
7596
  DropdownMenu.Item,
7451
7597
  {
7452
7598
  onClick: handleResetLayout,
7453
7599
  disabled: layoutStatus !== "idle",
7454
7600
  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",
7455
7601
  children: [
7456
- layoutStatus === "resetting" ? /* @__PURE__ */ jsx35(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx35(RotateCcw, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7457
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: layoutStatus === "resetting" ? "Resetting..." : "Reset Layout" })
7602
+ layoutStatus === "resetting" ? /* @__PURE__ */ jsx36(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx36(RotateCcw, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7603
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: layoutStatus === "resetting" ? "Resetting..." : "Reset Layout" })
7458
7604
  ]
7459
7605
  }
7460
7606
  )
@@ -7462,75 +7608,75 @@ var VisualizerDropdownContent = memo28(
7462
7608
  }
7463
7609
  ) })
7464
7610
  ] }),
7465
- isChatEnabled && /* @__PURE__ */ jsxs34(Fragment8, { children: [
7466
- /* @__PURE__ */ jsx35(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
7467
- /* @__PURE__ */ jsxs34(
7611
+ isChatEnabled && /* @__PURE__ */ jsxs35(Fragment8, { children: [
7612
+ /* @__PURE__ */ jsx36(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
7613
+ /* @__PURE__ */ jsxs35(
7468
7614
  DropdownMenu.Item,
7469
7615
  {
7470
7616
  onClick: openChat,
7471
7617
  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",
7472
7618
  children: [
7473
- /* @__PURE__ */ jsx35(Sparkles, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7474
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Ask a question" })
7619
+ /* @__PURE__ */ jsx36(Sparkles, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7620
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Ask a question" })
7475
7621
  ]
7476
7622
  }
7477
7623
  )
7478
7624
  ] }),
7479
- /* @__PURE__ */ jsx35(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
7480
- /* @__PURE__ */ jsxs34(
7625
+ /* @__PURE__ */ jsx36(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
7626
+ /* @__PURE__ */ jsxs35(
7481
7627
  DropdownMenu.Item,
7482
7628
  {
7483
7629
  onClick: handleCopyArchitectureCode,
7484
7630
  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",
7485
7631
  children: [
7486
- /* @__PURE__ */ jsx35(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7487
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Copy as mermaid" })
7632
+ /* @__PURE__ */ jsx36(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7633
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Copy as mermaid" })
7488
7634
  ]
7489
7635
  }
7490
7636
  ),
7491
- /* @__PURE__ */ jsxs34(
7637
+ /* @__PURE__ */ jsxs35(
7492
7638
  DropdownMenu.Item,
7493
7639
  {
7494
7640
  onClick: handleExportVisual,
7495
7641
  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",
7496
7642
  children: [
7497
- /* @__PURE__ */ jsx35(DocumentArrowDownIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7498
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Export image" })
7643
+ /* @__PURE__ */ jsx36(DocumentArrowDownIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7644
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Export image" })
7499
7645
  ]
7500
7646
  }
7501
7647
  ),
7502
- /* @__PURE__ */ jsxs34(
7648
+ /* @__PURE__ */ jsxs35(
7503
7649
  DropdownMenu.Item,
7504
7650
  {
7505
7651
  onClick: () => setIsShareModalOpen(true),
7506
7652
  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",
7507
7653
  children: [
7508
- /* @__PURE__ */ jsx35(Share2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7509
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Share Link" })
7654
+ /* @__PURE__ */ jsx36(Share2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7655
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Share Link" })
7510
7656
  ]
7511
7657
  }
7512
7658
  ),
7513
- /* @__PURE__ */ jsx35(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
7514
- /* @__PURE__ */ jsxs34(
7659
+ /* @__PURE__ */ jsx36(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
7660
+ /* @__PURE__ */ jsxs35(
7515
7661
  DropdownMenu.Item,
7516
7662
  {
7517
7663
  onClick: toggleFullScreen,
7518
7664
  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",
7519
7665
  children: [
7520
- /* @__PURE__ */ jsx35(PresentationChartLineIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7521
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Start Presentation" })
7666
+ /* @__PURE__ */ jsx36(PresentationChartLineIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7667
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Start Presentation" })
7522
7668
  ]
7523
7669
  }
7524
7670
  ),
7525
- /* @__PURE__ */ jsx35(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
7526
- /* @__PURE__ */ jsxs34(
7671
+ /* @__PURE__ */ jsx36(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
7672
+ /* @__PURE__ */ jsxs35(
7527
7673
  DropdownMenu.Item,
7528
7674
  {
7529
7675
  onClick: openStudioModal,
7530
7676
  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",
7531
7677
  children: [
7532
- /* @__PURE__ */ jsx35(ExternalLink, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7533
- /* @__PURE__ */ jsx35("span", { className: "flex-1 font-normal", children: "Open in EventCatalog Studio" })
7678
+ /* @__PURE__ */ jsx36(ExternalLink, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
7679
+ /* @__PURE__ */ jsx36("span", { className: "flex-1 font-normal", children: "Open in EventCatalog Studio" })
7534
7680
  ]
7535
7681
  }
7536
7682
  )
@@ -7541,30 +7687,30 @@ VisualizerDropdownContent.displayName = "VisualizerDropdownContent";
7541
7687
  var VisualizerDropdownContent_default = VisualizerDropdownContent;
7542
7688
 
7543
7689
  // src/components/NodeContextMenu.tsx
7544
- import { memo as memo29 } from "react";
7690
+ import { memo as memo30 } from "react";
7545
7691
  import * as ContextMenu5 from "@radix-ui/react-context-menu";
7546
- import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs35 } from "react/jsx-runtime";
7547
- var NodeContextMenu_default = memo29(function NodeContextMenu({
7692
+ import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs36 } from "react/jsx-runtime";
7693
+ var NodeContextMenu_default = memo30(function NodeContextMenu({
7548
7694
  items,
7549
7695
  children
7550
7696
  }) {
7551
7697
  const portalContainer = usePortalContainer();
7552
- if (!items || items.length === 0) return /* @__PURE__ */ jsx36(Fragment9, { children });
7553
- return /* @__PURE__ */ jsxs35(ContextMenu5.Root, { children: [
7554
- /* @__PURE__ */ jsx36(ContextMenu5.Trigger, { children }),
7555
- /* @__PURE__ */ jsx36(ContextMenu5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx36(
7698
+ if (!items || items.length === 0) return /* @__PURE__ */ jsx37(Fragment9, { children });
7699
+ return /* @__PURE__ */ jsxs36(ContextMenu5.Root, { children: [
7700
+ /* @__PURE__ */ jsx37(ContextMenu5.Trigger, { children }),
7701
+ /* @__PURE__ */ jsx37(ContextMenu5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx37(
7556
7702
  ContextMenu5.Content,
7557
7703
  {
7558
7704
  className: "min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200 z-50",
7559
7705
  onClick: (e) => e.stopPropagation(),
7560
- children: items.map((item, index) => /* @__PURE__ */ jsxs35("div", { children: [
7561
- item.separator && index > 0 && /* @__PURE__ */ jsx36(ContextMenu5.Separator, { className: "h-[1px] bg-gray-200 m-1" }),
7562
- /* @__PURE__ */ jsx36(
7706
+ children: items.map((item, index) => /* @__PURE__ */ jsxs36("div", { children: [
7707
+ item.separator && index > 0 && /* @__PURE__ */ jsx37(ContextMenu5.Separator, { className: "h-[1px] bg-gray-200 m-1" }),
7708
+ /* @__PURE__ */ jsx37(
7563
7709
  ContextMenu5.Item,
7564
7710
  {
7565
7711
  asChild: true,
7566
7712
  className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
7567
- children: /* @__PURE__ */ jsx36(
7713
+ children: /* @__PURE__ */ jsx37(
7568
7714
  "a",
7569
7715
  {
7570
7716
  href: item.href,
@@ -7583,7 +7729,7 @@ var NodeContextMenu_default = memo29(function NodeContextMenu({
7583
7729
 
7584
7730
  // src/utils/layout.ts
7585
7731
  import dagre2 from "dagre";
7586
- import { MarkerType as MarkerType6 } from "@xyflow/react";
7732
+ import { MarkerType as MarkerType7 } from "@xyflow/react";
7587
7733
  var GROUP_HEADER_HEIGHT = 44;
7588
7734
  var GROUP_CONTENT_PADDING_TOP = 50;
7589
7735
  var GROUP_CONTENT_PADDING_BOTTOM = 30;
@@ -7995,7 +8141,7 @@ function layoutGraph(nodes, edges, options = {}, style) {
7995
8141
  const isFlowStep = edge.type === "flow-step";
7996
8142
  const isBidirectional = edge.type === "reads-writes";
7997
8143
  const arrowMarker = {
7998
- type: MarkerType6.ArrowClosed,
8144
+ type: MarkerType7.ArrowClosed,
7999
8145
  width: 20,
8000
8146
  height: 20,
8001
8147
  color: "rgb(var(--ec-page-text-muted))"
@@ -8052,7 +8198,7 @@ function flatLayout(nodes, edges, graphOpts, nodeSize, style) {
8052
8198
  const isFlowStep = edge.type === "flow-step";
8053
8199
  const isBidirectional = edge.type === "reads-writes";
8054
8200
  const arrowMarker = {
8055
- type: MarkerType6.ArrowClosed,
8201
+ type: MarkerType7.ArrowClosed,
8056
8202
  width: 20,
8057
8203
  height: 20,
8058
8204
  color: "rgb(var(--ec-page-text-muted))"
@@ -8084,7 +8230,7 @@ import {
8084
8230
  MessageSquare as MessageSquare2,
8085
8231
  Search as Search3,
8086
8232
  ArrowRightLeft as ArrowRightLeft3,
8087
- Database as Database3,
8233
+ Database as Database5,
8088
8234
  Package as Package2,
8089
8235
  Globe as Globe4,
8090
8236
  User as User3,
@@ -8093,7 +8239,7 @@ import {
8093
8239
  } from "lucide-react";
8094
8240
  import { useReactFlow as useReactFlow4 } from "@xyflow/react";
8095
8241
  import * as Dialog4 from "@radix-ui/react-dialog";
8096
- import { Fragment as Fragment10, jsx as jsx37, jsxs as jsxs36 } from "react/jsx-runtime";
8242
+ import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs37 } from "react/jsx-runtime";
8097
8243
  var NODE_TYPE_META = {
8098
8244
  service: { icon: ServerIcon2, color: "#ec4899", label: "Service" },
8099
8245
  services: { icon: ServerIcon2, color: "#ec4899", label: "Service" },
@@ -8105,7 +8251,7 @@ var NODE_TYPE_META = {
8105
8251
  queries: { icon: Search3, color: "#22c55e", label: "Query" },
8106
8252
  channel: { icon: ArrowRightLeft3, color: "#6b7280", label: "Channel" },
8107
8253
  channels: { icon: ArrowRightLeft3, color: "#6b7280", label: "Channel" },
8108
- data: { icon: Database3, color: "#3b82f6", label: "Data" },
8254
+ data: { icon: Database5, color: "#3b82f6", label: "Data" },
8109
8255
  "data-products": { icon: Package2, color: "#6366f1", label: "Data Product" },
8110
8256
  externalSystem: { icon: Globe4, color: "#ec4899", label: "External System" },
8111
8257
  actor: { icon: User3, color: "#eab308", label: "Actor" },
@@ -8199,7 +8345,7 @@ function hashStr2(s) {
8199
8345
  function Avatar2({ name, size = 28 }) {
8200
8346
  const initials = name.split(/\s+/).map((w) => w[0]).join("").toUpperCase().slice(0, 2);
8201
8347
  const [c1, c2] = AVATAR_PALETTES2[hashStr2(name) % AVATAR_PALETTES2.length];
8202
- return /* @__PURE__ */ jsx37(
8348
+ return /* @__PURE__ */ jsx38(
8203
8349
  "div",
8204
8350
  {
8205
8351
  style: {
@@ -8212,7 +8358,7 @@ function Avatar2({ name, size = 28 }) {
8212
8358
  justifyContent: "center",
8213
8359
  flexShrink: 0
8214
8360
  },
8215
- children: /* @__PURE__ */ jsx37(
8361
+ children: /* @__PURE__ */ jsx38(
8216
8362
  "span",
8217
8363
  {
8218
8364
  style: {
@@ -8231,7 +8377,7 @@ function PriorityBadge({ priority }) {
8231
8377
  const p = PRIORITY2[priority.toLowerCase()];
8232
8378
  if (!p) return null;
8233
8379
  const isUrgent = priority === "high" || priority === "critical";
8234
- return /* @__PURE__ */ jsxs36(
8380
+ return /* @__PURE__ */ jsxs37(
8235
8381
  "span",
8236
8382
  {
8237
8383
  style: {
@@ -8250,7 +8396,7 @@ function PriorityBadge({ priority }) {
8250
8396
  lineHeight: 1.4
8251
8397
  },
8252
8398
  children: [
8253
- isUrgent && /* @__PURE__ */ jsx37(AlertTriangle2, { style: { width: 9, height: 9 }, strokeWidth: 2.5 }),
8399
+ isUrgent && /* @__PURE__ */ jsx38(AlertTriangle2, { style: { width: 9, height: 9 }, strokeWidth: 2.5 }),
8254
8400
  p.label
8255
8401
  ]
8256
8402
  }
@@ -8258,7 +8404,7 @@ function PriorityBadge({ priority }) {
8258
8404
  }
8259
8405
  function NoteCard2({ note, index }) {
8260
8406
  const prioStyle = note.priority ? PRIORITY2[note.priority.toLowerCase()] : null;
8261
- return /* @__PURE__ */ jsxs36(
8407
+ return /* @__PURE__ */ jsxs37(
8262
8408
  "div",
8263
8409
  {
8264
8410
  style: {
@@ -8270,7 +8416,7 @@ function NoteCard2({ note, index }) {
8270
8416
  boxShadow: "0 1px 3px rgba(0,0,0,0.04)"
8271
8417
  },
8272
8418
  children: [
8273
- prioStyle && /* @__PURE__ */ jsx37(
8419
+ prioStyle && /* @__PURE__ */ jsx38(
8274
8420
  "div",
8275
8421
  {
8276
8422
  style: {
@@ -8284,7 +8430,7 @@ function NoteCard2({ note, index }) {
8284
8430
  }
8285
8431
  }
8286
8432
  ),
8287
- /* @__PURE__ */ jsxs36(
8433
+ /* @__PURE__ */ jsxs37(
8288
8434
  "div",
8289
8435
  {
8290
8436
  style: {
@@ -8294,7 +8440,7 @@ function NoteCard2({ note, index }) {
8294
8440
  marginBottom: 8
8295
8441
  },
8296
8442
  children: [
8297
- note.author ? /* @__PURE__ */ jsx37(Avatar2, { name: note.author, size: 24 }) : /* @__PURE__ */ jsx37(
8443
+ note.author ? /* @__PURE__ */ jsx38(Avatar2, { name: note.author, size: 24 }) : /* @__PURE__ */ jsx38(
8298
8444
  "div",
8299
8445
  {
8300
8446
  style: {
@@ -8308,10 +8454,10 @@ function NoteCard2({ note, index }) {
8308
8454
  justifyContent: "center",
8309
8455
  flexShrink: 0
8310
8456
  },
8311
- children: /* @__PURE__ */ jsx37("span", { style: { fontSize: 10, fontWeight: 700, color: AMBER2[700] }, children: index + 1 })
8457
+ children: /* @__PURE__ */ jsx38("span", { style: { fontSize: 10, fontWeight: 700, color: AMBER2[700] }, children: index + 1 })
8312
8458
  }
8313
8459
  ),
8314
- /* @__PURE__ */ jsx37("div", { style: { flex: 1, minWidth: 0 }, children: note.author && /* @__PURE__ */ jsx37(
8460
+ /* @__PURE__ */ jsx38("div", { style: { flex: 1, minWidth: 0 }, children: note.author && /* @__PURE__ */ jsx38(
8315
8461
  "span",
8316
8462
  {
8317
8463
  style: {
@@ -8323,11 +8469,11 @@ function NoteCard2({ note, index }) {
8323
8469
  children: note.author
8324
8470
  }
8325
8471
  ) }),
8326
- note.priority && /* @__PURE__ */ jsx37(PriorityBadge, { priority: note.priority })
8472
+ note.priority && /* @__PURE__ */ jsx38(PriorityBadge, { priority: note.priority })
8327
8473
  ]
8328
8474
  }
8329
8475
  ),
8330
- /* @__PURE__ */ jsx37(
8476
+ /* @__PURE__ */ jsx38(
8331
8477
  "p",
8332
8478
  {
8333
8479
  style: {
@@ -8371,7 +8517,7 @@ function AllNotesModal({
8371
8517
  [nodes, setCenter, getZoom, onClose]
8372
8518
  );
8373
8519
  if (totalNotes === 0) return null;
8374
- return /* @__PURE__ */ jsx37(
8520
+ return /* @__PURE__ */ jsx38(
8375
8521
  Dialog4.Root,
8376
8522
  {
8377
8523
  open: isOpen,
@@ -8381,13 +8527,13 @@ function AllNotesModal({
8381
8527
  setSelectedIdx(0);
8382
8528
  }
8383
8529
  },
8384
- children: /* @__PURE__ */ jsx37(Dialog4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs36(
8530
+ children: /* @__PURE__ */ jsx38(Dialog4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs37(
8385
8531
  "div",
8386
8532
  {
8387
8533
  className: "fixed inset-0 z-[99999]",
8388
8534
  style: { isolation: "isolate" },
8389
8535
  children: [
8390
- /* @__PURE__ */ jsx37(
8536
+ /* @__PURE__ */ jsx38(
8391
8537
  Dialog4.Overlay,
8392
8538
  {
8393
8539
  style: {
@@ -8398,7 +8544,7 @@ function AllNotesModal({
8398
8544
  }
8399
8545
  }
8400
8546
  ),
8401
- /* @__PURE__ */ jsxs36(
8547
+ /* @__PURE__ */ jsxs37(
8402
8548
  Dialog4.Content,
8403
8549
  {
8404
8550
  style: {
@@ -8419,7 +8565,7 @@ function AllNotesModal({
8419
8565
  outline: "none"
8420
8566
  },
8421
8567
  children: [
8422
- /* @__PURE__ */ jsxs36(
8568
+ /* @__PURE__ */ jsxs37(
8423
8569
  "div",
8424
8570
  {
8425
8571
  style: {
@@ -8431,7 +8577,7 @@ function AllNotesModal({
8431
8577
  flexShrink: 0
8432
8578
  },
8433
8579
  children: [
8434
- /* @__PURE__ */ jsx37(
8580
+ /* @__PURE__ */ jsx38(
8435
8581
  "div",
8436
8582
  {
8437
8583
  style: {
@@ -8444,7 +8590,7 @@ function AllNotesModal({
8444
8590
  justifyContent: "center",
8445
8591
  flexShrink: 0
8446
8592
  },
8447
- children: /* @__PURE__ */ jsx37(
8593
+ children: /* @__PURE__ */ jsx38(
8448
8594
  MessageCircle3,
8449
8595
  {
8450
8596
  style: { width: 16, height: 16, color: "#64748b" },
@@ -8453,8 +8599,8 @@ function AllNotesModal({
8453
8599
  )
8454
8600
  }
8455
8601
  ),
8456
- /* @__PURE__ */ jsxs36("div", { style: { flex: 1, minWidth: 0 }, children: [
8457
- /* @__PURE__ */ jsx37(
8602
+ /* @__PURE__ */ jsxs37("div", { style: { flex: 1, minWidth: 0 }, children: [
8603
+ /* @__PURE__ */ jsx38(
8458
8604
  Dialog4.Title,
8459
8605
  {
8460
8606
  style: {
@@ -8467,7 +8613,7 @@ function AllNotesModal({
8467
8613
  children: "Notes"
8468
8614
  }
8469
8615
  ),
8470
- /* @__PURE__ */ jsxs36(
8616
+ /* @__PURE__ */ jsxs37(
8471
8617
  Dialog4.Description,
8472
8618
  {
8473
8619
  style: {
@@ -8489,7 +8635,7 @@ function AllNotesModal({
8489
8635
  }
8490
8636
  )
8491
8637
  ] }),
8492
- /* @__PURE__ */ jsx37(Dialog4.Close, { asChild: true, children: /* @__PURE__ */ jsx37(
8638
+ /* @__PURE__ */ jsx38(Dialog4.Close, { asChild: true, children: /* @__PURE__ */ jsx38(
8493
8639
  "button",
8494
8640
  {
8495
8641
  style: {
@@ -8506,14 +8652,14 @@ function AllNotesModal({
8506
8652
  flexShrink: 0
8507
8653
  },
8508
8654
  "aria-label": "Close",
8509
- children: /* @__PURE__ */ jsx37(X, { style: { width: 15, height: 15 } })
8655
+ children: /* @__PURE__ */ jsx38(X, { style: { width: 15, height: 15 } })
8510
8656
  }
8511
8657
  ) })
8512
8658
  ]
8513
8659
  }
8514
8660
  ),
8515
- /* @__PURE__ */ jsxs36("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
8516
- /* @__PURE__ */ jsx37(
8661
+ /* @__PURE__ */ jsxs37("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
8662
+ /* @__PURE__ */ jsx38(
8517
8663
  "div",
8518
8664
  {
8519
8665
  style: {
@@ -8528,7 +8674,7 @@ function AllNotesModal({
8528
8674
  const meta = getNodeMeta(group.nodeType);
8529
8675
  const IconComp = meta?.icon || MessageCircle3;
8530
8676
  const iconColor = meta?.color || "#64748b";
8531
- return /* @__PURE__ */ jsxs36(
8677
+ return /* @__PURE__ */ jsxs37(
8532
8678
  "button",
8533
8679
  {
8534
8680
  onClick: () => setSelectedIdx(i),
@@ -8547,7 +8693,7 @@ function AllNotesModal({
8547
8693
  transition: "background 0.1s"
8548
8694
  },
8549
8695
  children: [
8550
- /* @__PURE__ */ jsx37(
8696
+ /* @__PURE__ */ jsx38(
8551
8697
  "div",
8552
8698
  {
8553
8699
  style: {
@@ -8561,7 +8707,7 @@ function AllNotesModal({
8561
8707
  flexShrink: 0,
8562
8708
  transition: "background 0.15s"
8563
8709
  },
8564
- children: /* @__PURE__ */ jsx37(
8710
+ children: /* @__PURE__ */ jsx38(
8565
8711
  IconComp,
8566
8712
  {
8567
8713
  style: {
@@ -8575,8 +8721,8 @@ function AllNotesModal({
8575
8721
  )
8576
8722
  }
8577
8723
  ),
8578
- /* @__PURE__ */ jsxs36("div", { style: { flex: 1, minWidth: 0 }, children: [
8579
- /* @__PURE__ */ jsx37(
8724
+ /* @__PURE__ */ jsxs37("div", { style: { flex: 1, minWidth: 0 }, children: [
8725
+ /* @__PURE__ */ jsx38(
8580
8726
  "div",
8581
8727
  {
8582
8728
  style: {
@@ -8591,7 +8737,7 @@ function AllNotesModal({
8591
8737
  children: group.name
8592
8738
  }
8593
8739
  ),
8594
- /* @__PURE__ */ jsxs36(
8740
+ /* @__PURE__ */ jsxs37(
8595
8741
  "div",
8596
8742
  {
8597
8743
  style: {
@@ -8614,7 +8760,7 @@ function AllNotesModal({
8614
8760
  }
8615
8761
  )
8616
8762
  ] }),
8617
- /* @__PURE__ */ jsx37(
8763
+ /* @__PURE__ */ jsx38(
8618
8764
  ChevronRight,
8619
8765
  {
8620
8766
  style: {
@@ -8633,7 +8779,7 @@ function AllNotesModal({
8633
8779
  })
8634
8780
  }
8635
8781
  ),
8636
- /* @__PURE__ */ jsx37(
8782
+ /* @__PURE__ */ jsx38(
8637
8783
  "div",
8638
8784
  {
8639
8785
  style: {
@@ -8642,8 +8788,8 @@ function AllNotesModal({
8642
8788
  display: "flex",
8643
8789
  flexDirection: "column"
8644
8790
  },
8645
- children: selected && /* @__PURE__ */ jsxs36(Fragment10, { children: [
8646
- /* @__PURE__ */ jsxs36(
8791
+ children: selected && /* @__PURE__ */ jsxs37(Fragment10, { children: [
8792
+ /* @__PURE__ */ jsxs37(
8647
8793
  "div",
8648
8794
  {
8649
8795
  style: {
@@ -8656,7 +8802,7 @@ function AllNotesModal({
8656
8802
  background: "#fafbfc"
8657
8803
  },
8658
8804
  children: [
8659
- /* @__PURE__ */ jsxs36(
8805
+ /* @__PURE__ */ jsxs37(
8660
8806
  "div",
8661
8807
  {
8662
8808
  style: {
@@ -8669,7 +8815,7 @@ function AllNotesModal({
8669
8815
  const meta = getNodeMeta(selected.nodeType);
8670
8816
  const Icon = meta?.icon || MessageCircle3;
8671
8817
  const color = meta?.color || "#64748b";
8672
- return /* @__PURE__ */ jsx37(
8818
+ return /* @__PURE__ */ jsx38(
8673
8819
  "div",
8674
8820
  {
8675
8821
  style: {
@@ -8682,7 +8828,7 @@ function AllNotesModal({
8682
8828
  justifyContent: "center",
8683
8829
  flexShrink: 0
8684
8830
  },
8685
- children: /* @__PURE__ */ jsx37(
8831
+ children: /* @__PURE__ */ jsx38(
8686
8832
  Icon,
8687
8833
  {
8688
8834
  style: {
@@ -8696,8 +8842,8 @@ function AllNotesModal({
8696
8842
  }
8697
8843
  );
8698
8844
  })(),
8699
- /* @__PURE__ */ jsxs36("div", { children: [
8700
- /* @__PURE__ */ jsx37(
8845
+ /* @__PURE__ */ jsxs37("div", { children: [
8846
+ /* @__PURE__ */ jsx38(
8701
8847
  "div",
8702
8848
  {
8703
8849
  style: {
@@ -8709,7 +8855,7 @@ function AllNotesModal({
8709
8855
  children: selected.name
8710
8856
  }
8711
8857
  ),
8712
- /* @__PURE__ */ jsxs36(
8858
+ /* @__PURE__ */ jsxs37(
8713
8859
  "div",
8714
8860
  {
8715
8861
  style: {
@@ -8731,7 +8877,7 @@ function AllNotesModal({
8731
8877
  ]
8732
8878
  }
8733
8879
  ),
8734
- /* @__PURE__ */ jsxs36(
8880
+ /* @__PURE__ */ jsxs37(
8735
8881
  "button",
8736
8882
  {
8737
8883
  onClick: () => handleNavigate(selected.nodeId),
@@ -8758,7 +8904,7 @@ function AllNotesModal({
8758
8904
  e.currentTarget.style.color = "#475569";
8759
8905
  },
8760
8906
  children: [
8761
- /* @__PURE__ */ jsx37(Locate, { style: { width: 12, height: 12 } }),
8907
+ /* @__PURE__ */ jsx38(Locate, { style: { width: 12, height: 12 } }),
8762
8908
  "Find on canvas"
8763
8909
  ]
8764
8910
  }
@@ -8766,7 +8912,7 @@ function AllNotesModal({
8766
8912
  ]
8767
8913
  }
8768
8914
  ),
8769
- /* @__PURE__ */ jsx37(
8915
+ /* @__PURE__ */ jsx38(
8770
8916
  "div",
8771
8917
  {
8772
8918
  style: {
@@ -8777,7 +8923,7 @@ function AllNotesModal({
8777
8923
  flexDirection: "column",
8778
8924
  gap: 10
8779
8925
  },
8780
- children: selected.notes.map((note, i) => /* @__PURE__ */ jsx37(NoteCard2, { note, index: i }, i))
8926
+ children: selected.notes.map((note, i) => /* @__PURE__ */ jsx38(NoteCard2, { note, index: i }, i))
8781
8927
  }
8782
8928
  )
8783
8929
  ] })
@@ -8795,7 +8941,7 @@ function AllNotesModal({
8795
8941
  }
8796
8942
 
8797
8943
  // src/components/NodeGraph.tsx
8798
- import { Fragment as Fragment11, jsx as jsx38, jsxs as jsxs37 } from "react/jsx-runtime";
8944
+ import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs38 } from "react/jsx-runtime";
8799
8945
  var POSITION_CHANGE_THRESHOLD = 1;
8800
8946
  var NODE_ORIGIN = [0.1, 0.1];
8801
8947
  var MINIMAP_STYLE = {
@@ -8809,25 +8955,25 @@ var LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH = {
8809
8955
  };
8810
8956
  var LAYOUT_CHANGE_PANEL_STYLE_DEFAULT = { marginLeft: "60px" };
8811
8957
  var LEGEND_PANEL_STYLE_WITH_MINIMAP = { marginRight: "230px" };
8812
- var LegendPanel = memo30(function LegendPanel2({
8958
+ var LegendPanel = memo31(function LegendPanel2({
8813
8959
  legend,
8814
8960
  showMinimap,
8815
8961
  onLegendClick
8816
8962
  }) {
8817
- return /* @__PURE__ */ jsx38(
8963
+ return /* @__PURE__ */ jsx39(
8818
8964
  Panel,
8819
8965
  {
8820
8966
  position: "bottom-right",
8821
8967
  style: showMinimap ? LEGEND_PANEL_STYLE_WITH_MINIMAP : void 0,
8822
- children: /* @__PURE__ */ jsx38("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__ */ jsx38("ul", { className: "m-0 p-0 ", children: Object.entries(legend).map(
8823
- ([key, { count, colorClass, groupId }]) => /* @__PURE__ */ jsxs37(
8968
+ children: /* @__PURE__ */ jsx39("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__ */ jsx39("ul", { className: "m-0 p-0 ", children: Object.entries(legend).map(
8969
+ ([key, { count, colorClass, groupId }]) => /* @__PURE__ */ jsxs38(
8824
8970
  "li",
8825
8971
  {
8826
8972
  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",
8827
8973
  onClick: () => onLegendClick(key, groupId),
8828
8974
  children: [
8829
- /* @__PURE__ */ jsx38("span", { className: `w-2 h-2 block ${colorClass}` }),
8830
- /* @__PURE__ */ jsxs37("span", { className: "block capitalize", children: [
8975
+ /* @__PURE__ */ jsx39("span", { className: `w-2 h-2 block ${colorClass}` }),
8976
+ /* @__PURE__ */ jsxs38("span", { className: "block capitalize", children: [
8831
8977
  key,
8832
8978
  " (",
8833
8979
  count,
@@ -8878,10 +9024,10 @@ var NodeGraphBuilder = ({
8878
9024
  }, []);
8879
9025
  const nodeTypes = useMemo17(() => {
8880
9026
  const wrapWithContextMenu = (Component) => {
8881
- const Wrapped = memo30((props) => {
9027
+ const Wrapped = memo31((props) => {
8882
9028
  const items = props.data?.contextMenu;
8883
- if (!items?.length) return /* @__PURE__ */ jsx38(Component, { ...props });
8884
- return /* @__PURE__ */ jsx38(NodeContextMenu_default, { items, children: /* @__PURE__ */ jsx38(Component, { ...props }) });
9029
+ if (!items?.length) return /* @__PURE__ */ jsx39(Component, { ...props });
9030
+ return /* @__PURE__ */ jsx39(NodeContextMenu_default, { items, children: /* @__PURE__ */ jsx39(Component, { ...props }) });
8885
9031
  });
8886
9032
  Wrapped.displayName = `WithContextMenu(${Component.displayName || Component.name || "Component"})`;
8887
9033
  return Wrapped;
@@ -8915,7 +9061,8 @@ var NodeGraphBuilder = ({
8915
9061
  "data-product": wrapWithContextMenu(DataProduct_default),
8916
9062
  "data-products": wrapWithContextMenu(DataProduct_default),
8917
9063
  group: GroupNode_default,
8918
- note: memo30((props) => /* @__PURE__ */ jsx38(NoteNode_default, { ...props, readOnly: true }))
9064
+ note: memo31((props) => /* @__PURE__ */ jsx39(NoteNode_default, { ...props, readOnly: true })),
9065
+ field: wrapWithContextMenu(FieldNode_default)
8919
9066
  };
8920
9067
  }, []);
8921
9068
  const edgeTypes2 = useMemo17(
@@ -9406,7 +9553,8 @@ var NodeGraphBuilder = ({
9406
9553
  actor: "bg-yellow-500",
9407
9554
  step: "bg-gray-700",
9408
9555
  data: "bg-blue-600",
9409
- "data-products": "bg-indigo-600"
9556
+ "data-products": "bg-indigo-600",
9557
+ field: "bg-cyan-600"
9410
9558
  };
9411
9559
  let legendForDomains = {};
9412
9560
  const domainGroups = [
@@ -9560,7 +9708,7 @@ var NodeGraphBuilder = ({
9560
9708
  () => edges.some((edge) => edge.type === "flow-edge"),
9561
9709
  [edges]
9562
9710
  );
9563
- return /* @__PURE__ */ jsx38(
9711
+ return /* @__PURE__ */ jsx39(
9564
9712
  "div",
9565
9713
  {
9566
9714
  ref: reactFlowWrapperRef,
@@ -9571,22 +9719,22 @@ var NodeGraphBuilder = ({
9571
9719
  display: "flex",
9572
9720
  flexDirection: "column"
9573
9721
  },
9574
- children: /* @__PURE__ */ jsxs37(PortalContainerProvider, { value: reactFlowWrapperRef.current, children: [
9575
- isMermaidView ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
9576
- /* @__PURE__ */ jsxs37("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: [
9577
- /* @__PURE__ */ jsx38("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs37(DropdownMenu2.Root, { children: [
9578
- /* @__PURE__ */ jsx38(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs37(
9722
+ children: /* @__PURE__ */ jsxs38(PortalContainerProvider, { value: reactFlowWrapperRef.current, children: [
9723
+ isMermaidView ? /* @__PURE__ */ jsxs38(Fragment11, { children: [
9724
+ /* @__PURE__ */ jsxs38("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: [
9725
+ /* @__PURE__ */ jsx39("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs38(DropdownMenu2.Root, { children: [
9726
+ /* @__PURE__ */ jsx39(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs38(
9579
9727
  "button",
9580
9728
  {
9581
9729
  className: "py-2.5 px-4 bg-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-accent-subtle)/0.4)] 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-all duration-200 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap",
9582
9730
  "aria-label": "Open menu",
9583
9731
  children: [
9584
- title && /* @__PURE__ */ jsx38("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
9585
- /* @__PURE__ */ jsx38(MoreVertical, { className: "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" })
9732
+ title && /* @__PURE__ */ jsx39("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
9733
+ /* @__PURE__ */ jsx39(MoreVertical, { className: "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" })
9586
9734
  ]
9587
9735
  }
9588
9736
  ) }),
9589
- /* @__PURE__ */ jsx38(DropdownMenu2.Portal, { container: reactFlowWrapperRef.current, children: /* @__PURE__ */ jsxs37(
9737
+ /* @__PURE__ */ jsx39(DropdownMenu2.Portal, { container: reactFlowWrapperRef.current, children: /* @__PURE__ */ jsxs38(
9590
9738
  DropdownMenu2.Content,
9591
9739
  {
9592
9740
  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",
@@ -9594,8 +9742,8 @@ var NodeGraphBuilder = ({
9594
9742
  align: "end",
9595
9743
  alignOffset: -180,
9596
9744
  children: [
9597
- /* @__PURE__ */ jsx38(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
9598
- /* @__PURE__ */ jsx38(
9745
+ /* @__PURE__ */ jsx39(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
9746
+ /* @__PURE__ */ jsx39(
9599
9747
  VisualizerDropdownContent_default,
9600
9748
  {
9601
9749
  isMermaidView,
@@ -9625,7 +9773,7 @@ var NodeGraphBuilder = ({
9625
9773
  }
9626
9774
  ) })
9627
9775
  ] }) }),
9628
- mode === "full" && showSearch && /* @__PURE__ */ jsx38("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx38("div", { className: "w-96", children: /* @__PURE__ */ jsx38(
9776
+ mode === "full" && showSearch && /* @__PURE__ */ jsx39("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx39("div", { className: "w-96", children: /* @__PURE__ */ jsx39(
9629
9777
  VisualiserSearch_default,
9630
9778
  {
9631
9779
  ref: searchRef,
@@ -9635,7 +9783,7 @@ var NodeGraphBuilder = ({
9635
9783
  }
9636
9784
  ) }) })
9637
9785
  ] }),
9638
- /* @__PURE__ */ jsx38("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ jsx38(
9786
+ /* @__PURE__ */ jsx39("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ jsx39(
9639
9787
  MermaidView_default,
9640
9788
  {
9641
9789
  nodes,
@@ -9643,7 +9791,7 @@ var NodeGraphBuilder = ({
9643
9791
  maxTextSize
9644
9792
  }
9645
9793
  ) })
9646
- ] }) : /* @__PURE__ */ jsxs37(
9794
+ ] }) : /* @__PURE__ */ jsxs38(
9647
9795
  ReactFlow2,
9648
9796
  {
9649
9797
  nodeTypes,
@@ -9669,30 +9817,30 @@ var NodeGraphBuilder = ({
9669
9817
  zoomOnScroll,
9670
9818
  className: "relative",
9671
9819
  children: [
9672
- /* @__PURE__ */ jsxs37(
9820
+ /* @__PURE__ */ jsxs38(
9673
9821
  Panel,
9674
9822
  {
9675
9823
  position: "top-center",
9676
9824
  className: "w-full pr-6 pointer-events-none",
9677
9825
  children: [
9678
- /* @__PURE__ */ jsxs37("div", { className: "flex space-x-2 justify-between items-center pointer-events-auto", children: [
9679
- /* @__PURE__ */ jsx38("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs37(DropdownMenu2.Root, { children: [
9680
- /* @__PURE__ */ jsx38(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs37(
9826
+ /* @__PURE__ */ jsxs38("div", { className: "flex space-x-2 justify-between items-center pointer-events-auto", children: [
9827
+ /* @__PURE__ */ jsx39("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs38(DropdownMenu2.Root, { children: [
9828
+ /* @__PURE__ */ jsx39(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs38(
9681
9829
  "button",
9682
9830
  {
9683
9831
  className: "py-2.5 px-4 bg-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-accent-subtle)/0.4)] 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-all duration-200 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap",
9684
9832
  "aria-label": "Open menu",
9685
9833
  children: [
9686
- title && /* @__PURE__ */ jsx38("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
9687
- /* @__PURE__ */ jsx38(MoreVertical, { className: "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" })
9834
+ title && /* @__PURE__ */ jsx39("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
9835
+ /* @__PURE__ */ jsx39(MoreVertical, { className: "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" })
9688
9836
  ]
9689
9837
  }
9690
9838
  ) }),
9691
- /* @__PURE__ */ jsx38(
9839
+ /* @__PURE__ */ jsx39(
9692
9840
  DropdownMenu2.Portal,
9693
9841
  {
9694
9842
  container: reactFlowWrapperRef.current,
9695
- children: /* @__PURE__ */ jsxs37(
9843
+ children: /* @__PURE__ */ jsxs38(
9696
9844
  DropdownMenu2.Content,
9697
9845
  {
9698
9846
  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",
@@ -9700,8 +9848,8 @@ var NodeGraphBuilder = ({
9700
9848
  align: "end",
9701
9849
  alignOffset: -180,
9702
9850
  children: [
9703
- /* @__PURE__ */ jsx38(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
9704
- /* @__PURE__ */ jsx38(
9851
+ /* @__PURE__ */ jsx39(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
9852
+ /* @__PURE__ */ jsx39(
9705
9853
  VisualizerDropdownContent_default,
9706
9854
  {
9707
9855
  isMermaidView,
@@ -9735,7 +9883,7 @@ var NodeGraphBuilder = ({
9735
9883
  }
9736
9884
  )
9737
9885
  ] }) }),
9738
- mode === "full" && showSearch && /* @__PURE__ */ jsx38("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx38("div", { className: "w-96", children: /* @__PURE__ */ jsx38(
9886
+ mode === "full" && showSearch && /* @__PURE__ */ jsx39("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx39("div", { className: "w-96", children: /* @__PURE__ */ jsx39(
9739
9887
  VisualiserSearch_default,
9740
9888
  {
9741
9889
  ref: searchRef,
@@ -9745,9 +9893,9 @@ var NodeGraphBuilder = ({
9745
9893
  }
9746
9894
  ) }) })
9747
9895
  ] }),
9748
- links.length > 0 && /* @__PURE__ */ jsx38("div", { className: "flex justify-end mt-3", children: /* @__PURE__ */ jsxs37("div", { className: "relative flex items-center -mt-1", children: [
9749
- /* @__PURE__ */ jsx38("span", { className: "absolute left-2 pointer-events-none flex items-center h-full", children: /* @__PURE__ */ jsx38(HistoryIcon, { className: "h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" }) }),
9750
- /* @__PURE__ */ jsx38(
9896
+ links.length > 0 && /* @__PURE__ */ jsx39("div", { className: "flex justify-end mt-3", children: /* @__PURE__ */ jsxs38("div", { className: "relative flex items-center -mt-1", children: [
9897
+ /* @__PURE__ */ jsx39("span", { className: "absolute left-2 pointer-events-none flex items-center h-full", children: /* @__PURE__ */ jsx39(HistoryIcon, { className: "h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" }) }),
9898
+ /* @__PURE__ */ jsx39(
9751
9899
  "select",
9752
9900
  {
9753
9901
  value: links.find(
@@ -9762,10 +9910,10 @@ var NodeGraphBuilder = ({
9762
9910
  },
9763
9911
  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))]",
9764
9912
  style: { minWidth: 120, height: "26px" },
9765
- children: links.map((link) => /* @__PURE__ */ jsx38("option", { value: link.url, children: link.label }, link.url))
9913
+ children: links.map((link) => /* @__PURE__ */ jsx39("option", { value: link.url, children: link.label }, link.url))
9766
9914
  }
9767
9915
  ),
9768
- /* @__PURE__ */ jsx38("span", { className: "absolute right-2 pointer-events-none", children: /* @__PURE__ */ jsx38(
9916
+ /* @__PURE__ */ jsx39("span", { className: "absolute right-2 pointer-events-none", children: /* @__PURE__ */ jsx39(
9769
9917
  "svg",
9770
9918
  {
9771
9919
  className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]",
@@ -9773,7 +9921,7 @@ var NodeGraphBuilder = ({
9773
9921
  stroke: "currentColor",
9774
9922
  strokeWidth: "2",
9775
9923
  viewBox: "0 0 24 24",
9776
- children: /* @__PURE__ */ jsx38(
9924
+ children: /* @__PURE__ */ jsx39(
9777
9925
  "path",
9778
9926
  {
9779
9927
  strokeLinecap: "round",
@@ -9787,9 +9935,9 @@ var NodeGraphBuilder = ({
9787
9935
  ]
9788
9936
  }
9789
9937
  ),
9790
- includeBackground && /* @__PURE__ */ jsx38(Background2, { color: "var(--ec-bg-dots)", gap: 16 }),
9791
- includeBackground && /* @__PURE__ */ jsx38(Controls2, {}),
9792
- showMinimap && /* @__PURE__ */ jsx38(
9938
+ includeBackground && /* @__PURE__ */ jsx39(Background2, { color: "var(--ec-bg-dots)", gap: 16 }),
9939
+ includeBackground && /* @__PURE__ */ jsx39(Controls2, {}),
9940
+ showMinimap && /* @__PURE__ */ jsx39(
9793
9941
  MiniMap,
9794
9942
  {
9795
9943
  nodeStrokeWidth: 3,
@@ -9798,7 +9946,7 @@ var NodeGraphBuilder = ({
9798
9946
  style: MINIMAP_STYLE
9799
9947
  }
9800
9948
  ),
9801
- isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ jsx38(Panel, { position: "bottom-left", children: /* @__PURE__ */ jsx38(
9949
+ isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ jsx39(Panel, { position: "bottom-left", children: /* @__PURE__ */ jsx39(
9802
9950
  StepWalkthrough_default,
9803
9951
  {
9804
9952
  nodes,
@@ -9808,14 +9956,14 @@ var NodeGraphBuilder = ({
9808
9956
  mode
9809
9957
  }
9810
9958
  ) }),
9811
- isDevMode && hasLayoutChanges && /* @__PURE__ */ jsx38(
9959
+ isDevMode && hasLayoutChanges && /* @__PURE__ */ jsx39(
9812
9960
  Panel,
9813
9961
  {
9814
9962
  position: "bottom-left",
9815
9963
  style: isFlowVisualization && showFlowWalkthrough ? LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH : LAYOUT_CHANGE_PANEL_STYLE_DEFAULT,
9816
- children: /* @__PURE__ */ jsxs37("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: [
9817
- /* @__PURE__ */ jsx38("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Layout changed" }),
9818
- /* @__PURE__ */ jsx38(
9964
+ children: /* @__PURE__ */ jsxs38("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: [
9965
+ /* @__PURE__ */ jsx39("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Layout changed" }),
9966
+ /* @__PURE__ */ jsx39(
9819
9967
  "button",
9820
9968
  {
9821
9969
  onClick: handleQuickSaveLayout,
@@ -9827,7 +9975,7 @@ var NodeGraphBuilder = ({
9827
9975
  ] })
9828
9976
  }
9829
9977
  ),
9830
- includeKey && /* @__PURE__ */ jsx38(
9978
+ includeKey && /* @__PURE__ */ jsx39(
9831
9979
  LegendPanel,
9832
9980
  {
9833
9981
  legend,
@@ -9838,14 +9986,14 @@ var NodeGraphBuilder = ({
9838
9986
  ]
9839
9987
  }
9840
9988
  ),
9841
- /* @__PURE__ */ jsx38(
9989
+ /* @__PURE__ */ jsx39(
9842
9990
  StudioModal_default,
9843
9991
  {
9844
9992
  isOpen: isStudioModalOpen || false,
9845
9993
  onClose: () => setIsStudioModalOpen(false)
9846
9994
  }
9847
9995
  ),
9848
- /* @__PURE__ */ jsx38(
9996
+ /* @__PURE__ */ jsx39(
9849
9997
  FocusModeModal_default,
9850
9998
  {
9851
9999
  isOpen: focusModeOpen,
@@ -9857,7 +10005,7 @@ var NodeGraphBuilder = ({
9857
10005
  edgeTypes: edgeTypes2
9858
10006
  }
9859
10007
  ),
9860
- /* @__PURE__ */ jsx38(
10008
+ /* @__PURE__ */ jsx39(
9861
10009
  AllNotesModal,
9862
10010
  {
9863
10011
  noteGroups: allNoteGroups,
@@ -9866,8 +10014,8 @@ var NodeGraphBuilder = ({
9866
10014
  nodes
9867
10015
  }
9868
10016
  ),
9869
- isShareModalOpen && /* @__PURE__ */ jsxs37(Fragment11, { children: [
9870
- /* @__PURE__ */ jsx38(
10017
+ isShareModalOpen && /* @__PURE__ */ jsxs38(Fragment11, { children: [
10018
+ /* @__PURE__ */ jsx39(
9871
10019
  "div",
9872
10020
  {
9873
10021
  className: "fixed inset-0 bg-black/20 z-40",
@@ -9875,13 +10023,13 @@ var NodeGraphBuilder = ({
9875
10023
  style: { animation: "fadeIn 150ms ease-out" }
9876
10024
  }
9877
10025
  ),
9878
- /* @__PURE__ */ jsxs37(
10026
+ /* @__PURE__ */ jsxs38(
9879
10027
  "div",
9880
10028
  {
9881
10029
  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))]",
9882
10030
  style: { animation: "slideInCenter 250ms ease-out" },
9883
10031
  children: [
9884
- /* @__PURE__ */ jsx38("style", { children: `
10032
+ /* @__PURE__ */ jsx39("style", { children: `
9885
10033
  @keyframes fadeIn {
9886
10034
  from { opacity: 0; }
9887
10035
  to { opacity: 1; }
@@ -9891,21 +10039,21 @@ var NodeGraphBuilder = ({
9891
10039
  to { opacity: 1; transform: translate(-50%, -50%); }
9892
10040
  }
9893
10041
  ` }),
9894
- /* @__PURE__ */ jsxs37("div", { className: "flex justify-between items-start mb-4", children: [
9895
- /* @__PURE__ */ jsx38("h3", { className: "text-lg font-semibold text-[rgb(var(--ec-page-text))]", children: "Share Link" }),
9896
- /* @__PURE__ */ jsx38(
10042
+ /* @__PURE__ */ jsxs38("div", { className: "flex justify-between items-start mb-4", children: [
10043
+ /* @__PURE__ */ jsx39("h3", { className: "text-lg font-semibold text-[rgb(var(--ec-page-text))]", children: "Share Link" }),
10044
+ /* @__PURE__ */ jsx39(
9897
10045
  "button",
9898
10046
  {
9899
10047
  onClick: () => setIsShareModalOpen(false),
9900
10048
  className: "text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] transition-colors",
9901
10049
  "aria-label": "Close modal",
9902
- children: /* @__PURE__ */ jsx38(ExternalLink2, { className: "w-5 h-5 rotate-180" })
10050
+ children: /* @__PURE__ */ jsx39(ExternalLink2, { className: "w-5 h-5 rotate-180" })
9903
10051
  }
9904
10052
  )
9905
10053
  ] }),
9906
- /* @__PURE__ */ jsx38("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." }),
9907
- /* @__PURE__ */ jsxs37("div", { className: "flex gap-2", children: [
9908
- /* @__PURE__ */ jsx38(
10054
+ /* @__PURE__ */ jsx39("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." }),
10055
+ /* @__PURE__ */ jsxs38("div", { className: "flex gap-2", children: [
10056
+ /* @__PURE__ */ jsx39(
9909
10057
  "input",
9910
10058
  {
9911
10059
  type: "text",
@@ -9914,15 +10062,15 @@ var NodeGraphBuilder = ({
9914
10062
  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))]"
9915
10063
  }
9916
10064
  ),
9917
- /* @__PURE__ */ jsxs37(
10065
+ /* @__PURE__ */ jsxs38(
9918
10066
  "button",
9919
10067
  {
9920
10068
  onClick: handleCopyShareUrl,
9921
10069
  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"}`,
9922
10070
  "aria-label": shareUrlCopySuccess ? "Copied!" : "Copy link",
9923
10071
  children: [
9924
- shareUrlCopySuccess ? /* @__PURE__ */ jsx38(CheckIcon3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx38(ClipboardIcon3, { className: "w-4 h-4" }),
9925
- /* @__PURE__ */ jsx38("span", { children: shareUrlCopySuccess ? "Copied!" : "Copy" })
10072
+ shareUrlCopySuccess ? /* @__PURE__ */ jsx39(CheckIcon3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx39(ClipboardIcon3, { className: "w-4 h-4" }),
10073
+ /* @__PURE__ */ jsx39("span", { children: shareUrlCopySuccess ? "Copied!" : "Copy" })
9926
10074
  ]
9927
10075
  }
9928
10076
  )
@@ -10001,9 +10149,9 @@ var NodeGraph = ({
10001
10149
  }
10002
10150
  }, []);
10003
10151
  if (!elem) return null;
10004
- return /* @__PURE__ */ jsx38("div", { children: createPortal(
10005
- /* @__PURE__ */ jsxs37(ReactFlowProvider2, { children: [
10006
- /* @__PURE__ */ jsx38(
10152
+ return /* @__PURE__ */ jsx39("div", { children: createPortal(
10153
+ /* @__PURE__ */ jsxs38(ReactFlowProvider2, { children: [
10154
+ /* @__PURE__ */ jsx39(
10007
10155
  NodeGraphBuilder,
10008
10156
  {
10009
10157
  edges,
@@ -10035,11 +10183,11 @@ var NodeGraph = ({
10035
10183
  onResetLayout
10036
10184
  }
10037
10185
  ),
10038
- showFooter && /* @__PURE__ */ jsxs37("div", { className: "flex justify-between", id: "visualiser-footer", children: [
10039
- footerLabel && /* @__PURE__ */ jsx38("div", { className: "py-2 w-full text-left ", children: /* @__PURE__ */ jsx38("span", { className: " text-sm no-underline py-2 text-[rgb(var(--ec-page-text-muted))]", children: footerLabel }) }),
10040
- href && /* @__PURE__ */ jsxs37("div", { className: "py-2 w-full text-right flex justify-between", children: [
10041
- /* @__PURE__ */ jsx38("span", {}),
10042
- /* @__PURE__ */ jsxs37(
10186
+ showFooter && /* @__PURE__ */ jsxs38("div", { className: "flex justify-between", id: "visualiser-footer", children: [
10187
+ footerLabel && /* @__PURE__ */ jsx39("div", { className: "py-2 w-full text-left ", children: /* @__PURE__ */ jsx39("span", { className: " text-sm no-underline py-2 text-[rgb(var(--ec-page-text-muted))]", children: footerLabel }) }),
10188
+ href && /* @__PURE__ */ jsxs38("div", { className: "py-2 w-full text-right flex justify-between", children: [
10189
+ /* @__PURE__ */ jsx39("span", {}),
10190
+ /* @__PURE__ */ jsxs38(
10043
10191
  "a",
10044
10192
  {
10045
10193
  className: " text-sm underline text-[rgb(var(--ec-page-text))] hover:text-[rgb(var(--ec-accent))]",
@@ -10070,6 +10218,7 @@ var nodeComponents = {
10070
10218
  data: DataNode_default,
10071
10219
  view: ViewNode_default,
10072
10220
  actor: ActorNode_default,
10221
+ field: FieldNode_default,
10073
10222
  // Core nodes are available via individual imports
10074
10223
  custom: Custom_default,
10075
10224
  domain: Domain_default,
@@ -10085,7 +10234,8 @@ var nodeConfigs = {
10085
10234
  event: config_default,
10086
10235
  data: config_default2,
10087
10236
  actor: config_default3,
10088
- externalSystem: config_default4
10237
+ externalSystem: config_default4,
10238
+ field: config_default5
10089
10239
  };
10090
10240
 
10091
10241
  // src/edges/index.ts
@@ -10112,6 +10262,7 @@ export {
10112
10262
  EventNode_default as Event,
10113
10263
  ExternalSystem_default as ExternalSystem,
10114
10264
  ExternalSystem2_default as ExternalSystem2Node,
10265
+ FieldNode_default as Field,
10115
10266
  FlowEdge_default as FlowEdge,
10116
10267
  Flow_default as FlowNode,
10117
10268
  FocusModeModal_default as FocusModeModal,
@@ -10146,6 +10297,7 @@ export {
10146
10297
  config_default as eventConfig,
10147
10298
  exportNodeGraphForStudio,
10148
10299
  config_default4 as externalSystemConfig,
10300
+ config_default5 as fieldConfig,
10149
10301
  generateIdForNode,
10150
10302
  generateIdForNodes,
10151
10303
  generatedIdForEdge,