@likec4/diagram 1.58.0 → 1.59.0

package/dist/likec4diagram/state/machine.actions.layout.js

@@ -1,12 +1,21 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { MinZoom } from "../../base/const.js";
 import { calcEdgeBounds } from "../../utils/view-bounds.js";
-import { activeSequenceBounds, focusedBounds, viewBounds } from "./utils.js";
-import { machine } from "./machine.setup.js";
+import { activeSequenceBounds, focusedBounds, getEdgeBounds, viewBounds } from "./utils.js";
+import { isActiveSequenceWalkthrough, machine } from "./machine.setup.js";
 import { getNodesBounds, getViewportForBounds } from "@xyflow/react";
 import { BBox, invariant, isNonEmptyArray, nonNullable } from "@likec4/core";
 import { assertEvent } from "xstate";
 //#region src/likec4diagram/state/machine.actions.layout.ts
+var calcMaxZoom = (context, transform = [
+	0,
+	0,
+	1
+]) => {
+	const [, , zoom] = transform;
+	if (isActiveSequenceWalkthrough(context)) return Math.max(zoom, 1.4);
+	return Math.max(zoom, 1);
+};
 var setViewport = (params) => machine.createAction(({ context, event }) => {
 	let viewport;
 	let duration;
@@ -49,18 +58,16 @@ var centerOnNodeOrEdge = () => machine.raise(({ context, event }) => {
 	if ("edgeId" in event) {
 		const edge = xystate.edgeLookup.get(event.edgeId);
 		if (!edge) return { type: "noop" };
-		const sourceNode = xystate.nodeLookup.get(edge.source);
-		const targetNode = xystate.nodeLookup.get(edge.target);
-		if (!sourceNode || !targetNode) return { type: "noop" };
-		const bounds = getNodesBounds([sourceNode, targetNode], xystate);
-		const edgeBounds = calcEdgeBounds({
+		let bounds = calcEdgeBounds({
 			points: edge.data.points,
 			controlPoints: edge.data.controlPoints && isNonEmptyArray(edge.data.controlPoints) ? edge.data.controlPoints : null,
 			labelBBox: edge.data.labelBBox ?? null
 		});
+		const edgeBounds = getEdgeBounds(edge, xystate);
+		if (edgeBounds) bounds = BBox.merge(bounds, edgeBounds);
 		return {
 			type: "xyflow.fitDiagram",
-			bounds: BBox.merge(bounds, edgeBounds)
+			bounds
 		};
 	}
 	const node = xystate.nodeLookup.get(event.nodeId);
@@ -70,6 +77,26 @@ var centerOnNodeOrEdge = () => machine.raise(({ context, event }) => {
 		bounds: getNodesBounds([node], xystate)
 	};
 });
+function fitBoundsInViewport(context, bounds, duration) {
+	let { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
+	let left = void 0;
+	if (isActiveSequenceWalkthrough(context)) {
+		left = context.activeWalkthrough.outlinePanelWidth;
+		width -= left;
+	}
+	const maxZoom = calcMaxZoom(context, transform);
+	const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, context.fitViewPadding);
+	viewport.x = Math.round(viewport.x);
+	viewport.y = Math.round(viewport.y);
+	if (left !== void 0) viewport.x += left;
+	const animationProps = duration > 0 ? {
+		duration,
+		interpolate: "smooth"
+	} : void 0;
+	panZoom?.setViewport(viewport, animationProps).catch((err) => {
+		console.error("Error during fitDiagram panZoom setViewport", { err });
+	});
+}
 var fitDiagram = (params) => machine.createAction(({ context, event }) => {
 	let bounds;
 	let duration;
@@ -82,32 +109,12 @@ var fitDiagram = (params) => machine.createAction(({ context, event }) => {
 	}
 	bounds ??= viewBounds(context);
 	duration ??= 450;
-	const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
-	const maxZoom = Math.max(1, transform[2]);
-	const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, context.fitViewPadding);
-	viewport.x = Math.round(viewport.x);
-	viewport.y = Math.round(viewport.y);
-	const animationProps = duration > 0 ? {
-		duration,
-		interpolate: "smooth"
-	} : void 0;
-	panZoom?.setViewport(viewport, animationProps).catch((err) => {
-		console.error("Error during fitDiagram panZoom setViewport", { err });
-	});
+	fitBoundsInViewport(context, bounds, duration);
 });
-var fitFocusedBounds = () => machine.createAction(({ context }) => {
-	const { bounds, duration = 450 } = !!context.activeWalkthrough && context.dynamicViewVariant === "sequence" ? activeSequenceBounds({ context }) : focusedBounds({ context });
-	const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
-	const viewport = getViewportForBounds(bounds, width, height, MinZoom, Math.max(1, transform[2]), context.fitViewPadding);
-	viewport.x = Math.round(viewport.x);
-	viewport.y = Math.round(viewport.y);
-	const animationProps = duration > 0 ? {
-		duration,
-		interpolate: "smooth"
-	} : void 0;
-	panZoom?.setViewport(viewport, animationProps).catch((err) => {
-		console.error("Error during fitFocusedBounds panZoom setViewport", { err });
-	});
+var fitFocusedBounds = (params) => machine.createAction(({ context }) => {
+	let { bounds, duration = 450 } = !!context.activeWalkthrough ? activeSequenceBounds({ context }) : focusedBounds({ context });
+	duration = params?.duration ?? duration;
+	fitBoundsInViewport(context, bounds, duration);
 });
 var DEFAULT_DELAY = 30;
 var raiseSetViewport = (params) => {

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

@@ -1,23 +1,161 @@
-import { ActorRef, MachineSnapshot, StateMachine } from 'xstate';
-import { EditorActorRef } from '../../editor/actor/machine';
-import { OverlaysActorRef } from '../../overlays/overlaysActor';
-import { SearchActorRef } from '../../search/searchActor';
-import { Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, Events as DiagramEvents, Input } from './machine.setup';
-/**
- * Here is a trick to reduce inference types
- */
-export interface DiagramMachineLogic extends StateMachine<DiagramContext, DiagramEvents, {
+import { ActorRef, SnapshotFrom, StateValueFrom, StateMachine, ActorRefFromLogic, NonReducibleUnknown, MetaObject } from 'xstate';
+import { BaseEditorActorRef } from '../../editor/actor/setup';
+import { NavigationPanelActorRef, NavigationPanelActorLogic } from '../../navigationpanel/actor';
+import { OverlaysActorRef, OverlaysActorLogic } from '../../overlays/overlaysActor';
+import { SearchActorRef, SearchActorLogic } from '../../search/searchActor';
+import { BaseDiagramMachineLogic, EmittedEvents as DiagramEmittedEvents, Events as DiagramEvents, Context as DiagramContext, Input } from './machine.setup';
+import { HotkeyActorLogic } from './hotkeyActor';
+import { MediaPrintActorLogic } from './mediaPrintActor';
+import { EditorActorLogic } from '../../editor';
+declare const _diagramMachine: StateMachine<DiagramContext, DiagramEvents, {
+    search?: ActorRefFromLogic<SearchActorLogic>;
+    hotkey?: ActorRefFromLogic<HotkeyActorLogic>;
+    overlays?: ActorRefFromLogic<OverlaysActorLogic>;
+    mediaPrint?: ActorRefFromLogic<MediaPrintActorLogic>;
+    editor?: ActorRefFromLogic<EditorActorLogic>;
+    navigationPanel?: ActorRefFromLogic<NavigationPanelActorLogic>;
+}, {
+    src: "search";
+    logic: SearchActorLogic;
+    id: "search";
+} | {
+    src: "hotkey";
+    logic: HotkeyActorLogic;
+    id: "hotkey";
+} | {
+    src: "overlays";
+    logic: OverlaysActorLogic;
+    id: "overlays";
+} | {
+    src: "mediaPrint";
+    logic: MediaPrintActorLogic;
+    id: "mediaPrint";
+} | {
+    src: "editor";
+    logic: EditorActorLogic;
+    id: "editor";
+} | {
+    src: "navigationPanel";
+    logic: NavigationPanelActorLogic;
+    id: "navigationPanel";
+}, never, {
+    type: "isReady";
+    params: unknown;
+} | {
+    type: "enabled: Editor";
+    params: unknown;
+} | {
+    type: "enabled: FitView";
+    params: unknown;
+} | {
+    type: "enabled: FocusMode";
+    params: unknown;
+} | {
+    type: "enabled: Readonly";
+    params: unknown;
+} | {
+    type: "enabled: RelationshipDetails";
+    params: unknown;
+} | {
+    type: "enabled: Search";
+    params: unknown;
+} | {
+    type: "enabled: ElementDetails";
+    params: unknown;
+} | {
+    type: "enabled: OpenSource";
+    params: unknown;
+} | {
+    type: "enabled: DynamicViewWalkthrough";
+    params: unknown;
+} | {
+    type: "enabled: NavigationPanel";
+    params: unknown;
+} | {
+    type: "focus.node: autoUnfocus";
+    params: unknown;
+} | {
+    type: "enabled: Overlays";
+    params: unknown;
+} | {
+    type: "not readonly";
+    params: unknown;
+} | {
+    type: "is dynamic view";
+    params: unknown;
+} | {
+    type: "is dynamic view in sequence variant";
+    params: unknown;
+} | {
+    type: "is same view";
+    params: unknown;
+} | {
+    type: "is another view";
+    params: unknown;
+} | {
+    type: "click: node has modelFqn";
+    params: unknown;
+} | {
+    type: "click: selected node";
+    params: unknown;
+} | {
+    type: "click: same node";
+    params: unknown;
+} | {
+    type: "click: focused node";
+    params: unknown;
+} | {
+    type: "click: node.type = seq-subflow";
+    params: unknown;
+} | {
+    type: "click: node has connections";
+    params: unknown;
+} | {
+    type: "click: selected edge";
+    params: unknown;
+} | {
+    type: "click: active walkthrough step";
+    params: unknown;
+}, never, "final" | "isReady" | "navigating" | "initializing" | {
+    ready: "idle" | "walkthrough" | "focused" | "printing";
+}, string, Input, NonReducibleUnknown, DiagramEmittedEvents, MetaObject, {
+    states: {
+        readonly initializing: {};
+        readonly isReady: {};
+        readonly ready: {
+            states: {
+                idle: {
+                    id: string;
+                };
+                focused: {
+                    id: string;
+                };
+                walkthrough: {
+                    id: string;
+                };
+                printing: {
+                    id: string;
+                };
+            };
+        };
+        readonly navigating: {
+            id: string;
+        };
+        readonly final: {};
+    };
+}>;
+export interface DiagramMachineLogic extends BaseDiagramMachineLogic<{
     overlays: OverlaysActorRef | undefined;
     search: SearchActorRef | undefined;
-    editor: EditorActorRef | undefined;
-}, any, any, any, any, any, any, Input, any, any, any, any> {
+    editor: BaseEditorActorRef | undefined;
+    navigationPanel: NavigationPanelActorRef | undefined;
+}, StateValueFrom<typeof _diagramMachine>> {
 }
+/**
+ * Here is a trick to reduce inference types
+ */
 export declare const diagramMachine: DiagramMachineLogic;
-export type DiagramMachineSnapshot = MachineSnapshot<DiagramContext, DiagramEvents, {
-    overlays: OverlaysActorRef | undefined;
-    search: SearchActorRef | undefined;
-    editor: EditorActorRef | undefined;
-}, any, any, any, {}, {}>;
+export type DiagramMachineSnapshot = SnapshotFrom<DiagramMachineLogic>;
 export interface DiagramMachineRef extends ActorRef<DiagramMachineSnapshot, DiagramEvents, DiagramEmittedEvents> {
 }
 export type { DiagramContext, DiagramEmittedEvents, DiagramEvents, };

package/dist/likec4diagram/state/machine.js

@@ -1,55 +1,19 @@
 import "../../_virtual/_rolldown/runtime.js";
-import { DefaultFeatures } from "../../context/DiagramFeatures.js";
-import { machine } from "./machine.setup.js";
+import { Context, machine } from "./machine.setup.js";
 import { updateEdgeData, updateNodeData } from "./assign.js";
 import { cancelFitDiagram, raiseUpdateView } from "./machine.actions.layout.js";
 import { assignDynamicViewVariant, emitOnLayoutTypeChange, stopEditorActor, triggerChange, updateFeatures, updateInputs } from "./machine.actions.js";
 import { initializing, isReady } from "./machine.state.initializing.js";
 import { navigating } from "./machine.state.navigating.js";
 import { ready } from "./machine.state.ready.js";
-import { DiagramToggledFeaturesPersistence } from "./persistence.js";
 import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
 import { assign, stopChild } from "xstate/actions";
+/**
+* Here is a trick to reduce inference types
+*/
 var diagramMachine = machine.createMachine({
 	initial: "initializing",
-	context: ({ input }) => ({
-		...input,
-		xyedges: [],
-		xynodes: [],
-		features: {
-			...DefaultFeatures,
-			...input.features
-		},
-		toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
-			enableReadOnly: true,
-			enableCompareWithLatest: false
-		},
-		initialized: {
-			xydata: false,
-			xyflow: false
-		},
-		viewportChangedManually: false,
-		lastOnNavigate: null,
-		lastClickedNode: null,
-		focusedNode: null,
-		autoUnfocusTimer: false,
-		activeElementDetails: null,
-		viewportBefore: null,
-		viewportOnManualLayout: null,
-		viewportOnAutoLayout: null,
-		navigationHistory: {
-			currentIndex: 0,
-			history: []
-		},
-		viewport: {
-			x: 0,
-			y: 0,
-			zoom: 1
-		},
-		xyflow: null,
-		dynamicViewVariant: input.dynamicViewVariant ?? (input.view._type === "dynamic" ? input.view.variant : "diagram") ?? "diagram",
-		activeWalkthrough: null
-	}),
+	context: Context,
 	states: {
 		initializing,
 		isReady,

package/dist/likec4diagram/state/machine.setup.d.ts

@@ -1,8 +1,9 @@
 import { BBox } from '@likec4/core/geometry';
-import { DiagramEdge, DiagramNode, DiagramView, DynamicViewDisplayVariant, EdgeId, Fqn, LayoutType, NodeId, NodeNotation as ElementNotation, StepEdgeId, ViewChange, ViewId, WhereOperator } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, DiagramView, DynamicViewDisplayVariant, EdgeId, Fqn, LayoutedDynamicView, LayoutType, NodeId, NodeNotation as ElementNotation, StepPath, ViewChange, ViewId, WhereOperator } from '@likec4/core/types';
 import { EdgeChange, NodeChange, Rect, Viewport } from '@xyflow/system';
 import { MouseEvent } from 'react';
 import { PartialDeep } from 'type-fest';
+import { ActorRefFromLogic, StateMachine, StateValue, SetupReturn, NonReducibleUnknown, MetaObject } from 'xstate';
 import { EnabledFeatures, TogglableFeature } from '../../context/DiagramFeatures';
 import { XYFlowInstance, XYStoreApi } from '../../hooks/useXYFlow';
 import { OpenSourceParams, ViewPaddings } from '../../LikeC4Diagram.props';
@@ -10,10 +11,10 @@ import { Types } from '../types';
 import { AlignmentMode } from './aligners';
 import { HotKeyEvent, HotkeyActorLogic } from './hotkeyActor';
 import { MediaPrintEvent, MediaPrintActorLogic } from './mediaPrintActor';
-import { SetupReturn, NonReducibleUnknown, MetaObject } from 'xstate';
 import { OverlaysActorLogic } from '../../overlays/overlaysActor';
 import { SearchActorLogic } from '../../search/searchActor';
 import { EditorActorLogic } from '../../editor';
+import { NavigationPanelActorLogic } from '../../navigationpanel/actor';
 /**
  * Navigation history entry represents a current view state,
  * including viewport, focused node, dynamic view variant, etc.
@@ -28,7 +29,7 @@ export interface NavigationHistoryEntry {
     };
     focusedNode?: NodeId | null;
     dynamicViewVariant?: DynamicViewDisplayVariant | null;
-    activeWalkthrough?: null | StepEdgeId;
+    activeWalkthrough?: null | StepPath;
 }
 export interface NavigationHistory {
     history: ReadonlyArray<NavigationHistoryEntry>;
@@ -92,10 +93,17 @@ export interface Context extends Input {
     xyflow: XYFlowInstance | null;
     dynamicViewVariant: DynamicViewDisplayVariant;
     activeWalkthrough: null | {
-        stepId: StepEdgeId;
-        parallelPrefix: string | null;
+        stepId: StepPath;
+        activeFlow: StepPath | null;
+        outlinePanelWidth: number;
+    };
+    collapsedSequenceFlows: {
+        [flowId: StepPath]: boolean;
     };
 }
+export declare function Context({ input }: {
+    input: Input;
+}): Context;
 export type Events = HotKeyEvent | MediaPrintEvent | {
     type: 'xyflow.init';
     instance: XYFlowInstance;
@@ -124,10 +132,10 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
     type: 'xyflow.resized';
 } | {
     type: 'xyflow.nodeMouseEnter';
-    node: Types.Node;
+    node: Types.Node | NodeId;
 } | {
     type: 'xyflow.nodeMouseLeave';
-    node: Types.Node;
+    node: Types.Node | NodeId;
 } | {
     type: 'xyflow.edgeMouseEnter';
     edge: Types.Edge;
@@ -152,6 +160,8 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
     type: 'xyflow.centerViewport';
     edgeId: EdgeId;
     duration?: number;
+} | {
+    type: 'xyflow.resetSelection';
 } | {
     type: 'update.nodeData';
     nodeId: NodeId;
@@ -226,12 +236,28 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
     variant: DynamicViewDisplayVariant;
 } | {
     type: 'walkthrough.start';
-    stepId?: StepEdgeId;
+    stepId?: StepPath | undefined;
 } | {
     type: 'walkthrough.step';
-    direction: 'next' | 'previous';
+    direction: 'next' | 'prev';
+    stepId?: never;
+} | {
+    type: 'walkthrough.step';
+    stepId: StepPath;
+    direction?: never;
 } | {
     type: 'walkthrough.end';
+} | {
+    type: 'sequence.flow.collapse';
+    flowId: StepPath;
+} | {
+    type: 'sequence.flow.expand';
+    flowId: StepPath;
+} | {
+    type: 'sequence.flow.toggle';
+    flowId: StepPath;
+} | {
+    type: 'sequence.walkthrough.end';
 } | {
     type: 'highlight.node';
     nodeId: NodeId;
@@ -297,6 +323,7 @@ export type EmittedEvents = {
 } | {
     type: 'walkthroughStep';
     edge: Types.Edge;
+    stepId: StepPath;
 } | {
     type: 'walkthroughStopped';
 } | {
@@ -308,18 +335,35 @@ export type ActionArg = {
     event: Events;
 };
 export declare const deriveToggledFeatures: (context: Context) => Required<ToggledFeatures>;
+export declare function isActiveSequenceWalkthrough(context: Context): context is Context & {
+    view: LayoutedDynamicView & {
+        flow: NonNullable<LayoutedDynamicView['flow']>;
+    };
+    dynamicViewVariant: 'sequence';
+    activeWalkthrough: NonNullable<Context['activeWalkthrough']>;
+};
+declare const actors: {
+    hotkey: HotkeyActorLogic;
+    overlays: OverlaysActorLogic;
+    search: SearchActorLogic;
+    mediaPrint: MediaPrintActorLogic;
+    editor: EditorActorLogic;
+    navigationPanel: NavigationPanelActorLogic;
+};
 export declare const machine: SetupReturn<Context, Events, {
-    hotkeyActorLogic: HotkeyActorLogic;
-    overlaysActorLogic: OverlaysActorLogic;
-    searchActorLogic: SearchActorLogic;
-    mediaPrintActorLogic: MediaPrintActorLogic;
-    editorActor: EditorActorLogic;
+    hotkey: HotkeyActorLogic;
+    overlays: OverlaysActorLogic;
+    search: SearchActorLogic;
+    mediaPrint: MediaPrintActorLogic;
+    editor: EditorActorLogic;
+    navigationPanel: NavigationPanelActorLogic;
 }, {
-    hotkey: "hotkeyActorLogic";
-    overlays: "overlaysActorLogic";
-    search: "searchActorLogic";
-    mediaPrint: "mediaPrintActorLogic";
-    editor: "editorActor";
+    hotkey: "hotkey";
+    overlays: "overlays";
+    search: "search";
+    mediaPrint: "mediaPrint";
+    editor: "editor";
+    navigationPanel: "navigationPanel";
 }, {}, {
     isReady: unknown;
     'enabled: Editor': unknown;
@@ -331,20 +375,40 @@ export declare const machine: SetupReturn<Context, Events, {
     'enabled: ElementDetails': unknown;
     'enabled: OpenSource': unknown;
     'enabled: DynamicViewWalkthrough': unknown;
+    'enabled: NavigationPanel': unknown;
     'focus.node: autoUnfocus': unknown;
     'enabled: Overlays': unknown;
     'not readonly': unknown;
     'is dynamic view': unknown;
+    'is dynamic view in sequence variant': unknown;
     'is same view': unknown;
     'is another view': unknown;
     'click: node has modelFqn': unknown;
     'click: selected node': unknown;
     'click: same node': unknown;
     'click: focused node': unknown;
+    'click: node.type = seq-subflow': unknown;
     'click: node has connections': unknown;
     'click: selected edge': unknown;
     'click: active walkthrough step': unknown;
 }, never, string, Input, NonReducibleUnknown, EmittedEvents, MetaObject>;
+type ChildrenActors = typeof actors;
+type ActorLogicMap = {
+    [K in keyof ChildrenActors]: ActorRefFromLogic<ChildrenActors[K]> | undefined;
+};
+type ChildrenActor = {
+    [K in keyof ChildrenActors]: {
+        id: K;
+        logic: ChildrenActors[K];
+        src: K;
+    };
+}[keyof ChildrenActors];
+/**
+ * Here is a trick to reduce inference types
+ */
+export interface BaseDiagramMachineLogic<Actors extends Partial<ActorLogicMap> = ActorLogicMap, State extends StateValue = never> extends StateMachine<Context, Events, Actors & Omit<ActorLogicMap, keyof Actors>, ChildrenActor, never, never, never, State, never, Input, never, EmittedEvents, never, never> {
+}
+export type BaseDiagramActorRef = ActorRefFromLogic<BaseDiagramMachineLogic>;
 export declare const targetState: {
     idle: string;
     focused: string;
@@ -369,3 +433,4 @@ export declare const to: {
         target: string;
     };
 };
+export {};

package/dist/likec4diagram/state/machine.setup.js

@@ -1,14 +1,59 @@
 import "../../_virtual/_rolldown/runtime.js";
+import { DefaultFeatures } from "../../context/DiagramFeatures.js";
+import { defineActors } from "../../utils/defineActors.js";
 import { editorActorLogic } from "../../editor/actor/machine.js";
+import { navigationPanelActorLogic } from "../../navigationpanel/actor.js";
 import { overlaysActorLogic } from "../../overlays/overlaysActor.js";
 import { searchActorLogic } from "../../search/searchActor.js";
 import { hotkeyActorLogic } from "./hotkeyActor.js";
 import { mediaPrintActorLogic } from "./mediaPrintActor.js";
+import { DiagramToggledFeaturesPersistence } from "./persistence.js";
 import { isTruthy, mapValues } from "remeda";
-import { nonexhaustive } from "@likec4/core";
+import { hasProp, isDynamicView, nonexhaustive } from "@likec4/core";
 import "@likec4/core/geometry";
 import { assertEvent, setup } from "xstate";
 //#region src/likec4diagram/state/machine.setup.ts
+function Context({ input }) {
+	return {
+		...input,
+		xynodes: [],
+		xyedges: [],
+		features: {
+			...DefaultFeatures,
+			...input.features
+		},
+		toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
+			enableReadOnly: true,
+			enableCompareWithLatest: false
+		},
+		initialized: {
+			xydata: false,
+			xyflow: false
+		},
+		viewportChangedManually: false,
+		lastOnNavigate: null,
+		lastClickedNode: null,
+		focusedNode: null,
+		autoUnfocusTimer: false,
+		activeElementDetails: null,
+		viewportBefore: null,
+		viewportOnManualLayout: null,
+		viewportOnAutoLayout: null,
+		navigationHistory: {
+			currentIndex: 0,
+			history: []
+		},
+		viewport: {
+			x: 0,
+			y: 0,
+			zoom: 1
+		},
+		xyflow: null,
+		dynamicViewVariant: input.dynamicViewVariant ?? (input.view._type === "dynamic" ? input.view.variant : "diagram") ?? "diagram",
+		activeWalkthrough: null,
+		collapsedSequenceFlows: {}
+	};
+}
 var deriveToggledFeatures = (context) => {
 	let toggledFeatures = context.toggledFeatures;
 	const hasActiveWalkthrough = isTruthy(context.activeWalkthrough);
@@ -19,6 +64,9 @@ var deriveToggledFeatures = (context) => {
 	};
 };
 var isReadOnly = (context) => deriveToggledFeatures(context).enableReadOnly;
+function isActiveSequenceWalkthrough(context) {
+	return isDynamicView(context.view) && context.dynamicViewVariant === "sequence" && !!context.activeWalkthrough && hasProp(context.view, "flow");
+}
 var machine = setup({
 	types: {
 		context: {},
@@ -27,13 +75,14 @@ var machine = setup({
 		events: {},
 		emitted: {}
 	},
-	actors: {
-		hotkeyActorLogic,
-		overlaysActorLogic,
-		searchActorLogic,
-		mediaPrintActorLogic,
-		editorActor: editorActorLogic
-	},
+	actors: defineActors({
+		hotkey: hotkeyActorLogic,
+		overlays: overlaysActorLogic,
+		search: searchActorLogic,
+		mediaPrint: mediaPrintActorLogic,
+		editor: editorActorLogic,
+		navigationPanel: navigationPanelActorLogic
+	}),
 	guards: {
 		"isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
 		"enabled: Editor": ({ context }) => context.features.enableEditor,
@@ -45,6 +94,7 @@ var machine = setup({
 		"enabled: ElementDetails": ({ context }) => context.features.enableElementDetails,
 		"enabled: OpenSource": ({ context }) => context.features.enableVscode,
 		"enabled: DynamicViewWalkthrough": ({ context }) => context.features.enableDynamicViewWalkthrough,
+		"enabled: NavigationPanel": ({ context }) => context.features.enableControls,
 		"focus.node: autoUnfocus": ({ event }) => {
 			assertEvent(event, "focus.node");
 			return event.autoUnfocus === true;
@@ -52,6 +102,7 @@ var machine = setup({
 		"enabled: Overlays": ({ context }) => context.features.enableElementDetails || context.features.enableRelationshipBrowser || context.features.enableRelationshipDetails,
 		"not readonly": ({ context }) => !isReadOnly(context),
 		"is dynamic view": ({ context }) => context.view._type === "dynamic",
+		"is dynamic view in sequence variant": ({ context }) => context.view._type === "dynamic" && context.dynamicViewVariant === "sequence",
 		"is same view": ({ context, event }) => {
 			assertEvent(event, ["update.view", "navigate.to"]);
 			if (event.type === "update.view") return context.view.id === event.view.id;
@@ -80,6 +131,10 @@ var machine = setup({
 			assertEvent(event, "xyflow.nodeClick");
 			return context.focusedNode === event.node.id;
 		},
+		"click: node.type = seq-subflow": ({ event }) => {
+			assertEvent(event, "xyflow.nodeClick");
+			return event.node.type === "seq-subflow";
+		},
 		"click: node has connections": ({ context, event }) => {
 			assertEvent(event, "xyflow.nodeClick");
 			return context.xyedges.some((e) => e.source === event.node.id || e.target === event.node.id);
@@ -90,9 +145,7 @@ var machine = setup({
 		},
 		"click: active walkthrough step": ({ context, event }) => {
 			assertEvent(event, ["xyflow.edgeClick", "xyflow.edgeDoubleClick"]);
-			if (!context.activeWalkthrough) return false;
-			const { stepId } = context.activeWalkthrough;
-			return event.edge.id === stepId;
+			return event.edge.data.id === context.activeWalkthrough?.stepId;
 		}
 	}
 });
@@ -105,4 +158,4 @@ var targetState = {
 };
 var to = mapValues(targetState, (id) => ({ target: id }));
 //#endregion
-export { deriveToggledFeatures, machine, targetState, to };
+export { Context, deriveToggledFeatures, isActiveSequenceWalkthrough, machine, targetState, to };