@likec4/diagram 1.18.0 → 1.19.0

package/dist/xyflow/edges/EdgeLabel.js

@@ -0,0 +1,160 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isStepEdgeId, extractStep } from "@likec4/core";
+import { Box, Stack, Text, ActionIcon, Popover, PopoverTarget, PopoverDropdown, ScrollAreaAutosize, CloseButton, Group, Button } from "@mantine/core";
+import { useDebouncedEffect } from "@react-hookz/web";
+import { IconZoomScan } from "@tabler/icons-react";
+import { EdgeLabelRenderer } from "@xyflow/react";
+import clsx from "clsx";
+import { useState } from "react";
+import { isTruthy } from "remeda";
+import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
+import { stopPropagation } from "../utils.js";
+import { stepEdgeNumber, edgeLabelText, edgeLabelTechnology, cssNavigateBtn, cssNavigateBtnIcon, edgeNoteText, edgeNoteCloseButton } from "./edges.css.js";
+import { RelationshipsDropdownMenu } from "./RelationshipsDropdownMenu.js";
+import { useDiagramState, useDiagramStoreApi } from "../../hooks/useDiagramState.js";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
+const EdgeLabel = ({
+  isDimmed,
+  edgeData: {
+    label,
+    edge
+  },
+  ...props
+}) => {
+  const likec4model = useLikeC4Model();
+  const {
+    enableRelationshipDetails,
+    isActiveWalkthroughStep,
+    hasOnNavigateTo
+  } = useDiagramState((s) => {
+    var _a;
+    return {
+      enableRelationshipDetails: s.enableRelationshipDetails,
+      isActiveWalkthroughStep: ((_a = s.activeWalkthrough) == null ? void 0 : _a.stepId) === edge.id,
+      hasOnNavigateTo: !!s.onNavigateTo
+    };
+  });
+  const notes = isActiveWalkthroughStep ? edge.notes ?? null : null;
+  const stepNum = isStepEdgeId(edge.id) ? extractStep(edge.id) : null;
+  const navigateTo = hasOnNavigateTo ? edge.navigateTo ?? null : null;
+  const wrapWithPopover = (node) => {
+    if (isTruthy(notes)) {
+      return /* @__PURE__ */ jsx(NotePopover, { notes, children: node });
+    }
+    if (enableRelationshipDetails && likec4model && edge.relations.length > 0) {
+      return /* @__PURE__ */ jsx(
+        RelationshipsDropdownMenu,
+        {
+          disabled: isDimmed,
+          likec4model,
+          edge,
+          children: node
+        }
+      );
+    }
+    return node;
+  };
+  return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: wrapWithPopover(
+    /* @__PURE__ */ jsxs(Box, { ...props, children: [
+      stepNum !== null && /* @__PURE__ */ jsx(Box, { className: stepEdgeNumber, children: stepNum }),
+      /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", children: [
+        isTruthy(label == null ? void 0 : label.text) && /* @__PURE__ */ jsx(Text, { component: "div", className: edgeLabelText, lineClamp: 5, children: label.text }),
+        isTruthy(edge.technology) && /* @__PURE__ */ jsx(Text, { component: "div", className: edgeLabelTechnology, children: "[ " + edge.technology + " ]" }),
+        navigateTo && /* @__PURE__ */ jsx(NavigateToBtn, { viewId: navigateTo })
+      ] })
+    ] })
+  ) });
+};
+const NotePopover = ({ notes, children }) => {
+  const {
+    nextDynamicStep,
+    hasNext,
+    hasPrevious
+  } = useDiagramState((s) => {
+    var _a, _b;
+    return {
+      nextDynamicStep: s.nextDynamicStep,
+      hasNext: ((_a = s.activeWalkthrough) == null ? void 0 : _a.hasNext) ?? false,
+      hasPrevious: ((_b = s.activeWalkthrough) == null ? void 0 : _b.hasPrevious) ?? false
+    };
+  });
+  const [isOpened, setIsOpened] = useState(false);
+  const portalProps = useMantinePortalProps();
+  useDebouncedEffect(
+    () => {
+      setIsOpened(true);
+    },
+    [],
+    300
+  );
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      shadow: "xs",
+      offset: 16,
+      opened: isOpened,
+      closeOnClickOutside: false,
+      ...portalProps,
+      children: [
+        /* @__PURE__ */ jsx(PopoverTarget, { children }),
+        /* @__PURE__ */ jsxs(
+          PopoverDropdown,
+          {
+            component: Stack,
+            p: "xs",
+            onPointerDownCapture: stopPropagation,
+            onClick: stopPropagation,
+            onDoubleClick: stopPropagation,
+            children: [
+              /* @__PURE__ */ jsx(ScrollAreaAutosize, { maw: 450, mah: 350, type: "scroll", mx: "auto", mt: 2, children: /* @__PURE__ */ jsx(Text, { component: "div", className: edgeNoteText, p: 4, children: notes }) }),
+              /* @__PURE__ */ jsx(
+                CloseButton,
+                {
+                  size: "xs",
+                  className: edgeNoteCloseButton,
+                  onClick: () => setIsOpened(false)
+                }
+              ),
+              (hasPrevious || hasNext) && /* @__PURE__ */ jsxs(Group, { gap: 0, justify: hasPrevious ? "flex-start" : "flex-end", children: [
+                hasPrevious && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "subtle",
+                    radius: "xs",
+                    size: "compact-xs",
+                    onClick: () => nextDynamicStep(-1),
+                    children: "back"
+                  }
+                ),
+                hasNext && /* @__PURE__ */ jsx(Button, { variant: "subtle", radius: "xs", size: "compact-xs", onClick: () => nextDynamicStep(), children: "next" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+function NavigateToBtn({ viewId }) {
+  const diagramApi = useDiagramStoreApi();
+  return /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      className: clsx("nodrag nopan", cssNavigateBtn),
+      size: "sm",
+      radius: "sm",
+      onPointerDownCapture: stopPropagation,
+      onClick: (event) => {
+        var _a, _b;
+        event.stopPropagation();
+        (_b = (_a = diagramApi.getState()).onNavigateTo) == null ? void 0 : _b.call(_a, viewId, event);
+      },
+      role: "button",
+      onDoubleClick: stopPropagation,
+      children: /* @__PURE__ */ jsx(IconZoomScan, { className: cssNavigateBtnIcon })
+    }
+  );
+}
+export {
+  EdgeLabel
+};

package/dist/xyflow/edges/RelationshipEdge.d.ts

@@ -0,0 +1,6 @@
+import { EdgeProps } from '@xyflow/react';
+import { DiagramFlowTypes } from '../types';
+import { NamedExoticComponent } from 'react';
+type DiagramEdgeProps = EdgeProps<DiagramFlowTypes.Edge>;
+export declare const RelationshipEdge: NamedExoticComponent<DiagramEdgeProps>;
+export {};

package/dist/xyflow/edges/RelationshipEdge.js

@@ -0,0 +1,443 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { nonNullable, isStepEdgeId, nonexhaustive, invariant } from "@likec4/core";
+import { useDebouncedEffect } from "@react-hookz/web";
+import { assignInlineVars } from "../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import clsx from "clsx";
+import { line, curveCatmullRomOpen } from "d3-shape";
+import { deepEqual } from "fast-equals";
+import { memo, useState, useRef, useEffect } from "react";
+import { isTruthy, first, last, hasAtLeast, isArray } from "remeda";
+import { useDiagramStoreApi, useDiagramState } from "../../hooks/useDiagramState.js";
+import { useXYStoreApi } from "../../hooks/useXYFlow.js";
+import { VectorImpl, vector } from "../../utils/vector.js";
+import { ZIndexes } from "../const.js";
+import { EdgeMarkers } from "../EdgeMarkers.js";
+import { bezierControlPoints } from "../utils.js";
+import { EdgeLabel } from "./EdgeLabel.js";
+import { container, dimmed, controlDragging, markerContext, edgePathBg, cssEdgePath, controlPoint, edgeLabel, varLabelX, varLabelY } from "./edges.css.js";
+import { getNodeIntersectionFromCenterToPoint } from "./utils.js";
+const toMarker = (arrowType) => {
+  if (!arrowType || arrowType === "none") {
+    return void 0;
+  }
+  switch (arrowType) {
+    case "normal":
+      return "Arrow";
+    case "crow":
+      return "Crow";
+    case "onormal":
+      return "OArrow";
+    case "diamond":
+      return "Diamond";
+    case "odiamond":
+      return "ODiamond";
+    case "open":
+    case "vee":
+      return "Open";
+    case "dot":
+      return "Dot";
+    case "odot":
+      return `ODot`;
+    default:
+      nonexhaustive(arrowType);
+  }
+};
+function bezierPath(bezierSpline) {
+  let [start, ...points] = bezierSpline;
+  invariant(start, "start should be defined");
+  let path = `M ${start[0]},${start[1]}`;
+  while (hasAtLeast(points, 3)) {
+    const [cp1, cp2, end, ...rest] = points;
+    path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`;
+    points = rest;
+  }
+  invariant(points.length === 0, "all points should be consumed");
+  return path;
+}
+const isSame = (a, b) => {
+  return Math.abs(a - b) < 2.5;
+};
+const isSamePoint = (a, b) => {
+  return isSame(isArray(a) ? a[0] : a.x, isArray(b) ? b[0] : b.x) && isSame(isArray(a) ? a[1] : a.y, isArray(b) ? b[1] : b.y);
+};
+const sameControlPoints = (a, b) => {
+  if (a === b) return true;
+  if (!a || !b || a.length !== b.length) return false;
+  return a.every((ap, i) => isSamePoint(ap, b[i]));
+};
+const isEqualProps = (prev, next) => prev.id === next.id && deepEqual(prev.source, next.source) && deepEqual(prev.target, next.target) && deepEqual(prev.selected ?? false, next.selected ?? false) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data.label, next.data.label) && sameControlPoints(prev.data.controlPoints, next.data.controlPoints) && deepEqual(prev.data.edge, next.data.edge);
+const curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y);
+const RelationshipEdge = memo(function RelationshipEdgeR({
+  id,
+  data,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  style,
+  source,
+  target,
+  interactionWidth
+}) {
+  const [isControlPointDragging, setIsControlPointDragging] = useState(false);
+  const diagramStore = useDiagramStoreApi();
+  const xyflowStore = useXYStoreApi();
+  const {
+    connectedToFocusedNode,
+    isActiveWalkthroughStep,
+    isEdgePathEditable,
+    isHovered,
+    isDimmed,
+    isActiveAsParallel
+  } = useDiagramState((s) => {
+    var _a, _b;
+    return {
+      isEdgePathEditable: s.readonly !== true && s.experimentalEdgeEditing === true && s.focusedNodeId === null && s.activeWalkthrough === null,
+      connectedToFocusedNode: s.focusedNodeId === source || s.focusedNodeId === target,
+      isActiveWalkthroughStep: ((_a = s.activeWalkthrough) == null ? void 0 : _a.stepId) === data.edge.id,
+      // If activeWalkthrough and this edge is part of the parallel group
+      isActiveAsParallel: !!((_b = s.activeWalkthrough) == null ? void 0 : _b.parallelPrefix) && id.startsWith(s.activeWalkthrough.parallelPrefix),
+      isHovered: s.hoveredEdgeId === id,
+      isDimmed: s.dimmed.has(id)
+    };
+  });
+  const isActive = connectedToFocusedNode || isActiveWalkthroughStep;
+  const { nodeLookup, edgeLookup } = xyflowStore.getState();
+  const sourceNode = nonNullable(nodeLookup.get(source), `source node ${source} not found`);
+  const targetNode = nonNullable(nodeLookup.get(target), `target node ${target} not found`);
+  const isModified = isTruthy(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.element.position);
+  const {
+    label,
+    edge: {
+      points: diagramEdgePoints,
+      line: line2 = "dashed",
+      color = "gray",
+      labelBBox,
+      ...diagramEdge
+    }
+  } = data;
+  let controlPoints = data.controlPoints ?? bezierControlPoints(data.edge);
+  const isStepEdge = isStepEdgeId(data.edge.id);
+  const isDotted = line2 === "dotted";
+  const isDashed = isDotted || line2 === "dashed";
+  let strokeDasharray;
+  if (isDotted) {
+    strokeDasharray = "1,8";
+  } else if (isDashed) {
+    strokeDasharray = "8,10";
+  }
+  let labelX = (labelBBox == null ? void 0 : labelBBox.x) ?? 0, labelY = (labelBBox == null ? void 0 : labelBBox.y) ?? 0;
+  const [labelPos, setLabelPos] = useState({
+    x: (label == null ? void 0 : label.bbox.x) ?? labelX,
+    y: (label == null ? void 0 : label.bbox.y) ?? labelY
+  });
+  let edgePath;
+  if (isModified) {
+    const sourceCenterPos = { x: sourceX, y: sourceY };
+    const targetCenterPos = { x: targetX, y: targetY };
+    const points = diagramEdge.dir === "back" ? [
+      targetCenterPos,
+      getNodeIntersectionFromCenterToPoint(targetNode, first(controlPoints) ?? sourceCenterPos),
+      ...controlPoints,
+      getNodeIntersectionFromCenterToPoint(sourceNode, last(controlPoints) ?? targetCenterPos),
+      sourceCenterPos
+    ] : [
+      sourceCenterPos,
+      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints) ?? targetCenterPos),
+      ...controlPoints,
+      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints) ?? sourceCenterPos),
+      targetCenterPos
+    ];
+    edgePath = nonNullable(curve(points));
+  } else {
+    edgePath = bezierPath(diagramEdgePoints);
+  }
+  const svgPathRef = useRef(null);
+  useEffect(() => {
+    const path = svgPathRef.current;
+    if (!path) return;
+    const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5);
+    const point = {
+      x: Math.round(dompoint.x),
+      y: Math.round(dompoint.y)
+    };
+    setLabelPos((current) => isSamePoint(current, point) ? current : point);
+  }, [edgePath]);
+  useDebouncedEffect(
+    () => {
+      if (!label || label.bbox.x === labelPos.x && label.bbox.y === labelPos.y) {
+        return;
+      }
+      diagramStore.getState().xyflow.updateEdgeData(id, {
+        label: {
+          ...label,
+          bbox: {
+            ...label.bbox,
+            ...labelPos
+          }
+        }
+      });
+    },
+    [labelPos],
+    50,
+    300
+  );
+  if (isModified || isControlPointDragging) {
+    labelX = labelPos.x;
+    labelY = labelPos.y;
+  }
+  const onLmbControlPointerDown = (index, e, domNode) => {
+    const { addSelectedEdges } = xyflowStore.getState();
+    const { xyflow } = diagramStore.getState();
+    addSelectedEdges([id]);
+    const wasCanceled = diagramStore.getState().cancelSaveManualLayout();
+    e.stopPropagation();
+    let hasMoved = false;
+    let pointer = { x: e.clientX, y: e.clientY };
+    const onPointerMove = (e2) => {
+      const clientPoint = {
+        x: e2.clientX,
+        y: e2.clientY
+      };
+      if (!isSamePoint(pointer, clientPoint)) {
+        setIsControlPointDragging(true);
+        hasMoved = true;
+        pointer = clientPoint;
+        const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false });
+        xyflow.updateEdgeData(id, (xyedge) => {
+          const cp = (xyedge.data.controlPoints ?? controlPoints).slice();
+          cp[index] = {
+            x: Math.round(x),
+            y: Math.round(y)
+          };
+          return {
+            controlPoints: cp
+          };
+        });
+      }
+      e2.stopPropagation();
+    };
+    const onPointerUp = (e2) => {
+      domNode.removeEventListener("pointermove", onPointerMove, {
+        capture: true
+      });
+      if (hasMoved) {
+        e2.stopPropagation();
+      }
+      if (hasMoved || wasCanceled) {
+        diagramStore.getState().scheduleSaveManualLayout();
+      }
+      setIsControlPointDragging(false);
+    };
+    domNode.addEventListener("pointermove", onPointerMove, {
+      capture: true
+    });
+    domNode.addEventListener("pointerup", onPointerUp, {
+      once: true,
+      capture: true
+    });
+  };
+  const onRmbControlPointerDown = (index, e, domNode) => {
+    const { xyflow } = diagramStore.getState();
+    if (controlPoints.length <= 1) {
+      return;
+    }
+    const onPointerUp = (e2) => {
+      const newControlPoints = controlPoints.slice();
+      newControlPoints.splice(index, 1);
+      e2.stopPropagation();
+      setTimeout(() => {
+        xyflow.updateEdgeData(id, { controlPoints: newControlPoints });
+        diagramStore.getState().scheduleSaveManualLayout();
+      }, 10);
+      domNode.removeEventListener("pointerup", onPointerUp, {
+        capture: true
+      });
+      e2.stopPropagation();
+    };
+    domNode.addEventListener("pointerup", onPointerUp, {
+      once: true,
+      capture: true
+    });
+    e.stopPropagation();
+  };
+  const onControlPointerDown = (index, e) => {
+    const { domNode } = xyflowStore.getState();
+    if (!domNode || e.pointerType !== "mouse") {
+      return;
+    }
+    switch (e.button) {
+      case 0:
+        onLmbControlPointerDown(index, e, domNode);
+        break;
+      case 2:
+        onRmbControlPointerDown(index, e, domNode);
+        break;
+    }
+  };
+  const onEdgePointerDown = (e) => {
+    const { domNode } = xyflowStore.getState();
+    const { xyflow, scheduleSaveManualLayout } = diagramStore.getState();
+    if (!domNode || e.pointerType !== "mouse") {
+      return;
+    }
+    if (e.button !== 2) {
+      return;
+    }
+    xyflow.updateEdgeData(id, (edge) => {
+      var _a;
+      const points = [
+        new VectorImpl(sourceX, sourceY),
+        ...controlPoints.map(vector) || [],
+        new VectorImpl(targetX, targetY)
+      ];
+      let pointer = { x: e.clientX, y: e.clientY };
+      const newPoint = vector(xyflow.screenToFlowPosition(pointer, { snapToGrid: false }));
+      let insertionIndex = 0;
+      let minDistance = Infinity;
+      for (let i = 0; i < points.length - 1; i++) {
+        const a = points[i], b = points[i + 1];
+        const fromCurrentToNext = b.sub(a);
+        const fromCurrentToNew = newPoint.sub(a);
+        const fromNextToNew = newPoint.sub(b);
+        if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
+          const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).abs() / fromCurrentToNext.abs());
+          if (distanceToEdge < minDistance) {
+            minDistance = distanceToEdge;
+            insertionIndex = i;
+          }
+        }
+      }
+      const newControlPoints = ((_a = edge.data.controlPoints) == null ? void 0 : _a.slice()) || [];
+      newControlPoints.splice(insertionIndex, 0, newPoint);
+      return { controlPoints: newControlPoints };
+    });
+    scheduleSaveManualLayout();
+    e.stopPropagation();
+  };
+  let markerStartName = toMarker(diagramEdge.tail);
+  let markerEndName = toMarker(diagramEdge.head ?? "normal");
+  if (diagramEdge.dir === "back") {
+    [markerStartName, markerEndName] = [markerEndName, markerStartName];
+  }
+  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null;
+  const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null;
+  const edgeZIndex = edgeLookup.get(id).zIndex ?? ZIndexes.Edge;
+  let labelZIndex;
+  if (isEdgePathEditable) {
+    labelZIndex = edgeZIndex - 1;
+  } else if (isHovered) {
+    labelZIndex = ZIndexes.Element + 1;
+  } else {
+    labelZIndex = edgeZIndex + 1;
+  }
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      className: clsx(
+        container,
+        isDimmed && dimmed,
+        isControlPointDragging && controlDragging
+      ),
+      "data-likec4-color": color,
+      "data-edge-dir": diagramEdge.dir,
+      "data-edge-active": isActive,
+      "data-edge-animated": isActive || isActiveAsParallel,
+      "data-edge-hovered": isHovered,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: clsx("react-flow__edge-interaction"),
+            d: edgePath,
+            fill: "none",
+            stroke: "transparent",
+            strokeWidth: interactionWidth ?? 10
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { className: markerContext, onPointerDown: (e) => onEdgePointerDown(e), children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }),
+            MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: clsx("react-flow__edge-path", edgePathBg),
+              d: edgePath,
+              style,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              ref: svgPathRef,
+              className: clsx("react-flow__edge-path", cssEdgePath),
+              d: edgePath,
+              style,
+              strokeLinecap: "round",
+              strokeDasharray,
+              markerStart: MarkerStart ? `url(#start${id})` : void 0,
+              markerEnd: MarkerEnd ? `url(#end${id})` : void 0
+            }
+          )
+        ] }),
+        isEdgePathEditable && /* @__PURE__ */ jsx(
+          "g",
+          {
+            onContextMenu: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
+              "circle",
+              {
+                onPointerDown: (e) => onControlPointerDown(i, e),
+                className: controlPoint,
+                cx: p.x,
+                cy: p.y,
+                r: 3
+              },
+              i
+            ))
+          }
+        ),
+        (data.label || isStepEdge) && /* @__PURE__ */ jsx(
+          EdgeLabel,
+          {
+            isDimmed,
+            edgeData: data,
+            className: clsx(
+              "nodrag nopan",
+              container,
+              edgeLabel,
+              isDimmed && dimmed
+            ),
+            style: {
+              ...assignInlineVars({
+                [varLabelX]: isModified ? `calc(${labelX}px - 10%)` : `${labelX}px`,
+                [varLabelY]: isModified ? `${labelY - 5}px` : `${labelY}px`
+              }),
+              // ...(isEdgePathEditable && selected && {
+              //   pointerEvents: 'none'
+              // }),
+              ...label && {
+                maxWidth: label.bbox.width + 18
+              },
+              zIndex: labelZIndex
+            },
+            mod: {
+              "data-likec4-color": color,
+              "data-edge-hovered": isHovered && !isActiveWalkthroughStep,
+              "data-edge-active": isActive
+            }
+          }
+        )
+      ]
+    }
+  );
+}, isEqualProps);
+export {
+  RelationshipEdge
+};

package/dist/xyflow/edges/RelationshipsDropdownMenu.css.d.ts

@@ -0,0 +1,4 @@
+export declare const menuDropdown: string;
+export declare const menuItemRelationship: string;
+export declare const endpoint: string;
+export declare const title: string;

package/dist/xyflow/edges/RelationshipsDropdownMenu.css.js

@@ -0,0 +1,11 @@
+/* empty css                                             */
+var menuDropdown = "qcv9lq0";
+var menuItemRelationship = "qcv9lq1";
+var endpoint = "qcv9lq2";
+var title = "qcv9lq3";
+export {
+  endpoint,
+  menuDropdown,
+  menuItemRelationship,
+  title
+};

package/dist/xyflow/edges/RelationshipsDropdownMenu.d.ts

@@ -0,0 +1,13 @@
+import { LikeC4Model } from '@likec4/core';
+import { PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { DiagramFlowTypes } from '../types';
+import { TooltipProps } from '@mantine/core';
+export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
+    component?: any;
+    renderRoot?: (props: Record<string, any>) => React.ReactNode;
+}>;
+export declare function RelationshipsDropdownMenu({ edge, disabled, likec4model, children }: PropsWithChildren<{
+    edge: DiagramFlowTypes.DiagramEdgeData['edge'];
+    disabled?: boolean | undefined;
+    likec4model: LikeC4Model;
+}>): import("react/jsx-runtime").JSX.Element;