@likec4/diagram 1.44.0 → 1.46.0

package/dist/hooks/useDiagram.d.ts

@@ -11,7 +11,7 @@ export declare function useDiagramActorSnapshot<T = unknown>(selector: (state: D
 export declare function useDiagramContext<T = unknown>(selector: (context: DiagramContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
 type PickEmittedEvent<T> = T extends DiagramEmittedEvents['type'] ? DiagramEmittedEvents & {
     type: T;
-} : never;
+} : unknown;
 /**
  * Subscribe to diagram emitted events
  * @example
@@ -21,4 +21,6 @@ type PickEmittedEvent<T> = T extends DiagramEmittedEvents['type'] ? DiagramEmitt
  * })
  * ```
  */
-export declare function useOnDiagramEvent<T extends DiagramEmittedEvents['type']>(event: T, callback: (event: PickEmittedEvent<T>) => void): void;
+export declare function useOnDiagramEvent<T extends DiagramEmittedEvents['type'] | '*'>(event: T, callback: (event: PickEmittedEvent<T>) => void, options?: {
+    once?: boolean;
+}): void;

package/dist/hooks/useDiagram.js

@@ -3,6 +3,7 @@ import { shallowEqual } from 'fast-equals';
 import { useCallback, useRef, useEffect } from 'react';
 import { useDiagramActorRef } from './safeContext.js';
 export { useDiagram } from './safeContext.js';
+import { useCallbackRef } from './useCallbackRef.js';
 
 function useDiagramActorSnapshot(selector, compare = shallowEqual) {
   const actorRef = useDiagramActorRef();
@@ -10,21 +11,31 @@ function useDiagramActorSnapshot(selector, compare = shallowEqual) {
 }
 function useDiagramContext(selector, compare = shallowEqual, deps) {
   const actorRef = useDiagramActorRef();
-  const select = useCallback((s) => selector(s.context), deps ?? []);
+  const selectorRef = useCallbackRef(selector);
+  const select = useCallback((s) => selectorRef(s.context), deps ?? []);
   return useSelector(actorRef, select, compare);
 }
-function useOnDiagramEvent(event, callback) {
+function useOnDiagramEvent(event, callback, options) {
   const actorRef = useDiagramActorRef();
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
+  const callbackRef = useCallbackRef(callback);
+  const wasCalled = useRef(false);
+  const once = options?.once ?? false;
   useEffect(() => {
-    const subscription = actorRef.on(event, (payload) => {
-      callbackRef.current(payload);
+    if (once && wasCalled.current) {
+      return;
+    }
+    let subscription = actorRef.on(event, (payload) => {
+      callbackRef(payload);
+      wasCalled.current = true;
+      if (once) {
+        subscription?.unsubscribe();
+        subscription = null;
+      }
     });
     return () => {
-      subscription.unsubscribe();
+      subscription?.unsubscribe();
     };
-  }, [actorRef, event]);
+  }, [actorRef, event, once]);
 }
 
 export { useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useOnDiagramEvent };

package/dist/hooks/useDiagramCompareLayout.d.ts

@@ -1,16 +1,20 @@
 import { DiagramActorSnapshot } from '../likec4diagram/state/types';
 import type * as t from '@likec4/core/types';
 declare const selectCompareLayoutState: ({ context }: DiagramActorSnapshot) => {
+    hasEditor: false;
     isEnabled: false;
     isEditable: false;
     isActive: false;
     drifts: never[];
+    canApplyLatest: boolean;
     layout: t.LayoutType;
 } | {
+    hasEditor: boolean;
     isEnabled: true;
     isEditable: boolean;
     isActive: boolean;
     drifts: t.NonEmptyReadonlyArray<t.LayoutedViewDriftReason>;
+    canApplyLatest: boolean;
     layout: t.LayoutType;
 };
 type DiagramCompareLayoutState = ReturnType<typeof selectCompareLayoutState>;
@@ -23,6 +27,10 @@ type DiagramCompareLayoutOps = {
      * Switches the layout type between 'auto' and 'manual'.
      */
     switchLayout: (layoutType: t.LayoutType) => void;
+    /**
+     * Merges the latest layout into the manual layout.
+     */
+    applyLatestToManual: () => void;
     /**
      * Resets the manual layout to its default state.
      */

package/dist/hooks/useDiagramCompareLayout.js

@@ -1,24 +1,34 @@
+import { nonNullable } from '@likec4/core';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
+import { deriveToggledFeatures } from '../likec4diagram/state/machine.setup.js';
 import { useDiagramActorRef } from './safeContext.js';
 import { useCallbackRef } from './useCallbackRef.js';
 
 const selectCompareLayoutState = ({ context }) => {
   const drifts = context.view.drifts ?? null;
-  if (!context.features.enableCompareWithLatest || !drifts) {
+  if (!context.features.enableCompareWithLatest || !drifts || drifts.length === 0) {
     return {
+      hasEditor: false,
       isEnabled: false,
       isEditable: false,
       isActive: false,
       drifts: [],
+      canApplyLatest: false,
       layout: context.view._layout ?? "auto"
     };
   }
+  const {
+    enableCompareWithLatest,
+    enableReadOnly
+  } = deriveToggledFeatures(context);
   return {
+    hasEditor: context.features.enableEditor,
     isEnabled: true,
-    isEditable: !context.features.enableReadOnly,
-    isActive: context.toggledFeatures.enableCompareWithLatest === true,
+    isEditable: !enableReadOnly,
+    isActive: enableCompareWithLatest === true,
     drifts,
+    canApplyLatest: !drifts.includes("type-changed"),
     layout: context.view._layout ?? "auto"
   };
 };
@@ -54,7 +64,22 @@ function useDiagramCompareLayout() {
     }
     actorRef.send({ type: "layout.resetManualLayout" });
   });
-  return [state, { toggleCompare, switchLayout, resetManualLayout }];
+  const applyLatestToManual = useCallbackRef(() => {
+    if (!state.isEnabled) {
+      console.warn("Compare with latest feature is not enabled");
+      return;
+    }
+    const editor = nonNullable(actorRef.system?.get("editor"), "editor actor not found");
+    editor.send({ type: "applyLatestToManual" });
+    if (state.isActive) {
+      actorRef.send({
+        type: "toggle.feature",
+        feature: "CompareWithLatest",
+        forceValue: false
+      });
+    }
+  });
+  return [state, { toggleCompare, switchLayout, resetManualLayout, applyLatestToManual }];
 }
 
 export { useDiagramCompareLayout };

package/dist/hooks/useLikeC4Project.d.ts

@@ -17,6 +17,11 @@ export declare function useLikeC4ProjectsContext(): LikeC4ProjectsContext;
  */
 export declare function useHasProjects(): boolean;
 /**
- * @returns The current project id.
+ * @returns Current project id, as provided by LikeC4Model
  */
 export declare function useLikeC4ProjectId(): ProjectId;
+/**
+ * Returns current LikeC4 project.
+ * Requires both LikeC4ModelProvider and LikeC4ProjectsProvider in the tree.*
+ */
+export declare function useLikeC4Project(): LikeC4Project;

package/dist/hooks/useLikeC4Project.js

@@ -29,9 +29,21 @@ function useHasProjects() {
 function useLikeC4ProjectId() {
   const ctx = useContext(LikeC4ModelContext);
   if (!ctx) {
-    throw new Error("No LikeC4ModelContext found");
+    throw new Error("No LikeC4ModelProvider found");
   }
   return ctx.projectId;
 }
+function useLikeC4Project() {
+  const projectId = useLikeC4ProjectId();
+  const projectsCtx = useContext(LikeC4ProjectsContext);
+  if (!projectsCtx) {
+    throw new Error("No LikeC4ProjectsProvider found");
+  }
+  const project = projectsCtx.projects.find((p) => p.id === projectId);
+  if (!project) {
+    throw new Error(`Project with id '${projectId}' not found in LikeC4ProjectsProvider`);
+  }
+  return project;
+}
 
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext };
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext };

package/dist/hooks/useMediaPrint.d.ts

@@ -0,0 +1,6 @@
+import { ReadableAtom } from 'nanostores';
+export declare const $isPrint: ReadableAtom<boolean>;
+/**
+ * Hook to determine if the current media is print.
+ */
+export declare function useMediaPrint(): boolean;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { IconRendererProvider } from './context/IconRenderer';
 export { LikeC4Diagram, type LikeC4DiagramProps, } from './LikeC4Diagram';
 export type { ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, NodeRenderers, OnCanvasClick, OnChange, OnEdgeClick, OnInitialized, OnNavigateTo, OnNodeClick, OnOpenSource, PaddingWithUnit, ViewPadding, WhereOperator, } from './LikeC4Diagram.props';
 export { LikeC4ModelProvider, type LikeC4ModelProviderProps, } from './LikeC4ModelProvider';
+export { type LikeC4EditorPort, LikeC4EditorProvider, type LikeC4EditorProviderProps, } from './editor/LikeC4EditorProvider';
 export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, } from './LikeC4ProjectsProvider';
 export { type DiagramApi, type DiagramContext, useDiagram, useDiagramContext, useOnDiagramEvent, } from './hooks/useDiagram';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './hooks/useLikeC4Model';

package/dist/index.js

@@ -1,6 +1,7 @@
 export { IconRendererProvider } from './context/IconRenderer.js';
 export { LikeC4Diagram } from './LikeC4Diagram.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
+export { LikeC4EditorProvider } from './editor/LikeC4EditorProvider.js';
 export { LikeC4ProjectsProvider } from './LikeC4ProjectsProvider.js';
 export { useDiagramContext, useOnDiagramEvent } from './hooks/useDiagram.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './hooks/useLikeC4Model.js';

package/dist/likec4diagram/DiagramXYFlow.js

@@ -11,6 +11,7 @@ import { useIsReducedGraphics, usePanningAtom } from '../context/RootContainerCo
 import { useDiagramActorSnapshot } from '../hooks/useDiagram.js';
 import { depsShallowEqual, useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { BuiltinEdges, BuiltinNodes } from './custom/index.js';
+import { deriveToggledFeatures } from './state/machine.setup.js';
 import { useLayoutConstraints } from './useLayoutConstraints.js';
 import { useDiagram } from '../hooks/safeContext.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
@@ -44,9 +45,8 @@ function prepareNodeTypes(nodeTypes) {
   };
 }
 const selectXYProps = ({ context: ctx, children }) => {
-  const toggledFeatures = ctx.toggledFeatures;
-  const enableReadOnly = ctx.features.enableReadOnly || toggledFeatures.enableReadOnly === true;
-  const isNotEditingEdge = enableReadOnly || children.syncLayout?.getSnapshot().context.editing !== "edge";
+  const { enableReadOnly } = deriveToggledFeatures(ctx);
+  const isNotEditingEdge = enableReadOnly || children.editor?.getSnapshot().context.editing !== "edge";
   return {
     enableReadOnly,
     initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
@@ -57,11 +57,11 @@ const selectXYProps = ({ context: ctx, children }) => {
     nodesDraggable: !enableReadOnly && ctx.nodesDraggable,
     nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
     fitViewPadding: ctx.fitViewPadding,
-    enableFitView: ctx.toggledFeatures.enableFitView ?? ctx.features.enableFitView,
+    enableFitView: ctx.features.enableFitView,
     ...!ctx.features.enableFitView && {
       viewport: {
-        x: -Math.min(ctx.view.bounds.x, 0),
-        y: -Math.min(ctx.view.bounds.y, 0),
+        x: -ctx.view.bounds.x,
+        y: -ctx.view.bounds.y,
         zoom: 1
       }
     }
@@ -109,7 +109,11 @@ function LikeC4DiagramXYFlow({
     notPanning();
   }), onMoveEnd = useCallbackRef((event, viewport) => {
     isPanning.clear();
-    diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
+    diagram.send({
+      type: "xyflow.viewportMoved",
+      viewport,
+      manually: !!event
+    });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   }), nodeTypes = useCustomCompareMemo(

package/dist/likec4diagram/custom/edges/EdgeDrifts.d.ts

@@ -0,0 +1,6 @@
+import { Types } from '../../types';
+export type EdgeDriftsProps = {
+    edgeProps: Types.EdgeProps;
+    svgPath: string;
+};
+export declare function EdgeDrifts({ edgeProps: { data }, svgPath, }: EdgeDriftsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/likec4diagram/custom/edges/EdgeDrifts.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+
+function EdgeDrifts({
+  edgeProps: { data },
+  svgPath
+}) {
+  const drifts = data.drifts;
+  if (!drifts || drifts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      className: cx(
+        "react-flow__edge-path",
+        css({
+          pointerEvents: "none",
+          stroke: "likec4.compare.manual.outline",
+          fill: "none",
+          strokeWidth: {
+            base: "8px",
+            _whenHovered: "12px"
+          },
+          strokeOpacity: 0.5
+        })
+      ),
+      d: svgPath,
+      strokeLinecap: "round"
+    }
+  );
+}
+
+export { EdgeDrifts };

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -1,9 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { useRafEffect } from '@react-hookz/web';
+import { css, cx } from '@likec4/styles/css';
 import { EdgeLabelRenderer } from '@xyflow/react';
-import { useState, useRef } from 'react';
-import { ZIndexes } from '../../../base/const.js';
+import { useState, useRef, useEffect } from 'react';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import '@xstate/react';
@@ -12,7 +10,8 @@ import { useDiagram } from '../../../hooks/safeContext.js';
 import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
 import { useXYFlow, useXYStoreApi } from '../../../hooks/useXYFlow.js';
 import { isSamePoint } from '../../../utils/xyflow.js';
-import { controlDragging, controlPointsContainer, controlPoint } from './edges.css.js';
+import { EdgeDrifts } from './EdgeDrifts.js';
+import { controlPointsContainer, controlPoint } from './edges.css.js';
 import { useControlPoints } from './useControlPoints.js';
 import { useRelationshipEdgePath } from './useRelationshipEdgePath.js';
 import { memoEdge } from '../../../base-primitives/memoEdge.js';
@@ -31,25 +30,26 @@ const getEdgeCenter = (path) => {
 };
 const RelationshipEdge = memoEdge((props) => {
   const [isControlPointDragging, setIsControlPointDragging] = useState(false);
+  const isControlPointDraggingRef = useRef(isControlPointDragging);
+  isControlPointDraggingRef.current = isControlPointDragging;
   const xyflow = useXYFlow();
   const diagram = useDiagram();
   const {
     enableNavigateTo,
-    enableReadOnly
+    enableReadOnly,
+    enableCompareWithLatest
   } = useEnabledFeatures();
   const enabledEditing = !enableReadOnly;
   const {
     id,
     selected = false,
     data: {
-      hovered = false,
-      active = false,
       labelBBox,
       labelXY,
       ...data
     }
   } = props;
-  const navigateTo = enableNavigateTo ? data.navigateTo : void 0;
+  const navigateTo = enableNavigateTo && !isControlPointDragging ? data.navigateTo : void 0;
   const {
     controlPoints,
     setControlPoints,
@@ -66,21 +66,22 @@ const RelationshipEdge = memoEdge((props) => {
     y: labelXY?.y ?? labelY
   });
   useUpdateEffect(() => {
-    setLabelPos({
+    if (isControlPointDraggingRef.current) {
+      return;
+    }
+    const next = {
       x: labelX,
       y: labelY
-    });
+    };
+    setLabelPos((current) => isSamePoint(current, next) ? current : next);
   }, [labelX, labelY]);
   const svgPathRef = useRef(null);
-  useRafEffect(() => {
+  useEffect(() => {
     const path = svgPathRef.current;
     if (!path || !isControlPointDragging) return;
-    setLabelPos(getEdgeCenter(path));
+    const next = getEdgeCenter(path);
+    setLabelPos((current) => isSamePoint(current, next) ? current : next);
   }, [edgePath, isControlPointDragging]);
-  if (isControlPointDragging) {
-    labelX = labelPos.x;
-    labelY = labelPos.y;
-  }
   const updateEdgeData = useCallbackRef((controlPoints2) => {
     const point = svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
     if (labelBBox && point) {
@@ -89,8 +90,7 @@ const RelationshipEdge = memoEdge((props) => {
         labelBBox: {
           ...labelBBox,
           ...point
-        },
-        labelXY: point
+        }
       });
     } else {
       diagram.updateEdgeData(id, { controlPoints: controlPoints2 });
@@ -124,7 +124,7 @@ const RelationshipEdge = memoEdge((props) => {
     if (e.pointerType !== "mouse") {
       return;
     }
-    if (e.button !== 2) {
+    if (e.button !== 2 && !selected) {
       return;
     }
     e.stopPropagation();
@@ -152,46 +152,65 @@ const RelationshipEdge = memoEdge((props) => {
     };
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: cx(isControlPointDragging && controlDragging), children: [
-      /* @__PURE__ */ jsx(
-        EdgePath,
-        {
-          edgeProps: props,
-          svgPath: edgePath,
-          ref: svgPathRef,
-          isDragging: isControlPointDragging,
-          ...enabledEditing && {
-            onEdgePointerDown
+    /* @__PURE__ */ jsxs(
+      EdgeContainer,
+      {
+        ...props,
+        className: css({
+          "& .react-flow__edge-interaction": {
+            cursor: enabledEditing && selected ? "copy" : void 0
           }
-        }
-      ),
-      labelBBox && /* @__PURE__ */ jsx(
-        EdgeLabelContainer,
-        {
-          edgeProps: props,
-          labelPosition: { x: labelX, y: labelY },
-          children: /* @__PURE__ */ jsx(
-            EdgeLabel,
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            EdgePath,
             {
-              pointerEvents: enabledEditing ? "none" : "all",
               edgeProps: props,
-              children: !enabledEditing && navigateTo && /* @__PURE__ */ jsx(
-                EdgeActionButton,
+              svgPath: edgePath,
+              ref: svgPathRef,
+              isDragging: isControlPointDragging,
+              ...enabledEditing && {
+                onEdgePointerDown
+              }
+            }
+          ),
+          enableCompareWithLatest && /* @__PURE__ */ jsx(
+            EdgeDrifts,
+            {
+              edgeProps: props,
+              svgPath: edgePath
+            }
+          ),
+          labelBBox && /* @__PURE__ */ jsx(
+            EdgeLabelContainer,
+            {
+              edgeProps: props,
+              labelPosition: isControlPointDragging ? labelPos : { x: labelX, y: labelY },
+              children: /* @__PURE__ */ jsx(
+                EdgeLabel,
                 {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    diagram.navigateTo(navigateTo);
-                  }
+                  pointerEvents: enabledEditing ? "none" : "all",
+                  edgeProps: props,
+                  children: navigateTo && /* @__PURE__ */ jsx(
+                    EdgeActionButton,
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        diagram.navigateTo(navigateTo);
+                      }
+                    }
+                  )
                 }
               )
             }
           )
-        }
-      )
-    ] }),
-    enabledEditing && controlPoints.length > 0 && (selected || active || hovered || isControlPointDragging) && /* @__PURE__ */ jsx(
+        ]
+      }
+    ),
+    enabledEditing && controlPoints.length > 0 && /* @__PURE__ */ jsx(
       ControlPoints,
       {
+        isControlPointDragging,
         edgeProps: props,
         controlPoints,
         onMove: setControlPoints,
@@ -199,13 +218,14 @@ const RelationshipEdge = memoEdge((props) => {
         onCancelMove: onControlPointerCancelMove,
         onFinishMove: onControlPointerFinishMove,
         onDelete: onControlPointerDelete,
-        zIndex: ZIndexes.Element + 500
+        zIndex: 9999
       }
     )
   ] });
 });
 RelationshipEdge.displayName = "RelationshipEdge";
 function ControlPoints({
+  isControlPointDragging,
   edgeProps,
   controlPoints,
   onMove,
@@ -286,7 +306,7 @@ function ControlPoints({
     }, 10);
   };
   const onControlPointerDown = useCallbackRef((e) => {
-    const { domNode, addSelectedEdges } = xyflowStore.getState();
+    const { domNode, addSelectedEdges, edges, unselectNodesAndEdges } = xyflowStore.getState();
     if (!domNode || e.pointerType !== "mouse") {
       return;
     }
@@ -297,6 +317,9 @@ function ControlPoints({
     switch (e.button) {
       case 0: {
         e.stopPropagation();
+        unselectNodesAndEdges({
+          edges: edges.filter((ed) => ed.selected && ed.id !== edgeId)
+        });
         addSelectedEdges([edgeId]);
         onLmbControlPointerDown(index, e, domNode);
         break;
@@ -306,6 +329,17 @@ function ControlPoints({
         break;
     }
   });
+  const onControlPointerDblClick = useCallbackRef((e) => {
+    const { domNode } = xyflowStore.getState();
+    if (!domNode || e.pointerType !== "mouse") {
+      return;
+    }
+    const index = parseFloat(e.currentTarget.getAttribute("data-control-point-index") || "");
+    if (isNaN(index)) {
+      throw new Error("data-control-point-index is not a number");
+    }
+    onRmbControlPointerDown(index, e);
+  });
   return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
     EdgeContainer,
     {
@@ -319,16 +353,18 @@ function ControlPoints({
       children: /* @__PURE__ */ jsx(
         "g",
         {
+          "data-active": isControlPointDragging ? true : void 0,
+          className: "group",
           onContextMenu: stopAndPrevent,
           children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
             "circle",
             {
               "data-control-point-index": i,
               onPointerDownCapture: onControlPointerDown,
+              onDoubleClick: onControlPointerDblClick,
               className: cx("nodrag nopan", controlPoint),
               cx: p.x,
-              cy: p.y,
-              r: 3
+              cy: p.y
             },
             "controlPoints" + edgeId + "#" + i
           ))

package/dist/likec4diagram/custom/edges/SequenceStepEdge.js

@@ -5,6 +5,7 @@ import '@xstate/react';
 import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
+import { EdgeDrifts } from './EdgeDrifts.js';
 import { EdgeContainer } from '../../../base-primitives/edge/EdgeContainer.js';
 import { EdgePath } from '../../../base-primitives/edge/EdgePath.js';
 import { EdgeLabelContainer } from '../../../base-primitives/edge/EdgeLabelContainer.js';
@@ -13,7 +14,7 @@ import { EdgeActionButton } from '../../../base-primitives/edge/EdgeActionButton
 
 const LABEL_OFFSET = 16;
 function SequenceStepEdge(props) {
-  const { enableNavigateTo } = useEnabledFeatures();
+  const { enableNavigateTo, enableCompareWithLatest } = useEnabledFeatures();
   const diagram = useDiagram();
   const { navigateTo } = props.data;
   const isSelfLoop = props.source === props.target;
@@ -50,6 +51,7 @@ function SequenceStepEdge(props) {
         svgPath: path
       }
     ),
+    enableCompareWithLatest && /* @__PURE__ */ jsx(EdgeDrifts, { edgeProps: props, svgPath: path }),
     /* @__PURE__ */ jsx(
       EdgeLabelContainer,
       {

package/dist/likec4diagram/custom/edges/edges.css.d.ts

@@ -1,3 +1,2 @@
 export declare const controlPointsContainer: string;
 export declare const controlPoint: string;
-export declare const controlDragging: string;