@likec4/diagram 1.19.1 → 1.20.0

package/dist/xyflow/XYFlowInner.js

@@ -1,41 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { deepEqual } from "fast-equals";
-import { memo } from "react";
-import { isNonNullish } from "remeda";
-import { useDiagramState } from "../hooks/useDiagramState.js";
-import DiagramTitlePanel from "../ui/DiagramTitlePanel.js";
-import { DynamicViewWalkthrough } from "../ui/DynamicViewWalkthrough.js";
-import { TopLeftPanel } from "../ui/top-left/TopLeftPanel.js";
-import { XYFlowBackground } from "./XYFlowBackground.js";
-import { NotationPanel } from "../ui/notation/NotationPanel.js";
-const XYFlowInner = /* @__PURE__ */ memo(function XYFlowInnerR({
-  background,
-  showDiagramTitle
-}) {
-  const {
-    showNotations,
-    isDynamicView,
-    showTopLeft,
-    isDynamicViewActive,
-    enableDynamicViewWalkthrough
-  } = useDiagramState((s) => ({
-    showNotations: s.showNotations,
-    isDynamicView: s.isDynamicView,
-    showTopLeft: s.controls || s.showNavigationButtons && !!s.onNavigateTo || !!s.onBurgerMenuClick,
-    enableDynamicViewWalkthrough: s.enableDynamicViewWalkthrough,
-    isDynamicViewActive: isNonNullish(s.activeWalkthrough)
-  }));
-  const isBgWithPattern = background !== "transparent" && background !== "solid";
-  const isDiagramTitleVisible = showDiagramTitle && !isDynamicViewActive;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isBgWithPattern && /* @__PURE__ */ jsx(XYFlowBackground, { background }),
-    showTopLeft && /* @__PURE__ */ jsx(TopLeftPanel, {}),
-    isDiagramTitleVisible && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
-    isDynamicView && enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
-    showNotations && /* @__PURE__ */ jsx(NotationPanel, {})
-  ] });
-}, deepEqual);
-XYFlowInner.displayName = "XYFlowInner";
-export {
-  XYFlowInner
-};

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

@@ -1,7 +0,0 @@
-import { BoxProps } from '@mantine/core';
-import { DiagramFlowTypes } from '../types';
-export interface EdgeLabelProps extends Omit<BoxProps, 'label'> {
-    isDimmed: boolean;
-    edgeData: DiagramFlowTypes.DiagramEdgeData;
-}
-export declare const EdgeLabel: ({ isDimmed, edgeData: { label, edge, }, ...props }: EdgeLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/xyflow/edges/EdgeLabel.js

@@ -1,160 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,443 +0,0 @@
-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/edges.css.js

@@ -1,37 +0,0 @@
-/* empty css                         */
-var container = "bexn7q1";
-var dimmed = "bexn7q2";
-var edgePathBg = "bexn7q3";
-var markerContext = "bexn7q4";
-var controlPoint = "bexn7q5";
-var controlDragging = "bexn7q6";
-var cssEdgePath = "bexn7q8";
-var stepEdgeNumber = "bexn7q9";
-var varLabelX = "var(--bexn7qa)";
-var varLabelY = "var(--bexn7qb)";
-var edgeLabel = "bexn7qd";
-var edgeLabelText = "bexn7qe";
-var edgeLabelTechnology = "bexn7qf";
-var edgeNoteCloseButton = "bexn7qg";
-var edgeNoteText = "bexn7qh";
-var cssNavigateBtn = "bexn7qi";
-var cssNavigateBtnIcon = "bexn7qj";
-export {
-  container,
-  controlDragging,
-  controlPoint,
-  cssEdgePath,
-  cssNavigateBtn,
-  cssNavigateBtnIcon,
-  dimmed,
-  edgeLabel,
-  edgeLabelTechnology,
-  edgeLabelText,
-  edgeNoteCloseButton,
-  edgeNoteText,
-  edgePathBg,
-  markerContext,
-  stepEdgeNumber,
-  varLabelX,
-  varLabelY
-};