@likec4/diagram 1.57.0 → 1.59.0

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

@@ -72,7 +72,10 @@ function ElementNode(props) {
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
 			/* @__PURE__ */ jsx(ElementShape, { ...props }),
-			/* @__PURE__ */ jsx(ElementData, { ...props }),
+			/* @__PURE__ */ jsx(ElementData, {
+				...props,
+				"aria-hidden": true
+			}),
 			enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
 			/* @__PURE__ */ jsx(ElementActions, { ...props }),
 			enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
@@ -89,7 +92,10 @@ function DeploymentNode(props) {
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
 			/* @__PURE__ */ jsx(ElementShape, { ...props }),
-			/* @__PURE__ */ jsx(ElementData, { ...props }),
+			/* @__PURE__ */ jsx(ElementData, {
+				...props,
+				"aria-hidden": true
+			}),
 			enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
 			/* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
 			enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
@@ -115,7 +121,10 @@ function CompoundElementNode(props) {
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+			/* @__PURE__ */ jsx(CompoundTitle, {
+				...props,
+				"aria-hidden": true
+			}),
 			/* @__PURE__ */ jsx(CompoundActions, { ...props }),
 			enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
 			!enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
@@ -130,7 +139,10 @@ function CompoundDeploymentNode(props) {
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+			/* @__PURE__ */ jsx(CompoundTitle, {
+				...props,
+				"aria-hidden": true
+			}),
 			/* @__PURE__ */ jsx(CompoundActions, { ...props }),
 			enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
 			!enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
@@ -145,7 +157,10 @@ function ViewGroupNode(props) {
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+			/* @__PURE__ */ jsx(CompoundTitle, {
+				...props,
+				"aria-hidden": true
+			}),
 			/* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
 		]
 	});

package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.d.ts

@@ -8,15 +8,15 @@ type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
     onColorPreview: (color: ThemeColor | null) => void;
     onChange: OnStyleChange;
 };
-export declare function ColorButton({ elementColor, elementOpacity, onColorPreview, isOpacityEditable, onChange, ...props }: ColorButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorButton({ elementColor, elementOpacity, onColorPreview, isOpacityEditable, onChange, ...props }: ColorButtonProps): import("react").JSX.Element;
 export declare function ColorSwatches({ theme, elementColor, onColorPreview, onChange, }: {
     theme: LikeC4Theme;
     elementColor: ThemeColor;
     onColorPreview: (color: ThemeColor | null) => void;
     onChange: (color: ThemeColor) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function OpacityOption({ elementOpacity, onOpacityChange, }: {
     elementOpacity: number | undefined;
     onOpacityChange: (opacity: number) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export {};

package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js

@@ -155,4 +155,4 @@ function OpacityOption({ elementOpacity = 100, onOpacityChange }) {
 	});
 }
 //#endregion
-export { ColorButton };
+export { ColorButton, ColorSwatches, OpacityOption };

package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.d.ts

@@ -1,3 +1,3 @@
 import { Types } from '../../../types';
-export declare function CompoundElementToolbar(props: Types.NodeProps<'compound-element'>): import("react/jsx-runtime").JSX.Element;
-export declare function CompoundDeploymentToolbar(props: Types.NodeProps<'compound-deployment'>): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundElementToolbar(props: Types.NodeProps<'compound-element'>): import("react").JSX.Element;
+export declare function CompoundDeploymentToolbar(props: Types.NodeProps<'compound-deployment'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.d.ts

@@ -4,5 +4,5 @@ export declare function ElementToolbar(props: Types.NodeProps<'element' | 'seq-a
     data: {
         modelFqn: Fqn;
     };
-}): import("react/jsx-runtime").JSX.Element;
-export declare function DeploymentElementToolbar(props: Types.NodeProps<'deployment'>): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
+export declare function DeploymentElementToolbar(props: Types.NodeProps<'deployment'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts

@@ -5,4 +5,4 @@ export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
     nodeProps: BaseNodeProps;
     title: ReactNode;
 };
-export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react").JSX.Element | null;

package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts

@@ -6,13 +6,13 @@ import { TooltipProps, PlaceholderPolymorphicProps } from '@mantine/core';
 export declare const Tooltip: NamedExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & PlaceholderPolymorphicProps>;
 export declare function BrowseRelationshipsButton({ fqn }: {
     fqn: Fqn;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function GoToSourceButton(props: MergeExclusive<{
     elementId: Fqn;
 }, {
     deploymentId: DeploymentFqn;
-}>): import("react/jsx-runtime").JSX.Element | null;
+}>): import("react").JSX.Element | null;
 export declare function BorderStyleOption({ elementBorderStyle, onChange, }: {
     elementBorderStyle: BorderStyle | undefined;
     onChange: OnStyleChange;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/toolbar/_shared.js

@@ -100,4 +100,4 @@ function BorderStyleOption({ elementBorderStyle = "none", onChange }) {
 	});
 }
 //#endregion
-export { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton };
+export { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton, Tooltip$1 as Tooltip };

package/dist/likec4diagram/relationship-popover/RelationshipPopover.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const RelationshipPopover: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;
+export declare const RelationshipPopover: MemoExoticComponent<() => import("react").JSX.Element | null>;

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -3,8 +3,8 @@ import { roundDpr } from "../../utils/roundDpr.js";
 import { useRootContainerRef } from "../../context/RootContainerContext.js";
 import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.js";
 import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { useDiagramContext, useOnDiagramEvent } from "../../hooks/useDiagram.js";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
+import { useOnDiagramEvent } from "../../hooks/useDiagram.js";
 import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
 import { findDiagramEdge, findDiagramNode } from "../state/utils.js";
 import { Markdown } from "../../base-primitives/Markdown.js";
@@ -25,7 +25,7 @@ import { Box as Box$1, HStack, VStack, styled } from "@likec4/styles/jsx";
 import { bleed } from "@likec4/styles/patterns";
 import { autoPlacement, autoUpdate, computePosition, hide, offset, size } from "@floating-ui/dom";
 //#region src/likec4diagram/relationship-popover/RelationshipPopover.tsx
-function selectDiagramContext(c) {
+var selector = selectDiagramContext((c) => {
 	let selected = null;
 	for (const edge of c.xyedges) if (edge.selected) {
 		if (selected) {
@@ -38,12 +38,12 @@ function selectDiagramContext(c) {
 		viewId: c.view.id,
 		selected
 	};
-}
+});
 var RelationshipPopover = memo(() => {
 	const likec4model = useLikeC4Model();
 	const actorRef = useActorRef(RelationshipPopoverActorLogic);
 	const diagram = useDiagram();
-	const { viewId, selected } = useDiagramContext(selectDiagramContext);
+	const { viewId, selected } = useDiagramSelector(selector);
 	const openedEdgeId = useSelector(actorRef, (s) => s.hasTag("opened") ? s.context.edgeId : null);
 	useOnDiagramEvent("navigateTo", () => {
 		actorRef.send({ type: "close" });
@@ -95,14 +95,14 @@ var RelationshipPopover = memo(() => {
 		diagram,
 		openedEdgeId
 	]);
-	const { diagramEdge, sourceNode, targetNode } = useDiagramContext((ctx) => {
+	const { diagramEdge, sourceNode, targetNode } = useDiagramSelector(useCallback(({ context: ctx }) => {
 		const diagramEdge = openedEdgeId ? findDiagramEdge(ctx, openedEdgeId) : null;
 		return {
 			diagramEdge,
 			sourceNode: diagramEdge ? findDiagramNode(ctx, diagramEdge.source) : null,
 			targetNode: diagramEdge ? findDiagramNode(ctx, diagramEdge.target) : null
 		};
-	}, shallowEqual, [openedEdgeId]);
+	}, [openedEdgeId]), shallowEqual);
 	if (!diagramEdge || !sourceNode || !targetNode || isEmpty(diagramEdge.relations)) return null;
 	const [direct, nested] = pipe(diagramEdge.relations, map((id) => {
 		try {
@@ -340,8 +340,8 @@ var Relationship = forwardRef(({ viewId, relationship: r, sourceNode, targetNode
 			gap: "1",
 			rounded: "sm",
 			backgroundColor: { _hover: {
-				base: "mantine.colors.gray[1]",
-				_dark: "mantine.colors.dark[5]/70"
+				base: "mantine.gray[1]",
+				_dark: "mantine.dark[5]/70"
 			} }
 		}),
 		children: [
@@ -448,7 +448,7 @@ var Relationship = forwardRef(({ viewId, relationship: r, sourceNode, targetNode
 					className: css({
 						userSelect: "all",
 						wordBreak: "break-word",
-						minWidth: 0
+						minWidth: "0"
 					}),
 					children: r.kind
 				})]
@@ -460,7 +460,7 @@ var Relationship = forwardRef(({ viewId, relationship: r, sourceNode, targetNode
 					className: css({
 						userSelect: "all",
 						wordBreak: "break-word",
-						minWidth: 0
+						minWidth: "0"
 					}),
 					children: r.technology
 				})]
@@ -469,10 +469,11 @@ var Relationship = forwardRef(({ viewId, relationship: r, sourceNode, targetNode
 				css: {
 					paddingLeft: "2.5",
 					py: "1.5",
-					borderLeft: "2px dotted",
+					borderLeftWidth: "2",
+					borderLeftStyle: "dotted",
 					borderLeftColor: {
-						base: "mantine.colors.gray[3]",
-						_dark: "mantine.colors.dark[4]"
+						base: "mantine.gray[3]",
+						_dark: "mantine.dark[4]"
 					}
 				},
 				children: /* @__PURE__ */ jsx(Markdown, {

package/dist/likec4diagram/relationship-popover/components.d.ts

@@ -1,7 +1,7 @@
 import { Color } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-import { StyledComponent } from '@likec4/styles';
+import { StyledComponent } from '../../../styled-system/types';
 export declare const Endpoint: ({ children, likec4color }: PropsWithChildren<{
     likec4color: Color;
-}>) => import("react/jsx-runtime").JSX.Element;
+}>) => import("react").JSX.Element;
 export declare const RelationshipTitle: StyledComponent<"div", {}>;

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

@@ -11,4 +11,4 @@ export declare function DiagramActorProvider({ id, view, zoomable, pannable, nod
     fitViewPadding: ViewPaddings;
     where?: WhereOperator | null;
     dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/likec4diagram/state/DiagramActorProvider.js

@@ -2,14 +2,13 @@ import "../../_virtual/_rolldown/runtime.js";
 import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
 import { useDiagramEventHandlersRef } from "../../context/DiagramEventHandlers.js";
 import { DiagramFeatures, useEnabledFeatures } from "../../context/DiagramFeatures.js";
-import { DiagramActorContextProvider, DiagramApiContextProvider, useDiagram } from "../../hooks/safeContext.js";
-import { selectDiagramActorContext, useDiagramSnapshot, useOnDiagramEvent } from "../../hooks/useDiagram.js";
-import { ErrorBoundary } from "../../components/ErrorFallback.js";
-import { useEditorActorLogic } from "../../editor/useEditorActorLogic.js";
-import { makeDiagramApi } from "./diagram-api.js";
+import { DiagramActorContextProvider, DiagramApiContextProvider, selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
+import { useOnDiagramEvent } from "../../hooks/useDiagram.js";
 import { DiagramToggledFeaturesPersistence } from "./persistence.js";
+import { useEditorActorLogic } from "../../editor/useEditorActorLogic.js";
+import { DiagramApi } from "./diagram-api.js";
 import { diagramMachine } from "./machine.js";
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useStoreApi } from "@xyflow/react";
 import { isNullish } from "remeda";
@@ -17,9 +16,9 @@ import { useActorRef } from "@xstate/react";
 //#region src/likec4diagram/state/DiagramActorProvider.tsx
 function DiagramActorProvider({ id, view, zoomable, pannable, nodesDraggable, nodesSelectable, fitViewPadding, where = null, children, dynamicViewVariant: _defaultVariant }) {
 	const xystore = useStoreApi();
-	const editorActor = useEditorActorLogic();
+	const editor = useEditorActorLogic();
 	const features = useEnabledFeatures();
-	const actor = useActorRef(diagramMachine.provide({ actors: { editorActor } }), {
+	const actor = useActorRef(diagramMachine.provide({ actors: { editor } }), {
 		id: `diagram-${id}`,
 		systemId: "diagram",
 		input: {
@@ -43,14 +42,6 @@ function DiagramActorProvider({ id, view, zoomable, pannable, nodesDraggable, no
 		});
 		actorRef.current = actor;
 	}
-	const [api, setApi] = useState(() => makeDiagramApi(actorRef));
-	useEffect(() => {
-		setApi((api) => {
-			if (api.ref === actorRef) return api;
-			console.error("DiagramMachine actorRef changed, creating new DiagramApi instance, this should not happen during the lifetime of the actor");
-			return makeDiagramApi(actorRef);
-		});
-	}, [actorRef]);
 	useEffect(() => {
 		actor.send({
 			type: "update.features",
@@ -91,12 +82,12 @@ function DiagramActorProvider({ id, view, zoomable, pannable, nodesDraggable, no
 	return /* @__PURE__ */ jsx(DiagramActorContextProvider, {
 		value: actor,
 		children: /* @__PURE__ */ jsxs(DiagramApiContextProvider, {
-			value: api,
-			children: [/* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(ToggledFeatures, { children }) }), /* @__PURE__ */ jsx(PropagateDiagramActorEvents, {})]
+			value: DiagramApi.withActor(actorRef),
+			children: [/* @__PURE__ */ jsx(ToggledFeatures, { children }), /* @__PURE__ */ jsx(PropagateDiagramActorEvents, {})]
 		})
 	});
 }
-var selectToggledFeatures = selectDiagramActorContext((context) => {
+var selectToggledFeatures = selectDiagramContext((context) => {
 	let toggledFeatures = context.toggledFeatures;
 	const enableCompareWithLatest = context.view.drifts != null && context.view.drifts.length > 0 && context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isNullish(context.activeWalkthrough);
 	const enableReadOnly = context.features.enableReadOnly || toggledFeatures.enableReadOnly || !!context.activeWalkthrough || enableCompareWithLatest && context.view._layout === "auto";
@@ -108,7 +99,7 @@ var selectToggledFeatures = selectDiagramActorContext((context) => {
 	return toggledFeatures;
 });
 function ToggledFeatures({ children }) {
-	const toggledFeatures = useDiagramSnapshot(selectToggledFeatures);
+	const toggledFeatures = useDiagramSelector(selectToggledFeatures);
 	useUpdateEffect(() => {
 		DiagramToggledFeaturesPersistence.write(toggledFeatures);
 	}, [toggledFeatures]);

package/dist/likec4diagram/state/aligners.js

@@ -289,4 +289,4 @@ function getAligner(mode) {
 	}
 }
 //#endregion
-export { getAligner, toNodeRect };
+export { Aligner, GridAligner, LinearAligner, getAligner, getLinearAligner, toNodeRect };

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

@@ -18,7 +18,7 @@ export declare function mergeXYNodesEdges(context: Pick<DiagramContext, 'xynodes
     view: LayoutedView;
 };
 export declare function focusNodesEdges(context: DiagramContext): {
-    xynodes: Types.Node<"element" | "deployment" | "compound-element" | "compound-deployment" | "view-group" | "seq-actor" | "seq-parallel">[];
+    xynodes: Types.Node<"element" | "deployment" | "compound-element" | "compound-deployment" | "view-group" | "seq-actor" | "seq-parallel" | "seq-subflow">[];
     xyedges: Types.Edge<"relationship" | "seq-step">[];
 } | null;
 export declare function updateNodeData({ context, event }: ActionArg): Partial<DiagramContext>;

package/dist/likec4diagram/state/assign.js

@@ -27,7 +27,7 @@ function mergeXYNodesEdges(context, event) {
 function focusNodesEdges(context) {
 	const { xynodes: _xynodes, xyedges: _xyedges, focusedNode } = context;
 	if (!focusedNode) return null;
-	const focused = new Set([focusedNode]);
+	const focused = /* @__PURE__ */ new Set([focusedNode]);
 	const xyedges = _xyedges.map((edge) => {
 		if (edge.source === focusedNode || edge.target === focusedNode) {
 			focused.add(edge.source);

package/dist/likec4diagram/state/createViewChange.js

@@ -14,7 +14,7 @@ function createViewChange(parentContext) {
 			console.error(`Internal node not found for ${node.id}`);
 			return node;
 		}
-		const xynodedata = xynodes.find((n) => n.id === node.id)?.data ?? internal.data;
+		const xynodedata = xynodes.find((n) => n.data.id === node.id)?.data ?? internal.data;
 		const position = internal.internals.positionAbsolute;
 		const { width, height } = getNodeDimensions(internal);
 		if (!isSamePoint(position, node) || node.width !== width || node.height !== height) movedNodes.add(node.id);
@@ -50,6 +50,7 @@ function createViewChange(parentContext) {
 			height: Math.round(data.labelBBox.height)
 		};
 		else _updated.labelBBox = null;
+		if (data.isLabelCustomized !== void 0) _updated.isLabelCustomized = data.isLabelCustomized;
 		if (hasAtLeast(controlPoints, 1)) _updated.controlPoints = map(controlPoints, (v) => ({
 			x: Math.round(v.x),
 			y: Math.round(v.y)

package/dist/likec4diagram/state/diagram-api.d.ts

@@ -1,7 +1,7 @@
 import { DynamicViewDisplayVariant, NodeNotation as ElementNotation, ViewChange } from '@likec4/core/types';
 import { RefObject } from 'react';
 import { PartialDeep } from 'type-fest';
-import { FeatureName } from '../../context/DiagramFeatures';
+import { TogglableFeature } from '../../context/DiagramFeatures';
 import { EditorActorRef } from '../../editor/actor/machine';
 import { OpenSourceParams } from '../../LikeC4Diagram.props';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
@@ -16,19 +16,22 @@ type ViewId<A> = t.aux.ViewId<A>;
 type Fqn<A> = t.aux.Fqn<A>;
 type NodeId = t.aux.NodeId;
 type EdgeId = t.aux.EdgeId;
-export interface DiagramApi<A extends Any = Unknown> {
+export declare class DiagramApi<A extends Any = Unknown> {
+    private static cache;
+    static withActor(actorRef: RefObject<DiagramActorRef>): DiagramApi;
     /**
      * React ref to the diagram actor
      */
     readonly ref: RefObject<DiagramActorRef>;
+    private constructor();
     /**
      * @warning Do not use in render phase
      */
-    readonly actor: DiagramActorRef;
+    get actor(): DiagramActorRef;
     /**
      * @warning Do not use in render phase
      */
-    readonly currentView: t.DiagramView<A>;
+    get currentView(): t.DiagramView<A>;
     /**
      * Editor actor reference
      * @warning Do not use in render phase
@@ -70,7 +73,7 @@ export interface DiagramApi<A extends Any = Unknown> {
     /**
      * If running in editor, trigger opening source file
      */
-    openSource(params: OpenSourceParams<A>): void;
+    openSource(params: OpenSourceParams<Unknown>): void;
     /**
      * Open element details card
      */
@@ -137,18 +140,23 @@ export interface DiagramApi<A extends Any = Unknown> {
      * @warning Do not use in render phase
      */
     findDiagramEdge(xyedgeId: string): t.DiagramEdge<A> | null;
-    startWalkthrough(): void;
-    walkthroughStep(direction?: 'next' | 'previous'): void;
+    startWalkthrough(stepId?: t.StepPath): void;
+    walkthroughStep(value?: 'next' | 'prev' | {
+        step: t.StepPath;
+    }): void;
     stopWalkthrough(): void;
-    toggleFeature(feature: FeatureName, forceValue?: boolean): void;
+    toggleFeature(feature: TogglableFeature, forceValue?: boolean): void;
     highlightNotation(notation: ElementNotation, kind?: string): void;
     unhighlightNotation(): void;
     openSearch(searchValue?: string): void;
-    triggerChange(viewChange: ViewChange): void;
+    triggerChange(change: ViewChange): void;
     /**
      * Switch dynamic view display variant
      */
     switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void;
+    /**
+     * Toggle sequence flow collapse/expand
+     */
+    toggleSequenceFlow(flowId: t.StepPath): void;
 }
-export declare function makeDiagramApi<A extends Any = Unknown>(actorRef: RefObject<DiagramActorRef>): DiagramApi<A>;
 export {};