@likec4/diagram 1.59.4 → 1.61.0

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

@@ -1,287 +0,0 @@
-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";
-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, 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));
-	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) {
-			console.error(`Step Edge "${step.id}" not found`);
-			continue;
-		}
-		xyedges.push(toSeqStepEdge(step, edge, currentViewId ?? view.id, stepnum++, ctx));
-	}
-	return {
-		xynodes,
-		xyedges,
-		layout
-	};
-}
-/**
-* Shows a compound as a view group node
-*/
-function toCompoundArea({ id, x, y, width, height, depth }, node, view) {
-	return {
-		id,
-		type: "view-group",
-		data: {
-			id: node.id,
-			title: node.title,
-			color: node.color ?? "gray",
-			shape: node.shape,
-			style: node.style,
-			tags: node.tags,
-			x,
-			y,
-			viewId: view.id,
-			depth,
-			isViewGroup: true,
-			drifts: node.drifts ?? null,
-			viewLayoutDir: "LR",
-			notes: void 0
-		},
-		zIndex: SeqZIndex.compound,
-		position: {
-			x,
-			y
-		},
-		draggable: false,
-		selectable: false,
-		deletable: false,
-		focusable: false,
-		style: { pointerEvents: "none" },
-		width,
-		initialWidth: width,
-		height,
-		initialHeight: height
-	};
-}
-function toSeqParallelArea({ parallelPrefix, x, y, width, height }, view) {
-	return {
-		id: `seq-parallel-${parallelPrefix}`,
-		type: "seq-parallel",
-		data: {
-			id: `seq-parallel-${parallelPrefix}`,
-			title: "PARALLEL",
-			technology: null,
-			color: SeqParallelAreaColor.default,
-			shape: "rectangle",
-			style: {},
-			tags: [],
-			x,
-			y,
-			level: 0,
-			icon: null,
-			width,
-			height,
-			description: null,
-			viewId: view.id,
-			parallelPrefix,
-			drifts: null,
-			viewLayoutDir: "LR",
-			notes: void 0
-		},
-		zIndex: SeqZIndex.subflows,
-		position: {
-			x,
-			y
-		},
-		draggable: false,
-		deletable: false,
-		selectable: false,
-		focusable: false,
-		style: { pointerEvents: "none" },
-		width,
-		initialWidth: width,
-		height,
-		initialHeight: height
-	};
-}
-function toSeqActorNode({ id, x, y, width, height, ports }, actor, bounds, view) {
-	return {
-		id,
-		type: "seq-actor",
-		data: {
-			id: actor.id,
-			x,
-			y,
-			level: 0,
-			icon: actor.icon ?? null,
-			isMultiple: actor.style.multiple ?? false,
-			title: actor.title,
-			width,
-			height,
-			color: actor.color,
-			navigateTo: actor.navigateTo ?? null,
-			shape: actor.shape,
-			style: actor.style,
-			tags: actor.tags,
-			modelFqn: actor.modelRef ?? null,
-			technology: actor.technology ?? null,
-			description: actor.description ?? null,
-			viewHeight: bounds.height,
-			viewId: view.id,
-			notes: actor.notes,
-			ports,
-			drifts: actor.drifts ?? null,
-			viewLayoutDir: "LR"
-		},
-		deletable: false,
-		zIndex: SeqZIndex.actor,
-		position: {
-			x,
-			y
-		},
-		width,
-		initialWidth: width,
-		height,
-		initialHeight: height
-	};
-}
-function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle, hidden }, edge, currentViewId, stepnum, { flow }) {
-	let parent = flow?.parent(id);
-	return {
-		id,
-		type: "seq-step",
-		data: {
-			id,
-			label: edge.label,
-			technology: edge.technology,
-			notes: edge.notes ?? null,
-			navigateTo: edge.navigateTo !== currentViewId ? edge.navigateTo : null,
-			controlPoints: null,
-			labelBBox: {
-				x: 0,
-				y: 0,
-				width: labelBBox?.width ?? edge.labelBBox?.width ?? 32,
-				height: labelBBox?.height ?? edge.labelBBox?.height ?? 32
-			},
-			stepnum,
-			labelXY: null,
-			points: edge.points,
-			color: edge.color,
-			line: edge.line,
-			dir: "forward",
-			head: edge.head ?? "normal",
-			tail: edge.tail ?? "none",
-			astPath: edge.astPath,
-			drifts: edge.drifts ?? null,
-			parentFlow: parent ? {
-				id: parent.id,
-				type: parent._type
-			} : null
-		},
-		deletable: false,
-		focusable: false,
-		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,2 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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,22 +0,0 @@
-import { DiagramNode } from '@likec4/core/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
- */
-export declare function findParallelRects(steps: Array<Step>): Array<ParallelRect>;
-/**
- * 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
- */
-export declare function buildCompounds(actors: ReadonlyArray<DiagramNode>, nodes: ReadonlyArray<DiagramNode>): Array<Compound>;

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

@@ -1,95 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import "remeda";
-import { Stack, invariant, isAncestor } from "@likec4/core/utils";
-//#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,5 +0,0 @@
-import { NavigationPanelActorRef } from './actor';
-import { NamedExoticComponent } from 'react';
-export declare const NavigationPanel: NamedExoticComponent<{
-    actorRef: NavigationPanelActorRef;
-}>;

package/dist/navigationpanel/NavigationPanel.js

@@ -1,121 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { selectDiagramContext, useDiagramSelector } from "../hooks/safeContext.js";
-import { useOptionalCurrentViewModel } from "../context/LikeC4ModelContext.js";
-import { useMantinePortalProps } from "../hooks/useMantinePortalProps.js";
-import { ComparePanel } from "./comparepanel/ComparePanel.js";
-import { EditorPanel } from "./editorpanel/EditorPanel.js";
-import { NavigationPanelActorContextProvider } from "./hooks.js";
-import { ActiveWalkthroughControls } from "./walkthrough/ActiveWalkthroughControls.js";
-import { NavigationPanelControls } from "./NavigationPanelControls.js";
-import { NavigationPanelDropdown } from "./NavigationPanelDropdown.js";
-import { WalkthroughPanel } from "./walkthrough/WalkthroughPanel.js";
-import { memo, useEffect } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Popover, PopoverTarget } from "@mantine/core";
-import { AnimatePresence, LayoutGroup } from "motion/react";
-import { useSelector } from "@xstate/react";
-import { hasProp, isDynamicView } from "@likec4/core/types";
-import { VStack } from "@likec4/styles/jsx";
-import { hstack } from "@likec4/styles/patterns";
-import * as m$1 from "motion/react-m";
-//#region src/navigationpanel/NavigationPanel.tsx
-var select = selectDiagramContext((s) => {
-	const isActiveWalkthrough = !!s.activeWalkthrough;
-	if (isDynamicView(s.view) && isActiveWalkthrough) {
-		const isSequenceView = s.dynamicViewVariant === "sequence";
-		return {
-			viewId: s.view.id,
-			mode: isSequenceView && hasProp(s.view, "flow") ? "walkthrough-flow" : "walkthrough"
-		};
-	}
-	return {
-		viewId: s.view.id,
-		mode: "default"
-	};
-});
-var stateHasActiveTag = (state) => state.hasTag("active");
-var NavigationPanel = memo(({ actorRef }) => {
-	const opened = useSelector(actorRef, stateHasActiveTag);
-	const portalProps = useMantinePortalProps();
-	const { viewId, mode } = useDiagramSelector(select);
-	const viewModel = useOptionalCurrentViewModel();
-	const viewFolder = !!viewModel && viewModel.id === viewId ? viewModel.folder.path : void 0;
-	useEffect(() => {
-		actorRef.send({
-			type: "update.inputs",
-			inputs: {
-				viewId,
-				viewFolder
-			}
-		});
-	}, [
-		actorRef,
-		viewId,
-		viewFolder
-	]);
-	return /* @__PURE__ */ jsx(VStack, {
-		css: {
-			zIndex: "panel",
-			alignItems: "flex-start",
-			pointerEvents: "none",
-			position: "absolute",
-			top: "0",
-			left: "0",
-			margin: "0",
-			width: "100%",
-			gap: "xxs",
-			maxWidth: ["100vw", "100cqw"],
-			"@/sm": {
-				margin: "xs",
-				gap: "xs",
-				width: "max-content",
-				maxWidth: ["[calc(100vw - 2 * {spacing.md})]", "[calc(100cqw - 2 * {spacing.md})]"]
-			},
-			_print: { display: "none" }
-		},
-		children: /* @__PURE__ */ jsx(NavigationPanelActorContextProvider, {
-			value: actorRef,
-			children: mode !== "walkthrough-flow" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				/* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
-					propagate: true,
-					initial: false,
-					children: /* @__PURE__ */ jsxs(Popover, {
-						offset: { mainAxis: 4 },
-						opened,
-						position: "bottom-start",
-						trapFocus: opened,
-						keepMounted: false,
-						...portalProps,
-						clickOutsideEvents: [
-							"pointerdown",
-							"mousedown",
-							"click"
-						],
-						onDismiss: () => actorRef.send({ type: "dropdown.dismiss" }),
-						children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(m$1.div, {
-							layout: "size",
-							layoutDependency: [mode, viewId],
-							className: hstack({
-								layerStyle: "likec4.panel",
-								position: "relative",
-								gap: "xs",
-								cursor: "pointer",
-								pointerEvents: "all",
-								width: "100%"
-							}),
-							"data-panel": "navigation",
-							onMouseLeave: () => actorRef.send({ type: "breadcrumbs.mouseLeave" }),
-							children: mode === "walkthrough" ? /* @__PURE__ */ jsx(ActiveWalkthroughControls, {}) : /* @__PURE__ */ jsx(NavigationPanelControls, {})
-						}) }), /* @__PURE__ */ jsx(NavigationPanelDropdown, {})]
-					})
-				}) }),
-				/* @__PURE__ */ jsx(ComparePanel, {}),
-				mode === "walkthrough" && /* @__PURE__ */ jsx(WalkthroughPanel, {}),
-				/* @__PURE__ */ jsx(EditorPanel, {})
-			] })
-		})
-	});
-});
-NavigationPanel.displayName = "NavigationPanel";
-//#endregion
-export { NavigationPanel };

package/dist/navigationpanel/NavigationPanelControls.d.ts

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