@likec4/diagram 1.45.0 → 1.46.2

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

@@ -4,11 +4,11 @@ import { nameFromFqn } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { VStack, styled, HStack, Box } from '@likec4/styles/jsx';
 import { bleed } from '@likec4/styles/patterns';
-import { Divider, ScrollAreaAutosize, Button, TooltipGroup, Tooltip as Tooltip$1, Text, ActionIcon } from '@mantine/core';
+import { Divider, ScrollAreaAutosize, Button, TooltipGroup, Tooltip as Tooltip$1, Text, ActionIcon, Notification } from '@mantine/core';
 import { useActorRef, useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
 import { memo, useEffect, useCallback, useRef, useState, useLayoutEffect, Fragment, forwardRef } from 'react';
-import { isEmpty, pipe, map, filter, isTruthy, partition, clamp } from 'remeda';
+import { isEmpty, pipe, map, filter, isTruthy, partition, clamp, entries } from 'remeda';
 import { Link } from '../../components/Link.js';
 import { PortalToContainer } from '../../components/PortalToContainer.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
@@ -21,9 +21,10 @@ import { endpoint, title } from './styles.css.js';
 import { useDiagram } from '../../hooks/safeContext.js';
 import { useRootContainerRef } from '../../context/RootContainerContext.js';
 import { roundDpr } from '../../utils/roundDpr.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.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 IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 import { Markdown } from '../../base-primitives/Markdown.js';
 
 function selectDiagramContext(c) {
@@ -143,7 +144,7 @@ const RelationshipPopover = memo(() => {
   ) });
 });
 const getEdgeLabelElement = (edgeId, container) => {
-  return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? container?.querySelector(`.react-flow__edge[data-id="${edgeId}"] .edge-center-point`) ?? null;
+  return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? container?.querySelector(`.likec4-edge-middle-point[data-edge-id="${edgeId}"]`) ?? null;
 };
 const POPOVER_PADDING = 8;
 const RelationshipPopoverInternal = ({
@@ -157,7 +158,7 @@ const RelationshipPopoverInternal = ({
   onMouseLeave
 }) => {
   const ref = useRef(null);
-  const { enableNavigateTo, enableVscode } = useEnabledFeatures();
+  const { enableNavigateTo, enableVscode, enableCompareWithLatest } = useEnabledFeatures();
   const { onOpenSource } = useDiagramEventHandlers();
   const containerRef = useRootContainerRef();
   const [referenceEl, setReferenceEl] = useState(null);
@@ -178,24 +179,26 @@ const RelationshipPopoverInternal = ({
           offset(4),
           autoPlacement({
             crossAxis: true,
-            padding: POPOVER_PADDING,
+            // padding: POPOVER_PADDING,
             allowedPlacements: [
               "bottom-start",
+              "bottom-end",
+              "left-start",
               "top-start",
+              "top-end",
               "right-start",
               "right-end",
               "left-end"
             ]
           }),
           size({
-            padding: POPOVER_PADDING,
             apply({ availableHeight, availableWidth, elements }) {
               if (wasCanceled) {
                 return;
               }
               Object.assign(elements.floating.style, {
-                maxWidth: `${clamp(roundDpr(availableWidth), { min: 200, max: 400 })}px`,
-                maxHeight: `${clamp(roundDpr(availableHeight), { min: 0, max: 500 })}px`
+                maxWidth: `${clamp(roundDpr(availableWidth), { min: 220, max: 400 })}px`,
+                maxHeight: `${clamp(roundDpr(availableHeight), { min: 100, max: 500 })}px`
               });
             }
           }),
@@ -254,7 +257,8 @@ const RelationshipPopoverInternal = ({
       styles: {
         viewport: {
           overscrollBehavior: "contain",
-          minWidth: 180
+          minWidth: 200,
+          minHeight: 40
         }
       },
       className: cx(
@@ -281,6 +285,7 @@ const RelationshipPopoverInternal = ({
             paddingTop: "2"
           },
           children: [
+            enableCompareWithLatest && /* @__PURE__ */ jsx(EdgeDrifts, { diagramEdge }),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -321,6 +326,25 @@ const RelationshipPopoverInternal = ({
     }
   );
 };
+const EdgeDrifts = ({ diagramEdge }) => {
+  const drifts = diagramEdge.drifts;
+  if (!drifts || drifts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Notification,
+    {
+      color: "orange",
+      withBorder: false,
+      withCloseButton: false,
+      title: "Changes:",
+      children: drifts.map((drift) => /* @__PURE__ */ jsxs(Text, { mt: 2, size: "sm", lh: "xs", children: [
+        "- ",
+        drift
+      ] }, drift))
+    }
+  );
+};
 const Relationship = forwardRef(({
   viewId,
   relationship: r,
@@ -333,6 +357,65 @@ const Relationship = forwardRef(({
   const targetId = getEndpointId(r, "target", targetNode);
   const navigateTo = onNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : void 0;
   const links = r.links;
+  const metadataEntries = r.hasMetadata() ? entries(r.getMetadata()).sort(([a], [b]) => a.localeCompare(b)) : null;
+  const metadataTooltipLabel = metadataEntries && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontWeight: 600,
+          fontSize: "10px",
+          color: "#868e96",
+          marginBottom: "2px",
+          letterSpacing: "0.5px",
+          textTransform: "uppercase"
+        },
+        children: "Metadata"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid rgba(0, 0, 0, 0.1)",
+          paddingTop: "6px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "6px"
+        },
+        children: metadataEntries.map(([key, value]) => {
+          const displayValue = Array.isArray(value) ? value.join(", ") : value;
+          return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "12px", fontSize: "12px", lineHeight: "1.4" }, children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                style: {
+                  fontWeight: 600,
+                  minWidth: "110px",
+                  color: "#495057"
+                },
+                children: [
+                  key,
+                  ":"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  color: "#212529",
+                  wordBreak: "break-word",
+                  flex: 1
+                },
+                children: displayValue
+              }
+            )
+          ] }, key);
+        })
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsxs(
     VStack,
     {
@@ -388,7 +471,37 @@ const Relationship = forwardRef(({
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ jsx(Box, { className: title, children: r.title || "untitled" }),
+        /* @__PURE__ */ jsxs(HStack, { gap: "xs", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(Box, { className: title, children: r.title || "untitled" }),
+          metadataTooltipLabel && /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              label: metadataTooltipLabel,
+              w: 350,
+              position: "right",
+              offset: 10,
+              openDelay: 300,
+              withArrow: true,
+              bg: "white",
+              c: "dark",
+              withinPortal: true,
+              styles: {
+                tooltip: {
+                  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                  border: "1px solid #dee2e6"
+                }
+              },
+              children: /* @__PURE__ */ jsx(Box, { display: "inline-flex", children: /* @__PURE__ */ jsx(
+                IconInfoCircle,
+                {
+                  size: 14,
+                  opacity: 0.5,
+                  style: { flexShrink: 0, cursor: "help" }
+                }
+              ) })
+            }
+          )
+        ] }),
         r.kind && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
           /* @__PURE__ */ jsx(Label, { children: "kind" }),
           /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r.kind })
@@ -411,7 +524,7 @@ const Relationship = forwardRef(({
                   _dark: "mantine.colors.dark[4]"
                 }
               },
-              children: /* @__PURE__ */ jsx(Markdown, { value: r.summary, fontSize: "sm" })
+              children: /* @__PURE__ */ jsx(Markdown, { value: r.summary, fontSize: "sm", textScale: 0.875 })
             }
           )
         ] }),

package/dist/likec4diagram/state/DiagramActorProvider.js

@@ -1,19 +1,19 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRafEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
-import { useState, useEffect, memo, useRef } from 'react';
-import { isNullish } from 'remeda';
+import { useRef, useState, useEffect, memo } from 'react';
+import { omitBy, 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, useDiagram } from '../../hooks/safeContext.js';
-import { useOnDiagramEvent } from '../../hooks/useDiagram.js';
+import { useEditorActorLogic } from '../../editor/useEditorActorLogic.js';
+import { DiagramActorContextProvider, DiagramApiContextProvider, useDiagram } from '../../hooks/safeContext.js';
+import { useOnDiagramEvent, useDiagramContext } from '../../hooks/useDiagram.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
-import { convertToXYFlow } from '../convert-to-xyflow.js';
 import { makeDiagramApi } from './diagram-api.js';
 import { diagramMachine } from './machine.js';
 import { DiagramToggledFeaturesPersistence } from './persistence.js';
@@ -30,8 +30,13 @@ function DiagramActorProvider({
   dynamicViewVariant: _defaultVariant
 }) {
   const xystore = useStoreApi();
-  const actorRef = useActorRef(
-    diagramMachine,
+  const editorActor = useEditorActorLogic(view.id);
+  const actor = useActorRef(
+    diagramMachine.provide({
+      actors: {
+        editorActor
+      }
+    }),
     {
       id: `diagram`,
       systemId: "diagram",
@@ -44,54 +49,61 @@ function DiagramActorProvider({
         fitViewPadding,
         nodesDraggable,
         nodesSelectable,
+        where,
         dynamicViewVariant: _defaultVariant
       }
     }
   );
+  const actorRef = useRef(actor);
+  if (actorRef.current !== actor) {
+    console.warn("DiagramMachine actor instance changed", {
+      context: {
+        previous: actorRef.current.getSnapshot().context,
+        current: actor.getSnapshot().context
+      }
+    });
+    actorRef.current = actor;
+  }
   const [api, setApi] = useState(() => makeDiagramApi(actorRef));
   useEffect(() => {
     setApi((api2) => {
-      if (api2.actor === actorRef) return api2;
+      if (api2.ref === actorRef) {
+        return api2;
+      }
+      console.warn(
+        "DiagramMachine actorRef changed, creating new DiagramApi instance, this should not happen during the lifetime of the actor"
+      );
       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();
   useEffect(
-    () => actorRef.send({ type: "update.features", features }),
-    [features, actorRef]
+    () => actor.send({ type: "update.features", features }),
+    [features, actor]
   );
   useEffect(
-    () => actorRef.send({
+    () => actor.send({
       type: "update.inputs",
-      inputs: { zoomable, pannable, fitViewPadding, nodesDraggable, nodesSelectable }
+      inputs: { zoomable, where, pannable, fitViewPadding, nodesDraggable, nodesSelectable }
     }),
-    [zoomable, pannable, fitViewPadding, actorRef, nodesDraggable, nodesSelectable]
+    [zoomable, where, pannable, fitViewPadding, actor, nodesDraggable, nodesSelectable]
   );
   useUpdateEffect(() => {
     if (!_defaultVariant) return;
-    actorRef.send({ type: "switch.dynamicViewVariant", variant: _defaultVariant });
-  }, [_defaultVariant, actorRef]);
-  return /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: api, children: [
-    /* @__PURE__ */ jsxs(ErrorBoundary, { children: [
-      /* @__PURE__ */ jsx(
-        DiagramXYFlowSyncProvider,
-        {
-          view,
-          where,
-          actorRef
-        }
-      ),
-      /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef, children })
-    ] }),
+    actor.send({ type: "switch.dynamicViewVariant", variant: _defaultVariant });
+  }, [_defaultVariant, actor]);
+  useRafEffect(
+    () => actor.send({ type: "update.view", view, source: "external" }),
+    [actor, view]
+  );
+  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actor, children: /* @__PURE__ */ jsxs(DiagramApiContextProvider, { value: api, children: [
+    /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef: actor, children }) }),
     /* @__PURE__ */ jsx(DiagramActorEventListener, {})
-  ] });
+  ] }) });
 }
 const selectFromActor = ({ context }) => {
   let toggledFeatures = context.toggledFeatures;
-  const hasDrifts = context.view.drifts != null;
+  const hasDrifts = context.view.drifts != null && context.view.drifts.length > 0;
   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) {
@@ -115,62 +127,42 @@ function CurrentViewModelProvider({ children, 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 }) });
 }
-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,
+    // 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 = 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;
-        }
+  useOnDiagramEvent(
+    "initialized",
+    ({ instance: xyflow }) => {
+      try {
+        handlersRef.current.onInitialized?.({ diagram, xyflow });
+      } catch (error) {
+        console.error(error);
       }
-    );
-    return () => {
-      subscription?.unsubscribe();
-    };
-  }, [diagram]);
+    },
+    { once: true }
+  );
+  const toggledFeatures = useDiagramContext(
+    (ctx) => ctx.toggledFeatures,
+    shallowEqual
+  );
+  useUpdateEffect(() => {
+    DiagramToggledFeaturesPersistence.write(omitBy(toggledFeatures, isNullish));
+  }, [toggledFeatures]);
   return null;
 });
 

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

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

package/dist/likec4diagram/state/assign.js

@@ -1,9 +1,9 @@
 import { nonNullable } from '@likec4/core';
+import { vector } from '@likec4/core/geometry';
 import { getNodeDimensions } from '@xyflow/system';
 import { deepEqual } from 'fast-equals';
 import { mergeDeep } from 'remeda';
 import { assertEvent } from 'xstate';
-import { vector } from '../../utils/vector.js';
 import { getNodeCenter } from '../../utils/xyflow.js';
 import { updateNodes } from '../../base/updateNodes.js';
 import { updateEdges } from '../../base/updateEdges.js';
@@ -29,10 +29,10 @@ function mergeXYNodesEdges(context, event) {
     view: nextView
   };
 }
-function focusNodesEdges(params) {
-  const { xynodes: _xynodes, xyedges: _xyedges, focusedNode } = params.context;
+function focusNodesEdges(context) {
+  const { xynodes: _xynodes, xyedges: _xyedges, focusedNode } = context;
   if (!focusedNode) {
-    return {};
+    return null;
   }
   const focused = /* @__PURE__ */ new Set([focusedNode]);
   const xyedges = _xyedges.map((edge) => {
@@ -55,7 +55,6 @@ function focusNodesEdges(params) {
   };
 }
 function updateNodeData({ context, event }) {
-  console.log("updateNodeData called", event);
   assertEvent(event, "update.nodeData");
   const xynodes = context.xynodes.map((node) => {
     if (node.id !== event.nodeId) {
@@ -105,14 +104,18 @@ function resetEdgeControlPoints(nodeLookup, edge) {
     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))
+      centerOfTopBoundary.add(vector(-loopSize / 2.5, -loopSize)).round().toObject(),
+      centerOfTopBoundary.add(vector(loopSize / 2.5, -loopSize)).round().toObject()
     ];
   }
   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))];
+  const sourceToTarget = targetBorderPoint.subtract(sourceBorderPoint);
+  return [
+    sourceBorderPoint.add(sourceToTarget.multiply(0.4)).round().toObject(),
+    sourceBorderPoint.add(sourceToTarget.multiply(0.6)).round().toObject()
+  ];
 }
 
 export { focusNodesEdges, mergeXYNodesEdges, resetEdgeControlPoints, updateEdgeData, updateNodeData };

package/dist/likec4diagram/state/createViewChange.js

@@ -12,6 +12,7 @@ function createViewChange(parentContext) {
       // Ignore layout type from view
       ...view
     },
+    xynodes,
     xystore
   } = parentContext;
   const { nodeLookup, edgeLookup } = xystore.getState();
@@ -22,22 +23,24 @@ function createViewChange(parentContext) {
       console.error(`Internal node not found for ${node.id}`);
       return node;
     }
-    const dimensions = getNodeDimensions(internal);
-    const isChanged = !isSamePoint(internal.internals.positionAbsolute, node) || node.width !== dimensions.width || node.height !== dimensions.height;
+    const xynodedata = xynodes.find((n) => n.id === node.id)?.data ?? internal.data;
+    const position = internal.internals.positionAbsolute;
+    const { width, height } = getNodeDimensions(internal);
+    const isChanged = !isSamePoint(position, node) || node.width !== width || node.height !== height;
     if (isChanged) {
       movedNodes.add(node.id);
     }
     return {
       ...node,
-      shape: internal.data.shape,
-      color: internal.data.color,
+      shape: xynodedata.shape,
+      color: xynodedata.color,
       style: {
-        ...internal.data.style
+        ...xynodedata.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)
+      x: Math.floor(position.x),
+      y: Math.floor(position.y),
+      width: Math.ceil(width),
+      height: Math.ceil(height)
     };
   });
   const edges = map(view.edges, (edge) => {
@@ -66,6 +69,7 @@ function createViewChange(parentContext) {
   });
   const snapshot = {
     ...view,
+    _layout: "manual",
     bounds: calcViewBounds({ nodes, edges }),
     nodes,
     edges

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

@@ -1,7 +1,9 @@
 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 { OpenSourceParams } from '../../LikeC4Diagram.props';
+import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { Types } from '../types';
 import { AlignmentMode } from './aligners';
 import { DiagramActorRef, DiagramContext, DiagramEvents } from './types';
@@ -13,19 +15,30 @@ type Fqn<A> = t.aux.Fqn<A>;
 type NodeId = t.aux.NodeId;
 type EdgeId = t.aux.EdgeId;
 export interface DiagramApi<A extends Any = Unknown> {
+    /**
+     * React ref to the diagram actor
+     */
+    readonly ref: RefObject<DiagramActorRef>;
+    /**
+     * @warning Do not use in render phase
+     */
     readonly actor: DiagramActorRef;
     /**
      * @warning Do not use in render phase
      */
     readonly currentView: t.DiagramView<A>;
+    overlays(): OverlaysActorRef;
     /**
      * Send event to diagram actor
      */
     send(event: DiagramEvents): void;
     /**
      * Navigate to view
+     * @param viewId - Target view ID
+     * @param fromNode - Node from which navigation was triggered
+     * @param focusOnElement - Element FQN to focus after navigation (from search)
      */
-    navigateTo(viewId: ViewId<A>, fromNode?: NodeId): void;
+    navigateTo(viewId: ViewId<A>, fromNode?: NodeId, focusOnElement?: Fqn<A>): void;
     /**
      * Navigate back or forward in history
      */
@@ -76,6 +89,11 @@ export interface DiagramApi<A extends Any = Unknown> {
      * Focus node
      */
     focusNode(nodeId: NodeId): void;
+    /**
+     * Focus on element by FQN (finds the node and focuses on it).
+     * Used by search to highlight an element on the current view.
+     */
+    focusOnElement(elementFqn: Fqn<A>): void;
     /**
      * @warning Do not use in render phase
      */
@@ -105,5 +123,5 @@ export interface DiagramApi<A extends Any = Unknown> {
      */
     switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void;
 }
-export declare function makeDiagramApi<A extends Any = Unknown>(actor: DiagramActorRef): DiagramApi<A>;
+export declare function makeDiagramApi<A extends Any = Unknown>(actorRef: RefObject<DiagramActorRef>): DiagramApi<A>;
 export {};