@likec4/diagram 1.59.4 → 1.60.0

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -1,522 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { roundDpr } from "../../utils/roundDpr.js";
-import { useRootContainerRef } from "../../context/RootContainerContext.js";
-import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.js";
-import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
-import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
-import { useOnDiagramEvent } from "../../hooks/useDiagram.js";
-import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
-import { findDiagramEdge, findDiagramNode } from "../state/utils.js";
-import { Markdown } from "../../base-primitives/Markdown.js";
-import { Link } from "../../components/Link.js";
-import { PortalToContainer } from "../../components/PortalToContainer.js";
-import { RelationshipPopoverActorLogic } from "./actor.js";
-import { Endpoint, RelationshipTitle } from "./components.js";
-import { css, cx } from "@likec4/styles/css";
-import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from "@tabler/icons-react";
-import { Fragment, forwardRef, memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { shallowEqual } from "fast-equals";
-import { clamp, entries, filter, isEmpty, isTruthy, map, partition, pipe } from "remeda";
-import { nameFromFqn } from "@likec4/core";
-import { ActionIcon, Button, Divider, ScrollAreaAutosize, Text, Tooltip, TooltipGroup } from "@mantine/core";
-import { useActorRef, useSelector } from "@xstate/react";
-import { Box as Box$1, HStack, VStack, styled } from "@likec4/styles/jsx";
-import { bleed } from "@likec4/styles/patterns";
-import { autoPlacement, autoUpdate, computePosition, hide, offset, size } from "@floating-ui/dom";
-//#region src/likec4diagram/relationship-popover/RelationshipPopover.tsx
-var selector = selectDiagramContext((c) => {
-	let selected = null;
-	for (const edge of c.xyedges) if (edge.selected) {
-		if (selected) {
-			selected = null;
-			break;
-		}
-		selected = edge.data.id;
-	}
-	return {
-		viewId: c.view.id,
-		selected
-	};
-});
-var RelationshipPopover = memo(() => {
-	const likec4model = useLikeC4Model();
-	const actorRef = useActorRef(RelationshipPopoverActorLogic);
-	const diagram = useDiagram();
-	const { viewId, selected } = useDiagramSelector(selector);
-	const openedEdgeId = useSelector(actorRef, (s) => s.hasTag("opened") ? s.context.edgeId : null);
-	useOnDiagramEvent("navigateTo", () => {
-		actorRef.send({ type: "close" });
-	});
-	useOnDiagramEvent("edgeMouseEnter", ({ edge }) => {
-		actorRef.send({
-			type: "xyedge.mouseEnter",
-			edgeId: edge.data.id
-		});
-	});
-	useOnDiagramEvent("edgeMouseLeave", () => {
-		actorRef.send({ type: "xyedge.mouseLeave" });
-	});
-	useOnDiagramEvent("walkthroughStarted", () => {
-		actorRef.send({ type: "close" });
-	});
-	useEffect(() => {
-		if (selected) actorRef.send({
-			type: "xyedge.select",
-			edgeId: selected
-		});
-		else actorRef.send({ type: "xyedge.unselect" });
-	}, [selected]);
-	const onMouseEnter = useCallback((event) => {
-		if (!openedEdgeId) return;
-		actorRef.send({ type: "dropdown.mouseEnter" });
-		const edge = diagram.findEdge(openedEdgeId);
-		if (edge && !edge.data.hovered) diagram.send({
-			type: "xyflow.edgeMouseEnter",
-			edge,
-			event
-		});
-	}, [
-		actorRef,
-		diagram,
-		openedEdgeId
-	]);
-	const onMouseLeave = useCallback((event) => {
-		if (!openedEdgeId) return;
-		actorRef.send({ type: "dropdown.mouseLeave" });
-		const edge = diagram.findEdge(openedEdgeId);
-		if (edge?.data.hovered) diagram.send({
-			type: "xyflow.edgeMouseLeave",
-			edge,
-			event
-		});
-	}, [
-		actorRef,
-		diagram,
-		openedEdgeId
-	]);
-	const { diagramEdge, sourceNode, targetNode } = useDiagramSelector(useCallback(({ context: ctx }) => {
-		const diagramEdge = openedEdgeId ? findDiagramEdge(ctx, openedEdgeId) : null;
-		return {
-			diagramEdge,
-			sourceNode: diagramEdge ? findDiagramNode(ctx, diagramEdge.source) : null,
-			targetNode: diagramEdge ? findDiagramNode(ctx, diagramEdge.target) : null
-		};
-	}, [openedEdgeId]), shallowEqual);
-	if (!diagramEdge || !sourceNode || !targetNode || isEmpty(diagramEdge.relations)) return null;
-	const [direct, nested] = pipe(diagramEdge.relations, map((id) => {
-		try {
-			return likec4model.relationship(id);
-		} catch (e) {
-			console.error(`View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`, e);
-			return null;
-		}
-	}), filter(isTruthy), partition((r) => r.source.id === sourceNode.id && r.target.id === targetNode.id));
-	if (direct.length === 0 && nested.length === 0) {
-		console.warn("No relationships found  diagram edge", {
-			diagramEdge,
-			sourceNode,
-			targetNode
-		});
-		return null;
-	}
-	return /* @__PURE__ */ jsx(PortalToContainer, { children: /* @__PURE__ */ jsx(RelationshipPopoverInternal, {
-		viewId,
-		direct,
-		nested,
-		diagramEdge,
-		sourceNode,
-		targetNode,
-		onMouseEnter,
-		onMouseLeave
-	}) });
-});
-var getEdgeLabelElement = (edgeId, container) => {
-	return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? container?.querySelector(`.likec4-edge-middle-point[data-edge-id="${edgeId}"]`) ?? null;
-};
-var RelationshipPopoverInternal = ({ viewId, diagramEdge, direct, nested, sourceNode, targetNode, onMouseEnter, onMouseLeave }) => {
-	const ref = useRef(null);
-	const { enableNavigateTo, enableVscode } = useEnabledFeatures();
-	const { onOpenSource } = useDiagramEventHandlers();
-	const containerRef = useRootContainerRef();
-	const [referenceEl, setReferenceEl] = useState(null);
-	useLayoutEffect(() => {
-		setReferenceEl(getEdgeLabelElement(diagramEdge.id, containerRef.current));
-	}, [diagramEdge]);
-	useEffect(() => {
-		const reference = referenceEl;
-		const popper = ref.current;
-		if (!reference || !popper) return;
-		let wasCanceled = false;
-		const update = () => {
-			computePosition(reference, popper, {
-				placement: "bottom-start",
-				middleware: [
-					offset(4),
-					autoPlacement({
-						crossAxis: true,
-						allowedPlacements: [
-							"bottom-start",
-							"bottom-end",
-							"left-start",
-							"top-start",
-							"top-end",
-							"right-start",
-							"right-end",
-							"left-end"
-						]
-					}),
-					size({ apply({ availableHeight, availableWidth, elements }) {
-						if (wasCanceled) return;
-						Object.assign(elements.floating.style, {
-							maxWidth: `${clamp(roundDpr(availableWidth), {
-								min: 220,
-								max: 400
-							})}px`,
-							maxHeight: `${clamp(roundDpr(availableHeight), {
-								min: 100,
-								max: 500
-							})}px`
-						});
-					} }),
-					hide({ padding: 16 })
-				]
-			}).then(({ x, y, middlewareData }) => {
-				if (wasCanceled) return;
-				popper.style.transform = `translate(${roundDpr(x)}px, ${roundDpr(y)}px)`;
-				popper.style.visibility = middlewareData.hide?.referenceHidden ? "hidden" : "visible";
-			});
-		};
-		const cleanup = autoUpdate(reference, popper, update, {
-			ancestorResize: false,
-			animationFrame: true
-		});
-		return () => {
-			wasCanceled = true;
-			cleanup();
-		};
-	}, [referenceEl]);
-	const diagram = useDiagram();
-	const renderRelationship = useCallback((relationship, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(Relationship, {
-		viewId,
-		relationship,
-		sourceNode,
-		targetNode,
-		onNavigateTo: enableNavigateTo ? (viewId) => {
-			diagram.navigateTo(viewId);
-		} : void 0,
-		...onOpenSource && enableVscode && { onOpenSource: () => onOpenSource({ relation: relationship.id }) }
-	})] }, relationship.id), [
-		viewId,
-		sourceNode,
-		targetNode,
-		diagram,
-		enableNavigateTo,
-		onOpenSource,
-		enableVscode
-	]);
-	return /* @__PURE__ */ jsx(ScrollAreaAutosize, {
-		ref,
-		onMouseEnter,
-		onMouseLeave,
-		type: "auto",
-		scrollbars: "y",
-		scrollbarSize: 6,
-		styles: { viewport: {
-			overscrollBehavior: "contain",
-			minWidth: 200,
-			minHeight: 40
-		} },
-		className: cx(css({
-			layerStyle: "likec4.dropdown",
-			border: "subtle",
-			rounded: "sm",
-			p: "0",
-			pointerEvents: {
-				base: "all",
-				_whenPanning: "none"
-			},
-			position: "absolute",
-			top: "0",
-			left: "0",
-			width: "max-content",
-			cursor: "default"
-		})),
-		children: /* @__PURE__ */ jsxs(VStack, {
-			css: {
-				gap: "3",
-				padding: "4",
-				paddingTop: "2"
-			},
-			children: [
-				/* @__PURE__ */ jsx(Button, {
-					variant: "default",
-					color: "gray",
-					size: "compact-xs",
-					style: {
-						alignSelf: "flex-start",
-						fontWeight: "medium",
-						["--button-fz"]: "var(--font-sizes-xxs)"
-					},
-					onClick: (e) => {
-						e.stopPropagation();
-						diagram.openRelationshipDetails(diagramEdge.id);
-					},
-					children: "browse relationships"
-				}),
-				direct.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Label, { children: "DIRECT RELATIONSHIPS" }), direct.map(renderRelationship)] }),
-				nested.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Label, {
-					css: { mt: direct.length > 0 ? "2" : "0" },
-					children: "RESOLVED FROM NESTED"
-				}), nested.map(renderRelationship)] })
-			]
-		})
-	});
-};
-var Relationship = forwardRef(({ viewId, relationship: r, sourceNode, targetNode, onNavigateTo, onOpenSource }, ref) => {
-	const sourceId = getEndpointId(r, "source", sourceNode);
-	const targetId = getEndpointId(r, "target", targetNode);
-	const navigateTo = onNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : void 0;
-	const links = r.links;
-	const metadataEntries = r.hasMetadata() ? entries(r.getMetadata()).sort(([a], [b]) => a.localeCompare(b)) : null;
-	const metadataTooltipLabel = metadataEntries && /* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "flex",
-			flexDirection: "column",
-			gap: "6px"
-		},
-		children: [/* @__PURE__ */ jsx("div", {
-			style: {
-				fontWeight: "bold",
-				fontSize: "10px",
-				color: "#868e96",
-				marginBottom: "2px",
-				letterSpacing: "0.5px",
-				textTransform: "uppercase"
-			},
-			children: "Metadata"
-		}), /* @__PURE__ */ jsx("div", {
-			style: {
-				borderTop: "1px solid rgba(0, 0, 0, 0.1)",
-				paddingTop: "6px",
-				display: "flex",
-				flexDirection: "column",
-				gap: "6px"
-			},
-			children: metadataEntries.map(([key, value]) => {
-				const displayValue = Array.isArray(value) ? value.join(", ") : value;
-				return /* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "flex",
-						gap: "12px",
-						fontSize: "12px",
-						lineHeight: "1.4"
-					},
-					children: [/* @__PURE__ */ jsxs("span", {
-						style: {
-							fontWeight: "bold",
-							minWidth: "110px",
-							color: "#495057"
-						},
-						children: [key, ":"]
-					}), /* @__PURE__ */ jsx("span", {
-						style: {
-							color: "#212529",
-							wordBreak: "break-word",
-							flex: 1
-						},
-						children: displayValue
-					})]
-				}, key);
-			})
-		})]
-	});
-	return /* @__PURE__ */ jsxs(VStack, {
-		ref,
-		className: bleed({
-			block: "2",
-			inline: "2",
-			paddingY: "2.5",
-			paddingX: "2",
-			gap: "1",
-			rounded: "sm",
-			backgroundColor: { _hover: {
-				base: "mantine.gray[1]",
-				_dark: "mantine.dark[5]/70"
-			} }
-		}),
-		children: [
-			/* @__PURE__ */ jsx(HStack, {
-				gap: "0.5",
-				children: /* @__PURE__ */ jsxs(TooltipGroup, {
-					openDelay: 200,
-					children: [
-						/* @__PURE__ */ jsx(Tooltip$1, {
-							label: sourceId.full,
-							offset: 2,
-							position: "top-start",
-							children: /* @__PURE__ */ jsx(Endpoint, {
-								likec4color: sourceNode.color,
-								children: sourceId.short
-							})
-						}),
-						/* @__PURE__ */ jsx(IconArrowRight, {
-							stroke: 2.5,
-							size: "11px",
-							opacity: .65
-						}),
-						/* @__PURE__ */ jsx(Tooltip$1, {
-							label: targetId.full,
-							offset: 2,
-							position: "top-start",
-							children: /* @__PURE__ */ jsx(Endpoint, {
-								likec4color: targetNode.color,
-								children: targetId.short
-							})
-						}),
-						navigateTo && /* @__PURE__ */ jsx(Tooltip$1, {
-							label: "Open dynamic view",
-							children: /* @__PURE__ */ jsx(ActionIcon, {
-								size: "sm",
-								radius: "sm",
-								variant: "default",
-								onClick: (event) => {
-									event.stopPropagation();
-									onNavigateTo?.(navigateTo);
-								},
-								style: { alignSelf: "flex-end" },
-								role: "button",
-								children: /* @__PURE__ */ jsx(IconZoomScan, {
-									size: "80%",
-									stroke: 2
-								})
-							})
-						}),
-						onOpenSource && /* @__PURE__ */ jsx(Tooltip$1, {
-							label: "Open source",
-							children: /* @__PURE__ */ jsx(ActionIcon, {
-								size: "sm",
-								radius: "sm",
-								variant: "default",
-								onClick: (event) => {
-									event.stopPropagation();
-									onOpenSource();
-								},
-								role: "button",
-								children: /* @__PURE__ */ jsx(IconFileSymlink, {
-									size: "80%",
-									stroke: 2
-								})
-							})
-						})
-					]
-				})
-			}),
-			/* @__PURE__ */ jsxs(HStack, {
-				gap: "xs",
-				alignItems: "center",
-				children: [/* @__PURE__ */ jsx(RelationshipTitle, { children: r.title || "untitled" }), metadataTooltipLabel && /* @__PURE__ */ jsx(Tooltip$1, {
-					label: metadataTooltipLabel,
-					w: 350,
-					position: "right",
-					offset: 10,
-					openDelay: 300,
-					withArrow: true,
-					bg: "white",
-					c: "dark",
-					withinPortal: true,
-					styles: { tooltip: {
-						boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-						border: "1px solid #dee2e6"
-					} },
-					children: /* @__PURE__ */ jsx(Box$1, {
-						display: "inline-flex",
-						children: /* @__PURE__ */ jsx(IconInfoCircle, {
-							size: 14,
-							opacity: .5,
-							style: {
-								flexShrink: 0,
-								cursor: "help"
-							}
-						})
-					})
-				})]
-			}),
-			r.kind && /* @__PURE__ */ jsxs(HStack, {
-				gap: "2",
-				children: [/* @__PURE__ */ jsx(Label, { children: "kind" }), /* @__PURE__ */ jsx(Text, {
-					size: "xs",
-					className: css({
-						userSelect: "all",
-						wordBreak: "break-word",
-						minWidth: "0"
-					}),
-					children: r.kind
-				})]
-			}),
-			r.technology && /* @__PURE__ */ jsxs(HStack, {
-				gap: "2",
-				children: [/* @__PURE__ */ jsx(Label, { children: "technology" }), /* @__PURE__ */ jsx(Text, {
-					size: "xs",
-					className: css({
-						userSelect: "all",
-						wordBreak: "break-word",
-						minWidth: "0"
-					}),
-					children: r.technology
-				})]
-			}),
-			r.summary.nonEmpty && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Label, { children: "description" }), /* @__PURE__ */ jsx(Box$1, {
-				css: {
-					paddingLeft: "2.5",
-					py: "1.5",
-					borderLeftWidth: "2",
-					borderLeftStyle: "dotted",
-					borderLeftColor: {
-						base: "mantine.gray[3]",
-						_dark: "mantine.dark[4]"
-					}
-				},
-				children: /* @__PURE__ */ jsx(Markdown, {
-					value: r.summary,
-					fontSize: "sm",
-					textScale: .875
-				})
-			})] }),
-			links.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Label, { children: "links" }), /* @__PURE__ */ jsx(HStack, {
-				gap: "1",
-				flexWrap: "wrap",
-				children: links.map((link) => /* @__PURE__ */ jsx(Link, {
-					size: "sm",
-					value: link
-				}, link.url))
-			})] })
-		]
-	});
-});
-var Label = styled("div", { base: {
-	display: "block",
-	fontSize: "xxs",
-	fontWeight: "medium",
-	userSelect: "none",
-	lineHeight: "sm",
-	color: "text.dimmed"
-} });
-var Tooltip$1 = Tooltip.withProps({
-	color: "dark",
-	fz: "xs",
-	label: "",
-	children: null,
-	offset: 8,
-	withinPortal: false
-});
-function getEndpointId(r, endpoint, diagramNode) {
-	const diagramNodeId = r.isDeploymentRelation() ? diagramNode.id : diagramNode.modelRef || "";
-	const full = r[endpoint].id;
-	return {
-		full,
-		short: nameFromFqn(diagramNodeId) + full.slice(diagramNodeId.length)
-	};
-}
-//#endregion
-export { RelationshipPopover };

package/dist/likec4diagram/relationship-popover/actor.d.ts

@@ -1,75 +0,0 @@
-import { EdgeId } from '@likec4/core/types';
-import { ActorLogicFrom, ActorRefFrom, SnapshotFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject } from 'xstate';
-export type RelationshipPopoverActorEvent = {
-    type: 'xyedge.mouseEnter';
-    edgeId: EdgeId;
-} | {
-    type: 'xyedge.mouseLeave';
-} | {
-    type: 'xyedge.select';
-    edgeId: EdgeId;
-} | {
-    type: 'xyedge.unselect';
-} | {
-    type: 'close';
-} | {
-    type: 'dropdown.mouseEnter';
-} | {
-    type: 'dropdown.mouseLeave';
-};
-export interface RelationshipPopoverActorContext {
-    edgeId: EdgeId | null;
-    /**
-     * True if the edge was selected
-     */
-    edgeSelected: boolean;
-    /**
-     * The timeout for opening the popover
-     * If it was closed recently (<1.5s), it will be 300ms
-     * Otherwise, it will be 800ms
-     */
-    openTimeout: number;
-}
-declare const _actorLogic: StateMachine<RelationshipPopoverActorContext, RelationshipPopoverActorEvent, {}, never, {
-    type: "update edgeId";
-    params: NonReducibleUnknown;
-} | {
-    type: "increase open timeout";
-    params: NonReducibleUnknown;
-} | {
-    type: "decrease open timeout";
-    params: NonReducibleUnknown;
-} | {
-    type: "reset edgeId";
-    params: NonReducibleUnknown;
-}, {
-    type: "edge was selected";
-    params: unknown;
-} | {
-    type: "edge was hovered";
-    params: unknown;
-}, "open timeout" | "close timeout" | "long idle", "idle" | "opening" | {
-    active: "hovered" | "opened" | "closing";
-}, "opened", NonReducibleUnknown, NonReducibleUnknown, EventObject, MetaObject, {
-    id: "breadcrumbs";
-    states: {
-        readonly idle: {
-            id: "idle";
-        };
-        readonly opening: {};
-        readonly active: {
-            states: {
-                readonly opened: {};
-                readonly hovered: {};
-                readonly closing: {};
-            };
-        };
-    };
-}>;
-export interface RelationshipPopoverActorLogic extends ActorLogicFrom<typeof _actorLogic> {
-}
-export declare const RelationshipPopoverActorLogic: RelationshipPopoverActorLogic;
-export type RelationshipPopoverActorSnapshot = SnapshotFrom<RelationshipPopoverActorLogic>;
-export interface RelationshipPopoverActorRef extends ActorRefFrom<RelationshipPopoverActorLogic> {
-}
-export {};

package/dist/likec4diagram/relationship-popover/actor.js

@@ -1,116 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { assertEvent, assign, setup } from "xstate";
-var RelationshipPopoverActorLogic = setup({
-	types: {
-		context: {},
-		events: {},
-		tags: "opened"
-	},
-	delays: {
-		"open timeout": ({ context }) => context.openTimeout,
-		"close timeout": 600,
-		"long idle": 1500
-	},
-	actions: {
-		"update edgeId": assign(({ context, event }) => {
-			assertEvent(event, ["xyedge.select", "xyedge.mouseEnter"]);
-			return {
-				edgeId: event.edgeId,
-				edgeSelected: context.edgeSelected || event.type === "xyedge.select"
-			};
-		}),
-		"increase open timeout": assign(() => ({ openTimeout: 800 })),
-		"decrease open timeout": assign(() => ({ openTimeout: 300 })),
-		"reset edgeId": assign({
-			edgeId: null,
-			edgeSelected: false
-		})
-	},
-	guards: {
-		"edge was selected": ({ context }) => context.edgeSelected,
-		"edge was hovered": ({ context }) => !context.edgeSelected
-	}
-}).createMachine({
-	id: "breadcrumbs",
-	context: () => ({
-		edgeId: null,
-		edgeSelected: false,
-		openTimeout: 800
-	}),
-	initial: "idle",
-	on: { "close": {
-		target: "#idle",
-		actions: ["reset edgeId", "increase open timeout"]
-	} },
-	states: {
-		idle: {
-			id: "idle",
-			on: {
-				"xyedge.mouseEnter": {
-					target: "opening",
-					actions: "update edgeId"
-				},
-				"xyedge.select": {
-					target: "active",
-					actions: "update edgeId"
-				}
-			},
-			after: { "long idle": { actions: "increase open timeout" } }
-		},
-		opening: {
-			on: {
-				"xyedge.mouseLeave": { target: "idle" },
-				"xyedge.select": {
-					target: "active",
-					actions: "update edgeId"
-				}
-			},
-			after: { "open timeout": {
-				actions: "decrease open timeout",
-				target: "active"
-			} }
-		},
-		active: {
-			tags: ["opened"],
-			initial: "opened",
-			exit: "reset edgeId",
-			on: {
-				"xyedge.unselect": {
-					target: "idle",
-					actions: "increase open timeout"
-				},
-				"xyedge.select": { actions: "update edgeId" }
-			},
-			states: {
-				opened: { on: {
-					"dropdown.mouseEnter": { target: "hovered" },
-					"xyedge.mouseLeave": {
-						guard: "edge was hovered",
-						target: "closing"
-					}
-				} },
-				hovered: { on: { "dropdown.mouseLeave": [{
-					guard: "edge was selected",
-					target: "opened"
-				}, { target: "closing" }] } },
-				closing: {
-					on: {
-						"xyedge.mouseEnter": {
-							guard: "edge was hovered",
-							target: "opened",
-							actions: "update edgeId"
-						},
-						"xyedge.select": {
-							target: "opened",
-							actions: "update edgeId"
-						},
-						"dropdown.mouseEnter": { target: "hovered" }
-					},
-					after: { "close timeout": { target: "#idle" } }
-				}
-			}
-		}
-	}
-});
-//#endregion
-export { RelationshipPopoverActorLogic };