@likec4/diagram 1.47.0 → 1.48.0

package/dist/hooks/useDiagramCompareLayout.js

@@ -13,7 +13,7 @@ const selectCompareLayoutState = ({ context }) => {
       isEnabled: false,
       isEditable: false,
       isActive: false,
-      drifts: [],
+      drifts: null,
       canApplyLatest: false,
       layout: context.view._layout ?? "auto"
     };

package/dist/hooks/useLikeC4ElementsTree.js

@@ -19,7 +19,7 @@ function useLikeC4ElementsTree(viewId) {
     } else {
       return [...model.roots()].map(buildNode).sort(sortByLabel);
     }
-  }, [model, viewId ?? null]);
+  }, [model, viewId]);
 }
 
 export { sortByLabel, useLikeC4ElementsTree };

package/dist/hooks/useLikeC4Model.js

@@ -18,9 +18,9 @@ function useLikeC4ViewModel(viewId) {
 }
 function useLikeC4Specification() {
   const model = useLikeC4Model();
-  const [specification, setSpecification] = useState(model.$data.specification);
+  const [specification, setSpecification] = useState(model.specification);
   useEffect(() => {
-    setSpecification((current) => deepEqual(current, model.$data.specification) ? current : model.$data.specification);
+    setSpecification((current) => deepEqual(current, model.specification) ? current : model.specification);
   }, [model]);
   return specification;
 }

package/dist/hooks/useSetState.d.ts

@@ -1,2 +1,7 @@
 import { NonEmptyObject } from 'type-fest';
-export declare function useSetState<T extends object>(initialState: T | (() => T)): readonly [T, (statePartial: NonEmptyObject<Partial<T>> | ((current: T) => NonEmptyObject<Partial<T>>)) => void];
+/**
+ * Differs from useState in that:
+ * - it uses custom equal function (shallowEqual by default) to determine whether the state has changed.
+ * - allows partial updates to the state
+ */
+export declare function useSetState<T extends object>(initialState: T | (() => T), equal?: (a: T, b: T) => boolean): readonly [T, (statePartial: NonEmptyObject<Partial<T>> | ((current: T) => NonEmptyObject<Partial<T>>)) => void];

package/dist/hooks/useSetState.js

@@ -1,17 +1,20 @@
 import { shallowEqual } from 'fast-equals';
-import { useState, useCallback } from 'react';
+import { useState, useRef, useCallback } from 'react';
 
-function useSetState(initialState) {
+function useSetState(initialState, equal) {
   const [state, _setState] = useState(initialState);
+  const equalFn = equal ?? shallowEqual;
+  const equalFnRef = useRef(equalFn);
+  equalFnRef.current = equalFn;
   const setState = useCallback(
     (statePartial) => _setState((current) => {
       const next = {
         ...current,
         ...typeof statePartial === "function" ? statePartial(current) : statePartial
       };
-      return shallowEqual(current, next) ? current : next;
+      return equalFnRef.current(current, next) ? current : next;
     }),
-    []
+    [_setState]
   );
   return [state, setState];
 }

package/dist/hooks/useXYFlow.d.ts

@@ -12,5 +12,11 @@ export type XYStoreApi = {
 };
 export type XYInternalNode = InternalNode<Types.AnyNode>;
 export declare function useXYInternalNode(id: string): XYInternalNode | undefined;
-export declare function useCurrentZoom(): number;
+/**
+ * Returns the current zoom level of the flow.
+ * @param precision The number of decimal places to round to, defaults to 2 (i.e. 1.23)
+ * @returns The current zoom level of the flow.
+ */
+export declare function useCurrentZoom(precision?: number): number;
+export declare function useCurrentZoomAtLeast(minZoom: number): boolean;
 export declare function useIsZoomTooSmall(): boolean;

package/dist/hooks/useXYFlow.js

@@ -1,5 +1,6 @@
 import { useStore, useStoreApi, useReactFlow } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
+import { useCallback } from 'react';
 import { useCallbackRef } from './useCallbackRef.js';
 
 function useXYFlow() {
@@ -14,13 +15,12 @@ function useXYStore(selector, equalityFn) {
 function useXYStoreApi() {
   return useStoreApi();
 }
-const selectCurrentZoom = (state) => Math.round(state.transform[2] * 100) / 100;
-function useCurrentZoom() {
-  return useStore(selectCurrentZoom);
+function useCurrentZoomAtLeast(minZoom) {
+  return useStore(useCallback((state) => state.transform[2] >= minZoom, [minZoom]));
 }
 const selectZoom = (state) => state.transform[2] < 0.2;
 function useIsZoomTooSmall() {
   return useStore(selectZoom);
 }
 
-export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYStore, useXYStoreApi };
+export { useCurrentZoomAtLeast, useIsZoomTooSmall, useXYFlow, useXYStore, useXYStoreApi };

package/dist/index.d.ts

@@ -1,12 +1,13 @@
 export { IconRendererProvider } from './context/IconRenderer';
 export { LikeC4Diagram, type LikeC4DiagramProps, } from './LikeC4Diagram';
-export type { ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, NodeRenderers, OnCanvasClick, OnChange, OnEdgeClick, OnInitialized, OnNavigateTo, OnNodeClick, OnOpenSource, PaddingWithUnit, ViewPadding, WhereOperator, } from './LikeC4Diagram.props';
+export type { ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, NodeRenderers, OnCanvasClick, OnEdgeClick, OnInitialized, OnNavigateTo, OnNodeClick, OnOpenSource, PaddingWithUnit, ViewPadding, WhereOperator, } from './LikeC4Diagram.props';
 export { LikeC4ModelProvider, type LikeC4ModelProviderProps, } from './LikeC4ModelProvider';
-export { type LikeC4EditorPort, LikeC4EditorProvider, type LikeC4EditorProviderProps, } from './editor/LikeC4EditorProvider';
+export { LikeC4EditorProvider, type LikeC4EditorProviderProps, } from './editor/LikeC4EditorProvider';
+export { createLikeC4Editor, type LikeC4EditorCallbacks, } from './editor/LikeC4EditorCallbacks';
 export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, } from './LikeC4ProjectsProvider';
 export { type DiagramApi, type DiagramContext, useDiagram, useDiagramContext, useOnDiagramEvent, } from './hooks/useDiagram';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './hooks/useLikeC4Model';
-export { useCurrentViewModel } from './hooks/useCurrentViewModel';
+export { type CurrentViewModel, useCurrentViewModel, useOptionalCurrentViewModel, } from './hooks/useCurrentViewModel';
 export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './hooks/useLikeC4Project';
 export { useLikeC4Styles } from './hooks/useLikeC4Styles';
 export { useUpdateEffect } from './hooks/useUpdateEffect';
@@ -15,6 +16,8 @@ export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
 export { LikeC4View } from './LikeC4View';
 export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View';
 export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
-export { useCurrentViewId } from './hooks/useCurrentView';
+export { useCurrentView, useCurrentViewId, } from './hooks/useCurrentView';
 export { pickViewBounds } from './utils/view-bounds';
 export { LikeC4ProjectsOverview, type LikeC4ProjectsOverviewProps, } from './LikeC4ProjectsOverview';
+export type { AdhocViewService, } from './adhoc-editor/actor.types';
+export { LikeC4AdHocViewEditor, } from './adhoc-editor/LikeC4AdHocViewEditor';

package/dist/index.js

@@ -2,17 +2,19 @@ export { IconRendererProvider } from './context/IconRenderer.js';
 export { LikeC4Diagram } from './LikeC4Diagram.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
 export { LikeC4EditorProvider } from './editor/LikeC4EditorProvider.js';
+export { createLikeC4Editor } from './editor/LikeC4EditorCallbacks.js';
 export { LikeC4ProjectsProvider } from './LikeC4ProjectsProvider.js';
 export { useDiagramContext, useOnDiagramEvent } from './hooks/useDiagram.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './hooks/useLikeC4Model.js';
-export { useCurrentViewModel } from './hooks/useCurrentViewModel.js';
+export { useCurrentViewModel, useOptionalCurrentViewModel } from './hooks/useCurrentViewModel.js';
 export { useChangeLikeC4Project, useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from './hooks/useLikeC4Project.js';
 export { useLikeC4Styles } from './hooks/useLikeC4Styles.js';
 export { useUpdateEffect } from './hooks/useUpdateEffect.js';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
 export { LikeC4View } from './LikeC4View.js';
 export { ReactLikeC4 } from './ReactLikeC4.js';
-export { useCurrentViewId } from './hooks/useCurrentView.js';
+export { useCurrentView, useCurrentViewId } from './hooks/useCurrentView.js';
 export { pickViewBounds } from './utils/view-bounds.js';
 export { LikeC4ProjectsOverview } from './LikeC4ProjectsOverview.js';
+export { LikeC4AdHocViewEditor } from './adhoc-editor/LikeC4AdHocViewEditor.js';
 export { useDiagram } from './hooks/safeContext.js';

package/dist/likec4diagram/DiagramUI.js

@@ -4,7 +4,6 @@ import { memo, useCallback } from 'react';
 import { ErrorBoundary } from '../components/ErrorFallback.js';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor.js';
-import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { Overlays } from '../overlays/Overlays.js';
 import { Search } from '../search/Search.js';
 import { RelationshipPopover } from './relationship-popover/RelationshipPopover.js';
@@ -23,7 +22,6 @@ const LikeC4DiagramUI = memo(() => {
   } = useEnabledFeatures();
   const rerender = useRerender();
   const overlaysActorRef = useOverlaysActorRef();
-  const searchActorRef = useSearchActorRef();
   const handleReset = useCallback(() => {
     console.warn("DiagramUI: resetting error boundary and rerendering...");
     rerender();
@@ -32,7 +30,7 @@ const LikeC4DiagramUI = memo(() => {
     enableControls && /* @__PURE__ */ jsx(NavigationPanel, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
-    enableSearch && searchActorRef && /* @__PURE__ */ jsx(Search, { searchActorRef }),
+    enableSearch && /* @__PURE__ */ jsx(Search, {}),
     enableRelationshipDetails && enableReadOnly && /* @__PURE__ */ jsx(RelationshipPopover, {}),
     enableCompareWithLatest && /* @__PURE__ */ jsx(LayoutDriftFrame, {})
   ] });

package/dist/likec4diagram/DiagramXYFlow.js

@@ -12,6 +12,7 @@ import { useDiagramActorSnapshot } from '../hooks/useDiagram.js';
 import { depsShallowEqual, useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { BuiltinEdges, BuiltinNodes } from './custom/index.js';
 import { deriveToggledFeatures } from './state/machine.setup.js';
+import { viewBounds } from './state/utils.js';
 import { useLayoutConstraints } from './useLayoutConstraints.js';
 import { useDiagram } from '../hooks/safeContext.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
@@ -44,9 +45,21 @@ function prepareNodeTypes(nodeTypes) {
     "seq-parallel": nodeTypes.seqParallel ?? builtinNodes["seq-parallel"]
   };
 }
+const viewportToTopLeft = (ctx) => {
+  const bounds = viewBounds(ctx);
+  return {
+    x: -bounds.x,
+    y: -bounds.y,
+    zoom: 1
+  };
+};
 const selectXYProps = ({ context: ctx, children }) => {
   const { enableReadOnly } = deriveToggledFeatures(ctx);
   const isNotEditingEdge = enableReadOnly || children.editor?.getSnapshot().context.editing !== "edge";
+  let nodesDraggable = !enableReadOnly && ctx.nodesDraggable;
+  if (ctx.dynamicViewVariant === "sequence" && ctx.view._type === "dynamic") {
+    nodesDraggable = false;
+  }
   return {
     enableReadOnly,
     initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
@@ -54,16 +67,12 @@ const selectXYProps = ({ context: ctx, children }) => {
     edges: ctx.xyedges,
     pannable: ctx.pannable,
     zoomable: ctx.zoomable,
-    nodesDraggable: !enableReadOnly && ctx.nodesDraggable,
+    nodesDraggable,
     nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
     fitViewPadding: ctx.fitViewPadding,
     enableFitView: ctx.features.enableFitView,
     ...!ctx.features.enableFitView && {
-      viewport: {
-        x: -ctx.view.bounds.x,
-        y: -ctx.view.bounds.y,
-        zoom: 1
-      }
+      viewport: viewportToTopLeft(ctx)
     }
   };
 };
@@ -96,19 +105,23 @@ function LikeC4DiagramXYFlow({
   } = useDiagramEventHandlers();
   const isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
     $isPanning.set(true);
-  }, isReducedGraphics ? 120 : 400), notPanning = useDebouncedCallback(() => {
+  }, isReducedGraphics ? 200 : 800), notPanning = useDebouncedCallback(() => {
     isPanning.clear();
     $isPanning.set(false);
-  }, isReducedGraphics ? 350 : 200), onMove = useCallbackRef((event) => {
+  }, { delay: 200 }), onMove = useCallbackRef((event) => {
     if (!event) {
+      isPanning.clear();
       return;
     }
     if (!$isPanning.get()) {
       isPanning.start();
+    } else {
+      notPanning();
     }
-    notPanning();
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    isPanning.clear();
+    if (event) {
+      notPanning();
+    }
     diagram.send({
       type: "xyflow.viewportMoved",
       viewport,
@@ -133,10 +146,10 @@ function LikeC4DiagramXYFlow({
       nodeTypes,
       edgeTypes,
       onNodesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyNodeChanges", changes });
+        diagram.send({ type: "xyflow.applyChanges", nodes: changes });
       }),
       onEdgesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyEdgeChanges", changes });
+        diagram.send({ type: "xyflow.applyChanges", edges: changes });
       }),
       background: initialized ? background : "transparent",
       fitView: false,

package/dist/likec4diagram/convert-to-xyflow.d.ts

@@ -1,6 +1,7 @@
-import { DynamicViewDisplayVariant, LayoutedView, WhereOperator } from '@likec4/core/types';
+import { DynamicViewDisplayVariant, LayoutedView, ViewId, WhereOperator } from '@likec4/core/types';
 import { Types } from './types';
 type ConvertToXYFlowInput = {
+    currentViewId: ViewId | undefined;
     view: LayoutedView;
     where: WhereOperator | null;
     dynamicViewVariant: DynamicViewDisplayVariant;

package/dist/likec4diagram/convert-to-xyflow.js

@@ -4,12 +4,11 @@ import { sequenceLayoutToXY } from './xyflow-sequence/sequence-layout.js';
 function convertToXYFlow({ dynamicViewVariant, ...params }) {
   const view = params.view;
   const isDynamic = view._type === "dynamic";
-  const { bounds, xynodes, xyedges } = isDynamic && dynamicViewVariant === "sequence" ? sequenceLayoutToXY(view) : diagramToXY(params);
+  const { xynodes, xyedges } = isDynamic && dynamicViewVariant === "sequence" ? sequenceLayoutToXY(view, params.currentViewId) : diagramToXY({ ...params });
   if (isDynamic && view.variant !== dynamicViewVariant) {
     return {
       view: {
         ...view,
-        bounds,
         variant: dynamicViewVariant
       },
       xynodes,
@@ -17,10 +16,7 @@ function convertToXYFlow({ dynamicViewVariant, ...params }) {
     };
   }
   return {
-    view: bounds === view.bounds ? view : {
-      ...view,
-      bounds
-    },
+    view,
     xynodes,
     xyedges
   };

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -1,12 +1,14 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { css, cx } from '@likec4/styles/css';
+import { useRafEffect } from '@react-hookz/web';
 import { EdgeLabelRenderer } from '@xyflow/react';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../../../hooks/safeContext.js';
+import { useSetState } from '../../../hooks/useSetState.js';
 import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
 import { useXYFlow, useXYStoreApi } from '../../../hooks/useXYFlow.js';
 import { isSamePoint } from '../../../utils/xyflow.js';
@@ -61,30 +63,28 @@ const RelationshipEdge = memoEdge((props) => {
     isControlPointDragging
   });
   let labelX = labelBBox?.x ?? 0, labelY = labelBBox?.y ?? 0;
-  const [labelPos, setLabelPos] = useState({
+  const [labelPos, setLabelPos] = useSetState({
     x: labelXY?.x ?? labelX,
     y: labelXY?.y ?? labelY
-  });
+  }, isSamePoint);
   useUpdateEffect(() => {
     if (isControlPointDraggingRef.current) {
       return;
     }
-    const next = {
+    setLabelPos({
       x: labelX,
       y: labelY
-    };
-    setLabelPos((current) => isSamePoint(current, next) ? current : next);
+    });
   }, [labelX, labelY]);
   const svgPathRef = useRef(null);
-  useEffect(() => {
+  useRafEffect(() => {
     const path = svgPathRef.current;
     if (!path || !isControlPointDragging) return;
-    const next = getEdgeCenter(path);
-    setLabelPos((current) => isSamePoint(current, next) ? current : next);
+    setLabelPos(getEdgeCenter(path));
   }, [edgePath, isControlPointDragging]);
   const updateEdgeData = useCallbackRef((controlPoints2) => {
-    const point = svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
-    if (labelBBox && point) {
+    const point = labelBBox && svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
+    if (point) {
       diagram.updateEdgeData(id, {
         controlPoints: controlPoints2,
         labelBBox: {
@@ -294,11 +294,10 @@ function ControlPoints({
     });
   };
   const onRmbControlPointerDown = (index, e) => {
-    if (controlPoints.length <= 1) {
+    if (controlPoints.length <= 1 || index >= controlPoints.length) {
       return;
     }
-    e.stopPropagation();
-    e.preventDefault();
+    stopAndPrevent(e);
     const newControlPoints = controlPoints.slice();
     newControlPoints.splice(index, 1);
     setTimeout(() => {

package/dist/likec4diagram/custom/edges/useControlPoints.js

@@ -1,8 +1,8 @@
+import { vector } from '@likec4/core/geometry';
 import { deepEqual } from 'fast-equals';
 import { useState } from 'react';
 import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
-import { vector } from '@likec4/core/geometry';
 import { bezierControlPoints } from '../../../utils/xyflow.js';
 
 function useControlPoints({
@@ -19,8 +19,8 @@ function useControlPoints({
     const next = data.controlPoints ?? bezierControlPoints(data.points);
     setControlPoints((prev) => deepEqual(prev, next) ? prev : next);
   }, [
-    data.controlPoints?.map((p) => `${Math.round(p.x)},${Math.round(p.y)}`).join("|") ?? "",
-    data.points.map((p) => `${Math.round(p[0])},${Math.round(p[1])}`).join("|")
+    data.points,
+    data.controlPoints ?? []
   ]);
   const insertControlPoint = useCallbackRef(({ x, y }) => {
     const sourceV = vector(sourceX, sourceY);

package/dist/likec4diagram/custom/edges/useRelationshipEdgePath.d.ts

@@ -1,5 +1,8 @@
 import { XYPosition } from '@xyflow/react';
 import { Types } from '../../types';
+/**
+ * @returns SVG path data string for relationship edge
+ */
 export declare function useRelationshipEdgePath({ props: { sourceX, sourceY, source, target, targetX, targetY, data, }, controlPoints, isControlPointDragging, }: {
     props: Types.EdgeProps<'relationship'>;
     controlPoints: XYPosition[];

package/dist/likec4diagram/custom/edges/useRelationshipEdgePath.js

@@ -1,12 +1,13 @@
-import { nonNullable } from '@likec4/core';
+import { nonNullable, vector } from '@likec4/core';
+import { getNodeDimensions } from '@xyflow/system';
 import { line, curveCatmullRomOpen } from 'd3-shape';
-import { useCallback } from 'react';
+import { shallowEqual } from 'fast-equals';
+import { useCallback, useMemo } from 'react';
 import { isTruthy, first, last } from 'remeda';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
-import { nodeToRect, getNodeIntersectionFromCenterToPoint, bezierPath, isEqualRects } from '../../../utils/xyflow.js';
+import { bezierPath, getNodeIntersectionFromCenterToPoint } from '../../../utils/xyflow.js';
 
 const curve = line().curve(curveCatmullRomOpen.alpha(0.7)).x((d) => Math.round(d.x)).y((d) => Math.round(d.y));
-const isSameRects = (a, b) => isEqualRects(a.sourceNode, b.sourceNode) && isEqualRects(a.targetNode, b.targetNode);
 function useRelationshipEdgePath({
   props: {
     sourceX,
@@ -20,41 +21,73 @@ function useRelationshipEdgePath({
   controlPoints,
   isControlPointDragging
 }) {
-  const {
-    sourceNode,
-    targetNode
-  } = useXYStore(
+  const [
+    sourceNodeWidth,
+    sourceNodeHeight,
+    targetNodeWidth,
+    targetNodeHeight
+  ] = useXYStore(
     useCallback(({ nodeLookup }) => {
-      const sourceNode2 = nonNullable(nodeLookup.get(source), `source node ${source} not found`);
-      const targetNode2 = nonNullable(nodeLookup.get(target), `target node ${target} not found`);
-      return {
-        sourceNode: nodeToRect(sourceNode2),
-        targetNode: nodeToRect(targetNode2)
-      };
+      const sourceNode = getNodeDimensions(nonNullable(nodeLookup.get(source), `source node ${source} not found`));
+      const targetNode = getNodeDimensions(nonNullable(nodeLookup.get(target), `target node ${target} not found`));
+      return [
+        Math.round(sourceNode.width),
+        Math.round(sourceNode.height),
+        Math.round(targetNode.width),
+        Math.round(targetNode.height)
+      ];
     }, [source, target]),
-    isSameRects
+    shallowEqual
   );
   const isModified = isTruthy(data.controlPoints) || isControlPointDragging;
-  if (isModified) {
-    const sourceCenterPos = { x: sourceX, y: sourceY };
-    const targetCenterPos = { x: targetX, y: targetY };
-    const nodeMargin = 6;
-    const points = data.dir === "back" ? [
-      targetCenterPos,
-      getNodeIntersectionFromCenterToPoint(targetNode, first(controlPoints) ?? sourceCenterPos, nodeMargin),
-      ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(sourceNode, last(controlPoints) ?? targetCenterPos, nodeMargin),
-      sourceCenterPos
-    ] : [
-      sourceCenterPos,
-      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints) ?? targetCenterPos, nodeMargin),
-      ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints) ?? sourceCenterPos, nodeMargin),
-      targetCenterPos
-    ];
-    return nonNullable(curve(points));
-  }
-  return bezierPath(data.points);
+  return useMemo(
+    () => {
+      if (!isModified) {
+        return bezierPath(data.points);
+      }
+      const sourceCenterPos = { x: sourceX, y: sourceY };
+      const targetCenterPos = { x: targetX, y: targetY };
+      const sourceNd = {
+        ...vector(sourceX, sourceY).subtract(vector(sourceNodeWidth, sourceNodeHeight).divide(2)).round().toObject(),
+        width: sourceNodeWidth,
+        height: sourceNodeHeight
+      };
+      const targetNd = {
+        ...vector(targetX, targetY).subtract(vector(targetNodeWidth, targetNodeHeight).divide(2)).round().toObject(),
+        width: targetNodeWidth,
+        height: targetNodeHeight
+      };
+      const nodeMargin = 6;
+      const points = data.dir === "back" ? [
+        targetCenterPos,
+        getNodeIntersectionFromCenterToPoint(targetNd, first(controlPoints) ?? sourceCenterPos, nodeMargin),
+        ...controlPoints,
+        getNodeIntersectionFromCenterToPoint(sourceNd, last(controlPoints) ?? targetCenterPos, nodeMargin),
+        sourceCenterPos
+      ] : [
+        sourceCenterPos,
+        getNodeIntersectionFromCenterToPoint(sourceNd, first(controlPoints) ?? targetCenterPos, nodeMargin),
+        ...controlPoints,
+        getNodeIntersectionFromCenterToPoint(targetNd, last(controlPoints) ?? sourceCenterPos, nodeMargin),
+        targetCenterPos
+      ];
+      return nonNullable(curve(points));
+    },
+    [
+      data.points,
+      isModified,
+      isModified ? sourceX : void 0,
+      isModified ? sourceY : void 0,
+      isModified ? targetX : void 0,
+      isModified ? targetY : void 0,
+      isModified ? sourceNodeWidth : void 0,
+      isModified ? sourceNodeHeight : void 0,
+      isModified ? targetNodeWidth : void 0,
+      isModified ? targetNodeHeight : void 0,
+      isModified ? data.dir : void 0,
+      isModified ? controlPoints : void 0
+    ]
+  );
 }
 
 export { useRelationshipEdgePath };

package/dist/likec4diagram/custom/nodes/ElementActions.d.ts

@@ -2,7 +2,6 @@ import { SimplifyDeep } from 'type-fest';
 import { ElementActionButtons } from '../../../base-primitives';
 import { BaseNodeData } from '../../../base/types';
 import { Types } from '../../types';
-import { NamedExoticComponent } from 'react';
 type WithExtraButtons = {
     /**
      * Add extra action buttons
@@ -54,7 +53,7 @@ export type ElementActionsProps = SimplifyDeep<{
  * />
  * ```
  */
-export declare const ElementActions: NamedExoticComponent<ElementActionsProps>;
+export declare function ElementActions({ extraButtons, ...props }: ElementActionsProps): import("react/jsx-runtime").JSX.Element;
 export type DeploymentElementActionsProps = SimplifyDeep<{
     selected?: boolean;
     data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo'> & BaseNodeData;

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

@@ -1,21 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
-import { deepEqual, shallowEqual } from 'fast-equals';
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 import { hasAtLeast } from 'remeda';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import '@xstate/react';
+import 'fast-equals';
 import { useDiagram } from '../../../hooks/safeContext.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
-const compareElementActionsProps = (a, b) => {
-  return deepEqual(a.data.id, b.data.id) && deepEqual(a.selected ?? false, b.selected ?? false) && deepEqual(a.data.modelFqn ?? null, b.data.modelFqn ?? null) && deepEqual(a.data.navigateTo ?? null, b.data.navigateTo ?? null) && deepEqual(a.data.hovered ?? false, b.data.hovered ?? false) && (!a.extraButtons && !b.extraButtons || shallowEqual(a.extraButtons, b.extraButtons));
-};
-const ElementActions = memo(({
+function ElementActions({
   extraButtons,
   ...props
-}) => {
+}) {
   const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
   const diagram = useDiagram();
   const { id, navigateTo, modelFqn } = props.data;
@@ -47,7 +44,7 @@ const ElementActions = memo(({
     buttons = [...buttons, ...extraButtons];
   }
   return /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
-}, compareElementActionsProps);
+}
 const DeploymentElementActions = ({
   extraButtons,
   ...props

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

@@ -7,6 +7,7 @@ import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { ElementActions } from './ElementActions.js';
 import { NodeDrifts } from './NodeDrifts.js';
 import { ElementDetailsButtonWithHandler } from './nodes.js';
+import { ElementToolbar } from './toolbar/ElementToolbar.js';
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 import { ElementData } from '../../../base-primitives/element/ElementData.js';
@@ -67,9 +68,9 @@ const ActorStepPort = ({
     )
   ] });
 };
-const hasModelFqn = (data) => isTruthy(data.modelFqn);
+const hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
 function SequenceActorNode(props) {
-  const { enableElementDetails, enableCompareWithLatest } = useEnabledFeatures();
+  const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
   const data = props.data;
   const {
     id,
@@ -109,9 +110,10 @@ function SequenceActorNode(props) {
       enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
       /* @__PURE__ */ jsx(ElementShape, { ...props }),
       /* @__PURE__ */ jsx(ElementData, { ...props }),
-      hasModelFqn(data) && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ElementActions, { ...props, data }),
-        enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { id, data })
+      hasModelFqn(props) && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ElementActions, { ...props }),
+        enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { id, data }),
+        !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props })
       ] })
     ] }),
     ports.map((p) => /* @__PURE__ */ jsx(ActorStepPort, { port: p, data: props.data }, p.id))