@likec4/diagram 1.57.0 → 1.59.0

package/dist/hooks/useEditorActor.js

@@ -1,6 +1,7 @@
 import "../_virtual/_rolldown/runtime.js";
 import { selectDiagramActor, useDiagramSnapshot } from "./useDiagram.js";
 import { useEffect, useState } from "react";
+import "@mantine/hooks";
 //#region src/hooks/useEditorActor.ts
 var select = selectDiagramActor((s) => {
 	return s.children.editor ?? null;
@@ -12,8 +13,8 @@ function useEditorActorStateHasTag(tag) {
 	const editorActor = useEditorActorRef();
 	const [hasTag, setHasTag] = useState(() => editorActor?.getSnapshot().hasTag(tag) ?? false);
 	useEffect(() => {
-		const subscription = editorActor?.subscribe((snapshot) => {
-			setHasTag(snapshot.hasTag(tag));
+		const subscription = editorActor?.select((s) => s.hasTag(tag)).subscribe((hasTag) => {
+			setHasTag(hasTag);
 		});
 		return () => {
 			subscription?.unsubscribe();
@@ -23,4 +24,4 @@ function useEditorActorStateHasTag(tag) {
 	return hasTag;
 }
 //#endregion
-export { useEditorActorStateHasTag };
+export { useEditorActorRef, useEditorActorStateHasTag };

package/dist/hooks/useLikeC4ElementsTree.js

@@ -25,4 +25,4 @@ function useLikeC4ElementsTree(viewId) {
 	}, [model, viewId]);
 }
 //#endregion
-export { useLikeC4ElementsTree };
+export { sortByLabel, useLikeC4ElementsTree };

package/dist/hooks/useLikeC4Model.js

@@ -24,4 +24,4 @@ function useLikeC4Specification() {
 	return specification;
 }
 //#endregion
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel };
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model };

package/dist/hooks/useXYFlow.d.ts

@@ -4,6 +4,7 @@ export type XYFlowInstance = ReactFlowInstance<Types.AnyNode, Types.AnyEdge>;
 export declare function useXYFlow(): XYFlowInstance;
 export type XYStoreState = ReactFlowState<Types.AnyNode, Types.AnyEdge>;
 export declare function useXYStore<StateSlice = unknown>(selector: (state: XYStoreState) => StateSlice, equalityFn?: (a: NoInfer<StateSlice>, b: NoInfer<StateSlice>) => boolean): StateSlice;
+export declare function selectXYStore<StateSlice = unknown>(selector: (state: XYStoreState) => StateSlice): (state: XYStoreState) => StateSlice;
 export declare function useXYStoreApi(): XYStoreApi;
 export type XYStoreApi = {
     getState: () => XYStoreState;

package/dist/hooks/useXYFlow.js

@@ -1,5 +1,4 @@
 import "../_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "./useCallbackRef.js";
 import { useCallback } from "react";
 import { useReactFlow, useStore, useStoreApi } from "@xyflow/react";
 import { shallowEqual } from "fast-equals";
@@ -8,7 +7,10 @@ function useXYFlow() {
 	return useReactFlow();
 }
 function useXYStore(selector, equalityFn) {
-	return useStore(useCallbackRef(selector), equalityFn ?? shallowEqual);
+	return useStore(selector, equalityFn ?? shallowEqual);
+}
+function selectXYStore(selector) {
+	return selector;
 }
 function useXYStoreApi() {
 	return useStoreApi();
@@ -21,4 +23,4 @@ function useIsZoomTooSmall() {
 	return useStore(selectZoom);
 }
 //#endregion
-export { useCurrentZoomAtLeast, useIsZoomTooSmall, useXYFlow, useXYStore, useXYStoreApi };
+export { selectXYStore, useCurrentZoomAtLeast, useIsZoomTooSmall, useXYFlow, useXYStore, useXYStoreApi };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { LikeC4ModelProvider, type LikeC4ModelProviderProps, } from './LikeC4Mod
 export { LikeC4EditorProvider, type LikeC4EditorProviderProps, } from './editor/LikeC4EditorProvider';
 export { createLikeC4Editor, type LikeC4EditorCallbacks, } from './editor/LikeC4EditorCallbacks';
 export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, } from './LikeC4ProjectsProvider';
-export { type DiagramApi, type DiagramContext, useDiagram, useDiagramContext, useOnDiagramEvent, } from './hooks/useDiagram';
+export { type DiagramApi, type DiagramContext, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramContext, useDiagramSelector, useOnDiagramEvent, } from './hooks/useDiagram';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './hooks/useLikeC4Model';
 export { type CurrentViewModel, useCurrentViewModel, useOptionalCurrentViewModel, } from './hooks/useCurrentViewModel';
 export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './hooks/useLikeC4Project';
@@ -22,3 +22,5 @@ export { LikeC4ProjectsOverview, type LikeC4ProjectsOverviewProps, } from './Lik
 export { normalizeSearch, SearchContext, type SearchContextValue, useSearchContext, } from './search/SearchContext';
 export { bodyCss as searchBodyCss, dialogCss as searchDialogCss, SearchPanelContent, } from './search/Search';
 export { SearchControl } from './components/SearchControl';
+export { DefaultMantineProvider } from './context/DefaultMantineProvider';
+export { FramerMotionConfig } from './context/FramerMotionConfig';

package/dist/index.js

@@ -1,6 +1,8 @@
 import { IconRendererProvider } from "./context/IconRenderer.js";
 import { useUpdateEffect } from "./hooks/useUpdateEffect.js";
-import { useDiagram } from "./hooks/safeContext.js";
+import { DefaultMantineProvider } from "./context/DefaultMantineProvider.js";
+import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
+import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramSelector } from "./hooks/safeContext.js";
 import { useDiagramContext, useOnDiagramEvent } from "./hooks/useDiagram.js";
 import { useCurrentView, useCurrentViewId } from "./hooks/useCurrentView.js";
 import { useOptionalCurrentViewModel } from "./context/LikeC4ModelContext.js";
@@ -21,4 +23,4 @@ import { LikeC4View } from "./LikeC4View.js";
 import { ReactLikeC4 } from "./ReactLikeC4.js";
 import { LikeC4ProjectsOverview } from "./LikeC4ProjectsOverview.js";
 import { SearchControl } from "./components/SearchControl.js";
-export { IconRendererProvider, LikeC4Diagram, LikeC4EditorProvider, LikeC4ModelProvider, LikeC4ProjectsOverview, LikeC4ProjectsProvider, LikeC4View, ReactLikeC4, SearchContext, SearchControl, SearchPanelContent, StaticLikeC4Diagram, createLikeC4Editor, normalizeSearch, pickViewBounds, bodyCss as searchBodyCss, dialogCss as searchDialogCss, useChangeLikeC4Project, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramContext, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useSearchContext, useUpdateEffect };
+export { DefaultMantineProvider, FramerMotionConfig, IconRendererProvider, LikeC4Diagram, LikeC4EditorProvider, LikeC4ModelProvider, LikeC4ProjectsOverview, LikeC4ProjectsProvider, LikeC4View, ReactLikeC4, SearchContext, SearchControl, SearchPanelContent, StaticLikeC4Diagram, createLikeC4Editor, normalizeSearch, pickViewBounds, bodyCss as searchBodyCss, dialogCss as searchDialogCss, selectDiagramContext, selectDiagramSnapshot, useChangeLikeC4Project, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramContext, useDiagramSelector, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useSearchContext, useUpdateEffect };

package/dist/likec4diagram/DiagramUI.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const LikeC4DiagramUI: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const LikeC4DiagramUI: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/likec4diagram/DiagramUI.js

@@ -1,32 +1,45 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useEnabledFeatures } from "../context/DiagramFeatures.js";
-import { selectDiagramActor, useDiagramSnapshot } from "../hooks/useDiagram.js";
+import { selectDiagramSnapshot, useDiagramSelector } from "../hooks/safeContext.js";
 import { ErrorBoundary } from "../components/ErrorFallback.js";
 import { NavigationPanel } from "../navigationpanel/NavigationPanel.js";
 import { Overlays } from "../overlays/Overlays.js";
 import { Search } from "../search/Search.js";
 import { RelationshipPopover } from "./relationship-popover/RelationshipPopover.js";
+import { FloatingSequenceActors } from "./ui/FloatingSequenceActors.js";
 import { LayoutDriftFrame } from "./ui/LayoutDriftFrame.js";
 import { NotationPanel } from "./ui/notation/NotationPanel.js";
+import { SequenceOutlinePanel } from "./ui/sequence-outline/SequenceOutlinePanel.js";
 import { memo, useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRerender } from "@react-hookz/web";
+import { hasProp, isDynamicView } from "@likec4/core";
 //#region src/likec4diagram/DiagramUI.tsx
-var selectChildren = selectDiagramActor((s) => ({
+var selectChildren = selectDiagramSnapshot((s) => ({
 	overlays: s.children.overlays ?? null,
-	search: s.children.search ?? null
+	search: s.children.search ?? null,
+	navigation: s.children.navigationPanel ?? null,
+	...isDynamicView(s.context.view) ? {
+		isSequenceView: s.context.dynamicViewVariant === "sequence",
+		isActiveWalkthrough: s.context.dynamicViewVariant === "sequence" && !!s.context.activeWalkthrough && hasProp(s.context.view, "flow")
+	} : {
+		isSequenceView: false,
+		hasSequenceFlow: false,
+		isActiveWalkthrough: false
+	}
 }));
 var LikeC4DiagramUI = memo(() => {
 	const { enableControls, enableNotations, enableSearch, enableRelationshipDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
 	const rerender = useRerender();
-	const actors = useDiagramSnapshot(selectChildren);
+	const { isSequenceView, isActiveWalkthrough, ...actors } = useDiagramSelector(selectChildren);
 	return /* @__PURE__ */ jsxs(ErrorBoundary, {
 		onReset: useCallback(() => {
-			console.warn("DiagramUI: resetting error boundary and rerendering...");
 			rerender();
 		}, []),
 		children: [
-			enableControls && /* @__PURE__ */ jsx(NavigationPanel, {}),
+			isSequenceView && /* @__PURE__ */ jsx(FloatingSequenceActors, { isActiveWalkthrough }),
+			isActiveWalkthrough && /* @__PURE__ */ jsx(SequenceOutlinePanel, {}),
+			enableControls && actors.navigation && !isActiveWalkthrough && /* @__PURE__ */ jsx(NavigationPanel, { actorRef: actors.navigation }),
 			actors.overlays && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef: actors.overlays }),
 			enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
 			enableSearch && actors.search && /* @__PURE__ */ jsx(Search, { searchActorRef: actors.search }),

package/dist/likec4diagram/DiagramXYFlow.js

@@ -1,18 +1,20 @@
-import "../_virtual/_rolldown/runtime.js";
+import { __name } from "../_virtual/_rolldown/runtime.js";
 import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
 import { depsShallowEqual, useUpdateEffect as useUpdateEffect$1 } from "../hooks/useUpdateEffect.js";
+import { MinZoom } from "../base/const.js";
 import { BaseXYFlow } from "../base/BaseXYFlow.js";
 import { useRootContainer } from "../context/RootContainerContext.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
-import { useDiagram } from "../hooks/safeContext.js";
-import { selectDiagramActor, useDiagramSnapshot } from "../hooks/useDiagram.js";
+import { selectDiagramSnapshot, useDiagram, useDiagramSelector } from "../hooks/safeContext.js";
 import { viewBounds } from "./state/utils.js";
 import { deriveToggledFeatures } from "./state/machine.setup.js";
 import { BuiltinEdges, BuiltinNodes } from "./custom/index.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { cx } from "@likec4/styles/css";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useCustomCompareMemo } from "@react-hookz/web";
+import { Controls } from "@xyflow/react";
+import { shallowEqual } from "fast-equals";
 import { isEmpty } from "remeda";
 import { nonNullable } from "@likec4/core";
 import { useDebouncedCallback as useDebouncedCallback$1, useTimeout } from "@mantine/hooks";
@@ -28,7 +30,8 @@ var builtinNodes = {
 	"compound-deployment": BuiltinNodes.CompoundDeploymentNode,
 	"view-group": BuiltinNodes.ViewGroupNode,
 	"seq-actor": BuiltinNodes.SequenceActorNode,
-	"seq-parallel": BuiltinNodes.SequenceParallelArea
+	"seq-parallel": BuiltinNodes.SequenceParallelArea,
+	"seq-subflow": BuiltinNodes.SequenceSubflowArea
 };
 function prepareNodeTypes(nodeTypes) {
 	if (!nodeTypes || isEmpty(nodeTypes)) return builtinNodes;
@@ -39,7 +42,8 @@ function prepareNodeTypes(nodeTypes) {
 		"compound-deployment": nodeTypes.compoundDeployment ?? builtinNodes["compound-deployment"],
 		"view-group": nodeTypes.viewGroup ?? builtinNodes["view-group"],
 		"seq-actor": nodeTypes.seqActor ?? builtinNodes["seq-actor"],
-		"seq-parallel": nodeTypes.seqParallel ?? builtinNodes["seq-parallel"]
+		"seq-parallel": nodeTypes.seqParallel ?? builtinNodes["seq-parallel"],
+		"seq-subflow": nodeTypes.seqSubflow ?? builtinNodes["seq-subflow"]
 	};
 }
 var viewportToTopLeft = (ctx) => {
@@ -50,10 +54,12 @@ var viewportToTopLeft = (ctx) => {
 		zoom: 1
 	};
 };
-var selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
+var selectXYProps = selectDiagramSnapshot(({ context: ctx, children }) => {
 	const { enableReadOnly } = deriveToggledFeatures(ctx);
-	const isNotEditingEdge = enableReadOnly || children.editor?.getSnapshot().context.editing?.subject !== "edge";
-	let nodesDraggable = !enableReadOnly && ctx.nodesDraggable;
+	const editorSnapshot = enableReadOnly ? null : children.editor?.getSnapshot();
+	const isNotEditingEdge = enableReadOnly || editorSnapshot?.context.editing?.subject !== "edge";
+	const isEditorBusy = editorSnapshot?.hasTag("busy") ?? false;
+	let nodesDraggable = !enableReadOnly && ctx.nodesDraggable && !isEditorBusy;
 	if (ctx.dynamicViewVariant === "sequence" && ctx.view._type === "dynamic") nodesDraggable = false;
 	return {
 		enableReadOnly,
@@ -63,15 +69,18 @@ var selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
 		pannable: ctx.pannable,
 		zoomable: ctx.zoomable,
 		nodesDraggable,
-		nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
+		nodesSelectable: ctx.nodesSelectable && isNotEditingEdge && !isEditorBusy,
 		fitViewPadding: ctx.fitViewPadding,
 		enableFitView: ctx.features.enableFitView,
+		enableControls: ctx.features.enableControls && ctx.features.enableFitView,
 		...!ctx.features.enableFitView && { viewport: viewportToTopLeft(ctx) }
 	};
+}, ({ nodes: aNodes, edges: aEdges, ...a }, { nodes: bNodes, edges: bEdges, ...b }) => {
+	return shallowEqual(a, b) && shallowEqual(aNodes, bNodes) && shallowEqual(aEdges, bEdges);
 });
 function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, children, renderNodes }) {
 	const diagram = useDiagram();
-	let { enableReadOnly, initialized, nodes, edges, enableFitView, nodesDraggable, nodesSelectable, ...props } = useDiagramSnapshot(selectXYProps);
+	let { enableReadOnly, initialized, nodes, edges, enableFitView, nodesDraggable, nodesSelectable, enableControls, ...props } = useDiagramSelector(selectXYProps);
 	const { onNodeContextMenu, onCanvasContextMenu, onEdgeContextMenu, onNodeClick, onEdgeClick, onCanvasClick, onCanvasDblClick } = useDiagramEventHandlers();
 	const { reducedGraphics, $panning } = useRootContainer();
 	const isReducedGraphics = reducedGraphics;
@@ -79,13 +88,14 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 	const $isPanning = $panning;
 	const isPanning = useTimeout(() => {
 		$isPanning.set(true);
-	}, isReducedGraphics ? 200 : 800);
+	}, isReducedGraphics ? 200 : 1e3);
 	const notPanning = useDebouncedCallback$1(() => {
 		isPanning.clear();
 		$isPanning.set(false);
 	}, 200);
 	const onMove = useCallbackRef$1((event) => {
 		if (!event) {
+			$isPanning.set(false);
 			isPanning.clear();
 			return;
 		}
@@ -93,7 +103,11 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 		else notPanning();
 	});
 	const onMoveEnd = useCallbackRef$1((event, viewport) => {
-		if (event) notPanning();
+		if (!event) {
+			$isPanning.set(false);
+			isPanning.clear();
+			notPanning.cancel();
+		} else notPanning();
 		diagram.send({
 			type: "xyflow.viewportMoved",
 			viewport,
@@ -107,7 +121,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 	useUpdateEffect$1(() => {
 		console.warn("renderNodes changed - this might degrade performance");
 	}, [nodeTypes]);
-	return /* @__PURE__ */ jsx(BaseXYFlow, {
+	return /* @__PURE__ */ jsxs(BaseXYFlow, {
 		nodes,
 		edges,
 		className: cx(initialized ? "initialized" : "not-initialized"),
@@ -128,6 +142,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 		background: initialized ? background : "transparent",
 		fitView: false,
 		onNodeClick: useCallbackRef$1((e, node) => {
+			if (e.isPropagationStopped()) return;
 			e.stopPropagation();
 			diagram.send({
 				type: "xyflow.nodeClick",
@@ -136,6 +151,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 			onNodeClick?.(diagram.findDiagramNode(node.id), e);
 		}),
 		onEdgeClick: useCallbackRef$1((e, edge) => {
+			if (e.isPropagationStopped()) return;
 			e.stopPropagation();
 			diagram.send({
 				type: "xyflow.edgeClick",
@@ -144,12 +160,21 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 			onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
 		}),
 		onEdgeDoubleClick: useCallbackRef$1((e, edge) => {
+			if (e.isPropagationStopped()) return;
 			e.stopPropagation();
 			diagram.send({
 				type: "xyflow.edgeDoubleClick",
 				edge
 			});
 		}),
+		onDelete: useCallbackRef$1(({ nodes, edges }) => {
+			if (enableReadOnly) return;
+			diagram.editorActor().send({
+				type: "delete.nodes-edges",
+				nodeIds: nodes.map((node) => node.data.id),
+				edgeIds: edges.map((edge) => edge.data.id)
+			});
+		}),
 		onPaneClick: useCallbackRef$1((e) => {
 			e.stopPropagation();
 			diagram.send({ type: "xyflow.paneClick" });
@@ -200,8 +225,8 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 			});
 		}),
 		onNodeContextMenu: useCallbackRef$1((event, node) => {
-			const diagramNode = nonNullable(diagram.findDiagramNode(node.id), `diagramNode ${node.id} not found`);
-			onNodeContextMenu?.(diagramNode, event);
+			const diagramNode = diagram.findDiagramNode(node.data.id);
+			if (diagramNode) onNodeContextMenu?.(diagramNode, event);
 		}),
 		onEdgeContextMenu: useCallbackRef$1((event, edge) => {
 			const diagramEdge = nonNullable(diagram.findDiagramEdge(edge.id), `diagramEdge ${edge.id} not found`);
@@ -211,13 +236,25 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 		...enableFitView && { onViewportResize },
 		nodesDraggable,
 		nodesSelectable,
+		nodesFocusable: true,
+		edgesFocusable: true,
 		elevateEdgesOnSelect: !enableReadOnly,
 		zIndexMode: "manual",
 		...nodesDraggable && layoutConstraints,
 		...props,
 		...reactFlowProps,
-		children
+		children: [enableControls && /* @__PURE__ */ jsx(Controls$1, { padding: props.fitViewPadding }), children]
 	});
 }
+var Controls$1 = /* @__PURE__ */ __name(({ padding }) => /* @__PURE__ */ jsx(Controls, {
+	showInteractive: false,
+	fitViewOptions: {
+		padding,
+		minZoom: MinZoom,
+		maxZoom: 1,
+		duration: 350
+	},
+	position: "bottom-left"
+}), "Controls");
 //#endregion
 export { LikeC4DiagramXYFlow };

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

@@ -1,10 +1,8 @@
-import { DynamicViewDisplayVariant, LayoutedView, ViewId, WhereOperator } from '@likec4/core/types';
+import { LayoutedView, ViewId } from '@likec4/core/types';
+import { DiagramContext } from './state/types';
 import { Types } from './types';
-type ConvertToXYFlowInput = {
+type ConvertToXYFlowInput = Pick<DiagramContext, 'view' | 'where' | 'dynamicViewVariant' | 'collapsedSequenceFlows'> & {
     currentViewId: ViewId | undefined;
-    view: LayoutedView;
-    where: WhereOperator | null;
-    dynamicViewVariant: DynamicViewDisplayVariant;
 };
 export declare function convertToXYFlow({ dynamicViewVariant, ...params }: ConvertToXYFlowInput): {
     view: LayoutedView;

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

@@ -1,19 +1,38 @@
 import "../_virtual/_rolldown/runtime.js";
 import { diagramToXY } from "./xyflow-diagram/diagram-view.js";
-import { sequenceLayoutToXY } from "./xyflow-sequence/sequence-layout.js";
+import { sequenceLayoutToXY } from "./xyflow-sequence/sequence-view-to-xy.js";
 //#region src/likec4diagram/convert-to-xyflow.ts
 function convertToXYFlow({ dynamicViewVariant, ...params }) {
 	const view = params.view;
 	const isDynamic = view._type === "dynamic";
-	const { xynodes, xyedges } = isDynamic && dynamicViewVariant === "sequence" ? sequenceLayoutToXY(view, params.currentViewId) : diagramToXY({ ...params });
-	if (isDynamic && view.variant !== dynamicViewVariant) return {
-		view: {
-			...view,
-			variant: dynamicViewVariant
-		},
-		xynodes,
-		xyedges
-	};
+	if (isDynamic && dynamicViewVariant !== "sequence") {
+		const { xynodes, xyedges } = diagramToXY(params);
+		return {
+			view: view.variant !== "diagram" ? {
+				...view,
+				variant: "diagram"
+			} : view,
+			xynodes,
+			xyedges
+		};
+	}
+	if (isDynamic && dynamicViewVariant === "sequence") {
+		const { xynodes, xyedges, layout } = sequenceLayoutToXY({
+			view,
+			currentViewId: params.currentViewId,
+			collapsedFlows: params.collapsedSequenceFlows
+		});
+		return {
+			view: {
+				...view,
+				sequenceLayout: layout,
+				variant: dynamicViewVariant
+			},
+			xynodes,
+			xyedges
+		};
+	}
+	const { xynodes, xyedges } = diagramToXY(params);
 	return {
 		view,
 		xynodes,

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

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

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

@@ -13,7 +13,7 @@ import { EdgeLabelContainer } from "../../../base-primitives/edge/EdgeLabelConta
 import { EdgePath } from "../../../base-primitives/edge/EdgePath.js";
 import { memoEdge } from "../../../base-primitives/memoEdge.js";
 import { EdgeDrifts } from "./EdgeDrifts.js";
-import { controlPoint, controlPointsContainer } from "./edges.css.js";
+import { controlPoint, controlPointsContainer, labelDraggable } from "./edges.css.js";
 import { useControlPoints } from "./useControlPoints.js";
 import { useRelationshipEdgePath } from "./useRelationshipEdgePath.js";
 import { css, cx } from "@likec4/styles/css";
@@ -21,6 +21,7 @@ import { useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRafEffect } from "@react-hookz/web";
 import { EdgeLabelRenderer } from "@xyflow/react";
+import { isNumber } from "remeda";
 //#region src/likec4diagram/custom/edges/RelationshipEdge.tsx
 var getEdgeCenter = (path) => {
 	const dompoint = path.getPointAtLength(path.getTotalLength() * .5);
@@ -33,7 +34,11 @@ var RelationshipEdge = memoEdge((props) => {
 	const [isControlPointDragging, setIsControlPointDragging] = useState(false);
 	const isControlPointDraggingRef = useRef(isControlPointDragging);
 	isControlPointDraggingRef.current = isControlPointDragging;
+	const [isLabelDragging, setIsLabelDragging] = useState(false);
+	const isLabelDraggingRef = useRef(isLabelDragging);
+	isLabelDraggingRef.current = isLabelDragging;
 	const xyflow = useXYFlow();
+	const xyflowStore = useXYStoreApi();
 	const diagram = useDiagram();
 	const { enableNavigateTo, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
 	const enabledEditing = !enableReadOnly;
@@ -52,32 +57,58 @@ var RelationshipEdge = memoEdge((props) => {
 		y: labelXY?.y ?? labelY
 	}, isSamePoint);
 	useUpdateEffect$1(() => {
-		if (isControlPointDraggingRef.current) return;
+		if (isControlPointDraggingRef.current || isLabelDraggingRef.current) return;
 		setLabelPos({
 			x: labelX,
 			y: labelY
 		});
 	}, [labelX, labelY]);
 	const svgPathRef = useRef(null);
+	const labelOffsetRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const captureLabelOffset = useCallbackRef(() => {
+		const path = svgPathRef.current;
+		if (data.isLabelCustomized && path && labelBBox) {
+			const center = getEdgeCenter(path);
+			labelOffsetRef.current = {
+				x: labelBBox.x - center.x,
+				y: labelBBox.y - center.y
+			};
+		} else labelOffsetRef.current = {
+			x: 0,
+			y: 0
+		};
+	});
 	useRafEffect(() => {
 		const path = svgPathRef.current;
 		if (!path || !isControlPointDragging) return;
-		setLabelPos(getEdgeCenter(path));
+		const center = getEdgeCenter(path);
+		const offset = labelOffsetRef.current;
+		setLabelPos({
+			x: center.x + offset.x,
+			y: center.y + offset.y
+		});
 	}, [edgePath, isControlPointDragging]);
 	const updateEdgeData = useCallbackRef((controlPoints) => {
-		const point = labelBBox && svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
-		if (point) diagram.updateEdgeData(id, {
-			controlPoints,
-			labelBBox: {
-				...labelBBox,
-				...point
-			}
-		});
-		else diagram.updateEdgeData(id, { controlPoints });
+		const center = labelBBox && svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
+		if (center) {
+			const offset = labelOffsetRef.current;
+			diagram.updateEdgeData(id, {
+				controlPoints,
+				labelBBox: {
+					...labelBBox,
+					x: center.x + offset.x,
+					y: center.y + offset.y
+				}
+			});
+		} else diagram.updateEdgeData(id, { controlPoints });
 		diagram.stopEditing(true);
 		setIsControlPointDragging(false);
 	});
 	const onControlPointerStartMove = useCallbackRef(() => {
+		captureLabelOffset();
 		diagram.startEditing("edge");
 		setIsControlPointDragging(true);
 	});
@@ -92,6 +123,7 @@ var RelationshipEdge = memoEdge((props) => {
 		});
 	});
 	const onControlPointerDelete = useCallbackRef((points) => {
+		captureLabelOffset();
 		diagram.startEditing("edge");
 		setIsControlPointDragging(true);
 		setControlPoints(points);
@@ -115,6 +147,86 @@ var RelationshipEdge = memoEdge((props) => {
 		diagram.updateEdgeData(id, { controlPoints: newControlPoints });
 		diagram.stopEditing(true);
 	});
+	const updateLabelPosition = useCallbackRef((pos) => {
+		if (labelBBox) diagram.updateEdgeData(id, {
+			labelBBox: {
+				...labelBBox,
+				x: pos.x,
+				y: pos.y
+			},
+			isLabelCustomized: true
+		});
+		diagram.stopEditing(true);
+		setIsLabelDragging(false);
+	});
+	/**
+	* Handle pointer down on the edge label to drag it to a custom position.
+	* Mirrors the control-point LMB drag.
+	*/
+	const onLabelPointerDown = useCallbackRef((e) => {
+		if (e.pointerType !== "mouse" || e.button !== 0 || !labelBBox || isControlPointDraggingRef.current) return;
+		const { domNode, edges, addSelectedEdges, unselectNodesAndEdges } = xyflowStore.getState();
+		if (!domNode) return;
+		e.stopPropagation();
+		if (!selected) {
+			unselectNodesAndEdges({ edges: edges.filter((ed) => ed.selected && ed.id !== id) });
+			addSelectedEdges([id]);
+		}
+		let hasMoved = false;
+		const initialPoint = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		const clientPoint = { ...initialPoint };
+		const flowStart = xyflow.screenToFlowPosition(initialPoint, { snapToGrid: false });
+		const grab = {
+			x: flowStart.x - labelBBox.x,
+			y: flowStart.y - labelBBox.y
+		};
+		let pos = {
+			x: labelBBox.x,
+			y: labelBBox.y
+		};
+		let animationFrameId = null;
+		const onPointerMove = (ev) => {
+			clientPoint.x = ev.clientX;
+			clientPoint.y = ev.clientY;
+			if (!isSamePoint(initialPoint, clientPoint)) {
+				if (!hasMoved) {
+					hasMoved = true;
+					diagram.startEditing("edge");
+					setIsLabelDragging(true);
+				}
+				animationFrameId ??= requestAnimationFrame(() => {
+					animationFrameId = null;
+					const { x, y } = xyflow.screenToFlowPosition(clientPoint, { snapToGrid: false });
+					pos = {
+						x: Math.round(x - grab.x),
+						y: Math.round(y - grab.y)
+					};
+					setLabelPos(pos);
+				});
+			}
+			ev.stopPropagation();
+		};
+		const onPointerUp = (ev) => {
+			ev.stopPropagation();
+			domNode.removeEventListener("pointermove", onPointerMove, { capture: true });
+			if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+			if (hasMoved) {
+				domNode.addEventListener("click", stopAndPrevent, {
+					capture: true,
+					once: true
+				});
+				updateLabelPosition(pos);
+			}
+		};
+		domNode.addEventListener("pointermove", onPointerMove, { capture: true });
+		domNode.addEventListener("pointerup", onPointerUp, {
+			once: true,
+			capture: true
+		});
+	});
 	if (isControlPointDragging && !props.data.hovered) props = {
 		...props,
 		data: {
@@ -122,6 +234,10 @@ var RelationshipEdge = memoEdge((props) => {
 			hovered: true
 		}
 	};
+	const sequenceStepData = isNumber(props.data.stepnum) ? {
+		isSequenceStep: true,
+		stepNum: props.data.stepnum
+	} : void 0;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(EdgeContainer, {
 		...props,
 		className: css({ "& .react-flow__edge-interaction": { cursor: enabledEditing && selected ? "copy" : void 0 } }),
@@ -139,17 +255,23 @@ var RelationshipEdge = memoEdge((props) => {
 			}),
 			labelBBox && /* @__PURE__ */ jsx(EdgeLabelContainer, {
 				edgeProps: props,
-				labelPosition: isControlPointDragging ? labelPos : {
+				labelPosition: isControlPointDragging || isLabelDragging ? labelPos : {
 					x: labelX,
 					y: labelY
 				},
+				...enabledEditing && { onPointerDown: onLabelPointerDown },
 				children: /* @__PURE__ */ jsx(EdgeLabel, {
-					pointerEvents: enabledEditing ? "none" : "all",
+					pointerEvents: "all",
+					className: enabledEditing ? labelDraggable : void 0,
+					...sequenceStepData,
 					edgeProps: props,
-					children: navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, { onClick: (e) => {
-						e.stopPropagation();
-						diagram.navigateTo(navigateTo);
-					} })
+					children: navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, {
+						ariaLabel: "Navigate to view",
+						onClick: (e) => {
+							e.stopPropagation();
+							diagram.navigateTo(navigateTo);
+						}
+					})
 				})
 			})
 		]