@likec4/diagram 1.59.4 → 1.60.0

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

@@ -0,0 +1,524 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconArrowRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.mjs";
+import IconFileSymlink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.mjs";
+import IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs";
+import IconZoomScan from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import { roundDpr } from "../../utils/roundDpr.mjs";
+import { useRootContainerRef } from "../../context/RootContainerContext.mjs";
+import { useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
+import { useOnDiagramEvent } from "../../hooks/useDiagram.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { findDiagramEdge, findDiagramNode } from "../state/utils.mjs";
+import { Markdown } from "../../base-primitives/Markdown.mjs";
+import { Link } from "../../components/Link.mjs";
+import { PortalToContainer } from "../../components/PortalToContainer.mjs";
+import { RelationshipPopoverActorLogic } from "./actor.mjs";
+import { Endpoint, RelationshipTitle } from "./components.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { Fragment, forwardRef, memo, useCallback, useEffect, 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
+const 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
+	};
+});
+const 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" });
+	});
+	useOnDiagramEvent("paneClick", () => {
+		if (openedEdgeId) 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) => {
+		actorRef.send({ type: "dropdown.mouseEnter" });
+		const edge = openedEdgeId ? diagram.findEdge(openedEdgeId) : null;
+		if (edge && !edge.data.hovered) diagram.send({
+			type: "xyflow.edgeMouseEnter",
+			edge,
+			event
+		});
+	}, [
+		actorRef,
+		diagram,
+		openedEdgeId
+	]);
+	const onMouseLeave = useCallback((event) => {
+		actorRef.send({ type: "dropdown.mouseLeave" });
+		const edge = openedEdgeId ? diagram.findEdge(openedEdgeId) : null;
+		if (edge && edge.data.hovered) diagram.send({
+			type: "xyflow.edgeMouseLeave",
+			edge,
+			event
+		});
+	}, [
+		actorRef,
+		diagram,
+		openedEdgeId
+	]);
+	const edgeData = useDiagramSelector(useCallback(({ context: ctx }) => {
+		const diagramEdge = openedEdgeId ? findDiagramEdge(ctx, openedEdgeId) : null;
+		const sourceNode = diagramEdge ? findDiagramNode(ctx, diagramEdge.source) : null;
+		const targetNode = diagramEdge ? findDiagramNode(ctx, diagramEdge.target) : null;
+		if (!diagramEdge || !sourceNode || !targetNode || isEmpty(diagramEdge.relations)) return {
+			diagramEdge: null,
+			sourceNode: null,
+			targetNode: null
+		};
+		return {
+			diagramEdge,
+			sourceNode,
+			targetNode
+		};
+	}, [openedEdgeId]), shallowEqual);
+	const [direct, nested] = edgeData.diagramEdge ? pipe(edgeData.diagramEdge.relations, map((id) => {
+		try {
+			return likec4model.relationship(id);
+		} catch (e) {
+			console.error(`View is cached and likec4model missing relationship ${id} from ${edgeData.sourceNode.id} -> ${edgeData.targetNode.id}`, e);
+			return null;
+		}
+	}), filter(isTruthy), partition((r) => r.source.id === edgeData.sourceNode.id && r.target.id === edgeData.targetNode.id)) : [[], []];
+	let component = null;
+	if (edgeData.diagramEdge && (direct.length > 0 || nested.length > 0)) component = /* @__PURE__ */ jsx(RelationshipPopoverInternal, {
+		viewId,
+		direct,
+		nested,
+		diagramEdge: edgeData.diagramEdge,
+		sourceNode: edgeData.sourceNode,
+		targetNode: edgeData.targetNode,
+		onMouseEnter,
+		onMouseLeave
+	});
+	return /* @__PURE__ */ jsx(PortalToContainer, { children: component });
+});
+const getEdgeLabelElement = (edgeId, container) => {
+	return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? container?.querySelector(`.likec4-edge-middle-point[data-edge-id="${edgeId}"]`) ?? null;
+};
+const RelationshipPopoverInternal = ({ viewId, diagramEdge, direct, nested, sourceNode, targetNode, onMouseEnter, onMouseLeave }) => {
+	const ref = useRef(null);
+	const { enableNavigateTo, enableVscode } = useEnabledFeatures();
+	const containerRef = useRootContainerRef();
+	const [referenceEl, setReferenceEl] = useState(null);
+	useEffect(() => {
+		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: 450
+							})}px`,
+							maxHeight: `${clamp(roundDpr(availableHeight), {
+								min: 80,
+								max: 500
+							})}px`
+						});
+					} }),
+					hide({ padding: 16 })
+				]
+			}).then(({ x, y, middlewareData }) => {
+				if (wasCanceled) return;
+				if (middlewareData.hide?.referenceHidden) {
+					popper.style.visibility = "hidden";
+					return;
+				}
+				popper.style.transform = `translate(${roundDpr(x)}px, ${roundDpr(y)}px)`;
+				popper.style.visibility = "visible";
+			});
+		};
+		const cleanup = autoUpdate(reference, popper, update, {
+			ancestorResize: false,
+			animationFrame: true
+		});
+		return () => {
+			wasCanceled = true;
+			cleanup();
+		};
+	}, [referenceEl]);
+	const diagram = useDiagram();
+	const renderRelationship = (relationship, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(Relationship, {
+		relationship,
+		sourceNode,
+		targetNode,
+		onNavigateTo: enableNavigateTo && relationship.$relationship.navigateTo && relationship.$relationship.navigateTo !== viewId ? () => diagram.navigateTo(relationship.$relationship.navigateTo) : void 0,
+		onOpenSource: enableVscode ? () => {
+			diagram.openSource({ relation: relationship.id });
+		} : void 0
+	})] }, relationship.id);
+	return /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+		ref,
+		onMouseEnter,
+		onMouseLeave,
+		type: "auto",
+		scrollbars: "y",
+		scrollbarSize: 6,
+		styles: { viewport: {
+			overscrollBehavior: "contain",
+			minWidth: 200,
+			minHeight: 80
+		} },
+		className: cx("nowheel", 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"
+			},
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.select({ edges: [diagramEdge.id] });
+			},
+			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)] })
+			]
+		})
+	});
+};
+const Relationship = forwardRef(({ relationship: r, sourceNode, targetNode, onNavigateTo, onOpenSource }, ref) => {
+	const sourceId = getEndpointId(r, "source", sourceNode);
+	const targetId = getEndpointId(r, "target", targetNode);
+	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
+							})
+						}),
+						onNavigateTo && /* @__PURE__ */ jsx(Tooltip$1, {
+							label: "Open dynamic view",
+							children: /* @__PURE__ */ jsx(ActionIcon, {
+								size: "sm",
+								radius: "sm",
+								variant: "default",
+								onClick: (event) => {
+									event.stopPropagation();
+									onNavigateTo();
+								},
+								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))
+			})] })
+		]
+	});
+});
+const Label = styled("div", { base: {
+	display: "block",
+	fontSize: "xxs",
+	fontWeight: "medium",
+	userSelect: "none",
+	lineHeight: "sm",
+	color: "text.dimmed"
+} });
+const 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.mjs

@@ -0,0 +1,120 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { assertEvent, assign, setup } from "xstate";
+
+//#region src/likec4diagram/relationship-popover/actor.ts
+const _actorLogic = 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" } }
+				}
+			}
+		}
+	}
+});
+const RelationshipPopoverActorLogic = _actorLogic;
+
+//#endregion
+export { RelationshipPopoverActorLogic };

package/dist/likec4diagram/relationship-popover/components.mjs

@@ -0,0 +1,47 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { jsx } from "react/jsx-runtime";
+import { styled } from "@likec4/styles/jsx";
+import { txt } from "@likec4/styles/patterns";
+
+//#region src/likec4diagram/relationship-popover/components.tsx
+const Endpoint = ({ children, likec4color }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-likec4-color": likec4color,
+		className: txt({
+			size: "xxs",
+			fontWeight: "medium",
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			truncate: true,
+			paddingX: "1",
+			paddingY: "0.5",
+			rounded: "xs",
+			background: {
+				_light: "var(--likec4-palette-fill)/90",
+				_dark: "var(--likec4-palette-fill)/60"
+			},
+			color: {
+				_light: "var(--likec4-palette-hiContrast)",
+				_dark: "var(--likec4-palette-loContrast)"
+			}
+		}),
+		style: {
+			minWidth: 0,
+			maxWidth: 160
+		},
+		children
+	});
+};
+const RelationshipTitle = styled("div", { base: {
+	whiteSpaceCollapse: "preserve-breaks",
+	fontSize: "sm",
+	lineHeight: "sm",
+	userSelect: "all",
+	overflowWrap: "anywhere",
+	wordBreak: "break-word",
+	minWidth: "0"
+} });
+
+//#endregion
+export { Endpoint, RelationshipTitle };