@likec4/diagram 1.58.0 → 1.59.0

package/dist/hooks/safeContext.js

@@ -1,24 +1,72 @@
 import "../_virtual/_rolldown/runtime.js";
 import { createContext, useContext } from "react";
+import { shallowEqual } from "fast-equals";
+import { isFunction } from "remeda";
+import { useSelector } from "@xstate/react";
+import { invariant } from "motion";
 //#region src/hooks/safeContext.tsx
-/**
-* To improve experience with HMR, we move context to separate files and use as a boundary for hooks
-*/
-var DiagramActorSafeContext = createContext(null);
-DiagramActorSafeContext.displayName = "DiagramActorSafeContext";
 var DiagramApiSafeContext = createContext(null);
 DiagramApiSafeContext.displayName = "DiagramApiSafeContext";
-var DiagramActorContextProvider = DiagramActorSafeContext.Provider;
 var DiagramApiContextProvider = DiagramApiSafeContext.Provider;
-function useDiagramActorRef() {
-	const ctx = useContext(DiagramActorSafeContext);
-	if (ctx === null) throw new Error("DiagramActorRef is not provided");
-	return ctx;
-}
 function useDiagram() {
 	const ctx = useContext(DiagramApiSafeContext);
 	if (ctx === null) throw new Error("DiagramApi is not provided");
 	return ctx;
 }
+/**
+* Helper to create a safe context for an actor
+* @example
+* ```tsx
+* const {
+*   ContextProvider: MyActorContext,
+*   useActorRef,
+*   selectSnapshot,
+*   useActorSelector
+* } = createSafeContextForActor<MyActorRef>()
+*
+* const select = selectSnapshot(
+*   s => ....,
+*   (a, b) => a === b
+* )
+*
+* // Later in component:
+* const value = useActorSelector(select)
+* ```
+*/
+function createSafeContextForActor(name) {
+	const Ctx = createContext(null);
+	function selectSnapshot(selector, compare) {
+		return [selector, compare ?? shallowEqual];
+	}
+	function selectContext(selector, compare) {
+		return [(snapshot) => selector(snapshot.context), compare ?? shallowEqual];
+	}
+	function useActorRef() {
+		const actorRef = useContext(Ctx);
+		if (actorRef === null) throw new Error(`${name}SafeContext is not provided `);
+		return actorRef;
+	}
+	function useActorSelector(arg1, arg2) {
+		let selector;
+		let compare;
+		if (arg2 !== void 0) [selector, compare] = [arg1, arg2];
+		else if (Array.isArray(arg1)) [selector, compare] = arg1;
+		else {
+			selector = arg1;
+			compare = shallowEqual;
+		}
+		compare ??= shallowEqual;
+		invariant(isFunction(selector), "selector must be a function");
+		return useSelector(useActorRef(), selector, compare);
+	}
+	return {
+		ContextProvider: Ctx.Provider,
+		selectSnapshot,
+		selectContext,
+		useActorSelector,
+		useActorRef
+	};
+}
+var { ContextProvider: DiagramActorContextProvider, selectSnapshot: selectDiagramSnapshot, selectContext: selectDiagramContext, useActorSelector: useDiagramSelector, useActorRef: useDiagramActorRef } = createSafeContextForActor("DiagramActor");
 //#endregion
-export { DiagramActorContextProvider, DiagramApiContextProvider, useDiagram, useDiagramActorRef };
+export { DiagramActorContextProvider, DiagramApiContextProvider, createSafeContextForActor, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector };

package/dist/hooks/useCurrentViewModel.js

@@ -13,4 +13,4 @@ function useCurrentViewModel() {
 	return vm;
 }
 //#endregion
-export { useCurrentViewModel };
+export { useCurrentViewModel, useOptionalCurrentViewModel };

package/dist/hooks/useDiagram.d.ts

@@ -6,15 +6,22 @@ export { useDiagram, useDiagramActorRef };
 export type { DiagramApi, DiagramContext };
 /**
  * Helper to create a selector for diagram actor snapshot
+ * @deprecated use {@link selectDiagramSnapshot}
  */
 export declare function selectDiagramActor<T = unknown>(selector: (state: DiagramActorSnapshot) => T): (state: DiagramActorSnapshot) => T;
+/**
+ * Read diagram actor snapshot
+ * @deprecated use {@link useDiagramSelector}
+ */
 export declare function useDiagramSnapshot<T = unknown>(selector: (state: DiagramActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 /**
  * Helper to create a selector for diagram actor snapshot
+ * @deprecated use {@link selectDiagramContext}
  */
 export declare function selectDiagramActorContext<T = unknown>(selector: (state: DiagramContext) => T): (state: DiagramActorSnapshot) => T;
 /**
  * Read diagram context
+ * @deprecated use {@link useDiagramSelector}
  */
 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 & {
@@ -32,3 +39,4 @@ type PickEmittedEvent<T> = T extends DiagramEmittedEvents['type'] ? DiagramEmitt
 export declare function useOnDiagramEvent<T extends DiagramEmittedEvents['type'] | '*'>(event: T, callback: (event: PickEmittedEvent<T>) => void, options?: {
     once?: boolean;
 }): void;
+export { selectDiagramContext, selectDiagramSnapshot, useDiagramSelector, } from './safeContext';

package/dist/hooks/useDiagram.js

@@ -1,27 +1,34 @@
 import "../_virtual/_rolldown/runtime.js";
 import { useCallbackRef } from "./useCallbackRef.js";
-import { useDiagramActorRef } from "./safeContext.js";
+import { selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramSelector } from "./safeContext.js";
 import { useCallback, useEffect, useRef } from "react";
 import { shallowEqual } from "fast-equals";
 import { useSelector } from "@xstate/react";
 //#region src/hooks/useDiagram.ts
 /**
 * Helper to create a selector for diagram actor snapshot
+* @deprecated use {@link selectDiagramSnapshot}
 */
 function selectDiagramActor(selector) {
 	return selector;
 }
+/**
+* Read diagram actor snapshot
+* @deprecated use {@link useDiagramSelector}
+*/
 function useDiagramSnapshot(selector, compare = shallowEqual) {
 	return useSelector(useDiagramActorRef(), selector, compare);
 }
 /**
 * Helper to create a selector for diagram actor snapshot
+* @deprecated use {@link selectDiagramContext}
 */
 function selectDiagramActorContext(selector) {
 	return (state) => selector(state.context);
 }
 /**
 * Read diagram context
+* @deprecated use {@link useDiagramSelector}
 */
 function useDiagramContext(selector, compare = shallowEqual, deps = []) {
 	const actorRef = useDiagramActorRef();
@@ -67,4 +74,4 @@ function useOnDiagramEvent(event, callback, options) {
 	]);
 }
 //#endregion
-export { selectDiagramActor, selectDiagramActorContext, useDiagramContext, useDiagramSnapshot, useOnDiagramEvent };
+export { selectDiagramActor, selectDiagramActorContext, selectDiagramContext, selectDiagramSnapshot, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramSelector, useDiagramSnapshot, useOnDiagramEvent };

package/dist/hooks/useEditorActor.js

@@ -24,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';

package/dist/index.js

@@ -2,7 +2,7 @@ import { IconRendererProvider } from "./context/IconRenderer.js";
 import { useUpdateEffect } from "./hooks/useUpdateEffect.js";
 import { DefaultMantineProvider } from "./context/DefaultMantineProvider.js";
 import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
-import { useDiagram } from "./hooks/safeContext.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";
@@ -23,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 { DefaultMantineProvider, FramerMotionConfig, 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.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,7 +54,7 @@ var viewportToTopLeft = (ctx) => {
 		zoom: 1
 	};
 };
-var selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
+var selectXYProps = selectDiagramSnapshot(({ context: ctx, children }) => {
 	const { enableReadOnly } = deriveToggledFeatures(ctx);
 	const editorSnapshot = enableReadOnly ? null : children.editor?.getSnapshot();
 	const isNotEditingEdge = enableReadOnly || editorSnapshot?.context.editing?.subject !== "edge";
@@ -68,12 +72,15 @@ var selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
 		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;
@@ -81,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;
 		}
@@ -95,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,
@@ -109,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"),
@@ -156,6 +168,7 @@ function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, childre
 			});
 		}),
 		onDelete: useCallbackRef$1(({ nodes, edges }) => {
+			if (enableReadOnly) return;
 			diagram.editorActor().send({
 				type: "delete.nodes-edges",
 				nodeIds: nodes.map((node) => node.data.id),
@@ -212,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`);
@@ -223,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/RelationshipEdge.js

@@ -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);
@@ -233,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 } }),
@@ -258,11 +263,15 @@ var RelationshipEdge = memoEdge((props) => {
 				children: /* @__PURE__ */ jsx(EdgeLabel, {
 					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);
+						}
+					})
 				})
 			})
 		]

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

@@ -41,8 +41,10 @@ function SequenceStepEdge(props) {
 			labelX = props.sourceX + LABEL_OFFSET;
 			break;
 	}
+	const { state, stepnum } = props.data;
 	return /* @__PURE__ */ jsxs(EdgeContainer, {
 		...props,
+		...state && { "data-seq-edge-state": state },
 		children: [
 			/* @__PURE__ */ jsx(EdgePath, {
 				edgeProps: props,
@@ -61,10 +63,15 @@ function SequenceStepEdge(props) {
 				},
 				children: /* @__PURE__ */ jsx(EdgeLabel, {
 					edgeProps: props,
-					children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, { onClick: (e) => {
-						e.stopPropagation();
-						diagram.navigateTo(navigateTo);
-					} })
+					isSequenceStep: true,
+					stepNum: stepnum,
+					children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, {
+						ariaLabel: "Navigate to view",
+						onClick: (e) => {
+							e.stopPropagation();
+							diagram.navigateTo(navigateTo);
+						}
+					})
 				})
 			})
 		]

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

@@ -38,7 +38,7 @@ var controlPoint = css({
 	[`:where([data-likec4-selected='true']) &`]: { r: 6 },
 	[`:is([data-likec4-hovered='true']) &`]: { r: 8 },
 	_hover: {
-		fill: "mantine.colors.primary.filledHover",
+		fill: "mantine.primary.filledHover",
 		r: 10,
 		transitionDuration: "100ms"
 	},

package/dist/likec4diagram/custom/index.d.ts

@@ -1,5 +1,5 @@
 import { SequenceStepEdge } from './edges/SequenceStepEdge';
-import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, SequenceActorNode, SequenceParallelArea, ViewGroupNode } from './nodes';
+import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, SequenceActorNode, SequenceParallelArea, SequenceSubflowArea, ViewGroupNode } from './nodes';
 import { FunctionComponent } from 'react';
 export declare const BuiltinNodes: {
     ElementNode: typeof ElementNode;
@@ -9,6 +9,7 @@ export declare const BuiltinNodes: {
     ViewGroupNode: typeof ViewGroupNode;
     SequenceActorNode: typeof SequenceActorNode;
     SequenceParallelArea: typeof SequenceParallelArea;
+    SequenceSubflowArea: typeof SequenceSubflowArea;
 };
 export declare const BuiltinEdges: {
     RelationshipEdge: FunctionComponent<import("../types").Types.EdgeProps<"relationship">>;

package/dist/likec4diagram/custom/index.js

@@ -1,7 +1,8 @@
-import { RelationshipEdge } from "./edges/RelationshipEdge.js";
-import { SequenceStepEdge } from "./edges/SequenceStepEdge.js";
 import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, ViewGroupNode } from "./nodes/nodes.js";
 import { SequenceActorNode, SequenceParallelArea } from "./nodes/SequenceActorNode.js";
+import { SequenceSubflowArea } from "./nodes/SequenceSubFlow.js";
+import { RelationshipEdge } from "./edges/RelationshipEdge.js";
+import { SequenceStepEdge } from "./edges/SequenceStepEdge.js";
 //#region src/likec4diagram/custom/index.tsx
 var BuiltinNodes = {
 	ElementNode,
@@ -10,7 +11,8 @@ var BuiltinNodes = {
 	CompoundDeploymentNode,
 	ViewGroupNode,
 	SequenceActorNode,
-	SequenceParallelArea
+	SequenceParallelArea,
+	SequenceSubflowArea
 };
 var BuiltinEdges = {
 	RelationshipEdge,

package/dist/likec4diagram/custom/nodes/CompoundActions.js

@@ -9,6 +9,7 @@ var CompoundActions = (props) => {
 	const diagram = useDiagram();
 	const { navigateTo } = props.data;
 	if (navigateTo && enableNavigateTo) return /* @__PURE__ */ jsx(CompoundActionButton, {
+		ariaLabel: "Navigate to view",
 		onClick: (e) => {
 			e.stopPropagation();
 			diagram.navigateTo(navigateTo, props.id);