@likec4/diagram 1.43.0 → 1.44.0

package/dist/likec4diagram/state/DiagramActorProvider.js

@@ -1,52 +1,37 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCustomCompareEffect, useRafEffect } from '@react-hookz/web';
+import { useRafEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
-import { shallowEqual, deepEqual } from 'fast-equals';
-import { useRef, useEffect, useMemo } from 'react';
+import { shallowEqual } from 'fast-equals';
+import { useState, useEffect, memo, useRef } from 'react';
+import { isNullish } from 'remeda';
 import { ErrorBoundary } from '../../components/ErrorFallback.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../../context/DiagramFeatures.js';
 import { CurrentViewModelContext } from '../../context/LikeC4ModelContext.js';
-import { DiagramActorContextProvider } from '../../hooks/safeContext.js';
-import { useDiagram, useOnDiagramEvent } from '../../hooks/useDiagram.js';
+import { DiagramActorContextProvider, useDiagram } from '../../hooks/safeContext.js';
+import { useOnDiagramEvent } from '../../hooks/useDiagram.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
 import { convertToXYFlow } from '../convert-to-xyflow.js';
-import { diagramMachine } from './diagram-machine.js';
-import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
+import { makeDiagramApi } from './diagram-api.js';
+import { diagramMachine } from './machine.js';
+import { DiagramToggledFeaturesPersistence } from './persistence.js';
 
-const selectDynamicViewVariant = (state) => {
-  return state.context.dynamicViewVariant;
-};
 function DiagramActorProvider({
   view,
   zoomable,
   pannable,
-  fitViewPadding,
+  nodesDraggable,
   nodesSelectable,
+  fitViewPadding,
   where,
   children,
   dynamicViewVariant: _defaultVariant
 }) {
-  const { handlersRef } = useDiagramEventHandlers();
   const xystore = useStoreApi();
-  const machineRef = useRef(null);
-  if (!machineRef.current) {
-    machineRef.current = diagramMachine.provide({
-      actors: {
-        syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
-          actions: {
-            "trigger:OnChange": ((_, params) => {
-              handlersRef.current.onChange?.(params);
-            })
-          }
-        })
-      }
-    });
-  }
   const actorRef = useActorRef(
-    machineRef.current,
+    diagramMachine,
     {
       id: `diagram`,
       systemId: "diagram",
@@ -57,96 +42,137 @@ function DiagramActorProvider({
         zoomable,
         pannable,
         fitViewPadding,
+        nodesDraggable,
         nodesSelectable,
         dynamicViewVariant: _defaultVariant
       }
     }
   );
+  const [api, setApi] = useState(() => makeDiagramApi(actorRef));
+  useEffect(() => {
+    setApi((api2) => {
+      if (api2.actor === actorRef) return api2;
+      return makeDiagramApi(actorRef);
+    });
+  }, [actorRef]);
+  if (api.actor !== actorRef) {
+    console.warn("DiagramApi instance changed, this should not happen during the lifetime of the actor");
+  }
   const features = useEnabledFeatures();
-  useCustomCompareEffect(
-    () => {
-      actorRef.send({ type: "update.features", features });
-    },
-    [features],
-    shallowEqual
-  );
   useEffect(
-    () => {
-      actorRef.send({ type: "update.inputs", inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } });
-    },
-    [zoomable, pannable, fitViewPadding, nodesSelectable]
+    () => actorRef.send({ type: "update.features", features }),
+    [features, actorRef]
   );
-  const dynamicViewVariant = useSelector(actorRef, selectDynamicViewVariant);
-  const update = useMemo(
-    () => convertToXYFlow({ view, where, nodesSelectable, dynamicViewVariant }),
-    [view, where, nodesSelectable, dynamicViewVariant]
+  useEffect(
+    () => actorRef.send({
+      type: "update.inputs",
+      inputs: { zoomable, pannable, fitViewPadding, nodesDraggable, nodesSelectable }
+    }),
+    [zoomable, pannable, fitViewPadding, actorRef, nodesDraggable, nodesSelectable]
   );
-  useRafEffect(() => {
-    actorRef.send({
-      type: "update.view",
-      ...update
-    });
-  }, [actorRef, update]);
   useUpdateEffect(() => {
     if (!_defaultVariant) return;
     actorRef.send({ type: "switch.dynamicViewVariant", variant: _defaultVariant });
-  }, [_defaultVariant]);
-  return /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: actorRef, children: [
-    /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef, children }) }),
-    /* @__PURE__ */ jsx(DiagramActorEventListener, { actorRef })
+  }, [_defaultVariant, actorRef]);
+  console.debug("Render DiagramActorProvider for view", view.id);
+  return /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: api, children: [
+    /* @__PURE__ */ jsxs(ErrorBoundary, { children: [
+      /* @__PURE__ */ jsx(
+        DiagramXYFlowSyncProvider,
+        {
+          view,
+          where,
+          actorRef
+        }
+      ),
+      /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef, children })
+    ] }),
+    /* @__PURE__ */ jsx(DiagramActorEventListener, {})
   ] });
 }
-const selectViewIdAndToggledFeatures = (state) => {
-  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
-    return {
-      viewId: state.context.view.id,
-      toggledFeatures: {
-        ...state.context.toggledFeatures,
-        enableReadOnly: true
-      }
+const selectFromActor = ({ context }) => {
+  let toggledFeatures = context.toggledFeatures;
+  const hasDrifts = context.view.drifts != null;
+  const enableCompareWithLatest = context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isNullish(context.activeWalkthrough) && hasDrifts;
+  const enableReadOnly = context.features.enableReadOnly || toggledFeatures.enableReadOnly || !!context.activeWalkthrough || context.dynamicViewVariant === "sequence" && context.view._type === "dynamic" || enableCompareWithLatest && context.view._layout === "auto";
+  if (toggledFeatures.enableReadOnly !== enableReadOnly || toggledFeatures.enableCompareWithLatest !== enableCompareWithLatest) {
+    toggledFeatures = {
+      ...toggledFeatures,
+      enableCompareWithLatest,
+      enableReadOnly
     };
   }
   return {
-    viewId: state.context.view.id,
-    toggledFeatures: state.context.toggledFeatures
+    toggledFeatures,
+    viewId: context.view.id
   };
 };
+const compareSelected = (a, b) => {
+  return a.viewId === b.viewId && shallowEqual(a.toggledFeatures, b.toggledFeatures);
+};
 function CurrentViewModelProvider({ children, actorRef }) {
-  const { viewId, toggledFeatures } = useSelector(actorRef, selectViewIdAndToggledFeatures, deepEqual);
+  const { viewId, toggledFeatures } = useSelector(
+    actorRef,
+    selectFromActor,
+    compareSelected
+  );
+  useUpdateEffect(() => {
+    DiagramToggledFeaturesPersistence.write(toggledFeatures);
+  }, [toggledFeatures]);
   const likec4model = useLikeC4Model();
   const viewmodel = likec4model.findView(viewId);
   return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
 }
-function DiagramActorEventListener({ actorRef }) {
+const selectFromActor2 = (state) => {
+  return state.context.dynamicViewVariant;
+};
+function DiagramXYFlowSyncProvider({ view, where, actorRef }) {
+  const dynamicViewVariant = useSelector(actorRef, selectFromActor2);
+  useRafEffect(() => {
+    actorRef.send({
+      type: "update.view",
+      ...convertToXYFlow({ view, where, dynamicViewVariant })
+    });
+  }, [view, where, dynamicViewVariant, actorRef]);
+  return null;
+}
+const DiagramActorEventListener = memo(() => {
   const diagram = useDiagram();
   const {
     onNavigateTo,
     onOpenSource,
+    onChange,
+    onLayoutTypeChange,
     handlersRef
   } = useDiagramEventHandlers();
   useOnDiagramEvent("openSource", ({ params }) => onOpenSource?.(params));
   useOnDiagramEvent("navigateTo", ({ viewId }) => onNavigateTo?.(viewId));
+  useOnDiagramEvent("onChange", ({ change }) => onChange?.({ change }));
+  useOnDiagramEvent("onLayoutTypeChange", ({ layoutType }) => {
+    onLayoutTypeChange?.(layoutType);
+  });
   const wasEmitted = useRef(false);
   useEffect(() => {
     if (wasEmitted.current) return;
-    let subscription = actorRef.on(
+    let subscription = diagram.actor.on(
       "initialized",
       ({ instance: xyflow }) => {
         try {
           handlersRef.current.onInitialized?.({ diagram, xyflow });
         } catch (error) {
           console.error(error);
+        } finally {
+          wasEmitted.current = true;
+          subscription?.unsubscribe();
+          subscription = null;
         }
-        wasEmitted.current = true;
-        subscription?.unsubscribe();
-        subscription = null;
       }
     );
     return () => {
       subscription?.unsubscribe();
     };
-  }, [actorRef, diagram]);
+  }, [diagram]);
   return null;
-}
+});
 
 export { DiagramActorProvider };

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

@@ -1,5 +1,7 @@
+import { XYPoint } from '@likec4/core';
+import { NodeLookup } from '@xyflow/system';
 import { Types } from '../types';
-import { ActionArg, Context as DiagramContext } from './diagram-machine';
+import { ActionArg, Context as DiagramContext } from './machine.setup';
 export declare function lastClickedNode(params: {
     context: DiagramContext;
     event: {
@@ -13,5 +15,5 @@ export declare function navigateBack({ context }: ActionArg): Partial<DiagramCon
 export declare function navigateForward({ context }: ActionArg): Partial<DiagramContext>;
 export declare function updateNodeData({ context, event }: ActionArg): Partial<DiagramContext>;
 export declare function updateEdgeData({ context, event }: ActionArg): Partial<DiagramContext>;
-export declare function resetEdgeControlPoints({ context }: ActionArg): Partial<DiagramContext>;
+export declare function resetEdgeControlPoints(nodeLookup: NodeLookup, edge: Types.Edge): [XYPoint] | [XYPoint, XYPoint];
 export declare function updateActiveWalkthrough({ context }: ActionArg): Partial<DiagramContext>;

package/dist/likec4diagram/state/assign.js

@@ -1,27 +1,13 @@
 import { nonNullable, invariant } from '@likec4/core';
 import { getNodeDimensions } from '@xyflow/system';
 import { deepEqual } from 'fast-equals';
-import { omit, mergeDeep, isEmpty } from 'remeda';
+import { mergeDeep, omit } from 'remeda';
 import { assertEvent } from 'xstate';
-import { Base } from '../../base/types.js';
-import { VectorImpl, vector } from '../../utils/vector.js';
+import { vector } from '../../utils/vector.js';
+import { getNodeCenter } from '../../utils/xyflow.js';
 import { SeqParallelAreaColor } from '../xyflow-sequence/const.js';
+import { Base } from '../../base/Base.js';
 
-function lastClickedNode(params) {
-  const { lastClickedNode: lastClickedNode2 } = params.context;
-  if (!lastClickedNode2 || lastClickedNode2.id !== params.event.node.id) {
-    return {
-      id: params.event.node.id,
-      clicks: 1,
-      timestamp: Date.now()
-    };
-  }
-  return {
-    id: lastClickedNode2.id,
-    clicks: lastClickedNode2.clicks + 1,
-    timestamp: Date.now()
-  };
-}
 function mergeXYNodesEdges({ context, event }) {
   assertEvent(event, "update.view");
   const nextView = event.view;
@@ -30,35 +16,37 @@ function mergeXYNodesEdges({ context, event }) {
   const xynodes = event.xynodes.map((update) => {
     const existing = currentNodes.find((n) => n.id === update.id);
     if (existing) {
+      if (existing === update) {
+        return existing;
+      }
       const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
       if (deepEqual(existing.type, update.type) && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data) && deepEqual(existing.parentId ?? null, update.parentId ?? null)) {
         return existing;
       }
       return {
-        ...omit(existing, ["measured", "parentId"]),
+        ...omit(existing, ["measured", "parentId", "hidden"]),
         ...update,
         // Force dimensions from update
         width: update.initialWidth,
-        height: update.initialHeight,
-        data: {
-          ...existing.data,
-          ...update.data
-        }
+        height: update.initialHeight
       };
     }
     return update;
   });
   let xyedges = event.xyedges;
-  if (isSameView && !nextView.hasLayoutDrift) {
+  if (isSameView && (!nextView.drifts || nextView.drifts.length === 0)) {
     const currentEdges = context.xyedges;
     xyedges = event.xyedges.map((update) => {
       const existing = currentEdges.find((n) => n.id === update.id);
+      if (existing === update) {
+        return existing;
+      }
       if (existing && existing.type === update.type) {
         if (deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.data, update.data) && deepEqual(existing.source, update.source) && deepEqual(existing.target, update.target) && deepEqual(existing.sourceHandle, update.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle)) {
           return existing;
         }
         return {
-          ...omit(existing, ["sourceHandle", "targetHandle"]),
+          ...omit(existing, ["hidden", "sourceHandle", "targetHandle"]),
           ...update,
           data: {
             ...existing.data,
@@ -69,23 +57,6 @@ function mergeXYNodesEdges({ context, event }) {
       return update;
     });
   }
-  if (!isSameView) {
-    for (const node of xynodes) {
-      node.data = {
-        ...node.data,
-        dimmed: false,
-        hovered: false
-      };
-    }
-    for (const edge of xyedges) {
-      edge.data = {
-        ...edge.data,
-        dimmed: false,
-        hovered: false,
-        active: false
-      };
-    }
-  }
   return {
     xynodes,
     xyedges,
@@ -236,6 +207,7 @@ function navigateForward({ context }) {
   };
 }
 function updateNodeData({ context, event }) {
+  console.log("updateNodeData called", event);
   assertEvent(event, "update.nodeData");
   const xynodes = context.xynodes.map((node) => {
     if (node.id !== event.nodeId) {
@@ -269,66 +241,30 @@ function updateEdgeData({ context, event }) {
   });
   return { xyedges };
 }
-function resetEdgeControlPoints({ context }) {
-  const { xynodes } = context;
-  function getNodeCenter(node, nodes) {
-    const dimensions = vector({ x: node.width || 0, y: node.height || 0 });
-    let position = vector(node.position).add(dimensions.mul(0.5));
-    let currentNode = node;
-    do {
-      const parent = currentNode.parentId && nodes.find((x) => x.id == currentNode.parentId);
-      if (!parent) {
-        break;
-      }
-      currentNode = parent;
-      position = position.add(parent.position);
-    } while (true);
-    return position;
-  }
-  function getControlPointForEdge(edge) {
-    const source = xynodes.find((x) => x.id == edge.source);
-    const target = xynodes.find((x) => x.id == edge.target);
-    if (!source || !target) {
-      return [];
-    }
-    const sourceCenter = getNodeCenter(source, xynodes);
-    const targetCenter = getNodeCenter(target, xynodes);
-    if (!sourceCenter || !targetCenter) {
-      return [];
-    }
-    if (source === target) {
-      const loopSize = 80;
-      const centerOfTopBoundary = new VectorImpl(0, source.height || 0).mul(-0.5).add(sourceCenter);
-      return [
-        centerOfTopBoundary.add(new VectorImpl(-loopSize / 2.5, -loopSize)),
-        centerOfTopBoundary.add(new VectorImpl(loopSize / 2.5, -loopSize))
-      ];
-    }
-    const sourceToTargetVector = targetCenter.sub(sourceCenter);
-    const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);
-    const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.mul(-1));
-    return [sourceBorderPoint.add(targetBorderPoint.sub(sourceBorderPoint).mul(0.3))];
-  }
-  function getBorderPointOnVector(node, nodeCenter, v) {
-    const xScale = (node.width || 0) / 2 / v.x;
-    const yScale = (node.height || 0) / 2 / v.y;
-    const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
-    return vector(v).mul(scale).add(nodeCenter);
+function getBorderPointOnVector(node, nodeCenter, v) {
+  const dimensions = getNodeDimensions(node);
+  const xScale = dimensions.width / 2 / v.x;
+  const yScale = dimensions.height / 2 / v.y;
+  const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
+  return vector(v).multiply(scale).add(nodeCenter);
+}
+function resetEdgeControlPoints(nodeLookup, edge) {
+  const source = nonNullable(nodeLookup.get(edge.source), `Source node ${edge.source} not found`);
+  const target = nonNullable(nodeLookup.get(edge.target), `Target node ${edge.target} not found`);
+  const sourceCenter = vector(getNodeCenter(source));
+  const targetCenter = vector(getNodeCenter(target));
+  if (source === target) {
+    const loopSize = 80;
+    const centerOfTopBoundary = vector(0, source.height || 0).multiply(-0.5).add(sourceCenter);
+    return [
+      centerOfTopBoundary.add(vector(-loopSize / 2.5, -loopSize)),
+      centerOfTopBoundary.add(vector(loopSize / 2.5, -loopSize))
+    ];
   }
-  return {
-    xyedges: context.xyedges.map((edge) => {
-      if (!edge.data.controlPoints || isEmpty(edge.data.controlPoints)) {
-        return edge;
-      }
-      return {
-        ...edge,
-        data: {
-          ...edge.data,
-          controlPoints: getControlPointForEdge(edge)
-        }
-      };
-    })
-  };
+  const sourceToTargetVector = targetCenter.subtract(sourceCenter);
+  const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);
+  const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.multiply(-1));
+  return [sourceBorderPoint.add(targetBorderPoint.subtract(sourceBorderPoint).multiply(0.4))];
 }
 function updateActiveWalkthrough({ context }) {
   const { stepId, parallelPrefix } = nonNullable(context.activeWalkthrough, "activeWalkthrough is null");
@@ -354,4 +290,4 @@ function updateActiveWalkthrough({ context }) {
   };
 }
 
-export { focusNodesEdges, lastClickedNode, mergeXYNodesEdges, navigateBack, navigateForward, resetEdgeControlPoints, updateActiveWalkthrough, updateEdgeData, updateNavigationHistory, updateNodeData };
+export { focusNodesEdges, mergeXYNodesEdges, navigateBack, navigateForward, resetEdgeControlPoints, updateActiveWalkthrough, updateEdgeData, updateNavigationHistory, updateNodeData };

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

@@ -0,0 +1,3 @@
+import { ViewChange } from '@likec4/core/types';
+import { DiagramContext } from './types';
+export declare function createViewChange(parentContext: Pick<DiagramContext, 'view' | 'xynodes' | 'xyedges' | 'xystore'>): ViewChange.SaveViewSnapshot;

package/dist/likec4diagram/state/createViewChange.js

@@ -0,0 +1,90 @@
+import { getNodeDimensions } from '@xyflow/system';
+import { indexBy, map, omit, hasAtLeast } from 'remeda';
+import { calcViewBounds } from '../../utils/view-bounds.js';
+import { isSamePoint, bezierControlPoints } from '../../utils/xyflow.js';
+
+function createViewChange(parentContext) {
+  const {
+    view: {
+      drifts: _1,
+      // Ignore drifts from view
+      _layout: _2,
+      // Ignore layout type from view
+      ...view
+    },
+    xynodes,
+    xyedges,
+    xystore
+  } = parentContext;
+  const { nodeLookup } = xystore.getState();
+  const movedNodes = /* @__PURE__ */ new Set();
+  const xynodesLookup = indexBy(xynodes, (n) => n.data.id);
+  const xyedgesLookup = indexBy(xyedges, (e) => e.data.id);
+  const nodes = map(view.nodes, (node) => {
+    const xynode = xynodesLookup[node.id];
+    if (!xynode) {
+      return node;
+    }
+    const internal = nodeLookup.get(xynode.id);
+    const dimensions = getNodeDimensions(internal);
+    const isChanged = !isSamePoint(internal.internals.positionAbsolute, node) || node.width !== dimensions.width || node.height !== dimensions.height || node.shape !== xynode.data.shape || node.color !== xynode.data.color || node.style.border !== xynode.data.style.border || node.style.opacity !== xynode.data.style.opacity;
+    if (!isChanged) {
+      return node;
+    }
+    movedNodes.add(xynode.id);
+    return {
+      ...node,
+      shape: xynode.data.shape,
+      color: xynode.data.color,
+      style: {
+        ...node.style,
+        ...xynode.data.style
+      },
+      x: Math.floor(internal.internals.positionAbsolute.x),
+      y: Math.floor(internal.internals.positionAbsolute.y),
+      width: Math.ceil(dimensions.width),
+      height: Math.ceil(dimensions.height)
+    };
+  });
+  const edges = map(view.edges, (edge) => {
+    const xyedge = xyedgesLookup[edge.id];
+    if (!xyedge) {
+      return edge;
+    }
+    const data = xyedge.data;
+    let controlPoints = data.controlPoints ?? [];
+    const sourceOrTargetMoved = movedNodes.has(xyedge.source) || movedNodes.has(xyedge.target);
+    if (controlPoints.length === 0 && sourceOrTargetMoved) {
+      controlPoints = bezierControlPoints(data.points);
+    }
+    const _updated = {
+      ...omit(edge, ["controlPoints"]),
+      points: data.points
+    };
+    if (data.labelXY && data.labelBBox) {
+      _updated.labelBBox = {
+        ...data.labelBBox,
+        ...data.labelXY
+      };
+    }
+    if (data.labelBBox) {
+      _updated.labelBBox ??= data.labelBBox;
+    }
+    if (hasAtLeast(controlPoints, 1)) {
+      _updated.controlPoints = controlPoints;
+    }
+    return _updated;
+  });
+  const snapshot = {
+    ...view,
+    bounds: calcViewBounds({ nodes, edges }),
+    nodes,
+    edges
+  };
+  return {
+    op: "save-view-snapshot",
+    layout: snapshot
+  };
+}
+
+export { createViewChange };

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

@@ -0,0 +1,113 @@
+import { DynamicViewDisplayVariant, NodeNotation as ElementNotation, ViewChange } from '@likec4/core/types';
+import { PartialDeep } from 'type-fest';
+import { FeatureName } from '../../context/DiagramFeatures';
+import { OpenSourceParams } from '../../LikeC4Diagram.props';
+import { Types } from '../types';
+import { AlignmentMode } from './aligners';
+import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext } from './types';
+import type * as t from '@likec4/core/types';
+type Any = t.aux.Any;
+type Unknown = t.aux.UnknownLayouted;
+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> {
+    readonly actor: DiagramActorRef;
+    /**
+     * @warning Do not use in render phase
+     */
+    readonly currentView: t.DiagramView<A>;
+    /**
+     * Send event to diagram actor
+     */
+    send(event: DiagramActorEvent): void;
+    /**
+     * Navigate to view
+     */
+    navigateTo(viewId: ViewId<A>, fromNode?: NodeId): void;
+    /**
+     * Navigate back or forward in history
+     */
+    navigate(direction: 'back' | 'forward'): void;
+    /**
+     * Fit diagram to view
+     */
+    fitDiagram(duration?: number): void;
+    /**
+     * Open relationships browser
+     */
+    openRelationshipsBrowser(fqn: Fqn<A>): void;
+    /**
+     * If running in editor, trigger opening source file
+     */
+    openSource(params: OpenSourceParams<A>): void;
+    /**
+     * Open element details card
+     */
+    openElementDetails(fqn: Fqn<A>, fromNode?: NodeId): void;
+    openRelationshipDetails(...params: [edgeId: EdgeId] | [source: Fqn<A>, target: Fqn<A>]): void;
+    updateNodeData(nodeId: NodeId, data: PartialDeep<Types.NodeData>): void;
+    updateEdgeData(edgeId: EdgeId, data: PartialDeep<Types.EdgeData>): void;
+    /**
+     * Start editing, either node or edge
+     */
+    startEditing(subject: 'node' | 'edge'): void;
+    /**
+     * Stop editing
+     * @param wasChanged - whether there were changes made during editing
+     * @default false
+     */
+    stopEditing(wasChanged?: boolean): void;
+    /**
+     * Undo last editing operation
+     * @returns true if there was something to undo
+     */
+    undoEditing(): boolean;
+    /**
+     * Align nodes
+     */
+    align(mode: AlignmentMode): void;
+    /**
+     * Reset edge control points
+     */
+    resetEdgeControlPoints(): void;
+    /**
+     * Focus node
+     */
+    focusNode(nodeId: NodeId): void;
+    /**
+     * @warning Do not use in render phase
+     */
+    getSnapshot(): DiagramActorSnapshot;
+    /**
+     * @warning Do not use in render phase
+     */
+    getContext(): DiagramContext;
+    /**
+     * @warning Do not use in render phase
+     */
+    findDiagramNode(xynodeId: string): t.DiagramNode<A> | null;
+    /**
+     * @warning Do not use in render phase
+     */
+    findEdge(xyedgeId: string): Types.Edge | null;
+    /**
+     * @warning Do not use in render phase
+     */
+    findDiagramEdge(xyedgeId: string): t.DiagramEdge<A> | null;
+    startWalkthrough(): void;
+    walkthroughStep(direction?: 'next' | 'previous'): void;
+    stopWalkthrough(): void;
+    toggleFeature(feature: FeatureName, forceValue?: boolean): void;
+    highlightNotation(notation: ElementNotation, kind?: string): void;
+    unhighlightNotation(): void;
+    openSearch(searchValue?: string): void;
+    triggerChange(viewChange: ViewChange): void;
+    /**
+     * Switch dynamic view display variant
+     */
+    switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void;
+}
+export declare function makeDiagramApi<A extends Any = Unknown>(actor: DiagramActorRef): DiagramApi<A>;
+export {};