@likec4/diagram 1.39.5 → 1.40.0

package/dist/hooks/useXYFlow.d.ts

@@ -1,448 +1,13 @@
 import { ReactFlowInstance, ReactFlowState, InternalNode } from '@xyflow/react';
 import { Types } from '../likec4diagram/types';
-import { EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
-import { ReactNode, CSSProperties, AriaRole, SVGAttributes } from 'react';
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId, RichTextOrEmpty } from '@likec4/core';
-export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
-    id: string;
-    source: string;
-    target: string;
-    sourceHandle?: string | null;
-    targetHandle?: string | null;
-    animated?: boolean;
-    hidden?: boolean;
-    deletable?: boolean;
-    selectable?: boolean;
-    selected?: boolean;
-    markerStart?: EdgeMarkerType;
-    markerEnd?: EdgeMarkerType;
-    zIndex?: number;
-    ariaLabel?: string;
-    interactionWidth?: number;
-    label?: ReactNode;
-    labelStyle?: CSSProperties;
-    labelShowBg?: boolean;
-    labelBgStyle?: CSSProperties;
-    labelBgPadding?: [number, number];
-    labelBgBorderRadius?: number;
-    style?: CSSProperties;
-    className?: string;
-    reconnectable?: boolean | HandleType;
-    focusable?: boolean;
-    ariaRole?: AriaRole;
-    domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-    type: "relationship";
-    data: {
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: import("../base").Base.Dimmed;
-        id: EdgeId;
-        label: string | null;
-        points: NonEmptyArray<Point>;
-        color: Color | undefined;
-        dir: "forward" | "back" | "both" | undefined;
-        technology: string | undefined;
-        line: RelationshipLineType | undefined;
-        tail: RelationshipArrowType | undefined;
-        head: RelationshipArrowType | undefined;
-        labelBBox: BBox | null | undefined;
-        navigateTo: ViewId<string> | null | undefined;
-        notes: RichTextOrEmpty;
-        labelXY: XYPosition | null;
-        controlPoints: XYPosition[] | undefined | null;
-    };
-}>;
+export declare const useXYFlow: () => ReactFlowInstance<Types.Node, Types.Edge>;
 export type XYFlowInstance = ReactFlowInstance<Types.Node, Types.Edge>;
 export type XYStoreState = ReactFlowState<Types.Node, Types.Edge>;
 export declare function useXYStore<StateSlice = unknown>(selector: (state: XYStoreState) => StateSlice, equalityFn?: (a: NoInfer<StateSlice>, b: NoInfer<StateSlice>) => boolean): StateSlice;
 export declare const useXYStoreApi: () => {
-    getState: () => ReactFlowState<Types.Node, {
-        id: string;
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        selected?: boolean;
-        markerStart?: EdgeMarkerType;
-        markerEnd?: EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: ReactNode;
-        labelStyle?: CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: CSSProperties;
-        className?: string;
-        reconnectable?: boolean | HandleType;
-        focusable?: boolean;
-        ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-        type: "relationship";
-        data: {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
-            id: EdgeId;
-            label: string | null;
-            points: NonEmptyArray<Point>;
-            color: Color | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            technology: string | undefined;
-            line: RelationshipLineType | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
-            labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | null | undefined;
-            notes: RichTextOrEmpty;
-            labelXY: XYPosition | null;
-            controlPoints: XYPosition[] | undefined | null;
-        };
-    }>;
-    setState: (partial: ReactFlowState<Types.Node, {
-        id: string;
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        selected?: boolean;
-        markerStart?: EdgeMarkerType;
-        markerEnd?: EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: ReactNode;
-        labelStyle?: CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: CSSProperties;
-        className?: string;
-        reconnectable?: boolean | HandleType;
-        focusable?: boolean;
-        ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-        type: "relationship";
-        data: {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
-            id: EdgeId;
-            label: string | null;
-            points: NonEmptyArray<Point>;
-            color: Color | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            technology: string | undefined;
-            line: RelationshipLineType | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
-            labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | null | undefined;
-            notes: RichTextOrEmpty;
-            labelXY: XYPosition | null;
-            controlPoints: XYPosition[] | undefined | null;
-        };
-    }> | Partial<ReactFlowState<Types.Node, {
-        id: string;
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        selected?: boolean;
-        markerStart?: EdgeMarkerType;
-        markerEnd?: EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: ReactNode;
-        labelStyle?: CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: CSSProperties;
-        className?: string;
-        reconnectable?: boolean | HandleType;
-        focusable?: boolean;
-        ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-        type: "relationship";
-        data: {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
-            id: EdgeId;
-            label: string | null;
-            points: NonEmptyArray<Point>;
-            color: Color | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            technology: string | undefined;
-            line: RelationshipLineType | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
-            labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | null | undefined;
-            notes: RichTextOrEmpty;
-            labelXY: XYPosition | null;
-            controlPoints: XYPosition[] | undefined | null;
-        };
-    }>> | ((state: ReactFlowState<Types.Node, {
-        id: string;
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        selected?: boolean;
-        markerStart?: EdgeMarkerType;
-        markerEnd?: EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: ReactNode;
-        labelStyle?: CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: CSSProperties;
-        className?: string;
-        reconnectable?: boolean | HandleType;
-        focusable?: boolean;
-        ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-        type: "relationship";
-        data: {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
-            id: EdgeId;
-            label: string | null;
-            points: NonEmptyArray<Point>;
-            color: Color | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            technology: string | undefined;
-            line: RelationshipLineType | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
-            labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | null | undefined;
-            notes: RichTextOrEmpty;
-            labelXY: XYPosition | null;
-            controlPoints: XYPosition[] | undefined | null;
-        };
-    }>) => ReactFlowState<Types.Node, {
-        id: string;
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        selected?: boolean;
-        markerStart?: EdgeMarkerType;
-        markerEnd?: EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: ReactNode;
-        labelStyle?: CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: CSSProperties;
-        className?: string;
-        reconnectable?: boolean | HandleType;
-        focusable?: boolean;
-        ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-        type: "relationship";
-        data: {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
-            id: EdgeId;
-            label: string | null;
-            points: NonEmptyArray<Point>;
-            color: Color | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            technology: string | undefined;
-            line: RelationshipLineType | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
-            labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | null | undefined;
-            notes: RichTextOrEmpty;
-            labelXY: XYPosition | null;
-            controlPoints: XYPosition[] | undefined | null;
-        };
-    }> | Partial<ReactFlowState<Types.Node, {
-        id: string;
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        selected?: boolean;
-        markerStart?: EdgeMarkerType;
-        markerEnd?: EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: ReactNode;
-        labelStyle?: CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: CSSProperties;
-        className?: string;
-        reconnectable?: boolean | HandleType;
-        focusable?: boolean;
-        ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-        type: "relationship";
-        data: {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
-            id: EdgeId;
-            label: string | null;
-            points: NonEmptyArray<Point>;
-            color: Color | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            technology: string | undefined;
-            line: RelationshipLineType | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
-            labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | null | undefined;
-            notes: RichTextOrEmpty;
-            labelXY: XYPosition | null;
-            controlPoints: XYPosition[] | undefined | null;
-        };
-    }>>), replace?: boolean | undefined) => void;
-    subscribe: (listener: (state: ReactFlowState<Types.Node, {
-        id: string;
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        selected?: boolean;
-        markerStart?: EdgeMarkerType;
-        markerEnd?: EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: ReactNode;
-        labelStyle?: CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: CSSProperties;
-        className?: string;
-        reconnectable?: boolean | HandleType;
-        focusable?: boolean;
-        ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-        type: "relationship";
-        data: {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
-            id: EdgeId;
-            label: string | null;
-            points: NonEmptyArray<Point>;
-            color: Color | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            technology: string | undefined;
-            line: RelationshipLineType | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
-            labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | null | undefined;
-            notes: RichTextOrEmpty;
-            labelXY: XYPosition | null;
-            controlPoints: XYPosition[] | undefined | null;
-        };
-    }>, prevState: ReactFlowState<Types.Node, {
-        id: string;
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        selected?: boolean;
-        markerStart?: EdgeMarkerType;
-        markerEnd?: EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: ReactNode;
-        labelStyle?: CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: CSSProperties;
-        className?: string;
-        reconnectable?: boolean | HandleType;
-        focusable?: boolean;
-        ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-        type: "relationship";
-        data: {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
-            id: EdgeId;
-            label: string | null;
-            points: NonEmptyArray<Point>;
-            color: Color | undefined;
-            dir: "forward" | "back" | "both" | undefined;
-            technology: string | undefined;
-            line: RelationshipLineType | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
-            labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | null | undefined;
-            notes: RichTextOrEmpty;
-            labelXY: XYPosition | null;
-            controlPoints: XYPosition[] | undefined | null;
-        };
-    }>) => void) => () => void;
+    getState: () => ReactFlowState<Types.Node, Types.Edge>;
+    setState: (partial: ReactFlowState<Types.Node, Types.Edge> | Partial<ReactFlowState<Types.Node, Types.Edge>> | ((state: ReactFlowState<Types.Node, Types.Edge>) => ReactFlowState<Types.Node, Types.Edge> | Partial<ReactFlowState<Types.Node, Types.Edge>>), replace?: boolean | undefined) => void;
+    subscribe: (listener: (state: ReactFlowState<Types.Node, Types.Edge>, prevState: ReactFlowState<Types.Node, Types.Edge>) => void) => () => void;
 };
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>;
 export declare const useXYInternalNode: (id: string) => InternalNode<Types.Node> | undefined;

package/dist/likec4diagram/DiagramUI.js

@@ -28,7 +28,7 @@ const DiagramUI = memo(() => {
     enableControls === "next" ? /* @__PURE__ */ jsx(EnsureCurrentViewModel, { children: /* @__PURE__ */ jsx(NavigationPanel, {}) }) : /* @__PURE__ */ jsx(Controls, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
-    enableControls !== "next" && /* @__PURE__ */ jsxs(Fragment, { children: [
+    enableControls === true && /* @__PURE__ */ jsxs(Fragment, { children: [
       enableViewTitle && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
       enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {})
     ] }),

package/dist/likec4diagram/DiagramXYFlow.js

@@ -3,7 +3,7 @@ import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { useTimeout, useDebouncedCallback, useCallbackRef } from '@mantine/hooks';
 import { useCustomCompareMemo } from '@react-hookz/web';
-import { shallowEqual } from 'fast-equals';
+import { deepEqual, shallowEqual } from 'fast-equals';
 import { BaseXYFlow } from '../base/BaseXYFlow.js';
 import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics.js';
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
@@ -11,6 +11,7 @@ import { BuiltinNodes, edgeTypes } from './custom/index.js';
 import { DiagramUI } from './DiagramUI.js';
 import { useLayoutConstraints } from './useLayoutConstraints.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
+import { SequenceParallelArea } from './custom/nodes/SequenceActorNode.js';
 import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 
 const selectXYProps = (ctx) => ({
@@ -21,7 +22,7 @@ const selectXYProps = (ctx) => ({
   zoomable: ctx.zoomable,
   fitViewPadding: ctx.fitViewPadding,
   enableFitView: ctx.features.enableFitView,
-  enableReadOnly: ctx.features.enableReadOnly || ctx.toggledFeatures.enableReadOnly,
+  enableReadOnly: ctx.features.enableReadOnly || ctx.toggledFeatures.enableReadOnly || ctx.dynamicViewVariant === "sequence" && ctx.view._type === "dynamic",
   ...!ctx.features.enableFitView && {
     viewport: {
       x: -Math.min(ctx.view.bounds.x, 0),
@@ -30,7 +31,7 @@ const selectXYProps = (ctx) => ({
     }
   }
 });
-const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.fitViewPadding, b.fitViewPadding) && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
+const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && deepEqual(a.fitViewPadding, b.fitViewPadding) && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
 function LikeC4DiagramXYFlow({
   background = "dots",
   nodesDraggable = false,
@@ -84,7 +85,9 @@ function LikeC4DiagramXYFlow({
         deployment: renderNodes?.deployment ?? BuiltinNodes.deployment,
         "compound-element": renderNodes?.compoundElement ?? BuiltinNodes.compoundElement,
         "compound-deployment": renderNodes?.compoundDeployment ?? BuiltinNodes.compoundDeployment,
-        "view-group": renderNodes?.viewGroup ?? BuiltinNodes.viewGroup
+        "view-group": renderNodes?.viewGroup ?? BuiltinNodes.viewGroup,
+        "seq-actor": renderNodes?.sequenceActor ?? BuiltinNodes.sequenceActor,
+        "seq-parallel": SequenceParallelArea
       };
     },
     [renderNodes],
@@ -184,6 +187,7 @@ function LikeC4DiagramXYFlow({
         },
         nodesDraggable: notReadOnly && nodesDraggable,
         nodesSelectable,
+        edgesFocusable: false,
         ...notReadOnly && nodesDraggable && layoutConstraints,
         ...props,
         ...reactFlowProps,

package/dist/likec4diagram/convert-to-xyflow.d.ts

@@ -0,0 +1,14 @@
+import { DynamicViewDisplayVariant, LayoutedView, WhereOperator } from '@likec4/core/types';
+import { Types } from './types';
+type ConvertToXYFlowInput = {
+    view: LayoutedView;
+    where: WhereOperator | null;
+    nodesSelectable: boolean;
+    dynamicViewVariant: DynamicViewDisplayVariant;
+};
+export declare function convertToXYFlow({ dynamicViewVariant, ...params }: ConvertToXYFlowInput): {
+    view: LayoutedView;
+    xynodes: Types.Node[];
+    xyedges: Types.Edge[];
+};
+export {};

package/dist/likec4diagram/convert-to-xyflow.js

@@ -0,0 +1,29 @@
+import { diagramToXY } from './xyflow-diagram/diagram-view.js';
+import { sequenceViewToXY } from './xyflow-sequence/sequence-view.js';
+
+function convertToXYFlow({ dynamicViewVariant, ...params }) {
+  const view = params.view;
+  const isDynamic = view._type === "dynamic";
+  const { bounds, xynodes, xyedges } = isDynamic && dynamicViewVariant === "sequence" ? sequenceViewToXY(view) : diagramToXY(params);
+  if (isDynamic && view.variant !== dynamicViewVariant) {
+    return {
+      view: {
+        ...view,
+        bounds,
+        variant: dynamicViewVariant
+      },
+      xynodes,
+      xyedges
+    };
+  }
+  return {
+    view: bounds === view.bounds ? view : {
+      ...view,
+      bounds
+    },
+    xynodes,
+    xyedges
+  };
+}
+
+export { convertToXYFlow };

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

@@ -1,4 +1,4 @@
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId, RichTextOrEmpty } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId, RichTextOrEmpty } from '@likec4/core';
 import { XYPosition } from '@xyflow/react';
 import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
@@ -39,10 +39,10 @@ export declare const RelationshipEdge: FunctionComponent<{
         color: Color | undefined;
         dir: "forward" | "back" | "both" | undefined;
         technology: string | undefined;
+        labelBBox: BBox | null | undefined;
         line: RelationshipLineType | undefined;
-        tail: RelationshipArrowType | undefined;
         head: RelationshipArrowType | undefined;
-        labelBBox: BBox | null | undefined;
+        tail: RelationshipArrowType | undefined;
         navigateTo: ViewId<string> | null | undefined;
         notes: RichTextOrEmpty;
         labelXY: XYPosition | null;

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

@@ -270,7 +270,6 @@ const RelationshipEdge = customEdge((props) => {
           children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps: props, children: navigateTo && /* @__PURE__ */ jsx(
             EdgeActionButton,
             {
-              ...props,
               onClick: (e) => {
                 e.stopPropagation();
                 diagram.navigateTo(navigateTo);

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

@@ -0,0 +1,3 @@
+import { EdgeProps } from '../../../base';
+import { Types } from '../../types';
+export declare function SequenceStepEdge(props: EdgeProps<Types.SequenceStepEdgeData>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getSmoothStepPath } from '@xyflow/system';
+import { useDiagram } from '../../../hooks/useDiagram.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';
+import { EdgeLabel } from '../../../base/primitives/edge/EdgeLabel.js';
+import { EdgeActionButton } from '../../../base/primitives/edge/EdgeActionButton.js';
+
+const LABEL_OFFSET = 16;
+function SequenceStepEdge(props) {
+  const diagram = useDiagram();
+  const { navigateTo } = props.data;
+  const isSelfLoop = props.source === props.target;
+  const isBack = props.sourceX > props.targetX;
+  const [path] = getSmoothStepPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+    ...isSelfLoop && {
+      offset: 30,
+      borderRadius: 16
+    }
+  });
+  let labelX = props.sourceX;
+  switch (true) {
+    case isSelfLoop:
+      labelX = props.sourceX + 24 + LABEL_OFFSET;
+      break;
+    case isBack:
+      labelX = props.sourceX - LABEL_OFFSET;
+      break;
+    default:
+      labelX = props.sourceX + LABEL_OFFSET;
+      break;
+  }
+  return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, children: [
+    /* @__PURE__ */ jsx(
+      EdgePath,
+      {
+        edgeProps: props,
+        svgPath: path
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EdgeLabelContainer,
+      {
+        edgeProps: props,
+        labelPosition: {
+          x: labelX,
+          y: props.sourceY + (!isSelfLoop ? LABEL_OFFSET : 0),
+          translate: isBack ? "translate(-100%, 0)" : void 0
+        },
+        children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps: props, children: navigateTo && /* @__PURE__ */ jsx(
+          EdgeActionButton,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.navigateTo(navigateTo);
+            }
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
+export { SequenceStepEdge };