@likec4/diagram 1.58.0 → 1.59.1

package/dist/likec4diagram/state/machine.state.ready.walkthrough.js

@@ -1,14 +1,24 @@
 import "../../_virtual/_rolldown/runtime.js";
+import { roundDpr } from "../../utils/roundDpr.js";
 import { Base } from "../../base/Base.js";
-import { machine, targetState } from "./machine.setup.js";
-import { SeqParallelAreaColor } from "../xyflow-sequence/const.js";
+import { machine, targetState, to } from "./machine.setup.js";
 import { assignViewportBefore, cancelFitDiagram, fitFocusedBounds, returnViewportBefore } from "./machine.actions.layout.js";
-import { cancelEditing, emitEdgeClick, startHotKeyActor, stopHotKeyActor, undimEverything, updateView } from "./machine.actions.js";
-import { clamp, first } from "remeda";
-import { getParallelStepsPrefix, invariant, isStepEdgeId, nonNullable } from "@likec4/core";
-import { assertEvent } from "xstate";
-import { assign as assign$1, enqueueActions as enqueueActions$1, raise as raise$1 } from "xstate/actions";
+import { assignLastClickedNode, cancelEditing, emitEdgeClick, emitPaneClick, resetLastClickedNode, resetSelection, startHotKeyActor, stopHotKeyActor, updateView } from "./machine.actions.js";
+import { clamp, firstBy, isNumber, map } from "remeda";
+import { invariant, nonNullable } from "@likec4/core";
+import { dynamicViewFlow as dynamicViewFlow$1, isDynamicView as isDynamicView$1, isStepPath as isStepPath$1, parentFlow } from "@likec4/core/types";
+import { assertEvent, enqueueActions } from "xstate";
+import { assign as assign$1, raise as raise$1 } from "xstate/actions";
 //#region src/likec4diagram/state/machine.state.ready.walkthrough.ts
+var byId = (id) => (e) => e.data.id === id && isNumber(e.data.stepnum);
+var outlinePanelWidth = ({ activeWalkthrough, xystore }) => {
+	if (activeWalkthrough) return activeWalkthrough.outlinePanelWidth;
+	const { width } = xystore.getState();
+	return clamp(roundDpr(width * .3), {
+		min: 180,
+		max: 400
+	});
+};
 var updateActiveWalkthroughState = () => machine.enqueueActions(({ context, enqueue }) => {
 	const { activeWalkthrough } = context;
 	if (!activeWalkthrough) {
@@ -16,77 +26,106 @@ var updateActiveWalkthroughState = () => machine.enqueueActions(({ context, enqu
 		enqueue.raise({ type: "walkthrough.end" });
 		return;
 	}
-	const { stepId, parallelPrefix } = activeWalkthrough;
-	const step = context.xyedges.find((x) => x.id === stepId);
+	const { stepId, activeFlow } = activeWalkthrough;
+	const step = context.xyedges.find(byId(stepId));
 	if (!step) {
 		console.warn("Invalid walkthrough stepId:", stepId);
 		enqueue.raise({ type: "walkthrough.end" });
 		return;
 	}
+	invariant(isDynamicView$1(context.view));
+	let processedSteps;
+	if (context.view.flow && context.dynamicViewVariant == "sequence") {
+		const flow = dynamicViewFlow$1(context.view);
+		processedSteps = new Set(flow.stepPathsBefore(stepId));
+	} else processedSteps = /* @__PURE__ */ new Set();
+	const parentActiveFlow = activeFlow ? parentFlow(activeFlow) : null;
 	enqueue.assign({
 		xyedges: context.xyedges.map((edge) => {
-			const active = stepId === edge.id || !!parallelPrefix && edge.id.startsWith(parallelPrefix);
+			if (edge.data.id === step.data.id) return Base.setData(edge, {
+				active: true,
+				state: "active",
+				dimmed: false
+			});
+			if (processedSteps.has(edge.data.id)) return Base.setData(edge, {
+				active: false,
+				state: "processed",
+				dimmed: true
+			});
+			if (isNumber(edge.data.stepnum) && edge.data.stepnum <= step.data.stepnum) return Base.setData(edge, {
+				active: false,
+				state: "skipped",
+				dimmed: true
+			});
 			return Base.setData(edge, {
-				active,
-				dimmed: stepId !== edge.id
+				active: false,
+				state: "pending",
+				dimmed: true
 			});
 		}),
 		xynodes: context.xynodes.map((node) => {
 			const dimmed = step.source !== node.id && step.target !== node.id;
-			if (node.type === "seq-parallel") return Base.setData(node, {
-				color: parallelPrefix === node.data.parallelPrefix ? SeqParallelAreaColor.active : SeqParallelAreaColor.default,
-				dimmed
-			});
+			if (node.type === "seq-subflow" && activeFlow) switch (true) {
+				case node.data.flowId == parentActiveFlow && (node.data.flowType === "try" || node.data.flowType === "alt"):
+				case node.data.flowId == activeFlow: return Base.setDimmed(node, false);
+				default: return Base.setDimmed(node, true);
+			}
 			return Base.setDimmed(node, dimmed);
 		})
 	});
+	enqueue(resetSelection());
+});
+var clearWalkthroughState = () => machine.assign(({ context }) => {
+	return {
+		activeWalkthrough: null,
+		xynodes: map(context.xynodes, Base.setDimmed(false)),
+		xyedges: map(context.xyedges, Base.setData({
+			state: null,
+			dimmed: false,
+			active: false
+		}))
+	};
 });
 var emitWalkthroughStarted = () => machine.emit(({ context }) => {
-	const edge = context.xyedges.find((x) => x.id === context.activeWalkthrough?.stepId);
-	invariant(edge, "Invalid walkthrough state");
 	return {
 		type: "walkthroughStarted",
-		edge
+		edge: nonNullable(context.xyedges.find((x) => x.data.id === context.activeWalkthrough?.stepId), "Walkthrough step not found")
 	};
 });
 var emitWalkthroughStopped = () => machine.emit(() => ({ type: "walkthroughStopped" }));
 var emitWalkthroughStep = () => machine.emit(({ context }) => {
-	const edge = context.xyedges.find((x) => x.id === context.activeWalkthrough?.stepId);
-	invariant(edge, "Invalid walkthrough state");
+	const stepId = nonNullable(context.activeWalkthrough?.stepId);
 	return {
 		type: "walkthroughStep",
-		edge
+		edge: nonNullable(context.xyedges.find((x) => x.data.id === stepId), `Walkthrough step edge ${stepId} not found`),
+		stepId
 	};
 });
 var walkthrough = machine.createStateConfig({
 	id: targetState.walkthrough.slice(1),
 	entry: [
-		startHotKeyActor(),
 		cancelEditing(),
 		cancelFitDiagram(),
 		assignViewportBefore(),
-		assign$1({ activeWalkthrough: ({ context, event }) => {
+		assign$1(({ context, event }) => {
 			assertEvent(event, "walkthrough.start");
-			const stepId = event.stepId ?? first(context.xyedges).id;
-			return {
+			const stepId = event.stepId ?? firstBy(context.xyedges, (e) => isStepPath$1(e.data.id))?.data.id;
+			return { activeWalkthrough: isStepPath$1(stepId) ? {
 				stepId,
-				parallelPrefix: getParallelStepsPrefix(stepId)
-			};
-		} }),
+				activeFlow: parentFlow(stepId),
+				outlinePanelWidth: outlinePanelWidth(context)
+			} : null };
+		}),
 		updateActiveWalkthroughState(),
 		fitFocusedBounds(),
-		emitWalkthroughStarted()
+		emitWalkthroughStarted(),
+		startHotKeyActor()
 	],
 	exit: [
 		stopHotKeyActor(),
-		enqueueActions$1(({ enqueue, context }) => {
-			enqueue.assign({ activeWalkthrough: null });
-			if (context.dynamicViewVariant === "sequence" && context.activeWalkthrough?.parallelPrefix) enqueue.assign({ xynodes: context.xynodes.map((n) => {
-				if (n.type === "seq-parallel") return Base.setData(n, { color: SeqParallelAreaColor.default });
-				return n;
-			}) });
-		}),
-		undimEverything(),
+		cancelFitDiagram(),
+		clearWalkthroughState(),
+		resetSelection(),
 		returnViewportBefore(),
 		emitWalkthroughStopped()
 	],
@@ -94,11 +133,11 @@ var walkthrough = machine.createStateConfig({
 		"key.esc": { target: targetState.idle },
 		"key.arrow.left": { actions: raise$1({
 			type: "walkthrough.step",
-			direction: "previous"
+			direction: "prev"
 		}) },
 		"key.arrow.up": { actions: raise$1({
 			type: "walkthrough.step",
-			direction: "previous"
+			direction: "prev"
 		}) },
 		"key.arrow.right": { actions: raise$1({
 			type: "walkthrough.step",
@@ -108,50 +147,80 @@ var walkthrough = machine.createStateConfig({
 			type: "walkthrough.step",
 			direction: "next"
 		}) },
-		"walkthrough.step": { actions: [
-			assign$1(({ context, event }) => {
-				const { stepId } = context.activeWalkthrough;
-				const stepIndex = context.xyedges.findIndex((e) => e.id === stepId);
-				const nextStepIndex = clamp(event.direction === "next" ? stepIndex + 1 : stepIndex - 1, {
-					min: 0,
-					max: context.xyedges.length - 1
-				});
-				if (nextStepIndex === stepIndex) return {};
-				const nextStepId = nonNullable(context.xyedges[nextStepIndex]).id;
-				return { activeWalkthrough: {
-					stepId: nextStepId,
-					parallelPrefix: getParallelStepsPrefix(nextStepId)
-				} };
-			}),
-			updateActiveWalkthroughState(),
-			fitFocusedBounds(),
-			emitWalkthroughStep()
-		] },
+		"walkthrough.step": { actions: [enqueueActions(({ enqueue, context, event }) => {
+			let predicate;
+			const activeWalkthrough = nonNullable(context.activeWalkthrough, "walkthrough.step: activeWalkthrough is null");
+			if (event.direction) {
+				invariant(isDynamicView$1(context.view));
+				const { stepId } = activeWalkthrough;
+				const prevNext = dynamicViewFlow$1(context.view).prevAndNext(stepId, (flowId) => context.collapsedSequenceFlows[flowId] ?? false);
+				predicate = (edge) => edge.data.id === prevNext[event.direction];
+			} else predicate = (edge) => edge.data.id === event.stepId;
+			const nextStepId = context.xyedges.find(predicate)?.data.id;
+			if (!isStepPath$1(nextStepId) || activeWalkthrough.stepId === nextStepId) return;
+			enqueue.assign({ activeWalkthrough: {
+				...activeWalkthrough,
+				stepId: nextStepId,
+				activeFlow: parentFlow(nextStepId)
+			} });
+			enqueue(updateActiveWalkthroughState());
+			enqueue(fitFocusedBounds());
+			enqueue(emitWalkthroughStep());
+		})] },
 		"xyflow.edgeClick": [{
 			guard: "click: active walkthrough step",
 			actions: [fitFocusedBounds(), emitEdgeClick()]
 		}, { actions: [
-			assign$1(({ event }) => {
-				const stepId = event.edge.id;
-				invariant(isStepEdgeId(stepId));
+			assign$1(({ event, context }) => {
+				invariant(event.edge.type === "seq-step", `Expected seq-step edge, but got "${event.edge.type}"`);
+				invariant(!!context.activeWalkthrough);
+				const stepId = event.edge.data.id;
 				return { activeWalkthrough: {
+					...context.activeWalkthrough,
 					stepId,
-					parallelPrefix: getParallelStepsPrefix(stepId)
+					activeFlow: parentFlow(stepId)
 				} };
 			}),
 			updateActiveWalkthroughState(),
-			fitFocusedBounds(),
+			fitFocusedBounds({ duration: 600 }),
 			emitEdgeClick(),
 			emitWalkthroughStep()
 		] }],
+		"xyflow.nodeClick": {
+			guard: "click: node.type = seq-subflow",
+			actions: [enqueueActions(({ enqueue, event: { node }, context }) => {
+				invariant(node.type === "seq-subflow");
+				if (node.data.collapsed) {
+					enqueue.raise({
+						type: "sequence.flow.expand",
+						flowId: node.data.flowId
+					});
+					return;
+				}
+				invariant(isDynamicView$1(context.view));
+				const flow = dynamicViewFlow$1(context.view);
+				const nextStepId = flow.firstStep(node.data.flowId) ?? flow.firstStep();
+				if (nextStepId !== context.activeWalkthrough?.stepId) {
+					enqueue.raise({
+						type: "walkthrough.step",
+						stepId: nextStepId
+					});
+					return;
+				}
+				if (context.lastClickedNode?.id === node.id && context.lastClickedNode.clicks > 2) enqueue.raise({ type: "walkthrough.end" });
+			}), assignLastClickedNode()]
+		},
 		"notations.unhighlight": { actions: updateActiveWalkthroughState() },
 		"tag.unhighlight": { actions: updateActiveWalkthroughState() },
 		"update.view": {
 			guard: "is same view",
 			actions: [updateView(), updateActiveWalkthroughState()]
 		},
-		"walkthrough.end": { target: targetState.idle },
-		"xyflow.paneDblClick": { target: targetState.idle }
+		"walkthrough.end": { ...to.idle },
+		"xyflow.paneDblClick": {
+			actions: [resetLastClickedNode(), emitPaneClick()],
+			...to.idle
+		}
 	}
 });
 //#endregion

package/dist/likec4diagram/state/types.d.ts

@@ -1,5 +1,6 @@
 import { ActorSystem } from 'xstate';
-import { EditorActorRef } from '../../editor/actor/machine';
+import { BaseEditorActorRef } from '../../editor/actor/setup';
+import { NavigationPanelActorRef } from '../../navigationpanel/actor';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { DiagramMachineRef } from './machine';
@@ -12,7 +13,8 @@ export type System = ActorSystem<{
         diagram: DiagramMachineRef;
         overlays: OverlaysActorRef;
         search: SearchActorRef;
-        editor: EditorActorRef;
+        editor: BaseEditorActorRef;
+        navigationPanel: NavigationPanelActorRef;
     };
 }>;
 export interface DiagramActorRef extends DiagramMachineRef {

package/dist/likec4diagram/state/utils.d.ts

@@ -3,6 +3,8 @@ import { DeploymentFqn, DiagramEdge, DiagramNode, DiagramView, Fqn } from '@like
 import { Viewport } from '@xyflow/system';
 import { ActorSystem } from 'xstate';
 import { EditorActorRef } from '../../editor/actor/machine';
+import { XYStoreState } from '../../hooks/useXYFlow';
+import { NavigationPanelActorRef } from '../../navigationpanel/actor';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { Types } from '../types';
@@ -18,6 +20,7 @@ export declare function typedSystem(system: ActorSystem<any>): {
     readonly diagramActorRef: DiagramActorRef;
     readonly searchActorRef: SearchActorRef | null;
     readonly editorActorRef: EditorActorRef | null;
+    readonly navigationActorRef: NavigationPanelActorRef | null;
 };
 export declare namespace typedSystem {
     var editorActor: ({ system }: {
@@ -32,6 +35,9 @@ export declare namespace typedSystem {
     var searchActor: ({ system }: {
         system: ActorSystem<any>;
     }) => SearchActorRef;
+    var navigationActor: ({ system }: {
+        system: ActorSystem<any>;
+    }) => NavigationPanelActorRef;
 }
 export declare function findDiagramNode(ctx: Context, xynodeId: string): DiagramNode | null;
 export declare function findDiagramEdge(ctx: Context, xyedgeId: string): DiagramEdge | null;
@@ -52,6 +58,7 @@ export declare function activeSequenceBounds(params: {
     bounds: BBox;
     duration: number;
 };
+export declare function getEdgeBounds(edge: Types.Edge, store: XYStoreState): BBox | null;
 export declare function nodeRef(node: Types.Node): Fqn | DeploymentFqn | null;
 export declare function findCorrespondingNode(context: Pick<Context, 'lastOnNavigate' | 'xynodes'>, event: {
     view: DiagramView;

package/dist/likec4diagram/state/utils.js

@@ -2,26 +2,31 @@ import "../../_virtual/_rolldown/runtime.js";
 import { MinZoom } from "../../base/const.js";
 import { pickViewBounds } from "../../utils/view-bounds.js";
 import { BBox } from "@likec4/core/geometry";
-import { nonNullable, nonexhaustive } from "@likec4/core/utils";
-import { getEdgePosition, getNodeDimensions, getNodesBounds, getViewportForBounds } from "@xyflow/system";
+import { invariant, nonNullable, nonexhaustive } from "@likec4/core/utils";
+import { getEdgePosition, getNodesBounds, getViewportForBounds } from "@xyflow/system";
+import { isDynamicView } from "@likec4/core/types";
 //#region src/likec4diagram/state/utils.ts
 var findNodeByModelFqn = (xynodes, elementFqn) => {
 	const node = xynodes.find((n) => "modelFqn" in n.data && n.data["modelFqn"] === elementFqn);
 	return node ? node : null;
 };
 function typedSystem(system) {
+	const sys = system;
 	return {
 		get overlaysActorRef() {
-			return system.get("overlays") ?? null;
+			return sys.get("overlays") ?? null;
 		},
 		get diagramActorRef() {
-			return nonNullable(system.get("diagram"), "Diagram actor not found");
+			return nonNullable(sys.get("diagram"), "Diagram actor not found");
 		},
 		get searchActorRef() {
-			return system.get("search") ?? null;
+			return sys.get("search") ?? null;
 		},
 		get editorActorRef() {
-			return system.get("editor") ?? null;
+			return sys.get("editor") ?? null;
+		},
+		get navigationActorRef() {
+			return sys.get("navigationPanel") ?? null;
 		}
 	};
 }
@@ -37,6 +42,9 @@ typedSystem.diagramActor = ({ system }) => {
 typedSystem.searchActor = ({ system }) => {
 	return system.get("search");
 };
+typedSystem.navigationActor = ({ system }) => {
+	return system.get("navigationPanel");
+};
 function findDiagramNode(ctx, xynodeId) {
 	return ctx.view.nodes.find((n) => n.id === xynodeId) ?? null;
 }
@@ -51,20 +59,8 @@ function viewBounds(ctx, nextView) {
 	return pickViewBounds(nextView ?? ctx.view, ctx.dynamicViewVariant);
 }
 function focusedBounds(params) {
-	const knownAbsolutes = /* @__PURE__ */ new Map();
 	const b = params.context.xynodes.reduce((acc, node) => {
-		let position = node.position;
-		if (node.parentId) {
-			const parent = knownAbsolutes.get(node.parentId) ?? {
-				x: 0,
-				y: 0
-			};
-			position = {
-				x: position.x + parent.x,
-				y: position.y + parent.y
-			};
-		}
-		knownAbsolutes.set(node.id, position);
+		let position = node.data;
 		if (node.hidden || node.data.dimmed) return acc;
 		const width = node.measured?.width ?? node.width ?? node.initialWidth;
 		const height = node.measured?.height ?? node.height ?? node.initialHeight;
@@ -93,23 +89,28 @@ function focusedBounds(params) {
 var MARGIN = 32;
 function activeSequenceBounds(params) {
 	const activeWalkthrough = nonNullable(params.context.activeWalkthrough);
-	const stepEdge = nonNullable(params.context.xyedges.find((e) => e.id === activeWalkthrough.stepId));
+	const view = params.context.view;
+	invariant(isDynamicView(view));
+	const stepEdge = nonNullable(params.context.xyedges.find((e) => e.data.id === activeWalkthrough.stepId));
 	const xystate = params.context.xystore.getState();
-	const actorsBounds = getNodesBounds([nonNullable(xystate.nodeLookup.get(stepEdge.source)), nonNullable(xystate.nodeLookup.get(stepEdge.target))], xystate);
-	let stepBounds;
-	if (activeWalkthrough.parallelPrefix) {
-		const parallelArea = params.context.xynodes.find((n) => n.type === "seq-parallel" && n.data.parallelPrefix === activeWalkthrough.parallelPrefix);
-		if (parallelArea) stepBounds = {
-			x: parallelArea.position.x,
-			y: parallelArea.position.y,
-			...getNodeDimensions(parallelArea)
+	const edgeBounds = getEdgeBounds(stepEdge, xystate);
+	if (edgeBounds && params.context.dynamicViewVariant === "sequence") {
+		const h = stepEdge.data.labelBBox?.height ?? 80;
+		const [top, bottom] = stepEdge.data.dir !== "back" ? [20, h] : [h, 20];
+		return {
+			duration: 500,
+			bounds: BBox.expand(edgeBounds, {
+				left: 100,
+				right: 100,
+				top,
+				bottom
+			})
 		};
 	}
-	stepBounds ??= getEdgeBounds(stepEdge, xystate);
-	if (stepBounds) stepBounds = BBox.merge(stepBounds, actorsBounds);
-	else stepBounds = actorsBounds;
+	const actorsBounds = getNodesBounds([nonNullable(xystate.nodeLookup.get(stepEdge.source)), nonNullable(xystate.nodeLookup.get(stepEdge.target))], xystate);
+	let stepBounds = edgeBounds ? BBox.merge(edgeBounds, actorsBounds) : actorsBounds;
 	return {
-		duration: 350,
+		duration: 500,
 		bounds: BBox.expand(stepBounds, MARGIN)
 	};
 }
@@ -125,7 +126,7 @@ function getEdgeBounds(edge, store) {
 		targetHandle: edge.targetHandle || null,
 		connectionMode: store.connectionMode
 	});
-	if (!edgePosition) return null;
+	if (!edgePosition) return edge.data.labelBBox ?? null;
 	return BBox.fromPoints([[edgePosition.sourceX, edgePosition.sourceY], [edgePosition.targetX, edgePosition.targetY]]);
 }
 function nodeRef(node) {
@@ -136,6 +137,7 @@ function nodeRef(node) {
 		case "deployment":
 		case "compound-deployment": return node.data.modelFqn ?? node.data.deploymentFqn;
 		case "seq-parallel":
+		case "seq-subflow":
 		case "view-group": return null;
 		default: nonexhaustive(node);
 	}
@@ -158,4 +160,4 @@ function calcViewportForBounds(context, bounds) {
 	return getViewportForBounds(bounds, width, height, MinZoom, Math.max(transform[2], 1), context.fitViewPadding);
 }
 //#endregion
-export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, nodeRef, typedSystem, viewBounds };
+export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, getEdgeBounds, nodeRef, typedSystem, viewBounds };

package/dist/likec4diagram/types.d.ts

@@ -1,4 +1,4 @@
-import { AutoLayoutDirection, BBox, DeploymentFqn, DiagramEdge, DiagramNode, DiagramNodeDriftReason, ExclusiveUnion, Fqn, IconUrl, MarkdownOrString, NonEmptyReadonlyArray, ViewId } from '@likec4/core/types';
+import { AutoLayoutDirection, BBox, DeploymentFqn, DiagramEdge, DiagramNode, DiagramNodeDriftReason, DynamicViewFlow, ExclusiveUnion, Fqn, IconUrl, MarkdownOrString, NonEmptyReadonlyArray, StepPath, ViewId } from '@likec4/core/types';
 import { XYPosition } from '@xyflow/system';
 import { FunctionComponent } from 'react';
 import { Simplify } from 'type-fest';
@@ -43,6 +43,7 @@ export declare namespace Types {
         height: number;
         type: 'target' | 'source';
         position: 'left' | 'right' | 'top' | 'bottom';
+        hidden?: boolean;
     };
     type SequenceActorNodeData = Simplify<LeafNodeData & {
         navigateTo: ViewId | null;
@@ -50,6 +51,34 @@ export declare namespace Types {
         ports: Array<SequenceActorNodePort>;
         viewHeight: number;
     }>;
+    /**
+     * Represents subflow area in the diagram
+     * `try` and `alt` flows have special handling in the diagram
+     */
+    type SequenceSubflowData = LeafNodeData & {
+        flowId: StepPath;
+        title: string | undefined;
+        /**
+         * This is first subflow in current flow
+         */
+        isFirst?: boolean | undefined;
+        /**
+         * This is last subflow in current flow
+         */
+        isLast?: boolean | undefined;
+        collapsed: boolean;
+    } & ({
+        flowType: Exclude<DynamicViewFlow.SubFlowType, 'try' | 'alt'>;
+    } | SequenceSubflowData.AltOrTry);
+    namespace SequenceSubflowData {
+        type AltOrTry = {
+            flowType: 'try' | 'alt';
+            headerHeight: number;
+        };
+    }
+    /**
+     * @deprecated Use {@link SequenceSubflowData} instead
+     */
     type SequenceParallelAreaData = Simplify<LeafNodeData & {
         parallelPrefix: string;
     }>;
@@ -92,10 +121,11 @@ export declare namespace Types {
     type DeploymentElementNode = BaseNode<DeploymentElementNodeData, 'deployment'>;
     type SequenceActorNode = BaseNode<SequenceActorNodeData, 'seq-actor'>;
     type SequenceParallelArea = BaseNode<SequenceParallelAreaData, 'seq-parallel'>;
+    type SequenceSubflowArea = BaseNode<SequenceSubflowData, 'seq-subflow'>;
     type CompoundElementNode = BaseNode<CompoundElementNodeData, 'compound-element'>;
     type CompoundDeploymentNode = BaseNode<CompoundDeploymentNodeData, 'compound-deployment'>;
     type ViewGroupNode = BaseNode<ViewGroupNodeData, 'view-group'>;
-    type AnyNode = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode | SequenceActorNode | SequenceParallelArea;
+    type AnyNode = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode | SequenceActorNode | SequenceParallelArea | SequenceSubflowArea;
     type NodeType = AnyNode['type'];
     type NodeData = ExclusiveUnion<{
         ElementNodeData: ElementNodeData;
@@ -105,6 +135,7 @@ export declare namespace Types {
         ViewGroupNodeData: ViewGroupNodeData;
         SequenceActorNodeData: SequenceActorNodeData;
         SequenceParallelAreaData: SequenceParallelAreaData;
+        SequenceSubflowAreaData: SequenceSubflowData;
     }>;
     type Node<Type extends NodeType = NodeType> = Extract<AnyNode, {
         type: Type;
@@ -115,8 +146,21 @@ export declare namespace Types {
         labelXY: XYPosition | null;
         isLabelCustomized?: boolean | undefined;
         controlPoints: XYPosition[] | undefined | null;
+        /**
+         * When dynamic view in "diagram" variant
+         * Edges are RelationshipEdgeData - stepnum is used to determine the step number
+         * (backward compatibility)
+         */
+        stepnum?: number;
     }>;
-    type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
+    type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
+        id: StepPath;
+        state?: 'processed' | 'active' | 'skipped' | 'pending' | null;
+        stepnum: number;
+        parentFlow: null | {
+            id: StepPath;
+            type: DynamicViewFlow.SubFlowType;
+        };
         notes: MarkdownOrString | null;
         labelXY: XYPosition | null;
         labelBBox: BBox;

package/dist/likec4diagram/ui/FloatingSequenceActors.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Shows sequence actors at the top of the diagram, if current viewport does not fit them
+ */
+export declare function FloatingSequenceActors({ isActiveWalkthrough }: {
+    isActiveWalkthrough: boolean;
+}): import("react").JSX.Element;