@likec4/diagram 1.58.0 → 1.59.1

package/dist/likec4diagram/xyflow-sequence/{sequence-layout.js → sequence-view-to-xy.js}

@@ -1,30 +1,49 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { SeqParallelAreaColor, SeqZIndex } from "./const.js";
+import { calcSequenceLayout } from "./sequence-view.js";
+import { entries, filter, first, identity, isArray, isEmptyish, isTruthy, map, pipe, piped } from "remeda";
 import { nonNullable } from "@likec4/core";
-//#region src/likec4diagram/xyflow-sequence/sequence-layout.ts
+import { NodeId, dynamicViewFlow as dynamicViewFlow$1, hasProp as hasProp$1 } from "@likec4/core/types";
+//#region src/likec4diagram/xyflow-sequence/sequence-view-to-xy.ts
+var calcCollapsedFlows = piped(identity(), entries(), filter(([_, collapsed]) => collapsed), map(([flowId]) => flowId));
 /**
 * Converts a sequence layout to XY flow nodes and edges.
 * @param view The next dynamic view which contains the sequence layout.
 * @param currentViewId The ID of the current view (optional, used to exclude navigation to the current view)
 */
-function sequenceLayoutToXY(view, currentViewId) {
-	const { actors, steps, compounds, parallelAreas, bounds } = view.sequenceLayout;
+function sequenceLayoutToXY({ view, currentViewId, collapsedFlows }) {
+	const flow = hasProp$1(view, "flow") ? dynamicViewFlow$1(view) : void 0;
+	const layout = flow && !isEmptyish(collapsedFlows) ? calcSequenceLayout(view, flow, calcCollapsedFlows(collapsedFlows)) : view.sequenceLayout;
+	const ctx = {
+		view,
+		flow,
+		layout,
+		collapsedFlows,
+		subflowArea: (id) => layout.subflows.find((area) => area.id === id)
+	};
+	const { actors, steps, compounds, parallelAreas, subflows, bounds } = ctx.layout;
 	const xynodes = [];
 	const xyedges = [];
 	const getNode = (id) => {
 		return nonNullable(view.nodes.find((n) => n.id === id));
 	};
 	for (const compound of compounds) xynodes.push(toCompoundArea(compound, getNode(compound.origin), view));
-	for (const parallelArea of parallelAreas) xynodes.push(toSeqParallelArea(parallelArea, view));
+	if (isArray(subflows) && hasProp$1(ctx, "flow")) xynodes.push(...createSubflowNodes(ctx));
+	else for (const parallelArea of parallelAreas) xynodes.push(toSeqParallelArea(parallelArea, view));
 	for (const actor of actors) xynodes.push(toSeqActorNode(actor, getNode(actor.id), bounds, view));
+	let stepnum = 1;
 	for (const step of steps) {
 		const edge = view.edges.find((e) => e.id === step.id);
-		if (!edge) throw new Error(`Edge ${step.id} not found`);
-		xyedges.push(toSeqStepEdge(step, edge, currentViewId ?? view.id));
+		if (!edge) {
+			console.error(`Step Edge "${step.id}" not found`);
+			continue;
+		}
+		xyedges.push(toSeqStepEdge(step, edge, currentViewId ?? view.id, stepnum++, ctx));
 	}
 	return {
 		xynodes,
-		xyedges
+		xyedges,
+		layout
 	};
 }
 /**
@@ -50,6 +69,7 @@ function toCompoundArea({ id, x, y, width, height, depth }, node, view) {
 			viewLayoutDir: "LR",
 			notes: void 0
 		},
+		zIndex: SeqZIndex.compound,
 		position: {
 			x,
 			y
@@ -89,7 +109,7 @@ function toSeqParallelArea({ parallelPrefix, x, y, width, height }, view) {
 			viewLayoutDir: "LR",
 			notes: void 0
 		},
-		zIndex: SeqZIndex.parallel,
+		zIndex: SeqZIndex.subflows,
 		position: {
 			x,
 			y
@@ -135,7 +155,6 @@ function toSeqActorNode({ id, x, y, width, height, ports }, actor, bounds, view)
 			viewLayoutDir: "LR"
 		},
 		deletable: false,
-		selectable: true,
 		zIndex: SeqZIndex.actor,
 		position: {
 			x,
@@ -147,7 +166,8 @@ function toSeqActorNode({ id, x, y, width, height, ports }, actor, bounds, view)
 		initialHeight: height
 	};
 }
-function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle }, edge, currentViewId) {
+function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle, hidden }, edge, currentViewId, stepnum, { flow }) {
+	let parent = flow?.parent(id);
 	return {
 		id,
 		type: "seq-step",
@@ -164,6 +184,7 @@ function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle }, edge, curr
 				width: labelBBox?.width ?? edge.labelBBox?.width ?? 32,
 				height: labelBBox?.height ?? edge.labelBBox?.height ?? 32
 			},
+			stepnum,
 			labelXY: null,
 			points: edge.points,
 			color: edge.color,
@@ -172,18 +193,94 @@ function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle }, edge, curr
 			head: edge.head ?? "normal",
 			tail: edge.tail ?? "none",
 			astPath: edge.astPath,
-			drifts: edge.drifts ?? null
+			drifts: edge.drifts ?? null,
+			parentFlow: parent ? {
+				id: parent.id,
+				type: parent._type
+			} : null
 		},
 		deletable: false,
-		selectable: true,
 		focusable: false,
-		zIndex: 20,
-		interactionWidth: 40,
+		hidden: hidden ?? false,
+		zIndex: SeqZIndex.step,
+		interactionWidth: 50,
 		source: edge.source,
 		sourceHandle,
 		target: edge.target,
 		targetHandle
 	};
 }
+function createSubflowNodes(ctx) {
+	const nodes = [];
+	let lastLeftNode = void 0;
+	ctx.flow.walk({ subflow: ({ subflow, previous, parent: _parent }) => {
+		const area = ctx.subflowArea(subflow.id);
+		if (!area) return false;
+		const node = createSubflowNode(area, subflow, ctx);
+		if (!previous) node.data.isFirst = true;
+		nodes.push(node);
+		return {
+			next: ctx.flow.subflows(subflow),
+			onLeave: ({ lastVisited }) => {
+				const nd = ctx.flow.guards.isSubFlow(lastVisited) && nodes.find((n) => n.data.flowId === lastVisited.id);
+				if (nd) nd.data.isLast = true;
+				lastLeftNode = node;
+			}
+		};
+	} });
+	if (lastLeftNode) lastLeftNode.data.isLast = true;
+	return nodes;
+}
+function createSubflowNode(area, subflow, ctx) {
+	const { x, y, width, height } = area;
+	const id = NodeId(subflow.id);
+	const level = ctx.flow.level(subflow.id);
+	const flowData = ctx.flow.guards.isAltOrTry(subflow) ? composeAltTryData(area, subflow, ctx) : { flowType: subflow._type };
+	return {
+		id,
+		type: "seq-subflow",
+		data: {
+			id,
+			flowId: subflow.id,
+			title: subflow.title ?? "",
+			technology: null,
+			color: SeqParallelAreaColor.default,
+			shape: "rectangle",
+			style: {},
+			tags: [],
+			x,
+			y,
+			level,
+			icon: null,
+			width,
+			height,
+			description: null,
+			viewId: ctx.view.id,
+			drifts: null,
+			notes: void 0,
+			collapsed: ctx.collapsedFlows[subflow.id] ?? false,
+			...flowData
+		},
+		zIndex: SeqZIndex.subflows + level,
+		position: {
+			x,
+			y
+		},
+		draggable: false,
+		deletable: false,
+		focusable: false,
+		width,
+		initialWidth: width,
+		height,
+		initialHeight: height
+	};
+}
+function composeAltTryData(parent, subflow, { flow, subflowArea }) {
+	const firstBranch = pipe(flow.subflows(subflow), map(({ id }) => subflowArea(id)), filter(isTruthy), first());
+	return {
+		flowType: subflow._type,
+		headerHeight: firstBranch ? firstBranch.y - parent.y : 20
+	};
+}
 //#endregion
 export { sequenceLayoutToXY };

package/dist/likec4diagram/xyflow-sequence/sequence-view.d.ts

@@ -1,7 +1,2 @@
-import { BBox, LayoutedDynamicView } from '@likec4/core/types';
-import { Types } from '../types';
-export declare function sequenceViewToXY(view: LayoutedDynamicView): {
-    bounds: BBox;
-    xynodes: Array<Types.SequenceActorNode | Types.SequenceParallelArea | Types.ViewGroupNode>;
-    xyedges: Array<Types.SequenceStepEdge>;
-};
+import { DynamicViewFlow, LayoutedDynamicView, StepPath } from '@likec4/core/types';
+export declare function calcSequenceLayout(view: LayoutedDynamicView, flow: DynamicViewFlow, collapsedFlows?: StepPath[]): LayoutedDynamicView.Sequence.Layout;

package/dist/likec4diagram/xyflow-sequence/sequence-view.js

@@ -0,0 +1,144 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { buildCompounds } from "./utils.js";
+import { SequenceViewLayouter } from "./layouter.js";
+import { flat, groupByProp, hasAtLeast, map, mapValues, pipe, values } from "remeda";
+import { DefaultMap, invariant, nonNullable } from "@likec4/core/utils";
+import { parentFlow } from "@likec4/core/types";
+//#region src/likec4diagram/xyflow-sequence/sequence-view.ts
+function calcSequenceLayout(view, flow, collapsedFlows = []) {
+	const actorNodes = /* @__PURE__ */ new Set();
+	const getNode = (id) => nonNullable(view.nodes.find((n) => n.id === id));
+	const preparedSteps = [];
+	for (const edge of view.edges) {
+		const source = getNode(edge.source);
+		const target = getNode(edge.target);
+		if (source.children.length || target.children.length) {
+			console.error("Sequence view does not support nested actors");
+			continue;
+		}
+		actorNodes.add(source);
+		actorNodes.add(target);
+		preparedSteps.push({
+			edge,
+			source,
+			target
+		});
+	}
+	const actors = view.nodes.filter((n) => actorNodes.has(n));
+	invariant(hasAtLeast(actors, 1), "actors array must not be empty");
+	const actorPorts = new DefaultMap(() => []);
+	const steps = [];
+	let row = 0;
+	let prevStep;
+	for (const { edge, source, target } of preparedSteps) {
+		let sourceColumn = actors.indexOf(source);
+		let targetColumn = actors.indexOf(target);
+		const isSelfLoop = source === target;
+		const isBack = sourceColumn > targetColumn;
+		const parent = parentFlow(edge.id);
+		let isContinuing = false;
+		if (prevStep && prevStep.target == source && prevStep.parent === parent) isContinuing = prevStep.isSelfLoop !== isSelfLoop || prevStep.isBack === isBack;
+		if (!isContinuing && prevStep) row++;
+		const step = {
+			id: edge.id,
+			from: {
+				column: sourceColumn,
+				row
+			},
+			to: {
+				column: targetColumn,
+				row: isSelfLoop ? ++row : row
+			},
+			edge,
+			isSelfLoop,
+			isBack,
+			parent,
+			offset: isContinuing ? (prevStep?.offset ?? 0) + 22 : 0,
+			source,
+			target,
+			label: edge.labelBBox ? {
+				height: edge.labelBBox.height + 8 + (edge.navigateTo ? 20 : 0),
+				width: edge.labelBBox.width + 16,
+				text: edge.label
+			} : null
+		};
+		steps.push(step);
+		actorPorts.get(source).push({
+			step,
+			row,
+			type: "source",
+			position: isBack && !isSelfLoop ? "left" : "right"
+		});
+		actorPorts.get(target).push({
+			step,
+			row,
+			type: "target",
+			position: isBack || isSelfLoop ? "right" : "left"
+		});
+		prevStep = step;
+	}
+	const layout = new SequenceViewLayouter({
+		actors,
+		steps,
+		compounds: buildCompounds(actors, view.nodes),
+		flow,
+		collapsedFlows
+	});
+	const bounds = layout.getViewBounds();
+	const compounds = pipe(layout.getCompoundBoxes(), map(({ node, ...box }) => ({
+		...box,
+		id: node.id,
+		origin: node.id
+	})), groupByProp("id"), mapValues((boxes, id) => {
+		if (hasAtLeast(boxes, 2)) return map(boxes, (box, i) => ({
+			...box,
+			id: `${id}-${i + 1}`
+		}));
+		return boxes;
+	}), values(), flat());
+	return {
+		actors: actors.map((actor) => toSeqActor({
+			actor,
+			ports: actorPorts.get(actor),
+			layout
+		})),
+		compounds,
+		steps: map(steps, (s) => ({
+			id: s.id,
+			sourceHandle: s.id + "_source",
+			targetHandle: s.id + "_target",
+			...s.label && { labelBBox: {
+				width: s.label.width,
+				height: s.label.height
+			} },
+			hidden: layout.isStepCollapsed(s)
+		})),
+		parallelAreas: [],
+		subflows: layout.getSubflowAreas(),
+		bounds
+	};
+}
+function toSeqActor({ actor, ports, layout }) {
+	const { x, y, width, height } = layout.getActorBox(actor);
+	return {
+		id: actor.id,
+		x,
+		y,
+		width,
+		height,
+		ports: ports.map((p) => {
+			const bbox = layout.getPortCenter(p.step, p.type);
+			return {
+				id: `${p.step.id}_${p.type}`,
+				cx: bbox.cx - x,
+				cy: bbox.cy - y,
+				height: bbox.height,
+				type: p.type,
+				position: p.position,
+				hidden: layout.isStepCollapsed(p.step)
+			};
+		})
+	};
+}
+//#endregion
+export { calcSequenceLayout };

package/dist/likec4diagram/xyflow-sequence/utils.d.ts

@@ -1,5 +1,13 @@
 import { DiagramNode } from '@likec4/core/types';
-import { Compound, ParallelRect, Step } from './_types';
+import { Compound, ParallelRect, Rect, Spacing, Step } from './_types';
+export type NormalizedSpacing = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+export declare function normalizeSpacing(padding?: Spacing | number): NormalizedSpacing;
+export declare function rectFromSteps(steps: Array<Step>): Rect;
 /**
  * From steps find boxes that must be marked as parallel on the layout
  */

package/dist/likec4diagram/xyflow-sequence/utils.js

@@ -0,0 +1,96 @@
+import "../../_virtual/_rolldown/runtime.js";
+import "remeda";
+import { Stack, invariant, isAncestor } from "@likec4/core/utils";
+import "@likec4/core/types";
+//#region src/likec4diagram/xyflow-sequence/utils.ts
+var paddingFromNumber = (spacing) => ({
+	left: spacing,
+	right: spacing,
+	top: spacing,
+	bottom: spacing
+});
+function normalizeSpacing(padding = 16) {
+	if (typeof padding === "number") return paddingFromNumber(padding);
+	return {
+		left: padding?.left ?? padding?.x ?? 0,
+		right: padding?.right ?? padding?.x ?? 0,
+		top: padding?.top ?? padding?.y ?? 0,
+		bottom: padding?.bottom ?? padding?.y ?? 0
+	};
+}
+function rectFromSteps(steps) {
+	invariant(steps.length > 0);
+	return steps.reduce((acc, step) => {
+		const columns = [step.from.column, step.to.column];
+		const rows = [step.from.row, step.to.row];
+		acc.min.column = Math.min(acc.min.column, ...columns);
+		acc.min.row = Math.min(acc.min.row, ...rows);
+		acc.max.column = Math.max(acc.max.column, ...columns);
+		acc.max.row = Math.max(acc.max.row, ...rows);
+		return acc;
+	}, {
+		min: {
+			column: Infinity,
+			row: Infinity
+		},
+		max: {
+			column: -Infinity,
+			row: -Infinity
+		}
+	});
+}
+/**
+* Builds a tree of compounds from actors and nodes.
+* @param actors the actors in the sequence view
+* @param nodes the nodes in likec4 diagram
+* @returns an array of compounds where each compound is a node in the sequence view
+* that is an ancestor of one of the actors
+*/
+function buildCompounds(actors, nodes) {
+	if (actors.length === 0 || actors.length === nodes.length) return [];
+	const getNode = (id) => nodes.find((n) => n.id === id);
+	function parentsLookup(node) {
+		const parent = node.parent && getNode(node.parent);
+		if (parent) return [parent, ...parentsLookup(parent)];
+		return [];
+	}
+	const stack = new Stack();
+	const result = [];
+	actors.forEach((actor) => {
+		const parents = parentsLookup(actor);
+		if (parents.length === 0) {
+			stack.clear();
+			return;
+		}
+		let head;
+		let parent = parents[0];
+		while (head = stack.peek()?.node) {
+			if (!parent || head.id === parent.id) {
+				parents.length = 0;
+				break;
+			}
+			if (!isAncestor(head.id, parent.id)) {
+				stack.pop();
+				continue;
+			}
+			break;
+		}
+		while (head = parents.pop()) {
+			let compound = stack.peek();
+			if (compound && (isAncestor(head.id, compound.node.id) || head.id === compound.node.id)) continue;
+			const parentAsCompound = {
+				node: head,
+				from: actor,
+				to: actor,
+				nested: []
+			};
+			if (!compound) result.push(parentAsCompound);
+			else compound.nested.push(parentAsCompound);
+			stack.push(parentAsCompound);
+		}
+		stack.forEach((c) => c.to = actor);
+	});
+	return result;
+}
+//#endregion
+export { buildCompounds, normalizeSpacing, rectFromSteps };

package/dist/navigationpanel/NavigationPanel.d.ts

@@ -1,2 +1,5 @@
-import { MemoExoticComponent } from 'react';
-export declare const NavigationPanel: MemoExoticComponent<() => import("react").JSX.Element>;
+import { NavigationPanelActorRef } from './actor';
+import { NamedExoticComponent } from 'react';
+export declare const NavigationPanel: NamedExoticComponent<{
+    actorRef: NavigationPanelActorRef;
+}>;

package/dist/navigationpanel/NavigationPanel.js

@@ -1,10 +1,7 @@
 import "../_virtual/_rolldown/runtime.js";
-import { useDiagram } from "../hooks/safeContext.js";
-import { useDiagramContext } from "../hooks/useDiagram.js";
-import { useCurrentView } from "../hooks/useCurrentView.js";
+import { selectDiagramContext, useDiagramSelector } from "../hooks/safeContext.js";
 import { useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.js";
 import { useMantinePortalProps } from "../hooks/useMantinePortalProps.js";
-import { navigationPanelActorLogic } from "./actor.js";
 import { ComparePanel } from "./comparepanel/ComparePanel.js";
 import { EditorPanel } from "./editorpanel/EditorPanel.js";
 import { NavigationPanelActorContextProvider } from "./hooks.js";
@@ -13,28 +10,35 @@ import { NavigationPanelControls } from "./NavigationPanelControls.js";
 import { NavigationPanelDropdown } from "./NavigationPanelDropdown.js";
 import { WalkthroughPanel } from "./walkthrough/WalkthroughPanel.js";
 import { memo, useEffect } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Popover, PopoverTarget } from "@mantine/core";
 import { AnimatePresence, LayoutGroup } from "motion/react";
-import { useActorRef, useSelector } from "@xstate/react";
+import { useSelector } from "@xstate/react";
 import { VStack } from "@likec4/styles/jsx";
+import { hasProp, isDynamicView } from "@likec4/core/types";
 import { hstack } from "@likec4/styles/patterns";
 import * as m$1 from "motion/react-m";
 //#region src/navigationpanel/NavigationPanel.tsx
-var NavigationPanel = memo(() => {
-	const diagram = useDiagram();
-	const view = useCurrentView();
+var select = selectDiagramContext((s) => {
+	const isActiveWalkthrough = !!s.activeWalkthrough;
+	if (isDynamicView(s.view) && isActiveWalkthrough) {
+		const isSequenceView = s.dynamicViewVariant === "sequence";
+		return {
+			view: s.view,
+			mode: isSequenceView && hasProp(s.view, "flow") ? "walkthrough-flow" : "walkthrough"
+		};
+	}
+	return {
+		view: s.view,
+		mode: "default"
+	};
+});
+var stateHasActiveTag = (state) => state.hasTag("active");
+var NavigationPanel = memo(({ actorRef }) => {
+	const { view, mode } = useDiagramSelector(select);
 	const viewModel = useOptionalCurrentViewModel();
-	const actorRef = useActorRef(navigationPanelActorLogic, { input: {
-		view,
-		viewModel
-	} });
-	useEffect(() => {
-		const subscription = actorRef.on("navigateTo", (event) => {
-			diagram.navigateTo(event.viewId);
-		});
-		return () => subscription.unsubscribe();
-	}, [actorRef, diagram]);
+	const opened = useSelector(actorRef, stateHasActiveTag);
+	const portalProps = useMantinePortalProps();
 	useEffect(() => {
 		actorRef.send({
 			type: "update.inputs",
@@ -67,52 +71,47 @@ var NavigationPanel = memo(() => {
 			},
 			_print: { display: "none" }
 		},
-		children: /* @__PURE__ */ jsxs(NavigationPanelActorContextProvider, {
+		children: /* @__PURE__ */ jsx(NavigationPanelActorContextProvider, {
 			value: actorRef,
-			children: [
-				/* @__PURE__ */ jsx(NavigationPanelImpl, { actor: actorRef }),
+			children: mode !== "walkthrough-flow" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs(Popover, {
+					offset: { mainAxis: 4 },
+					opened,
+					position: "bottom-start",
+					trapFocus: opened,
+					...portalProps,
+					clickOutsideEvents: [
+						"pointerdown",
+						"mousedown",
+						"click"
+					],
+					onDismiss: () => actorRef.send({ type: "dropdown.dismiss" }),
+					children: [/* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(m$1.div, {
+						layout: true,
+						layoutDependency: mode,
+						className: hstack({
+							layerStyle: "likec4.panel",
+							position: "relative",
+							gap: "xs",
+							cursor: "pointer",
+							pointerEvents: "all",
+							width: "100%"
+						}),
+						onMouseLeave: () => actorRef.send({ type: "breadcrumbs.mouseLeave" }),
+						children: /* @__PURE__ */ jsx(AnimatePresence, {
+							propagate: true,
+							initial: false,
+							children: mode === "walkthrough" ? /* @__PURE__ */ jsx(ActiveWalkthroughControls, {}) : /* @__PURE__ */ jsx(NavigationPanelControls, {})
+						})
+					}) }) }), opened && /* @__PURE__ */ jsx(NavigationPanelDropdown, {})]
+				}),
 				/* @__PURE__ */ jsx(ComparePanel, {}),
-				/* @__PURE__ */ jsx(WalkthroughPanel, {}),
+				mode === "walkthrough" && /* @__PURE__ */ jsx(WalkthroughPanel, {}),
 				/* @__PURE__ */ jsx(EditorPanel, {})
-			]
+			] })
 		})
 	});
 });
 NavigationPanel.displayName = "NavigationPanel";
-var stateHasActiveTag = (state) => state.hasTag("active");
-var NavigationPanelImpl = ({ actor }) => {
-	const opened = useSelector(actor, stateHasActiveTag);
-	return /* @__PURE__ */ jsxs(Popover, {
-		offset: { mainAxis: 4 },
-		opened,
-		position: "bottom-start",
-		trapFocus: opened,
-		...useMantinePortalProps(),
-		clickOutsideEvents: [
-			"pointerdown",
-			"mousedown",
-			"click"
-		],
-		onDismiss: () => actor.send({ type: "dropdown.dismiss" }),
-		children: [/* @__PURE__ */ jsx(NavigationPanelPopoverTarget, { actor }), opened && /* @__PURE__ */ jsx(NavigationPanelDropdown, {})]
-	});
-};
-var NavigationPanelPopoverTarget = ({ actor }) => {
-	const isActiveWalkthrough = useDiagramContext((c) => c.activeWalkthrough !== null);
-	return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(m$1.div, {
-		layout: true,
-		layoutDependency: isActiveWalkthrough,
-		className: hstack({
-			layerStyle: "likec4.panel",
-			position: "relative",
-			gap: "xs",
-			cursor: "pointer",
-			pointerEvents: "all",
-			width: "100%"
-		}),
-		onMouseLeave: () => actor.send({ type: "breadcrumbs.mouseLeave" }),
-		children: /* @__PURE__ */ jsx(AnimatePresence, { children: isActiveWalkthrough ? /* @__PURE__ */ jsx(ActiveWalkthroughControls, {}) : /* @__PURE__ */ jsx(NavigationPanelControls, {}) })
-	}) }) });
-};
 //#endregion
 export { NavigationPanel };