@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.d.mts +16 -10
- package/dist/index.d.ts +16 -10
- package/dist/index.js +1088 -934
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +815 -663
- package/dist/index.mjs.map +1 -1
- package/dist/styles-core.css +9 -0
- package/dist/styles.css +9 -0
- package/package.json +1 -1
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
|
|
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
|
|
3713
|
-
import { Handle as
|
|
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
|
|
3858
|
+
import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
3734
3859
|
function AwsEventBridge({ className }) {
|
|
3735
|
-
return /* @__PURE__ */
|
|
3736
|
-
/* @__PURE__ */
|
|
3737
|
-
/* @__PURE__ */
|
|
3738
|
-
/* @__PURE__ */
|
|
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__ */
|
|
3741
|
-
/* @__PURE__ */
|
|
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__ */
|
|
3752
|
-
/* @__PURE__ */
|
|
3753
|
-
/* @__PURE__ */
|
|
3754
|
-
/* @__PURE__ */
|
|
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__ */
|
|
3757
|
-
/* @__PURE__ */
|
|
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__ */
|
|
3768
|
-
/* @__PURE__ */
|
|
3769
|
-
/* @__PURE__ */
|
|
3770
|
-
/* @__PURE__ */
|
|
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__ */
|
|
3773
|
-
/* @__PURE__ */
|
|
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
|
|
3836
|
-
function
|
|
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 =
|
|
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__ */
|
|
3852
|
-
/* @__PURE__ */
|
|
3976
|
+
return /* @__PURE__ */ jsxs15(ContextMenu.Root, { children: [
|
|
3977
|
+
/* @__PURE__ */ jsx16(ContextMenu.Trigger, { children: /* @__PURE__ */ jsxs15(
|
|
3853
3978
|
"div",
|
|
3854
3979
|
{
|
|
3855
|
-
className:
|
|
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__ */
|
|
3985
|
+
/* @__PURE__ */ jsxs15(
|
|
3861
3986
|
"div",
|
|
3862
3987
|
{
|
|
3863
|
-
className:
|
|
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__ */
|
|
3869
|
-
mode === "full" && /* @__PURE__ */
|
|
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__ */
|
|
3881
|
-
targetPosition && /* @__PURE__ */
|
|
3882
|
-
sourcePosition && /* @__PURE__ */
|
|
3883
|
-
/* @__PURE__ */
|
|
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:
|
|
4011
|
+
className: classNames12(
|
|
3887
4012
|
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
3888
4013
|
),
|
|
3889
4014
|
children: [
|
|
3890
|
-
/* @__PURE__ */
|
|
3891
|
-
/* @__PURE__ */
|
|
3892
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
3902
|
-
/* @__PURE__ */
|
|
3903
|
-
/* @__PURE__ */
|
|
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__ */
|
|
3913
|
-
/* @__PURE__ */
|
|
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__ */
|
|
4043
|
+
children: /* @__PURE__ */ jsx16("a", { href: buildUrl(`/docs/flows/${id}/${version}`), children: "Read documentation" })
|
|
3919
4044
|
}
|
|
3920
4045
|
),
|
|
3921
|
-
/* @__PURE__ */
|
|
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__ */
|
|
4051
|
+
children: /* @__PURE__ */ jsx16("a", { href: buildUrl(`/visualiser/flows/${id}/${version}`), children: "View in visualiser" })
|
|
3927
4052
|
}
|
|
3928
4053
|
),
|
|
3929
|
-
/* @__PURE__ */
|
|
3930
|
-
/* @__PURE__ */
|
|
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
|
|
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
|
|
3948
|
-
import { Fragment as Fragment2, jsx as
|
|
3949
|
-
function
|
|
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 =
|
|
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__ */
|
|
3974
|
-
/* @__PURE__ */
|
|
4098
|
+
return /* @__PURE__ */ jsxs16(ContextMenu2.Root, { children: [
|
|
4099
|
+
/* @__PURE__ */ jsx17(ContextMenu2.Trigger, { children: /* @__PURE__ */ jsxs16(
|
|
3975
4100
|
"div",
|
|
3976
4101
|
{
|
|
3977
|
-
className:
|
|
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__ */
|
|
4107
|
+
/* @__PURE__ */ jsxs16(
|
|
3983
4108
|
"div",
|
|
3984
4109
|
{
|
|
3985
|
-
className:
|
|
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__ */
|
|
3991
|
-
Icon && /* @__PURE__ */
|
|
3992
|
-
/* @__PURE__ */
|
|
3993
|
-
aggregateRoot && /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
4018
|
-
|
|
4142
|
+
/* @__PURE__ */ jsx17(
|
|
4143
|
+
Handle13,
|
|
4019
4144
|
{
|
|
4020
4145
|
type: "target",
|
|
4021
|
-
position:
|
|
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__ */
|
|
4028
|
-
|
|
4152
|
+
/* @__PURE__ */ jsx17(
|
|
4153
|
+
Handle13,
|
|
4029
4154
|
{
|
|
4030
4155
|
type: "source",
|
|
4031
|
-
position:
|
|
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__ */
|
|
4038
|
-
/* @__PURE__ */
|
|
4039
|
-
/* @__PURE__ */
|
|
4040
|
-
property.required && /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
4052
|
-
/* @__PURE__ */
|
|
4053
|
-
/* @__PURE__ */
|
|
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__ */
|
|
4060
|
-
properties.length === 0 && /* @__PURE__ */
|
|
4061
|
-
targetPosition && /* @__PURE__ */
|
|
4062
|
-
sourcePosition && /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
|
4211
|
+
import { memo as memo17 } from "react";
|
|
4087
4212
|
import { UserIcon as UserIcon2 } from "@heroicons/react/20/solid";
|
|
4088
|
-
import { Handle as
|
|
4089
|
-
import { jsx as
|
|
4090
|
-
function
|
|
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 =
|
|
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__ */
|
|
4230
|
+
return /* @__PURE__ */ jsxs17(
|
|
4106
4231
|
"div",
|
|
4107
4232
|
{
|
|
4108
|
-
className:
|
|
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__ */
|
|
4239
|
+
/* @__PURE__ */ jsxs17(
|
|
4115
4240
|
"div",
|
|
4116
4241
|
{
|
|
4117
|
-
className:
|
|
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__ */
|
|
4123
|
-
mode === "full" && /* @__PURE__ */
|
|
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__ */
|
|
4135
|
-
targetPosition && /* @__PURE__ */
|
|
4136
|
-
sourcePosition && /* @__PURE__ */
|
|
4137
|
-
(!summary || mode !== "full") && /* @__PURE__ */
|
|
4138
|
-
/* @__PURE__ */
|
|
4139
|
-
mode === "simple" && /* @__PURE__ */
|
|
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__ */
|
|
4142
|
-
/* @__PURE__ */
|
|
4266
|
+
summary && mode === "full" && /* @__PURE__ */ jsxs17("div", { children: [
|
|
4267
|
+
/* @__PURE__ */ jsx18(
|
|
4143
4268
|
"div",
|
|
4144
4269
|
{
|
|
4145
|
-
className:
|
|
4270
|
+
className: classNames14(
|
|
4146
4271
|
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
4147
4272
|
),
|
|
4148
|
-
children: /* @__PURE__ */
|
|
4273
|
+
children: /* @__PURE__ */ jsx18("span", { className: "text-xs font-bold block pb-0.5", children: name })
|
|
4149
4274
|
}
|
|
4150
4275
|
),
|
|
4151
|
-
mode === "full" && /* @__PURE__ */
|
|
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
|
|
4161
|
-
import { Handle as
|
|
4162
|
-
import { jsx as
|
|
4163
|
-
function
|
|
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 =
|
|
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__ */
|
|
4298
|
+
return /* @__PURE__ */ jsxs18(
|
|
4174
4299
|
"div",
|
|
4175
4300
|
{
|
|
4176
|
-
className:
|
|
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__ */
|
|
4306
|
+
/* @__PURE__ */ jsx19(
|
|
4182
4307
|
"div",
|
|
4183
4308
|
{
|
|
4184
|
-
className:
|
|
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__ */
|
|
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__ */
|
|
4199
|
-
/* @__PURE__ */
|
|
4200
|
-
|
|
4323
|
+
/* @__PURE__ */ jsxs18("div", { className: "p-1 flex-1", children: [
|
|
4324
|
+
/* @__PURE__ */ jsx19(
|
|
4325
|
+
Handle15,
|
|
4201
4326
|
{
|
|
4202
4327
|
type: "target",
|
|
4203
|
-
position: targetPosition ||
|
|
4328
|
+
position: targetPosition || Position13.Left,
|
|
4204
4329
|
style: HIDDEN_HANDLE_STYLE
|
|
4205
4330
|
}
|
|
4206
4331
|
),
|
|
4207
|
-
/* @__PURE__ */
|
|
4208
|
-
|
|
4332
|
+
/* @__PURE__ */ jsx19(
|
|
4333
|
+
Handle15,
|
|
4209
4334
|
{
|
|
4210
4335
|
type: "source",
|
|
4211
|
-
position: sourcePosition ||
|
|
4336
|
+
position: sourcePosition || Position13.Right,
|
|
4212
4337
|
style: HIDDEN_HANDLE_STYLE
|
|
4213
4338
|
}
|
|
4214
4339
|
),
|
|
4215
|
-
!summary && /* @__PURE__ */
|
|
4216
|
-
summary && /* @__PURE__ */
|
|
4217
|
-
/* @__PURE__ */
|
|
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:
|
|
4345
|
+
className: classNames15(
|
|
4221
4346
|
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
4222
4347
|
),
|
|
4223
|
-
children: /* @__PURE__ */
|
|
4348
|
+
children: /* @__PURE__ */ jsx19("span", { className: "text-xs font-bold block pb-0.5", children: title })
|
|
4224
4349
|
}
|
|
4225
4350
|
),
|
|
4226
|
-
mode === "full" && /* @__PURE__ */
|
|
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
|
|
4361
|
+
Handle as Handle16,
|
|
4237
4362
|
useReactFlow,
|
|
4238
4363
|
useOnSelectionChange,
|
|
4239
|
-
Position as
|
|
4364
|
+
Position as Position14
|
|
4240
4365
|
} from "@xyflow/react";
|
|
4241
4366
|
import * as ContextMenu3 from "@radix-ui/react-context-menu";
|
|
4242
|
-
import { memo as
|
|
4243
|
-
import { jsx as
|
|
4244
|
-
var Domain_default =
|
|
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__ */
|
|
4288
|
-
/* @__PURE__ */
|
|
4289
|
-
/* @__PURE__ */
|
|
4290
|
-
Icon && /* @__PURE__ */
|
|
4291
|
-
/* @__PURE__ */
|
|
4292
|
-
/* @__PURE__ */
|
|
4293
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
4302
|
-
/* @__PURE__ */
|
|
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__ */
|
|
4308
|
-
|
|
4432
|
+
/* @__PURE__ */ jsx20(
|
|
4433
|
+
Handle16,
|
|
4309
4434
|
{
|
|
4310
4435
|
type: "target",
|
|
4311
|
-
position:
|
|
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__ */
|
|
4318
|
-
|
|
4442
|
+
/* @__PURE__ */ jsx20(
|
|
4443
|
+
Handle16,
|
|
4319
4444
|
{
|
|
4320
4445
|
type: "source",
|
|
4321
|
-
position:
|
|
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__ */
|
|
4328
|
-
/* @__PURE__ */
|
|
4329
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
4339
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
4364
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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
|
|
4514
|
+
import { memo as memo20 } from "react";
|
|
4390
4515
|
import { BoxesIcon } from "lucide-react";
|
|
4391
|
-
import { jsx as
|
|
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 =
|
|
4588
|
+
var GroupNode_default = memo20(function GroupNode({ data }) {
|
|
4464
4589
|
const { domain } = data;
|
|
4465
|
-
return /* @__PURE__ */
|
|
4466
|
-
/* @__PURE__ */
|
|
4467
|
-
/* @__PURE__ */
|
|
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__ */
|
|
4476
|
-
/* @__PURE__ */
|
|
4477
|
-
domain?.version && /* @__PURE__ */
|
|
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
|
|
4611
|
+
import { Handle as Handle17 } from "@xyflow/react";
|
|
4487
4612
|
import * as Icons from "@heroicons/react/24/solid";
|
|
4488
|
-
import { memo as
|
|
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
|
|
4492
|
-
function
|
|
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 =
|
|
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__ */
|
|
4518
|
-
/* @__PURE__ */
|
|
4642
|
+
return /* @__PURE__ */ jsxs21(ContextMenu4.Root, { children: [
|
|
4643
|
+
/* @__PURE__ */ jsx22(ContextMenu4.Trigger, { children: /* @__PURE__ */ jsxs21(
|
|
4519
4644
|
"div",
|
|
4520
4645
|
{
|
|
4521
|
-
className:
|
|
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__ */
|
|
4654
|
+
/* @__PURE__ */ jsxs21(
|
|
4530
4655
|
"div",
|
|
4531
4656
|
{
|
|
4532
|
-
className:
|
|
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__ */
|
|
4538
|
-
mode === "full" && /* @__PURE__ */
|
|
4539
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
4564
|
-
targetPosition && /* @__PURE__ */
|
|
4565
|
-
sourcePosition && /* @__PURE__ */
|
|
4566
|
-
(!summary || mode !== "full") && /* @__PURE__ */
|
|
4567
|
-
summary && mode === "full" && /* @__PURE__ */
|
|
4568
|
-
/* @__PURE__ */
|
|
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:
|
|
4696
|
+
className: classNames16(
|
|
4572
4697
|
mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
|
|
4573
4698
|
),
|
|
4574
|
-
children: /* @__PURE__ */
|
|
4699
|
+
children: /* @__PURE__ */ jsx22("span", { className: "text-xs font-bold block pb-0.5", children: title })
|
|
4575
4700
|
}
|
|
4576
4701
|
),
|
|
4577
|
-
mode === "full" && /* @__PURE__ */
|
|
4578
|
-
/* @__PURE__ */
|
|
4579
|
-
properties && /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
4609
|
-
return /* @__PURE__ */
|
|
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__ */
|
|
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
|
|
4623
|
-
import { Handle as
|
|
4624
|
-
import { jsx as
|
|
4625
|
-
var ExternalSystem2_default =
|
|
4626
|
-
return /* @__PURE__ */
|
|
4627
|
-
/* @__PURE__ */
|
|
4628
|
-
|
|
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:
|
|
4756
|
+
position: Position15.Left,
|
|
4632
4757
|
style: EXTERNAL_SYSTEM_HANDLE_STYLE,
|
|
4633
4758
|
className: "bg-gray-500"
|
|
4634
4759
|
}
|
|
4635
4760
|
),
|
|
4636
|
-
/* @__PURE__ */
|
|
4637
|
-
|
|
4761
|
+
/* @__PURE__ */ jsx23(
|
|
4762
|
+
Handle18,
|
|
4638
4763
|
{
|
|
4639
4764
|
type: "source",
|
|
4640
|
-
position:
|
|
4765
|
+
position: Position15.Right,
|
|
4641
4766
|
style: EXTERNAL_SYSTEM_HANDLE_STYLE,
|
|
4642
4767
|
className: "bg-gray-500"
|
|
4643
4768
|
}
|
|
4644
4769
|
),
|
|
4645
|
-
/* @__PURE__ */
|
|
4770
|
+
/* @__PURE__ */ jsx23(ExternalSystem_default, { ...props })
|
|
4646
4771
|
] });
|
|
4647
4772
|
});
|
|
4648
4773
|
|
|
4649
4774
|
// src/nodes/DataProduct.tsx
|
|
4650
|
-
import { memo as
|
|
4775
|
+
import { memo as memo23 } from "react";
|
|
4651
4776
|
import { Package } from "lucide-react";
|
|
4652
|
-
import { Handle as
|
|
4653
|
-
import { jsx as
|
|
4654
|
-
function
|
|
4655
|
-
return /* @__PURE__ */
|
|
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
|
|
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__ */
|
|
4806
|
+
return /* @__PURE__ */ jsxs23(
|
|
4682
4807
|
"div",
|
|
4683
4808
|
{
|
|
4684
|
-
className:
|
|
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__ */
|
|
4690
|
-
|
|
4814
|
+
/* @__PURE__ */ jsx24(
|
|
4815
|
+
Handle19,
|
|
4691
4816
|
{
|
|
4692
4817
|
type: "target",
|
|
4693
|
-
position:
|
|
4818
|
+
position: Position16.Left,
|
|
4694
4819
|
style: HIDDEN_HANDLE_STYLE
|
|
4695
4820
|
}
|
|
4696
4821
|
),
|
|
4697
|
-
/* @__PURE__ */
|
|
4698
|
-
|
|
4822
|
+
/* @__PURE__ */ jsx24(
|
|
4823
|
+
Handle19,
|
|
4699
4824
|
{
|
|
4700
4825
|
type: "source",
|
|
4701
|
-
position:
|
|
4826
|
+
position: Position16.Right,
|
|
4702
4827
|
style: HIDDEN_HANDLE_STYLE
|
|
4703
4828
|
}
|
|
4704
4829
|
),
|
|
4705
|
-
notes && notes.length > 0 && /* @__PURE__ */
|
|
4706
|
-
/* @__PURE__ */
|
|
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__ */
|
|
4718
|
-
/* @__PURE__ */
|
|
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__ */
|
|
4738
|
-
/* @__PURE__ */
|
|
4739
|
-
/* @__PURE__ */
|
|
4740
|
-
/* @__PURE__ */
|
|
4741
|
-
/* @__PURE__ */
|
|
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__ */
|
|
4744
|
-
deprecated && /* @__PURE__ */
|
|
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__ */
|
|
4871
|
+
/* @__PURE__ */ jsx24(
|
|
4747
4872
|
"div",
|
|
4748
4873
|
{
|
|
4749
|
-
className:
|
|
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__ */
|
|
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__ */
|
|
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 =
|
|
4778
|
-
const sourceConnections =
|
|
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__ */
|
|
4906
|
+
return /* @__PURE__ */ jsxs23(
|
|
4782
4907
|
"div",
|
|
4783
4908
|
{
|
|
4784
|
-
className:
|
|
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__ */
|
|
4795
|
-
|
|
4919
|
+
/* @__PURE__ */ jsx24(
|
|
4920
|
+
Handle19,
|
|
4796
4921
|
{
|
|
4797
4922
|
type: "target",
|
|
4798
|
-
position:
|
|
4923
|
+
position: Position16.Left,
|
|
4799
4924
|
style: HIDDEN_HANDLE_STYLE
|
|
4800
4925
|
}
|
|
4801
4926
|
),
|
|
4802
|
-
/* @__PURE__ */
|
|
4803
|
-
|
|
4927
|
+
/* @__PURE__ */ jsx24(
|
|
4928
|
+
Handle19,
|
|
4804
4929
|
{
|
|
4805
4930
|
type: "source",
|
|
4806
|
-
position:
|
|
4931
|
+
position: Position16.Right,
|
|
4807
4932
|
style: HIDDEN_HANDLE_STYLE
|
|
4808
4933
|
}
|
|
4809
4934
|
),
|
|
4810
|
-
notes && notes.length > 0 && /* @__PURE__ */
|
|
4811
|
-
targetConnections.length > 0 && /* @__PURE__ */
|
|
4812
|
-
sourceConnections.length > 0 && /* @__PURE__ */
|
|
4813
|
-
/* @__PURE__ */
|
|
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:
|
|
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__ */
|
|
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__ */
|
|
4829
|
-
/* @__PURE__ */
|
|
4830
|
-
/* @__PURE__ */
|
|
4831
|
-
version && /* @__PURE__ */
|
|
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__ */
|
|
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 =
|
|
4976
|
+
var DataProduct_default = memo23(function DataProductNode(props) {
|
|
4852
4977
|
const nodeStyle = props?.data?.style;
|
|
4853
4978
|
if (nodeStyle === "post-it") {
|
|
4854
|
-
return /* @__PURE__ */
|
|
4979
|
+
return /* @__PURE__ */ jsx24(PostItDataProduct, { ...props });
|
|
4855
4980
|
}
|
|
4856
|
-
return /* @__PURE__ */
|
|
4981
|
+
return /* @__PURE__ */ jsx24(DefaultDataProduct, { ...props });
|
|
4857
4982
|
});
|
|
4858
4983
|
|
|
4859
4984
|
// src/edges/AnimatedMessageEdge.tsx
|
|
4860
|
-
import { memo as
|
|
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
|
|
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 =
|
|
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__ */
|
|
5034
|
+
return /* @__PURE__ */ jsx25(
|
|
4910
5035
|
"g",
|
|
4911
5036
|
{
|
|
4912
5037
|
className: `ec-animated-msg ${opacityClass}`,
|
|
4913
|
-
children: /* @__PURE__ */
|
|
4914
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
4966
|
-
/* @__PURE__ */
|
|
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__ */
|
|
4978
|
-
label && /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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
|
|
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 =
|
|
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__ */
|
|
5054
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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
|
|
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 =
|
|
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__ */
|
|
5150
|
-
/* @__PURE__ */
|
|
5151
|
-
data?.animated && /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
5295
|
+
children: /* @__PURE__ */ jsx27("mpath", { href: `#${id}` })
|
|
5171
5296
|
}
|
|
5172
5297
|
)
|
|
5173
5298
|
}
|
|
5174
5299
|
)
|
|
5175
5300
|
}
|
|
5176
5301
|
),
|
|
5177
|
-
label && /* @__PURE__ */
|
|
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
|
|
5321
|
+
memo as memo27
|
|
5197
5322
|
} from "react";
|
|
5198
|
-
import { jsx as
|
|
5199
|
-
var VisualiserSearch =
|
|
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__ */
|
|
5336
|
-
/* @__PURE__ */
|
|
5337
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
5387
|
-
/* @__PURE__ */
|
|
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
|
|
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
|
|
5417
|
-
var StepWalkthrough_default =
|
|
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__ */
|
|
5577
|
-
/* @__PURE__ */
|
|
5578
|
-
/* @__PURE__ */
|
|
5579
|
-
description && /* @__PURE__ */
|
|
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__ */
|
|
5582
|
-
/* @__PURE__ */
|
|
5583
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
5599
|
-
/* @__PURE__ */
|
|
5600
|
-
/* @__PURE__ */
|
|
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__ */
|
|
5612
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
5756
|
+
/* @__PURE__ */ jsx29(ChevronRightIcon, { className: "w-4 h-4 ml-1" })
|
|
5631
5757
|
]
|
|
5632
5758
|
}
|
|
5633
|
-
) : /* @__PURE__ */
|
|
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
|
|
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__ */
|
|
5745
|
-
/* @__PURE__ */
|
|
5746
|
-
/* @__PURE__ */
|
|
5747
|
-
/* @__PURE__ */
|
|
5748
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
5765
|
-
/* @__PURE__ */
|
|
5766
|
-
/* @__PURE__ */
|
|
5767
|
-
/* @__PURE__ */
|
|
5768
|
-
/* @__PURE__ */
|
|
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__ */
|
|
5774
|
-
/* @__PURE__ */
|
|
5775
|
-
/* @__PURE__ */
|
|
5776
|
-
] }) : /* @__PURE__ */
|
|
5777
|
-
/* @__PURE__ */
|
|
5778
|
-
/* @__PURE__ */
|
|
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__ */
|
|
5784
|
-
/* @__PURE__ */
|
|
5785
|
-
/* @__PURE__ */
|
|
5786
|
-
/* @__PURE__ */
|
|
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__ */
|
|
5793
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
|
6053
|
+
import { NodeToolbar, Position as Position17, useViewport } from "@xyflow/react";
|
|
5919
6054
|
import { ArrowRightLeft as ArrowRightLeft2, FileText } from "lucide-react";
|
|
5920
|
-
import { jsx as
|
|
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__ */
|
|
6082
|
+
return /* @__PURE__ */ jsx31(
|
|
5948
6083
|
NodeToolbar,
|
|
5949
6084
|
{
|
|
5950
6085
|
nodeId: node.id,
|
|
5951
|
-
position:
|
|
6086
|
+
position: Position17.Bottom,
|
|
5952
6087
|
isVisible: true,
|
|
5953
6088
|
offset: -16,
|
|
5954
|
-
children: /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
6109
|
+
return /* @__PURE__ */ jsx31(
|
|
5975
6110
|
NodeToolbar,
|
|
5976
6111
|
{
|
|
5977
6112
|
nodeId: node.id,
|
|
5978
|
-
position:
|
|
6113
|
+
position: Position17.Bottom,
|
|
5979
6114
|
isVisible: true,
|
|
5980
6115
|
offset: -16,
|
|
5981
|
-
children: /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
6129
|
+
children: /* @__PURE__ */ jsx31(FileText, { style: { width: iconSize, height: iconSize } })
|
|
5995
6130
|
}
|
|
5996
6131
|
),
|
|
5997
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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
|
|
6017
|
-
import { jsx as
|
|
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__ */
|
|
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__ */
|
|
6029
|
-
|
|
6163
|
+
side === "right" && /* @__PURE__ */ jsx32(
|
|
6164
|
+
Handle20,
|
|
6030
6165
|
{
|
|
6031
6166
|
type: "target",
|
|
6032
|
-
position:
|
|
6167
|
+
position: Position18.Left,
|
|
6033
6168
|
style: { visibility: "hidden" }
|
|
6034
6169
|
}
|
|
6035
6170
|
),
|
|
6036
|
-
/* @__PURE__ */
|
|
6037
|
-
side === "left" && /* @__PURE__ */
|
|
6038
|
-
|
|
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:
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
6289
|
-
/* @__PURE__ */
|
|
6290
|
-
displayNodes.map((node, index) => /* @__PURE__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
6390
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
6415
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
6590
|
+
children: /* @__PURE__ */ jsx34(XIcon2, { style: { width: 20, height: 20 } })
|
|
6456
6591
|
}
|
|
6457
6592
|
) })
|
|
6458
6593
|
]
|
|
6459
6594
|
}
|
|
6460
6595
|
),
|
|
6461
|
-
/* @__PURE__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
6846
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
6858
|
-
isRendering && /* @__PURE__ */
|
|
6859
|
-
/* @__PURE__ */
|
|
6860
|
-
/* @__PURE__ */
|
|
6861
|
-
/* @__PURE__ */
|
|
6862
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
6887
|
-
/* @__PURE__ */
|
|
6888
|
-
/* @__PURE__ */
|
|
6889
|
-
/* @__PURE__ */
|
|
6890
|
-
/* @__PURE__ */
|
|
6891
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
6913
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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:
|
|
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:
|
|
7034
|
-
targetPosition:
|
|
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
|
|
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
|
|
7179
|
-
var VisualizerDropdownContent =
|
|
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__ */
|
|
7229
|
-
/* @__PURE__ */
|
|
7230
|
-
/* @__PURE__ */
|
|
7231
|
-
/* @__PURE__ */
|
|
7232
|
-
/* @__PURE__ */
|
|
7233
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
7267
|
-
/* @__PURE__ */
|
|
7268
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
7284
|
-
/* @__PURE__ */
|
|
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__ */
|
|
7292
|
-
/* @__PURE__ */
|
|
7293
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
7316
|
-
/* @__PURE__ */
|
|
7317
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
7340
|
-
/* @__PURE__ */
|
|
7341
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
7357
|
-
/* @__PURE__ */
|
|
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__ */
|
|
7364
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
7383
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
7398
|
-
/* @__PURE__ */
|
|
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__ */
|
|
7407
|
-
/* @__PURE__ */
|
|
7408
|
-
/* @__PURE__ */
|
|
7409
|
-
/* @__PURE__ */
|
|
7410
|
-
/* @__PURE__ */
|
|
7411
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
7445
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
7457
|
-
/* @__PURE__ */
|
|
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__ */
|
|
7466
|
-
/* @__PURE__ */
|
|
7467
|
-
/* @__PURE__ */
|
|
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__ */
|
|
7474
|
-
/* @__PURE__ */
|
|
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__ */
|
|
7480
|
-
/* @__PURE__ */
|
|
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__ */
|
|
7487
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
7498
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
7509
|
-
/* @__PURE__ */
|
|
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__ */
|
|
7514
|
-
/* @__PURE__ */
|
|
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__ */
|
|
7521
|
-
/* @__PURE__ */
|
|
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__ */
|
|
7526
|
-
/* @__PURE__ */
|
|
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__ */
|
|
7533
|
-
/* @__PURE__ */
|
|
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
|
|
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
|
|
7547
|
-
var NodeContextMenu_default =
|
|
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__ */
|
|
7553
|
-
return /* @__PURE__ */
|
|
7554
|
-
/* @__PURE__ */
|
|
7555
|
-
/* @__PURE__ */
|
|
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__ */
|
|
7561
|
-
item.separator && index > 0 && /* @__PURE__ */
|
|
7562
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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
|
|
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:
|
|
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:
|
|
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
|
|
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
|
|
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:
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
8457
|
+
children: /* @__PURE__ */ jsx38("span", { style: { fontSize: 10, fontWeight: 700, color: AMBER2[700] }, children: index + 1 })
|
|
8312
8458
|
}
|
|
8313
8459
|
),
|
|
8314
|
-
/* @__PURE__ */
|
|
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__ */
|
|
8472
|
+
note.priority && /* @__PURE__ */ jsx38(PriorityBadge, { priority: note.priority })
|
|
8327
8473
|
]
|
|
8328
8474
|
}
|
|
8329
8475
|
),
|
|
8330
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
8457
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
8655
|
+
children: /* @__PURE__ */ jsx38(X, { style: { width: 15, height: 15 } })
|
|
8510
8656
|
}
|
|
8511
8657
|
) })
|
|
8512
8658
|
]
|
|
8513
8659
|
}
|
|
8514
8660
|
),
|
|
8515
|
-
/* @__PURE__ */
|
|
8516
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
8579
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
8646
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
8700
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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 =
|
|
8958
|
+
var LegendPanel = memo31(function LegendPanel2({
|
|
8813
8959
|
legend,
|
|
8814
8960
|
showMinimap,
|
|
8815
8961
|
onLegendClick
|
|
8816
8962
|
}) {
|
|
8817
|
-
return /* @__PURE__ */
|
|
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__ */
|
|
8823
|
-
([key, { count, colorClass, groupId }]) => /* @__PURE__ */
|
|
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__ */
|
|
8830
|
-
/* @__PURE__ */
|
|
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 =
|
|
9027
|
+
const Wrapped = memo31((props) => {
|
|
8882
9028
|
const items = props.data?.contextMenu;
|
|
8883
|
-
if (!items?.length) return /* @__PURE__ */
|
|
8884
|
-
return /* @__PURE__ */
|
|
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:
|
|
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__ */
|
|
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__ */
|
|
9575
|
-
isMermaidView ? /* @__PURE__ */
|
|
9576
|
-
/* @__PURE__ */
|
|
9577
|
-
/* @__PURE__ */
|
|
9578
|
-
/* @__PURE__ */
|
|
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__ */
|
|
9585
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
9598
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
9679
|
-
/* @__PURE__ */
|
|
9680
|
-
/* @__PURE__ */
|
|
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__ */
|
|
9687
|
-
/* @__PURE__ */
|
|
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__ */
|
|
9839
|
+
/* @__PURE__ */ jsx39(
|
|
9692
9840
|
DropdownMenu2.Portal,
|
|
9693
9841
|
{
|
|
9694
9842
|
container: reactFlowWrapperRef.current,
|
|
9695
|
-
children: /* @__PURE__ */
|
|
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__ */
|
|
9704
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
9749
|
-
/* @__PURE__ */
|
|
9750
|
-
/* @__PURE__ */
|
|
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__ */
|
|
9913
|
+
children: links.map((link) => /* @__PURE__ */ jsx39("option", { value: link.url, children: link.label }, link.url))
|
|
9766
9914
|
}
|
|
9767
9915
|
),
|
|
9768
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
9791
|
-
includeBackground && /* @__PURE__ */
|
|
9792
|
-
showMinimap && /* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
9817
|
-
/* @__PURE__ */
|
|
9818
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
9870
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
9895
|
-
/* @__PURE__ */
|
|
9896
|
-
/* @__PURE__ */
|
|
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__ */
|
|
10050
|
+
children: /* @__PURE__ */ jsx39(ExternalLink2, { className: "w-5 h-5 rotate-180" })
|
|
9903
10051
|
}
|
|
9904
10052
|
)
|
|
9905
10053
|
] }),
|
|
9906
|
-
/* @__PURE__ */
|
|
9907
|
-
/* @__PURE__ */
|
|
9908
|
-
/* @__PURE__ */
|
|
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__ */
|
|
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__ */
|
|
9925
|
-
/* @__PURE__ */
|
|
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__ */
|
|
10005
|
-
/* @__PURE__ */
|
|
10006
|
-
/* @__PURE__ */
|
|
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__ */
|
|
10039
|
-
footerLabel && /* @__PURE__ */
|
|
10040
|
-
href && /* @__PURE__ */
|
|
10041
|
-
/* @__PURE__ */
|
|
10042
|
-
/* @__PURE__ */
|
|
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,
|